Dreamweaver: Managing Your Site and Content. Oxford University Computing Services

Transcription

1 Dreamweaver: Managing Your Site and Content Oxford University Computing Services

2 How to Use This Book The Exercises This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic for your reference and then one or more exercises. Exercises are arranged as follows: A title and brief overview of the tasks to be carried out A numbered set of tasks, together with a brief description of each A numbered set of detailed steps that will achieve each task Some exercises, particularly those within the same section, assume that you have completed earlier exercises. Your lecturer will direct you to the location of files that are needed for the exercises. If you have any problems with the text or the exercises, please ask the lecturer or one of the demonstrators for help. This book includes plenty of exercise activities more than can usually be completed during the hands-on sessions of the course. You should select some to try during the course, while the teacher and demonstrator(s) are around to guide you. Later, you may attend follow-up sessions at OUCS called Computer8, where you can continue work on the exercises, with some support from IT teachers. Other exercises are for you to try on your own, as a reminder or an extension of the work done during the course. Writing Conventions A number of conventions are used to help you to be clear about what you need to do in each step of a task. In general, the word press indicates you need to press a key on the keyboard. Click, choose or select refer to using the mouse and clicking on items on the screen (unless you have your own favourite way of operating screen features). Names of keys on the keyboard, for example the Enter (or Return) key, are shown like this ENTER. Multiple key names linked by a + (for example, CTRL+Z) indicate that the first key should be held down while the remaining keys are pressed; all keys can then be released together. Words and commands typed in by the user are shown like this. Labels and titles on the screen are shown like this. Drop-down menu options are indicated by the name of the options separated by a vertical bar, for example File Print. In this example you need to select the option Print from the File menu. To do this, click with the mouse button on the File menu name; move the cursor to Print; when Print is highlighted, click the mouse button again. A button to be clicked will look like this. The names of software packages are identified like this, and the names of files to be used like this. ii

3 Software Used Files Used Dreamweaver CS5 Windows XP or Mac OSX Firefox / Internet Explorer / Safari In the PresenterSite folder feedback.html hardware.html index.html personal.html presenter.css presenterprint.css software.html style.html technology.html In the images folder las_thumb.jpg mik_thumb.jpg PresentermakingSenseLogo.gif updated.png vis_thumb.jpg vot_thumb.jpg In the SupportFiles folder PresentationZen.png Revision Information Version Date Author Changes made 3.0 September 2008 Dave Baker Complete rewrite 3.1 July 2009 Dave Baker Updated for Mac Minor corrections 4.0 August 2010 Dave Baker Updated for CS5 Acknowledgements Copyright Thank you to Anna Pavelin for proofreading the document and road-testing the exercises. Screen shots in this document are copyright of Adobe. The copyright of the remainder of this document lies with Oxford University Computing Services. iii

4 Contents 1 Introduction What you should already know What you will learn Where can I get a copy of Dreamweaver? Getting started Content management Content management and Dreamweaver Content management in this session Snippets and assets Using snippets Using assets Library items Using library items Templates Template or library items or CSS? Editable regions Nested templates File management and checking The files panel The results panel Search Reference Validation Browser compatibility Link checker Site reports Spell checking Publishing a web site Setting up a remote site Synchronising remote and local web sites Dreamweaver issues Cloaking and mark-up What Next? Other Dreamweaver sessions iv

5 9.2. Computer OUCS Help Centre Downloadable course materials (WebLearn) Reference Material v

6 Table of Exercises Exercise 1 Setting up the Dreamweaver environment... 3 Exercise 2 Using and creating snippets... 7 Exercise 3 Reusing an asset Exercise 4 Creating and using a library item Exercise 5 Creating a template with an editable region Exercise 6 Adding an editable optional region to a template Exercise 7 (Optional) A nested template containing a repeating region 29 Exercise 8 Using the Files Panel Exercise 9 Validating a web page Exercise 10 Finding and fixing broken links Exercise 11 Putting (publishing) an existing site Exercise 12 Getting (downloading) a web site Exercise 13 Synchronising local and remote sites Exercise 14 Cloaking folders vi

