Creating your first website
Adding links and pages
Before beginning any tutorial you can exercise your brain by using one of our brain train activities.
In the previous tutorial you learnt how to design the home page of your site using tables to structure your page, how to place images into your page, how to format your text using the properties panel and how to add a background colour to the background of your page and tables.
In this tutorial, you will complete the following tasks:
- Create links to the home, about and pictures page.
- Create the about and picture pages.
Note: If you have not created the index.html page of your site, you must do so before you proceed. For instructions, see Create page layout.
After you have created your index.html page, you are ready to begin adding your links to the Home, About and pictures pages.
Create your links
With your index.html open select the Home text from the second row in your table. In your Properties Panel, Enter index.html in the link text box. Select the About text and in the properties panel Enter about.html in the link text box. Select the Pictures text and in the properties panel Enter pictures.html in the link text box.
The text now turns blue. To fix this, click in the front of the E of enter, then in the properties panel click the page properties button. A dialog box appears. Click of links tab and then on the box next to links colour, select the colour white and click ok.
Now you are ready to building your about and picture pages of your website and linking your pages together.
1. You will start by opening the index.html, and saving a copy as about.html (File > Save As). Navigate to the bath_company folder in your local root folder of your website. Enter the file name about.html in the name field text box and Click ok.
2. With about.html open, Save file as pictures.html (File > Save As). Navigate to the bath_company folder in your local root folder of your website. Enter the file name picture.html in the name field text box and Click ok.
For more help and support please click here or visit the video tutorial section by clicking here.
Change the pages and content
1. Open about.html (if you don’t already have it open already) double click about.html in your file window (window > file, if window is not open).
2. Select all the text in the middle row of your table and press delete on your keyboard. Open the sample_text2.txt select and copy all the text, paste text in third row of your table.
3. Select File > Save.
4. Open pictures.html (if you don’t already have it open already) double click about.html in your file window (window > file, if window is not open).
5. Select all the text in the middle row of your table and press delete on your keyboard. In the file window click and drag the file image0.jpg from the file window into the third row of your table. A dialog box appears in the alt text text box enter image 1 and click ok.
6. In the file window click and drag the file image1.jpg from the file window into the third row of your table. A dialog box appears in the alt text text box enter image 2 and click ok.
7. In the file window click and drag the file image2.jpg from the file window into the third row of your table. A dialog box appears in the alt text text box enter image 3 and click ok.
8. In the file window click and drag the file image3.jpg from the file window into the third row of your table. A dialog box appears in the alt text text box enter image 4 and click ok.
Save file (File > Save).
For further help and support please check the online Dreamweaver
forum. Or visit the video tutorial for this section.
Assess your level of understanding of the material! Click here for quiz.