{"id":202,"date":"2015-01-27T18:23:06","date_gmt":"2015-01-28T01:23:06","guid":{"rendered":"https:\/\/rmu.andrewyames.com\/?page_id=202"},"modified":"2016-06-21T15:44:11","modified_gmt":"2016-06-21T22:44:11","slug":"week-3-layout-with-dreamweaver-and-using-classes-and-ids","status":"publish","type":"page","link":"https:\/\/rmu.andrewyames.com\/?page_id=202","title":{"rendered":"Week 3: Layout with Dreamweaver and using Classes and ID\u2019s"},"content":{"rendered":"<h1>Dreamweaver<\/h1>\n<h2>Views:<\/h2>\n<ul>\n<li>Code \u2013 acts just like TextWrangler, plus it will assist with coding<\/li>\n<li>Split \u2013 shows your code and how it looks rendered<\/li>\n<li>Design \u2013 allows for basic content editing, is best for the insertion of copy, links and images<\/li>\n<\/ul>\n<h2>Important Panels:<\/h2>\n<ul>\n<li><strong>CSS Styles<\/strong>\u00a0\u2013 allows you to quickly link external style sheets, it is also possible to edit styles here though it is less efficient than hand coding<\/li>\n<li><strong>Files<\/strong>\u00a0\u2013 allows for file management and uploading<\/li>\n<li><strong>Properties<\/strong>\u00a0\u2013 changes depending on what you have selected \u2013 generally allows the creation links, application of copy related html tags, and the application of classes &amp; ID\u2019s.<\/li>\n<\/ul>\n<h1>HTML<\/h1>\n<p>For greater control of your layout its helpful to group specific types of content together. This is done using organizational tags, such as,\u00a0&lt;header&gt;,\u00a0&lt;article&gt;,\u00a0&lt;nav&gt;,\u00a0&lt;footer&gt;\u00a0and\u00a0&lt;div&gt;.<\/p>\n<p>For example all of the most important information lives together inside the header of a page (note: header, head and h1 all do different things.)<\/p>\n<p>&lt;!doctype HTML&gt;<\/p>\n<p>&lt;html&gt;<\/p>\n<p>&lt;head&gt;<\/p>\n<p>&lt;title&gt;Page Title&lt;\/title&gt;<\/p>\n<p>&lt;style&gt;CSS rules&lt;\/style&gt;<\/p>\n<p>&lt;\/head&gt;<\/p>\n<p>&lt;body&gt;<\/p>\n<p><strong>&lt;header&gt;<\/strong><\/p>\n<p>&lt;h1&gt;My biggest headline&lt;\/h1&gt;<\/p>\n<p>&lt;h2&gt;My subhead&lt;\/h2&gt;<\/p>\n<p>&lt;p&gt;some copy&lt;\/p&gt;<\/p>\n<p>&lt;p&gt;more copy&lt;\/p&gt;<\/p>\n<p><strong>&lt;\/header&gt;<\/strong><\/p>\n<p><strong>\u00a0 \u00a0 \u00a0 &lt;article&gt;<\/strong><\/p>\n<p>&lt;h2&gt;My subhead&lt;\/h2&gt;<\/p>\n<p>&lt;p&gt;some copy&lt;\/p&gt;<\/p>\n<p>&lt;p&gt;more copy&lt;\/p&gt;<\/p>\n<p><strong> &lt;\/article&gt;<\/strong><\/p>\n<p>&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<h1>CSS<\/h1>\n<p>With\u00a0CSS\u00a0you are not limited to styling only existing\u00a0HTML\u00a0elements, you can create your own selectors called \u201c<strong>class<\/strong>\u201d and \u201c<strong>id<\/strong>\u201d which can be applied to any HTML element.<\/p>\n<p>The ID selector is defined with an\u00a0<strong>#<\/strong>, and uses the HTML element\u2019s\u00a0<strong>id=&#8221;&#8221;<\/strong> attribute. For example a css rule would look something like this:<\/p>\n<p><em>#big_red_text {font-size:72px; color:red; font-family:Verdana;}<\/em><\/p>\n<p>and could be applied to a single paragraph like this:<\/p>\n<p><em>&lt;p id=&#8221;big_red_text&#8221;&gt;some big red text&lt;\/p&gt;<br \/>\n&lt;p&gt;some text that looks like all of my other paragraphs&lt;\/p&gt;<\/em><\/p>\n<p><strong>Id\u2019s are unique and should only be used once within your HTML document.<\/strong><\/p>\n<p>The Class selector is defined with a\u00a0<strong>.\u00a0<\/strong>, and uses the HTML element\u2019s\u00a0<strong>class=&#8221;&#8221;<\/strong> attribute. For example a css rule would look something like this:<\/p>\n<p><em>.small_blue_text {font-size:10px; color:blue; font-family:Verdana;}<\/em><\/p>\n<p>and could be applied to multiple paragraphs like this:<\/p>\n<p><em>&lt;p class=&#8221;small_blue_text&#8221;&gt;some small blue text&lt;\/p&gt;<em><br \/>\n&lt;p&gt;some text that looks like all of my other paragraphs&lt;\/p&gt;<\/em><br \/>\n&lt;p class=&#8221;small_blue_text&#8221;&gt;more\u00a0small blue text&lt;\/p&gt;<\/em><\/p>\n<p><strong>Class\u2019s may be used multiple times within an HTML document.<\/strong><\/p>\n<p>To take control over our sites layout we need to begin by using CSS\u2019s\u00a0<strong>position<\/strong>\u00a0property. This allows us to tell HTML elements like\u00a0&lt;header&gt;, &lt;article&gt;,\u00a0&lt;nav&gt;, &lt;footer&gt;\u00a0and\u00a0&lt;div&gt;\u00a0where to go on the page. The position property has three values,\u00a0<strong>absolute<\/strong>,\u00a0<strong>fixed<\/strong>, and\u00a0<strong>relative<\/strong>, each with its own behavior.<\/p>\n<p>Once a position property has been chosen then simply give the rule X and Y coordinates. X can be defined using either the\u00a0<strong>left<\/strong>\u00a0or\u00a0<strong>right<\/strong>\u00a0property. Y can be defined using either the\u00a0<strong>top<\/strong>\u00a0or\u00a0<strong>bottom\u00a0<\/strong>property.<\/p>\n<p>So to position an element using an id the style would look like this:<\/p>\n<p><em>#move_me {<strong>position<\/strong>:absolute;\u00a0<strong>left<\/strong>:200px;\u00a0<strong>top<\/strong>:150px;}<\/em><\/p>\n<p>and would then be applied to only one html element<\/p>\n<p><em>&lt;nav id=&#8221;move_me&#8221;&gt;my links are now 200 pixels from the left of the screen and down 150 pixels from the top&lt;\/nav&gt;<\/em><\/p>\n<p>To position and element and define its size using an id the style would look like this:<\/p>\n<p>#some_object {<em><strong>position<\/strong>:absolute;\u00a0<strong>left<\/strong>:200px;\u00a0<strong>top<\/strong>:150px;<\/em>\u00a0<strong>width<\/strong>:100px;\u00a0<strong>height<\/strong>:100px;\u00a0<strong>background-color<\/strong>:red;\u00a0<strong>border<\/strong>:#666666 1px solid;}<\/p>\n<p>and would then be applied to only one HTML element<\/p>\n<p>&lt;div id=<em>&#8220;<\/em>some_object<em>&#8220;<\/em>&gt;&lt;\/div&gt;<\/p>\n<p><strong>Part 2<\/strong>: Using HTML\u2019s DIV tags and CSS\u2019s absolute positioning recreate your sketches.\u00a0If you used graph paper assume each square is 10\u00a0pixels by 10 pixels, if you used sketch paper assume 1 centimeter is equal to 10 pixels.\u00a0Practicing using ID\u2019s and Classes to style your boxes; focus on web safe fonts, background-color, background-image, border and position rules. For creating more complicated shapes explore\u00a0<a href=\"http:\/\/css-tricks.com\/examples\/ShapesOfCSS\/\" target=\"_blank\">css-tricks.com<\/a><strong><br \/>\n<\/strong><\/p>\n<p><strong>Due Class Class 5<\/strong>\u00a0\u2013 Have all ten uploaded to the server, be sure to have links to each on your homepage and bring printed screen shots to hang for critique.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dreamweaver Views: Code \u2013 acts just like TextWrangler, plus it will assist with coding Split \u2013 shows your code and how it looks rendered Design \u2013 allows for basic content editing, is best for the insertion of copy, links and images Important Panels: CSS Styles\u00a0\u2013 allows you to quickly link external style sheets, it is &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/rmu.andrewyames.com\/?page_id=202\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Week 3: Layout with Dreamweaver and using Classes and ID\u2019s&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":27,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-202","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=202"}],"version-history":[{"count":4,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages\/202\/revisions"}],"predecessor-version":[{"id":1596,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages\/202\/revisions\/1596"}],"up":[{"embeddable":true,"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=\/wp\/v2\/pages\/27"}],"wp:attachment":[{"href":"https:\/\/rmu.andrewyames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}