Home »
Home > dreamweaver templates
Dreamweaver Training Part Seven:
Most web designers have a common design these running through their website – with the navigation elements, logos and images appearing in the same place on each page. This ensures consistency of design and makes the site more user-friendly, since users will know where to go for the navigation elements on every page. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.
Dreamweaver CS4 allows web-designers to make a template from which they can create new pages to save the time it would take to create each new page from scratch. What’s more, you can configure Dreamweaver to update all of the pages in the site when you update the template.
Using templates, you can tell Dreamweaver which parts of each page are governed by the master template and which areas are unique to each page.
The section will teach you how to:
- Create a template in Dreamweaver CS4
- Make updates to existing pages by making changes to the template
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 9th, 2009 | No Comments »
Part 7.1: Creating a Template
This tutorial uses the same files that you have used in previous tutorials (if you have not already worked through these it would be sensible to do so before attempting these steps). All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
1: Open the “index.html” page by double clicking on it in the files panel
2: From the main menu, select File > Save as Template
3: Click on “Save” in the box that appears, and say Yes to “Update Links?” when asked – Dreamweaver will now create a new Templates folder within your website and the file will be saved as “index.dwt” which is a Dreamweaver Template file. Your original index.html page will still exist, but we’ll now be working on the new template file.
4: To start with, Dreamweaver will make the whole of the new page un-editable as it will regard the whole design as the template for every page. What we need to do now is define the “editable regions” – that is those areas of each page that will have unique content.
5: Highlight the heading of the main content of your page by selecting it with the cursor. Now select Insert > Template Objects > Editable Region from the main menu. This will open a new box. In the Name section of the box, name the region “Main Title” and click OK – note that this now appears as a caption above the heading on the page
6: Now select all of the text that appears under the heading. Repeat the process again, and name the Editable Region “Main Content”
7: You can repeat the process for any other parts of the page that you think will need to be changed on each different page, leaving the areas that need to be the same on every page as non-editable regions. Areas you should leave as non-editable are likely to include the main banner at the top of your page including any company logos, and the main navigation elements.
8: Select File > Save from the main menu
Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver 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 »
