Chap 7 Abs/rel hyperlinks Frag id Sprites (Student presentation) 3-col site CSS printing (Nov. 2) Mobile display (Nov. 6) Responsive design (Nov. 6) ARIA – Accessible Rich Internet Applications Also from previous Chapters: Thumbnails (Oct. 21) Images as bullets Gradients (Oct. 21)

More on Relative Linking Relative links from the Home page: index.html <a href="contact.html">Contact</a> <a href="rooms/canyon.html">Canyon</a> <a href="../index.html">Home</a> <a href="../events/weekend.html">Weekend</a> Relative links from the Canyon page: rooms/canyon.html

The Target Attribute The target attribute on the anchor element opens a link in a new browser window or new browser tab. <a href="http://yahoo.com" target="_blank">Yahoo!</a>

Landmark Roles with ARIA Accessible Rich Internet Applications (ARIA) Landmark Roles banner (a header/logo area) navigation (a collection of navigation elements) main (the main content of a document) complementary (a supporting part of the web page document, designed to be complementary to the main content ) contentinfo (an area that contains information about the content such as copyright ) form (an area that contains a form) search (an area of a web page that provides search functionality) Example: <header role=“banner”>

Thumbnails Rules Crop images so that they are equal height and/or width. Must have both large and small image for sake of bandwidth.

Visual Inspiration Sidebar or other designs…

Visual Inspiration Check out: www.DARPA.mil http://www.charlestoncvb.com (from student) http://sailing.cofc.edu (from Student)

In Defense of Vertical Navigation http://designwebkit.com/inspiration/vertical-navigation-bar-design-examples http://petershamnurseries.com http://www.wix.com/blog/2015/07/vertical-navigation-menus-should-you-use-them Includes pros & cons