go to "window" -> "CSS styles"
click "All" to switch from "Current" mode
(All mode displays all the CSS Styles associated with the current page)
Expand the <Style> entry in the All Rules pane (click the + button)
select body and click Edit Rule (the "pencil icon" at the bottom of the CSS Styles panel)
when the CSS Rule defineition for "body" dialog box appears, select the Background category
then, click the BAckground color box to open the color pixer
then, use the eyedropper to select a color in the color pixer
***Note: brackets ("< >") indicate that a CSS style in internal to the document. If a style is external to a document it would show as someting like "charliestyles.css" in the CSS styles panel.
Reference: "Adobe Dreamweaver Classroom in a Book"
Tuesday, November 23, 2010
Saturday, November 20, 2010
Dreamweaver - CSS - change the page body background color
CSS can be used to alter the style properties of any HTML tag, such as the <body> tag.
Dreamweaver - CSS (Cascading Style Sheets)
Modern web pages use Cascading Style Sheets for layout and styling.
Web Pages - The "Three-legged Stool" Analogy
Modern web pages are often said to be three-legged stools, with the three legs being HTML, CSS, and Javascript. As the analogy suggests, the stool would not be able to stand properly without any one of its legs.
HTML can be roughly though of as the content of your page.
CSS covers the layout and appearance of the page, and includes aspects like where your elements are located, what colors there are and where, and what backgrounds to use.
Javascript adds interactive functionality to your page.
Reference: "Adobe Dreamweaver Classroom in a Book"
HTML can be roughly though of as the content of your page.
CSS covers the layout and appearance of the page, and includes aspects like where your elements are located, what colors there are and where, and what backgrounds to use.
Javascript adds interactive functionality to your page.
Reference: "Adobe Dreamweaver Classroom in a Book"
Friday, November 19, 2010
Dreamweaver - Properties Manipulation for Inserted Images - fltrt / fltlft
With the newly inserted image selected, choose "fltrt" from the Class menu in the Properties panel.
"fltrt" is an abreviation to "float right" -> this is a CSS style that will float the image to the right. Text will flow around the image.
"fltlft" is an abbreviation for "float left" -> this floats the image to the left with text wrapping around it on the right.
*All 32 CSS styles included in DW have .fltrt and .fltlft as style options.
**The float property moves an element to the right (or left) of its "container". In this example, the container is "mainContent". When an element floats , ofthe content flows or wraps around it. When an element floats to the right , for example, it moves to the right and other content wraps around it to the left.
Reference: "Adobe Dreamweaver Classroom in a Book"
"fltrt" is an abreviation to "float right" -> this is a CSS style that will float the image to the right. Text will flow around the image.
"fltlft" is an abbreviation for "float left" -> this floats the image to the left with text wrapping around it on the right.
*All 32 CSS styles included in DW have .fltrt and .fltlft as style options.
**The float property moves an element to the right (or left) of its "container". In this example, the container is "mainContent". When an element floats , ofthe content flows or wraps around it. When an element floats to the right , for example, it moves to the right and other content wraps around it to the left.
Reference: "Adobe Dreamweaver Classroom in a Book"
Dreamweaver - "Alternate text"
After you insert an image, a window will pop up asking you if you want to enter "Alternate text." This alternate text is what will be displayed in the situation when the image is for some reason not visible.
*Users with certain mobile devices, screen readers, or other browsing devices may not see images.
It is a good practice to enter Alternate Text for your images.
*Users with certain mobile devices, screen readers, or other browsing devices may not see images.
It is a good practice to enter Alternate Text for your images.
Dreamweaver - Inserting Images
Inserting images or graphics is very straighforward.
First you place an image on a webpage. Then, the image's properties, such as alignment, can be adjusted in the Properties Panel or within CSS.
reference: "Adobe Classroom in a Book"
First you place an image on a webpage. Then, the image's properties, such as alignment, can be adjusted in the Properties Panel or within CSS.
reference: "Adobe Classroom in a Book"
Subscribe to:
Posts (Atom)