project structure : 

When building a web site, it's essential to create a folder/directory structure on your computer (or external media) that accommodates your whole project. This directory structure should include two major directories.

The source_files sub-folder includes folders for master art files (e.g. photoshop docs), flash files, sound files, etc. These files are never put on the web server.

The site sub-folder only contains the html files, GIF images, JPEG images, and any other files that are part of the website pages. The site folder exactly mirrors the structure of the files on the web server.

This organization keeps the files organized and easily accessed, and so that extraneous files do not get uploaded to the server. Photoshop and other master files should never be uploaded to the server. In addition, this single directory organization makes it simple to create backups and archives of the project by saving the entire directory.

To start the project, create a new folder, and then create several new folders inside this main project folder. A typical folder structure is like the following (the brackets "[]" indicate a folder/directory):

• [] project1
  • [] source_files
    • my_image.psd
  • [] proj1_site_v1
    • index.html
    • [] images
      • my_image.gif
    • [] products
      • index.html
      • [] images
    • [] sales
      • index.html
      • [] images
    • [] contact
      • index.html
      • [] images

It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you've made the site, you will, in all likelihood, break the links in your web pages.

For the web page file names, be sure you use "index.html" (or "index.htm") for your first web page. Using this special name will tell the server to display this page as the default page for any directory of html files. Other HTML files should have meaningful names such as products.html or drinks_snapple.html, rather than names such as page1.html. Name your files as if you are giving the web site to someone else who won't be able to ask you any questions, for example, you 6 months after the project is finished when you can't remember anything about it.

Web file naming rules:

• No spaces in the filenames
• Use all lowercase letters
• No special characters in the filenames: For example none of the following are acceptable in web filenames: "!~:&(,
• The files MUST have the proper suffix (.html, .gif, .jpg)
• Be consistent in your naming of files, for example use the same prefix in a series of files. Also, to ensure that the files alphabetize correctly, always "zero-pad" your filenames when they have numbers in them. In other words, if you have a series of files numbered 1-20, the first file should be something like myfile01.jpg, and the last file should be named myfile02.jpg.

And again, it's critical that you name your files correctly from the start. If you attempt to rename your files after you've created your site, you will, in all likelihood, break the links between your web pages.

recommended page size : 

total size (html+images+flash) for a web page should be 40-60K

Some typical download times under ideal conditions, which rarely happen:

You can check the size of your pages by looking at the display in the bottom-right corner of the document window, next to the page dimensions.

Note: This size does not include rollover images that are pre-loaded. To estimate the total size of your page including the rollover images, add the size of all the rollover images to the total shown by Dreamweaver. You can find the approximate size of a rollover image by double clicking on the normal image. The resulting dialog will show the size of the image in the right hand side of the main image, which is usually similar in size to the rollover image. If you want to know the exact size of the rollover, select INSERT>IMAGE and in the browse dialog, Dreamweaver will tell you the size of any file you click on.

The situation is more complicated than simply screen resolution:

• Explorer and Netscape have different amounts of space available for pages
• Macs and PCs have different amounts of space available for pages
• The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
• If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)

Based on all the variations, I've created a guide for designing pages for the three major screen resolutions, 640x480, 800x600, and 1024x768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project's requirements. You don't have to design exactly for these dimensions. In particular:

The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.

• Recommended maximum page dimensions for 800x600 screen: 770x400 (sample page)
• Recommended maximum page dimensions for 1024x768 screen: 990x560 (sample page)

Previewing page sizes in Dreamweaver

You can preview how your page will look by selecting your page size dimensions in the pull-down at the bottom-right of the document window in Dreamweaver. This will size the document window to the dimensions so you can judge your design in regard to its dimensions.

If the dimensions you want to view aren't available by default, you can edit the defaults by selecting EDIT SIZES in the pull-down. Or, you can also simply resize the page to the right size. Note: selecting one of these previews does prevent you from designing outside the selected dimensions! It just shows you what it would look like.

See pages 14-18 of Web Design in a Nutshell (O'Reilly) for more info. See webmaster.info.aol.com for information about AOL browser issues, and specifically their compatibility page webmaster.info.aol.com/compatibility.html

all materials on this web site © copyright 2005, Philip van Allen