1 / 37

Web Design Lesson 4

Web Design Lesson 4. Lexington Technology Center March 20, 2003 Bob Herring On the web at www.lexington1.net/adulted/computer/web_design.htm. Web Design Lesson 4. Review of Tuesday’s Lesson. Hyperlinks Drawing Tables FrontPage Table Toolbar Page Design

cicada
Download Presentation

Web Design Lesson 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web DesignLesson 4 Lexington Technology Center March 20, 2003 Bob Herring On the web at www.lexington1.net/adulted/computer/web_design.htm

  2. Web Design Lesson 4 Review of Tuesday’s Lesson • Hyperlinks • Drawing Tables • FrontPage Table Toolbar • Page Design • Implementing the Design in FrontPage • Typography • HTML Tags • Personal Web Project 2

  3. Web Design Lesson 4 Cascading Style Sheets • What • Cascading style sheets are documents that control the way an • HTML document will be presented by the browser • “Cascading” refers to how style rules are passed down from • higher-level style sheets unless overruled by a style with more • “weight” • Why • Yields better typography and layout control • Makes style separate from structure • Keeps file sizes down • Site maintenance is easier • Easy to learn 3

  4. Web Design Lesson 4 Cascading Style Sheets • How • Define rules for your web pages • Always use end tags (e.g., </P>) -- styles require it • Styles can be set: • Inline • With an embedded style sheet • With a linked style sheet • With an imported style sheet • Styles are “inherited” -- elements at lower levels have the same • properties as their “parents” above them (e.g., a list and its items) selector {property: value} H1 {color: red} 4

  5. Web Design Lesson 4 Inheritance Features • Rules of “Weight” • Browser default • User’s style settings • Linked style sheets • Imported style sheets • Embedded style sheets • Inline style settings • The more specific rule applies • Rules of equal weight -- last commanded applies • Margin setting rules are not inherited • An !important setting overrides all other rules Increasing Weight H1 {color: red !important} 5

  6. Web Design Lesson 4 Multiple Styles • Multiple selectors can be grouped in front of the property/value section • Separate selectors with commas • Multiple instances of the same selector are permitted • The last property/value combination mentioned takes precedence • Multiple styles can be be applied to the same selector • Separate styles with semicolons • Include a semicolon at the end of the list H1, H2, H3 {color: red} P {font-size: 12pt; font-family: verdana, sans-serif;} 6

  7. Web Design Lesson 4 Inline Style Sheets • This is the highest weight setting • Styles are applied locally to some particular element • Style is an attribute of the start tag • Multiple styles can be set -- separate with semicolons <H1 STYLE=“color: red”>This heading will be red!</H1> <H1 STYLE=“color: red; font-family: verdana”>This heading will be red!</H1> 7

  8. Web Design Lesson 4 Inline Style Setting in HTML View • An inline style modifies the H1 start tag to cause the browser • to make the text red and set the Verdana font 8

  9. Web Design Lesson 4 Effect of the Inline Style • The H1 heading modified 9

  10. Web Design Lesson 4 Embedded Style Sheet • Embedded styles appear in the <HEAD> section • Enclose styles in comment tags to prevent them from showing • Ensure that quotation marks are ASCII-type characters <HTML> <HEAD> <TITLE>Your Title Here</TITLE> <STYLE TYPE=“text/css”> <!-- H1 {color: red} P {font-size: 12pt; font-family: verdana, sans-serif;} --> </STYLE> </HEAD> <BODY>Body of the document</BODY> </HTML> 10

  11. Web Design Lesson 4 Embedded Styles in HTML View • Embedded styles are placed after the title • FrontPage shows the styles in gray because of the comment tags 11

  12. Web Design Lesson 4 Stylesheet File • Style sheet files are simple text files • Create them in Notepad; save using the “All Files” method • Ensure that they have the .css extension before using H1 {color: red} H2 {color: blue} H3 {color: green} P {font-size: 12pt; font-family: verdana, sans-serif;} 12

  13. Web Design Lesson 4 Stylesheet File in Notepad • The style sheet in Notepad 13

  14. Web Design Lesson 4 Linked Style Sheets • The most cost-effective way to apply styles is with a linked file • In place of the <STYLE> tag, use a <LINK> • The <LINK> tag causes the browser to open the cascading style • sheet file stylesheet.css and apply the styles to the page • Multiple style sheets are permitted; use a separate <LINK> statement • All style sheet files must have a .css extension • Linked style sheet files are the FrontPage default <HEAD> <TITLE>Page Title</TITLE> <LINK REL=“stylesheet” TYPE=“text/css” HREF=“/pathname/stylesheet.css”> </HEAD> 14

  15. Web Design Lesson 4 Linking Style Sheets with Front Page • Click Format, then select Style Sheet Links 15

  16. Web Design Lesson 4 Linking Style Sheets with FrontPage • The Link Style Sheet dialog appears • Select either Selected page(s) or All pages • Click the Add button • In the Select Hyperlink dialog, click on stylesheet.css, then click OK 16

  17. Web Design Lesson 4 Web Page Before Styles • Before the style sheet takes effect, all the text is black and set • in Times New Roman 17

  18. Web Design Lesson 4 Effect of the Style Sheet • When the browser applies the rules from the style sheet, headings • are colored and the paragraphs are set to the Verdana font 18

  19. Web Design Lesson 4 Changing the Style Through the Style Sheet File • Open the stylesheet.css file again in Notepad (Select All Files) • change “verdana” to “courier new” • Save the file 19

  20. Web Design Lesson 4 Changed Style • When you return, the browser has picked up the new style and • changed the H1 heading’s font to Courier • The style sheet file is a powerful tool for making wholesale changes • to your web pages 20

  21. Web Design Lesson 4 Imported Style Sheets • Another way to access the stylesheet.css file is to import it • The @import statement goes in the style section of the <HEAD> • Imported files must precede all other style commands • Note that @import statements must end with a semicolon • The @import method can hide styles from lower-level browsers • Not well supported yet <STYLE TYPE=“text/css”> <!-- @import url(http://pathname/stylesheet.css); --> </STYLE> 21

  22. Web Design Lesson 4 @import Statement in HTML View • The @import statement takes the place of the link, but refers to • the same file as before (stylesheet.css) 22

  23. Web Design Lesson 4 Using <DIV> and <SPAN> • <DIV> and <SPAN> are container tags used to group other elements • They have no inherent formats, but can accept styles • Include a STYLE= attribute in the start tag • <DIV> groups blocks of text • <SPAN> is used inline to group sets of characters <DIV STYLE=“color: blue”> <H1>Headline!!</H1> <P>Text paragraph</P> </DIV> <P>regular text <SPAN STYLE=“color: blue”>blue text</SPAN> more regular text</P> 23

  24. Web Design Lesson 4 Contextual Styles • Styles can be set to respond to specific conditions • In the example below, list item <LI> style is set to blue, but only if • it is bold <B>. The style responds to the context • The contextual style is indicated by the absence of a comma • For multiple selectors, group the contextual styles using commas • between the selectors LI B {color: blue} H1 B, H2 B, H3 B {color: blue} 24

  25. Web Design Lesson 4 Contextual Styles • When a list is inserted, the text is normal • With LI B {color: blue} in the style sheet, making the list item • bold also sets its color to blue 25

  26. Web Design Lesson 4 Class Attribute • Identifies elements that are a part of a conceptual group • Classes are implemented in two parts: • In the <STYLE> section, selector-period-classname • In the affected text’s start tag, CLASS=“classname” • Using just the period-classname affects all members of the class • Class names cannot have spaces. Avoid using underscores H1.important {color: red} .important {color: red} <H1 CLASS=“important”>This is critical!</H1> <P CLASS=“important”>No kidding!!!</P> 26

  27. Web Design Lesson 4 Drop Cap Style Using a Class • Use a class example below to make a dropped capital effect • The period before the class name tells the browser it’s a class <style type="text/css"> <!-- .dropcap {font: bold 400% sans-serif; color: teal; width: 24pt; float: left;} --> </style> 27

  28. Web Design Lesson 4 Drop Cap Class in HTML View • The class is inserted in the <STYLE> section in <HEAD> • To format the first letter, use the class: • <SPAN CLASS=“dropcap”>T</SPAN> 28

  29. Web Design Lesson 4 Drop Cap Class in Preview • Applying the .dropcap class does the following: • Makes the font bold, Arial, and 4 times the surrounding text • Sets the color to teal • Sets a width that causes the other text to flow around it 29

  30. Web Design Lesson 4 ID Attribute • The ID attribute is similar to a class, but it specifies a single element • IDs are implemented in two parts: • In the <STYLE> section, number sign-id • In the affected text’s start tag, ID=“id” • Each ID must be unique within the document • All IDs must begin with a letter #x12345 {color: red} <P ID=“x12345”>New Item!</P> 30

  31. Web Design Lesson 4 ID Attribute HTML View • Type each ID to be set into the <STYLE> section • Use a <SPAN> to mark the affected text • Here, <SPAN ID=“x12345> Three Muses</SPAN> 31

  32. Web Design Lesson 4 ID Attribute in Preview • An ID is good for text that may (or may not) need to be changed • When the change is needed, insert the ID into the style sheet file 32

  33. Web Design Lesson 4 Measurement Units • These are the units that can be used to specify properties • Try to use only ems and exes. Variation in screen sizes makes • specific measurements (pt, pc, in, mm, cm) hazardous • Use pixels only for pictures and objects 33

  34. Web Design Lesson 4 Type-Related Properties • Text can be formatted using any or all of the 15 properties listed • in the table • Not all browsers support all of the properties! 34

  35. Web Design Lesson 4 Letter-Spacing Attribute in HTML View • Try setting the letter spacing of the headline to 1em • <P STYLE=“letter-spacing: 1em>BIRTH OF THE MUSES</P> 35

  36. Web Design Lesson 4 Letter-Spacing Attribute in Preview • Letter spacing is good for column-spanning headlines 36

  37. Web Design Lesson 4 Review • Cascading Style Sheets • Inline Styles • Linked Style Sheets • Imported Style Sheets • Using <DIV> and <SPAN> • Contextual Styles • Class and ID Attributes • Measurement Units in HTML • Text Properties 37

More Related