1. Working with DIV Structures, CSS, Webfonts and Templates 9/16/2015Web Development and Interactive Media

2. DIV Structures Elements within a webpage are enclosed in DIVs (dividers) Think of a DIV as a “box” Wireframe should indicate layout of all DIVs Identify DIVs by custom-named IDs: eg.: Menu goes here Begin a web project by creating your DIV structure Nest DIVs correctly DIVs should appear in your HTML in their layout order – starting from top left

3. DIV Structures

4. Using CSS CSS must be in a separate file, external to your HTML, and linked to the HTML using the “Attach stylesheets” dialogue Style each DIV using #id-of-div Open and close styles with { } Remember semi-colons ; after each style

5. Webfonts Limitation of Webfonts Browsers are dependent on fonts installed on users’ local computers. If you design a webpage using a font not installed on the viewers’ machine, the intended font will not be displayed. Instead, the browser will use a substitute font which is installed on the local machine. This is a DESIGN issue since it affects how the website looks and feels. Displaying a webpage in a different, unintended font will change the look that the designer had in mind. There are very few web-safe fonts (fonts that are universally installed on ever machine across the globe). Websites used to be designed only with these web-safe fonts. Having to use only these fonts was a huge limitation on web designers. SOME WEB-SAFE FONTS: ArialGeorgiaTahoma Times New RomanVerdanaLucida TrebuchetComic SansCourier

6. Font-serving Solution to the issue of Webfonts Type foundries and others have begun to serve font files off web servers You can now link to these served fonts in your HTML and the browser will display the designated webpage text in those served fonts Google webfonts (google.com/fonts) is a good example of free font- serving, offering 705 typefaces Instruction for implementing Google webfonts into your HTML and CSS are at google.com/fonts

7. Dreamweaver Templates Provide a standard or guide for page layout Contain editable and uneditable(locked) regions Allow fast, easy creation of multiple HTML pages with the same layout Allow fast, easy editing of HTML elements and DIV structures: If you need to change an element in ALL your HTML pages, simply make the change in the template file, and DW will update all of your HTML pages as long as they were created from the template.

8. Using Dreamweaver Templates Create templates by defining EDITABLE regions After finishing your DIV structure and CSS, but before inserting content into pages: Select the DIV or content that will be editable on each page Insert> Template Objects> Editable Region Provide a descriptive name for the region Repeat for each editable region Save AS TEMPLATE (DW will automatically store the template file into the templates folder which you MUST have previously created in your root. If you haven’t previously created the templates folder, you will have errors in your website!) Then create each of your HTML pages from the template: File> New from template