DREAMWEAVER ‘ANATOMY’ EXPLAINED.

Solar System Task

Contents

1. CSS Rule definitions.• Type• Background• Block• Box• Border• List• Positioning• Extensions

2. Templates• Introduction• Creating Templates• Benefits of templates• Editable Regions

SUPPORT: http://www.helpvid.net/tutorials/dreamweaver/CssDivTagsExplained.html

DREAMWEAVER ANATOMY: NEW CSS RULE - DIALOGUE BOX

Dreamweaver defines three types of selectors:Class - This is any style starting with a full stop (.), or a standard CSS class selector.Tag - This is an HTML tag or element. Just one. If you want to define a style for a comma-separated list of tags, use the next option.Advanced - Everything else!!!

http://www.codecademy.com/courses/advanced-css-selectors/1/1

Once you've defined the type of selector, you can add it either to an existing style sheet, a new external style sheet, or an internal style sheet. While it's possible to use inline styles in Dreamweaver, it's difficult and I don't recommend it

CSS Rule Definition: TypeThe Type category defines this basic CSS components.

The Type category determines the appearance and format of text for the selected style. It includes the options - font, style, size, weight, case, colour, and any text decoration.

Font - You can specify the font style or font family from the Font pull-down list. Or, edit to install your own.

Size - Specify a size and measurement system for the specified font or type in your own.Weight – Allows you to specify the weight, or boldness, of text.

Style – e.g. Italic,Variant – e.g. Specify normal or small-caps.

Line Height – Specifies the leading, or height of a line of text, and its system of measurement.Case - Specify uppercase, lowercase.

Colour - Select by typing the colour name, colour valueDecoration - Selecting from : overline, underline, line-through, blink, or none.

CSS Rule Definition: Background

The Background category allows you to specify

background colour, any background images you want to

include. Also, you can set the image location on the page and determine whether or not the

image should be repeated.

Background Colour - Specify the background colour by typing the colour name, colour value.Background Image - Specify a background image by typing the file name and path or by browsing

.Repeat - Specify tiling options for a background image: No repeat - One instance of the image is displayed in the upper-left corner.

Repeat - The background image is tiled horizontally and vertically (left to right, top to bottom).Repeat-x - The background image is tiled horizontally.Repeat-y - The background image is tiled vertically.

Attachment - Specify if background image is fixed to its original position or scrolls with the page.Horizontal Position - Specify left, right, centre, value (in pixels) for horizontal position of

background imageVertical Position - Specify as above for vertical position of background image.

CSS Rule Definition: Block

Allows space and align text manually with the Block

category.

Word Spacing - Specify the spacing between words by selecting a negative or positive value.Letter Spacing - Specify the spacing between the letters of words by selecting a negative or

positive value .Vertical Alignment - Specify the vertical alignment of text in relation to the line of text.

Text Align - Specify text alignment by selecting left, right, centre, or justified.Text Indent - Specify indents for text by selecting a value and system of measurement.

Whitespace - Determine the appearance of extra spaces and tabs -usually collapsed by default.Display - Specify whether, and if so how, an element will be displayed (e.g., block, table, inline,

table-row)

CSS Rule Definition: Box

The Box category is primarily used to define the spacing and placement of elements (e.g., images) on a page

Width – Will specify the element's width.Height - Will specify the element's height.

Float - Specify left, right, or none to determine which side elements such as text, layers, and tables will float in relation to other page content.

Clear - Keep a layer from appearing on a selected side of an element.Padding – To specify the amount of space separating the element and the border or

margin. You can specify padding values for the Left, Right, Top and Bottom independently.Margin - Specify the amount of space between the borders of the element and other

elements on the page by designating values for the Left, Right, Top and Bottom independently.

CSS Rule Definition: BorderThe Border category allows you to specify border styles, width, and colour values for the borders of text, images, and other web elements. You can choose values for individual or multiple border edges.

Style - Specify a border style from the following options: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

Width - Specify a border width from thin, medium, or thick, or type a value in any Width text boxes.

Colour - Specify the border colour by typing colour name or colour value, or select a from the Colour box.

CSS Rule Definition: List

You can control styles and types of bulleted lists with CSS. The CSS Rule definition dialog use box allows you to choose custom bullet images, list types, and also different positioning options.

Type - Specify the display type of bullets from the following pre-existing options: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none.

Bullet Image - Specify a custom bullet image or browse to select one.Position - Specify whether the list item wraps and indents (outside) or wraps to the left

margin (inside).Positioning Options - The Positioning category prescribes the position or placement of CSS

element, increasing a designer's creative control over the appearance of a web page. Positioning options allow you to place elements in the exact position you would like it to

appear on the web page.

CSS Rule Definition: PositioningThe Positioning category prescribes the position or placement of CSS elements. This increases a designer's creative control over the appearance of web pages. Positioning options allow you to place elements in the exact position that you would like it to appear on the web page.

Type - Specify the element's positioning from the following options: Absolute - an element's positioning is stable on the page, regardless of the positioning of other element

Fixed - An element's positioning is relative to the top left corner of the browser windowRelative - An element's positioning corresponds with that of the other elements on the page

Static - An element's positioning is disabled; the element is displayed as it would be in regular HTMLVisibility - Specify whether an element is visible or hidden on the web page.

Width - Specify the width of an element and the system of measurement.Z-Index - Specify the depth of an element within layers (higher values are closer to the top).

Height - Specify the height of an element and the system of measurement.Overflow - Specify how the element should be displayed when a portion of it extends beyond the

allotted space: visible, hidden, scroll, or auto. Placement - Specify the placement and dimensions of an element.

Clip - Specify the visible portions of an element.

CSS Rule Definition: Extensions

The Extensions category allows you to specify page breaks for printing, change insertion point images, and customize the appearance of various elements.

Page Break - Specify a point for printers to read a page break.Cursor - Specify cursor type that appears when the mouse moves over a certain element.

Filter - Customize the appearance of an element without using animation or graphic files (e.g. blur).

You can also specify cursor image ( see over page for examples)

Cursor images that appear, when a mouse moves over a certain element.

Introduction to templates• As most websites follow a certain structure, templates allow

consistency in appearance of each page.• They could navigation built-in, with editable regions for text

and graphics.• They may be comprised of any web-design components e.g.

Graphics, images, CSS, Flash.• Most templates are comprised using a series of tables. As web-

designer you will determine the editable regions and those that are ‘locked-out’.

• In other words; what areas can be changed and what areas will stay the same. This determines how other designers can EDIT the page and prevents accidental or unwanted change.

Creating Templates

• A template is a common structure of a website.• Usually websites will follow the structure of header,

navigation bar, footer.• Without a template, each page of your website would

require individual editing to make any desired changes.• A template only requires that you make those changes within

that template – updating the rest of the pages automatically.• Templates control all areas of a page that are to be kept

consistent. Areas within that template are made editable, so new content can be added page by page.

• An entire website can be saved as a template!

Benefits of templates include...• Timesaving and labour saving!• Retain consistency throughout a site.• Still enable the inclusion of different content throughout

pages.• Keep layout consistent and manageable.• Update pages throughout the site, saving individual changes

and streamlining workflow.• Allow some degree of organisation and structure.• Could act as a supporting feature when starting out with

Dreamweaver/ new to web-design. ‘Blueprint’!• Dreamweaver saves your template by default in the

templates folder for your site. Any links are managed to maintain updates to your site.

Editable Regions - Templates• Generally, there are four types of editable areas on a

template page:• EDITABLE REGION – These are unlocked areas to which you

can add content in a template page.• REPEATING REGIONS – Are unlocked areas, to which you can

add or delete copies of repeating regions in a template page e.g. increase./ decrease the rows in a table whilst keeping the table structure intact.

• OPTIONAL REGIONS – Unlocked areas that allow you to show or hide content in a template page.

• EDITABLE TAG ATTRIBUTES – For modifying specific attributes relating to an element. Some can remain editable, whilst the others remain locked.

• Useful resource for sites that use/ carry templates:• http://allwebcodedesign.com