Built-in CSS Layouts

Transcript Built-in CSS Layouts

CIT 256
CSS Intro &
Dreamweaver Built-in Layouts
Dr. Beryl Hoffman
CSS
CSS (Cascading Style Sheets): set of
rules defining the style of a web site.
Separates content (in the HTML) from
style/appearance/layout (CSS).
Can be embedded in HTML page at the
top <head> section or attached in a
separate .css file (preferred!).
CSS rules for HTML tags
<style type="text/css">
body { background-color: #FFFFFF;
margin: 0;
color: black; }
h4
{ font-family: "Arial"; color: blue }
</style>
In the HTML file, use tag and it will have
that style: <h4> My styled heading</h4>
My styled heading
Page Properties CSS
Unfortunately, Page Properties button only
puts CSS in the head section of that page.
Can move all generated CSS to a file by
selecting all CSS rules (holding down
Shift) and right click to choose Move CSS
Rules.
Or click the + button in CSS window to
add a body or h1 tag without using Page
Prop. Button.
Making Your Own Style Tags
In the CSS (use . (for class) or # (for id
(can only be used once)):
.mystyle { color:purple;
background-color:yellow }
In the HTML (use div or span, use class
menu at bottom in Dreamweaver):
<div class=“mystyle”> This is some text in
my style! </div>
This is some text in my style!
CSS and Divs for Layout
CSS is now the preferred method for styling
the Layout of a web site.
The <div> tag is used to divide a web page
into areas with different styles
<div id=“header”> Where the top banner/logo goes </div>
<div id=“navbar”> Navigation Links </div>
<div id=“content”>
TEXT: CONTENT AREA
</div>
<div id=“footer”> bottom of page </div>
Built-in CSS Layouts in Dreamweaver
(File/New)
Number of Columns
1 Column used for top navigation.
2 Column used for side navigation.
New Grid Layout under new in CS 6 too
for many columns in grid.
Fixed vs. Fluid Layouts
Fixed Layout uses fixed width/length in
pixels or inches. Default width 960px, side
nav is 180 px of that.
Fluid Layout uses percentages so that it
expands or shrinks with different screen
sizes. Default 100% with side nav 20%
width.
Go with Fluid whenever possible. Choose
fixed only if client wants site optimized for a
certain screen size.
HTML 5 Special Layout Tags
HTML 5 adds special HTML tags to
replace some <div> tags:
<header> … </header>
to replace <div id=“header”> … </header>
<nav> .. </nav>
<footer> … </footer>
<section>, <article>, <aside>, etc.
IE requires hack to recognize these.
Save CSS as new File
You can add CSS layout styles to the html
file or save it to a .css file (preferrable!):
Edit Generated Text
Edit the text, change title
Edit Generated Styles
Look at CSS Panel on top
right.
Click on CSS Styles and All
and the + next to <style> to
see rules.
Click on a rule, change its
properties underneath.
Or double click a rule (or
pencil) for editing window.
Good Tutorial for using Built-in
CSS Layouts in Dreamweaver
http://layersmagazine.com/editing-csslayouts-in-dreamweaver-cs5.html

Built-in CSS Layouts

Transcript Built-in CSS Layouts

Directory