Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download Creating web pages using CSS and Dreamweaver
Document related concepts
Transcript
Creating web pages using CSS and Dreamweaver
Creating web pages using CSS and Dreamweaver CS3
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a
markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be
applied to any kind of XML document, including SVG and XUL.
CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document
presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup
language) from document presentation (written in CSS). This separation can improve content accessibility, provide more
flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the
structural content. CSS can also allow the same markup page to be presented in different styles for different rendering
methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braillebased, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches
against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the
results are predictable.
The content above came from http://en.wikipedia.org/wiki/Cascading_Style_Sheets
Cascading in the Cascading Style Sheets refers to how browsers interpret your style sheet.
There are 3 types of CSS scripts , Embedded, External (linked), and InLine. In the following lesson we're going to talk about
embedded CSS scripting
Let's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles
are within the html code and not separate.
To do this go to File > New > choose > blank page - HTML document - layout - none > Create
Creating web pages using CSS and Dreamweaver
Next let's look at the Property Inspector to see how CSS can be set up using it.
To set up Embedded CSS select the Page Properties button to access the page dialog or choose Modify > Page
Properties.
Choose the Background color palette by left clicking on it and choose blue for color which is #000099.
Choose the OK button to close the dialog. If you were trying to decide on a background color and wanted to see the color
then choose > Apply, then the dialog box won't close on you. What does all the settings mean? Click here for more
information.
Next select the Code view to see what was created by Dreamweaver. Without knowing any CSS scripting you just
created your first code or you've been creating it without realizing it. See below;
<style type="text/css"> the opening tag identifies what the code type is and what formatting will take place for this
page only to the closing tag </style> for the browser to know how to display the page.
The body tag is telling the browser what color the background is to be, notice also that this is all located within the
<head> tags </head>.
body {
background-color: #000099;
}
Creating web pages using CSS and Dreamweaver
Working with CSS isn't so bad and if you've been creating web pages before you've been using CSS.
Want to know more - CSS Specifications
- Cascading Part of Style Sheets
Style Sheet Anatomy
Example of a simple CSS rule; The Selector (element) and the Declaration block (what's between brackets) make up
a rule.
The Property identifies what to change, such as in this example "color," and Value instructs the browser in this case
which color and in this example that would be the color blue.
Let's create a New HTML document and look at other ways that Dreamweaver can add CSS to your page.
Go to New > Blank Page > HTML > Layout - scroll down to - 3 columns absolutely positioned, header >
DocType - leave the default > XHTML 1.0 and Layout CSS underneath leave default > Add to Head > select
Create button.
Creating web pages using CSS and Dreamweaver
This is what the page looks like.
To see how the page is made you need to look at the code view, to do this select the Code button.
Let's look at how dreamweaver builds a page using CSS.
Creating web pages using CSS and Dreamweaver
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!-body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container
selector */
color: #000000;
}
.thrColAbsHdr #container {
position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
/* Tips for absolutely positioned sidebars with header and footer:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the
AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the
#container in the document's source order, they will appear at the top of the #container even without being given a top value. However,
if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know
they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side
column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content,
that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be
contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the
document.
4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually
meet the header.
*/
.thrColAbsHdr #header {
height: 60px; /* if you're changing the source order of the columns, you'll may want to use a height on the header so that you can
give
the columns a predictable top value */
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath
it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.thrColAbsHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between
Creating web pages using CSS and Dreamweaver
divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.thrColAbsHdr #sidebar1 {
position: absolute;
top: 60px;
left: 0;
width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer
will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no
further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
.thrColAbsHdr #sidebar2 {
position: absolute;
top: 60px;
right: 0;
width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the
padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
.thrColAbsHdr #mainContent {
margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No
matter how much content the sidebar divs contain, the column space will remain. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.thrColAbsHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.thrColAbsHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space
Creating web pages using CSS and Dreamweaver
between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse
issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it
should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColAbsHdr #sidebar1 { width: 180px; }
.thrColAbsHdr #sidebar2 { width: 190px; }
</style>
<![endif]--></head>
<body class="thrColAbsHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a
border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a
border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor,
felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum
adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien
vehicula nonummy. Suspendisse potenti. </p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor,
felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum
adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Creating CSS and linking external CSS
Now that we've seen Dreamweaver create CSS for us let's use the tools that Dreamweaver has to create
Creating web pages using CSS and Dreamweaver
your first CSS web page from scratch. In this tutorial we'll create an External Style Sheet that we'll link
too.
Go to File > New > Layout <none> DocType (XHTML 1.0 Transitional) > Create
Next before we start creating our web page we need to look at the CSS panel and how it works.
To find the CSS panel go to Window > CSS Styles. The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current
mode), or all of the rules and properties that are available to the document (All mode). A toggle button at the top of
panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and
Current mode.
Creating web pages using CSS and Dreamweaver
Located at the bottom left of the CSS panel are 3 different types of CSS views, the first is - Show only set Properties
--> which is for that rule only, The second is - Show List View - is every possible properties available, and the third is Show Category View - this I would recommend for you when you're first learning how to use CSS properties.
Okay it time to get started on the new web page. First thing to do is select the link below and copy (Save Picture As) the
images to your image folder.
Click here to get images for your web page project.
Creating web pages using CSS and Dreamweaver
Let's get started, first make sure your in Design View. Then select the Common tab if you don't have it selected
already. Starting from the left and moving to the right count five in and you'll find the Insert Div Tag
icon. We're going
to insert a div tag into the web page. Once the icon is selected a Insert Div Tag dialog box will open, choose or type in
the following information that's below.
Dreamweaver will add text into you div tag so it's easy to recognize it.
This is where the Title image is going to be located in this div tag. With the text selected in the div tag go to Insert >
Image.
In the Image source dialog choose > divTitle.jpg file from your image folder.
Creating web pages using CSS and Dreamweaver
Next the Image Tag Accessibility Attributes dialog will open, add in the Alternate text area " Title image "
Welcome to Canada", then select the OK button.
So what is this Accessibility Attributes? Let's say someone that can't see well is using software to assisst them in reading
web pages to give them information, also when you drag your cursor over the image you'll get a popup of the text that you
added. If the text on the web page isn't in a table then the software can read the information to them. If you don't add the
Accessibility Attributes to an image then the software can only tell the user the name of the image name and nothing else.
So the Alternate text will give the user this "Title image " Welcome to Canada." By law everyone is suppose to create web
pages that are accessible to all. But as we all know that isn't the case and this is why CSS is so important for all of us to
learn.
If your text is still there in the div tag just select it and delete it.
Creating web pages using CSS and Dreamweaver
Take a look at the Code view to see what Dreamweaver created for us. Notice in the body tag you'll see the div tag with a
class name that we added " titleBar", the div id is "div1", and the inserted image.
The image is located in the div1 tag but we haven't created any code yet to tell the div tag where we would like to place it.
To do this left click your cursor at the end of the Title tag in the header and then select the "Enter key" to create a
return. Add the text in the red highlighted area below to your code, it has to be exact to work.
Next we need to create a background color to do this go to Modify > Page Properties or Properties Inspector >
Page Properties button. In the Page Properties dialog choose the Background color text box and type
#333300 which is a dark green color. Also look in the code after closing the page properties dialog and notice that the
background tag was added to the Style tag.
Creating web pages using CSS and Dreamweaver
Notice that the image has a curved corners and the color matches the background color.
Now lets create another div tag to add an image to the left side of the web page. Select the Insert Div Tag
add the following information.
icon and
Creating web pages using CSS and Dreamweaver
In this div tag go to Insert > Image > select from your image folder > leftSideImage.jpg to insert it into the div tag.
Once you do this it should look like the example below. So we have a problem the new image is on top of the title image.
To fix this first we need to know the height of the title image to do this select the title image and in the Properties Inspector
will give us that information which is 200 px. We need this to know the css information to be added to the second div tag.
Creating web pages using CSS and Dreamweaver
Select the Code View, then copy the .titlebar and all the code that goes with it. Next after the closing curly bracket > paste
the code and change the class name to .leftsideImage. Now to fix the overlapping image change the top setting to 200
pixels.
Next paste the same code again after the closing curly bracket again of the leftsideimage selector and rename
this selector to .canada_1 > top: 200px > left:356px , then a return which will give you a popup menu and select
background > then color > and white for the color. This will be div tag 3 so you going to add another div tag to
the code to put this all together.
This is what the page should look like so far. F12 is the short cut key to view the page in a browser.
Creating web pages using CSS and Dreamweaver
Yes it's really the end. :)
