cos 125 day 17. agenda assignment #4 corrected – 4 a’s, 5 b’s, 3 c’s, and 3 non-submits...
Post on 20-Dec-2015
215 views
TRANSCRIPT
COS 125
Day 17
Agenda
Assignment #4 Corrected – 4 A’s, 5 B’s, 3 C’s, and 3 non-submits
Assignment #5 Due Exam #3 Corrected
– 5 A’s, 5 B’s, 2 C’s, 2 D’s and 1 non-take
Capstone Progress Reports Over Due Assignment #6 posted Lecture/Discuss Creating and Applying Styles
Assignment #4
Work in CODE mode not design!! A Title of “assignment #4”
– <head>……<title>A title</title>…..</head> A least 3 of the 6 possible Section headers
– Give each header a name and a title <h1 id=”name” title=”name” ></h1>
A division, a paragraph and an in-line span– <div></div>– <p></p>– <span></span>
Add some comments – Your name– Date you created this web page
<!—Tony Gauvin March 25 2004 -->
Assignment #4
Bold– <b></b>
Italic– <i></i>
Preformatted text– <pre></pre>
Big and small text– <big></big>– <small></small>
Monospaced text– <tty></tty>– <kbd></kbd>
Quoted text (with reference)– <blockquote cite=”url”></blockquote>
Superscript and subscript– <sub></sub>– <sup></sup>
Assignment 4
A transparent gif of your name (Image 1)– page 93 of text
A animation of your name (Image 2)– page 101 of text
A photorealistic image downloaded from the web (Image 3) Recompress to smaller file size but the same image size
(Image 4)– Page 100 of text
Resize to half the original size (Image 5)– Use PSP
Assignment 4
Make sure each image has alternate text and a title– <img src=”apicture.gif” alt=”aPicture” id=”name/>
Make sure you specify size for each image– <img src=”apicture.gif” alt=”aPicture” id=”name” width=”x” height=”y”/>
Rescale image 3 to 50% of Browser viewable width– <img src=”apicture.gif” alt=”aPicture” id=”name width=”50%” />
Create some text describing Image 3 and create the following– float the text to the right of image 3
<img src=”apicture.gif” alt=”aPicture” align=”left” id=”name width=”50%” /> <p></p>
– float the text to the left of image 4 <img src=”apicture.gif” alt=”aPicture” align=”right” id=”name width=”50%” />
<p></p> Make sure you have a background color or image
– <body bgcolor="#CCCCCC">
Learning Objectives
Understand the syntax of a CSS rule Write CSS rules Assign the same style rule to more than one element Create style rules for link states Understand how to create an external style sheet Understand how to link to an external style sheet Understand how to use internal style sheets Understand how to import an external style sheet Understand how to apply styles locally Explore how to use comments in style rules
Style Sheet Examples
Examples of applying style sheets– http://perleybrook.umfk.maine.edu/samples/styles.htm
Formatting– http://perleybrook.umfk.maine.edu/samples/StyleFormat.htm
Styles
Use to format XHTML documents Separate Content from Format Allows consistent “Look and Feel” to all web
pages in a web site
Constructing A Style Rule
Selector {property:value; property:value} Examples
– h1 {color:red;background:yellow}– h2 {color:white;background:black}– p {color:blue}
Constructing Selectors
A selector determines which elements will be formatted
A selector can contain up to 5 criteria (any combination)
– The type or name of the element– The context in which the element is found– The class or id of an element– The pseudo-class of an element or a pseudo-element itself– Whether or not an element has certain attributes and values
Selecting Elements by Name
Simply type the element as the selector– h1– p– div
Add { property:value;…} You can group element with a comma
– h1,h2,h3 {color:red}
You can use * for all elements– * {color:red}
Selecting Elements by Class or ID
If your elements is labeled with id or class, it can be formatted via a selector
If you used class– <h1 class=“bigheader”></h1>– .bigheader {property:value}
If you used id– <h1 id=“firstheader”></h1>– #firstheader { property :value}
Can be used with element name– h1.bigheader {color:red}– h1#firstheader {color:red}
Selecting Elements by Context
Selecting elements based on parent/child relationship between elements
<div> <h1>header</h1><p>paragraph <big>BIG</big><small>small</small></p></div>
div is ancestor of all the above elementsh1 is child of divdiv is parent (ancestor) of h1big is a sibling of smallh1 is a sibling of p big is descendent of div and child of p
Selecting Elements by context
To select an element based on the context (relationship) do the following
For a any descendant element– Ancestor descendant {…}– Div.class p {color:red}
For only the child of a parent element (only some browsers)
– Ancestor > descendent {…}– Div#label > p {color:red}
Selecting Elements by Context
To select elements that are the first child of a parent element– div p:first-child {color-red}
To select element based on siblings– div p+p {color:red}
Selecting Links elements based on their state (pseudo-class)
State means visited, mouse is over link.. etc– a:link {color:red}– a:visted{color:blue}– a:focus{color:yellow}– a:hover{color:green}– a:active{color:white}
Selecting part of an element (pseudo-element)
You can select just the first letter or first line of an element to be formatted
h1:first-letter {color:red} p:first-line {color:blue} Does not work with all browsers
Selecting elements based on attributes of the element
element[attribute]{…}Or element[attribute=“value”] {…} (must have)Or element[attribute~=“value”]{…} (can have)Or element[attribute|=“value”]{…} (must have “value-”)
Does not work in Internet Explorer
Combining Elements
You can combine any of the previous techniques
First you define context Then the element Then class or id Next pseudo-class or pseudo-element Div.works p em:firstletter{color:red}
Creating an external Style Sheet
Create a new text doc Define rules Save as “anyname.css File must be “text only” In Dreamweaver
– File>New>”CSS Style Sheets” – then select one of the already begun style sheets
Linking an external style sheet
In head section– <link rel=“stylesheet” type=“text/css”
href=“url.css”/>– url.css is the location and filename of your
external CSS style sheets
Creating an Internal Style Sheet
Internal style sheet will only effect the one web page
In head section <style type=“text/css”>
selector{property:value}
….
</style>
Importing External Style Sheets
Used with internal style sheet commands <style type=“text/css”>
@import “external.css”;
selector{property:value}
….
</style>
Applying styles locally
Use style attribute in the element you wish to format
Will only effect that occurrence of the element
Example– <img style=“color:red;border:solid” src
=“image.gif” height=“250” alt=“image”>
Location of style rules
With so many ways to apply style what happens when there is more than one rule for a an element– Locally applied rules take precedence– Internal style rules before imported style rules– Order of the rules in a style sheet
Adding comments to a style rule
Why??– So that you remember
/* comments */ Cannot be nested
– /* this /*doesn’t*/ work */
Assignment #6 posted
I have posted assignment 6 in WebCT – Covers Chapters 8-11– Most difficult assignment yet– Due April 7 (One week from Thursday)– I posted it early to allow for any one who may
wish to get an early start– We will discuss this assignment in upcoming
classes