WEB Building 123 (Dreamweaver)
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
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
Size your photo in its final dimension before inserting it in your WEB
site. Resizing photos after inserting them will lengthen the time for
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
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.
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.
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.
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
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
When replacing files, delete the previous files first. Then up load the
17. You are up
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.
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
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