GRA422-W14 Lecture 7

Two techniques for creating your website
Extensible Markup Language and RSS

Transcript

1. GRA422 Electronic Document Design II — Lecture #7 Design Strategy + XML Winter 2014 Instructor: Ahmed Sagarwala
2. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Announcements Midterm Exam (Reminder) Friday: March 7 Wednesday: March 12 Lectures 1 to 6 Labs 1 to 6 Analysis of code, all M.C.
3. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization 1. Slicing Lab #2 Recap Create a design in Photoshop Use the slicing tool Export your images and HTML Modify the HTML document
8. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization 2. Box Model HTML driven design Start by marking up content Think of each content area as a box Create design markup Create CSS styles (classes, IDs, elements)
9. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Heading Section Section Section
10. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization <div class="row"> <h1>Heading</h1> <section class="one-third"> <h2>Section</h2> <p>Once upon a time... sleeping quietly.</p> </section> <section class="one-third"> <h2>Section</h2> <p>Once upon a time... sleeping quietly.</p> </section> <section class="one-third"> <h2>Section</h2> <p>Once upon a time... sleeping quietly.</p> </section> </div>
11. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization body { font-family: Georgia, serif; } h1, h2, h3 { font-family: Helvetica, sans-serif; } .row { background: yellow; } .one-third { background: rgb(130,190,230); float:left; width: 27%; margin:2%; padding:1%; /* total width: 1 + 2 + 27 + 2 + 1 = 33% */ }