Objective
To review basic HTML and CSS skills by building a personal Process Page. To review responsive web development techniques by creating a page similar to this example.
Discussion
Keeping a good record of your design process is a good idea for many reasons. At the very least, it forces you to keep your files organized. Clients also expect you to manage the project well and one way to do it is by recording each step of the process. Last but not least, one can learn from observing one's own process and then improving on it in future projects.
Note: The Skeleton Responsive Framework is a lean alternative to Bootstrap which also uses the new rem unit for font sizing.
Tip: Do not delete any links that you add to your Process Page. Instead, always add new links when making revisions.
Procedure
Overview: Merge existing HTML page with downloaded Skeleton Responsive Framework. Add additional CSS styles. Replace banner art with an original creative solution created by you. Note: replace bold with personalized info.
Prepping for the exercise
- download starter files (location: faa999/gds222)
- download skeleton framework
- move download files into "gds222/html" folder
- launch Dreamweaver
- site > new site: site name=gds222;
local site folder=faa999/gds222/html)
- open "content.html"
- view > code and design
- change "jane smith" to your name (search source code, replace all)
- add email link to your name (ie. "mailto:jsmith@gmail.com")
- select <body>: copy to clipboard
- open "index.html"
- select <div.row>; DELETE
- paste clipboard contents into <div.container>
Formatting the content
- change document title to "Jane Smith Graphic Designer"
- select <div#header>
- insert > div (wraparound): class="row"
- repeat with <div#p1> etc
- select <container>; arrow left
- insert > image: "222.png"; id=banner
- select <img#banner>
- insert > div (wraparound): class=container
- select <div.container>
- insert > div (wraparound): id=top
- replace font (line 18): <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
Adding CSS styles
- window > CSS designer: add source: define in page (+)
- window > CSS designer: add selectors:
• a: text: decoration=none, color=#6BA400
• a:hover: text: color=#6BA400, decoration=underline
• p: margin-bottom=1rem
• ul: padding-left=2rem
• li: margin-bottom=0
• h2: margin-bottom=4rem
• small: display=block, margin-bottom=80px
- add font CSS to <style> in <head> (code view):
body { font-family: 'Roboto Condensed', sans-serif; }
- file > preview in browser (opt+F12 and cmd+F12)
- window > CSS designer: add additional selectors:
• #banner: min-width=400px
• #top: margin-bottom=15px,
bg-color=#C7D1B4 (eye-dropper)
• .img-responsive: height=auto, max-width=100%
- select "222.png": add responsive class
- file > preview in browser (opt+F12 and cmd+F12)
Fine-tuning the column structure
- select <ul> in <div#p1>: insert > div (wraparound): class="ten columns" (code view)
- select <p> <strong>: insert > div (wraparound): class="two columns" (code view)
- repeat with other projects
- file > preview in browser (opt+F12 and cmd+F12)
Grading
- replace header image with your own custom art work
- customize anchor colors
- publish your page (see separate instructions)
- keep this page updated with your work as the semester progresses
