Objective
To learn basic HTML and CSS skills by building a personal process page.
Discussion
HTML (HyperText Markup Language) is the industry-standard code used to render web pages on the Internet. Understanding HTML structure is an essential skill all designers need to have today as the ability to publish web content becomes ever more important.
CSS (Cascading Style Sheets) define how to display HTML content. The separation of content from style is important as mobile phones and other hand-held devices start accessing web content originally intented for large computer monitors.
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 how to code by example.
Procedure
Overview: Tell Dreamweaver the location of your site. Add content to a new HTML file. Style content using CSS. Publish to server. Note: replace bold with personalized info.
Setting up your HTML page
- download starter files (location=faa999/gds110)
- launch Dreamweaver
- site > new site "gds110-jsmith"
(define local root folder: location=faa999/gds110/html) - window > files: RMB local root folder > new file "index.html"; open file
- view > code and design
- insert > div: id="content"
- copy and paste text from "process.txt" into <div#content>
- format text: add <ul>, <h1>
- change "jane smith" to your name (2x)
- link to sample images (use target=_blank)
- link your preferred email address (i.e. mailto:jsmith@stu.parkland.edu)
- select <body>, arrow left
- insert > image "exercise_uploads/e1-portrait.gif" (id="portrait")
Adding CSS
- window > CSS designer: add source: attach existing CSS file "normalize.css" (+)
- window > CSS designer: add source: define in page (+)
- window > CSS designer: add selectors:
• #content: layout: width=50%; margin-top=15%; margin-left=10%
• #portrait: layout: width: 300px; height: auto; max-width: 30%; position=absolute; top=30px; left=65%
• html: text: font-size=85%; line-height=150%
• h1: text: font-weight=normal; line-height=110%
• a: text: decoration=none; color=??
• a:hover: decoration=underline
- note CSS code formatting in header
- file > preview in browser (opt+F12 and cmd+F12)
Finishing the HTML file
- change title to something like "Jane Smith | GDS 110"
- add alt tags
Grading
- publish page (see separate lesson)
- update this page with links to your projects