Graphic Design Exercises
Photoshop & Dreamweaver: Personal Projects Page
Objective
|
|
To learn Photoshop layout techniques by example. To review basic XHTML and CSS skills by building a personal projects 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 production.
Once the pixel elements have been exported, we can then use Dreamweaver to write the XHTML and CSS code for web publishing.
The best way to learn XHTML and CSS is with Dreamweaver's code view. By observing how Dreamweaver writes code for you behind the scenes one can learn coding by example.
|
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
- download starter files (location: class/jsmith/projects_html)
- take a screenshot of your favorite browser at 1024x768
- launch Photoshop
- open screenshot in Photoshop; save as "projects.psd"
- rename "background" layer "browser"
- marquee live area, delete
- new layer "white", fill layer with white (cmd+DEL), restack layers
- rectangle tool: draw rectangle (layer shape), fill with color
- draw additional rectangles, fill with colors (cmd+T to scale)
- type tool: "Jane Smith Projects", add color
- spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
- view > ruler (cmd+R): draw guides for slicing
- slice tool: slice art
- rename slices "logo", "tile" (double-click with slice select tool)
- hide "browser" layer
- file > save for web (preset=JPEG high or GIF no dither; images only, user slices; location="projects_html")
Setting up your content
- launch Dreamweaver
- site > new site (advanced) "jsmith projects"
(define local root folder: location=class/jsmith/projects_html)
- window > files: RMB local root folder > new file "index.html"; open file
- view > head content (cmd+shift+H)
- view > visual aids > show all (cmd+shift+I)
- view > code and design
- insert > image "logo.gif"; deselect (arrow right)
- insert > layout objects > AP Div; rename id="content"
- copy and paste text from "projects.txt" into <div> (aka "layer")
- format text: add <ul>, <h1>
- change "jane smith" to your name (all occurances)
- replace automatic date stamp: insert > date
- file > preview in browser (opt+F12 and cmd+F12)
Adding links
- browse to the sample projects page: copy and paste links into appropriate text (RMB > copy link to clipboard)
- link to sample images (use target=_blank)
- add other external links (tip: browse to web site, copy and paste URL, use target=_blank)
- select "back to top", add link "#"
- add email link to your name (i.e. "mailto:jsmith@stu.parkland.edu")
- file > preview in browser (opt+F12 and cmd+F12), test links
Adding CSS
- select layer: id="content"
- window > CSS: edit #content...
>
type: Verdana, 11/18px
> position: width=70%, height=(blank)
- window > CSS: add CSS style to this document only (+):
> tag=<body>: box: margins=0 (all); bg: "tile.gif" (repeat-x)
> tag=<h1>: type: Georgia, 24/30, weight=normal
> tag=<a>: type: decoration=none, color=? (point to color)
> selector="a:hover": decoration=underline
> class=".small": type: 9/14
- select <p>: apply style ".small"
- view > code: note formatting in header
- file > preview in browser (opt+F12 and cmd+F12)
Finishing the HTML file
- change title to something like "Jane Smith's Projects Page"
- insert > HTML > head tags > keywords
- insert > HTML > head tags > description
- window > snippets: meta > no cache (insert in code view)
- add alt tags
- commands > clean up XHTML
- file > check page...
Grading
- publish page (see separate lesson)
- link your published projects and assignments to this page
|
BACK TO TOP
Version 1.0 • Last updated:
1/13/09
• Webmaster: Paul
Young