7 Dreamweaver: Managing Your Site and Content TWAD 1 Introduction Welcome to the course Dreamweaver: Managing your site and content. This booklet accompanies the course delivered by Oxford University Computing Services (OUCS), IT Learning Programme. Although the exercises are clearly explained so that you can work through them yourselves, you will find that it will help if you also attend the taught session where you can get advice from the teachers, demonstrators and even each other! If at any time you are not clear about any aspect of the course, please make sure you ask your teacher or demonstrator for some help. If you are away from the class, you can get help by from your teacher or from help@oucs.ox.ac.uk 1.1. What you should already know This session is the third of four that cover the use of Adobe s Dreamweaver web site development tool. This session assumes you have a basic familiarity with Dreamweaver and its use of Cascading Style Sheets (CSS); this material was covered in the previous two Dreamweaver sessions. We ll assume that you are already familiar with using a computer and the basics of file management, such as opening files from particular folders and saving them, perhaps with a different name, back to the same or a different folder. The computer network in OUCS may differ slightly from that which you are used to in your College or Department; if you are confused by the differences ask for help from the teacher or demonstrators What you will learn In this session we will cover the following topics: Using snippets and assets Using library items Using templates and nested templates Optional template regions Repeated template regions Validating your web site Managing local and remote copies of a web site Topics covered in related Dreamweaver sessions, should you be interested, are given in Section Where can I get a copy of Dreamweaver? Colleges and departments are able to buy Dreamweaver from the OUCS shop at a discounted price. If you are a student or academic, you can still purchase Dreamweaver at an educational discount, but you need to approach a software retailer, and you will need to provide proof of your academic status. Copies of Dreamweaver bought through educational discount schemes cannot be used for commercial purposes. It is also not possible to upgrade to a subsequent version, although you can of course download updates and fixes to the program. You can download a trial version of Dreamweaver from the Adobe website which will work for a limited period and which you can convert to a full version by purchasing a licence number. 1 OUCS

8 TWAD Dreamweaver: Managing Your Site and Content 2 Getting started The basics of using Dreamweaver were covered in an earlier session. You will recall that the first step in creating a set of web pages is to define a site essentially telling Dreamweaver which folder to use. Once you have defined a site in Dreamweaver, it is easy to return to it at a later stage. Dreamweaver will remember which site you were working on, but you can easily switch to another defined site using the Site Manage Sites option. In the lecture rooms, our computers are routinely re-imaged and so Dreamweaver customisations and sites you defined in a previous session will not be available to you. Therefore, in order to make the most of the upcoming sessions, you need to do a little setting up. Treat it as a little revision OUCS 2

9 Dreamweaver: Managing Your Site and Content TWAD Exercise 1 Setting up the Dreamweaver environment In this exercise we will define the site that we will be using for the remaining exercises. Open up Dreamweaver Open the Site Setup dialog to define a new site Select the folder for the Presenter site Set the images folder Save the site definition Task 1 Open up Dreamweaver Find the Dreamweaver CS5 icon. Windows users: Click on the Start button. Select All Programs Adobe Design Premium CS5 Adobe Dreamweaver CS5 Mac users: Open a Finder window, and in the Applications folder there is a Dreamweaver folder containing the icon. Double click on the icon. In the menu bar at the top of the Dreamweaver window, click on the drop-down labelled DESIGNER. Select the CLASSIC layout. Task 2 Open the Site Setup dialog to define a new site Use Site Manage Sites to display the Manage Sites dialog. Click on New and select Site from the list to display the Site Setup dialog (Figure 1). Figure 1 The Site Setup dialog 3 OUCS

10 TWAD Dreamweaver: Managing Your Site and Content Task 3 Select the folder for the Presenter site In the Site Name text box, enter Presenter Use the folder icon to the right of the Local Site folder text box to display a folder dialog box. Navigate to the PresenterSite folder in the H Drive and click Select (or click Choose on the Mac) Task 4 Set the images folder Task 5 Save the site definition In the Site Setup dialog, click on the reveal arrow to the left of Advanced Settings. Select Local Info. Click on the folder icon to the right of the Default images folder text box In the Choose Image Folder dialog, click on the images folder. Step 4 In Windows: Click on Open to select the folder. Click on Select to return from the Choose Image Folder dialog. In Mac OSX: Click on Choose to select the folder and return from the Choose Image Folder dialog. Click Save to close the Site Setup dialog. Click Done to close the Manage Sites dialog. The files panel should change to reflect the contents of the PresenterSite folder. OUCS 4

11 Dreamweaver: Managing Your Site and Content TWAD 3 Content management Content authoring tools such as Dreamweaver can save a great deal of time when you are designing individual pages, but where they really come into their own is in the development of a web site rather than individual pages. Even a personal web site will have tens or even hundreds of individual web pages. You have the task of keeping these pages consistent, up to date and correctly linked; not an easy task when much of the information changes frequently. What exactly content management involves depends on the context and environment of your web site. If we consider an on-line store, perhaps Amazon, selling hundreds of thousands of different items, it would be unmanageable to have a separate page for each product. In such a case we would most likely have a database of products and a program on the server that generates a web page for the product on request, using information from the database. A large organisation might devolve responsibility for managing the content of its many web pages to a number of individuals. The look and feel of the pages would need to stay the same, and so most likely a content management system (CMS) would be used so that only the content could be edited, not the styles or layout. Our web sites are probably of a smaller scale than these two examples, but we will still benefit from some of the content management features in Dreamweaver Content management and Dreamweaver There are a number of commercially produced content management systems, and very many open source and community based CMS. Dreamweaver can interact with most of these, some more easily than others. There is also good support for the Subversion version control system. Adobe produces Contribute, its own CMS designed to partner Dreamweaver. This is essentially a web page editing environment (as opposed to a development environment). It enables a web site to be managed by a group of people, some of whom may have limited knowledge of web page design and development. The program can make sure that only one person can edit a particular page at a time, and even control exactly what they are allowed to change. It will track all changes made so that it is clear who made the changes, and even enable web pages to be rolled back to previous versions if necessary. Contribute is a separate application and it must be purchased and installed independently of Dreamweaver. To be used to full effect it also requires the Contribute Publishing Server to be installed on a shared server. Contribute is not covered in this session we will rely on the more standard content management facilities available in Dreamweaver itself Content management in this session In this session we will focus on the features in Dreamweaver that help you manage the style, layout and content across the pages that make up a small to medium sized web site, of a size that might typically be managed by one person (maybe a few tens to a few hundred pages). We will look at four features in particular: Snippets Assets Library items Templates 5 OUCS

