multimedia web design class notes - iris.nyit.eduiris.nyit.edu/~dmyrick/dgim759/docs/class9.pdf ·...

MULTIMEDIAWEBDESIGN CLASSNOTES

1

CLASS :: 09

11.01

2019 3 Hours

AGENDA HTML5 ELEMENTS :: Overview :: Your Homepage Structure NECESSARY STYLE :: What is CSS? :: The Box Model :: The 3 Style Methods :: Common Style Rules EXTERNAL DOCUMENT METHOD :: Setting Up HTML & CSS File :: HTML5 Layout Elements & Styling [ html, body, header, sections, footer ] VIDEO TUTORIALS :: Steps 1-3:

URL: http://iris.nyit.edu/~dmyrick/dgim759/finish-line.html


2

:: Ensure Your Folder Structure is Correct


3

HTML5 ELEMENTS Today you will style some of the elements introduced in HTML5. 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 HTML Structural elements (some shown below) partnered with Cascading Style Sheet(CSS) syntax::

HTML 5 MARK UP <tag> HTML5 ELEMENT Open tag Close tag

DESCRIPTION

header <header> </header> Typically appears at top of web page(or top of article). 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

figure <figure> </figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

figcaption <figcaption> </figcaption> Defines a caption for a <figure> element

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


4

NECESSARY STYLE :: What is CSS?

To make HTML elements less boring, you must give them style. Styles change the default appearance (size, color, layout, etc.) of elements on your webpage Styles may be applied to the majority of HTML elements (including divs, spans, and images) Before we style the HTML5 elements, let’s examine the language responsible for applying styles: CSS. CSS stands for Cascading Style Sheet.

The syntax for applying Single Document Style Method and External Stylesheet Method includes: AN ELEMENT PROPERTY VALUE

