Objective
To learn basic HTML and CSS skills by building a personal process page.
Discussion
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 learn coding by example.
Procedure
Overview: Tell Dreamweaver the location
of your site. Add art to an exisitng HTML file. Style content using CSS. Publish to server. Note: replace bold with personalized info.
Setting up your content
- download starter files (location: faa999/gds273)
- launch Dreamweaver
- site > new site: site name=gds273;
(define local root folder: location=faa999/gds273/html)
- open "index.html"
- view > code and design
- change "jane smith" to your name (all occurances)
- select <body>, arrow left
- insert > image "exercise_jpgs/e1-cat.jpg" (id="portrait")
Adding CSS
- window > CSS designer: add selectors (source=define in page):
• #content: layout: position=absolute, top=20px, left=10%
• #content: text: font-family=Verdana, font-size=12px, line-height=18px
• h1: text: Georgia, 24/30, weight=normal
• #portrait: layout: margin-top=60px, margin-right=10%, float=right
• body: layout: min-width=1000px, margins=0 (all)
• a: text: color=??, decoration=none
• a:hover: text: decoration=underline
• .small: text: font-size=9px, line-height=14
- select <p>: apply style ".small"
- note CSS code formatting in header
- file > preview in browser (opt+F12 and cmd+F12)
Finishing the file
- link "Research", "Brief", "Concept sketch 1" to sample images
(use target=_blank)
- add email link to your name (i.e. "mailto:jsmith@gmail.com")
- scale & resample portrait (if needed)
- replace "e1-cat.jpg" with your own self-portrait as an animal
- file > preview in browser (opt+F12 and cmd+F12), test links
Grading
- publish page (see separate lesson)
- link your published projects and assignments to this page
