SF Sites Website Next Steps


  • Do NOT copy from the Internet. Some of you copied entire entries from websites. This is plagiarism; it’s not your original writing. You must PUT IT IN YOUR OWN WORDS.
  • Organize the information. A good place to start: When was the location built? Who built it? Who designed it? Why did they design it? Tell the story of changes in the building in chronological order (time order). Then describe the building and give your opinions.
  • Mr. Machtay is returning your articles with comments. Please see Mr. Machtay immediately if you can’t read or don’t understand a comment. Fix your written article. If the teacher requested fixes and you keep it the same your grade will be lowered.


  • Some of you did not respect the columns (DIVs). Define the DIVs and define the gutters (space between the DIVs). It will be easier to construct your site this way. Use guidelines if you need them.
  • Headlines, Logo and Links can be in any typeface you choose, with any effects you like — these can be done in Photoshop.
  • Text for your site should not be larger than 12 point and must be in either Trebuchet, Verdana or Times New Roman.


  1. On your Photoshop design set Rulers to Pixels. With 0,0 in the upper left corner, write down how far from the Left (X) each DIV is, and how far from the Top (Y) each DIV is; then the width in pixels of each DIV. Write down Hexadecimal for background color.
  2. Create a folder with name of your location. NO SPACES. NO PUNCTUATION MARKS. Your HTML pages will go in this folder.
  3. Inside your location folder, create a folder called “images.” All JPGs and GIFs will go into this folder.
  4. Take the resized images used in your Photoshop design and place them in your images folder. The images in this folder should be the correct size for design of your page.
  5. In Dreamweaver, open a new HTML page. Save it in your location folder as “index.html.”
  6. Go back to the portfolio website you built last semester. You can copy and paste the CSS Stylesheets from the head of this file into the head of your new index.html file.
  7. Once you have the Stylesheets in place, change where needed. Set the new names and new positions of each DIV for this new site.
  8. Set your Stylesheet Formatting (font, size, color, line-height, etc) so text and headlines and pullquotes will be correctly formatted.
  9. Flow contents into index.html page. Then duplicate this page, name the new one page2.html. On page2.html replace content with new content and new pictures. Create link between index and page2.
  10. Check site for any errors. And you should be done.