Working with HTML5 & DIV Structures, CSS, Webfonts and Templates 8/18/2016 Web Development and Interactive Media
DIV Structures (used before HTML5) Elements within a webpage are contained in DIVs (divisions) Think of a DIV as a “box” Wireframe indicates layout of all DIVs Identify DIVs by custom-named IDs: eg.: <div id=“logo”>Logo goes here </div> Begin a web project by creating your DIV structure Nest DIVs correctly DIVs appear in your HTML in their layout order – starting from top left
DIV Structures (used before HTML5) <body> <div id="container"> <div id="header"> <div id="nav"> </div> </div> <div id="wrapper"> <div id="content"> <div id="subcontent1"> </div> <div id="subcontent2"> </div> <div id="sidebar"> </div> <div id="footer"> </div> </body>
HTML5 Structures HTML5 replaced the most-used DIVs with semantic elements: Header Nav Section Article Aside Footer You can still assign custom-named IDs: eg.: <section id=“ad1”>Ad1 goes here </section> <section id=“ad2”>Ad2 goes here </section> Use DIVs for all other elements Nest elements correctly
HTML5 Structures <body> <div id="container"> <header> <nav> </nav> </header> <section id=“hero”> <article> <header> </header> <section> </section> </article> </section> <aside> <section id=“ad1”> </section> <section id=“ad2”> </section> </aside> <footer> </footer> </div> </body>
Indenting HTML Tags <body> <div id="container"> <header> <nav> </nav> </header> <section id=“hero”> <article> <header> </header> <section> </section> </article> </section> <aside> <section id=“ad1”> </section> <section id=“ad2”> </section> </aside> <footer> </footer> </div> </body> <body><div id="container"><header><nav> </nav><header> <section id=“hero”><article><header> </header><section> </section> </article></section><aside> <section id=“ad1”> </section><section id=“ad2”> </section></aside><footer> </footer> </div></body> Tabbing/structuring code, and putting line breaks between block elements (eg. on the left) makes it easier to read, easier to locate items, easier to identify nested tags, and easier to spot errors
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, or style each HTML5 element Open and close styles with { } Remember semi-colons ; after each style Indent and separate your CSS styles to make it easier to read, find items, and spot errors
Web-safe Fonts (Fonts that are universally installed on every machine across the globe) Limitation of Web-safe Fonts 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 substitute a font which is installed on the user’s 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. Previously, websites were designed with only these web-safe fonts. Having to use only these fonts was a huge limitation on design. COMMON WEB-SAFE FONTS: Arial Georgia Tahoma Times New Roman Verdana Lucida Trebuchet Comic Sans Courier
Font-serving Solution to the issue of Web-safe Fonts Type foundries and others have begun to serve font files off their own web servers. Most charge subscription fees for this service. You can 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 free font-serving service, offering 804 typefaces Instructions for implementing Google webfonts into your HTML and CSS are at google.com/fonts WIX recently gave users the ability to upload fonts to their server for use on their WIX websites
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.
Using Dreamweaver Templates Create templates by defining EDITABLE regions After finishing your HTML5 structure and CSS, but before inserting content into pages: Select the element/ DIV/ 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