TOPIC:
DIY - Everything about creating a website using free templates
3 / 3 pages
Step 4: Create Home page and About Us page
Create your Home Page
Now that you have created your template, you can create as many web pages as you like using different filenames. At present, your home page, the index.html, is not regarded by
Dreamweaver as being based on the template you created. Since we want
Dreamweaver to
handle all the mundane and tedious job of updating all our pages every
time we change the design of our site, we need to associate the page
with
the template.
The easy way to do this is to overwrite your old index.html file with a new file created based on the template. You can do this with no loss of data since your template was created from the index.html file with no changes other than to define editable regions and the like.
| 1. |
Close all open files. To do this, click "File | Close All". |
| 2. |
Click "File | New". A dialog box appears. You saw a dialog box. This time, look at the left column and click "Page from Template". The middle columns will show information about the template you created earlier, and the rightmost column will show a thumbnail picture of your template. Make sure that the checkbox for "Update page when template changes" is checked. Click "Create". |
| 3. |
Click "File | Save As". A dialog box opens allowing you to specify the filename. Enter "index.html" (without the quotes) or just select the "index.html" file that appears in the window. Click "Save". A message box appears asking if you want to overwrite the existing file. Click "Yes". |
You have replaced your old index.html with an identical copy, except that this time, Dreamweaver has recorded the index.html as being dependant on the template, so that the next time you modify the design of your template, this page will be automatically updated.
Create About Us page
This page tells the web visitors more about the company and its business.
| 1. |
Click "File | New" again and select "Page from Template" if it is not already selected. Once again, click "Create". |
| 2. |
Above your document, in the line with "Code", "Split", "Design" and "Title", replace the existing text in the "Title" field with "About Example.com" where "Example.com" is the name of your company. |
| 3. |
In the editable region which currently holds "Welcome" (or the equivalent on your page), replace it with "About Us". |
| 4. |
In the editable region labeled "Page Description", enter information you wish to comment about your company. Note that you are not restricted to a single paragraph. Just hit the ENTER key (or the RETURN key in Mac OS X) to create a new paragraph whenever you need. |
| 5. |
If you have defined an optional region and you wish to turn it off, select "Modify | Template Properties". A dialog box appears showing you the optional region you have defined. Select it (if it is not already selected) by clicking on its name. Then uncheck the box next to the words "Show OptionalRegion1" (or whatever name that you have given that region). Click OK. Your optional region should disappear. |
| 6. |
Select "File | Save As" and type in "aboutus.html" (without the quotes) into the dialog box that appears. This is the same filename that we entered into the navigation menu bar, so now is not the time to be creative and start changing names or your menu will not work properly.
|
It is recommended that you creates a Site Map too using the same steps above. A Site Map is a comprehensive list of all the pages on your website. It is a useful tool for visitors who are looking for a particular
page on your website but cannot find a direct link to it from whatever page they happen to be at.
Step 5: Publish the Website
Now that you have multiple pages to upload, it probably isn't efficient to use "Site | Put" to upload files, since that is more useful for uploading individual pages. Instead, click "Site | Synchronize Sitewide". A dialog box appears. Make sure that in the "Synchronize" box, the "Entire 'Example Company' Site" option is selected. In the "Direction", check that "Put newer files to remote" is selected.
Click "Preview". When a dialog box appears with the list of files that will be uploaded, click the right mouse button (Control-Click in Mac OS X) on the template file (the file in the "Template" folder). Select "Ignore Selection" so that Dreamweaver does not upload your template file. Click OK. Dreamweaver will then upload the files you specified.
You should now test your site in your IE browser and different browsers such as the popular Mozilla Firefox.
