1. COS 125 DAY 15

2. Agenda Assignment 4 Posted Corrected –4 A’s, 3 B’s, 2 C’s and 1 MIA Assignment 5 posted –Due April 4 Left to do –4 Assignments (9 total) One per week –2 Quizzes –Capstone projects Second Capstone Progress Report Due April 4 Exam #3 will be on April 4 –Castro Chaps 1-7 –One Hour, 20 M/C and 4 short essay Review Using Links –http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_example s/localindex.html#c6http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_example s/localindex.html#c6 –http://perleybrook.umfk.maine.edu/samples/links.htmhttp://perleybrook.umfk.maine.edu/samples/links.htm Lecture/Discuss Creating and Applying Styles

3. Assignment #4 Work in CODE mode not design!! A Title of “assignment #4” – …… assignment #4 ….. A least 3 of the 6 possible Section headers –Give each header a name and a title A division, a paragraph and an in-line span – Add some comments –Your name –Date you created this web page

4. Assignment #4 Bold – Italic – Preformatted text – Big and small text – Monospaced text – Quoted text (with reference) – Superscript and subscript –

5. Assignment 4 A transparent gif of your name (Image 1) A animation of your name (Image 2) 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

6. Assignment 4 Make sure each image has alternate text and a title – Make sure you specify size for each image – Rescale image 3 to 50% of Browser viewable width – Create some text describing Image 3 and create the following –float the text to the right of image 3 –float the text to the left of image 4 Make sure you have a background color or image –

7. Adding Images in Dreamweaver Problem

8. Links 3 parts –Destination Where to go URLs, Anchors, Files –Label The part the user sees Can be text or an image or both –Target Where the destination will be displayed In same browser window, a new browser window or a certain browser window

9. Creating a link to another webpage Destination – Value for href MUST be in “quotes” Label –Label text End of link label text

10. Creating a Web Link Use relative URLS if the destination is on the same server (see Chap 1) –“/bios/tonyg.htm” Use absolute URLs if the destination is on a different server (see Chap 1) –“http://www.somewhere.com/page.htm” DO NOT use “click here” as a label –Tacky!! Label CANNOT contain block-level elements

11. Creating Anchors An anchor is a labeled place on a Web Page that can be a destination for a Link text or image Any element can be a anchor using the “id” attribute – A header Name and id value MUST be in “quotes” For long documents create anchors for top, bottom and important sections

12. Linking to a Specific Anchor Link to “daName” on same page – Go to daName Link to “daName” on another page – Go to daName

13. Target Links to a Specific Browser Windows You can have the destination appear in a new Browser window so that you may view both the source and destination pages Same Window (default) – label New window – label Existing Windows – label –If the named window isn’t open it will be created

14. Setting a default Target By default a link opens in the same window that contains the link To change default –In head section – If you set a target in a link it will override default

15. More links Links can be created to many things –FTP href=“ftp://perleybrook.umfk.maine.edu” –E-mail href=“mailto:name@site.com” –Telnet href=“telnet://allagash.umfk.maine.edu” –Files href=“url/file.ext” If the browser does have a plug-in for the file it will attempt to download the file

16. Keyboard shortcuts for Links Keyboard shortcuts or Hotkeys –Ctrl-C for copy –Ctrl-V for paste For a link – label –In IE type alt-t –In Netscape ctrl-t Make sure you don’t override an existing hotkey

17. Setting Tab Order In many application you can use the tab key to move around from section to section To change how the TAB key works on your web page set a tabindex=“n” attribute – label –N can be 1 to 32767 –Smaller N’s will be TAB’ed to first –Negative N’s will be skipped

18. Using an Image to Label a Link Simply replace the label text with an image Border –Most browsers will create a blue border around an image that is a link –You can add a border to any image

19. Image Maps An Image map is an image with regions that link to different destinations Two types –Client Side Image Maps Faster Most common Users can see the HTML that creates the map and the possible destinations –Server Side Image Maps Require a special program running on the server Hides the destinations from “View Source”

20. Creating an Image Map First divide the image into regions –Circles Center and radius –Rectangles Top Left X and Y and Bottom right X and Y –Polygons X and Y for each vertex of the Polygon

21. Finding regions

