Dreamweaver An Introduction

How to Use This Book 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.

The 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 IT Services called Computer8, where you can continue to 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 l ik e t h is .



Drop-down menu options are indicated by the name of the options separated by a vertical bar, for example F i l e | P r in t . In this example you need to select the option P r i n t from the F i le menu. To do this, click with the mouse button on the F i le menu name; move the cursor to P r i n t ; when Pr int is highlighted, click the mouse button again.



A button to be clicked will look l ik e t h is .



The names of software packages are identified like this, and the names of files to be used l ik e t h is .

ii

Software Used Dreamweaver CS6 Windows XP or Mac OSX Word 2010, Excel 2010 (PC) Word 2012, Excel 2012 (Mac) Firefox / Internet Explorer / Safari

Files Used In the P r ese n te r S it e folder fe ed back .html h ar dwar e .ht m l s o ftwar e .h tm l s ty le .h tm l t e c hn o log y . h t m l In the S u p po r tF i les folder c ha ir s . jp g Lor em Ipsum.docx P r ese n ta t io nZ en . pn g

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

Rewrite for CS5

4.1

October 2011

Dave Baker

Change to form script

5.0

September 2012

Dave Baker

Rewrite for CS6

Acknowledgements Thank you to Anna Pavelin for proofreading the document and road-testing the exercises.

Copyright

This document is made available under a Creative Commons AttributionNonCommercial-NoDerivs CC BY-NC-ND licence by Dave Baker who asserts his right to be identified as the author. Note that some images used in the document and presentations are copyright of their owners and may be subject to different copyright conditions. Where possible this has been noted in the text. If an error in attribution/copyright has been made, please contact the author who will be pleased to make the necessary corrections. Screen shots in this document are copyright of Adobe.

iii

Contents 1 Introduction ...............................................................................1  1.1. What You Should Already Know ......................................................... 1  1.2. What You Will Learn ........................................................................... 1  1.3. What is Dreamweaver? ....................................................................... 1  1.4. Where can I get a copy of Dreamweaver? .......................................... 2  1.5. Windows or Mac OSX?....................................................................... 2 

2 Some Background ..................................................................... 3  2.1. The web and HTML............................................................................ 3  2.2. HTML 5 and CSS 3 ............................................................................ 4  2.2.1. HTML ......................................................................................................4  2.2.2. CSS ..........................................................................................................4 

2.3. The development process .................................................................. 4 

3 Site planning ............................................................................. 6  3.1. Accessibility ........................................................................................ 7 

4 The Dreamweaver environment ............................................... 8  5 Defining a site ......................................................................... 14  6 Creating web pages .................................................................. 17  6.1. What is HTML? ................................................................................. 17  6.1.1. And XHTML? ........................................................................................ 18 

6.2. The importance of ................................................................ 18  6.3. Adding content................................................................................. 18  6.4. What are hyperlinks? ....................................................................... 24 

7 Library Items........................................................................... 28  7.1. Assets panel ...................................................................................... 28  7.2. Using library items ........................................................................... 29 

8 Templates................................................................................ 34  8.1. Editable regions ............................................................................... 34  8.2. Nested templates ............................................................................. 35 

9 Using images in web pages ..................................................... 41  9.1. Where should I keep my images? .....................................................41  9.1.1. Image management .............................................................................. 41 

9.2. Inserting images ...............................................................................41  9.3. Image quality and image size .......................................................... 45  iv

9.4. Dreamweaver’s image editing tools................................................. 45 

10 Using tables in web pages ..................................................... 50  10.1. Accessibility .................................................................................... 50  10.2. Tables for data................................................................................ 50 

11 Using Live View ..................................................................... 54  12 Publishing a web site ............................................................. 56  12.1. Setting up a remote site .................................................................. 56  12.2. Synchronising remote and local web sites ......................................61  12.2.1. Dreamweaver issues – Cloaking and mark-up ................................. 64 

13 What Next? ............................................................................ 67  13.1. Other Dreamweaver sessions ......................................................... 67  13.2. Computer8 ..................................................................................... 67  13.3. IT Services Help Centre ................................................................. 67  13.4. Downloadable Course Materials – the ITLP Portfolio .................. 67  13.5. Reference Material ......................................................................... 68 

v

Table of Exercises Exercise 1  Setting up the Dreamweaver environment ......................... 10  Exercise 2  Defining a web site in Dreamweaver ................................... 15  Exercise 3  Creating a web page .............................................................19  Exercise 4  Linking web pages .............................................................. 25  Exercise 5  Creating and using a library item ....................................... 30  Exercise 6  Creating a template............................................................. 36  Exercise 7  Inserting an image .............................................................. 42  Exercise 8  Adapting an image .............................................................. 47  Exercise 9  Creating a table for data ...................................................... 51  Exercise 10  Using Live View ................................................................ 55  Exercise 11  Putting (publishing) a website .......................................... 57  Exercise 12  Synchronising local and remote sites ............................... 62  Exercise 13  Cloaking folders ................................................................ 65 

vi

Dreamweaver: An Introduction

TWAB

1 Introduction Welcome to the course Dreamweaver: An Introduction. This booklet accompanies the course delivered by University of Oxford IT Services, 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 email from your teacher or from [email protected]

1.1. What You Should Already Know This session is the first of three that cover the use of Adobe’s Dreamweaver web site development tool. 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 the teaching rooms 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. You do not need to know anything about Dreamweaver. It would be useful, but not essential, if you know a little about HTML.

1.2. What You Will Learn In this session we will cover the following topics:  Site planning  

Why use Dreamweaver The Dreamweaver environment

 

Defining a web site Creating web pages, templates and library items

 

Linking web pages Using and optimising images

 

Creating tables Publishing web pages to a server

Topics covered in related Dreamweaver sessions, should you be interested, are given in Section 13.1.

1.3. What is Dreamweaver? This course uses Dreamweaver CS6. Superficially this is similar to earlier versions and indeed some of the techniques covered in this and later sessions are applicable to earlier versions. However version CS6 has improved support for the latest standards for HTML (HTML 5), cascading style sheets (CSS 3) and using JavaScript to add interactivity to web pages through its Spry framework. Dreamweaver is one of the most popular web site development environments. It not only helps you create correctly formed web pages, but it also enables you to publish and manage your web pages on a web server.

1

Oxford University IT Services

TWAB

Dreamweaver: An Introduction One of the most powerful features of Dreamweaver is that it can be used in either a ‘design view’, much like a word processor, or a ‘code view’ where we see the underlying structure of the pages, or both. This means that you do not need a deep understanding of the technical issues that lie beneath a web page, but if you do, you can still ‘tinker’ with the code.

1.4. Where can I get a copy of Dreamweaver? Colleges and departments are able to buy Dreamweaver from the IT Services online 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.5. Windows or Mac OSX? Dreamweaver is essentially the same on Windows and on Apple Mac computers. There are some differences in a few of the dialogs, particularly when opening and saving files, but the core of the program is the same. The screenshots in this book were created on a Windows PC, but Mac users should have no trouble using them. Where there are significant differences, they will be highlighted in the text.

IT Learning Programme

2

Dreamweaver: An Introduction

TWAB

2 Some Background 2.1. The web and HTML You probably already know that web pages are written in a computer language called HTML (Hyper Text Markup Language). However, this is an oversimplification; your web browser (Firefox, Internet Explorer, Safari and others) expects to be sent pages composed mainly of HTML, but the original source can be in other formats, such as XML, which get translated to HTML when required. In fact many web pages don’t exist at all until you ask for them; they are built ‘on the fly’ by a program or database when you request them. In these Dreamweaver sessions we will only consider HTML based pages. In later sessions we will also look at Cascading Style Sheets (CSS) and JavaScript both of which can sit alongside our HTML and allow us greater control over the ‘look and feel’ of our pages. Luckily, Dreamweaver can hide most of the detail of this from us – unless we decide otherwise.

Figure 1 Requesting a web page Figure 1 shows the process that happens when the user of a web browser requests a particular web page, perhaps by typing in a URL such as www.it.ox.ac.uk/itlp or perhaps by clicking on a link in a web page. The request finds its way through the Internet (we don’t need to concern ourselves how!) to the appropriate web server. Web servers hold copies of web pages (or can generate them), and send back the appropriate HTML page. Many HTML pages also require other data in order to work, for example CSS describing how the page is styled, JavaScript to add interactivity on the page, and perhaps images and/or multimedia content; these are also sent by the web server. When the browser has received the HTML and other data, it ‘renders’ them to produce the page we see on the screen.

3

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

2.2. HTML 5 and CSS 3 The web is continually evolving, and as part of that process the languages and tools used to deliver content also change.

2.2.1. HTML At the moment we are in a transition period between the widespread use of the current versions of HTML (4.01) and xHTML (1.0 Transitional) and the adoption of the proposed HTML 5 (and xHTML 5) standards. There are significant benefits in the proposed changes to ‘5’, particularly for multimedia content, and there is increasing support for this in the most popular browsers. The recommendation is where possible to write your pages in HTML5 taking care to test in the browsers most likely to be used by your audience.

2.2.2. CSS A similar situation exists with the cascading style sheet (CSS) language. Currently many web pages are styled using CSS 2, but CSS 3 is being actively developed and supported. CSS2 is primarily a style description language with some layout features. CSS3, amongst other benefits, will provide much more sophisticated features for layout. CSS3 is not universally supported, but you should be aware that it will soon be the de facto standard. Dreamweaver CS6 supports common CSS 3 features and you should use these where appropriate, again testing in your audience’s preferred browsers.

2.3. The development process Clearly, in order that our web pages can be sent out to the web browser when requested, the pages need to be on the web server. We rarely create web pages directly on a web server. More often we produce the pages locally on our own computer and then copy the pages on to the web server. The copy process is variously referred to as ‘publishing’ or ‘uploading’ or ‘putting’ the files on the web server. Until your web pages are published in this way, only you can see your pages as you develop them on your own computer. However, Dreamweaver enables you to preview how your web site will work. It can also manage the publishing process, making it easy to ensure that you have the correct, current versions of your web pages on the web server.

IT Learning Programme

4

Dreamweaver: An Introduction

TWAB

