New Webpage Step-by-Step

  1. On your Photoshop design, set rulers to pixels. Get X (distance from LEFT), Y (distance from TOP) coordinates, and width of each DIV.
  2. Make sure all JPGs and GIFs used on your page are inside “images” folder that’s inside “web1” folder. (JPGs: landscape, twins, galileo banners; GIF: color table, your page logo)
  3. Start a new HTML file in Dreamweaver. Save this new file as “index.html” in “web1” folder (it will replace previous index page).
  4. Open “stylesheets.html” and copy styles from head of the file; copy from beginning of styles tag. Paste this into head of your new index page (between close title tag and close head tag).
  5. Adjust the settings for “p” (paragraph) and headlines (h1, h2) so they’re appropriate for your page. You may also want to fix settings for a:link and a:visited.
  6. At the bottom of the list of styles (above the close-styles tag) define your DIVs for the page. Use the X, Y and width coordinates you already wrote down. (see sample 1 below)
  7. In the body tag add in either bgcolor attribute or background attribute. For bgcolor fill in the hexadecimal of your background color <body bgcolor=”#ffff00″>, for background fill in the link and name of the image file <body background=”images/bg5.gif”>.
  8. In the body of the webpage, call out the first DIV. Place contents inside that first DIV. Make sure you have a close DIV tag. (see sample 2 below)
  9. Write code for the links on the page. (see sample 3 below)

sample 1 (in styles in head of page):
div.leftcolumn {position:absolute; left:15px; top:0px; width:400px}

sample 2 (in body of page):
<div class=”leftcolumn”><img src=”images/logo.gif /><br />
<h1>If I Could Speak to 1,000,000 People</h1>
<p>Fourscore and seven years ago our foreparents brought forth upon this continent a new nation… etc.</p>
<img src=”images/galbanner01.jpg” /></div>

sample3 (links):
<a href=”color.html”>COLORS</a>
(this will only work if color.html is in the same folder with index.html)

sample4 (if you have a table inside your DIV):

<table border=”0″ cellspacing=”0″ cellpadding=”10″ width=”400px”>
<tr>
<td width=”120px” valign=”top” bgcolor=”#996600″><p>Colors<br />
Backgrounds<br />
Brooklyn<br />
Project<br />
</p></td>
<td width=”10px”>&nbsp;</td>
<td width=”270px” valign=”top”>
<h1>If I Could Speak to 1,000,000 People</h1>
<p>Fourscore and seven years ago our foreparents brought forth upon this continent a new nation…</p></td>
</tr>
</table>