CLASS :: 14 04.28 2017 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html to have proper hypertext references to your works :: Test hyperlinks in your browser 1
CREATE A works.html PAGE [ HTML ] :: Open index.html and Save As works.html :: Edit <header> element [ Add class name as shown ]: :: Edit navigation menu [ Edit Hyperlinks ]: NOTE: If you wish for the works link to take you back to the homepage works thumbnails you may edit the hyperlink to appear as <a href= index.html#works >works</a>. If you wish for the contact link to take you to the bottom of the same page, you may edit the hyperlink to appear as <a href= #contact >contact</a> :: Edit 1 st <section> element [ Add class name ]: 2
:: MULTIMEDIA TOOLS :: CLASS NOTES :: EXAMPLE OF SINGLE LARGE IMAGE WITH TITLE & CAPTION 1. Replace <figure> element tags with <div> tags, plus id names NOTE: [ID names will match the works.html#hyperlinks of the view more buttons (located on your homepage)]. Above are coded example images. Replace the example image paths with your own images 2. DELETE <a> element tags 3
:: EXAMPLE OF YOUTUBE EMBEDDED VIDEO, TITLE, & CAPTION 1. Replace <figure> element tags with <div> tag, plus id name 2. DELETE <a> element tags 4
:: SERIES OF THUMBNAIL IMAGES WITH HYPERLINKS TO A LARGER IMAGE 1. Replace <figure> element tags with <div> tag, plus id name 2. ADD <a> [hyperlink] & <img> [thumbnail] elements 3. DELETE <h2> & <figcaption> elements 5
:: SERIES OF ELEMENTS CONTAINING THUMBNAIL IMAGES, TITLE, & CAPTION 1. Replace <figure> element tags with <div> tag, plus class name :: Select the entire <section id= about > element [ DELETE ENTIRE ELEMENT ] 6
EDIT index.html PAGE :: Edit Hyperlinks to your view more buttons [ This will link your view more buttons to named anchors on your work.html page ] NOTE: Class example images are coded above. Use your own image paths TEST IN BROWSER :: Preview your site in Google Chrome :: Test all of your hyperlinks 7
CSS QUIZ-ISH :: How do you select an element without an id or class name? :: How do you select an element with an id name? :: How do you select an element without a class name? Style the following: HTML ELEMENT works.html 1 <header class= works-page-header > 2 <section class= works-page-section > CSS STYLE PROPERTY/VALUE style.css ADD background image Edit the height [Optional] Change the height to auto Edit the background color [Optional] SINGLE LARGE IMAGE stylesheet SET-UP 3 <div id= works1 > ADD 5% padding Align text to the center 4 <div id= works1 ><img> Make width of images 90% or less of browser window 5 <div id= works1 ><h2> 6 <div id= works1 ><figcaption> Change font-size to 3em or less [Optional] Change font color [Optional] Change font-size to 2em or less [Optional] Change width to 90% or less Change margin [ make sure left and right margins will equal 100% when added to the width. i.e. if you have a width of 100% the left margin should =5%, and the right margin should = 5% --- margin:10px 5% 0 5% --- ] 8
:: MULTIMEDIA TOOLS :: CLASS NOTES VIDEO, TITLE, & CAPTION stylesheet SET-UP 7 Repeat the same steps for <div id= works2 > SERIES OF IMAGES with HYPERLINKS stylesheet SET-UP 8 <div id= works3 > Align text to the center ADD padding: top&bottom 7%, left&right 0 Edit background color [Optional] SERIES OF IMAGES with HYPERLINKS stylesheet SET-UP 9 <div class= image-container > Float the elements left Adjust the width to accommodate the number of elments you wish to line up in a row. Keep in minde you re your browser is 100%... if you wish to have 4 elements in a row the width of each floating element would be 25 minus the amount of left and right padding. i.e. width:23%; padding:7% 1% 0 1%; 10 <div class= image-container ><img> Ensure the maximum width is 100% 11 <div class= image-container ><h2> Align text to the center 12 <div class= image-container ><figcaption> Justify text [Optional] 9
UPLOAD TO IRIS :: Define Your Site At Home URL: http://iris.nyit.edu/~dmyrick/dgim601-m01/docs/defining-a-website.pdf :: Upload Site or Files to Your Iris Server Space URL: http://iris.nyit.edu/~dmyrick/dgim601-m01/docs/dw_upload-files.pdf 10
HW-13 Homework DUE :: 05.05 REVIEW :: Class 13 Notes DO :: 1. Edit Webpage to Your Liking 2. Download or Choose a Free-Use Font from http://fontsquirrel.com OR your Computer BRING :: HW-13 1 index.html 2 works.html 3 Font File [ i.e. Avenir.ttf, DroidSans.otf, etc. ] 4 USB/Flashdrive 11