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 I): Designing the Site

First things first: SAVE SOON, SAVE OFTEN.

  1. In your Multimedia folder, create a new folder and call it “Website Development”
  2. In the Website Development folder, create a new folder and call it “My First Site – Basic”
  3. In the My First Site – Basic folder, create a two new folders
    1. Create a folder called “images”
    2. Create a folder called “designs”
  4. Watch this video on Photoshop Layer Basics
  5. Open Adobe Photoshop
  6. In Adobe Photoshop, create a new file
  7. In the “Name” box, type “My First Website – basic”
  8. Select “Web” from the “Preset” dropdown menu
  9. Select “1152 x 864” from the “Size” dropdown menu
  10. Click “OK”
  11. Save your Photoshop file in the “designs” folder (as a .PSD file).

Now, you need to design your website to look exactly like the one below:

Use shapes, layers, gradients, text to recreate the site layout. The white area is for future content. You do not literally need to create the text that says "Content Goes Here."

Now, use your Rulers/Guides (watch this video first) to separate your webpage design like so. These smaller areas will become “slices,” the individual buttons and portions where content will go.

Use the "Slice" tool to slice your image up like so (If you cannot find the "Slice" tool, use Photoshop's "Help" at the far right of the menu bar):

Use the “Slice Select Tool” and double click on the “01” slice. A dialogue box will display where you can change the information for the slice.

*Do not worry about the numbering of the slices. Your slice numbers may look different than my numbers.

  1. Change name of this slice from “My First Website - Basic_01” to “my_logo”
  2. Change the name for slice 03 from “My First Website - Basic_03” to “home_button”
  3. Change the name for slice 04 from “My First Website - Basic_04” to “about_me_button”
  4. Change the name for slice 05 from “My First Website – Basic_05” to “fav_games_button”
  5. Change the name for slice 06 from “My First Website - Basic_06” to “fav_sites_button”
  6. Change the name for slice 02 from “My First Website - Basic_02” to “left_spacer”
  7. Change the name for slice 07 from “My First Website - Basic_07” to “right_spacer”
  8. Change the name for slice 09 from “My First Website - Basic_09” to “blue_separator_bar”

We need to get the slices from Photoshop to a format that the Internet will understand. The World Wide Web does not comprehend Photoshop documents because of the different layers, guides, color schemes, etc, The Web is extremely particular about what it will and will not display. In order for the Internet to display information, there are several things and rules that must be followed.