October 14th Website Homework Analysis Flash Drive Setup (Firefox/Firebug) Review HTML Demo...
11
October 14th October 14th Website Homework Analysis Flash Drive Setup (Firefox/Firebug) Review HTML Demo (Structure/Formatting) Grid Systems
-
Upload
annabelle-bruce -
Category
Documents
-
view
215 -
download
0
Transcript of October 14th Website Homework Analysis Flash Drive Setup (Firefox/Firebug) Review HTML Demo...
October 14thOctober 14thWebsite Homework AnalysisFlash Drive Setup
(Firefox/Firebug)ReviewHTML Demo
(Structure/Formatting)Grid Systems
Flash Drive SetupFlash Drive SetupPortable Firefox
◦http://www.macupdate.com/info.php/id/20395 Mount Image Copy to Flash Drive Launch (may take a minute to launch)
Firebug Extension◦http://getfirebug.com/
Do not restart (install web developer first)
Web Developer Extension◦http://chrispederick.com/work/web-dev
eloper/
HTML ReviewHTML ReviewHTML consists of elements and tags.
Some elements are structures consisting of an opening and closing tag. E.g. <html></html>
Other elements consist of a single tag. E.g. <br> In XHTML all tags are required to be close so <br>
becomes <br/>
List of available HTML elements http://www.w3.org/TR/REC-html40/index/elements.html
Elements may be nested but child elements must be closed before their parent elements are closed. E.g. <html><body></body></html>
HTML ReviewHTML ReviewElements may have attributes,
which may have values set by the user or established by default. E.g. <p id=“paragraph-one”></p>◦List of available attributes and their
associated elements. http://www.w3.org/TR/REC-html40/index/attri
butes.html
What basic structural elements make up an HTML document and how do they fit together?
HTML ReviewHTML Review<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html401/loose.dtd"><html><head> <title>HTML and Dreamweaver at Moore</title></head><body> <h1>Welcome to HTML and Dreamweaver</h1>
<p> Behold the power of HTML and the
paragraph element! </p></body></html>
Grid SystemsGrid SystemsWhat is a grid system?
◦A structured guide of columns to aid design.
◦Grid systems for the web generally take the form of CSS frameworks.
Grid SystemsGrid SystemsWhy use a grid system?
◦Streamlines design process.◦Assists with browser standardization.◦Enforces structure.
Grid SystemsGrid SystemsAlthough there are many grid systems
available online for this course we will use the 960 grid system.◦http://960.gs
More about the 960 grid system.◦Based on the idea of a 960 pixel “container”.◦Provides a grid of 12 or 16 rows to be used
separately or in tandem.◦Well documented and many demos
available online.◦Templates available for major design
software.
Grid SystemsGrid SystemsAn example of a container with
grid elements in a 12 column grid.
Grid SystemsGrid SystemsColumns naturally fall into place
and may be nested for quick prototyping of complex layouts.
Grid SystemsGrid SystemsThe 960 demo.
◦http://960.gs/demo.htmlMore resources.
◦More about grids and why we use 960 pixels. http://www.cameronmoll.com/archives/
2006/12/gridding_the_960/◦960 grid tutorial
http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/
◦960 grid video http://net.tutsplus.com/videos/screencasts/a-
detailed-look-at-the-960-css-framework/
