Web Chapter.04

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

Tutorial 4Exploring Graphic Elements and Images : 

Tutorial 4Exploring Graphic Elements and Images

Objectives : 

New Perspectives on Blended HTML, XHTML, and CSS 22 Objectives Wrap text around an image Use an image as a horizontal rule Format the default horizontal rule Use the <div> tag Investigate the box model Explore the padding, margin, and border properties

Objectives : 

Objectives Float an image or text Use the clear property Change the list style type and position Use an image in a bulleted list Format and float headings Create definition lists Work with background properties New Perspectives on Blended HTML, XHTML, and CSS 33

Including Images, Borders, and Text on Web Pages : 

Including Images, Borders, and Text on Web Pages Guidelines for using images Add extra space around images so the text doesn’t crowd them Use light, simple backgrounds that don’t interfere with the text Add space between text and borders to avoid clutter Put graphics and text side by side to minimize scrolling New Perspectives on Blended HTML, XHTML, and CSS 44

Inserting an Image : 

Inserting an Image New Perspectives on Blended HTML, XHTML, and CSS 55

Enhancing the Appearance of Horizontal Rules : 

Enhancing the Appearance of Horizontal Rules New Perspectives on Blended HTML, XHTML, and CSS 66

Setting Horizontal Rule Properties : 

Setting Horizontal Rule Properties To specify the format of a horizontal rule, enter the following code where you want the rule to appear: <hr property: value /> Use the following properties to set the appearance of the rule: width: Use to set the width in pixels or as a percentage value of the screen width. Percentages are preferred text-align: Use to align the rule left, center, or right. Center is the default value height: Use to set the height (the thickness) of the rule in pixels. The default value is 2px color: Use to change the color of the rule. Use named values, RGB values, or hex values New Perspectives on Blended HTML, XHTML, and CSS 77

Setting Horizontal Rule Properties : 

Setting Horizontal Rule Properties New Perspectives on Blended HTML, XHTML, and CSS 88

Setting Horizontal Rule Properties : 

Setting Horizontal Rule Properties New Perspectives on Blended HTML, XHTML, and CSS 99

Using the Box Model : 

Using the Box Model New Perspectives on Blended HTML, XHTML, and CSS 1010

Using the Padding Properties : 

Using the Padding Properties While the margin property controls white space outside an element, the padding property controls white space inside an element When you create an element with a background color, letters that have ascenders (such as the letter d) or descenders (such as the letter g) might be clipped New Perspectives on Blended HTML, XHTML, and CSS 1111

Using the Margin Properties : 

Using the Margin Properties The margin property is often used with images to create white space on one or more sides of an image New Perspectives on Blended HTML, XHTML, and CSS 1212

Using the Border Properties : 

Using the Border Properties You use the border properties to draw a border around any block-level element, such as headings, blockquotes, or paragraphs To create a style using the border shortcut property, use the style: border: color style thickness; where color is a named color, RGB triplet, or hexadecimal value, style is solid, double, dotted, dashed, groove, ridge, inset, outset, or none, and thickness is thin, medium, or thick New Perspectives on Blended HTML, XHTML, and CSS 1313

Using the Border Properties : 

Using the Border Properties New Perspectives on Blended HTML, XHTML, and CSS 1414

Using the Border Properties : 

Using the Border Properties New Perspectives on Blended HTML, XHTML, and CSS 1515

Using the Border Properties : 

Using the Border Properties New Perspectives on Blended HTML, XHTML, and CSS 1616

Positioning Images : 

Positioning Images New Perspectives on Blended HTML, XHTML, and CSS 1717

Using the float Property : 

Using the float Property If you want to wrap text around an image, use the float property with a value of left or right New Perspectives on Blended HTML, XHTML, and CSS 1818

Using the float Property : 

Using the float Property New Perspectives on Blended HTML, XHTML, and CSS 1919

Using the Clear Property : 

Using the Clear Property To create a style to clear an element, use the property: clear: value; where value is left, right, or both New Perspectives on Blended HTML, XHTML, and CSS 2020

Setting List Properties : 

Setting List Properties To specify the format of a list, enter the following code where you want the list to appear: ul { or ol { list-style-property: value; Use the following properties to set the appearance of the list: list-style-type: Use this to change the bullet type, the numbering, or the lettering for a list. Values are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none list-style-image: Use this to insert an image instead of one of the list style types. Specify a value in the format url(imagename) New Perspectives on Blended HTML, XHTML, and CSS 2121

Setting List Properties : 

Setting List Properties list-style-position: Use this to position the bullet either inside or outside the indented text for the list item. Values are inside or outside (the default) list-style: This is the shortcut property that specifies the type, the image, and the position; list the values for each property in that order vertical-align (for images): If necessary, use the vertical-align property to align a liststyle- image with the list item text. Values are top, middle, and bottom New Perspectives on Blended HTML, XHTML, and CSS 2222

Using the list-style-type Property : 

Using the list-style-type Property You use the list-style-type property to change the appearance of the default solid bullet for unordered lists New Perspectives on Blended HTML, XHTML, and CSS 2323

Applying the list-style-image Property : 

Applying the list-style-image Property You use the list-style-image property to change the bullet to a graphic image The list-style property is the shortcut property for list styles The vertical-align property can be used to position an element, such as an image, vertically with text Top Middle Bottom New Perspectives on Blended HTML, XHTML, and CSS 2424

Applying the list-style-image Property : 

Applying the list-style-image Property New Perspectives on Blended HTML, XHTML, and CSS 2525

Working with Definition Lists : 

Working with Definition Lists To create a definition list, use the following syntax: <dl> <dt>defined term1</dt> <dd>definition1</dd> <dt>defined term2</dt> <dd>definition2</dd> </dl> where defined term is the word or phrase to be defined and definition is the definition of the term New Perspectives on Blended HTML, XHTML, and CSS 2626

List-style Properties : 

List-style Properties New Perspectives on Blended HTML, XHTML, and CSS 2727

Setting Background Properties : 

Setting Background Properties To specify the appearance of a background, enter the following code: body { background-property: value; } Use the following properties to set the appearance of the background: background-image: Use this to place an image behind the contents of an element. The image can be any .gif or jpg image, but the syntax must be similar to this: url(imagename.gif). background-position: Use this to position an image on the page without the need for tables or frames. Use keywords or percentage values New Perspectives on Blended HTML, XHTML, and CSS 2828

Setting Background Properties : 

Setting Background Properties background-repeat: Use this to repeat an image horizontally, vertically, or to fill the entire screen. When using the default value, repeat, (the image is repeated to the right and down the page to fill the entire window with copies of the same image). Other values are repeat-x (the image is repeated horizontally across the window), repeat-y (the image is repeated vertically down the window), no-repeat (the image is not repeated), and background-attachment (determines whether an image scrolls with the insertion point) background: This is the shortcut property used to change all of the background properties. Properties and values must be listed in a set order New Perspectives on Blended HTML, XHTML, and CSS 2929

Setting Background Properties : 

Setting Background Properties New Perspectives on Blended HTML, XHTML, and CSS 3030

Setting Background Properties : 

Setting Background Properties New Perspectives on Blended HTML, XHTML, and CSS 3131