Figure 2 The development process The usual flow of the development process is shown in Figure 2. Pages are created and edited on your local computer. Using Dreamweaver and a selection of popular browsers you preview exactly how these local pages will appear. Testing involves checking that the links and any interactivity work correctly. This can be done on your computer, and often is, but for critical web sites you may actually have a test web server which exactly duplicates the final environment, without making your pages visible to anyone else. When you are satisfied with the preview and test, going back to edit the pages if necessary, you publish the pages to the server, or ‘remote’ computer. At a later time you may want to ‘download’ or ‘get’ the current pages from the web server and update them locally. Often you keep local copies of published pages so that you can modify them and republish them without having to get them from the server each time.

5

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

3 Site planning Creating an informative, interesting and attractive web site is no easier than creating resources in other media. It is a mistake to think that content originally destined for print can simply be converted to HTML and made into a web page. You will be aware yourself that the way we interact with material on a screen is different to how we use printed resources. Visitors to our web pages will expect to find what they are looking for quickly and they are unlikely to be willing to spend time scrolling down a page containing lots of text. If they cannot find what they want, they expect a clear, logical way of navigating to a more relevant page. Creating succinct web pages that are linked together in a helpful way is a skill that is worth acquiring. The IT Learning Programme runs occasional sessions that cover ‘writing for the web’. In the first instance, you should avoid the temptation of sitting in front of Dreamweaver and simply typing away. Spend some time with pencil and paper, or even better with a whiteboard and marker pens, and sketch out two designs: Page design. At this stage, colours and typefaces are less important than the general structure; we can use style sheets to make changes to the overall appearance later on. What does need to be decided is how you will divide up the content on a page. These ‘divisions’ will become important when we later start applying styles. Typically you might have the following divisions on a page:  Banner area for your department or college logo  Navigation menu for quick access to main parts of your web site  

Main content Footer for copyright and contact details

However, you may want to divide your content into two or more divisions – perhaps summary and detail. Or have a ‘news’ area on each page, or you may decide you will have a second navigation menu. You might also sketch a rough layout of your page design, although the exact positioning of the divisions can be changed using CSS later. Site design. You should decide what pages you want on your site and how they should be grouped together. Of course you could, using links on your pages, connect every page to every other page, but this spider’s web of connections rarely helps visitors understand the content and structure of the site. Better is to group your pages logically and allow your visitors to navigate between groups and then within a group. In these sessions we will be working on a small site, for which we have the following designs:

IT Learning Programme

6

Dreamweaver: An Introduction

TWAB

Figure 3 Page and site designs for our web site

3.1. Accessibility It is important that our web pages are accessible. Accessibility is used here in its broadest meaning; not only are we concerned about making our web pages available to visitors with different sight or hearing needs, but at the same time we should aim to make the pages easy to navigate and easier to understand for all visitors. Writing for the web is unlike writing for other print media, mainly because your users will have different expectations. They will want to 

Scan your pages quickly, ideally without having to scroll; most visitors will not read your pages from start to finish.



Achieve a particular purpose; most visitors have a question they want answered, or a task they need to complete.



Get what they want quickly, without undue searching.

In fact, structuring your web page content has more in common with tabloid newspaper articles than with books or reports – although perhaps without the sensationalism! Headlines and titles direct your attention to the right part of the page, followed by short, succinct sentences and paragraphs. Important information is summarised at the beginning of the article (usually the top of the page in our case) and then expanded as necessary further down. We don’t have room for a detailed discussion here, but the IT Learning Programme offers sessions on ‘writing for the. In many countries there is legislation covering accessibility of web pages. In the UK the relevant legislation is: 

The Disabilities Discrimination Act (DDA, 1995)



Special Educational Needs and Disability Act (SENDA, 2002)

7

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

4 The Dreamweaver environment Dreamweaver is designed to help with all aspects of developing a web site, and so the number of toolbars, panels and other options available can be quite daunting for the new user. Helpfully, Dreamweaver is very customisable and those features which are not useful to you can be hidden away until needed. Figure 4 (overleaf) shows a possible layout of the Dreamweaver screen. As you can see, it is very busy, and it is unlikely that you would use such a cluttered layout, but it does show the most important areas: 1. Menu options. Most of the features and tools within Dreamweaver have a menu entry. The more common ones often have a keystroke short cut as well. 2. Tabbed toolbar. There are a number of different toolbars in Dreamweaver. You are likely to use just a small subset of them routinely, and so you can collect these together on a ‘favourites’ toolbar if you want to. 3. Tabbed list of open files. You will usually be working on several pages of your web site at the same time. The tabbed list enables you to quickly move from one to the other. 4. Document toolbar. This toolbar enables you to view your web pages as either code (i.e. HTML, CSS, etc.) or as it will appear in a browser, or both. 5. Coding toolbar. Dreamweaver can be used as a very sophisticated HTML and CSS editor, where you directly interact with the code. The tools on this toolbar help you manage the code view. 6. Document window - Code view 7. Document window - Design view These two views work together. As you select and/or change the page in one view the equivalent part of the page changes in the other view. If you are new to HTML, it is a very good way of getting a feel for how a web page that you design in the Design view is constructed in HTML. 8. Page status. Here you can see how large your page is and get an indication of how long it might take to download in a browser. It also gives you a way of quickly selecting a particular part of your page structure, such as a table or a paragraph. 9. Properties panel. This shows details about the currently selected content in the document window. The exact layout of the Properties panel depends on the type of content; the properties for an image are different to the properties of text for example. 10. Results panel. This collection of panels gives the results of various tasks that you might ask Dreamweaver to perform. For example, if you do a global find and replace, the results panel will list the lines where changes were made. It also gives you access to about a dozen reference manuals included with Dreamweaver covering the HTML, CSS and other web development languages. 11. Panel groups. A collection of panels, each with its own focus. For example, there is a panel that shows the organisation of all the files for your web site. Another panel gives details of any styling you have used. Yet others help you manage assets such as images and colours.

IT Learning Programme

8

Dreamweaver: An Introduction

TWAB

Figure 4 The Dreamweaver window 9

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

Exercise 1

Setting up the Dreamweaver environment

In this exercise you will see how to set up the Dreamweaver environment to suit the way that you like to work.  Open up Dreamweaver  Investigate the standard screen layouts  Use the preferences dialog to adapt Dreamweaver behaviour  Define the preferred web browsers to be used  Adjust the size and position of commonly used panels  Save the workspace Task 1 Open up Dreamweaver

Step 1 Find the Dreamweaver icon Windows users: Click on the S t a r t button. Select A ll Pr og rams | Ad obe D es ign Pre m iu m | Ad ob e Drea mw eav er Mac users: Open a Finder window, and in the A p p l ica t io ns folder there is a Dreamweaver folder containing the icon. Double click on the icon.

Step 2 Look at the work space. You should recognise some of the features labelled in Figure 4.

Task 2 Investigate the standard screen layouts

Step 1 In the menu bar at the top of the Dreamweaver window, click on the drop-down labelled D E S I G N ER . Click on one of the entries and see that the layout changes. Repeat this for another layout.

Step 2 Select the CLASSIC layout. This will help those of you using previous versions of Dreamweaver. It is the layout we will use for this session.

Task 3 Use the preferences dialog to adapt Dreamweaver behaviour

Step 1 Windows users: Use Ed it | Pr e fer enc es to display the Pr e fer enc es dialog (Figure 5). Mac users: Use D r ea mw eave r | Pre fer enc es to display the Pr e fer enc es dialog (Figure 5).

IT Learning Programme

10

Dreamweaver: An Introduction

TWAB Step 2 Click on the S p e ll in g d ic t io nar y drop-down near the bottom of the dialog. Select E n g lis h ( U n it e d K in gdo m)

Step 3 In the Ca tego ry list at the left of the dialog, select A c c e s s ib i l it y .

Step 4 If necessary, click to put ticks against the following accessibility options: F or m o b ject s F r a mes M e d ia Imag es

Figure 5 The Preferences dialog Step 5 Select New D ocu me n t from the C a te go ry list.

Step 6 Make sure you have the following specified: D e fau lt d oc um en t H TM L D e fau lt e x te ns io n .html D e fau lt D oc um en t Typ e H TM L 5

Task 4 Define the preferred web

Step 1 Select Prev ie w in Brows er from the C a teg ory list

11

Oxford University IT Services

TWAB

Dreamweaver: An Introduction browsers to be used

Step 2 You should see two entries in the Browser list. Click on F ir eF ox to select it, and put a tick in the Pr imary bro wser box. Windows users: Click on IExplore to select it, and put a tick in the Sec on dary b rows er box. Mac users: Click on S a f a r i to select it, and put a tick in the Sec on dary b rows er box.

Step 3 Windows users: With IEx p lore still selected, click on Edit . In the Edit Browser dialog, change the name to Internet Explorer v8. Click O K

Step 4 Click O K to close the P r e fe r e nc es dialog.

Task 5 Adjust the size and position of commonly used panels

Step 1 Identify the D a tab ases panel at the right of the Dreamweaver workspace.

Step 2 Click on the panel management button of the D a taba ses panel title bar.

at the right

Select C los e T ab Gr oup from the menu that appears.

Step 3 Identify the Fi le s panel. Click and drag on an empty part of the panel banner (Figure 6) to position the panel elsewhere on the screen.

Figure 6 The panel handle Step 4 Windows users Adjust the size of the F ile s panel by clicking and dragging on the panel edges. Mac users Adjust the size of the F ile s panel by clicking and dragging on bottom right-hand corner of the panel.

Task 6

Step 1 Explore the behaviour of the Collapse to Icons button at the top right of the F i les panel (Figure 7).

IT Learning Programme

12

Dreamweaver: An Introduction

TWAB

Figure 7 The Collapse to Icons button Task 7 Save the workspace

Step 1 Use W in dow | W o r k p ac e L ay o u t | N e w W or k s pa c e to display the N e w Wo rks pace dialog.

Step 2 Name the layout as [your name] Layout and click O K .

Step 3 Switch back and forward between your layout and other layouts using the drop-down selector in the Dreamweaver menu bar

Step 4 Make sure you select the C la ss ic layout before continuing with the rest of the exercises.

13

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

