AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES

Size: px

Start display at page:

Download "AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES"

Posy White
5 years ago
Views:

1 CLASS :: 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

2 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

3 :: 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

4 :: EXAMPLE OF YOUTUBE EMBEDDED VIDEO, TITLE, & CAPTION 1. Replace <figure> element tags with <div> tag, plus id name 2. DELETE <a> element tags 4

5 :: 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

6 :: 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

7 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

8 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

9 :: 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

10 UPLOAD TO IRIS :: Define Your Site At Home URL: :: Upload Site or Files to Your Iris Server Space URL: 10

11 HW-13 Homework DUE :: REVIEW :: Class 13 Notes DO :: 1. Edit Webpage to Your Liking 2. Download or Choose a Free-Use Font from 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

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css CLASS :: 12 05.04 2018 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