Use CSS to Implement a Reusable Design

• Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout

• You can access layouts in the New Document dialog box

Use CSS to Implement a Reusable Design

• Layouts contain div tags with placeholder text, which you can replace with your own content

• Div tags also use CSS for design and formatting

Use CSS to Implement a Reusable Design

• CSS are a group of formatting rules that control the appearance of the content in a web page

• The rules, or CSS styles, are separated from the content in the page making : – It easier to maintain the appearance of the page– The HTML code simpler– Browser load times shorter – Navigation accessibility issues simplified

Use CSS to Implement a Reusable Design

• You can save CSS:– In an external style sheet– In a different part of the HTML document• Usually the HEAD section

Use CSS to Implement a Reusable Design

• External Style Sheet:– Its own data file– .css file extension– Attach to an HTML file using the Attach Style

Sheet Button in the CSS Styles Panel– Multiple pages can reference the same external

style sheet• Making it easier to update and maintain the

appearance of the entire website

Use CSS to Implement a Reusable Design

• By default, Dreamweaver uses CSS to format text

• Styles that are applied to text using the Property Inspector or menu commands create CSS rules

• You can use the CSS Styles panel to create and edit CSS rules and properties

Use CSS to Implement a Reusable Design

• The CSS Styles panel also displays:– All the CSS Rules that are defined within the

active document– Any external style sheets that may be attached

Use CSS to Implement a Reusable Design

• You can use the CSS Styles panel to define:– The background– Default font – Link properties– Customizations to heading tags

Use CSS to Implement a Reusable Design

• You can use the buttons at the bottom of the CSS Styles panel to:– Create a new CSS rule– Edit an existing rule– Delete a rule

Use CSS to Implement a Reusable Design

• The Edit Rule button opens the CSS Rule definition dialog box for the specific rule you have selected.

• You can format:– Type– Backgrounds– Margins– Padding– Create a border or a list

Use CSS to Implement a Reusable Design

• If you make formatting changes to text using options on the CSS Property inspector, Dreamweaver opens the New CSS Rule dialog box, prompting you to name a new rule for those changes

Use CSS to Implement a Reusable Design

• Selector Type options include:– Class– ID– Tag– Compound

Use CSS to Implement a Reusable Design

• The Class option:– Creates a custom style that can be applied to any

HTML element– Class names must begin with a dot

Use CSS to Implement a Reusable Design

• The Tag option:– Allows you to redefine the default formatting for a

specific HTML tag

• The Compound option:– Lets you redefine a rule for two or more tags,

classes, or IDs simultaneously

Use CSS to Implement a Reusable Design

• In Live view, you can click the Inspect button to quickly identify HTML elements and the related CSS style

• Simply hover the mouse over an element in the document window, and the associated code is highlighted in the code pane– Inspect mode only works in Show Code and

Design views

Use CSS to Implement a Reusable Design

• Visual Aids are also available when working with CSS Styles:– CSS Layout Outlines– CSS Layout Backgrounds– CSS Layout Box Model

• To view an aid, click Visual Aids on the view menu, and then click an aid

Use CSS to Implement a Reusable Design

• CSS Layout Outlines– Displays the outline for all the CSS layout blocks

on a page• CSS Layout block

– Includes div tags, images assigned with either an absolute or relative position, a tag with the display:block style assigned, or a paragraph with an absolute or relative position assigned to it

Use CSS to Implement a Reusable Design

• CSS Layout Background– Displays colors for individual CSS layout blocks and

hides any other background colors or images that normally appear on that page

• The CSS Layout Box Model:– Displays the padding and margins of the selected

CSS layout block

Use CSS to Implement a Reusable Design

• Reasons to Use CSS Layout and External Style Sheets instead of tables:– Load time: Pages will load faster because code is

cleaner and not as complicated, and if multiple pages use the same style sheer, the layout code has already been cached

– Redesign: redesigns are easier because code is simpler and separate from content code, making it easier to update, more efficient and less expensive

Use CSS to Implement a Reusable Design

– Consistency: It is much easier to maintain visual consistency between pages because all pages reference the same external style sheet

– Search engine optimization: Improves search engine optimization by decreasing the file size, making it easier for the search engine spiders to crawl through the web site

Use CSS to Implement a Reusable Design

– Accessibility: improves accessibility by separating content from visual information, allows for more distinct placement of interactive elements, and has increased compatibility and support with web browsers, screen readers, and mobile devices

– Usability: Usability is improved by decreasing download time and eliminating the need for a printer-friendly version

– Complexity: Layouts are not longer based on table grids, providing the ability to create more complex layouts