|
Dream Weaver 4.0 Tutorial
Content:
How to create CSS (Style Sheet)
How to apply CSS in whole web site documents.
How to Apply the CSS on text or paragraph?
How to Edit current CSS
styles?
Applying Styles to your Document:
(How to create Styles)
Creating CSS styles are very easy. You need not to have knowledge
of CSS.
There are two methods to do it.
1. Applying styles in the current document.
2. Applying styles in whole web site documents.
1. Applying Styles in the current document:
You can apply style or CSS in the current page in which you are
working right now. If you want to make one or two pages this method
is ok but for entire site the second method is recomended.
Note: If you are making an template
file for whole web site then this method will also work. What you
have to do is difine css styles in template file and save it as
template so that you can use the same template to build as many
as pages in web site. We'll learn making templates in another lesson.
Ok so let's start with first method.
Make sure that your css panel is visible in your Dream Weaver window.
If it is not already open click on menu bar Window -- CSS Styles.
(pic 1)
Ok now your CSS panel will look like this.
(pic 2)
CSS panel is currently empty (none). Now let's see
how to build styles in DW.
Click on css panel with right mouse button now click on New style..
(pic 3)
Now new dialog box will pop open. Fill Name
(desired, I've put heading) instead of .unnamed1. Select
Make Custom Style (class) and This Document Only.
(pic 4)
Now new dialog box will open up. Settings should be
like this. Click ok.
Note: For link select underline
in Decoration instead of none.
I usually keep text size 12 for normal text and Weight - 200 instead
of bold. Change text colors according to your taste. Click on the
arrow of color box to change color.
(pic 5)
Now you can see in your CSS panel now you've one style
defined. It shows heading the name which we've given.
(pic 6)
The same way you can define different styles to different
items like text, link, subheading and so on. Here I've difined different
styles and applied these styles on text.
(pic 7)
How to Apply the CSS on text?
Select the text or paragraph on which you want to
apply CSS. Now click on heading from css panel. It is done. You
can click on Apply button also if required.
You can see how Welcome looks after applying CSS.
(pic 8)
How to apply CSS in whole web
site documents.
This method will allow you to add styles CSS to all the pages of
website. You need not to create css for each and every document
or page. By this method you only need to build one page css document
to convert whole documents in CSS.
The method is the same as above but there are little
changes in it. Right click on css panel to define styles.
(pic 9)
Now instead of This document only select
(New style sheet file).
(pic 10)
Now a dialog box will open up. Give a name to your
file and save it in your local folder which you've already created.
I've given it a name myfile.css and it'll be my .css file
for the whole web site.
(pic 11)
Now the new dialog box will pop open. (see
pic 5 of this page)
Fill it i.e. font, size and so on and click ok. The same way define
other styles too.
Now upload this .css file to your server.
How to Edit current CSS styles?
Select any of the css style which you want to edit
and right click on css pannel. Now click on edit.
Now the dialog box will pop open. (pic 5)
Make changes in the box and click ok. And you are done.
--------------------------------------------------
|
