Presentation is loading. Please wait.

Presentation is loading. Please wait.

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

Similar presentations


Presentation on theme: "Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:"— Presentation transcript:

1 Beginning Web Site Creation: Dreamweaver CS4

2 XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color: #006; margin-left: 100px; margin-right: 100px; } Dreamweaver CS4 Syllabus Thanks to everyone who made our first festival a great success! Keep checking back. We are working on the new site and should have it posted soon!

3  Look @ http://www.csszenga rden.com/ http://www.csszenga rden.com/

4  Style sheets come in three types:  Inline  Part of the tag  Inside text HELP!  Embedded  In the tag  Just for this page  Linked (or External)  On a separate sheet  Controls all the pages linked to it. Preferred!

5  Format your site consistently  Redefine existing tags  Create styles for commonly used elements  Navbars  Headlines  Define styles that align and position elements – divs (divisions)  Make global changes

6 The term Cascading, refers to which element takes precedence when it comes to styling a page, a line, or any other element on the page. Generally, the closer the better  Class wins over  Internal wins over  External

7  CSS Rule:  h1 {color: #6887c;} Declaration block Selector

8

9  Type/Tag selectors  Style all the tags on a Web consistently  (h1, h2, body... )  Found in or are part of the HTML code  There are two types of CSS tags  Class  ID

10  Class selectors  Can be used many times on a page  Formats selected things  Naming  Starts with a.  No spaces  No other punctuation  CSS Example:.sidebarLeft  HTML Example:

11  ID selectors  Identify specific items (#navbar, #footer)  Should be unique to the page  Can only be used once  Naming  Starts with a #  Case sensitive  No spaces  CSS Example: #footer  HTML Example:

12  h1 {color: #6887c} Selector

13 Property

14 Value

15  h1 { font-family: Arial, Helvetica, sans-serif; font-size: x-large; font-weight: bold; text-align: left; }  #navbar { font-family: Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; text-align: center; vertical-align: bottom; height: 20px; }

16  Type  Font family, size, color, decoration, weight  Background  Color, image  Block  Spacing, alignment, indents  Box  Placement of elements on a page  Border  Weight, color, line styles of the selection box

17  List  Ordered, unordered  Positioning  Extensions  Page breaks


Download ppt "Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:"

Similar presentations


Ads by Google