Part 7.2: How to link your homepage to the template
In the last section we’ve been working on the new template file – your original “index.html” file is not linked to the template, so at the moment any changes made to the template file won’t be updated in the index page itself. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.
So essentially we need to re-make the index.html page, using the new template as a starting point.
To do this:
1: Close all of the pages you have open (if you have lots of pages open, the fastest way to do that is by selecting File > Close All from the main menu
2: Select File > New. Instead of creating a brand new HTML page, this time select “Page from Template” from the left-hand column.
3: The name of your site will appear in the second column from the left, and your new “index.dwt” template will appear in the last column.
4: Select the index template and ensuring that the “Update page when template changes” box is checked, click “create”
5: A new page will appear – this will be identical to the template (and therefore identical to the original index page you made the template from).
6: Select File > Save As. Select the existing index.html page and then press “Save” – this will save over the original index.html page, so select Yes when Dreamweaver warns you that this is happening
Your index page will now be linked to the template, so any changes you make to the template will be reflected on your homepage.
What’s more, you now have a template from which you can create all of the other pages your website will need.
Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver training course.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
Part 7.3: Making more new pages from the template
In part 6, we made a navigation bar with links to pages for “site map” and “about us”. These pages don’t exist yet, so let’s create them from the new template – starting with the “About Us” page. All this is covered in our comprehensive Dreamweaver course. Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver course in Brighton, Sussex.
1: As before, select File > New from the main menu, select “New Page from Template” again, and use the index template file we created. Another new page will open
2: First, we need to give the new page a title. In the “Title” box in the pane at the top of the screen (see picture below)
Replace whatever is there with the text “About Us”, or even better “About [your company name}”. Calling the page by your company name e.g. “About Silicon Beach Training” will help to get that name recognised in search engines.
3: Now select the text in the “Main Title” editable region and change it to “About Us” or “About Silicon Beach Training”, or whatever your company name is.
4: Now select the text in the “Main Content” editable region, and replace it with a company description.
5: Select File > Save As, and save the page as “aboutus.html”
You’ll now have a new About Us page, and the links we created in the navigation bar earlier will direct to this page.
You can use exactly the same process to make your Site Map page – changing the Page Title, Heading and Main Page Content in the same way, and save the page as “sitemap.html”
In the main content for the Site Map page, list all of the pages in the site (e.g. Index, Feedback, About Us and Site Map) and make each item in the list a link to that page. If you can’t remember how, refer back Dreamweaver Course Part 5 where this process is described.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
Part 7.5: Making modifications to pages using the template
The whole point of creating pages from template (other than speed) is that you can update them all at once by making changes to that template. All this is covered in our comprehensive Dreamweaver course. Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver course in Brighton, Sussex.
To do this:
1: Close all of the files you have open in Dreamweaver (use File > Close All if you have lots open).
2: In the Files panel on the right, open up the Templates folder, and from within it open the index.dwt file that we made earlier.
3: Now – make any modifications you want to the areas of the page that you left as “non-editable regions” – i.e. the areas of your new pages that you are only able to change by modifying the template. For instance, you can change the colour of the text in the navigation bar, or add text to the footer of the page.
4: Click on File > Save. Dreamweaver may warn you about placing editable regions in block tags – click OK if this occurs
5: A new box will now appear called “Update Template Files”. Dreamweaver will list all of the files that you creates from this index template file (in this case, the Index, Site Map and About Us pages)
6: Click the “Update Pages” button and then close the new box that appears
7: The pages you made from the template will now be updated as per the changes you just made. You can double check by opening them to see
8: Upload all of the files to your live site using Site > Synchronize Sitewide as above
Congratulations!! You have now completed the tutorial and should have a website with all the different pages we have created!
What next you may ask? Check out our range of hands on, instructor led Web Design courses at http://www.siliconbeachtraining.co.uk/web-design-training/
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