12 TWAD Dreamweaver: Managing Your Site and Content 4 Snippets and assets Consistency is a laudable aim in creating a web site. This not only helps aesthetically but it can also make it easier for our visitors to find and interpret information. We should endeavour to be consistent in everything: fonts, font sizes, colours, margins and indents, link identification, standard text (such as copyright statements), standard images (such as logos). Dreamweaver can help with this in the way that it categorises reusable elements on pages as snippets and assets. Snippets and assets are accessible from their relevant panels. Dreamweaver endeavours to keep these panels in synchronisation with changes you make in your pages, however sometimes it lags a little behind. Each panel has a Refresh Site List button which can force Dreamweaver to update its lists Using snippets A snippet is a chunk of HTML. It might be a single tag such as <p> with its associated text, or it might be a collection of several tags that go to making up a coherent section of content. It could even be a chunk of JavaScript that we might want to reuse elsewhere. Each snippet is given a name and an optional description and listed in the Snippets panel. If we have very many of them, it can be useful to organise them within folders and indeed Dreamweaver supplies many snippets that are already organised in this way. The easiest way to create a snippet is to highlight the chunk of code in an existing web page either in design view or code view and click on the new snippet button in the Snippets panel. Dreamweaver then brings up a dialog where you can name the snippet and add a description. There are two types of snippet. The simplest is just a chunk of code, but if necessary we can have a snippet made up of two parts: an insert before part and an insert after part. The easiest way to use a snippet is to drag it from the Snippets panel to where you want it on the page. With a two part snippet, any text that is highlighted when we apply the snippet is surrounded by the before and after components. Snippets are not site specific; once we have created a snippet in the Snippets panel, it is available to us whenever we use Dreamweaver, even when working on a different web site. A word of warning: Snippets are not very sophisticated; Dreamweaver will allow you to insert a snippet anywhere, even if it would create invalid HTML (for example your snippet nested inside an inappropriate HTML tag). Dreamweaver also does not take responsibility for updating links embedded within a snippet when it is inserted into your page. You may find library items more useful. OUCS 6

13 Dreamweaver: Managing Your Site and Content TWAD Exercise 2 Using and creating snippets In this exercise we will create our own snippet and reuse it on another web page. We will also use one of the snippets that is provided by Dreamweaver. Open the index page for the site Convert some existing text to a snippet Insert the text in other pages Add a Dreamweaver snippet (e.g. meta tag) to a page Save and close the pages. Task 1 Open the index page Find index.html in the Files panel and double-click on it to open it in the document window. Make sure you are in the Design (WYSIWYG) view. If not, click on the Design button in the Document window toolbar. Task 2 Convert some existing text to a snippet Scroll to the end of the document. Click to place the cursor in the copyright paragraph. In the Tag Selector bar at the bottom of the Document window, click on the <p#footer> tag. This will select the paragraph containing the copyright statement. In the Files panel, click on the Snippets tag to bring it to the front. If the Snippets tab is not visible, use Window Snippets to display it. In the Snippets panel, click on the Text list entry. Step 4 At the bottom of the Snippets panel, click on the New Snippet button at the bottom right of the panel to display the Snippet dialog (Figure 2). Step 5 In the dialog select the Insert block option. Select the Preview type to be Design. 7 OUCS

14 TWAD Dreamweaver: Managing Your Site and Content Figure 2 The Snippet dialog Step 6 In the Name text box type: Copyright Click OK. Task 3 Insert the comment in other pages Step 7 Notice that a new entry has appeared under the Text section of the Snippets panel. Click on the Files tab in the Files panel. Double click on the feedback.html file to open it in the Document window. In the Files panel, click on the Snippets tab. Click and drag the Copyright entry that you just created and drop it into the footer area of the feedback document. Step 4 Repeat this for the other pages: hardware.html personal.html software.html style.html technology.html OUCS 8

15 Dreamweaver: Managing Your Site and Content TWAD Task 4 Add a Dreamweaver snippet (e.g. meta tag) to a page Double click on the index.html entry in the Files panel. Click on the Code button in the Document window toolbar. Look through the code and identify the <head> and </head> tags near the top of the document. Click in front of the </head> tag and press ENTER to create a new line. Make sure that you have not split a tag by doing this. Step 4 In the list in the Snippets panel, click on the + to the left of Meta. Step 5 Click and drag the Do Not Cache entry, dropping it into the new line space you created in the document. The Do Not Cache pragma entry should ensure that the page is not cached by the browser useful for a regularly updated page. (Note that early browsers do not implement this properly) Task 5 Save and close the pages Use File Save All to save the pages. Use File Close All to close the pages Using assets There are nine different types of page content that Dreamweaver considers to be an asset: Images: all of the images that have been used in the current web site. You can reuse an image by dragging it from the Assets panel to the desired location on a page. Colours: all of the colours used either directly in the HTML (not recommended) or through style sheets. You can reuse a colour by highlighting an item in the code or design view and then dragging the colour from the Assets panel on to the highlight. URLs: all external links that have been used in the web site. Flash media: all Flash media files (.swf) Shockwave media: all Shockwave media files (.dcr) Movies: all movie files (.flv,.mov,.mpg) 9 OUCS

16 TWAD Dreamweaver: Managing Your Site and Content Scripts: all external JavaScript files, typically these are created by the inclusion of Spry controls, but any JavaScript files that you add manually will also be listed here. Templates: all templates used by the web site. Library items: all library items used by the web site. Note that assets are only listed for the current web site. Assets in one defined web site are not automatically available in another web site. This is different behaviour to snippets. We will deal with templates and library items in later sections. OUCS 10

17 Dreamweaver: Managing Your Site and Content TWAD Exercise 3 Reusing an asset In this exercise we will identify the assets in our web site and reuse some of them. Open the personal page Insert the site logo from the asset panel Apply a colour asset Preview in a browser Task 1 Open the personal page Find personal.html in the Files panel and doubleclick on it to open it in the document window. Make sure you are in the Design view. If not, click on the Design button in the Document window toolbar. Task 2 Insert the site logo from the asset panel In the Files panel, click on the Assets tab. If the Assets tab is not visible, use Window Assets to display it. Click on the Images button at the left of the panel. Select the PresenterMakingSenseLogo.gif image. Notice the preview that appears at the head of the panel (Figure 3). Figure 3 The Assets panel 11 OUCS

18 TWAD Dreamweaver: Managing Your Site and Content Task 3 Apply a colour asset Click and drag the PresenterMakingSenseLogo.gif entry and drop it in the empty box (division) at the top of the page. If you are prompted for Alternate text type: The Presenter making Sense logo In the Document window, double-click on the word Position to select it. In the Assets panel, click on the Colors button. Click and drag one of the brighter colours on to the selected text in the Document window. The New CSS Rule dialog will open. Figure 4 The NEW CSS Rule dialog Dreamweaver has identified that you want to make a style change. The word Position is styled using a <strong> tag and Dreamweaver is suggesting it will modify the style for all similarly identified tags, i.e. those <strong> tags that are: within <p> tags, that are within tags with an id of content, that are within tags with an id of container OUCS 12

19 Dreamweaver: Managing Your Site and Content TWAD Step 4 Click on the Less Specific button twice. Notice the change to the text. The style change will now be to any <strong> tag within a <p> tag. This is probably more useful to us all such tags in our site will take the new style. Click OK. Task 4 Save and preview the web page Use File Save to save the page. If prompted, save any other files that Dreamweaver identifies as being changed. Use the Preview button browser. to preview the page in a Close the browser to return to Dreamweaver. 13 OUCS

20 TWAD Dreamweaver: Managing Your Site and Content 5 Library items We have already seen that snippets are useful for reusing chunks of code around our web site. One disadvantage with snippets is that once we have placed a snippet in a web page, any link with the original snippet in the Snippets panel is broken; if we change the source snippet, we do NOT change the snippet on any web page where it has been used. Snippets are also not managed by Dreamweaver in an intelligent way it is possible to place them anywhere, and so break our page! Library items overcome that limitation. A library item is also a chunk of code that we might want to reuse, but when we do reuse it in a web page, a link is retained to the original library item. If the original item is changed, then it is also changed in every page where it has been used. This ability to update every instance of a particular library item s usage is extremely useful for information that needs to be consistent on all web pages, but which is subject to change. Examples might be simple contact details and addresses, or it might be as complex as a navigation menu that needs to be updated when sections of a web site are added or deleted Using library items Library items are created in much the same way as snippets. You can select any chunk of code in the code or design view and click on the New Library Item button in the assets panel. The library item is immediately added to the list ready for you to give it a name. A preview of the library item is shown in the panel. It will not look exactly as it did on the page if it had CSS styling applied to it the styling is not part of the library item. When you need to use a library item, you simply drag it to the position you want on a web page. Dreamweaver highlights library items on pages using a pale yellow background. You cannot edit a library item directly on the page. Instead, you need to highlight it in the Assets panel and click on the Edit button. The library item is opened in a new page ready for you to edit. When you save it, Dreamweaver will prompt you with a list of all the pages that will be updated with the new version. You can break the link to the source for a library item on a page by highlighting it and then using the Properties panel. Once the link is broken, you are free to edit the item directly on the page, but it will no longer be updated when the source is changed. OUCS 14

