Dhtml css
List of Figures
Figure 2.1: A Web page's title, created using the TITLE element, is displayed on a browser's title bar.
Figure 2.2: The H1 element defines the level-one heading (or displayable title) for an HTML document.
Figure 2.3: The P (Paragraph) element is used to add an introductory paragraph to the page.
Figure 2.4: The I and the EM elements are presented in italics, whereas the B and STRONG elements are presented as bolded.
Figure 2.5: The H2 (Level-Two Heading) element defines a major subheading that starts a new section.
Figure 2.6: There are six heading-level elements, but the last two are smaller than the default text size and are seldom used.
Figure 2.7: A bulleted (or unordered) list is created using the UL and LI elements.
Figure 2.8: Most browsers display a hypertext link as underlined.
Figure 2.9: The ALIGN attribute can horizontally align headings and paragraphs.
Figure 2.10: The ALIGN attribute can horizontally align headings and paragraphs.
Figure 2.11: The HR element draws a horizontal rule across the page.
Figure 2.12: The address block identifies the author or owner of a page.
Figure 2.13: The BR element adds a line break.
Figure 2.14: A link to the author's e-mail address can be added to the address block.
Figure 3.1: Heading elements (H1, H2, and H3), a bulleted list (UL), and paragraph elements are already included in the example file.
Figure 3.2: A menu link has been created that jumps to a destination anchor.
Figure 3.3: The browser jumps down to the specified destination anchor after a menu link is clicked on.
Figure 3.4: Two additional menu links are added to the document menu.
Figure 3.5: The third menu link jumps down to the "Egg Grades" heading.
Figure 3.6: A browser indents and varies the bullet-type of a nested bulleted list.
Figure 3.7: A "circle" bullet-type is set for the top-level list and a "square" bullet-type for the nested list.
Figure 3.8: A numbered list is added.
Figure 3.9: Browsers do not automatically vary the number-type of nested numbered lists.
Figure 3.10: You can create a multi-level outline by specifying the number-type for nested numbered lists.
Figure 3.11: Paragraphs nested in lists are indented and aligned with the list item in which they are nested.
Figure 3.12: An inline image is inserted into the page.
Figure 3.13: Many browsers display alternative text when the mouse is passed over an image.
Figure 3.14: The inline image is nested in a center-aligned P element.
Figure 3.15: Inline images are bottom-aligned by default.
Figure 3.16: The image is top-aligned relative to the line on which it is inserted.
Figure 3.17: The image is middle-aligned relative to the line on which it is inserted.
Figure 3.18: Inserting a BR element causes following text to be wrapped beneath the image.
Figure 3.19: An extended quotation can be formatted as a block quote, separated from surrounding text and indented in from both margins.
Figure 3.20: The SUP element superscripts nested content.
Figure 3.21: The note number is turned into a link that jumps to a footnote at the bottom of the page.
Figure 3.22: When jumped to from a note link, the footnote is displayed at the top of the browser's viewport.
Figure 3.23: A customized HR element creates a footnote separator line.
Figure 3.24: Spaces and hard returns are not ignored, but are displayed, when inserted inside of a PRE element.
Figure 3.25: The copyright symbol is displayed.
Figure 3.26: The registered symbol marks a brand name that is a registered trademark.
Figure 3.27: You need to use a workaround, if you want to display a trademark symbol that will be viewable by all.
Figure 4.1: A non-floating image is inserted.
Figure 4.2: The image is now floating, with following text flowing around the image.
Figure 4.3: An image floating on the right margin is inserted.
Figure 4.4: Text is flowing between two floating images.
Figure 4.5: Text is flowing between staggered left-floating and right-floating images.
Figure 4.6: Horizontal spacing is added to the left-floating image and both vertical and horizontal spacing are added to the right-floating image.
Figure 4.7: Text following the BR element (with clear="left" ) moves down to clear the left-floating image.
Figure 4.8: Text following the BR element (with clear="right" ) moves down to clear the right-floating image.
Figure 4.9: Text following the BR element (with clear="all" ) moves down to clear both the left-floating and the right-floating image.
Figure 4.10: An image link is surrounded by a border, indicating it is a link.
Figure 4.11: The image link border is increased to 10 pixels.
Figure 4.12: The image link border is turned off by setting its size to zero.
Figure 4.13: The list of links is turned into an indented icon link list.
Figure 4.14: Seven absolute font sizes can be set in HTML.
Figure 4.15: The initial letters of the H1 element are increased to an absolute font size of 7 (one size larger than the H1 element's default size).
Figure 4.16: Relative font sizes increase or decrease the font size relative to the default font size.
Figure 4.17: The BIG element increases the size of nested text by one font size.
Figure 4.18: The SMALL element is used to decrease the font size of the copyright statement by one font size.
Figure 4.19: 16 standard color names can be used to set font colors (black and white not shown).
Figure 4.20: The H1 element is displayed in a red color.
Figure 4.21: RGB hex codes can be used to set up to 16.7 million possible colors.
Figure 4.22: The initial H2 and H3 elements are set to display in "slate blue" (#336699) and "rust orange"(#cc6600) colors, respectively.
Figure 4.23: The H1 element is displayed in the Arial font face, if available.
Figure 4.24: The H2 element is displayed in the Verdana font face, if available.
Figure 4.25: A selection of fonts available on many Windows systems is displayed.
Figure 4.26: Background, text, and link colors are set for the page.
Figure 4.27: One of the more effective ways to add visual appeal to your Web page is to use a background image.
Figure 4.28: Instead of an ordinary horizontal rule, you can use a fancy graphic rule.
Figure 4.29: The width of the graphic rule is set to 95 percent of the width of the browser's viewport.
Saturday Evening: Working with Tables (Bonus Section)
Figure 5.1: Multiple spaces and hard returns are ignored by a browser, if not contained within a PRE element.
Figure 5.2: Inside of the PRE element, multiple spaces and hard returns are displayed.
Figure 5.3: A table is composed of rows and columns.
Figure 5.4: A one-pixel border is added to the page.
Figure 5.5: The border around the table is increased to 6 pixels, while the borders between the data cells remain unchanged at a single pixel.
Figure 5.6: Spacing is added between the cells and padding within the cells.
Figure 5.7: Table headings are automatically bolded and centered.
Figure 5.8: You can center a table by inserting the align= "center" attribute in the TABLE element.
Figure 5.9: You can set the width of a table to a percentage (here 75 percent) of a browser window.
Figure 5.10: You can also add row headings to a table.
Figure 5.11: The content of the table rows is right-aligned.
Figure 5.12: The row headings are left-aligned.
Figure 5.13: You can add a caption to a table.
Figure 5.14: Table columns can be set to varying widths in pixels.
Figure 5.15: Table columns can be set to widths in pixels and percentages.
Figure 5.16: The "Totals" row is set to a height of 32 pixels.
Figure 5.17: The "Totals" row is set to be bottom-aligned.
Figure 5.18: The middle cell in the first heading row is set to span three columns.
Figure 5.19: Two cells are set to span the two top rows in the table.
Figure 5.20: You can assign different font sizes and colors to text inside table cells.
Figure 5.21: A light blue background color is displayed behind the whole table.
Figure 5.22: A light blue background image is displayed behind the whole table.
Figure 5.23: Background colors are displayed behind the first, second, and bottom rows in the table.
Figure 5.24: Background images are displayed behind the table cells in the first, second, and bottom rows of the table.
Figure 5.25: You have to set the BORDER and CELLSPACING values to zero to completely remove the borders and spacing between cells.
Figure 5.26: Using tables, you can create an indented icon link list with no limit on the number of indented lines.
Figure 6.1: A two-column frame page is shown in the browser.
Figure 6.2: Clicking on the "Coleridge" link in the sidebar menu causes the Coleridge page to be displayed in the "main" frame.
Figure 6.3: The first column is set to a width of 125 pixels, whereas the second column is free to expand or contract along with the browser window.
Figure 6.4: A combination of standard and non-standard attributes is required to create a seamless framed layout.
Figure 6.5: A link menu to the other pages in the site sets up front.html so it can stand on its own outside of the frameset.
Figure 6.6: A link back to the front page links a content page back to the rest of the site, if it should be opened outside of its frameset.
Figure 6.7: A two-row frame page is shown in the browser.
Figure 6.8: Clicking on the "Tennyson" link in the sidebar menu causes the Tennyson page to be displayed in the "main" frame.
Figure 6.9: A combination row-column frame page is displayed in the browser.
Figure 6.10: After clicking on the "R. Browning" link, the Robert Browning page is displayed in the lower-right frame (the "main" frame).
Figure 6.11: A windowed frameset page is displayed within a frame (or window) in a linking frameset page.
Figure 6.12: A windowed frameset page is displayed within a frame (or window) in a linking frameset page.
Figure 6.13: Clicking on the "Blake" link in the sidebar menu causes the William Blake page (blake.html) to be displayed in the "main" frame.
Figure 6.14: Background images can produce a dramatic effect for a framed Web site.
Figure 7.1: Text boxes enable visitors to type a single line of text up to a maximum number of characters (here 25).
Figure 7.2: You can use text boxes to gather just about any kind of data.
Figure 7.3: You can set a default value for a text box.
Figure 7.4: A radio button list works similarly to the buttons on a car radio (selecting one deselects the others).
Figure 7.5: You can set a radio button to be initially selected.
Figure 7.6: Check boxes are similar to radio buttons, except visitors can select as many as they want.
Figure 7.7: Before a list menu is clicked, it displays only the currently selected option.
Figure 7.8: After a list menu is clicked, the full list of options is expanded.
Figure 7.9: You can set a list menu so it is automatically expanded and allows multiple selections.
Figure 7.10: A text area box differs from a text box in that it enables visitors to type several lines of text.
Figure 7.11: The submit button submits the form's data, whereas the reset button resets the form.
Figure 7.12: You can also use an image as a submit button for your form.
Figure 7.13: Using the BUTTON element, you have more versatility in creating submit and reset buttons.
Figure 7.14: Text is input into the text boxes, a radio button is selected, and several check boxes are selected.
Figure 7.15: More than one list menu option is selected.
Figure 7.16: Several lines of text are typed into the text area box and the Submit button is clicked.
Figure 7.17: PRE elements can be used to vertically align input controls in a form.
Figure 7.18: A table can be used to vertically align input controls in a form.
Figure 7.19: A background color can create a nice contrast between the page background and the form's input boxes and other controls.
Figure 8.1: A style rule is added that causes the H1 element to be colored blue.
Figure 8.2: A style uses an RGB hex code (#ff6600) to cause all H2 elements to be colored orange.
Figure 8.3: The H1 element is set to a size of 42 pixels.
Figure 8.4: The H2 element is set to a size of two ems.
Figure 8.5: A style causes the H1 element to be displayed using an Arial font.
Figure 8.6: Style properties are set for the SPAN element.
Figure 8.7: Text, link, and background colors are set for the document, using styles alone.
Figure 8.8: A style is used to display a background image behind the document body.
Figure 8.9: The contents of the banner image's paragraph and the following H1 element are centered using the text-align property.
Figure 8.10: The img.leftfloat style floats the image on the left margin and inserts a ten-pixel right margin to separate the image from the flowing text.
Figure 8.11: The img.rightfloat style floats the image on the right margin and inserts a five-pixel left margin to separate the image from the flowing text.
Figure 8.12: The clear property can cause an element to clear a floating image.
Figure 8.13: A 3-em margin is set for the document body, and 1-em left and right margins are set for paragraph elements.
Figure 8.14: A 10-pixel padding amount and a 3-pixel lime ridge border are set around the H2 element.
Figure 8.15: The DIV element is used to create a bordered division (or box) around the document's body and specify other formatting to be displayed inside of the division.
Figure 8.16: The DIV element can also be used to create a centered box.
Figure 8.17: The list's numbering system is changed to uppercase alphabetic characters.
Figure 8.18: Using styles, you can specify an image to be displayed as an unordered list's bullet.
Figure 8.19: A message is displayed in Netscape 4, alerting users that the page will look better in a browser that supports Web standards.
Sunday Evening: Creating Page Layouts (Bonus Section)
Figure 9.1: A page layout featuring three rows and two columns is created using a table.
Figure 9.2: Background colors are set for the page and the table's sections, as well as foreground colors for links and text.
Figure 9.3: Background images are set for the page and the table's sections.
Figure 9.4: The page margins and the table borders are eliminated.
Figure 9.5: A third-column is added to the page layout.
Figure 9.6: Extra cell padding is added to the table cell defining the middle column.
Figure 9.7: Cells spanning rows and columns are incorporated into the layout.
Figure 9.8: Basic display characteristics are set for the table.
Figure 9.9: Styles are controlling the appearance of the table-based page layout.
Figure 9.10: Background images and borders are added to the table layout.
Figure 9.11: A page layout is created using styles alone.
Figure 9.12: A footer is displayed at the bottom of the page.
Appendix C: Creating Your Own Web Graphics
Figure C.1: A text object with an inner bevel effect is created.
Figure C.2: The image's white background color is set as transparent.
Figure C.3: In Paint Shop Pro 8, you can view the transparent areas of your image (as a checkerboard pattern).
Figure C.4: A transparent GIF is displayed against a Web page's background image.
Figure C.5: When a transparent GIF with a white background and anti-aliased text is displayed against a Web page's dark background, a noticeable "halo" effect occurs.
Figure C.6: When anti-aliasing is turned off, the undesirable "halo" effect is eliminated.
Figure C.7: A drop shadow effect is displayed against a background color picked from the target page's background image.
Figure C.8: Only 256 colors, contained in the image, are now displayed as available colors for the image.
Figure C.9: A drop shadow effect is added behind the text object with a gradient fill.
Figure C.10: A 3D button with a drop shadow effect is created in Paint Shop Pro 8.
Figure C.11: A three-dimensional 400-Ч-15 graphic rule is created.
Figure C.12: A three-dimensional graphic ball with a drop shadow is created in Paint Shop Pro 8.
Appendix D: Completing Your Wish List
Figure D.1: The Windows Media Player console is displayed in Internet Explorer 6.
Figure D.2: A GIF animation is created and previewed in Jasc Animation Shop 3.
Figure D.3: An oval hotspot is drawn in the Map This! image map editor.
Dhtml css
Debugger script
Dhtml css