Creating your first website
Creating the page layout
Before beginning any tutorial you can exercise your brain by using one of our brain train activities.
In the previous tutorial you learnt about Dreamweaver sites, how to setup your Dreamweaver project files, using the advanced tab and how to define a local folder using the site folder for bath_company.
After you have set up the site, you are ready to begin building web pages. You will start by creating a new page, and saving it in the bath_company local root folder of your website. The page eventually becomes the home page for Bath Company.
Note: If you have not created the bath_company local root folder, you must do so before you proceed. For instructions, see Setting up your site and project files.
In this tutorial, you will complete the following tasks:
- Design your home page using tables
- Place images in your page
- Format your text using the properties panel
- Add background colours to your page
1. In Dreamweaver, select File > New. For more help and support please click here or visit the video tutorial section by clicking here. Next you will add a table that will hold text and graphic. 3. In the Insert Table dialog box, do the following (see below): 6. Click in the second cell of the table. Go to Modify > Table > Split Cell and in the dialog box:
Click ok.
For more help and support please click here or visit the video tutorial section by clicking here. Next we will add the header and footer images to the page. There are many ways to add an image to a web page, Two of these way we will go through in this tutorial. One good way and one bad way. For more help and support please click here or visit the video tutorial section by clicking here. 1. Select all the text in the third row of your table and in your property panel do the following:
2. Lets design the navigation.
In the second row, second cell of your table enter Home.
In the third cell enter About, and in the last cell of the row enter Pictures.
3. Select the second row of the table. In the properties panel do the following: For more help and support please click here or visit the video tutorial section by clicking here. 1. Now we will finish off the page by first clicking in the white outside the table, then in the properties panel click the page properties button. This brings up a dialog box. Click the background colour box and choose a black colour and click ok. For further help and support please check the online Dreamweaver Assess your level of understanding of the material!
Click here for quiz.
2. In the Blank Page category of the New Document dialog box, select HTML from the Page Type list, select
3. Select File > Save As.
4. In the Save As dialog box, browse to and open the bath_company folder that you defined as the site's local root folder. (In the previous part of this tutorial series, you created this folder within a folder called local_sites.)
5. Enter index.html in the File Name text box and click Save. The file name now appears in the title bar at the top of the application window, as well as in the tab of your new document.
6. In the Document Title text box at the top of your new document, type Bath Company (see Below).
7. This is the title of your page (different from the file name). Your site visitors will see this title in the browser window title bar when they view the page in a web browser.
8. Click once on the page to move the insertion point out of the Document Title text box. You will see that an asterisk (*) appears next to the file name in the document's tab. This asterisk indicates that a file has changed and that you need to save the file if you want to keep the changes.
9. Select File > Save to save your page.
Design Page
1. Click once on the page to ensure the insertion point is in the upper-left corner of the page.
2. Select Insert > Table.
4. Click ok
5. Click in side the table and to the bottom of the design window select table (see below). 
Under the Properties panel, to the bottom of the design window, you will find align, choose center from the drop down menu (see below).
Image Placement
First we will look at the bad way of importing a picture into a webpage.
1. Click in the top cell of the table. Go to Insert > Image. Navigate to the bath_company folder and then to the images folder. Click on the body_main_header.jpg. Click ok
A dialog box appear.
Click ok
Note: This is the bad way to place a picture because you have to navigate through your system to find the picture.
Click on the image and press delete on your keyboard to delete the picture.
2. On the right of the design window. Click on the File Window (Note: if the File Window is not on the right of the design window. Go to Window > File). In the File Window click and drag body_main_header.jpg. from the File Window into the top cell of your table.
A dialog box appears. This time enter Bath Company Header in the Alternative text text box.
Click ok.
Note: This way is good because it is just a matter of dragging and dropping the file into the design window.
3. Click on the File Window (Note: if the File Window is not on the right of the design window. Go to Window > File). In the File Window click and drag body_main_footer.jpg from the File Window into the bottom cell of your table.
A dialog box appears.
Enter Bath Company Footer in the Alternative text text box.
4. Click on the File Window. In the File Window double click the file sample_text.txt. This will open the file in the design window.
5. Select all and copy the text from sample_text.txt.
Close sample_text.txt and paste the text into the third row of your table (your table should look like below).
Layout Text
Finish Page
2. Choose the table and in the properties panel click the box bg colour box and choose a white colour. (Your finish site should look like below).
Save your file (File > Save).
forum. Or visit the video tutorial for this section.