To learn Photoshop layout techniques by example. To review basic HTML and CSS skills by building a personal process page.
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.
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 (move files to proper location)
- take a screenshot of your favorite browser at 1024x768 (at home: use Browser Test Pattern or install this Chrome extension)
- launch Photoshop
- open screenshot in Photoshop; save as "process.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, move)
- type tool: "Jane Smith Graphic Design I", add color
- spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
- view > ruler (cmd+R): draw guides for slicing
- slice tool: slice select art
- rename slices "logo", "tile" (right-click with slice select tool)
- hide "browser" layer
- file > export > save for web (preset=JPEG high)
- select "logo" and "tile" slices (shift-select)
- save > slices=selected slices > save, location html
Setting up the content in Deamweaver
- launch Dreamweaver
- site > new site "gds120"
(define local root folder: location=faa999/gds120/html)
- window > files: RMB local root folder > new file "index.html"; open file
- view > code and design
- insert > image "logo.jpg"; deselect (arrow right)
- insert > div: id="content"
- copy and paste text from "gds120.txt" into <div#content>
- format text: add <ul>
- change "jane smith" to your name (all occurrences)
- replace automatic date stamp: insert > html > date
- link to sample images (use target=_blank)
- select "back to top", add link "#"
- link your preferred email address (i.e. mailto:email@example.com)
- window > CSS designer: add source(+): attach existing CSS file "normalize.css"
- window > CSS designer: add source: define in page (+)
- window > CSS designer: add selectors:
• .small: text: font-size=85%
• #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;
• .body: bg: bg-image="tile.gif" (repeat-x);
- note CSS code formatting in header
- file > preview in browser (opt+F12 and cmd+F12)
Finishing the HTML file
- browse to the sample process page: copy and paste links into appropriate text (RMB > copy link to clipboard)
- select paragraphs: apply class=small
- change title to something like "Jane Smith | GDS 120"
- add alt tags
- publish page (see separate lesson)
- link your published projects and assignments to this page