Working with HTML5 & DIV Structures, CSS, Webfonts and Templates

1 Working with HTML5 & DIV Structures, CSS, Webfonts and ...
Author: Alaina Williams
0 downloads 2 Views

1 Working with HTML5 & DIV Structures, CSS, Webfonts and Templates8/18/ Web Development and Interactive Media

2 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.:

Logo goes here
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

3 DIV Structures (used before HTML5)

4 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.:

Ad1 goes here
Ad2 goes here
Use DIVs for all other elements Nest elements correctly

5 HTML5 Structures

6 Indenting HTML Tags

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

7 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

8 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

9 Font-serving Solution to the issue of Web-safe FontsType 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

10 Dreamweaver TemplatesProvide 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.

11 Using Dreamweaver TemplatesCreate 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