5 Defining a site The collection of files and folders on your own computer that make up the web site you are developing is referred to by Dreamweaver as ‘the site’. You may have several sites, each of which is a separate web site that you are developing or maintaining. Defining a site is an important first step and although the site definition can be changed at any time in the future, getting it right at the start can save you time. There are many parameters we can supply when defining a site to fine tune how it behaves, but initially there are three items of information that we need to supply: 

The site name. This can be anything you like and is used purely to help you identify the site from a list of sites that you might be working on.



The local site folder that will contain all of your web pages and support files. This folder may have a collection of folders and sub folders within it if necessary.



The local site folder that we will use as the default location for the images we use in our web site.

If you already have some files that you want to use, it is a good idea to collect them together in a folder, and use that folder as your site folder. Within the folder, you can have whatever folder structure makes sense; typically you will have at least one folder in there to hold the images for the web site. If you do not have any existing files, you can create the site folder as part of the site definition process.

IT Learning Programme

14

Dreamweaver: An Introduction

Exercise 2

TWAB

Defining a web site in Dreamweaver

In this exercise you will identify the name and folder of the web site that you will be creating. This is known as ‘defining the site’.  Open the Site Setup dialog to define a new site  Select the folders for the Presenter site Task 1 Open the Site Setup dialog to define a new site

Step 1 From the menu at the top of the screen, use S it e | N ew S it e to display the S ite Setup dialog (Figure 8).

Figure 8 The Site Setup dialog Task 2 Select the folders for the Presenter site

Step 1 In the S ite N am e text box, enter Presenter

Step 2 Use the folder icon to the right of the L oca l S ite fo ld er text box to display a folder dialog box. Navigate to the Pres en ter Site folder in the H Dr ive and double-click on it to select it. Click Selec t (or click C hoo se on the Mac)

Step 3 In the list at the left of the S ite Se tup dialog, click on Adv anc ed Se ttin gs . Select the L oc a l I n fo entry from the expanded list.

15

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Step 4 Use the folder icon to the right of the Default Images folder text box to display a folder dialog box. Double-click on the image s folder to select it. (If the folder didn’t already exist, you can create it using the C r e a te N ew F o lde r button at the top of the dialog).

Step 5 Click Selec t (or click C hoo se on the Mac)

Step 6 Click Sav e to complete the site setup. The files panel should change to reflect the contents of the P r ese n te r S it e folder.

IT Learning Programme

16

Dreamweaver: An Introduction

TWAB

6 Creating web pages Dreamweaver has two ways that you can create web pages. If you are familiar with HTML you can develop your web pages in the Code View which shows the HTML (or ‘code’) that underlies the web page. This does suppose that you are familiar with the way HTML works, although Dreamweaver can give you a lot of help along the way. Alternatively, you can use the Design View. In this view Dreamweaver shows you how the page will look in a web browser, much as a word-processing program shows you how your printed page will look. The design view is often referred to as being a WYSIWYG view – What You See Is What You get, although more accurately it is WYSIWYNG – What You See Is What You Nearly Get! Alongside the design view, there is also the Live View. This uses an actual web browser built into Dreamweaver to show exactly how the page will be displayed. This browser is based on WebKit, the web browser engine that is currently used by Apple’s Safari and Google’s Chrome web browsers and so it is a very fair representation of how the page will be seen by your visitors. In Live View you can also interact with your page (just as in a browser) to see how it will behave – for example you can follow links to other pages. In this session we will mostly use the Design View, but feel free to dip into the Code View if you know HTML or if you want to see how the page is built.

6.1. What is HTML? HTML (Hyper Text Markup Language) describes how the web page should be ‘rendered’, or displayed, by the web browser. It is a mixture of HTML and the actual content of your page, with the HTML ‘tagging’ the content to describe what sort of content it is. There are two types of HTML tag. Most tags have two parts: an opening part and a closing part, which surround some content. Examples are: This is a level 1 heading

and This is a paragraph

It is up to the web browser (Internet Explorer, Firefox, etc.) exactly how tagged content should be displayed. If we want more control, we have to resort to using Cascading Style Sheets (CSS), of which more another time. The second type of tag does not surround content, but instead instructs the web browser to do something. One of the most common of this type of tag is the image tag:

Here, the browser is being instructed to display the image file m y P ic t u r e . jp g with a height of 50 pixels. The information inside the tag is a list of attributes that describe exactly what and how the tag is to be used. There can be many attributes (or sometimes none!). There are many different tags but, in the design view, Dreamweaver hides them from us, putting in the correct tags and attributes as and when we tell it to include different types of content. Dreamweaver includes a full reference for every HTML tag – it is available under the R e fer enc e tab in the R e su lts panel (W in dow |R e fer ence ).

17

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

6.1.1. And XHTML? More and more you will hear the term XHTML (eXtensible Hyper Text Markup Language). XHTML is not very different to HTML, except that the guidelines for its use are more rigorously enforced by browsers and compliance checking tools. The good news is that Dreamweaver will create XHTML for you instead of HTML, and unless you have good reason not to, you should produce all new pages using XHTML. There is a preference setting for this that was covered in Exercise 1.

6.2. The importance of One HTML tag that is too often overlooked is . This tag is used to give a title to the page that is used by most browsers to: 

Identify the web page in the browser window.



Use as bookmark text when visitors bookmark a page

If you do not supply a then the page will be given a title of ‘U n t it le d pag e ’. Not only is this unhelpful to your visitors, it will also give an immediate impression of a lack of attention to detail. Luckily Dreamweaver provides a simple way of giving a page a title (see Exercise 3). You just have to make sure you use it!

6.3. Adding content By far the easiest way of adding content to a page is in the Design View. In this view, we leave it to Dreamweaver to place the correct HTML tags in the correct place, based on how we define our content. In the Design View we simply use Dreamweaver as we would a word-processor, making use of the properties panel to identify content as headings, paragraphs, lists, etc., as appropriate.

IT Learning Programme

18

Dreamweaver: An Introduction

Exercise 3

TWAB

Creating a web page

In this exercise you will create a simple web page.  Create a new page  Set the page title  Save the document  Insert an image  Add some text  Insert some existing text  Adjust the text formatting  Create a bulleted list  Copy text within a page  Save and preview the web page Task 1 Create a new web page

Step 1 Use F i le | Ne w to display the N ew D oc um en t dialog (Figure 9)

Step 2 Select Blank Page on the left. Select HTML as the P ag e T y p e Select for the L ay ou t

Step 3 Click C r e a te . A blank web page should be created. If you can see text in the main window, click on the D es ign button at the top of the page.

Figure 9 The New Document dialog

19

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Task 2 Set the page title

Step 1

Task 3 Save the document

Step 1

In the T it le box at the top of the document window, replace U n t it le d D oc ume n t with: Presenter Site Select File | Sav e As to display the S a v e As dialog. Change the filename to s am p le .h tm l Click Sav e .

Task 4 Insert an image

Step 1 On the Dreamweaver I n s er t toolbar click on the C om mo n tab to display the common Insert objects (Figure 10).

Figure 10 The Common tab of the Insert toolbar Step 2 Click on the Image button

to display the

S e le c t Im ag e So urc e dialog.

Step 3 The image we want is already in the images folder for the site. Navigate to the folder and select the Pr ese n terMak in g Sens eLo go .g if image(Error! Reference source not found.) Click O K (or C hoos e on a Mac).

IT Learning Programme

20

Dreamweaver: An Introduction

TWAB

Figure 11 The Select Image Source dialog Step 4 If you have set the accessibility options (See Exercise 1), you will be prompted for the I m ag e Tag A c c e s s ib il ity A t tr ib u t es. For the A lt e r n a te t ex t, type Presenter Making Sense logo Click O K

Task 5 Insert some text

Step 1 Click to the right of the image to position the text cursor after the image. Press ENTER to create a new paragraph.

Step 2 Type the following text: Home | Technology | Images Notice that we are using the vertical bar symbol to separate the words. (We will turn this text into a navigation menu in a later session)

Step 3 Press ENTER to create a new paragraph. Task 6 Paste in some existing text

Step 1 In the Su ppo r tF i les folder in the H : Dr iv e , doubleclick on the L o r e m Ips um . do c x document to open it in Microsoft Word.

21

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Step 2 Windows users: Use CTRL+A to select all of the text Use CTRL+C to copy all of the text Mac users: Use CMD+A to select all of the text Use CMD+C to copy all of the text Close Word.

Step 3 Back in Dreamweaver, use Edit | Pas te Spec ial to display the Pas te Sp ec ial dialog (Figure 12).

Figure 12 The Paste Special dialog Step 4 Select the T ex t w ith s truc ture option Make sure the C lea n u p Wo rd par ag ra ph s pacin g option is NOT selected. (If you do not do this, all the text is placed in one paragraph) Click O K .

Task 7 Adjust the text formatting

Step 1 Click on the word Lorem on the first line. In the P r o per t ie s P an e l, select H ea d in g 1 from the F or ma t drop down list.

Task 8 Create a bulleted list

Step 1 Click after the first paragraph of text, and press ENTER to create a new paragraph.

Step 2 Type in the following, pressing ENTER after each line: Lorem ipsum Dolor sit amet Nam sagittis

IT Learning Programme

22

Dreamweaver: An Introduction

TWAB Step 3 Click and drag over the lines you have just typed to select them.

Step 4 In the Pro per tie s panel, click on the U n or der ed lis t . button

Task 9 Copy text within a page

Step 1 Click anywhere in the navigation menu you created earlier. In the Page Status bar (at the foot of the Design window), click on the < p> symbol. This will select the entire paragraph.

Step 2 Use Edit | Copy to copy the menu text.

Step 3 Click after the last paragraph of text, and press ENTER to create a new paragraph. Use Edit | Pas te to paste a copy of the menu.

Task 10 Save and preview the web page

Step 1 Use F i le | Sa ve to save the page.

Step 2 Click on the Prev iew button

in the document

toolbar. Select one of the browsers from the list. The browser will open and display the page. Close the browser to return to the document window.

23

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

6.4. What are hyperlinks? One of the fundamental principles of HTML documents, i.e. your web pages, is that you can create links from one page to another page (or even to another part of the same page). When a user ‘clicks’ on one of these links, the browser displays the linked-to document. We are all familiar with the convention adopted by most web browsers that links are underlined blue text. However, we also know from visiting web pages that sometimes links are styled differently or indeed not at all until you move the mouse pointer over them. We will leave the styling of hyperlinks for another time, and for the moment accept the default styling. Creating hyperlinks needs some care. Remember that we are designing our web pages on our local computer. If we are not careful, links we create will point directly at files on our computer and clearly visitors to our published web site will not have access to those files. To avoid this problem we do two things: 

Every file that we create should be placed within the site folder structure that we defined (see Exercise 2).



We use Dreamweaver to create the links for us

If we do these two things, Dreamweaver will make sure that our links are relative rather than fixed references with the result that they will work when we publish our pages. There are several ways to create links in Dreamweaver. All have their merits, but we will look at the two most common: 

Using the Hyperlink dialog. This has the advantage that you can supply extra information about the link, useful for making your pages more accessible.



Using the properties panel. This tends to be quicker and more convenient

You can use whichever method you are comfortable with.

IT Learning Programme

24

Dreamweaver: An Introduction

Exercise 4

TWAB

Linking web pages

In this exercise you will insert hyperlinks that can be used to jump to other web pages.  Open the sample web page  Create links using the Hyperlink dialog  Create links using the properties panel  Save and preview the web pages Task 1 Open the sample web page

Step 1 If the s a mple.html page is open, click on its tab in the D oc u me n t window to bring it to the front. Otherwise, open the s a mple.html file by doubleclicking on it in the F i les panel.

Task 2 Create links using the Hyperlink dialog

Step 1 Scroll to the top of the page. Double-click on Technology in the navigation list at the top of the page.

Step 2 Use Ins er t | Hy per link to display the Hy per link dialog (Figure 13).

Figure 13 The Hyperlink dialog

25

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Step 3 Complete the dialog as follows: T ex t: the text to be linked. Leave as Technology L in k : Click on the folder icon and use the Se le c t F i le dialog to select the s am p le_ t ech no lo gy .h t m l page. T ar ge t: Leave empty. This will cause the linked page to replace the current page in the browser. You could choose other behaviour (such as a new page, _blank) if needed. T it le : A description of the link. Here, type Hardware and software tools

This will appear as a floating tool tip in most browsers when the cursor hovers over the link. Access key: The short cut key for the link. Type t. In many browsers using the ALT key together with this key will be the same as clicking on the link. T ab I nd ex : Can be used to change the tab order on the page when in a browser. Leave blank here. Click O K .

Step 4 Again in the navigation list, double-click on Images to select it. Use the I n ser t | H ype r lin k method to link to s a m p le_ im a g e s . h tm l Use your own values for the T it le and Acc ess key

Task 3 Create links from the menu entries using the properties panel

Step 1 Scroll to the bottom of the page. Double-click on Technology in the navigation list at the bottom of the page. Click and drag the P o i n t - to - Fi l e icon

(to the right

of the L ink text box in the Pr ope r ties panel) and release the icon on top of the s am p le_ t ech no lo gy .h t m l file in the F i le s panel (Figure 14). Notice that this makes Technology a link to the s am p le_ t ech no lo gy web page, but without the extra features such as Title and Access key.

IT Learning Programme

26

Dreamweaver: An Introduction

TWAB

Figure 14 The Point-to-File icon in action Step 2 Again in the navigation list, double-click on Images to select it. Use the Po in t- to- F ile icon

and drag and drop on

to the s a mp le _ im ag es .h t m l file in the F i les panel.

Task 4 Save and preview the web pages

Step 1 Use F i le | Sa ve

Step 2 Click on the s a mple.html tab in the document window to bring the page to the front. Use the Preview button

to preview the page in a

browser. Check that the links work as expected.

Step 3 Close the browser to return to Dreamweaver.

27

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

7 Library Items By now you will have started to appreciate that setting up links, particularly those used to navigate within a web site, could become very tedious and difficult to manage. It’s time to introduce some of the tools in Dreamweaver which can help us save time and simplify the management and updating of the web site. If there is a section of a web page which we would like to reuse on other web pages we can use it to create a library item. We give the library item a name and we can use that named library item on any other page in our web site. Dreamweaver keeps track of everywhere that a particular library item is used. If we make a change to that library item, Dreamweaver makes that change to every occurrence of the item. 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 email 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.

7.1. Assets panel Before we look in detail at creating a library item, we just need to take a quick look at the Asset panel. Items which are likely to be used repeatedly, either within a page or on different pages, are regarded as ‘assets’ by Dreamweaver. Assets include images, colours, links to web sites (URLs), movies and library items. Whenever a new instance of one of these types of items is used on a web page, Dreamweaver adds it to its asset collection. Assets have their own Asset panel (Figure 15). To reuse an asset it is usually as simple as finding it in the panel and dragging it to where we want to use it on a page.

Figure 15 The Assets panel showing an image asset

IT Learning Programme

28

Dreamweaver: An Introduction

TWAB

7.2. Using library items Library items are easy to create. You can select any chunk of a page – in the code or design view – and click on the N e w L ibr ary I t e m button in the Library items section of 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. (Note: An asset 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. CSS styling is dealt with in another session) 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 As sets panel and click on the Ed it 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 P r o pe r t ies 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.

29

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

Exercise 5

Creating and using a library item

In this exercise we will create a library item for our navigation menu and then reuse it and see the effect of then changing it.  Open the sample web page  Select the upper navigation menu and save as a library item  Insert the navigation menu library item elsewhere on the page  Make a change to the library item  Open the software page and preview it Task 1 Open the sample web page

Step 1 If the s a mple.html page is open, click on its tab in the D oc u me n t window to bring it to the front. Otherwise, open the s a mple.html file by doubleclicking on it in the F i les panel.

Step 2 Make sure you are in the Des ign view. If not, click on the D es ign button in the D ocu me n t w in dow toolbar.

Task 2 Select the upper navigation menu and save as a library item

Step 1 Click into one of the entries in the navigation menu at the top left of the page.

Step 2 In the Page Status bar (at the foot of the Design window), click on the < p> symbol. This will select the entire paragraph.

Step 3 Click on the Assets tab in the F i le s panel. If the Assets tab is not visible, use W in dow | As se ts to display it.

Step 4 Click on the L ib r ary button

to display the

L ib r a r y I tem list. Click on the N ew L ib rary I t em button

at the

bottom of the Ass e ts panel.

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 O K if the dialog appears.

Step 6 The library item is added to the L ibr ary Item list ready for you to give it a name. Type navbar and press ENTER.

IT Learning Programme

30

Dreamweaver: An Introduction

TWAB Step 7 If the U p da te F i les dialog appears, click on U p da te .

Step 8 Single click on the n av b ar entry in the L ib r a r y 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 9 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.

Task 3 Insert the navigation menu elsewhere on the page

Step 1 At the bottom of the page, click anywhere in the navigation menu you find there. In the Page Status bar (at the foot of the Design window), click on the < p> symbol. This will select the entire paragraph.

Step 2 Use the DELETE key to delete the paragraph.

Step 3 Click and drag the n av bar library item into the webpage, dropping it at the end of the last paragraph.

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).

Step 5 Use F i le | Clo s e to close and save the web page.

Task 4 Make a change to the library item

Step 1 Click on the Assets tab in the F i le s panel.

Step 2 Double click on the n av ba r entry in the assets list. This will open the n av b ar library item in the D oc u me n t window.

Step 3 Click after the word Image s , type | About

31

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Step 4 Double-click on the word A b o u t to select it. Use the Pr ope r ties panel to turn this into a link to the s am p le_ abo u t .h t m l page. (You can do this using the Po in t to F ile button

)

Step 5 In a similar way, make the H om e entry a link to the s am p le .h tm l page.

Step 6 Use F i le | Clo s e Answer Y e s to save the changes. The U p da t e L ib r a r y I tem s dialog will appear (Figure 16).

Figure 16 The Update Library Items dialog Step 7 Click U p da te . The U p da te Pa ges dialog will appear to confirm the action. Click on C los e .

Step 8 You might like to consider why the other sample pages were not updated.

Step 9 Use F i le | C lo s e A ll to save and close all open pages.

Task 5 Open the Software page and preview it

IT Learning Programme

Step 1 In the F i les panel, click on the F i le s tab. Double-click on s a mp le .h tm l to display it in the document window.

32

Dreamweaver: An Introduction

TWAB Step 2 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.

Step 3 Use F i le | C lo s e A ll to close all open files.

33

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

8 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.

8.1. Editable regions 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 T e m p la t e button on the C o m mon toolbar, or through the menu system. Each region is given a name and is shown with a blue border in the design view. 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 or replace 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 E d ita b le R e g ion 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. First, you would create an editable region for a single item of your list (perhaps a heading, a paragraph and an image) and then select this editable 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 Mod ify | Temp la te pr op er ties 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 < im g> tag) but you want the ability to change one of the properties (perhaps the s rc property of the < im g > tag). Editable tag attributes enable you to do this.

IT Learning Programme

34

Dreamweaver: An Introduction

TWAB

8.2. 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 17).

Figure 17 Master and nested templates

35

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

Exercise 6

Creating a template

In this exercise we will create a template from an existing web page and set up editable regions on the page. We will then create some pages based on the template.  Open the sample page  Save the page as a template  Create an editable region for the heading  Create an editable region for the content  Save the template  Create new pages based on the template  Update the library item (and so the template)  Preview in a browser Task 1 Open the sample page

Step 1 Find s ample.html in the F i le s panel and double-click on it to open it in the document window.

Step 2 Make sure you are in the Des ign view. If not, click on the D es ign button in the D ocu me n t w in dow toolbar.

Task 2 Save the page as a template

Step 1 Use F i le | Sa ve As Tem p la te dialog (Figure 18).

Figure 18 The Save As Template dialog Step 2 The site should display the name that you gave your site when it was set up. In the Descript ion text box, type Standard content page Change the Save as text box to: PresenterMain Click Sav e .

IT Learning Programme

36

Dreamweaver: An Introduction

TWAB Step 3 In the Up da te L inks dialog, make sure you click Y e s . 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 Pr ese n terMa in .dw t. Also, in the F i le s tab of the F i les panel, a new T e mp la t es folder has been created, inside of which is the new Pr es en te rMa in.d w t file.

Task 3 Create an editable region for the heading

Step 1 In the Des ign view, select the heading Lorem Ipsum by clicking and dragging over it. In this case we did not use the T a g Se le c tor in the Page Status bar – we only want to be able to edit the text, and not the tag.

Step 2 Use In ser t | Tem p la te O b je c ts | Ed itab le Re g ion to display the N e w E d ita b le R eg io n dialog (Figure 19).

Figure 19 The New Editable Region dialog Step 3 In the Name text box, type: MainHeading (note – no spaces in the name). Click O K . Notice that the heading is now in a blue box, with the editable region name as a tab.

Step 4 Replace the words Lorem Ipsum in the editable region with: Type page title here

Task 4 Create an editable region for the content

Step 1 Select the existing paragraphs of content by clicking in front of the first character, holding down the Shift key and clicking after the last character.

37

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Step 2 Use In ser t | Tem p la te O b je c ts | Ed itab le Re g ion to display the N e w E d ita b le R eg io n dialog. In the Name text box, type: MainContent Click O K .

Step 3 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.

Task 5 Save the template

Step 1 Use F i le | Sa ve You will be prompted with a message about how the M a inH ea d in g editable region is set up. This is normal. If you are unsure what it means, ask the session teacher to explain. Click O K .

Task 6 Create new pages based on the template

Step 1 Use F i le | Ne w to display the N ew D oc um en t dialog.

Step 2 Choose Page from Template in the first column. Make sure P r e s e n t e r is selected in the S ite column. Select Pres en ter Ma in in the T e mp la t e column.

Step 3 Make sure that U pda te p ag e wh en temp la te ch an ges is ticked. Click on C rea t e .

Step 4 Replace the Heading text with: Welcome Replace the paragraphs with the following text: This web site is the place to find hints and tips about creating great presentations.

Step 5 You will not be able make other changes. Try it!

IT Learning Programme

38

Dreamweaver: An Introduction

TWAB Step 6 Use F i le | Sa ve As to save the page as in d ex . h tm l Use the Preview button

to preview the page in a

browser. Close the browser to return to Dreamweaver.

Step 7 Create three more pages based on the template in the same way: t e c hn o log y . h t m l im a g es .h tm l a bo u t .h t m l In each case change the heading to reflect the page name. It is up to you whether you replace the content text.

Step 8 Use F i le | C lo s e A ll to save and close the open pages.

Task 7 Update the library item (and so the template)

Step 1 If you preview the pages and try out the links, you will find they still point to our sample pages. We can easily fix this in one operation: Update the navbar library item which in turn updates the template which in turn updates the new pages!

Step 2 In the L ib r ary section of the Assets panel, doubleclick on the n a v ba r entry. This will open the library item.

Step 3 Click on each of the links in turn and use the Properties panel to update the links as follows: Home -> Technology -> Images -> About ->

in d ex . h tm l t e c hn o log y . h t m l im a g es .h tm l a bo u t .h t m l

The point to file method of creating links that we covered earlier is the easiest way to do this.

Step 4 Use F i le | Clo s e to save and close the library item. Click Yes in response to the Save Changes question.

Step 5 When the U pd a te L ibr ary I t ems dialog appears, click U pd a te .

39

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Step 6 In the Update Pages dialog put a tick in the box so that it also updates both L ib r ary ite ms and T e mp la t es (Figure 20). Click Start . Click C lose .

Figure 20 The Update Library Items dialog Task 8 Preview in a browser

Step 1 In the F i les Panel double click on the in dex .h tml page and press F12 to preview and test in a browser.

Step 2 Return to Dreamweaver and use File | Clos e All

IT Learning Programme

40

Dreamweaver: An Introduction

TWAB

9 Using images in web pages Most web pages use images, either as content or to add interest, decoration or identity to the web site. Including images should be a considered choice; there should always be good reason for using an image since they take time to download and can delay the rendering of a page by the browser. On slow connections to the Internet, large images can take so long to download that a visitor may decide to give up and go elsewhere. Some browsers allow users to turn off images, in which case blank, image sized spaces are usually displayed instead. Note that images can be used as hyperlinks if necessary; the process is very similar to creating hyperlinked text.

9.1. Where should I keep my images? Although we ‘insert’ an image into our web page when we are designing it, what we are actually doing is using the tag to tell the browser where the image file is to be found. It is the browser’s job to request the image and insert it into our page in the correct place at the correct size. This means that images need to be published in the same way as web pages. If the browser cannot find an image, it will usually put a small image placeholder on the page instead. If you have many images, it is a good idea to place them in their own folder within the site folder of course. You can identify the image folder that you want to use as part of the site definition.

9.1.1. Image management When you insert an image into a web page, you will typically have to make adjustments to the size and quality in order to optimise the time it takes to load the web page – important for users with slower internet connections. Making changes to images from within Dreamweaver often results in permanent changes to the image. You should make sure that you keep a copy of the original image so that you can go back to it and perhaps reuse it for a different purpose. There are a number of tools which can help you with managing images (in particular, cataloguing them), but this is beyond the scope of this course. You should note that it is common to reuse images within a web site. If you make a change to one instance of the image, those changes will appear on all the other instances.

9.2. Inserting images When you insert an image in a page, Dreamweaver will copy the image to the site folder or image folder if you have one, this will ensure that it gets published with the rest of the web site. If you are using an image that you have already used somewhere else on your web site, it will already be in your site folder structure and you can insert it from there. Dreamweaver gives a number of different ways to insert an image, but one of the easiest is to find the image in the F i le s panel and then drag it on to the page.

41

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

Exercise 7

Inserting an image

In this exercise we will learn how to insert images into a web page. Note that the images are really references to image files held elsewhere – they are not actually embedded into the page.  Open the images page  Change the editable text  Insert an image  Adjust the size of the image  Save and preview the web page Task 1 Open the images page

Step 1 Find imag es.h tml in the F i le s panel and double-click on it to open it in the document window.

Step 2 Make sure you are in the Des ign view. If not, click on the D es ign button in the D ocu me n t w in dow toolbar.

Task 2 Change the editable text

Step 1

Task 3 Insert an image

Step 1

Change the text in the Main Content editable region to: Images are an important element of most presentations. This section describes… Click to place the text cursor before the text you have just created. Press ENTER to create a new paragraph and click to again put the text cursor at the start of the M a inC o n t e n t area.

Step 2 Click on the C om mo n tab in the I n s e r t toolbar and click on the drop-down arrow to the right of the Imag es button

.

Select Image from the list to display the S e le c t Im ag e So urc e dialog.

Step 3 The image we want is in the Su ppo r tF ile s folder in the H Dr iv e . Navigate to the folder and select the c ha ir s .jpg image (Figure 21). Click O K (or C hoos e on a Mac).

IT Learning Programme

42

Dreamweaver: An Introduction

TWAB

Figure 21 The Select Image Source dialog Step 4 If you have set the accessibility options (See Exercise 1), you will be prompted for the I m ag e Tag A c c e s s ib il ity A t tr ib u t es. For the A lt e r n a te t ex t, type Empty chairs in a presentation setting Click O K

Step 5 In the F i les panel, notice that the image has been copied into the ima ges folder.

Task 4 Adjust the size of the image

Step 1 Click on the image to make sure it is selected. In the P r o per t ie s P an e l, click on the padlock symbol to the right of the W and H values to toggle it to the locked state.

Step 2 Change the width to: W : 400 The H value should also change to keep the image aspect ratio correct.

Step 3 Click on the tick that has appeared to the right of the W and H values. Note: this will permanently change the size of the image. Click O K in the warning dialog that appears.

43

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Task 5 Save and preview the web page

Step 1 Use F i le | Sa ve to save the page. Use the Preview button

to preview the page in a

browser. Close the browser to return to Dreamweaver.

IT Learning Programme

44

Dreamweaver: An Introduction

TWAB

9.3. Image quality and image size There is much to know about image quality, size and resolution, and the IT Learning Programme runs sessions on the use of digital images. Here we can only cover the subject briefly. When you insert an image in a web page it will typically be displayed at its native size, determined by its height and width in pixels. It may well be that this will not be the size you want. You can resize the image either by dragging its borders, or by changing the height and width values in the P r ope r t ies p an e l . However, this is not really resizing the image itself, but rather rescaling the image on the page. The same, full size image is being used (and so will be downloaded to the browser), but the browser is scaling it to the specified size. This means that a ‘resized’ image takes just as long to download as the original, because it is the original that is being downloaded! You may also notice that the quality of the image suffers; the rescaling operation within a browser is usually quite crude. This is particularly noticeable if you resize the image to be larger. If you need an image to be of a different physical size, you should ideally use a digital image editing program such as GIMP or Photoshop to change the size before you include it in your web site. Image editing programs give you complete control over the resizing so that you can obtain a good quality final image. Dreamweaver includes image cropping, resizing and optimisation tools and if used well these can produce acceptable results. Note that permanent changes are made to the image, so you should make sure that you have a copy before you make changes to an image – just in case!

9.4. Dreamweaver’s image editing tools Dreamweaver has a limited number of image editing tools available to you. You will have more control over changes to an image if you use an image editing tool such as Adobe Photoshop or GIMP, but the Dreamweaver tools enable quick, simple changes to be made. 

Edit in Photoshop: If you have Photoshop installed, you can click this button to open the selected image in Photoshop to carry out more sophisticated editing.



Edit image settings: There are a number of different formats of image that can be used in web pages. The advantages of each type are beyond the scope of this course, but this button allows you to convert between image formats if you think it would be advantageous (in quality and/or download speed).



Update from original: If you have used Photoshop to provide an image, it can be inserted into Dreamweaver as a Smart Object. This means that Dreamweaver and Photoshop co-operate over the use of the image, in particular you can get back to the original version of the image using this button.



Crop: Use this button to display a mask over the image that you can adjust to hide unwanted areas. This will make permanent changes to the image in the site images folder.



Resample: If you resize an image on the page, you can use this button to get Dreamweaver to re-examine the image and optimise it

45

Oxford University IT Services

TWAB

Dreamweaver: An Introduction for the new size. This will make permanent changes to the image in the site images folder. 

Brightness and contrast: You can use this tool to adjust the brightness and/or contrast of the selected image. Be aware that you are judging the image on your monitor; it may look different on other monitors. This tool will make permanent changes to the image in the site images folder.



Sharpen: Some images can benefit from being ‘sharpened’, especially if they have been resized. This will not correct out of focus images, it simply enhances the boundaries between light and dark areas. This will make permanent changes to the image in the site images folder.

IT Learning Programme

46

Dreamweaver: An Introduction

Exercise 8

TWAB

Adapting an image

In this exercise we will make changes to the image to improve its suitability for the page.  Open the images page  Crop the image  Adjust the contrast and brightness  Sharpen the image  Save and preview the web page Task 1 Open the images page

Step 1 If the ima ges .h tml page is open, click on its tab in the D oc u me n t window to bring it to the front. Otherwise, open the im a ge s .h t m l file by doubleclicking on it in the F i les panel.

Task 2 Crop the image

Step 1 Click on the image to select it.

Step 2 In the P r o per t ie s P an e l, click on the Cr op button . If a message appears warning you that this will make permanent changes to your image, click O K . This will display a mask over the image.

Step 3 Click and drag the handles of the mask so that only the chairs are visible. Adjust the mask until you are happy with the result. Press the C r o p button

Task 3 Adjust the contrast and brightness

again to make the change.

Step 1 Make sure the image is selected.

Step 2 In the P r o per t ie s P an e l, click on the . B r ig h tn es s a nd C on t r as t button If a message appears warning you that this will make permanent changes to your image, click O K . This will display the Br ig htn ess /C on tr as t dialog (Figure 22).

47

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

Figure 22 The Brightness/Contrast dialog Step 3 Make sure there is a tick in the Prev iew box, so that you can see the effect of the changes you make. Adjust the sliders to achieve a better image. A B r ig h tn es s of 15 and a C on tr as t of 10 work well for this image.

Step 4 When you are happy with the look of the image click OK . This permanently changes the image.

Task 4 Sharpen the image

Step 1 Make sure the image is selected.

Step 2 In the P r o per t ie s P an e l, click on the Sharpen . button If a message appears warning you that this will make permanent changes to your image, click O K . This will display the Sharpen dialog (Figure 23)

Figure 23 The Sharpen dialog Step 3 Make sure there is a tick in the Prev iew box so that you can see the effect of increasing the S ha r p en value. Experiment with the slider. It is easy to apply too much sharpening! For this image a value of 1 is perhaps enough.

IT Learning Programme

48

Dreamweaver: An Introduction

TWAB Step 4 When you are happy with the look of the image click OK . This permanently changes the image.

Task 5 Save and preview the web page

Step 1 Use F i le | Sa ve to save the web page. Use the Preview button

to preview the web page

in a browser. Close the browser to return to Dreamweaver.

Step 2 Use F i le | Clo s e all to close all open files.

49

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

10 Using tables in web pages HTML was never perceived as being a means of specifying how content would be laid out on a web page; it was, and is, simply a way of marking up content so that a browser can tell what that content represents. The browser can then render content to distinguish one type of content from another, say a level 1 heading from a paragraph, but not apply any sophisticated styling or positioning. However, many graphic designers who turned to developing web pages, wanted to be able to specify exactly where something should be placed, just as they can for printed documents. They discovered that the table feature in HTML, meant for tabulating data, could be subverted into a page layout feature. The designers of Dreamweaver tried to accommodate both uses of the tag, data and layout, and this proved very successful. However, the tag is very limited, and for layout is rapidly being replaced by the use of Cascading Style Sheets (CSS). Dreamweaver still contains some table layout tools, which are useful for maintaining older web pages written in this way, but they should be avoided where possible and CSS used instead. CSS for positioning (and styling) is covered in a later session. Table page layout is not covered in this session.

10.1. Accessibility Tables can be difficult for visually impaired visitors to your site. Unfortunately Dreamweaver does not provide a great deal of guidance in making tables accessible, but at least make sure that you identify a header (row or column) and add a caption and a summary if necessary.

10.2. Tables for data Data tables have rows and columns, providing cells which can be merged together as necessary. A table optionally can have a header row and footer row, typically styled differently from the rest of the table, and a caption and/or summary. By default, the width of the columns (and so the cells) is left to the browser to decide. It typically tries to size a column to accommodate the largest cell entry, but it also takes into account the table width, which may itself depend on the width of the browser window. These free-flowing tables can be quite effective, changing as they do whenever a browser window is resized, but it is also possible to specify a fixed width for the columns and/or table, or widths based on percentages. All of this can be done for you by Dreamweaver. There are a number of ways of inserting a table in Dreamweaver, but they all lead to the table dialog where you can precisely define the table’s properties. If necessary, you can also create a table directly from existing data (see Error! Reference source not found.).

IT Learning Programme

50

Dreamweaver: An Introduction

Exercise 9

TWAB

Creating a table for data

In this exercise we will create a simple table that we can use to tabulate data or, as here, make comparisons.  Create a web page from the template  Insert a three columned table  Populate the table with data  Save and preview the web page Task 1 Create a new page based on a template

Step 1 Use F i le | Ne w to display the N ew D oc um en t dialog (Error! Reference source not found.). In the left hand column select P ag e fro m Te mp lat e . In the S ite column select the current site. In the T em pla t e column select Pr esen ter Ma in .

Step 2 Use F i le | Sa ve to save the file as s o f tw a r e . h tm l

Task 2 Change the editable text

Step 1 Change the text in the M a in H ea d ing editable region to Software Change the text in the Main Content editable region to: There are many different software applications that can be used to create presentations.

Task 3 Insert a three columned table

Step 1 Click at the end of the first paragraph. Type ENTER to create a new paragraph.

Step 2 Click on the C om mo n tab of the I n s e r t toolbar to bring it to the front. Click on the T ab le button

to open the T a b le

dialog (Figure 24)

51

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

Figure 24 The Table dialog Step 3 Set up the T ab le dialog options to be the same as shown in Figure 24 above. Click O K

Task 4 Populate the table with data

Step 1 Click into the top-left cell of the table. Type: Software Press the TAB key to advance to the next cell. Type: Computer Platform Press the TAB key to advance to the next cell. Type: Comment

Step 2 Complete the remainder of the table to resemble Figure 25 below.

IT Learning Programme

52

Dreamweaver: An Introduction

TWAB

Figure 25 The completed table Task 5 Save and preview the web page

Step 1 Use F i le | Sa ve to save the web page. Use the Preview button

to preview the web page

in a browser. Close the browser to return to Dreamweaver.

Step 2 Use F i le | Clo s e all to close all open files.

53

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

11 Using Live View Dreamweaver’s Design view does a reasonable job of showing you how a page will look in a typical browser. However, it is WYSIWYNG – What You See Is What You NEARLY Get! The Design view sometimes shows you more information than you would see in the browser (form and table outlines for example); sometimes it shows you less, and occasionally it gets the layout completely wrong. We can forgive Dreamweaver for this firstly because it is NOT a web browser, and secondly because there are many web browsers and each can potentially render our web pages slightly differently to other browsers. We have already met one solution to this problem – and it is the best – that is using the Pr e v iew in Bro wser button and then selecting a particular browser to display our page. You should have all the common browsers installed on your computer, at the very least: 

Internet Explorer



Firefox



Safari



Opera



Google Chrome

Of course this isn’t sufficient, and it isn’t possible to install, for example, Internet Explorer on a Mac computer in a way that is compatible with Dreamweaver. To overcome this, Adobe has introduced the A d o b e B r ows er Lab – on-line access to virtual browsers. This is covered in another session. A compromise which can help speed your development is to use Dreamweaver’s L iv e V iew .

Live View uses the WebKit browser that is built into Dreamweaver to display your page as if in a browser, complete with all the interactivity and link following that you would expect. WebKit is the code that currently forms the basis of Safari and Google Chrome, so it isn’t universal, but it is still very useful.

IT Learning Programme

54

Dreamweaver: An Introduction

TWAB

Exercise 10 Using Live View In this exercise we will see how Live View gives us a good indication of how our web pages will behave in actual web browsers.  Open the index.html page  View the page in Live view  Follow the link to the feedback form  Complete the form  Close Live view Task 1 Open the index.html page

Step 1 If the in d ex .h t m l page is open, click on its tab in the D oc u me n t window to bring it to the front. Otherwise, open the in d ex . h t m l file by double-clicking on it in the F ile s panel.

Task 2 View the page in Live view

Step 1 Click on the L iv e button in the D oc ume n t toolbar (Figure 26). For this simple page, you are unlikely to see very much difference in the layout.

Figure 26 The Live View button Task 3 Follow the link to the images page

Step 1 Move your mouse cursor over the I m a ge s link in the menu that you created in an earlier exercise. Notice that the cursor changes to a hand

.

Step 2 In Windows: Hold down the CTRL key and click on the Imag es link In Mac OSX: Hold down the CMD key and click on the Imag es link

Task 4 Close Live View

Step 1 It is important that you remember to exit from L iv e V iew , otherwise you will not be able to edit your pages! Click on the L iv e button to return to Dreamweaver’s D es ign view.

55

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

12 Publishing a web site Your web pages can only be accessed by others when they are on a web server. You will probably develop your web site locally, on your own computer or a department server and then need to transfer it to a web server. This process is usually referred to as ‘publishing’ your pages, but you will also see the terms ‘putting’ or ‘upload’ and ‘getting’ or ‘download’ used. To publish pages you need to have the correct access to your web server. Your local IT support department will give you the details. Here we will publish our pages to your personal web space provided by IT Services. They are then accessible from anywhere on the Web. If you are a member of the University and have a University card, you are entitled to some web space associated with your Single Sign On (SSO) account. For more information, and details of how to activate your personal web space, visit: www.oucs.ox.ac.uk/web/personalwebpages/personalguide.xml In the following exercises we will assume that you are publishing your pages to your personal web space. If you don’t have any web space, or you are not sure how to set it up, ask your session teacher for advice.

12.1. Setting up a remote site Before we can publish our web site, we need to give Dreamweaver the information it needs to identify and access your web space. There are a number of different ways that Dreamweaver can access your web space. The three most common are: 

FTP: This method opens a communication link with the web server and uploads and downloads the files using the File Transfer Protocol.



Local/Network: This assumes that you already have a connection to your web space and can view it as a drive or folder.



WebDAV: This is a protocol much like FTP, but is more sophisticated in operation. For example it can support a check out/check in system so that two people cannot be working on the same page at the same time. WebDAV has to be setup on the server. It is more common in academic institutions than elsewhere in the industry, but it is not universal.

We will focus on the FTP method as it is widely used not only within the University, but also by commercial web space providers. You may need to manage more than one web site on the same server, perhaps even within the same web space on the server. This could certainly be the case with your University web space – you may have a small web site for your research and another, separate, web site for your hobby. Dreamweaver is a site based tool. You can have many sites defined and switch between them, but it is a little clumsy if you need to manage your web space more globally. For that it can be easier to use a dedicated FTP tool such as Filezilla. Filezilla is open source and free to download. It can be used to manage the whole web publishing process, but to do so we would lose the benefits of Dreamweaver. Here we will use it purely to set up a folder in our web space that we can then use as the host folder for our published web site managed through Dreamweaver.

IT Learning Programme

56

Dreamweaver: An Introduction

TWAB

Exercise 11 Putting (publishing) a website In this exercise we will first set up a folder for our published web site in our SSO web space using Filezilla. We will then use Dreamweaver to publish the site to the folder. NB: You will need to have activated your University web space in order to complete this exercise.  Start Filezilla  Log into your SSO web space using Filezilla  Create a new folder  Log out  Set up a remote site for the Presenter web site  Publish the files on the remote site  Test the site Task 1 Start Filezilla

Step 1 Filezilla is already installed on the teaching computers. On your own computer you may need to visit the Filezilla web site at: www.filezilla.net to download it and install it.

Step 2 On Windows computers, find the Filezilla icon by clicking on S t a r t and looking in the list of programs. On Mac computers, open a F in d er window and find Filezilla in the A p p lic a t io ns folder.

Step 3 Double click on the Filezilla icon to display the Filezilla window (Figure 27)

Figure 27 The Filezilla window

57

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Task 2 Log into your web space using Filezilla

Step 1 Enter the following details into the connection toolbar at the top of the Filezilla window: H os t linux.ox.ac.uk Us ername Your Oxford Single Sign On (SSO) identifier, usually of the form abcd1234 Pass word Your SSO password Port 22 If you do not have an account, ask your session teacher for guidance.

Step 2 Click Quickconnec t . If you do not see a series of success messages in the panel at the top of the Filezilla window, ask for guidance.

Task 3 Create a new folder

Step 1 On the right-hand side of the Filezilla window (headed R em o te s it e ), you should see a series of folders. Expand the folder that corresponds to your Username.

Step 2 In your folder you should see two folders, c g i and p ub l ic _h t ml Your web sites have to be published within the p ub l ic _h t ml folder. Double-click on the p ub l ic _h t m l folder. In the upper part of the R e m o t e s it e panel, In Windows: right-click on the p u b lic _h t m l folder. In Mac OSX Ctrl-click on the p u b l ic_ ht m l folder. From the menu that appears, select C rea te d ir ec tory .

Step 3 In the Cr ea te d irec tory dialog, replace the highlighted text with: presenter Click O K . If the presenter folder doesn’t appear in the list, click on . the R e fr esh th e F ile and Fo ld er lists button

Task 4 Log out

Step 1 Close Filezilla by In Windows: Using F ile | Ex it . In Mac OSX: Using F ile z i lla | Q u it F i le z il la This will log you off and close Filezilla.

IT Learning Programme

58

Dreamweaver: An Introduction Task 5 Set up a remote site for the Presenter web site

TWAB Step 1 In Dreamweaver, use S ite | Mana ge S ites to display the Ma na ge Sites dialog.

Select the Presenter site and click on the Ed it th e c urr en tly s e lec ted s ite button

.

Step 2 Click on Serv ers at the left of the dialog and then click on the + button towards the bottom of the dialog. This will display the Se rve r d e fin itio n dialog (Figure 28 below). (Note IT Services require an SFTP connection)

Figure 28 The Server Definition dialog Step 3 Set the following: Server Name C onn ec t u sin g F T P Ad dress Port Us ername

SSO web space SFTP linux.ox.ac.uk 22 Your Oxford Single Sign On (SSO) identifier, usually of the form abcd1234 Pass word Your SSO password R oo t d ir ec to r y public_html/presenter

Click on T es t . If you do not get a success message, carefully check the information you have typed. You may want to remove the tick from the Sav e option. If you do so, you will need to supply this when you want to connect to your web space. Click Sav e .

59

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Step 4 In the S ite Se tup dialog, click Save . If an advisory message appears, click O K . In the M an ag e S it es dialog, click D on e .

Task 6 Publish the files on the remote site

Step 1 In the F i les panel click on the C onn ec ts to re mo te ho s t button

.

If requested, give your password, click O K .

Step 2 In the F i les panel, click on the P u t button

.

Confirm that you want to P u t the entire site by clicking OK . A progress dialog will be briefly displayed.

Step 3 Once finished, click on the E x p an d button

in the

F i le s panel toolbar. The display will change to show two panels: R e m o te S ite on the left, L oc a l fi le s on the right. Confirm that your files have been published.

Step 4 Click on the C o lla pse

button in the toolbar to

return to the normal Dreamweaver view.

Task 7 Test the site

Step 1 Outside of Dreamweaver, open a browser such as Firefox.

Step 2 In the address bar, type: users.ox.ac.uk/~abcd1234/presenter replacing abcd1234 with your SSO identifier. Note the ~ character.

Step 3 Close the browser to return to Dreamweaver.

IT Learning Programme

60

Dreamweaver: An Introduction

TWAB

12.2. Synchronising remote and local web sites As soon as you have published a web site, you have two versions of your files to manage. On the web server you have your published files that your visitors interact with. On your local computer you have working copies of the same files. You will need to make changes to the web site. Typically you will make these changes to the local copies of the pages, test them out, and then want to replace the current pages on the web server with the new pages you have developed locally. This process is called synchronising your web site. Dreamweaver makes synchronisation remarkably easy. It will check the modification dates of local and remote versions of all of your web site files and then recommend which ones need to be transferred – you can choose whether to go ahead or not. This synchronisation process works both ways. If for some reason a newer version of a page exists on the web server (perhaps updated by someone else) it will download it to your local site. Indeed this is a convenient method for obtaining all web pages from an existing web site that you are about to start managing in Dreamweaver. If you prefer, you can use a more manual method for managing files between local and remote copies of your web site. Recall that the F i le s panel has an E x p an d button. If you use this E x p an d button, you will see a split window on the left of which is a view of your files and folders on the remote server and on the right a local view. You can drag and drop files and folders between the two views, but it is then your responsibility to get them in the right place!

61

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

Exercise 12 Synchronising local and remote sites In this exercise we will make a change to a page and insert a new image. We will then use the synchronize feature so that these changes are published.  Open the Presenter site  Open the images page  Make a change to the content  Connect to the remote site  Synchronise the site  Visit the site to check the upload was successful Task 1 Open the Presenter site

Step 1 If you have any pages open, use F ile | Clos e All to close them.

Step 2 Use Site | Manage Sites to open the M an ag e S ite s dialog.

Step 3 Select the Presenter site from the list. Click D o ne .

Step 4 Check that at the top of the F i le s panel the text boxes say: Pr ese n ter L oc a l v ie w

Task 2 Open the images page

Step 1

Task 3 Make a change to the content

Step 1

In the F i les panel, double-click on the imag es .h tml to open the page in the D oc um en t window In the MainContent editable region, add a second paragraph: For an interesting discussion that looks in depth at how powerful images are in presentations, take a look at Garr Reynolds book, Presentation Zen.

Step 2 In the Dreamweaver I n s er t toolbar, click on the

C om mo n tab.

Use the image button

to insert the image

P r ese n ta t io nZ en . pn g after the new paragraph. You can find the image in the Su ppo r tF i le s folder in the H Dr ive

Step 3 If prompted for A lt e r n a te text, type: Cover of the book Presentation Zen Click O K .

IT Learning Programme

62

Dreamweaver: An Introduction

TWAB Step 4 Use F i le | Sa ve to save the file. Use F i le | C lo s e A ll to close all open files.

Task 4 Connect to the remote site

Step 1 Click on the C onn ec t button

in the F ile s panel

toolbar. Give your password if prompted.

Task 5 Synchronise the site

Step 1 In the F i les panel, select the top level folder, S ite – Pr ese n ter .

Step 2 Click on the Sync hr on ize button

in the F i les

panel toolbar to display the S y nch on iz e f i le s dialog (Figure 29). Set the values: Sync hr on ize D ir ec t ion

E n t ir e ‘ Pr es en te r ’ S it e Pu t new er file s to remote

Click Prev iew .

Figure 29 The Synchronize Files dialog Step 3 The Sync hro n ize dialog will be displayed (Figure 30). This displays all the files that will be uploaded, and gives you the opportunity to change the action for individual files. Click O K .

63

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

Figure 30 The Synchronize dialog Task 6 Visit the site to check the upload was successful

Step 1 Outside of Dreamweaver, open a browser such as Firefox.

Step 2 In the address bar, type: users.ox.ac.uk/~abcd1234/presenter replacing abcd1234 with your SSO identifier. Note the ~ character.

Step 3 Close the browser to return to Dreamweaver.

12.2.1. Dreamweaver issues – Cloaking and mark-up If you have looked closely at the HTML of your pages, especially those that use library items and templates, you may have noticed that they are scattered with HTML quote tags containing Dreamweaver specific text, for example:

This is how Dreamweaver tracks those parts of a web page that it is managing for you. Clearly it would be a mistake to edit these directly. This Dreamweaver specific mark-up is embedded within the HTML of the page, and so when the page is published the mark-up is still there. Most browsers allow visitors to see the source code for a page (in FireFox you use the V iew | Page Sour ce option) and so they can see the Dreamweaver markup as well. This is not usually a problem, but it does inflate the page size unnecessarily and so makes it marginally slower to download. It is possible to remove the Dreamweaver markup from your web pages before publishing them. Dreamweaver provides two methods C om ma nds | C le an U p X H TM L which works one page at a time, and M od if y | Tem p la t es | Ex por t W it h o u t Mar k up which works on the whole site. These options have to be used with care; usually the risk outweighs the benefit! A more useful feature is being able to specify which files in your site are not to be published. For example, our template files and library item files are required during the development, but are not needed on the web server. Dreamweaver provides a cloaking feature where we can identify one or more folders that should not be published. IT Learning Programme

64

Dreamweaver: An Introduction

TWAB

Exercise 13 Cloaking folders In this exercise we will cloak the templates and library items folders so that they are not published to our web server.  Remove the Templates folder from the Remote site  Cloak the templates and library items folder  Make a change to a library item  Synchronise with the remote web site  Visit the site to check the upload was successful Task 1 Remove the Templates and Library items folders from the Remote site

Step 1 In the F i les panel toolbar, click on the E x p an d button to change the display to show the R em o te S it e (left-hand) and L oc a l F i le s (right-hand) panels.

Step 2 In the Remote Site (left-hand) panel single click on the T e mp la t e s folder to select it. In Windows: Right-click on the T e mp la t es folder In Mac OSX: CMD + click on the T em pla t e s folder Use Edit | Delete . When asked to confirm that you do want to delete the selected files, check you did select the correct folder, and then click Yes .

Step 3 Also delete the L ib rary folder in the R em o te S it e panel.

Step 4 Return to the normal Dreamweaver view by clicking on the toolbar. on the Collapse button

Task 2 Cloak the Templates folder

Step 1 In the F i les panel, single click on the T e mp la t es folder to select it.

Step 2 Click on panel management button at the top right of the F i les panel. In the menu revealed, use S it e | C lo ak in g | C loak . An information dialog will appear. Click O K .

Step 3 Notice that a diagonal red line appears across the icons of the files and folders that are cloaked.

Step 4 In the same way cloak the L ib r ary folder.

65

Oxford University IT Services

TWAB

Dreamweaver: An Introduction Task 3 Make a change to a Library item

Step 1 In the F i les panel, in the L ib r a r y folder, double-click the n av bar library item to open it in the D oc u me n t window.

Step 2 Change the word T ec hno lo gy to Technologies.

Step 3 Use F i le | Sa ve . The U p da t e L ib r a r y I tem s dialog will be displayed. It lists all the files that will be updated by the change. Click U p da te .

Step 4 The U p da te Pa ges dialog will appear. Put a tick in the T e m p la te s tick box. Click Start and then click C los e .

Step 5 Use F i le | C lo s e A ll , clicking Yes (or Sav e ) if prompted to save the files.

Task 4 Synchronise with the Remote site

Step 1 In the F i les panel, click on the top-level folder (S ite – Pr ese n ter )

Step 2 Click on the Sync hr on ize button

in the F i les

panel toolbar to display the Sy nchr on iz e file s dialog (Figure 29). Set the values: Sync hr on ize D ir ec t ion

E n t ir e ‘ Pr es en te r ’ S it e Pu t new er file s to remote

Click Prev iew .

Step 3 The Sync hro n ize dialog will be displayed. This displays all the files that will be uploaded - you can change the action for individual files. Notice that the library item you changed is not included. Click O K .

Task 5 Visit the site to check the upload was successful

Step 1 Outside of Dreamweaver, open a browser.

Step 2 In the address bar, type: users.ox.ac.uk/~abcd1234/presenter replacing abcd1234 with your SSO identifier.

Step 3 Close the browser to return to Dreamweaver.

IT Learning Programme

66

Dreamweaver: An Introduction

TWAB

13 What Next? We hope you have found this book useful. If you attended a taught session you will get sent an email with a link to a web page to give us anonymous feedback. We always value your feedback and use it to improve our sessions. You may like to consider the following options to follow on from this session.

13.1. Other Dreamweaver sessions There are currently three Dreamweaver sessions offered by the IT Learning Programme:  Dreamweaver: An introduction. This session.  Dreamweaver: Using CSS for styling and layout. We cover the use of cascading style sheets to add styling and layout to your web pages, and so preserving the logical structure of the content. This helps to make your pages accessible.  Dreamweaver: Including interaction in web pages The Spry framework which gives an easy way of adding interactivity to your web pages using JavaScript. We also look at adding prewritten JavaScript code (such as you might find on the web) to our own pages. Finally we see how we might add Java applets, Flash assets and video to a page. You may also be interested in the following:  Web Publishing: Writing for the Web  Web Publishing: An introduction to CSS  Digital Images: Capture, correct and control

13.2. Computer8 We encourage everyone to work at their own pace. This may mean that you don’t manage to finish all of the exercises for this session. If you would like to complete the exercises while someone is on hand to help you, come along to one of the Computer8 sessions that run during term time. More details are available from www.it.ox.ac.uk/courses/

13.3. IT Services Help Centre The IT Services Help Centre is open from 08:30 am to 8:30 pm, Monday to Friday. You can use the facilities to work through the exercises in this booklet. The Help Centre is also a good place to get advice about any aspect of using computer software or hardware. You can contact the Help Centre on (2)73200 or by email on [email protected]

13.4. Downloadable Course Materials – the ITLP Portfolio These course materials are available through the ITLP Portfolio, at http://portfolio.it.ox.ac.uk Each course pack includes the course handbook in pdf form and a zip folder of the exercise files that you need to complete the exercises. Archive versions of the course book may also be useful if you use an earlier version of the software. The ITLP Portfolio helps you find articles, videos, resources and weblinks for further IT study. For some resources, you will be asked for your Oxford (SSO) username and password. 67

Oxford University IT Services

TWAB

Dreamweaver: An Introduction

13.5. Reference Material An excellent book that describes in detail how to use the many features in Dreamweaver is: Dreamweaver CS6: The Missing Manual, McFarland D.S., 2012, O’Reilly, ISBN13: 978-1-449-31617-4 A more technical reference is: Adobe Dreamweaver CS6 Bible, Lowery, J., 2012, Wiley, ISBN-978-1-118-17063-2

IT Learning Programme

68

Dreamweaver: an introduction

Your safety is important

Dave Baker

Where is the fire exit? Beware of hazards:

[email protected]

Tripping over bags and coats

Please report any equipment faults to us Let us know if you have any other concerns

IT Learning Programme

Your comfort is important The toilets are along the corridor outside the lecture rooms The rest area is where you registered The swivel seats are adjustable You can adjust the monitors for height, tilt and brightness

Today’s topics:

DW CS6

What you might already know…

Some background The Dreamweaver environment Defining a site Creating and linking web pages Library items and templates Using images in web pages Using tables on web pages Publishing your site

1

‘Ask and you shall receive…’

Some background

Request

DW

Browser Web Server

‘Internet’ HTML CSS

Developing a web site is cyclical

JavaScript

Image

A web page has a defined structure My Travels Page

World Travels

Create

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod

Edit

Remote

Local Test

Publish

Preview

Aenean fermentum convallis orci. Ut non mi. 

A web page has a defined structure

When you have seen two HTML tags, you have seen them all 

Paired

My Travels Page

Head

Hello world



World Travels Document Lorem ipsum dolor sit amet… Body

Aenean fermentum convallis…   

Start tag – attributes – contents – end tag



Unpaired

2

Plan your page layouts

Site planning

DW

1 2

1 2 3 4 5

3

Banner Navigation menu Content 2nd navigation menu Footer

4 5

Plan your site structure

Accessibility – it’s the law

Welcome

Style

Personal

Hardware Feedback

Technology Software

Special Educational Needs and Disability Act

Disabilities Discrimination Act

Some of the jargon…

DW

The Dreamweaver environment

Insert toolbar Document code design Panel groups Files panel Properties panel Results panel

3

Design view or code view or both?

Defining a site

DW

Defining a site: an important first step

DW

Dw site Keep out

Exercises:

DW

1 Setting up the environment 2 Defining a web site 3 Creating a web page 4 Linking web pages

DW

Demo: Creating and linking pages

Library items and templates

4

Library items help you manage repeated content across pages

Templates help you manage pages with similar ‘look and feel’

Library Items Some content Other content New content

Template Nested Template

DW

Demo: Library items and templates

Exercises:

DW

5 Creating library items 6 Creating a template

You must optimise your images

Using images x

400

x

300

2736

DW

3648

100 KB 3 MB

Resample

5

Organise your images in a folder

Using tables Images

Images

Dw site Keep out

Tables should be used for data

DW

Tables can be used for layout but should they?

Land

Some very small text repeated over and over. Some very small text repeated over and over. Some very small text repeated over and over. Some very small text repeated over and over. Some very small text repeated over and over. Some very small text repeated over and over. Some very small text repeated over and over. Some very

Water

Are tables accessible?

?

? ?

DW

Demo: Using images and tables

6

Exercises:

DW

7 Inserting an image 8 Adapting an image Optional 9 Creating a table for data

Your site needs to be on a ‘remote’ server in order to be seen

Publishing

DW

The remote file structure is a mirror of the local file structure

Create Edit

Remote

Local Test

Publish

Preview

Remote

Usually the remote is not an exact mirror – spot the differences

DW

Local

Demo: Publishing

7

What next?

Exercises:

DW

Optional 10 Using Live View 11 Publishing a website 12 Synchronising local and remote websites 13 Cloaking folders Optional

Dreamweaver: Styling and layout using CSS

Dreamweaver: Including interactive content

Cascading style sheets Positioning using CSS

pitr | openclipart.org Public Domain

© Microsoft

Microsoft clipart © Microsoft

© Apple

Microsoft clipart © Microsoft

© O’Reilly publishing

Spry widgets Javascript Audio and video Java

Microsoft clipart © Microsoft

Microsoft clipart © Microsoft

[email protected]

Dave Baker cc BY‐NC‐SA

warszawianka | openclipart.org Public Domain

This presentation is made available by  Dave Baker under a Creative Commons licence: Attribution‐NonCommercial‐NoDerivs CC BY‐NC‐ND  Note: Some of the content may be subject to different licencing conditions

8