AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

Size: px

Start display at page:

Download "AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES"

Johnathan Sullivan
5 years ago
Views:

1 CLASS :: AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates? :: Creating Editable Regions :: Save As Template :: Template Folder Location :: Create New File from Template :: Modify Template :: Updating a Templated Page TROUBLESHOOTING HOUR :: One On 1s 1

2 SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION nav <nav> </nav> Used to contain menu/navigation links PLACEMENT:: REFERENCE:: The nav element May be placed anywhere within the <body> </body> tags Usually placed at the top or left of a webpage (for main navigation), or at the top or bottom (for articles, sections, news/social media posts, etc.) :: Styling the Nav HTML5 Mark Up 1. Create a New HTML 5 Document 2. Click AFTER the opening <body> tag 3. Create the header element* 4. INSIDE the header element, create the nav element *use of header element is based on your design <body> <header> <nav> </nav> </header> </body> CSS Syntax Use the SINGLE DOCUMENT METHOD to style the nav element: 1. INSIDE the head element, create the style element 2. Set the default browser margins & padding [ for the body, nav, ul, and li elements ] to 0 (Undefined) 3. Set the nav width to 100% of the browser, with a background color of black, and adjustable height for the nav content. NOTE: The default bullets may disappear when margin/padding rules are introduced to the ul & li elements <!doctype html> <html lang= en > <head> <meta charset="utf-8"> <title>untitled Document</title> <style> body, nav, ul, li {margin:0; padding:0;} nav { width:100%; background:black; height:auto; } </style> </head> 2

3 :: UL and LI and Anchors Elements :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION ul <ul> </ul> Used to contain an unordered list PLACEMENT:: REFERENCE:: The ul element For the purpose of this exercise, the ul element will be placed inside the: <nav> </nav> tags HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION li <li> </li> A list item PLACEMENT:: The li element is the child element of the ul element. The list item, li, element will be placed inside the: <ul> </ul> tags REFERENCE:: The li element HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION a <a> </a> Hyperlinks text or image to a location PLACEMENT:: The a element, when used to link list items, is the child element of the li element. The anchor, a, element will be placed inside the: <li> </li> tags REFERENCE:: The a element 3

:: Styling the UL, LI, and Anchor Elements Add child elements inside your <nav> HTML Code: <nav> PARENT <ul> CHILD OF NAV <li> CHILD of UNORDERED LIST <ul> EDIT HTML CODE TYPE CSS CODE 1.

4 :: Styling the UL, LI, and Anchor Elements Add child elements inside your <nav> HTML Code: <nav> PARENT <ul> CHILD OF NAV <li> CHILD of UNORDERED LIST <ul> EDIT HTML CODE TYPE CSS CODE 1. Scroll to the style element in your document 2. AFTER style rules for the nav element, 3. Create a style rule to remove the bullets from the unordered list inside the nav element (bullets may have been removed in previous step) nav ul {list-style:none;} TYPE CSS CODE After the nav ul styles, create styles for the nav ul list items (li)s NOTE: While The navigation is easy to code in HTML, it is one of the most involved set of parent and child elements when styling is involved. By default an unordered list is displayed as a series of block elements (stacked on top of one another): home about works contact 1. display:inline-block; Instructs the list items to display in a line instead of stacked. The block part of the property value instructs the list-item to function as a block element container (See Full Explanation w3school Definition) 2. text-align:center; Instructs the list items to center align its text 3. font-size:25px; Instructs the list item text to be 25 pixels 4. font-family:verdana, Arial, ; Instructs the list item to have a specific font The default format for an unordered list with hyperlink text will appear as follows: home about works contact If you don t want your navigation to appear like the above, you must give it some style (SEE RIGHT COLUMN) After the nav ul li styles, create styles for the nav ul li anchor element 1. text-decoration:none; Removes underline from hyperlinked text 2. color:white; White hyperlinked text 3. display:block; Includes padding as clickable area for hyperlink 4. background-color:block; Blue background color 5. width:200px; Each list item is 200px wide (not including padding) 6. padding:20px; Adds 20 pixels of padding to top-right-bottom-left 7. AFTER nav ul li a style rules, create nav ul li a:hover pseudo class :: To change text & background color when mouse hovers over anchors 4

5 PREVIEW IN BROWSER 1. In the Browser, you will see a nav element with: 1. One Unordered List with 4 List Items This navigation is centered using text-align center 2. ALTERNATIVE:: FOR REMOVING MARGINS To remove margins between the list-items, 2. Go to nav ul li styles, then ADD the following:: margin-left:-2px; and margin-right:-2px; 2a OR 2a. Go to nav ul li styles, then ADD the following:: float:left; If you choose this option, the nav ul list items will default to a position on the left of the screen, and the nav background color will not display correctly. NOTE: Assigning the float property to the nav ul list item elements removes the elements from the natural flow of the webpage. In order for the nav background to display correctly, it must be reintroduced to the float flow of the page 3. Go to nav styles, then ADD the following:: float:left; 5. To move your nav ul element to the right of the screen, you must assign a float property to it 4. Go to nav ul styles, then ADD the following:: float:right; To re-center your nav ul element, we will examine just one option using exact pixel measurements. 5. Go to nav ul styles, then DELETE the following:: float:right; then ADD the following:: width:960px; This width is the sum of 4 list item widths + the padding for each. Each list item = 200px width + 20px of padding on the left + 20px of padding on the right = 240px (SEE YOUR STYLES FOR nav ul li a) margin:0 auto 0 auto; This instructs the nav ul to have 0 margin on top auto margin on right 0 margin on bottom, & finally auto margin on left. A shortcut to write the code is margin:0 auto; if the value is the same for top & bottom and left & right 5

