First you have to define a site in Dreamweaver. The following are the basic information you need for now
Bài tập thực hàng Dreamwave http://hocdohoa.info 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 http://hocdohoa.info 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 http://hocdohoa.info 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 http://hocdohoa.info 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 http://hocdohoa.info 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 http://hocdohoa.info 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 http://hocdohoa.info 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 http://hocdohoa.info 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 http://hocdohoa.info 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 http://hocdohoa.info 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 <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 </div> 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; [...]... like Editing CSS styles Biên Soạn : Phan Tấn Đồng Số Trang :19 Bài tập thực hàng Dreamwave http://hocdohoa.info 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 Biên Soạn : Phan Tấn Đồng Số Trang :20 Bài tập thực hàng Dreamwave http://hocdohoa.info 2 Name your fields In order to... solid #FF6600; } width: 720px; CSS for visited link padding: 15px; #style1 li a:visited { } Style 2 Source Code My Site: Biên Soạn : Phan Tấn Đồng Số Trang :11 Bài tập thực hàng Dreamwave http://hocdohoa.info Home float: left; About border-top: 1px solid #FF6600; border-right: 1px solid #BB4A00; border-bottom: 1px solid... background-color: #FF6600; border-right: 1px solid #DF5900; width: 120px; border-bottom: 1px solid #FF6600; padding: 5px; border-left: 1px solid #FF6600; Biên Soạn : Phan Tấn Đồng Số Trang :12 Bài tập thực hàng Dreamwave http://hocdohoa.info } #style2 li a:hover { CSS for link color: #000000; #style2 li a { width: 120px; text-decoration: none; background-color: #FFCC33; color: #FFFFFF; } text-decoration:... My Site: Home Source Code About Contact Biên Soạn : Phan Tấn Đồng Số Trang :13 Bài tập thực hàng Dreamwave Style 2 Content Box http://hocdohoa.info #style3 ul { margin: 0px; padding: 8px 0px 0px 0px; list-style: none; } CSS for #style3 CSS for LI... background-image: url(gradient1.gif); background-repeat: no-repeat; } } gradient1.gif = gradient3.gif = CSS for UL Biên Soạn : Phan Tấn Đồng CSS for visited link #style1 li a:visited { Số Trang :14 Bài tập thực hàng Dreamwave http://hocdohoa.info color: #663300; content_box3 { text-decoration: none; width: 720px; } font-family: Arial; CSS for hover link font-size: 11px; #style2 li a:hover { background-color:... text-decoration: none; padding: 15px; background-image: url(gradient2.gif); clear: left; } CSS for content box } Layout (dàng trang) Here is the layout: Biên Soạn : Phan Tấn Đồng Số Trang :15 Bài tập thực hàng Dreamwave http://hocdohoa.info 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... 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" Biên Soạn : Phan Tấn Đồng Số Trang :16 Bài tập thực hàng Dreamwave http://hocdohoa.info 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... ‘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 Biên Soạn : Phan Tấn Đồng Số Trang :17 Bài tập thực hàng Dreamwave http://hocdohoa.info 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... 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 Biên Soạn : Phan Tấn Đồng Số Trang :18 Bài tập thực hàng Dreamwave http://hocdohoa.info 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.. .Bài tập thực hàng Dreamwave http://hocdohoa.info } color: #FFFFFF; CSS for LI text-decoration: none; #style1 li { } background-color: #FF9900; CSS for hover link float: left; border-top: 1px solid #FF6600; border-right: