http://members.cox.net/kotaro
kotaro@cox.net

Dreamweaver 4

1. Plan your WEB site
Picture your WEB site. Visit some examples and organize what you like and dislike about them. Do not spend too much time on the first one you design. Not too many pages. You can always change your WEB site for the better and add more pages. Put it up and see how it looks first. You do not want to spend too much time working on the WEB since you will change it anyway. Cartooning is a good way to visualize your pages. Sketch out each page and see if the navigation is easy.
Consider placing a site map on your site. Linked site map allows the viewer direct access to information of their choice. Nothing is more frustrating when you cannot go to the information you need quickly.

2. Speed is everything
Average people will wait for about 5 seconds for loading. If a page takes 8 seconds to open, most people will click on to somewhere else. You want to keep the loading time to 3 seconds or less. To accomplish this, you need to keep everything simple and understand how the WEB works. The following list indicates ways to make your page loading faster. Cable line is much faster than phone line. If you are building a WEB site, consider the user with a slow computer with slow modem over a phone line.

Keep it simple (fewer objects)
Small photos, fewer photos (graphics are photos too)
No resizing of photos after insert
Use standard colors (Index color, web color) (72 DPI)
Use standard fonts and size
Use html without overlay programs such as PowerPoint and Word.

3. Programs recommended for the WEB site building
You need Dreamweaver for html writing, Photoshop for photo production, Freehand type graphics program, Flash and Fireworks for more sophisticated WEB designs. Other programs such as PowerPoint and Word do create html but they will create complex site that takes too long to open and will not work with some of the browsers.

4. Photo size (no re-sizing after insert)
Photo is measured by pixel size. For example, 200 means 200 pixels using 72 DPI (dots per inch). The photo will be 2.77 inches (200/72) long. 200 x 200 photo will contain 40,000 pixels (40K) and the size will be 2.7 inches by 2.7 inches.
Do not use the photo larger than 300K. It will take too long to load up on screen.
Size your photo in its final dimension before inserting it in your WEB site. Resizing photos after inserting them will lengthen the time for loading.

5. Photo format
GIF and JPEG are good. TIFF is not good for WEB. RGB color will take a long time to load since it is not WEB standard. Use Index Color with WEB standard colors for fast loading.

Save in JPEG format only those images that contain lots of colors and shading. Black-and-white or gray-scale pictures and pictures with large areas of a few colors should be saved as GIF files. GIF compresses images by saving in shorthand format large areas of a single color. So if your image has just a few areas of basic colors, it will be much smaller in GIF than in JPEG format.

6. Size of page
80% household has 800x600 screen. Size the screen size for the target audience.
Printing in the vertical format will be 8" wide (576 pixels) by 10.5" high (765 pixels). More than these numbers will cut off the portion of the printed page.
There is an auto-stretch function that adjusts the size of your document according to the monitor size.

7. Index.html
You need to save the cover (first) page of your site as "Index". WEB browser will open this file first. Set up a new folder at your computer and save all the files in that folder (Root Folder). This will be used to upload the files to a server. Save the file and open your browser. Open the html to see what you have done so far. What you see on Dreamweaver is very different from what you see on browsers. It is recommended to create an image folder to keep all the graphics organized.

8. Tables and cells
In the Layout View, you can insert tables and cells. The table defines the page (paper) size. The cells are the area where you can put texts and photos. This is a way to reduce the amount of information transferred through phone lines. If the entire page is a photo (pixel information), it will take a long time to load the image on screen. By not providing information where it is not used, the image will go through much faster.
First, insert a table (800 x 600 for example). Then insert cells where you need them. You can use the arrow keys for fine movement of the cells.

9. Layers
At Standard View (there are Standard and Layout view options at View options), you can create Layers. Layers are more flexible than cells. They can overlap and they can be specified to move as well.

10. Color Scheme
Dreamweaver lets you choose the color theme of the site. Select Command then Set Color Scheme.
To change a color, select Code and Design View and see the color code. WEB color is defined by 6 digit numbers and letters. Black is #000000. White is #FFFFFF. To change one color in the Color Scheme, select the color code in the Code View and replace with a new code. It is located at Properties Window at the bottom of the screen. Select a blank window next to Size window and find out the color code of your selected color.

11. Fonts (Typing)
The WEB standard is Times New Roman with size 3 (about 12 pt.). There are only two line spacing and there are no tabs. Line spacing will be double-spacing standard. For single line spacing, press and hold Shift when you press Enter. To move the letter to the right, press Ctrl and Shift at the same time then press Space Bar.

