• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Building an UltraDev Site fro... > Planning Your UltraDev Site

Planning Your UltraDev Site

When I was a kid, I used to love to build model cars. In particular, I took pride in the fact that I was able to convert a bunch of steel gray plastic parts into a fire-engine red sports car or a lean, mean, battle-ready jet fighter. One of the first models I ever worked on was a 1957 Chevy Bel Air, and I remember standing in the store and looking at the picture on the box knowing that one day soon I would have a replica of this hot rod sitting on my shelf.

Unfortunately, I also remember taking the model home, dragging out all the pieces and slapping together the plastic parts as quickly as possible so I could paint it and show all my friends how cool it was. By the end of the process, I had lost a couple of parts, glue was everywhere, and my model looked more like a ’57 Chevy rusting behind a barn somewhere instead of the showroom beauty that I had hoped for.

However, I quickly learned that there was more to model building than just gluing and painting. In fact, I discovered that the planning process and the procedures followed during the construction were just as important to the building of the model as the wheels or the doors. For instance, I discovered that I could avoid losing parts if I left them in the box until I needed them and that my paint jobs improved significantly if I let the glue dry first.

While reminiscing about my model-building days might be a lot of fun for me, you might be wondering what on Earth this has to do with building Web sites using UltraDev. Essentially, a dynamic Web site is nothing more than a model built using raw code, hyperlinks, and databases instead of plastic parts, glue, and paint. In addition, the planning phase of building a Web site and the procedures followed throughout the process always have a direct influence on the quality of the end-result.

Developing a Site Map

One of the most useful tools you can use in the development of any Web site is a site map. A site map is a diagram that visually represents the pages that comprise your site and the relationships between those pages. Depending on the size and complexity of your Web site, you may be able to draw a diagram similar to the one in Figure 4.1 using pen and paper, or you may need diagramming software such as Microsoft Visio or netViz Professional.

Figure 4.1. A site map can speed the development process by giving your site direction.

Also, keep in mind that a site map is always a work in progress. As your plans for your site change, so will the look and feel of your site map. Don’t be afraid to mark it up or make additions or deletions to it. I always keep a photocopy handy of any site map that I make so I can draw all over it as ideas come to mind.


UltraDev’s Site Mapping Tool UltraDev comes with some pretty cool site mapping tools that can definitely help you identify and resolve problems in your site. However, while these tools are handy for checking the relationships between your pages, they won’t help you plan your site before you build it. Writing out a site map prior to the building phase will help you conceptualize the structure your site requires, something that UltraDev’s site map can’t do because it only works after the site is built.


Building a Better Site Through Documentation Documenting your site, its pages, and its links is critical to the success of your site. A site that is difficult to navigate and contains broken links to other pages or sites quickly discourages the average user.

Planning Your Pages and Directories

When building your site map, you should consider the file structure that your site will be using. It’s likely that your site can be categorized into specific areas of functionality, and these areas can usually be represented by individual directories. In addition, you should take into account any special directories that might be needed to store databases, images, or other multimedia elements.

By diagramming the pages, directories, and databases you intend to use throughout your site, you give yourself a roadmap to guide your creative efforts. In addition, a site map gives you a quick reference to the relationships between documents and site elements and a way to visualize the structure of your Web site.


A Good Naming Convention Goes a Long Way When planning your pages, it is a good idea to develop a naming convention that is easily identifiable to others who may need to work with the files. Giving your files cryptic names serves no purpose other than to confuse yourself and others when it comes time to find a file. Also, it’s a good idea to avoid using spaces or symbols in your file names because different browsers and Web servers interpret these characters differently.

Finally, although NT servers are not case sensitive when it comes to filenames, UNIX and Linux servers treat uppercase filenames differently than lowercase filenames. Therefore help.htm and Help.htm are two entirely different files.


Stick to Lower Case For consistency, use file names that are all lower case. That way, you don’t need to worry about the case of the file name when other users try to reach it.

Cataloging Your Site Elements

In addition to laying out the relationships between pages, it’s usually a good idea to get a clear idea of what elements will be required to construct each page. Examples might include images, sounds, scripts, forms, database connections, or a host of other options. By defining what elements each page relies upon, you document the files you need to gather before the building process begins.


Gather What You Can Sometimes it is impossible to have every graphic, sound, or database in front of you when you start the design process. Other times, you may find that you need an element that you had not originally anticipated. Luckily, UltraDev allows you to put a placeholder where an element should be and replace it at a later date using the search and replace tools discussed later in this chapter.

Although not absolutely necessary, you might also consider creating an additional extended site map that includes a description of each element that your pages require. An extended site map helps you quickly identify which elements are needed to build a page and can be used to keep track of the elements you may need to create or collect from other departments.

Static Pages

Although you are building a dynamic Web site, it is likely that you may still have a need for static Web pages. Keep in mind that static pages have the advantage of being easy to update without the worry of altering any of your site’s database connections.


Choosing Your File Name Extensions When developing your site, you may be tempted to use the same extension for both your dynamic pages (.asp, .jsp, or .cfm) and your static pages to provide uniformity throughout your site. I have found that maintaining the .htm or .html extension for static pages has the benefit of making them easy to identify and lets me know whether a page should be performing a dynamic function without ever having to open it. Also, because an HTML document requires no additional processing on the server side, this results in a reduced server load and your HTML page may load faster than a similar ASP page. Your visitors will appreciate this.

