Web Design Unit 5

Announcements 1. Need CS students to shadow next year’s incoming freshmen. 2. Apply for Strive! Feb 2 Field trip; Summer Internship. 16 and older. 3. Video Tech News: 1-3 minutes 3rd: Anthony, Antonio, Nhat, and Mateo 4th: Teresa, Clayton, Mark, Alden

Today’s Lesson Objectives: Complete Storyboard website Create inline styles with CSS Add inline styles to a webpage (today) Create an internal styles sheet with css (Thursday)

Complete Website Include : Paragraph <p> </p> Lists <ul> <li> </li> </ul> (ordered or unordered) Image <img> </img> (pictures) Iframe <iframe> </iframe> (videos) <strong> </strong> (bold) <em> </em> (italized) See Mrs. Reid Biography page under Chrome Browser. Click View – Developer –view source

Overview of CSS CSS stands for Cascading Style Sheets CSS provides the formatting and style for a web page, while html provides the content; There are three methods of inserting styles Inline styles Internal style sheet External style sheet http://www.w3schools.com/html/html_css.asp

Basic format for Style Selector Decloration h1 {color:blue; font_size:12px;} The selector is the element you want to style; each declaration consists of a property and a value The property is the attribute you want to change and each property has a value. To make it more readable you can pu each declaration on a separate line. http://www.w3schools.com/tags/ref_colornames.asp http://w3schools.com/tags/ref_colorpicker.asp

Modify Webpage Pair up in your teams Add the following At least three pictures A variety of emphasized text The background and text colors

Gallery Walk Students provide comments and each computer they visit. Students will use feed back they receive to revise their homepage.

Resources (show) http://www.w3schools.com/css http://www.w3schools.com/tags/ref_colornames.asp http://www.w3schools.com/colors/colors_picker.asp

Cool Animation If you are done with your website, then copy these pages to create animated html files.