12. Insert photos
Select Insert, then Image to insert photographs and graphic images.
The image will stretch the cell and the table to fit. This means, over-sized image will enlarge your page without your knowledge. Check your saved html to see if the image comes up where you intended.

13. Links (URL, html, and Email)
You can link anything on the page to other pages, other sites, and Email. Select words, photos, or images to make a link. Other page or site links are located at Properties Window at the bottom of the screen. Email link is at Object Window at the left side of the screen. Links can be copied to other pages.

14. Bells and whistles
There are a lot of other animation you can do with this program. Study all the bells and whistles as you get used to using this program. When you see a site with interesting features you like to use, save it on your desktop and open the html using Dreamweaver. On Code and Design view, you will see the code highlighted when you click on the feature on the design window. Copy the code onto your WEB. You can copy the feature and you can study how to write html.
Caution: Too many moves and flashing images will make your page too busy and not effective.

15. WEB site setup
Domain name: You need a site name. There are .com, .org, and .net to select from. Names are one word without break, except you can use underline ( _ ), dash (-), or dot (.) to separate words such as "master_plan". The problem with symbols is that most people do not know the names of the symbols. Try to explain your WEB name over the phone. The simpler the better. Such as "masterplan.com" instead of "master_plan.com". Keep it short so it is easy to remember and less chance of misspelling.
Server space: You need to register your domain name and buy some server space on somebody's computer. It can be an in-house server but it has to be left on all the time and there is a danger of a hacker breaking into your computer. Yahoo and other internet access provider has server service for you. Check their WEB sites for the terms and conditions. Yahoo offers about $50 for a domain name registration and set up cost and $15 a month for the server space use. They also have bigger site arrangement as well. It takes about 2 days for set up time. There are also some free sites. They will add their advertisement on your site and the quality is not so good and not reliable.

16. Uploading
FTP (File Transfer Protocol) is a program that takes your file and place it on a remote computer. You have to set up just right to make it work. If your computer goes through Proxy Server, your FTP does not work. Dreamweaver has built-in FTP. You can also buy a FTP over internet. CuteFTP and WS_FTP are popular ones. This text will explain the one with Dreamweaver.

Root folder: Your WEB file on your computer (example: C:/Window/Desktop/WEBfolder)
Domain name: Your WEB site name (example: masterplan.com)
Password: Your password you entered when you established your site (8 digits or more for Yahoo, case sensitive)
Host name: Your host space name (example: ftp.masterplan.com for Yahoo sites)
Site Address: Your site address (example: http://www.masterplan.com)
Site Directory: You can keep it empty in this box

Keep above information on your computer and in written format. You will need them again and you will be very happy to have the printed information.

Start your Internet browser first. Then start Dreamweaver or FTP program.
Open site map and select your site or create your site using above information.
When connected, highlight all the files in your root folder and press "up".
When replacing files, delete the previous files first. Then up load the new files.

17. You are up and running
When everything goes well, your site is up and running. After hours of sweat and tears, it is an exciting moment. Test your site with different browsers (Internet Explorer and Netscape), different operating system (Windows 95, ME, OS, UNIX), and different size monitors. Do not forget printing them too. After all these testing, you can tell your friends about your accomplishment.
Spelling and grammar must be perfect. Any mistake will significantly diminish your site's credibility, not to mention your hours of effort.

18. Maintenance
Maintenance is an important part of WEB building. Not too many people will come back to your site if the uploaded information does not change. Uploading is very simple using FTP and allow some ideas that you can interact with the viewers. This is another reason to build a simpler WEB site.
I wish you a successful WEB site making. Please remember that you are paying $15 a month for your WEB site. When the site in no longer needed, close down the site as soon as possible.

19. Moving Objects (Dreamweaver)
You can create a moving object using Dreamweaver and Flash. Dreamweaver is limited to simple movement whereas Flash allows changing the size, darkness, rotation, and you can make objects appear and disappear.
Select Window/Timelines to open "Timelines" window.
Moving object must be in a layer. Use "Draw Layer" (third on the left tools) to create a layer and type or paste object to move. Select the layer (click at the layer box on screen) and select Modify/Timeline/Add Object to Timeline. You will see "Layer 1" appears on Timelines window. Select the layer box again then move the red marker on the Timeline window to 10 for example. This means there are 10 frames in this move. Grab and move the frame to the destination. A line appears on the Timeline window. Try the black arrow (right) to see the layer move. Specify Autoplay (start moving upon loading) and Loop (play continuously) at the Timeline window.