1 / 35

Enhancing the Web Page

Enhancing the Web Page. Chapter 3 BCIS 1405 Session 15. Formatting with Cascading Style Sheets. Styles pre-define formats Allows changes to be made quickly All styles are defined in one place Makes for Global Formatting Changes made in one place affects all

avalon
Download Presentation

Enhancing the Web Page

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. Enhancing the Web Page Chapter 3 BCIS 1405 Session 15 Exploring Office 2003 – Grauer and Barber

  2. Formatting withCascading Style Sheets • Styles pre-define formats • Allows changes to be made quickly • All styles are defined in one place • Makes for Global Formatting • Changes made in one place affects all • Best to put Style tag in HEAD section

  3. Cascading Styles • Example: • All Body text to be centered <HEAD> <STYLE type = “text/css”> Body {text-align: center} </STYLE> </HEAD> <BODY> etc …

  4. Defining a CLASS for Style • Class used in two places • In HEAD Style definition • In Body text HEAD EXAMPLE: <STYLE type =“text/css”> P {font-style: normal} P.it {font-style: italics} P.color {color: red} </STYLE>

  5. Defining a CLASS for Style(Continued) • Class used in two places • In HEAD Style definition • In Body text BODY Text EXAMPLE: <P class = “it”> This text will be in italics </P> <P> This text is not affected <\P> <P class = “color”> This text is red <\P> <P> This text is not affected <\P>

  6. HTML to Show Use of Classes

  7. RESULTING WEB PAGE

  8. Mixing Classes with Other Tags Adding a Bold Tag

  9. BOLD HAS BEEN ADDED

  10. Adding a Horizontal Line • Placing a line or ruler across the page • Use the <HR> tag • No closing tag • Can change width and length of the line • Used to divide a page

  11. Example: <STYLE type = “text/css”> HR {height:10; color: blue} </STYLE> <BODY> <BR> <BR> <HR> </BODY>

  12. Result of Adding a Horizontal Line 10 Point Blue Line inserted

  13. Inserting Pictures / Graphics • Can include universal formats • .JPG (best for photographs) • .GIF (most browsers accept this format) • Use <IMG> • Must use SRC=“filename” attribute for source • EXAMPLE: <IMG SRC=“A:\picturename.jpg”> • No closing tag

  14. Inserting Pictures / Graphics • Can use ALT= alternate attribute to display • EXAMPLE: <IMG SRC=“A:\picturename.jpg” ALT=“Company CEO”> • This will display “Company CEO” rather than the file name (“A:\picturename.jpg”) • Other attributes available are HEIGHT, WIDTH, FLOAT (causes browser to load quicker) • Height & Width are measured in pixels • Float defines position (Left, Right, Center)

  15. Inserting Pictures / Graphics • EXAMPLE using Height, Width, Float <IMG SRC=“A:\picturename.jpg” ALT=“Company CEO” HEIGHT= “200” Width = “40”> • Better to use Classes for each image size <STYLE type=“text/css”> IMG.ceoPic1 {width: 40; height: 200; float: center} </STYLE> … body text … <IMG SRC=“A:\picturename.jpg” class=“ceoPic1” ALT=“Company CEO”>

  16. Adding Background Color • Add a STYLE that applies to the BODY tag EXAMPLE: <STYLE type=“text/css”> BODY {background-color: #0000FF} </STYLE> This will create a blue background

  17. Common Colors

  18. Using a Graphic as Background • Use image as background (instead of color) • EXAMPLE for BODY background <STYLE type=“text/css”> BODY {background-image: url (A:\classroom2.jpg)} </STYLE> Image should be light in color for better reading of page

  19. RESULT of Classroom as background

  20. Result of using a small picture as a background (Browser tiles the image and repeats it to cover background)

  21. Changing Text Color • Can change color of different text types • <P> • <BODY> • <H1>, <H2>, etc. • Can change color of hypertext links • Can change color of visited links • Can change color of active links

  22. Changing Text Color • BODY Colors EXAMPLE of White Text with Blue Background <STYLE type=“text/css” BODY {color: #FFFFFF; background-color: #0000FF} </STYLE>

  23. Applied to previous Web Page

  24. To Insert Special CharactersYou can use Name or Code Must use Name or Code for “<“ because HTML uses that for start of a tag IF A < B would be coded: IF A &LT; B or IF A &#60; B

  25. Inline Styles • Used rarely – Single style definition is preferable • Used when a style is to be used only once • How it works: <H1> <B style=“font-size: 48”> L</B>ove </H1> Would produce: Love

  26. Using Tables • To better organize data for user • Columns and rows (intersection is a cell) • Data placed in cells • Table contents are between: <TABLE> and </TABLE> tags

  27. Table Syntax Start each row with: <TR> tag End each row with: </TR> tag Everything between these tags will appear in one row

  28. Table Syntax <TABLE> <TR> … text in First row </TR> <TR> … text in Second row </TR> </TABLE>

  29. Table Syntax • Use the <TH> and </TH> tags for column head • Will make contents BOLD for Col. Headings • EXAMPLE: <TABLE> <TR> <TH> Qty </TH> <TH> Price </TH> <TH> Cost </TH> </TR> Will create: Qty Price Cost

  30. Table Syntax • Use the <TD> and </TD> tags for column data <TABLE> <TR> <TH> Qty </TH> <TH> Price </TH> <TH> Cost </TH> </TR> <TR> <TD>2</TD> <TD>$10.00</TD> <TD>$40.00</TD> </TR>

  31. Table SyntaxAdding a Border • Use the <TD> and </TD> tags for column data <TABLE BORDER=4> <TR> <TH> Qty </TH> <TH> Price </TH> <TH> Cost </TH> </TR> <TR> <TD>2</TD> <TD>$10.00</TD> <TD>$40.00</TD> </TR>

  32. Result of Adding a Tableto our Example Web Page

  33. Table SyntaxWider Border & More Spacing • Use the <TD> and </TD> tags for column data <TABLE BORDER=12 CELLSPACING=12> <TR> <TH> Qty </TH> <TH> Price </TH> <TH> Cost </TH> </TR> <TR> <TD>2</TD> <TD>$10.00</TD> <TD>$40.00</TD> </TR> More space between cells Wider Border

  34. ASSIGNMENT • See online assignment for Session 15 • Due at beginning of next class

More Related