{"id":241,"date":"2014-09-17T22:59:07","date_gmt":"2014-09-17T22:59:07","guid":{"rendered":"http:\/\/art556.com\/?page_id=241"},"modified":"2014-09-17T22:59:07","modified_gmt":"2014-09-17T22:59:07","slug":"navigation","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/topics\/unit-2-multiple-page-sites\/navigation\/","title":{"rendered":"Navigation"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2 class=\"p9\"><b>Readings:\u00a0<\/b><\/h2>\n<p class=\"p9\">Typographic Web Design :<br \/>\nChapter 13 : helping readers move through the site: navigation p. 207-211<\/p>\n<ul>\n<li>Navigation and links\u00a0need to be set apart from other elements through color, style, size, case or weight.<\/li>\n<li>Consistency in navigation helps readers navigate a site.<\/li>\n<li>Contrast shows where a reader has been and where they are.<\/li>\n<\/ul>\n<p class=\"p1\"><b>absolute vs relative links\u00a0<\/b><\/p>\n<p class=\"p5\">absolute link: http:\/\/art556.com\/unit2\/santee.html<\/p>\n<p class=\"p5\">relative link: santee.html<\/p>\n<ul>\n<li>A relative link is relative to the page it is on. If both are in the same folder, then just the name is used: santee.html.<\/li>\n<li>If going up one level: ..\/santee.html<\/li>\n<li>going up two levels: ..\/..\/santee.html<\/li>\n<li>or going down one level:\u00a0\/images\/santee.jpg<\/li>\n<\/ul>\n<p class=\"p3\"><b>Your css will contain code that\u00a0<\/b><b style=\"line-height: 1.714285714; font-size: 1rem;\">defines links in different states:<\/b><span style=\"line-height: 1.714285714; font-size: 1rem;\">\u00a0<\/span><\/p>\n<p class=\"p5\">a:link {<br \/>\ncolor: #333;<br \/>\ntext-decoration: none;<br \/>\n}<br \/>\na:visited {<br \/>\ntext-decoration: none;<br \/>\ncolor: #fff;<br \/>\n}<br \/>\na:hover {<br \/>\ntext-decoration: underline;<br \/>\ncolor: #000;<br \/>\n}<br \/>\na:active {<br \/>\ntext-decoration: none;<br \/>\ncolor: #000;<br \/>\n}<\/p>\n<h2 class=\"p8\"><span class=\"s1\"><b>Navigation treatments:<br \/>\n<\/b><\/span><b>html links, rollovers and dropdowns\u00a0<\/b><\/h2>\n<p class=\"p9\"><b>html links<\/b><\/p>\n<ul>\n<li><span class=\"s2\"><b>&lt;a href=<\/b><\/span>\u201descape.html\u201d&gt;Learn More..<span class=\"s2\"><b>&lt;\/a&gt;<br \/>\n<\/b><\/span><i>Learn More will appear as a link and take the user to the escape.html page.<\/i><\/li>\n<li><span class=\"s2\"><b>&lt;a href=<\/b><\/span>\u201dhttp:\/\/art556.com\/unit2\/santee.html\u201d&gt;&lt;img src=\u201dimages\/santeeSm.png\u201d width=\u201d231\u201d height=\u201d95\u201d alt=\u201dsmall santee 116\u201d&gt;<span class=\"s2\"><b>&lt;\/a&gt;<br \/>\n<\/b><\/span><i>Clicking on the image of the boat will take the user to the santee.html page.<\/i><\/li>\n<li><span class=\"s2\"><b>&lt;a href=<\/b><\/span>\u201dreferences.html\u201d&gt;&lt;div class=\u201dfooter\u201d&gt;&lt;\/div&gt;<span class=\"s2\"><b> &lt;\/a&gt;<br \/>\n<\/b><\/span><i>Clicking on the footer will take the user to the references.html page.<\/i><\/li>\n<\/ul>\n<h2>exercise :<\/h2>\n<p>Create the rest of your pages and add navigation.\u00a0 Click here for a\u00a0<a href=\"http:\/\/art556.com\/unit2\/index.html\">sample site <\/a>with multiple pages and navigation.<\/p>\n<p class=\"p6\">Resources:<\/p>\n<p class=\"p6\"><a href=\"http:\/\/www.w3schools.com\/css\/css_link.asp\"> styling links<\/a><\/p>\n<p class=\"p2\"><a href=\"http:\/\/www.w3schools.com\/css\/css_navbar.asp\">navigation bar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; Readings:\u00a0 Typographic Web Design : Chapter 13 : helping readers move through the site: navigation p. 207-211 Navigation and links\u00a0need to be set apart from other elements through color, style, size, case or weight. Consistency in navigation helps readers navigate a site. Contrast shows where a reader has been and where they are. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":25,"menu_order":90,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-241","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":0,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/241\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/25"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}