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. Therefore do not delete any links that you add to your Process Page. Instead, always add new links when making revisions.
As HTML evolves, semantic markup like <section> is preferred over non-descriptive tags like <div>. Semantic markup improves search engine efficiency and might even get your website a higher ranking. In this exercise, we will be using semantic markup (more info).
File management is critical in web design and development. You will be developing multiple versions of multiple sites in this class. Each version MUST have a unique root folder that hold ALL the files needed to publish the site. It is highly recommended that you use the downloaded folder structure for this entire semester and follow the suggested naming conventions.
In this exercise, we will be using the Skeleton Responsive Framework, a lean alternative to Bootstrap which also uses the new rem unit for font sizing. Responsive web design is the new normal since more people are browsing on devices than ever before. Skeleton makes building responsive sites relatively easy.
Tip: When revising web sites, duplicate the web site's root folder and give it a new name (i.e. "p1_final2"). Be sure all the files required for the web site are inside the root folder (do NOT link to local files outside of this folder). The best way to duplicate a folder is to do it in Finder or Windows Explorer (not in Dreamweaver).
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/gds220)
- download skeleton framework
- move zip archive download files into "gds220/html" folder
- extract zip file, move contents into "gds220/html/_process-page" folder
- launch Dreamweaver
- site > new site: site name=gds220-admin;
local site folder=faa999/gds220/html); export STE file - open "content.html"
- view > code and design (note formatting)
- change "jane smith" to your name (search source code, replace all)
- link to your preferred email (i.e. mailto:jsmith@gmail.com)
- select <body>: copy to clipboard
- open "index.html"
- select <div.row>; DELETE
- paste clipboard contents into <div.container>
Adding links
- open "briefs/p1_brief.html"
- select <body>
- insert > div (wraparound): id=container
- window > CSS designer: add selector (source=define in page):
• #wrapper: layout: width=80%, min-width=320px, max-width=500px, margin-left/right: auto; font-family: Verdana, Helvetica, sans-serif; font-size: 0.9rem; line-height: 1.8em - link p1 "brief" to "briefs/p1_brief.html" (target=_blank)
- insert other appropriate links (target=_blank)
- file > preview in browser (opt+F12 and cmd+F12), test links
Formatting the content
- change document title to "Jane Smith | GDS 220 Process Page"
- add <section> tag around each project, exercises, etc
- select <nav>
- insert > div (wraparound): class="row"
- repeat with <footer>, <section>
Adding a banner
- select <body>; arrow left
- insert > image: "process-page-banner.gif"; id=banner
- select <img#banner>
- insert > div (wraparound): class=container
- select <div.container>
- insert > div (wraparound): id=top
Adding Google Fonts
- browse to fonts.google.com/#HomePlace:home
- search for "open sans", select font (+)
- click 1 FAMILY SELECTED
- click CUSTOMIZE: select only weights needed (i.e. "regular", "bold", "italic", "bold italic")
- return to EMBED: copy standard embed code
- replace font (line 18): <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
Adding CSS styles
- window > CSS designer: source=define in page
- add font CSS to <style> in <head> (code view):
body { font-family: 'Open Sans', sans-serif; font-size: 1.8 rem; } - window > CSS designer: add selectors to <style>:
• <nav>, <section>, <footer>, <div>: border: thin, solid, gray (temporary)
• a: text: color=#1FB69B, decoration=none
• a:hover: text: color=#1FB69B, decoration=underline
• p: margin-bottom=1 rem
• ul: padding-left=2 rem; text: list-style-type=square
• li: margin-bottom=0
• h4: margin-top=4rem; text: font-weight=700, font-size=100%
• nav, footer: font-size=85%
• #banner: min-width=400px
• #top: margin-bottom=15px, bg-color=#48DFC4 (eye-dropper)
• .img-responsive: height=auto, max-width=100%
- select "process-page-banner.gif": class=img.responsive
- file > preview in browser (opt+F12 and cmd+F12)
Fine-tuning the column structure
- select <ul>: insert > div (wraparound): class="ten columns" (code view)
- select <h4>: insert > div (wraparound): class="two columns" (code view)
- repeat with other sections
- file > preview in browser (opt+F12 and cmd+F12)
- window > CSS designer: disable border: <nav>, <section>, <footer>, <div>
Fine-tuning the CSS
- window > CSS designer: add additional selectors:
• nav: margin-bottom=8rem
• footer: margin-top=8rem
• ul ul: margin-top/bottom=0px; font-size=100%
- window > CSS designer: add new media query: min-width=550px
• h4: margin-top=0rem
• section: margin-top=4rem - add and <wbr> as needed
Grading
- replace header image with your own custom art work
- customize anchor colors
- make your own favicon (see "_process-page/images" folder)
- publish your page (see separate instructions)
- keep this page updated with your work as the semester progresses