Objective

To learn Photoshop layout techniques by example. To review basic HTML and CSS skills by building a personal process page.

Discussion

Photoshop is often used by web designers as a layout tool to create "mock-ups" of web pages for client approval. Once approved, Photoshop has extensive tools to help you optimize the pixel elements for web development.

Once the pixel elements have been exported, we can then use Dreamweaver to write the HTML and CSS code for web publishing.

The best way to learn HTML and CSS is with Dreamweaver's code view. By observing how Dreamweaver writes code for you behind the scenes, one can easily learn coding by example.

Tip: Do not delete any links that you add to your Process Page. Instead, always add new links when making revisions.

Procedure

Overview: Create a web page layout in Photoshop. Export the pixel elements and import them into Dreamweaver. Add text and style with CSS. Publish to server. Note: replace bold with personalized info.

Making the Photoshop mock-up

1. download starter files (move files to proper location)
2. browse to www.blankwebsite.com using your favorite browser
3. take a screenshot at 1024x768 using the desktop picture (at home: use Browser Test Pattern or install the Window Resizer Chrome Extension
4. launch Photoshop
5. open screenshot in Photoshop; save as "process.psd"
6. rename "background" layer "browser"
7. marquee white area, delete
8. new layer "white", fill layer with white (cmd+DEL), restack layers
9. rectangle tool: draw rectangle (layer shape), fill with color
10. draw additional rectangles, fill with colors (cmd+T to scale, move)
11. type tool: "Jane Smith Graphic Design I", add color
12. spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
13. view > ruler (cmd+R): draw guides for slicing
14. slice tool: slice select art
15. rename slices "logo", "tile" (right-click with slice select tool)
16. hide "browser" layer
17. file > export > save for web (preset=JPEG high)
18. select "logo" and "tile" slices (shift-select)
19. save > slices=selected slices > save, location html

Setting up the content in Deamweaver

1. launch Dreamweaver
2. site > new site "gds120"
   (define local root folder: location=faa999/gds120/html)
3. window > files: RMB local root folder > new file "index.html"; open file
4. view > code and design
5. insert > image "logo.jpg"; deselect (arrow right)
6. insert > div: id="content"
7. copy and paste text from "gds120.txt" into <div#content>
8. format text: add <ul>
9. change "jane smith" to your name (all occurrences)
10. replace automatic date stamp: insert > html > date

Adding links

1. link to sample images (use target=_blank)
2. select "back to top", add link "#"
3. link your preferred email address (i.e. mailto:jsmith@gmail.com)

Adding CSS

1. window > CSS designer: add source(+): attach existing CSS file "normalize.css"
2. window > CSS designer: add source: define in page (+)
3. window > CSS designer: add selectors: 
   • #content: layout: width=50%, position=absolute, top=??, left=??
   • html: text: font-size=85%, line-height=150%, font=?
   • a: text: decoration=none, color=??
   • a:hover: decoration=underline
   • img: margin-left=30px;
• .small: text: font-size=85%
• body: bg: bg-image="tile.gif" (repeat-x);
4. note CSS code formatting in header
5. file > preview in browser (opt+F12 and cmd+F12)

Finishing the HTML file

1. browse to the sample process page: copy and paste links into appropriate text (RMB > copy link to clipboard)
2. select paragraphs: apply class=small
3. change title to something like "Jane Smith | GDS 120"
4. add alt tags

Grading

1. publish page (see separate lesson)
2. link your published projects and assignments to this page