Multimedia Tools (1382) Class Notes

<p> :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>CLASS :: 09</p><p>11.09 2015 3 Hours</p><p>AGENDA </p><p>NECESSARY STYLE REVIEW :: What is CSS? :: The Box Model :: The 3 Style Methods :: Code Hints Handout </p><p>INLINE STYLE METHOD :: Syntax :: Background Colors, Borders, and Images :: Element Size & Layout :: Style Text (font, color, size, spacing, etc.) :: Create an HTML Email using Tables & Inline Styles </p><p>SINGLE DOCUMENT STYLE METHOD :: Syntax</p><p>1 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>NECESSARY STYLE</p><p>:: What is CSS? [ recap ] CSS stands for Cascading Style Sheet.</p><p>To make HTML elements less boring, you must give them style. Styles change the default appearance of elements on your webpage. Styles may be applied to the majority of HTML elements ( including divs, spans, and images )</p><p>The basic syntax for applying a basic style includes an element, property, & value:</p><p>AN ELEMENT PROPERTY VALUE Body { background-color : #000000 ; } This is an example of how you would code the style for the body element: </p><p>1. Type the element you want to style 2. Followed by an opening curly bracket 3. Type the body’s property you wish to change 4. Followed by a colon 5. Type the value you want the property to be (#000000 = black) 6. Followed by a semicolon 7. Followed by a closing curly bracket</p><p>:: The Box Model [ Using “div” Elements & The Inline Style Method ]</p><p>What is a DIV?</p><p>By default a div (short for division) groups content within a box and extends 100% across the browser screen OR 100% within the element it exists within. It auto expands to fit content (unless assigned a style affecting its default actions, i.e. width, height, overflow, etc.). A div may rest within another div. The tag used for div is: <div> to open the element and </div> to close the element</p><p>The Box Model Box Model Exercise [ Using “div” Element ]: A method used to demonstrate the behavior of an HMTL SINGLE DOCUMENT or element and how EXTERNAL STYLESHEET styles (mainly size & position) work div { width:260px; This method may be height:45px; used on other tags: padding:20px; <nav>, <p>, <a>, <h1>, } <section>, <aside>, etc. INLINE STYLE:: <div style=”width:260px; height:45px; padding:20px;”>When…<div></p><p>WIDTH: left-padding(20px) + div width(260px) + right-padding(20px) = total div width (300px) HEIGHT: padding-top(20px) + div height(45px) + padding-bottom(20px) = total div height (85px)</p><p>2 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>:: The 3 Style Methods</p><p>The 3 Methods of applying styles are: Inline, Single Document, and External Stylesheets.</p><p>The following examples give the browser instruction to change the appearance of the body of a web page. The properties changed will be the background color AND text color:</p><p>TRY CODE FOR EACH METHOD: a. Inline Style (Only affects the element/within the tag): </p><p><body style=”background-color:#000000; color:#ffffff;”>…</body></p><p>1. body is the element 2. style is the attribute (of the body) 3. background-color is the first style property (changes page background color) 4. black is the value for the background-color property (page color is black - #000000 ) 5. color is the second style property (changes the text color) 6. white is the value for the color property (text color is white - #ffffff )</p><p>A semi-colon must be used to separate multiple style property and value sets. A semi-colon is also required to end a single propery/value set for an element.</p><p> b. Single Document (Only affects the current page):</p><p><!DOCTYPE html> <html lang=”en”> <head> <title>Untitled Document</title> <style> body {background-color:#000000; color:#ffffff;} </style> </head> <body> </body> </html></p><p> c. External Stylesheet (Affects the entire site and REQUIRES .html file to be linked to a .css file): 1. HTML FILE <!DOCTYPE html> <html lang=”en”> <head> <title>Untitled Document</title> <link href=”style.css” type=”text/css” rel=”stylesheet” /> </head> <body> </body> </html> 2. CSS FILE body {background-color:#000000; color:#ffffff;}</p><p>:: Code Hints Handout [ SOURCE URL: http://iris.nyit.edu/~dmyrick/DGIM601-W01/docs/code-corrections.doc ]</p><p>3 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>INLINE STYLE METHOD</p><p>:: Syntax </p><p><element style=”property:value;”>…Content…</element></p><p>Inline styles are coded inside the desired element tag & only effects the element. Inline styles are preferred for operations that commonly strip <html>, <style>, and in some cases, <body> tags from a document/webpage (i.e. HTML email, message board posts, etc.) </p><p>The following shows how styles may be applied to tags by Inline Style:</p><p>:: Background Colors, Borders, and Images</p><p><body style=”background-image:url(images/yourimage.jpg);”>…Content…</body> <nav style=”background-color:#777; border-bottom:red; ”>…Content…</nav></p><p>:: Element Size and Layout</p><p><header style=”width:100%; “height:100%;”>…Content…</header> <section style=”width:1280px; height:768px; margin:0 auto;”>…Content…</section> <div style=”width:25%; height:auto; float:left;”>…Content…</section> <footer style=”padding:100px; height:200px; margin-top:100px;”>…Content…</footer> </p><p>:: Style Text (font, color, size, etc.)</p><p></p><p><h1 style=”font-family: san-serif; font-size: 24px; color:cyan;”>…Content…</h1> <h2 style=”letter-spacing: 2px;”>…Content…</h2> <p style=”text-align:center;”>…Content…</p> <blockquote style=”line-height:30px;”>…Content…</blockquote> <div style=”text-transform:uppercase;”>…Content…</div></p><p></p><p>4 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>INLINE STYLE METHOD - EXERCISE</p><p>:: HTML EMAIL [ Using Tables and Inline Styles ] </p><p>In the web design industry, today, tables are not used for website layouts; however, they are the most reliable structural elements for rendering HTML E-mail layouts. SEE MORE: https://www.campaignmonitor.com/dev-resources/will-it-work/guidelines/ </p><p>In this next exercise, you will design an HTML E-mail with the following elements:</p><p>1. One Table 2. One embedded table with 3 rows:</p><p>[ minimum requirements ] ROW 1: Your Website Logo (with absolute image path & hyperlink to your homepage) ROW 2: Image + paragraph inviting your audience to view your new work (with absolute hyperlink text) ROW 3: Website name & copyright Information</p><p>TABLE STRUCTURE:</p><p><table><--START OF BACKGROUND TABLE--> <tr> NOTE: <td> The following elements have been added to this <table><--START OF NESTED TABLE--> exercise:</p><p><--HEADING ROW--> <thead> = groups table heading elements <thead> <--start of table heading group--> <tbody> = groups table body elements <tr> <tfoot> = groups table footer elements <th>Code for Logo with hyperlink</th> </tr> Grouping elements this way, enables the designer </thead> <--end of table heading group--> to style all elements within a group. </p><p><--BODY OF TABLE - 2ND ROW--> Elements within the <tbody> group will be scrollable <tbody> <--start of table body group--> <tr> <td>Code for image and paragraph</td> </tr> </tbody> <--end of table body group--></p><p><--FOOTER ROW--> <tfoot> <--start of table footer group--> <tr> <td>Code for site name and copyright</td> </tr> </tfoot> <--end of table footer group--></p><p></table><--END OF NESTED TABLE--></p><p></tr> </td> <table><--END OF BACKGROUND TABLE--></p><p>5 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>SINGLE DOCUMENT STYLE METHOD</p><p>:: Syntax [ Placed between the opening/closing <head> tags ]</p><p><!DOCTYPE html> <html lang=”en”> <head> <style> element {property: value;} #idname {property: value;} .classname {property: value;} </style> </head> <body> <section>…Content…</section> <section id=”idname”>…Content…</section> <span class=”classname”>…Content…</section> </body> </html></p><p>NOTE: </p><p>You will rely heavily on styling divs & other HTML5 elements to achieve your web layout & functions. </p><p>In the next exercise you will style divs using the Single Document Method. This method will allow you to assign property:value; sets to all divs (using a class name) OR assign custom property:value; set(s) to specific divs (using a unique id name). A div & other HTML5 elements may have both a class name and a unique id name.</p><p>LET’S BEGIN!</p><p>When assigning div id OR class names, be sure to assign a name that is intuitive to the tag/element’s purpose. In the example to follow, <div id=”container”> is a div with the id name of container. Only one div with the id name of container may exist per .html page. Its function is to contain a series of elements on a page, hence the name container. Many designers will name the mother of all divs container or wrapper, but you may also call it motherofalldivs. Here’s the HTML…</p><p><div id=”motherofalldivs”> </p><p>The name of a div is up to you, so long as you, 1. Know the div’s purpose on your page, and 2. The name corresponds with the CSS code. </p><p>Here’s the respective CSS for the above HTML… #motherofalldivs {property:value;}</p><p>6 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>For styles you wish to have repeated on a page, a class name is applied to the elements. In the example to follow, the parent div named container contains 3 child divs named grayboxes. All divs named grayboxes will share the same styles such as height, width, background, etc. The content within each grayboxes div may change. (Create Code Example)</p><p>CREATE A NEW HTML5 DOCUMENT ////////////////////////////////////// :: [ TYPE THE FOLLOWING CODE VER BATIM ] :: ////////////////////////////////</p><p><!DOCTYPE html> <head lang=”en”> <title>Single Document Style Method</title> </head> <body> <div id=”container”> <h1>WHITE H1 COLOR @ 24px</h1></p><p><div class=”grayboxes”> <h6>LEFT BOX</h6> <p>div id’s are referenced by a # and id name of your choice.</p> <p>id names should be relative to its function AND not have spaces.</p> <p>div id’s are only assigned to one unique element on a webpage</p> </div> <div class=”grayboxes”> <h6>MIDDLE BOX</h6> <p>div classes are referenced by a period and class name of your choice.</p> <p>class names should be relative to its function AND not have spaces.</p> <p>div classes may be assigned to multiple elements on a page</p> </div> <div class=”grayboxes”> <h6>RIGHT BOX</h6> On this page, 3 divs are styled by the class grayboxes. <br> In CSS code it will appear like this: .grayboxes {property:value;} <br> For a series of values, developers will stack and indent the properties for readability (as noted within the above styles for .grayboxes </div></p><p></div> </body> </html></p><p>////////////////// ADD THE FOLLOWING <style> ELEMENT & CSS TO THE INSIDE OF THE <head> ELEMENT ////////////////// <style> h1 {font-family: san-serif; font-size: 24px; color:white;} h6 {font-family: san-serif; font-size: 16px; color:white;} #container {background-color:black; width:970px; height:auto; color:cyan;} .grayboxes { width:175px; height:200px; float:left; background-color:gray; color:white; font-size:11px; } </style></p><p>NOTE: If all divs within their parent element have the same properties, you may remove the class name and assign all divs the same 7 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES properties:values by changing the CSS to #container > div { … list of properties and values … }</p><p>8 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>:: HTML 5 Elements</p><p>Long, long, ago, web designers used tables, frames, clunky buttons, forced spaces, horizontal lines, and break tags to layout a webpage. View Apple’s 1997 Website Here. Later, in the web universe, designers used tables and other designosaurs to ONLY display and process data. View Gas Appliance Guide(UK). Style, layout, and presentation now belong to The Elite: HTML Structural elements such as the ones below::</p><p>HTML 5 MARK UP <tag> HTML5 DESCRIPTION ELEMENT Open tag Close tag header <header> </header> Typically appears at top of web page. May contain navigation, a header image, or both nav <nav> <nav> Used to contain menu/navigation links section <section> </section> Used to organize sections on your web page. Typically used for vertical scroll pages aside <aside> </aside> Used to contain a sidebar or text. Typically appears on one side of a webpage. footer <footer> </footer> Typically appears at bottom of webpage. May contain footer links, logo, copyright information, terms and use, etc. REFERENCE:: HTML 5 Elements http://www.w3schools.com/html/html5_new_elements.asp</p><p>Styles may be applied to HTML5 elements in the same way as the div elements you styled before… For a list of CSS rules, please view here: http://www.w3schools.com/css/default.asp </p><p>HW-7 Homework 9 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES </p><p>DUE :: 11.16</p><p>REVIEW ::</p><p>1. Class Notes</p><p>2. List of CSS Examples Available for Your Webpage SOURCE URL: http://www.w3schools.com/css/css_examples.asp</p><p>3. Watch HTML5 & CSS Web Design [ 107 ] HTML5 Page Layout SOURCE URL: http://youtu.be/-sUKfvwfWaY </p><p>4. Watch HTML5 & CSS Web Design [ 108 ] HTML5 Page Layout SOURCE URL: http://youtu.be/Sk6NYOW7_do </p><p>5. Watch HTML5 Tutorial For Beginners [ 6 of 6 ] - CSS Page Layout SOURCE URL: http://youtu.be/CPcS4HtrUEU </p><p>DO ::</p><p> Print out your homepage mock-up  Mark up your document with the proposed element names & proper measurements</p><p>SEE HOMEWORK PAGE FOR COMPLETE DETAILS </p><p>BRING :: HW-6</p><p>1 Print Out of Mock-Up [ with proposed HTML5 elements ]</p><p>10</p>

Multimedia Tools (1382) Class Notes

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support