Creating a Website With Dreamweaver
Create a website more accurately with the graphical interface of Dreamweaver. Layout your website cleanly without a lot of messy coding and revisions. With Dreamweaver you can simply drop in navigation buttons, edit flashy text, and publish images on your website without a lot of programming.
- Difficulty:
- Moderate
Instructions
-
Build a superb website with Dreamweaver
-
1
Go to Site > New Site. Name your site and copy and paste your web site address, starting from http:// in Site Definition for Layout window. Click next and choose “No, I do not want to use a server technology.” Then click next. Choose a folder you want to place HTML and images together. My document folder is selected in default setting. Then click next. Select None from the remote server menu. Click next. Check Summary page and click Done. Your site has been set. You are now able to store your site work in the same directory. Change site setting after you decide which method to publish your site as FTP.
-
2
Create your home page. Go to File > New. In New Document window, choose Category: Basic page, Basic page: HTML, Document type(DTD): XHTML 1.0 Transitional. Hit Create. The new HTML file will be created.
-
3
Make sure that Design view is selected and Insert tools are appearing under the menu and choose Common. Click on Table icon from the menu. Type 1 in Rows and 1 in Columns. Table with 800 pixels and click OK. Select the whole table and select Align Center in Properties window, put 0 in CellPad, CellSpace and Border.
-
4
Select the table cell and click on Images icon. Insert the logo and header image one by one. Then click OK. If you have SWF file, click on Media: Flash icon.
-
5
Repeat Step3 but make one table with 4 columns and 1 row for buttons.
-
6
Create buttons in each cell. First, type Home into first cell on the second table. Select the word Home and change Font to Ariel Helvetica, Sans-Serif, Size 12 and color white (#FFFFFF) in Properties. As you type, Dreamweaver creates CSS style1 automatically. Open up CSS Styles window from Window > CSS Styles. You will see .style1 under <style> and summary in Properties for “.style1” window. Select Home cell again and change Bg(background) color in red(#FF0000). You have Home cell in white text and red background.
-
7
Go to the next cell and type Products. Repeat Step 6 except the text color. Make the text color to black (#000000). Style2 is automatically created. Add the rest of buttons such as, About Us and Contact Us, in third and forth cells with the same as Products button. Select the word and choose Style2, this is a shortcut to apply a style.
-
8
Repeat Step3 but make one table with 2 columns and 1 row under the buttons’ table. Copy and paste prepared body text in left column, News section’s article to the right column. If you have the section header graphic or icon, repeat Step 4 to insert the image before the text. Change the font, color and size as you like.
-
9
Repeat Step3 but make one table with 1 columns and 1 row.
-
10
Go to Insert > HTML > Horizontal Ruler to add a line.
-
11
Type the copyright, for example, “Copyright © 2008 www.mywebsite.com. All Rights Reserved.”, and change the font, color and size as you like.
-
12
Go to CSS menu and click on the arrow on CSS menu bar and choose New. In New CSS Rule window, choose Advanced. Choose Font: Ariel Helvetica, Sans-Serif, Size 12 and color white (#FFFFFF). Then click OK. Now linked text will change the color to white at rollover state. Save and name this file index.html and close.
-
13
Save and name this file index.html and close.
-
14
In the product folder, create 3 copies of index.html. Change the names to produts.html, about.html and contact.html.
-
15
Open index.html again to add links to buttons. Highlight the text Products and make sure style2 is applied, and add a link from Link in Properties. Click on the yellow folder icon and find product.html and select.
-
16
Repeat Step 15 to About Us and Contact Us buttons. Make sure to select the appropriate files.
-
17
Open product.html and change Home button’s style to Style2 and Products to Style1. Add link to home button as the same way as step 15. Remove the link from Products. Now Home is in black and Products is in white. This means Products page is selected and home and the rest of links are linkable. Change the contents in the third table. You can make the two columns into one by selecting the two columns and by clicking on “Merge selecting cells” icon in Cell section in Properties.
-
18
Change the links and contents in contact.html and about.html as well and save.
-
19
Test all files in browser to make sure the links are working. The rollover on links should appear in white. That is it. You are all set!
Finish the web layout to perfection
-
1
Create 3 copies of index.html in the product folder, . Change the names to products.html, about.html and contact.html.
-
2
Open index.html again to add links to buttons. Highlight the text Products and make sure style2 is applied, and add a link from Link in Properties. Click on the yellow folder icon and find product.html and select.
-
3
Repeat Step 7 using the About Us and Contact Us buttons. Make sure to select the appropriate files.
-
4
Open product.html and change Home button’s style to Style2 and Products to Style1. Add link to home button as the same way as step 7. Remove the link from Products. Now Home is in black and Products is in white. This means Products page is selected and home and the rest of links are linkable. Change the contents in the third table. You can make the two columns into one by selecting the two columns and by clicking on “Merge selecting cells” icon in Cell section in Properties.
-
5
Change the links and contents in contact.html and about.html as well and save. Test all files in browser to make sure the links are working. The rollover on links should appear in white. That is it. You are all set!
-
1
Tips & Warnings
Import all images to Dreamweaver as a JPG, GIF, or SWF.
Dreamweaver cannot edit the graphics or animations. It is recommended to use other graphic applications like Photoshop to prepare any graphics you need for your website.
