The text menu at the bottom of the page must be edited, however, for a useful template.You want to have all menu items present in your template, because deleting content ismuch easier th
Trang 1Saturday Afternoon
172
The template page is starting to make sense You have your menus in noneditableregions, however, and you know that you will to want to edit these For them to be mostuseful, you must make sure that all menu items are included on your template page At thebeginning of the last exercise, you added a Home rollover image to the graphic menu Themenu is now ready to be turned into an editable region
The text menu at the bottom of the page must be edited, however, for a useful template.You want to have all menu items present in your template, because deleting content ismuch easier than adding content — and it is much better for consistency Start with thetable and add the “home” link
1 Insert your cursor in the cell containing the word route Select Modify➪ Table ➪Insert Column A new column is added
2 Type home in the new column Create a link to index.html Your menu is ready for
the template now, but you have to make it an editable region
3 Select the entire table Select Insert➪ Template Objects ➪ Editable Region Type
the name textmenu in the New Editable Region window When you create a page
from this menu, you will simply delete one column from the table
Although you are probably wondering where you are going to stop, you still have a fewthings to add to your template Your graphic menu is very important, but the rollovers cre-ate an extra challenge Let’s move on
Take the following steps to create an editable Region from a graphic menu with rollovers:
1 Select the entire menu Check your code to ensure that you have selected all the
required code for those elements It is likely that some code will not be selected
from the Design view For this example, your code should start with the following:
<a href=” /index.html” onMouseOut=”MM_swapImgRestore()” .
Your code must end with the following:
width=”163” height=”48” border=”0”></a>
Make sure that all of the code is selected in Code view and return to Design view
so that the changes will appear in any documents based on that template
That’s it You have created a template that can serve as the base for an entire site (SeeFigure 16-3 to check your results.) If you are wondering what you have saved (becausealmost all regions are editable), read on The savings will very quickly become obvious Youmust remember the times that I said, “Repeat for the remaining pages,” to truly understandthe benefits
Work with this template and you’ll see what I mean
Trang 2Session 16—Creating Templates 173
Figure 16-3 The finished holtemp template with editable regions in place
Creating a Document from a Template
Now that you have a well-planned template, it is time to put it into action Use this plate to create a new document:
tem-1 To keep confusion to a minimum, close all documents in Dreamweaver, with the
Holiday site active
2 Activate your Assets panel with the Templates icon selected Highlight the
holtemp template listing Click the menu icon at the top right of the Assets menuand select New From Template An untitled document that is built from the tem-plate is created
3 You should save this right away Eventually, you will overwrite your index.html
document with this file; for safety, save it as indexnew.html
4 You can quickly create this page by filling in the blanks Highlight the text in the
headline editable region and type A tour through our vast country.
5 Replace the photo placeholders Double-click the topimage photo placeholder and
select photo6a.jpg from the art folder Repeat for the bottomphoto placeholder,using photo6b.jpg
6 To make the menu correct, delete the “home” menu item and the line-break code
between the first and second menu items Before you delete, check your code viewand ensure that all of the code for the home menu is selected, starting with <ahref=index.html and ending with </a><br>
Trang 3Saturday Afternoon
174
7 Correct the text menu by placing your cursor in the “home” column and selecting
Modify➪ Table ➪ Delete Column
8 On other pages, you will edit the Page Title entry at the top of the screen.
However, for the entry page, it is correct
9. Finally, select the text in the content editable region, and then either type text
of your choosing or paste copied text from the original index.html document
10 Repeat the above exercise with the route.html page, saving the new file as
route-new.html Don’t worry that the table in the template is smaller You’ll adjust that
in your template in the next exercise
Believe it or not, you have completed two pages How’s that for fast? You may have dered where the timesavings were going to enter the picture, because most of your page hadeditable regions However, you did not have any concerns about your page layout becausethat was all set
won-Now let’s see the true power of templates as you make changes to the template
Editing a Template
In reviewing the pages created from the template, I can see two things that I would like tochange The first is to make the table flexible so that it will grow and shrink with monitorresolution Second, the columns should all be aligned to the top Return to the template tomake these changes:
1 Open the Assets panel and activate the Template section Double-click the holtemp
listing to open your template
2 Select the main table and change the width value from 570 pixels to 90%.
3 Insert your cursor in the menu cell Select Top as the Vert value in the Properties
panel Repeat for the column containing the photos
4 Select File➪ Save to save the template The Update Template files window opens,listing the files that are attached to that template, and asking if you would like toupdate Click Update Review the undated files log, and click OK to close the window
5 Return to the documents that were updated and confirm that the changes appear
Now you have the knowledge to create a new page for each of the pages in the Holidaysite based on the template You have seen how quickly the pages can be compiled when youare using a template Recreate the rest of your pages in the same manner, saving the file tothe original name plus “new.”
When you create the contactnew.html page, leave the center and right umn unchanged from the template style You will be editing this page in a different way
col-Note
Trang 4Session 16—Creating Templates 175
Detaching a Template Link from a Page
In this section, you detach the template from the contact page There is usually one pagethat does not fit easily into the format for the rest of the site Breaking the link to the tem-plate returns the full page to your editing control
Follow these steps to break a link:
1 Make sure the contactnew.html page is active Select Modify➪ Templates ➪Detach from Template That’s all it takes Your page has not changed, but it is nolonger attached to the template
2 Click the Library item below the menu and delete it If you had an e-mail link in
your template, delete that as well
3 To remove the placeholder images at the right, delete the entire column With your
cursor in the column, select Modify➪ Table ➪ Delete Column
There is one final topic to cover for templates You can also build a template from scratchrather than from an existing page
Creating a Template from Scratch
If you know exactly what you require, you may also build a template page from scratch Iprefer to work out the design of a page without the encumbrances of working in the tem-plate mode Even when I know content is going into a template format, I build my templatepage as a regular Dreamweaver page and then create the editable regions But that is apurely personal preference, and you should try both ways to see which suits your style
To create a template from scratch
1 Open the Assets panel from within the Holiday site Click the Template icon on the
left side of the panel
2 Click the Asset panel side menu symbol, or right-click (PC) or Ctrl+click (Mac) in
the lower screen of the Assets panel and select New Template A new listing will
appear in the Template list While the new listing is still selected, type
testtem-plate The top window identifies this as a blank temtesttem-plate.
3 To edit the template, double-click the listing, or click the Edit icon at the lower
edge of the Assets panel Your template document opens, and you can build yourtemplate as you would any other HTML page You must specify editable regions as
we did in the first template we created
A template created from scratch can be applied and edited in exactly the same way as atemplate created from an existing page
Renaming or Deleting a Template
The final housekeeping you must cover is what to do with a template when you want tochange the name or dispose of it completely Dreamweaver looks after most of the problems
Trang 5Saturday Afternoon
176
that could occur, but you must be careful whenever you are working with files that link toother documents
Take the following steps to change the name of a template:
1 Open the Assets panel and activate the Templates region Click twice on the
test-template listing (two distinct clicks, not a double-click), or click the side menu ofthe Assets panel and choose Rename The template name will be highlighted as inFigure 16-4
2 Type testonly as the new template name If you have created a document from
this template, Dreamweaver asks if you want to update any files that are linked.Select Update
Figure 16-4 Renaming a template in the Assets panel Template management must
be done in the Assets panel to avoid error messages
To delete a template open the Assets panel and activate the Templates region Select thetemplate listing that you wish to delete Click the side menu icon of the Assets panel andchoose Delete Dreamweaver asks you to confirm that you want to delete this template.Select Yes
Be cautious with this command because you will have to manually break the link to thetemplate in any documents that are linked to a deleted template
Never delete a template file from the Site panel If you want to remove a template, always use the method described here If you delete the file in the Site panel, the listing will remain in the Assets panel and will continue to deliver errors If that happens, create a new file in the Site panel to match the template name, and then delete the old one from the Assets panel.
Never
Trang 6Session 16—Creating Templates 177
Finalizing the Conversion to a Template-Driven Holiday Site
You have just been through a deep tour of templates Although you may still decide not touse them in your work, I encourage you to at least try using a template to give a consistentstarting point for every new page Even when you immediately break the link to the tem-plate, you will still save time and improve your consistency
Your site should be very consistent now Make a final check though the pages If you aresatisfied, overwrite the original documents from this site with the equivalent new files
If you would prefer to keep the original files that you created, use the Site window to drag the original files into the resources folder Dreamweaver keeps track of the links for you Then, simply rename the new files to the old filenames and your site will be complete and easily updated through templates.
Upload the new files to your site and pat yourself on the back You have covered a lot ofterritory in a short time, and you have already reached a very high level of knowledge ofDreamweaver’s basic features
In the next session, you start planning a new site The new project puts all the skills youhave learned into action, while introducing you to yet more powerful Dreamweaver features
REVIEW
With a good grasp of this session’s material, you should be well on your way to masteringyour site with templates Here are key points to remember:
Planning ahead is crucial to success with templates
Templates can be created from an existing document
Editable regions are the only locations where content can be entered on a page ated from a template
cre- Selecting View➪ Visual Aids ➪ Invisible Elements will toggle on and toggle off thetemplate codes on a page
It is better to set a template up with extra elements to be deleted, rather thanadding them on every page It is easier to delete than to add, especially for main-taining consistency
When working on a document from a template, unless the region you want to edithas been set up as an editable region, you must make any changes in the templatefile and then update Changes will be applied to every document that was createdfrom that template
A template link can be detached from a page at any time However, when the ment is not linked to the template, changes to the template will no longer automat-ically update the document
docu-Tip
Trang 7Saturday Afternoon
178
QUIZ YOURSELF
1 What is the most important thing to do when designing templates? (See the
“Planning ahead” section.)
2 What is an editable area in a Dreamweaver template? (See the “Strategies for using
templates” section.)
3 Templates can be created with two methods What are they? (See the “Creating a
Template from an Existing Document “ and “Creating a Template from Scratch” tions.)
sec-4 When you make changes to a template, what happens to any page that was
cre-ated from that template? (See the “Editing a Template” section.)
5 When you edit your template, what happens to a page with a broken link between
the template and the page? (See the “Detaching a Template Link from a Page” tion.)
sec-6 Why should you use the Assets panel to rename or delete a template? (See the
“Renaming or Deleting a Template” section.)
Trang 8P A R T
#
P A R T
Saturday Afternoon Part Review
I
1 What is the best way to work with code in Dreamweaver?
2 When you are working in Code view, what is the result in the document if you
press your Enter key three times?
3 What is normally required to place a simple premade code into your document?
4 What are the two areas of an HTML document where scripts usually have to be
placed to work correctly?
5 What is one example of a common link on a Web site that must be an absolute
link?
6 When you are working in Design view, how can you tell where a named anchor is
placed?
7 If you discover that a link you have used in many places on your site has been
changed, what is the easiest way to update all the links?
8 How can you edit JavaScript without leaving the Design view?
9 What is a simple rollover in Dreamweaver?
10 What must you do to test a rollover in Dreamweaver?
11 When you use the Behaviors panel, what are you adding to the selected item?
12 Why do you use tables to layout a form?
13 How is a CGI script connected to a form?
14 What is the difference between a checkbox and a radio button form object?
15 What purpose does a hidden field serve in a form in Dreamweaver?
16 How can you identify every color you have used in your site without visiting every
page?
17 Two methods exist for creating a Library item What are they?’
III
Trang 918 What happens when you have placed many instances of a Library item, but decide
to delete the Library item from the Assets panel?
19 When the content of a page that was created with a template is not located in an
editable area, what must you do to make changes to that content?
20 When you wish to delete a template file from the Assets panel, why is it important
to do this in the Assets panel?
Part III—Saturday Afternoon
180
Trang 11P A R T
Saturday Evening
Trang 12Session Checklist
✔ Planning site navigation
✔ Creating your second site
✔ Preparing a jump menu
Nothing is more important to a site than the navigation If your site visitors cannot
find the information they require, the best writing, graphics, or dynamic content inthe world will not do the job Dreamweaver offers powerful aids to construct naviga-tion elements, and this session covers many of these features, including how to createmenus automatically with Dreamweaver’s tools
Finally, this session introduces the Coffee Times site, the second site you build for thiscourse In fact, in this session you define a Coffee site and build two small menus that will
be used as you create the site
Planning Site Navigation
Establishing a plan for site navigation is both my favorite and least favorite portion of Webdesign It is exciting, and it often feels like completing a complicated puzzle On the otherhand, you are making decisions that will be difficult to change later because the graphicsinvolved in creating navigation will be fully integrated into the overall appearance of the site.This book does not allow for a discussion of this complicated subject, but I can’t move on
to building a new site without stressing the importance of planning Even beyond the cal role of helping your visitors to find what they seek, your menus are an intrinsic part ofyour design, and changes to navigation in the middle of a project cause many hours of extrawork, and often lead to errors in code Please put planning your navigation at the top ofyour priority list for every site you build
criti-S E criti-S criti-S I O N
Planning Site Navigation
17
Trang 13Saturday Evening
184
I have a series of articles at WebReference.com about building menus, menu types, and the many tools to create menu graphics and text The initial article
in that series can be found at http://productiongraphics.com/column42/
I have also written a book on the same subject Web Menus with Beauty and
Brains, published by Hungry Minds, offers a complete discussion and hands-on
course for designing effective navigation and creating many types of menus.
It’s time to take a look at the second site you will build This site is for a fictitious ness called Coffee Times, and I have done all the planning and created the graphics so thatyou can focus on Dreamweaver’s features
busi-Listing navigation areas
The Coffee Times site will be divided into basic areas for fast navigation Each of the majorareas will have a submenu This setup might be considered boring because it is so standard;however, it is standard because it works Every page will offer links with company informa-tion and a contact route, because it is impossible to tell where in the process this informa-tion may be needed Table 17-1 lists the menu items The main menu items are shown inbold type, with the submenu items listed below The shaded row lists items from the smallmenu that will appear on every page I have excluded the Home menu item for clarity Homewill appear on every page except the entry page, and has no submenu items
Table 17-1 Main Menu and Submenus
New features Beans Beverages Tradition Online eventsNew articles Equipment Desserts Geography US/CanadaArticle archive Books/Music Alcoholic Ritual Worldwide
You want the returning visitor to be able to get anywhere on the site quickly For this
reason, you will provide a jump menu (a drop-down menu listing the entire site) See Figure
17-1 for an early version of the Coffee site
Creating your second site
You are ready to leave the Holiday site behind and move on to a new and more complex site.The course was designed in this way so that the site design would not be held back by thebasic techniques that you have concentrated on to this point
Note
Trang 14Session 17—Planning Site Navigation 185
Figure 17-1 Early proof for new Coffee Times site, reflecting the menu setup as described in Table 17-1 The jump menu, in the left column, will provide quick navi- gation for the entire site from any page in the site.
From this point on, you are moving into the more advanced and more exciting elements
of Web design Before you leave the basics, though, remember that the techniques that youhave covered are the techniques that you will use for most of your design work With theexception of Cascading Style Sheets (CSS), which I use for every site, at the very least fortext control, most of my professional work is done with the methods you have covered tothis point
CSS is discussed in Session 23.
By completing two sites, you will also review the basics twice It is a lot easier to ber a technique the second time it is used My goal with this course is to give you a solidgrounding in the techniques that you will use every time you create a site, and enoughinformation on the more advanced topics to steer your future development
remem-The site that you create now is the Coffee site that was planned earlier Create a newfolder to serve as your root folder by following these steps:
1 Create a folder on your hard drive and name it coffee.
2 Open Dreamweaver and define a new site Name it Coffee.
3 Specify the coffee folder that you created in Step 1 as the root folder for the site.
4 Set up your FTP information for the Coffee site In most cases, this will be the
same as your settings for the Holiday site, with the exception of the remote folderpath
5 Create a new folder for the Coffee site Name it art.
Cross-Ref
Trang 15Saturday Evening
186
That is as far as you must take this process for now However, you will be working withthe site in every session from now on, and will be adding folders in addition to the onesthat Dreamweaver creates automatically You will need this base for every site, though
The instructions for setting up this site are deliberately less detailed than they were when you created the Holiday site, since you have already worked through the steps once If you stumble, review Sessions 2, 3, and 5 for more detailed instructions.
Working with Navigation Tools in Dreamweaver
You start with a jump menu Dreamweaver makes creating these unglamorous, but most ful navigation aids, as easy as typing in your content The method is easy to follow and getsyou in shape to tackle the slightly more complicated navigation bars in the next session
use-You will create another form of menu, an image map, in Session 26.
Creating jump menus in Dreamweaver
Jump menus do a great job of offering tons of information in a very small space They arealso very easy to build Dreamweaver has automated the process so well that is it literally afill-in-the-blanks exercise Working with menus in this session, you will become more famil-iar with the JavaScript features in Dreamweaver
To create a jump menu
1 Create a new document in your Coffee site, and name it jump.html.
2 Select Insert ➪ Form Objects ➪ Jump Menu The Insert Jump Menu window yousee in Figure 17-2 opens In the following steps, you enter the items from Table17-1 in this jump menu
Figure 17-2 Initial Insert Jump Menu display.
Cross-Ref Cross-Ref
Trang 16Session 17—Planning Site Navigation 187
When the Insert Jump Menu window opens, the Menu Items area contains the item
“unnamed1.” Note how this same title also appears in the Text field The MenuItems area reflects the text that is typed in the Text field If you were to click OKright now, you would have a jump menu with one listing — unnamed1 However,you rename this entry in Step 3 and then add more entries in subsequent steps Asmore menu items are added, the list in the Menu Items section grows To edit anyentry, select it from the Menu Items list and change the text in the Text field Youare now ready to enter the menu items
3 Make sure that the original text is highlighted, and type Get around fast in the
Text field Click in any other field and the new text will replace “unnamed1” in theMenu List
This entry is simply a message, not meant to be a link, so you don’t add a URL linkfor this item
4 Before you add other menu items, you need to set up the values for the menu as a
whole To name the menu, type quick in the Menu Name field near the bottom of the screen, replacing menu1.
5 You want the line “Get around fast” to appear in the closed jump menu at all
times, so click Select First Item After URL Change This brings your menu display
to the first item you enter every time the menu displays
6 Now add the menu items Since you are listing all of your categories and their
sub-categories, you must consider how the areas can be defined You have a list of 22items If you type all entries in the same style, a user would never be able to dis-tinguish the items at a glance
So, you use uppercase letters for the main categories, and lowercase letters with
an indent for the subcategories
Click the + to add an entry to your menu “Unnamed1” appears again in both theMenu Items and Text fields
7 Type NEWS in the Text field.
8 To state where the visitor will go by choosing this list item, enter news.html in
the When Selected, Go To URL field Do not click OK yet
news.html does not exist yet However, from working out the details for the site, as explained in the previous steps, you can create the page names
The next steps create the entries for the News submenu items You want them to be ily identified as sublistings so add an indent and use lowercase for the titles This is a littlemore work, but since this menu will appear on every page, it is well worth the investment
eas-to help visieas-tors find their way quickly
1 Click the + again to add another listing In the Text field, type two times,
and then type new features Your entry should read new features, which will display as shown in Figure 17-5 Type newsfeat.html for the URL
address Your listings should look exactly like the ones in Figure 17-3
Note
Trang 17Saturday Evening
188
Figure 17-3 Building the listings in a jump menu
2 Repeat the previous step two more times In place of “new features,” type new articles and article archive, respectively Use newsart.html and newsarch.html
as the URL addresses
3 Continue to build your menu by typing the remaining main menu items: UCTS (products.html), RECIPES (recipes.html), HISTORY (history.html), and EVENTS (events.html) Also include their subcategories using Table 17-1 as a
PROD-guide, and indenting as in Step 1 Create filenames that make sense to you for thesubheading pages
4 Finally, add the last three menu items: ABOUT US (about.html), CONTACT tact.html), and LINKS (links.html).
(con-5 When you have entered all your listings, click OK to return to your document.
6 Preview your document in both browsers Figure 17-4 shows the expanded menu in
Internet Explorer Dreamweaver’s jump menu display does not always accuratelyreflect how the menu will appear in a browser
Figure 17-4 The jump menu previewed in a browser, where the HTML formatting of list items appears.
The jump menu takes much more time to explain than it does to complete Once youhave completed a few entries, “tedious” will probably be a more likely comment than “diffi-cult.” If you get bored, peek at your code; typing all of that would be a lot more tedious!Before you leave this section, you should learn to edit a jump menu
Trang 18Session 17—Planning Site Navigation 189
Editing a jump menu
If you want to return to your jump menu to change a value or to add a value, followthese steps:
1 In Design view, click the jump menu to select it.
2 Select Window➪ Behaviors to open the Behaviors palette
3 You will see the words Jump Menu at the right side of the Behaviors panel
Double-click this label to open the Jump Menu window You can edit any entry by ing and entering new text in the Text field The Jump Menu window you openfrom the Behavior panel is identical to the Insert Jump Menu window you workwith as you create the original jump menu
select-4 You can also edit your entries through the Properties panel Select the jump menu
as above, but click the List Values button on the Properties panel Clicking anyentry selects it for editing This is a good method for small edits, but you will findthat the Behavior panel offers easier editing
You have moved well along the navigation tools path, but there is one more importantautomated Dreamweaver feature that will help you with small menus Carry on to the nextsession to learn how to build a Navigation Bar As a bonus, in case you are starting to worryabout how you will remember these techniques, you’ll learn how to create annotations for adocument or image
Indenting sublistings in a jump menu helps to make selection easy for your visitors
To edit a jump menu, you must use Dreamweaver’s Behaviors panel or edit throughthe Properties panel
Trang 19Saturday Evening
190
3 What is a Dreamweaver jump menu? (See “Creating jump menus in Dreamweaver”
section.)
4 How can you add an indent to a jump menu in Dreamweaver? (See “Creating jump
menus in Dreamweaver” section.)
5 How can you quickly edit entries in a jump menu once it has been created? (See
“Editing a jump menu” section.)