1 / 16

DREAMWEAVER ‘ANATOMY’ EXPLAINED.

DREAMWEAVER ‘ANATOMY’ EXPLAINED. Solar System Task. Contents. 1. CSS Rule definitions. Type Background Block Box Border List Positioning Extensions 2. Templates I ntroduction Creating Templates Benefits of templates Editable Regions.

faye
Download Presentation

DREAMWEAVER ‘ANATOMY’ EXPLAINED.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DREAMWEAVER ‘ANATOMY’ EXPLAINED. Solar System Task

  2. 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

  3. 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

  4. CSS Rule Definition: Type The 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 value Decoration - Selecting from : overline, underline, line-through, blink, or none.

  5. 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 backgroundcolour 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 image Vertical Position - Specify as above for vertical position of background image.

  6. 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)

  7. 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 Bottomindependently. 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.

  8. CSS Rule Definition: Border The 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 Widthtext boxes. Colour - Specify the border colour by typing colour name or colour value, or select a from the Colourbox.

  9. 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 browseto 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.

  10. CSS Rule Definition: Positioning The 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 window Relative - 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 HTML Visibility - 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.

  11. CSS Rule Definition: Extensions The Extensions categoryallows 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 typethat 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)

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

  13. 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.

  14. 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!

  15. 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.

  16. 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

More Related