Embed Size (px)
Citation preview
Exploring Office 2003 – Grauer
and Barber
Enhancing the Web Page
Chapter 3
BCIS 1405 Session 15
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
Cascading Styles
Example: All Body text to be centered
<HEAD>
<STYLE type = “text/css”>
Body {text-align: center}
</STYLE>
</HEAD>
<BODY>
etc …
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>
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>
HTML to Show Use of Classes
RESULTING WEB PAGE
Mixing Classes with Other Tags
Adding a Bold Tag
BOLD HAS BEEN ADDED
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
Example:<STYLE type = “text/css”>
HR {height:10; color: blue}</STYLE>
<BODY>
<BR><BR>
<HR></BODY>
Result of Adding a Horizontal Line
10 Point Blue Line inserted
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
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)
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”>
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
Common Colors
COLOR HEX EQUIVALENTRed #FF0000
Green #00FF00Blue #0000FFBlack #000000White #FFFFFFTan #DEB887
Turquoise #19CCDFMagenta #FF00FFYellow #FFFF00
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
RESULT of Classroom as background
Result of using a small picture as a background
(Browser tiles the image and repeats it to cover background)
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
Changing Text Color
BODY Colors
EXAMPLE of White Text with Blue Background
<STYLE type=“text/css”
BODY {color: #FFFFFF; background-color: #0000FF}
</STYLE>
Applied to previous Web Page
To Insert Special CharactersYou can use Name or Code
CHARACTER NAME CODE
© © ©
® ® ®
È È È
¥ ¥ ¥
£ £ £
> > >
< < <
& & &Must use Name or Code for “<“ because HTML uses that for start of a tag
IF A < B would be coded: IF A < B or IF A < B
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
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
Table Syntax
Start each row with:
<TR> tag
End each row with:
</TR> tag
Everything between these tags will appear in one row
Table Syntax
<TABLE>
<TR>
… text in First row
</TR>
<TR>
… text in Second row
</TR>
</TABLE>
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
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>
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>
Result of Adding a Tableto our Example Web Page
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>
Wider Border
More space between cells
ASSIGNMENT
See online assignment for Session 15
Due at beginning of next class
