Turn off your iPad. It is not to be used (in any way) in this classroom, either for academic or recreational use (unless approved by the instructor). Ignoring this will result in detention and further disciplinary action (Gross Misconduct/Refusal to comply). Did you remember to put your assignments in a folder? Did you label the folder after the assignment title? Did you save your file in the appropriate manner? If not: NO GRADE! Check your PowerSchool frequently. It's your RESPONSIBILITY!


(Due Date: March 5)

Website Design (Part II): Export and Site Preparation

The Internet/Web requires:

  • Proper naming conventions
  • Use all lower case letters in names
  • No spaces are allowed (unless you use “_” between words. i.e: “dog_house.jpg
  • Name things so that you know what they are (do not trust programs to name things for you)
  • File extensions are a must (“.jpg” “.doc” “.html”). Without them, the Internet is confused and lost.
  • Proper Color mode
  • RGB and Index colors are acceptable
  • CMYK, Lab Color, Black/White, MultiChannel and Duotone/Tritone are not acceptable
  • Proper File Types
  • JPG, GIF, PNG, MP3, SWF for dipsplay purposes. PDF and ZIP are acceptable for download
  • BMP, PSD, AI, FL, FLA, IND are not acceptable
  • Proper location of files and information
  • HTML stands for “Hypertext Markup Language”
  • WYSIWYG stands for "What You See Is What You Get"
  • A Webpage is a single page. A website is a collection of webpages.
  • HTML (web page files) build relationships between images and pages within a website
  • The connections (relationship) between a webpage and it’s images, files, and information are called “links” (No, a link is not just something to click on to visit a website)
  • Files, images, or “hyperlinks” to sites that do not work due to mistyping, or mis-linking, are known as “broken links”
  • The established set of relationships (links) between files, images, and content is known as “file hierarchy”
  • Assembly tools for page layout
  • Styles: These define how text and other HTML based graphics will appear on a page on within a website. This is commonly referred to as “CSSCascading Style Sheets)
  • Tables: These are used in forcing the website to conform to a specific look and size, causing text and graphics to display in a particular order and position.

Now that we have a decent understanding of what the Inernet/WorldWideWeb requires, we are in a better position to start putting things together. The basic webpage that was created in Photoshop has undergone some nice planning and arrangement. The color mode is RGB (Red Green Blue) so we know the Inernet will display the graphics properly. And, it is sliced up and the names are assigned in a proper fashion for the web to understand them.

In order for us to get it so the Internet can use it, we must “export” the Photoshop (.PSD) file into something that it understands.


  1. Go to File
  2. Choose Save for Web
    Make sure your settings are exactly like the ones displayed in the box above.

  3. Click “Save”
  4. Another dialogue box will appear, (“Save Optimized As”)
    Navigate to your “My First Site – Basic” folder using these settings:
  5. Click “Save” (This will export all of your slices into your “images” folder)
  6. Open Adobe Dreamweaver
  7. Select “Site” from the top menu bar
  8. Select “New Site” from the menu
  9. Call your site “My First Site – Basic” in the “Site Name” box
  10. In the “Local Site Folder” box, you need to navigate Dreamweaver to look into your “Website Development” folder and then go to “My First Site –Basic” folder.
  11. Your Dreamweaver “Files” sidebar should look like this: (If you cant' find it, go to Window, on the menu bar, and select "Files")

This is the general framework of your site. By establishing the site hierarchy in Dreamweaver, it will allow us to keep track of files and images within the context of the website as a whole. The pages will know of a link is bad or if an image is missing.

Using your right mouse button, click in the white area beneath the word “images” in the Files box and select “New File” and name it “design.htm”

This new “design.htm” file is going to be the webpage file that defines the look and feel of all the other website files in our website.

Your File window should now look like this:

Technically, even though no pages have been through layout, a website has been created.