Dynamic Pages

Depending on the size and purpose of your site, it is possible that you may be using more than one database throughout your site. By cataloging your dynamic pages, you can specify which database connections each page relies on and the tables each connection needs to make the data available via the Web.


Identifying Dynamic Pages When laying out your site map and determining which folders will store dynamic pages, it is a good idea to mark those folders with dynamic identifiers. Because dynamic pages require different permissions from those of static pages, you can run into trouble quickly if you forget to adjust the folder permissions accordingly. Labeling the folders can help remind you to adjust the permissions when you begin building your site.

If you do choose to reserve the .asp, .jsp, or .cfm extensions for your dynamic pages, you should have no difficulty distinguishing your dynamic pages from your static pages. If, however, you choose to maintain the same extension for all pages in your site, you might consider adding a distinguishing mark to both your static and dynamic pages when creating your site map. As shown in Figure 4.2, I use the lightning bolt icon that UltraDev uses to show that a page relies on a database connection.

Figure 4.2. Distinguishing your dynamic pages helps you easily identify those that rely on database connections.


Finding the Lightning Bolt Just in case you want to use the lightning bolt icon for your site map, it can be found in the Macromedia\Dreamweaver UltraDev 4\Configuration\DataSources\ASP folder on your local hard drive. The file name is DSL_D.gif.


The driving force behind your dynamic Web site is obviously your database, and before building your site, you should have already given careful consideration to the database design. Complex dynamic pages can get very tricky when you are building pages that draw from more than one table or even multiple databases. As shown in Figure 4.3, a comprehensive site map should include references to the databases and tables being used.

Figure 4.3. Your site map should also include database connections.

Images, Sounds, and Multimedia

If content is king on the Internet, the look and feel of your Web site is certainly queen. Adding attractive graphics to your site not only enhances its physical presence, but also helps your visitors navigate your site.

Unless you are building a site for a corporate Intranet where you know the processor capabilities and browser that your visitors will be using, remember that multimedia elements function differently when accessed from different browsers. In addition, packing your page with tons of graphics might look nice to someone with a T1 LAN connection, but may frustrate a visitor with a 28.8 connection enough to force them to leave.


Avoiding Bandwidth Thieves Placing your images in a separate folder can help you detect bandwidth thieves. These people build Web pages that link directly to the images stored on your Web site rather than storing the images on their own servers. Theft of bandwidth can substantially slow the performance of your Web site because your server will be serving images for multiple sites.

By placing all your images in a separate folder, you can quickly scan your server’s log files and assure that the images are only being requested by pages on your site. If other Web sites are consistently requesting your images, you can investigate and determine whether they are, indeed, stealing your bandwidth.

Mapping Your Site Using UltraDev’s Site Window

One of the most overlooked tools that UltraDev has to offer is its ability to maintain a basic site map for you. Once you have defined the parameters for your site, you can use the UltraDev site map to ensure that the relationships between your pages match the proposed relationships that you developed in your original site map. Think of it as an easy way to check your work as you go.

Before you can take advantage of UltraDev’s Site Management tools, you have to define the parameters of your site. Defining a site is an easy process and you can define as many different sites as you wish.

Exercise 4.1 Defining Your UltraDev Site

In the root directory of your Web server folder, create a new folder and name it InsideUD4. Throughout the rest of the chapters, you will use this folder to build a database-driven Web site. If you do not have Personal Web Server or IIS installed on your workstation, or your site is hosted remotely, create a new folder on your local hard drive with the path C:\UD4Sites\InsideUD4.


FindingYour Root Folder Remember, if you are using Personal Web Server, Internet Information Server 4, or the Internet Information Services 5 on your local machine, the default path to your Web server root is C:\Inetpub\wwwroot\. Other Web server software, such as Apache, may use /usr/local or /usr/local/htdocs as the Web server root.

Open UltraDev 4 and choose Site/Define Sites from the drop-down menu. In the Define Sites dialog box, click the New button. As shown in Figure 4.4, UltraDev opens the Site Definition dialog box for your new site.

Figure 4.4. The Site Definition dialog box allows you to configure your site.

With the Local Info category selected in the Category column on the left side of the dialog box, type InsideUD4 for the Site Name and choose the path to the InsideUD4 folder that you created in Step 1.

Leave the box checked next to Refresh Local File List Automatically. If you have a Fully Qualified Domain Name (FQDN), you can enter it in the HTTP Address box. Entering your domain name gives UltraDev the ability to check links within your site that use that domain name.

To maximize the performance of UltraDev’s Site window, leave the box checked next to Cache.

Click OK to close the Site Definition dialog box. UltraDev indicates that an initial cache for the site will be created. Click OK to close the pop-up box. As shown in Figure 4.5, you should now see your site listed in UltraDev’s Define Sites box.

Figure 4.5. Your new site has been successfully created.

Click the Done button and UltraDev will bring you to the Site window. As shown in Figure 4.6, you should now have a blank site with the Local Folder (in the right pane) pointing to your new Web site root.

Figure 4.6. The Site window now displays the root folder for your site.

For now, leave the Site window open.


Mapping Existing Sites If you already have an existing site and are adding dynamic capabilities, you can configure UltraDev to map those files as well. Simply set up your new UltraDev site using your existing site’s root folder and UltraDev will do the rest.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint