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.
23 trang |
Chia sẻ: netpro | Lượt xem: 2282 | Lượt tải: 1
Bạn đang xem trước 20 trang tài liệu Giáo trình Học căn bản Dreamwaver, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :1
. 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
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :2
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.
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :3
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.
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :4
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
Detach from original. This will detach from the Library and become
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :5
editable. Change the menu to: About Me, Biography, and Resume.
Now select the menu again, convert it into Library Item and name it
"about_subnav"
More pages:
Now save the "about.html" as "bio.html" and "resume.html" in the ‘about’ folder.
Repeat these steps and create the following pages and Library Items:
6. Update template
Now you have all the pages ready and it is time to go back to the template
and plug in the links for the navigation. Select each navigation button and
enter the according link.
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :6
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.
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :7
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.
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :8
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
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :9
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
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :10
Source Code
Basically I have a H1 and a UL list
wrapped around by a DIV id=style1
My Site:
Home
About
Contact
Style 1 Content box
CSS for #style1
#style1 {
font-family: Arial;
}
CSS for H1
#style1 h1 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background-color: #FF6600;
width: 120px;
text-align: right;
padding: 5px;
margin: 0px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
border-left: 1px solid #FF6600;
}
CSS for UL
#style1 ul {
font-size: 14px;
font-weight: bold;
margin: 0px;
padding: 0px;
list-style: none;
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :11
}
CSS for LI
#style1 li {
background-color: #FF9900;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
}
CSS for link
#style1 li a {
width: 100px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px 0px 5px 5px;
text-transform: uppercase;
}
CSS for visited link
#style1 li a:visited {
color: #FFFFFF;
text-decoration: none;
}
CSS for hover link
#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;
padding: 15px;
}
Style 2
Source Code
My Site:
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :12
Home
About
Contact
Style 2 Content Box
CSS for #style2
#style2 {
font-family: Arial;
}
CSS for H1
#style2 h1 {
font-size: 16px;
font-weight: bold;
background-color: #FF6600;
width: 120px;
padding: 5px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #BB4A00;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600;
margin: 10px 0px 0px 0px;
}
CSS for UL
#style2 ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
clear: left;
}
CSS for LI
#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;
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :13
}
CSS for link
#style2 li a {
width: 120px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px;
}
CSS for visited link
#style1 li a:visited {
color: #FFFFFF;
text-decoration: none;
}
CSS for hover link
#style2 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33;
}
CSS for content box
.content_box2 {
width: 586px;
font-family: Arial;
font-size: 11px;
background-color: #FFFF91;
border: 1px solid #FF6600;
padding: 15px;
float: left;
}
Style 3
Source Code
My Site:
Home
About
Contact
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :14
Style 2 Content Box
CSS for #style3
#style3 {
font-family: Arial;
}
CSS for H1
#style3 h1 {
width: 120px;
font-size: 14px;
font-weight: bold;
color: #FFFF99;
text-transform: uppercase;
margin: 0px;
padding: 16px 0px 2px 10px;
float: left;
background-image: url(gradient3.gif);
background-repeat: no-repeat;
}
gradient3.gif =
CSS for UL
#style3 ul {
margin: 0px;
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;
color: #663300;
text-decoration: none;
display: block;
padding: 5px;
background-image: url(gradient1.gif);
}
gradient1.gif =
CSS for visited link
#style1 li a:visited {
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :15
color: #663300;
text-decoration: none;
}
CSS for hover link
#style2 li a:hover {
color: #FF6600;
text-decoration: none;
background-image: url(gradient2.gif);
}
CSS for content box
.content_box3 {
width: 720px;
font-family: Arial;
font-size: 11px;
background-color: #FFFF91;
border: 1px solid #FF6600;
padding: 15px;
clear: left;
}
Layout (dàng trang)
Here is the layout:
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :16
1. Body Tag
Open your CSS Styles pallate, click on the New CSS Rule(+) icon to make a new
css style.
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".
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :17
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
center.
2. Header Tag
Now, add another CSS style and name it ‘.header’. Enter Width:770px,
Height:130px, Background:#CCCCCC.
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :18
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 .
3. Left Column
Add another CSS class, ‘.left_column’ and enter the following information:
Float:left is use to align ‘.left_column’ to the left.
4. Right Column
Again, very similar to ‘.left_column’ butthis will align to right because I set Float:
right.
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :19
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
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :20
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
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :21
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.
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :22
Form Data
Now you should see all the fields in the form: Name, Email, Phone, Comments.
Select ‘Name’, check Required, Accept = Anything (anything means any
key/character).
Select ‘Email’, check Required, Accept = Email address
Select ‘Phone’, check Required, Accept = Number
Select ‘Comments’, check Required, Accept = Anything
* if you do not want to make the field as required, uncheck Required
Bài tập thực hàng Dreamwave
Biên Soạn : Phan Tấn Đồng Số Trang :23
Done!
Mong sách này giúp bạn
Các file đính kèm theo tài liệu này:
- Học căn bản Dreamwaver.pdf