Learning Adobe Dreamweaver Cs4 - Templates
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Learning Adobe Dreamweaver Cs4 - Templates as PDF for free.
More details
- Words: 1,215
- Pages: 10
Learning Adobe DreamWeaver CS4 By Greg Bowden
Chapter 8
Using Templates
Guided Computer Tutorials www.gct.com.au
PUBLISHED BY GUIDED COMPUTER TUTORIALS PO Box 311 Belmont, Victoria, 3216, Australia www.gct.com.au © Greg Bowden This product is available in Single or Multi User versions. Single-user versions are for single student or teacher use at any particular time, just as a single text book would be used. If you intend to use the notes with multiple students the single user version should be upgraded to the multi-user version. Multi-user versions allow the school or institution to print as many copies as required, or to place the PDF files on the school network, intranet and staff laptops. A certificate of authentication is provided with multi-user versions. Bookmarks provide links to all headings and sub-headings, and individual chapters are provided.
First published 2009 ISBN: 1 921217 74 X Module 1 1 921217 75 8 Module 2 PDF document on CD-ROM
Every effort has been made to ensure that images used in this publication are free of copyright, but there may be instances where this has not been possible. Guided Computer Tutorials would welcome any information that would redress this situation.
Chapter
8
Using Templates
When you want to create more detailed web sites that have more design elements to them using TEMPLATES is one of the most effective methods to use. Templates are page setups that can be applied to other pages. They are basically master pages. To illustrate the use of templates, the TravelWise web site will be adjusted.
Creating the Template The template will be created from a blank page, however an existing page can be converted into a template if necessary. 1
Load DreamWeaver, or close the current pages and start a new HTML PAGE. The screen should be set to DESIGNER view.
2 Ensure that the FILES panel is set to your TRAVELWISE site.
3 Set the TITLE box to: TravelWise Travel Services 4
A template for the site will be created then applied to a series of other pages. The design of the template will have the following structure.
Logo Navigation Buttons
Image
Content
© Guided Computer Tutorials 2009
8-1
Learning Adobe DreamWeaver CS4
NOTE:
The small cell above the image cell will be blank. It will serve to separate the image from the navigation buttons. It is called a SPACER cell.
A Creating the Table A 4 x 2 table will be drawn then modified to create the required layout.
1 In the COMMON tools of the INSERT panel click on the TABLE icon
2 Set the table to have 4 ROWS, 2 COLUMNS, a TABLE WIDTH of 740 pixels, a BORDER THICKNESS of 0, a CELL PADDING of 0 and a CELL SPACING of 0, then select OK
B Merging Cells Cells can be merged to create the layout shown in the diagram on the previous page. 1 Highlight just the top two cells by dragging the cursor across them.
2
8-2
Display the MODIFY menu, highlight TABLE and select MERGE CELLS.
© Guided Computer Tutorials 2009
Using Templates
8
3 The two cells are combined into one cell.
4 Highlight just the two cells in the second row.
5
Display the MODIFY menu, highlight TABLE and select MERGE CELLS. 6 Highlight the bottom two cells in COLUMN B.
7
Display the MODIFY menu, highlight TABLE and select MERGE CELLS.
8 Move the pointer over the bottom border of the table until it changes to parallel lines with arrows and drag the border down to the base of the document window.
© Guided Computer Tutorials 2009
8-3
Learning Adobe DreamWeaver CS4
NOTE: i By using a table, a series of regions have been created on the page.
ii The small cell in the third row is called a SPACER cell, Its purpose is to separate the navigation buttons (row 2) from an image which will be placed in the left cell in row 4. It will not have any content.
Saving the Page as a Template The page can now be saved as a template rather than as a normal page. This allows other pages to be given its design. 1
Display the FILE menu and select SAVE AS TEMPLATE.
2 In the SAVE AS TEMPLATE dialogue box set the SAVE AS box to TW_Template and click on SAVE.
3 DreamWeaver saves the page in a folder called TEMPLATES within your site’s folder. Expand the folder to see the template file.
8-4
© Guided Computer Tutorials 2009
Using Templates
8
Completing the Template The parts of the template that will be displayed on all pages can now be entered.
A Adding a Logo A logo will be placed in the top cell. 1 Click in the top cell then click on the IMAGES-IMAGE button in the COMMON tools of the INSERT panel.
2
Access the DWcs4 SUPPORT FILES, open the CHAPTER 8 folder and click on the LOGO.GIF file.
3
Select OK or CHOOSE to insert the image.
4
Select YES to the ROOT FOLDER warning dialogue box and save the image in the IMAGES folder within your TRAVELWISE folder.
5 Set the ALTERNATE TEXT to: Logo image and select OK.
6 The logo should be inserted into the top cell.
© Guided Computer Tutorials 2009
8-5
Learning Adobe DreamWeaver CS4
7 Click in the lower left cell (left cell in row 4) and repeat steps 1 to 6 to insert then save the BIGBEN.GIF image. Set the ALTERNATE TEXT to: Big Ben Image
NOTE: i We could have inserted a series of advertisements in this cell instead of an image.
ii Layout cells expand in length to fit the content that you insert in them.
8 Click next to the BIG BEN image to set the cursor in the cell and, in the PROPERTIES INSPECTOR, set the VERT box to TOP so that the image is displayed at the top of the cell.
8-6
© Guided Computer Tutorials 2009
Using Templates
8
9 Drag the right border of the BIG BEN cell to the left so that the cell width is close to the width of the image.
B Adding Navigation Buttons We could set a Navigation Bar with rollover buttons, but to simplify the process we will just insert images as buttons. The buttons will have links added later.
1 Click in the second row just below the logo cell.
2
In the FILES panel expand the BUTTONS folder within the IMAGES folder. 3 Drag the HOME.GIF button into cell.
4 Set the ALTERNATE TEXT to: Home button and click on OK.
© Guided Computer Tutorials 2009
8-7
Learning Adobe DreamWeaver CS4
5 With the button selected, set its ID in the PROPERTIES INSPECTOR to: Home
6 Repeat steps 3 to 5 to drag the PACKAGES.GIF, MAPS.GIF, TIPS.GIF and AIRLINES.GIF buttons into cell and set ALTERNATE TEXT and ID for each one.
NOTE:
More buttons will be added to the template later to fill the top row.
C Adjusting the Cell Heights The heights of the rows can be adjusted so that the logo and buttons are not to close to one another. 1 Drag the bottom border of the top cell down about 0.5 cm to increase the space between the logo and the buttons.
8-8
© Guided Computer Tutorials 2009
Chapter 8
Using Templates
Guided Computer Tutorials www.gct.com.au
PUBLISHED BY GUIDED COMPUTER TUTORIALS PO Box 311 Belmont, Victoria, 3216, Australia www.gct.com.au © Greg Bowden This product is available in Single or Multi User versions. Single-user versions are for single student or teacher use at any particular time, just as a single text book would be used. If you intend to use the notes with multiple students the single user version should be upgraded to the multi-user version. Multi-user versions allow the school or institution to print as many copies as required, or to place the PDF files on the school network, intranet and staff laptops. A certificate of authentication is provided with multi-user versions. Bookmarks provide links to all headings and sub-headings, and individual chapters are provided.
First published 2009 ISBN: 1 921217 74 X Module 1 1 921217 75 8 Module 2 PDF document on CD-ROM
Every effort has been made to ensure that images used in this publication are free of copyright, but there may be instances where this has not been possible. Guided Computer Tutorials would welcome any information that would redress this situation.
Chapter
8
Using Templates
When you want to create more detailed web sites that have more design elements to them using TEMPLATES is one of the most effective methods to use. Templates are page setups that can be applied to other pages. They are basically master pages. To illustrate the use of templates, the TravelWise web site will be adjusted.
Creating the Template The template will be created from a blank page, however an existing page can be converted into a template if necessary. 1
Load DreamWeaver, or close the current pages and start a new HTML PAGE. The screen should be set to DESIGNER view.
2 Ensure that the FILES panel is set to your TRAVELWISE site.
3 Set the TITLE box to: TravelWise Travel Services 4
A template for the site will be created then applied to a series of other pages. The design of the template will have the following structure.
Logo Navigation Buttons
Image
Content
© Guided Computer Tutorials 2009
8-1
Learning Adobe DreamWeaver CS4
NOTE:
The small cell above the image cell will be blank. It will serve to separate the image from the navigation buttons. It is called a SPACER cell.
A Creating the Table A 4 x 2 table will be drawn then modified to create the required layout.
1 In the COMMON tools of the INSERT panel click on the TABLE icon
2 Set the table to have 4 ROWS, 2 COLUMNS, a TABLE WIDTH of 740 pixels, a BORDER THICKNESS of 0, a CELL PADDING of 0 and a CELL SPACING of 0, then select OK
B Merging Cells Cells can be merged to create the layout shown in the diagram on the previous page. 1 Highlight just the top two cells by dragging the cursor across them.
2
8-2
Display the MODIFY menu, highlight TABLE and select MERGE CELLS.
© Guided Computer Tutorials 2009
Using Templates
8
3 The two cells are combined into one cell.
4 Highlight just the two cells in the second row.
5
Display the MODIFY menu, highlight TABLE and select MERGE CELLS. 6 Highlight the bottom two cells in COLUMN B.
7
Display the MODIFY menu, highlight TABLE and select MERGE CELLS.
8 Move the pointer over the bottom border of the table until it changes to parallel lines with arrows and drag the border down to the base of the document window.
© Guided Computer Tutorials 2009
8-3
Learning Adobe DreamWeaver CS4
NOTE: i By using a table, a series of regions have been created on the page.
ii The small cell in the third row is called a SPACER cell, Its purpose is to separate the navigation buttons (row 2) from an image which will be placed in the left cell in row 4. It will not have any content.
Saving the Page as a Template The page can now be saved as a template rather than as a normal page. This allows other pages to be given its design. 1
Display the FILE menu and select SAVE AS TEMPLATE.
2 In the SAVE AS TEMPLATE dialogue box set the SAVE AS box to TW_Template and click on SAVE.
3 DreamWeaver saves the page in a folder called TEMPLATES within your site’s folder. Expand the folder to see the template file.
8-4
© Guided Computer Tutorials 2009
Using Templates
8
Completing the Template The parts of the template that will be displayed on all pages can now be entered.
A Adding a Logo A logo will be placed in the top cell. 1 Click in the top cell then click on the IMAGES-IMAGE button in the COMMON tools of the INSERT panel.
2
Access the DWcs4 SUPPORT FILES, open the CHAPTER 8 folder and click on the LOGO.GIF file.
3
Select OK or CHOOSE to insert the image.
4
Select YES to the ROOT FOLDER warning dialogue box and save the image in the IMAGES folder within your TRAVELWISE folder.
5 Set the ALTERNATE TEXT to: Logo image and select OK.
6 The logo should be inserted into the top cell.
© Guided Computer Tutorials 2009
8-5
Learning Adobe DreamWeaver CS4
7 Click in the lower left cell (left cell in row 4) and repeat steps 1 to 6 to insert then save the BIGBEN.GIF image. Set the ALTERNATE TEXT to: Big Ben Image
NOTE: i We could have inserted a series of advertisements in this cell instead of an image.
ii Layout cells expand in length to fit the content that you insert in them.
8 Click next to the BIG BEN image to set the cursor in the cell and, in the PROPERTIES INSPECTOR, set the VERT box to TOP so that the image is displayed at the top of the cell.
8-6
© Guided Computer Tutorials 2009
Using Templates
8
9 Drag the right border of the BIG BEN cell to the left so that the cell width is close to the width of the image.
B Adding Navigation Buttons We could set a Navigation Bar with rollover buttons, but to simplify the process we will just insert images as buttons. The buttons will have links added later.
1 Click in the second row just below the logo cell.
2
In the FILES panel expand the BUTTONS folder within the IMAGES folder. 3 Drag the HOME.GIF button into cell.
4 Set the ALTERNATE TEXT to: Home button and click on OK.
© Guided Computer Tutorials 2009
8-7
Learning Adobe DreamWeaver CS4
5 With the button selected, set its ID in the PROPERTIES INSPECTOR to: Home
6 Repeat steps 3 to 5 to drag the PACKAGES.GIF, MAPS.GIF, TIPS.GIF and AIRLINES.GIF buttons into cell and set ALTERNATE TEXT and ID for each one.
NOTE:
More buttons will be added to the template later to fill the top row.
C Adjusting the Cell Heights The heights of the rows can be adjusted so that the logo and buttons are not to close to one another. 1 Drag the bottom border of the top cell down about 0.5 cm to increase the space between the logo and the buttons.
8-8
© Guided Computer Tutorials 2009
Related Documents
Learning Adobe Dreamweaver Cs4 - Templates
May 2020 9
Learning Adobe Dreamweaver Cs4 - Introduction
May 2020 11
Learning Adobe Dreamweaver Cs4 - Anchor Points
May 2020 20
Learning Adobe Dreamweaver Cs4 - Css Styles
May 2020 6
Learning Adobe Flash Cs4 - Masks
May 2020 10More Documents from "Guided Computer Tutorials"
Gct Product Catalogue
May 2020 24
Learning Microsoft Access 2007 - Forms
May 2020 18
Learning Microsoft Word 2007 - Tabs
May 2020 24
Learning Adobe Dreamweaver Cs4 - Anchor Points
May 2020 20
