tài liệu tự học lý thuyết deamweavere

Make a template To make tutorial easier, I have made a basic website layout consisted of the follwing: header, left column, right column, and footer.. Save this HTML file as Dreamweave

Define a site

First you have to define a site in Dreamweaver The following are the basic information you need for now:

 Site name

 Local root folder

 Default images folder

2 Make a template

To make tutorial easier, I have made a basic website layout consisted of the follwing: header, left column, right column, and footer Save this HTML file as

Dreamweaver template, File > Save as Template Then you need to make

two editable regions: left_column and right_column

How to make Editable Regions:

Left Column:

Select the left table cell, Insert > Template Objects > Editable Region

(Ctrl+Alt+V) and name it left_column

Right Column

Select the right table cell, Insert > Template Objects > Editable

Region (Ctrl+Alt+V) and name it right_column

3 New from Template

Now create a new html document from template and save it as index.html in the root folder

Note that the html document is locked except the left_column and

right_column editable region Add the following to the left side menu: About

Me, See My Portfolio, and Email Me I put a blank link(#) to the menu for

now and they will be replaced as soon I have all the pages ready.

4 Library Item

Select the left side menu, go to Assets/Library pallate, click on the (+) icon

to make the selected codes into a Library Item and name it "main_sidenav" Note that the side menu is now locked and placed in the library When you update this Library Item, Dreamweaver will update all the pages within your site that use this item Library Item is good for common content such as sub navigation, page signature, column content, etc

5 Save As

Make a new folder ‘about’, and save this page as "about.html" in the

‘about’ folder Select the side menu, in the Properties pallate, click

editable Change the menu to: About Me, Biography, and Resume Now select the menu again, convert it into Library Item and name it

Save your changes and Dreamweaver will ask if you would like to update all

pages based on this template, click Update Go preview your site and note that the changes applied to all the pages This will save a lot of time since you don’t have to go to each individual page and edit manually

7 Update Library Items

Go to the Library, open each Library Item and plug in the according link

to each menu button Be sure to click Update to the update the files

8 Synchronize

This is the last step and it is also a very important step I will show you how

to synchronize your site, in other words, upload your site

Before you can synchronize your files, you need to set up your server in the

Site Manager Go to Site > Manage Sites, in the Advanced tab, select Remote Info, select FTP Access and enter your server information You may test your server information by clicking the Test button Be sure to check Maintain synchronization information

Right click on your site folder and select Synchronize

Dreamweaver will then show the action to all the files Click Ok to upload all

the files to your server

Try this:

 Rename one of your files in the Files pallate For example, rename

"about.html" to "about_me.html", now Dreamweaver will ask you to update the links that link to this file This will prevent broken link within your site

 Try update your template or files and Synchronize again Dreamweaver will compare your local files with the remote server and see which one

is newer version Then it allows you to put your updated or new file(s)

to the remote server With Dreamweaver Synchronization tool, you

don’t even need to upload your files manually by a FTP software

 Create a new image in the ‘image’ folder and synchronize the ‘image’ folder, Dreamweaver will automatically detect the new file and upload it

to the server

Some Website Maintenance Tips

 Use template to keep your site consistent

 Organize your files with folders

 Save all your images in the ‘images’ folder

Use Library Item for common code

Style 1

Source Code

Basically I have a H1 and a UL list

wrapped around by a DIV id=style1

<div id = "style1">

<h1>My Site:</h1>

<ul>

<li><a href ="#">Home</a></li>

<li><a href ="#">About</a></li>

<li><a href ="#">Contact</a></li>

</ul>

</div>

<div class = "content_box1">

Style 1 Content box

font-weight: bold;

margin: 0px;

padding: 0px;

list-style: none;

#style1 li a:hover { color: #000000;

text-decoration: none;

background-color: #FFCC33;

} CSS for content box

.content_box1 { font-family: Arial;

font-size: 11px;

clear: left;

background-color: #FFFF91; border: 1px solid #FF6600; width: 720px;

<li><a href ="#">Home</a></li>

<li><a href ="#">About</a></li>

<li><a href ="#">Contact</a></li>

</ul>

</div>

<div class = "content_box2">

Style 2 Content Box

} CSS for UL

#style2 ul { margin: 0px;

#style2 li { width: 130px;

font-size: 14px;

font-weight: bold;

background-color: #FF9900;

border-right: 1px solid #DF5900; border-bottom: 1px solid #FF6600; border-left: 1px solid #FF6600;

.content_box2 { width: 586px;

<li><a href ="#">Home</a></li>

<li><a href ="#">About</a></li>

<li><a href ="#">Contact</a></li>

</ul>

</div>

<div class = "content_box3">

Style 2 Content Box

padding: 8px 0px 0px 0px;

list-style: none;

} CSS for LI

#style3 li { width: 130px;

font-size: 14px;

font-weight: bold;

border-right: 1px solid #FF6600; float: left;

} CSS for link

#style3 li a { width: 120px;

gradient1.gif = CSS for visited link

#style1 li a:visited {

Then the new CSS window will pop Select Tag in the Selector Type In the Tag

dropdown, select ‘body’ or type in ‘body’ In general, you should define all your

CSS in a separate file by selecting "Define in: New Style Sheet File" But for this tutorial purpose, I’m going to write the CSS in the same file: "This

document only"

Now in your CSS definition window, it allows to define almost everything with CSS You can set style for Type, Background, Box area, Border, Padding, Margin,

List style, etc In the Box options, enter Width=770, Margin Right=auto,

Margin Left=auto This will set the html ‘body’ tag to 770px wide, align to

Go to Dreamweaver Code view and enter the following code within the body tag

Then preview your page by pressing F12 in Dreamweaver, and you should see a

770×130 grey rectangle with text "header" in it

5 Footer

Finally, add the last CSS class ‘.footer’ and enter the following information:

Notice this time I entered Clear: right ? This will clear the right float of the

‘.right_column’ and display ‘.footer’ below

6 Enter the HTML codes

Now enter the final HTML codes as follow and your page should look like

Editing CSS styles

At any time you can edit your CSS styles by double click on the class name or in the source code window

1 Form

I assume you have your HTML form ready If not, you can use my

2 Name your fields

In order to validate your form, you need to give a proper name to each field Name your fields as follow: Name, Email, Phone, and Comments

3 Validate form

Select the ‘Send’ button Go to Window > Behaviors to active the Behaviors pallete Click on the plus [+] icon and select Validate Form

Form Data

Now you should see all the fields in the form: Name, Email, Phone, Comments

key/character)

 Select ‘Email’, check Required, Accept = Email address

 * if you do not want to make the field as required, uncheck Required

Mong sách này giúp bạn