21 Dreamweaver: Managing Your Site and Content TWAD Exercise 4 Creating and using a library item In this exercise we will create a library item for our navigation menu and then use it on all of our pages. Open the index page of the site Select the upper navigation menu and save as a library item Insert the navigation menu library item on another page Repeat for the remaining pages Make a change to the library item Open the software page and preview it Task 1 Open the index page Find index.html in the Files panel and double-click on it to open it in the document window. Make sure you are in the Design view. If not, click on the Design button in the Document window toolbar. Task 2 Select the upper navigation menu and save as a library item Click into one of the entries in the navigation menu at the top left of the page. In the Tag Selector bar at the bottom left of the document window, click on <ul> This will select the navigation menu list. Click on the Assets tab in the Files panel. If the Assets tab is not visible, use Window Assets to display it. Step 4 Click on the Library button Library Item list. to display the Click on the New Library Item button bottom of the Assets panel. at the Step 5 A dialog may be displayed that warns you that the library item may not look the same when placed elsewhere because the style information is not included in the item. Click OK if the dialog appears. Step 6 The library item is added to the Library Item list ready for you to give it a name. Type navbar and press ENTER. 15 OUCS

22 TWAD Dreamweaver: Managing Your Site and Content Task 3 Insert the navigation menu library item on another page Task 4 Repeat for the remaining pages Task 5 Make a change to the library item Step 7 Single click on the navbar entry in the Library items list. Notice the preview of the library item at the top of the Assets panel. It shows how the item looks without styling. Step 8 In the document window, click away from the navigation menu. Notice that the navigation menu now has a yellow background. This indicates it is a library item, and cannot be edited in the normal way. Click on the Files tab in the Files panel. In the Files panel, double-click on technology.html to open it. Click on the Assets tab in the Files panel. Click and drag the navbar library item into the empty Div box to the left of the page heading. Step 4 Try editing the new navigation menu. It is now a library item and is treated as a single object on the page and cannot be changed (although it could be deleted if necessary). Insert the navigation menu in a similar way on the remaining pages: feedback.html hardware.html personal.html software.html style.html Use File Save All to save all the files. Click on the Assets tab in the Files panel. Double click on the navbar entry in the assets list. This will open the navbar library item in the Document window. OUCS 16

23 Dreamweaver: Managing Your Site and Content TWAD Click after the word Technology (second in the list). Press ENTER to create a new list entry. Type Hardware Step 4 Press ENTER to create another list entry. Type Software Step 5 Click on the Files tab in the Files panel Step 6 Back in the Document window, double-click on the word Hardware to select it. Use the Properties panel to turn this into a link to the hardware.html page. (You can do this using the Point to File button ) Step 7 In the Document window, double-click on the word Software to select it. Make this a link to the software.html page. Step 8 Use File Close Answer Yes to save the changes. The Update Library Items dialog will appear (Figure 5). Figure 5 The Update Library Items dialog Step 9 Click Update. The Update Pages dialog will appear to confirm the action. Click on Close. 17 OUCS

24 TWAD Dreamweaver: Managing Your Site and Content Task 6 Close and Save the pages Task 7 Open the Software page and preview it Use File Close All to save and close the pages. In the Files panel, click on the Files tab. Double-click on software.html to display it in the document window. Use the Preview button to preview the page in a browser. Check that the navigation menu is correct. Close the browser to return to Dreamweaver. OUCS 18

25 Dreamweaver: Managing Your Site and Content TWAD 6 Templates Templates are patterns for your pages and behave in much the same way as templates in other applications such as Microsoft Word. You can create a template from any existing web page. Pages that are based on a template are automatically updated when you make a change to that template although, as with library items, you can break that link if necessary Template or library items or CSS? You may have spotted some similarities in purpose between templates, library items and CSS. Each enables us to make global changes to a web site. With CSS we can make changes not only to colours and fonts but also to positioning. With library items we can make changes to the content of (generally) small sections that are common to several web pages. With templates we can make changes to content and, to some extent, layout. We can also include library items and link to cascading style sheets. It has to be said that there is some overlap and it is not always clear which approach should be used, and sometimes it doesn t matter. Most likely you will use a mixture of all three. A good rule of thumb is as follows: 6.2. Editable regions Use CSS for all styling and as much layout as possible. Use library items for content that might optionally be included in several different types of page (i.e. pages derived from different templates). Use templates where a number of similar pages are required, and/or where you might need to control what parts of a page can be changed. Templates are derived from ordinary web pages, but saving a web page directly as a template is not useful by default it would mean that no part of a page based on the template could be changed! In order to be able to change a template based web page we have to define editable regions. There are a number of different types of these, all of which can be inserted using the Template button on the Common toolbar. Each region is given a name and in the design view is shown with a blue border. Creating editable regions is one of the times when it can be helpful to work in both design and code view; use the design view to select the part of the page you want to use, and the code view to make sure that you have selected exactly the tags you were expecting if a tag is not in an editable region, you will not be able to edit it on the web page. Basic editable region: this is the simplest region. We highlight any content on the web page and define it as editable using the Editable Region button. In the resulting web page, we can add or change anything we like in this region. Repeating region: This is used in conjunction with an editable region. An example might be a page where you need to be able to add a variable list of items. 19 OUCS

26 TWAD Dreamweaver: Managing Your Site and Content First, you would create an editable region for a single item of your list (perhaps a heading, a paragraph and an image) and then in turn select this region and make it a repeating region. In the page, a repeating region includes buttons that allow you to add or delete an entry or move the entry up or down with respect to its neighbours. Repeating table: This is similar in principle to a repeating region; you can create a table, with a header if needed, to which you can add, remove and reorder rows as necessary. Dreamweaver does most of the setup work for you through a dialog. Optional region: This is a region which we can either choose to be visible or not in a particular instance of a page from a template. An optional region might simply be some (uneditable) text, but it could also include other types of editable region. In order to display an optional region on a page, you use Modify Template properties to display a list of all of the optional regions on the page. Editable tag attributes: There may be times when you want to make sure that a particular tag remains uneditable (perhaps an <img> tag) but you want the ability to change one of the properties (perhaps the src property of the <img> tag). Editable tag attributes enable you to do this. OUCS 20

27 Dreamweaver: Managing Your Site and Content TWAD Exercise 5 Creating a template with an editable region In this exercise we will create a template from an existing web page and set up editable regions on the page. Open the index page of the web site Save the page as a template Create an editable region for the heading Create an editable region for the content Save the template Create a new page based on the template Preview in a browser Task 1 Open the index page Find index.html in the Files panel and double-click on it to open it in the document window. Make sure you are in the Design view. If not, click on the Design button in the Document window toolbar. Task 2 Save the page as a template Use File Save As Template dialog (Figure 6). Figure 6 The Save As Template dialog Leave the Site as Presenter. In the Description text box, type Standard content page Change the Save as text box to: PresenterMain Click Save. 21 OUCS

28 TWAD Dreamweaver: Managing Your Site and Content In the Update Links dialog, make sure you click Yes. This will ensure that links such as those to style sheets are managed correctly. Step 4 Notice that the name of the file has changed to PresenterMain.dwt. Also, in the Files tab of the Files panel, a new Templates folder has been created, inside of which is the new PresenterMain.dwt file. Task 3 Create an editable region for the heading In the Design view, double-click on the heading Welcome. In this case we did not use the Tag Selector we only want to be able to edit the text, and not the tag. Use Insert Template Objects Editable Region to display the New Editable Region dialog (Figure 7). Figure 7 The New Editable Region dialog In the Name text box, type: MainHeading (note no spaces in the name). Click OK. Notice that the heading is now in a blue box, with the editable region name as a tab. Step 4 Replace the word Welcome in the editable region with: Type page title here Task 4 Create an editable region for the content Select the five paragraphs of content by clicking in front of the first character, holding down the Shift key and clicking after the last character. OUCS 22

29 Dreamweaver: Managing Your Site and Content TWAD Use Insert Template Objects Editable Region to display the New Editable Region dialog. In the Name text box, type: MainContent Click OK. Delete the text in the MainContent editable region. Replace with the following three, short paragraphs: Type your content here. You can have as many paragraphs as you need. You can include lists, tables and images if necessary. Step 4 In the Document window toolbar change the Title to Presenter Making Sense Task 5 Save the template Task 6 Create a new page based on the template Use File Save You will be prompted with a message about how the MainHeading editable region is set up. This is normal. If you are unsure what it means, ask the session teacher to explain. Click OK. Use File New to display the New Document dialog. Choose Page from Template in the first column. Make sure Presenter is selected in the Site column. Select PresenterMain in the Template column. Make sure that Update page when template changes is ticked. Click on Create. Step 4 Replace the Heading text with: Using Images Replace the paragraphs with the following text: Images form an essential part of your presentation. In the best presentations they are more important than the words. 23 OUCS

30 TWAD Dreamweaver: Managing Your Site and Content Step 5 In the Document window toolbar, change the Title to: Presenter Using Images Step 6 You will not be able make any other changes to the page. Try it! Task 7 Save and preview the web page Use File Save As to save the page as images.html Use the Preview button browser. to preview the page in a Close the browser to return to Dreamweaver. Use File Close All to close all the open pages. OUCS 24

31 Dreamweaver: Managing Your Site and Content TWAD Exercise 6 Adding an editable optional region to a template In this exercise we will add an optional region to our template. The user of the template can then choose whether to use it or not. Open the PresenterMain template Add News text Make the news text an editable region Select the News div and create an Optional region Save the template Open the images page and turn on the optional content Change the News text Save and preview the images page Task 1 Open the PresenterMain template If the PresenterMain.dwt template is open, click on its tab in the Document window to bring it to the front. Otherwise, open the PresenterMain.dwt template in the Templates folder in the Files panel by doubleclicking on it. Task 2 Add News text On the right-hand side of the page, change the PowerPoint 2010 now available text to read News item for this page In the Tag Selector at the bottom left of the document window, click on the <p>. This will select the entire paragraph. Task 3 Make the news text an editable region Use Insert Template Objects Editable Region to display the New Editable Region dialog. In the Name text box, type: NewsText Click OK. Task 4 Select the News div and create an Optional region Click anywhere inside the News item for this page text. In the Tag Selector at the bottom left of the document window, click on <div#news> This will select the news div. Use Insert Template Objects Optional Region to display the New Optional Region dialog (Figure 8) Click to remove the tick next to Show by default. 25 OUCS

32 TWAD Dreamweaver: Managing Your Site and Content Figure 8 The New Optional Region dialog Step 4 Change the Name to NewsRegion Click OK. Task 5 Save the template Task 6 Open the images page and turn on the optional content Use File Save to save the template. If the editable region warning dialog appears, click OK. The Update Template Files dialog will appear listing all the pages that will be updated by this change.. Click Update. In the Update Pages dialog, click Close. If the images.html page is open, click on its tab in the Document window to bring it to the front. Otherwise, open the images.html page by doubleclicking on it in the Files panel. Use Modify Template Properties to display the Template Properties dialog (Figure 9). Click to place a tick next to Show NewsRegion. Click OK. OUCS 26

33 Dreamweaver: Managing Your Site and Content TWAD Figure 9 The Template Properties dialog Task 7 Change the News text Task 8 Save and preview the images page in the browser Click into the NewsText editable region and change the text to: Try the OUCS course on Digital Images! Use File Save to save the page Use the Preview button browser. to preview the page in a Close the browser to return to Dreamweaver. 27 OUCS

34 TWAD Dreamweaver: Managing Your Site and Content 6.3. Nested templates We often need an overall template for our web site, defining content such as navigation menus, logo, copyright notices, etc. to appear on every page, but then we might want variations of that pattern for different areas of the site. We could take our main template and create slightly different variations of that template as needed, but if we then need to make a global change we would have to visit each template and make sure we made the same change. To avoid this Dreamweaver has the option of having nested templates. These inherit the basic structure of a master template, and so change in step with changes made to that master (See Figure 10). Figure 10 Master and nested templates OUCS 28

35 Dreamweaver: Managing Your Site and Content TWAD Exercise 7 (Optional) A nested template containing a repeating region In this exercise you will create a template that is nested within another template. This nested template will also have within it a repeating editable region. The template will be for an FAQ (Frequently Asked Qusetions) page, to make it easy to add new questions as needed. Create a new FAQ page from the PresenterMain template Set the optional region to feed through Save as a (nested) template Modify placeholder text Set FAQ description editable region Create the repeating region Set Question editable region Set Answer editable region Save the template Create a new FAQ page from the FAQ template Add some content using the repeating region Save and preview in a browser Task 1 Create a new FAQ page from the PresenterMain template Use File New to display the New Document dialog. Select Page from Template for the Presenter site from the PresenterMain template. Make sure the Update page when template changes box is ticked. Click Create. Task 2 Set the optional region to feed through Task 3 Save as a (nested) template Use Modify Template Properties to display the Template Properties dialog. Put a tick in the box to the left of Allow nested templates to control this. Click OK. This makes the optional editable region available to the nested template we are creating. Use File Save As Template. If a warning appears about the editable region MainHeading, click OK. 29 OUCS

36 TWAD Dreamweaver: Managing Your Site and Content Task 4 Modify placeholder text In the Save As Template dialog, set Site Presenter Description Frequently asked questions template Save as FAQ Click Save. In the MainContent editable region, replace the existing text with: FAQ list description here Question here Answer here Task 5 Set FAQ description editable region In the Properties Panel, make sure the <>HTML button is selected. Click on the word Question. In the Tag Selector at the bottom of the Document window click on <p> to select the paragraph. Use the Class drop-down list to apply the question class style to the paragraph. Step 4 In a similar way, apply the Answer class style to the Answer paragraph. Click into the FAQ list description paragraph Use the Tag Selector at the bottom left of the Document window and click on <p> Use Insert Template Objects Editable Region to display the New Editable Region dialog. (Dreamweaver may display a message that it will automatically convert the document to a template, If so, put a tick in the box Don t show me this message again, and click OK.) In the Name text box, type: FAQDesc Click OK. OUCS 30

