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"

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"

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.

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"

Dreamweaver - Efficient Text Entry / Insertion

You are free to just type in whatever text you want on your site, but if it is already available somewhere, it wouldnt make much sence to have to type it in maually again, especially if it is a large amount of text.

Dreamweaver provides an intelligent engine for inserting copied text from other sources, such as MS Office, while retaining as much of the formatting as you desire.

In my experience, I found that you have to paste into the "Design View" for Dreamweaver to be able to preserve format for you. If you paste into "code view", for example, something that was originally divided into three paragraphs in MS Wordpad would appear as on huge paragraph after being copied and pasted into Dreamweaver "Code (HTML) View."

Search Engine Results - (manipulate from Dreamweaver)

Page titles are one of the key elements used by search engines to index websites.

Therefore, it is very important to always remember to change Dreamweaver's defualt "Unittiled Document" page title to a phrase that describes your specific web page.

The title of a webpage is displayed in the browser's title bar.



Reference: "Adobe Dreamweaver Classroom in a Book"