body { background-color : #000000 ; }

This is an example of how you would code the style for the body element:

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

PLACEMENT OF CODE: The style code, as shown above, may be applied using the single document and external stylesheet method. Another method, not shown above, is the inline style method (widely used for HTML E-mails and Blog posts).

ALL methods for applying styles to elements are as follows…


5

:: The 3 Style Methods

REFERENCE FOR PROPERTIES: http://www.w3schools.com/cssref/default.asp THE 3 METHODS OF APPLYING STYLES ARE: Inline, Single Document, and External Stylesheets.

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:

INLINE STYLE METHOD [ HTML E-mails/Blog Posts :: Only affects the element/within the tag ]

<body style=”background-color:#000000; color:#ffffff;”>…</body>

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 ( font color is white - #ffffff )

A semi-colon must be used to separate multiple style property and value sets.

A semi-colon is also required to end a single property/value set for an element.

SINGLE DOCUMENT [ INTERNAL CSS ] METHOD [ Development or Override Extermal CSS :: Only affects the current page ]

<!DOCTYPE html> <html lang=”en”> <head> <title>Untitled Document</title>

<style> body {background-color:#000000; color:#ffffff;}

</style> </head> <body> </body> </html>

EXTERNAL [ CSS ] STYLESHEET METHOD [ Affects multiple pages in a website and REQUIRES .html file(s) 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;}


6

THE BOX MODEL :: The Box Model

A model used to demonstrate the behavior of an HMTL element and how styles (mainly size & padding in this exercise) work. This model may be used on numerous elements to include:

header, nav, section, figure, figcaption, footer, p, a, h1, h2, etc. In the example below, we will use an element called “div” What is a DIV?

By default a div (short for division) groups content within a box and extends 100% across the browser screen OR 100% within its parent element. It auto expands to fit content (unless assigned a style affecting its default behaviors, i.e. width, height, overflow, etc.). A div may rest within another div. The HTML markup used for div is the opening tag of <div> to open the element and the closing tag of </div> to close the element. EXAMPLE:

HTML CSS

<div>

When the div property padding is introduced, the total amount of padding should be subtracted from the width and height.

</div> NOTE: padding is used when designers want space to exist between the edge of the element and content (text or images)

div { width:260px; height:45px; padding:20px; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px; }

THE MATH EXPLAINED

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)


7

COMMON STYLE RULES

[ You May Practice with The Box Model Using the Single Document Method ] :: … For Text (font, color, size, etc.)

NOTE: Example is changes all h1 element(s)

h1{ color:red; /* OR color:#FFFFFF; */

font-family: san-serif; font-size: 24px; letter-spacing: 1px; /* space between each character */ line-height: 30px; /* space between each line of text */

}

:: … For Hyperlinked Text (font, color, size, etc.)

NOTE: The a pseudo class (represented by a: ) must be listed in order shown below:

a { text-decoration: none; font-family: san-serif; } /* text-decoration:none; removes the default underline applied to hypertext links */ a:link { color:green; } a:visited { color:gray; } a:hover { color:cyan; } a:active { color:yellow; } }

:: … For Hyperlinked Image a img{ border: none; outline: san-serif; } /* removes default line applied to linked images */

:: … For Backgrounds

background-color: yellow; background-color: #FFCC00;

View Hexadecimal Codes:: SOURCE URL: http://www.w3schools.com/html/html_colors.asp background-image: url(images/yourimage.jpg); /* for background image */ background-repeat: no-repeat; /* to keep background from repeating */ background-repeat: repeat-x; /* repeat background image in x direction only */ background-repeat: repeat-y; /* repeat background image in y direction only */ background-position: 0% 0%; /* image position starts at 0% from left (X) & 0% from top (Y) */

See How it Works SOURCE URL: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position background-size: cover; /*Covers the background of your browser, plus resizes with your browser window*/ background-attachment: fixed;

VIEW MORE OPTIONS SOURCE URL: http://www.w3schools.com/cssref/pr_background-attachment.asp


8

SETTING UP YOUR HOMEPAGE [ External Stylesheet Method ]

:: Setting Up Your index.html and style.css file

GOAL: In this exercise, you will set-up the parent elements for your homepage. You will create the basic structure of your page using a .html document You will change the default behaviors [appearance/layout] of the page using a .css document.


9

index.html

TASK: Create a new .html document with the following HTML5 Elements:

1. header element [ For your future logo, navigation and hero (image, animation, or slideshow) content ] 2. section element [ For your future works (thumbnails with captions, OR slideshow) ] 3. section element [ For your news & social media feed ] 4. section element [ For your future about me information (background picture, & bio ] 5. footer element [ For your footer logo, copyright, site links, and social media links ]

SHORTCUT KEY

STEP DESCRIPTION ACTION [Win] [Mac]

1

Open a New HTML5 Document

1. Open Adobe Dreamweaver CC 2. Ensure Your Site is Defined [Follow steps at below URL if needed]

URL: http://iris.nyit.edu/~dmyrick/dgim759/docs/defining-a-website.pdf 3. Go To Menu Bar > File > New 4. Change Webpage Language to English [LINE 2]: <html lang=”en”>

2

Save Document

Save Document as index.html inside of your root folder [ Your root folder is public_html, NOT code_snippets ]

[Ctrl+S] [cmd+S]

3

Change title element

Change <title>Untitled Document</title> to Your page title of choice ( i.e. &clubs;Seven59.com&clubs; ) NOTE: Editing the <title> changes the text in the browser tab:


10

SHORTCUT KEY


4

Add HTML5 formatting elements [Along with Comments]

1. After the opening <body> tag, ADD the following:

5

View the page in Google Chrome [ NOTHING SHOULD BE THERE ]

6

In Dreamweaver, add text inside of each block element, then View in Browser NOTICE: There is space around the border Each block element is the full width of the browser Each block element has a default line-height and auto height to accommodate the content


11

7

Add link element [ LINKS FUTURE STYLE SHEET TO THE WEBPAGE ]

In order to link this index.html to its future style sheet, a link element must be created… type (DO NOT COPY/PASTE FROM WORD) the following code after the title element: <link href=”style.css” type=”text/css” rel=”stylesheet” />

NOTE: The link element is self-terminating (Doesn’t require a closing tag)


12

style.css

TASK: Create a new .css document with style rules for the document and HTML5 Elements:

SHORTCUT KEY STEP DESCRIPTION ACTION

[Win] [Mac]

1

Open a New CSS Document

1. Go to Menu Bar > File > New 2. Choose New Document > Click CSS for the Document Type > Create

2

Save Document

Save Document as style.css inside of your root folder [Same folder as index.html, Your root folder, public_html, NOT code_snippets ]

[Ctrl+S] [cmd+S]

Create Style Rules to remove default margins and padding from all elements

In browsers, the html, body, & many block elements (h1, figure, ul, li, etc.) display with a default margin & padding. You will use code to remove default margins and padding 1. In your .css document, ADD the following code to Line 4:

The * is the selector. The * selects all elements. It is followed by curly brackets + the property and value declarations needed to remove default margins and padding from all elements…

3


13

SHORTCUT KEY


4

Set Width and Height for the html and body element

Your website will have 5 main block elements [1header, 3sections, 1footer] that will each be the full width and height of the browser window. All block elements are 100% width by default. In order for those 5 elements to have a height of 100%, all of the elements’ ancestors (html and body) must also have a specified height of 100% or more… 1. ADD the following style rules to your css document:

NOTE: In order to style two elements with the same rules, type the element selectors and separate them with a comma. NOTE: The footer is the last element selector; DO NOT add a comma after it

5

Set-Up Styles for: header, 2 sections, and the footer element

1. ADD your background colors of choice to the header, section 1, section 2, and the footer:

NOTE: LINE 14 shows a pseudo-selector. :nth-of-type(2) is the pseudo selector used to select the second section located in your .html document. LINE 15 shows a pseudo-selector. :nth-of-type(3) is the pseudo selector used to select the third section located in your .html document.

6

Save Document and Preview in the Browser

Go to File > Preview in Browser (Chrome or Firefox) > Save Document and View the page in the browser. Scroll and check to see if each element displays with its own block of color…

[Ctrl+S]

[cmd+S]


14

Homework

HW-9 DUE :: 11.08

REVIEW ::

1. Class 9 Notes 2. VIDEO TUTORIALS: Steps 1-3

URL: http://iris.nyit.edu/~dmyrick/dgim759/finish-line.html

IMPORTANT!: The <section> with News & Social Media Feed will appear ABOVE the <section> with your Profile Picture and Bio

DO ::

• Print Out Photoshop Mock-Up [You will use the print out to create coding notes for webpage]

• Complete Steps 1-3 of The Video Tutorials

• Watch CSS Tutorials CSS Basics [DevTips]: https://www.youtube.com/watch?v=tZhmjgLQgXU CSS Selectors [DevTips]: https://www.youtube.com/watch?v=emMO3iCpvrc CSS Properties & Values [DevTips]: https://www.youtube.com/watch?v=4LtwZQ5jxic

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-9

1 Class 9 Notes

2 Photoshop Mock-Up Print Out

3 USB/Flashdrive

multimedia web design class notes - iris.nyit.eduiris.nyit.edu/~dmyrick/dgim759/docs/class9.pdf ·...

Documents