37 Dreamweaver: Managing Your Site and Content TWAD Task 6 Create the repeating region Task 7 Create the question editable region (inside the repeating region) Task 8 Create the answer editable region (inside the repeating region) Task 9 Save the template Task 10 Create a new FAQ page from the FAQ template Click immediately before the question paragraph. Hold the SHIFT key down. Click after the last character of the second answer paragraph. This should select the two paragraphs. Use Insert Template Objects Repeating Region to display the New Repeating Region dialog. In the Name text box, type: FAQ Click OK. Click into the Question paragraph Use the Tag Selector at the bottom left of the Document window and click on <p.question> Use Insert Template Objects Editable Region to display the New Editable Region dialog. In the Name text box, type: QuestionText Click OK. Click into the Answer paragraph Use the Tag Selector at the bottom left of the Document window and click on <p.answer> Use Insert Template Objects Editable Region to display the New Editable Region dialog. In the Name text box, type: AnswerText Click OK. Use File Save to save the template. Answer Yes (or OK) if a warning appears. Use File New to display the New Document dialog. Select Page from Template for the Presenter site from the FAQ template. 31 OUCS

38 TWAD Dreamweaver: Managing Your Site and Content Make sure the Update page when template changes box is ticked. Click Create. Task 11 Add some content using the repeating region Change the page heading to: Questions about presenting Change the FAQ list description to: These are questions that have been asked in the past Change Your question text here to: How many slides should I have? Step 4 Change Your answer text here to: As many as it takes! Step 5 Click on the + button at the top of the Repeat region. Step 6 Change the question and answer text to: Is there a version of PowerPoint for the Mac? Yes. It is part of Office 2011 for the Mac Task 12 Save and preview the FAQ page in the browser Use File Save to save the page as faq.html Use the Preview button browser. to preview the page in a Close the browser to return to Dreamweaver. OUCS 32

39 Dreamweaver: Managing Your Site and Content TWAD 7 File management and checking Your web site will be composed of many files: HTML files, images, Spry library files, library items, templates and others. All of these are important and need careful management. Remember that these files should be within the folder that you defined for the web site, although you can and should organise your files into folders within that site folder. Note that some folders are created and used by Dreamweaver, for example a folder for templates, and you should not move or delete these The files panel You will already have been using the Dreamweaver Files panel and hopefully you appreciate the importance of carrying out all file operations related to your web site through this panel. If you do so, Dreamweaver will make sure that none of your internal page links will break when you rename or move a page. It will also warn you if you try and delete a file that is linked to from another. The most useful technique to use when interacting with the Files panel is the right-click (Ctrl-click on a Mac). This will display a menu of file related operations. Some of the more common operations are on sub-menus off of this menu; for example Delete is found by clicking on the Edit menu entry. One of the right-click menu entries is New Folder. If you have lots of web pages, you may want to make it easier to find a particular one by organising them into folders that correspond to different sections of the web site. Most web developers like to keep all images in a single image folder. In fact this is so common that it is an option that you can set when you define the site in Dreamweaver. Reorganising your files into folders is just a question of dragging and dropping files into folders. If the file is linked to by others, Dreamweaver will prompt you that it would like to update the links. You would be unwise not to! If you find it difficult to use the small Files panel, you can use the Expand button at the top of the panel to switch to a full screen view. Clicking the Expand button again will return the Files panel to its usual position. The expanded view is very useful when we look at the publishing of our web site The results panel Part of the task of creating a web site is to check that our web site looks and behaves as we expect. This is more difficult than it ought to be; each browser has its own quirks which mean that there can be subtle (and not so subtle!) differences in the way our pages look in various browsers. There can even be differences between versions of the same browser. Dreamweaver includes a number of tools that help with this process, but much of it is still our responsibility. These tools are accessed through the Results panel. This panel is not usually displayed unless needed it takes up quite a lot of screen space but just as with other panels you can quickly display it through the Window menu. Figure 11 The Results panel 33 OUCS

40 TWAD Dreamweaver: Managing Your Site and Content Search Most tabs of the Results panel have a small green reveal button on the lefthand side that gives access to the features of a particular tool, and usually allows the settings of the tool to be changed. The search facility in Dreamweaver is extremely powerful. You can search any part or parts of your web site for any text, code or even specific tags. At the same time you can replace the searched for content with any other content that you specify. The search dialog looks similar to those found in many other applications, with the added features of being able to specify where in your site to search, and the type of content you want to search for. Using the Find Next button in the dialog will take you directly to the next match. Using the Find All button will display in the Results panel a list of all the matches found. Double-clicking on an entry in the list will then take you directly to the location of the match Reference Validation Figure 12 The Find and Replace dialog Built into Dreamweaver is the content of a dozen or so reference books, many taken from the excellent O Reilly series of computer reference manuals. These are all accessed through the Reference tab of the Results panel. You can select a reference book from a drop-down list, and then search through the book for a particular feature. For example, selecting the O Reilly HTML Reference book, allows you to then select a particular HTML Tag and then access the description of the tag, or choose from a list of the attributes that it can take. HTML and CSS were developed under the auspices of the World Wide Web Consortium (W3C), and there are published standards for each language that browsers should comply with. As with all standards there are some areas which are open to interpretation, and there are some browser developers who choose to implement their own features, or ignore parts of the standards. This explains why not all browsers render our pages in the same way. The best we can hope for is to ensure that our pages meet the published standards with the expectation that browser versions will become more consistent in their implementations. OUCS 34