22. Creating a Client Side Image Map Divide your images into a regions Create a “map” of the regions – –Add regions & destinations Create a default –Add closing tag Associate map with the image –

23. Using Dreamweaver for maps

24. Add hotspots

25. The Code

26. Assignment # 5 Examples –http://perleybrook.umfk.maine.edu/samples/links.htmhttp://perleybrook.umfk.maine.edu/samples/links.htm In Blackboard Linking Exercise Due April 4 Click on icon to see Assignment

27. 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

28. Style Sheet Examples Examples of applying style sheets – http://perleybrook.umfk.maine.edu/samples/styles.htm http://perleybrook.umfk.maine.edu/samples/styles.htm Formatting – http://perleybrook.umfk.maine.edu/samples/StyleFormat.htm http://perleybrook.umfk.maine.edu/samples/StyleFormat.htm – http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_exa mples/localindex.html#c7 http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_exa mples/localindex.html#c

29. Introduction The CSS1 specification was developed in 1996 CSS2 was released in 1998 CSS3 is on its way CSSs provide the means to control and change presentation of HTML documents CSS is not technically HTML, but can be embedded in HTML documents Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents Style is specified for a tag by the values of its properties http://www.w3.org/TR/REC-CSS2/

30. Levels of Style Sheets There are three levels of style sheets Inline - specified for a specific occurrence of a tag and apply only to that tag – This is fine-grain style, which defeats the purpose of style sheets - uniform style Document-level style sheets - apply to the whole document in which they appear This is what happens when you modify xHTML in Dreamweaver using deign mode External style sheets - can be applied to any number of documents When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence – In a sense, the browser searches for a style property spec, starting with inline, until it finds one (or there isn’t one) – http://www.w3.org/TR/1998/REC-CSS2- 19980512/cascade.html#cascade http://www.w3.org/TR/1998/REC-CSS2- 19980512/cascade.html#cascade

31. Levels of Style Sheets Inline style sheets appear in the tag itself Document-level style sheets appear in the head of the document External style sheets are in separate files, potentially on any server on the Internet – Written as text files with the MIME type text/css

32. Styles Use to format XHTML documents Separate Content from Format Allows consistent “Look and Feel” to all web pages in a web site

33. Constructing A Style Rule Selector {property:value; property:value} Examples – h1 {color:red;background:yellow;} – h2 {color:white;background:black;} – p {color:blue;}

34. Property Values Value can be inherit from parent – Color:inherit; Value can be predefined – display:block; Value can be Length – Must contain units (except 0) – font-size:12px Vale can be a percentage (relative to parent) – font-size:80%; – font-size:2em; Value can be a number (real or integer) – Line-height:2; Value can be a URL – Background:url(image.gif); Value can be a color – rgb( 0,0,255) – rgb(0%,0%,100%) << error in textbook! – #0000ff – blue

35. Adding comments to a style rule Why?? – So that you remember /* comments */ Cannot be nested – /* this /*doesn’t*/ work */

36. 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

37. 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}

38. 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 – –.bigheader {property:value} If you used id – – #firstheader { property :value} Can be used with element name – h1.bigheader {color:red} – h1#firstheader {color:red}

39. Selecting Elements by Context Selecting elements based on parent/child relationship between elements header paragraph BIG small div is ancestor of all the above elements h1 is child of div div is parent (ancestor) of h1 big is a sibling of small h1 is a sibling of p big is descendent of div and child of p

40. 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}

41. 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}

42. 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}

43. 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

44. 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

45. 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}

46. 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

48. Linking an external style sheet In head section – – url.css is the location and filename of your external CSS style sheets

49. Creating an Internal Style Sheet Internal style sheet will only effect the one web page In head section selector{property:value} ….

50. Importing External Style Sheets Used with internal style sheet commands @import “external.css”; selector{property:value} ….

51. Applying styles locally Use style attribute in the element you wish to format Will only effect that occurrence of the element Example –

52. Cascade: When Rules Collide Based on 1. Inheritance Style attribute may be inherited from parent element 2. Specificity The more specific the selector the stronger the rule ID is the most specific selector 3. Location The later the rule the stronger it is 4. Declaration !important added to end of rule

53. 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