6 TEMPLATE CREATION :: Why Templates? CONVERTING index.html TO A DREAMWEAVER TEMPLATE (Save As A Template: yourinitials_artc.dwt ) Your layout, logo, navigation, header image behavior, and footer content is PERFECT!!! Now, Make your life easier by creating a template! BENEFITS OF TEMPLATE: A template allows you to code ONCE for elements that are identical on webpages throughout your site (nav/footer/etc.) Your index.html, about.html, and contact.html can easily use one template. You may complete the supporting pages by simply swapping out images, text, and other media within Editable Regions. Your may create separate templates for simple (i.e. contact page) and complex (i.e. gallery) webpages. Annnnnnd IF YOU DON T LIKE, WHAT YOU SEE (YEAH) you may edit your template and update all your pages based on the changes. REMEMBER THIS Update Template Files or Pages based on Template?GOOD Update Links?BAD :: Creating Editable Regions (Elements you edit on each page) 1. Go to your index.html document 2. Determine which elements you want to stay the same on each page in your website (Template) 3. Determine which elements you want to change on each page in your website (Editable) 4. Scroll to an element you wish to change on each page EXAMPLE:: <div id= header-img > element NOTE: This element will contain the header image for 3 of your pages (index, about, and contact). Since the position of this element is correct, you will not make it editable; however, you will change the image on each web page, so you will make the image itself editable. 5. Highlight the code you wish to change on each page: <img src="images/composite-image.jpg" alt="img" width="1280" height="450"> 6. Go To Menu Bar > Insert > Template > Editable Region 7. Dreamweaver will convert your current document to a template: Click OK Editable Region Name: HEADER IMAGE(or purpose/position of element) > CLICK OK NOTE: Now, your header image may be edited on any page using this template 8. Repeat Steps for Creating an Editable Region :: Save As Template 1. Ctrl+S or - File > Save As Template: yourinitials_dgim 2. Click Save 3. Update Links? (If it asks you this question, click NOOOOOOOOOOOO) 6

:: Template Folder Location :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES Once you save a file as a template, Dreamweaver creates a.dwt (dreamweaver template) file. The program places the.

The template may simply be accessed locally for design purposes. After Dreamweaver sets the Template location, it is important not to edit the file structure.

7 :: Template Folder Location :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES Once you save a file as a template, Dreamweaver creates a.dwt (dreamweaver template) file. The program places the.dwt file inside of a folder named Templates. The template folder does not have to be uploaded to the REMOTE [LIVE] web server in order to work. The template may simply be accessed locally for design purposes. After Dreamweaver sets the Template location, it is important not to edit the file structure. If you wish to take the template home with you, you must move your entire website folder. If you don t move the entire folder, links will break along with your brain. :: Create New Page from Template Create your supporting pages by using your template, swapping out images/text/media, & styling the changes. Let s get started! 1. Go to Menu Bar > File > New 2. Click Page from Template button (In Creative Cloud choose Site Templates Button) 3. Site: Choose name of your site 4. Choose your Template for Site 5. Click Create 6. Save File as name-of-one-of-your-navigation-links.html EDIT YOUR NEW WEBPAGE: 1. Scroll to your Editable Regions 2. HIGHLIGHT: the old content 3. CHANGE TO: new content 4. Save and Preview in Browser (New content should appear) 7

:: Modifying a Template (UPDATE: yourinitials_artc.dwt, index.html & newpage.html ) :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES Add relative hyperlinks to the navigation/menu for all of your pages.

8 :: Modifying a Template (UPDATE: yourinitials_artc.dwt, index.html & newpage.html ) :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES Add relative hyperlinks to the navigation/menu for all of your pages. After updating all of the pages, you should have a working website. 1. Open File/ Or Click Tab to Open Your Template 2. Scroll to navigation section and replace # with relative links to your webpages: EDIT HTML CODE 3. Save File (Ctrl+S) 4. REMEMBER: Update Template Files or Pages Based on Template?GOOD 5. Click Update 6. If Dreamweaver asks Update Links? JUST SAY NO! :: Updating a Templated Page 1. Go To Menu Bar > File > Save All 2. Now all of your files should be updated based on template changes. 3. View your new website 8

9 HW-13 Homework DUE :: REVIEW :: 1. Class Notes DO :: Edit index.html Add Background Color or Image Add Logo Image Add Header Image (if applicable) Add Paragraph Heading & Text Add Audio/Video (where applicable) Add Footer Hyperlinks (where applicable) Embed Fonts & Style Text SEE HOMEWORK PAGE FOR COMPLETE DETAILS BRING :: HW-13 1 index.html 9

NAVIGATION INSTRUCTIONS

CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU