introduction to excel formulae & functionsccaabaa/is/documents/manuals/d… · web viewtext...

UCL EDUCATION & INFORMATION SUPPORT DIVISIONINFORMATION SYSTEMS

Dreamweaver MX 2004

Creating and Maintaining Websites

Part one

Document No. IS-105

ContentsWhat is Dreamweaver?......................................................................................1

Terminology 2Getting Started..................................................................................................3

The Dreamweaver MX 2004 environment 3Websites and the Site Panel..............................................................................6

What is a Website? 6Local and remote sites 6Setting up your sites in Dreamweaver – site definition 7

Planning Your Website....................................................................................10Site structure 10Maintenance needs 10Common Web page features 10

Creating Web Pages........................................................................................11Creating a new Web page 11Opening an existing Web page 11Saving a Web page 12Document window toolbar 12Page Properties 13

Text..................................................................................................................14Properties Inspector 14Paragraph formatting 15Styles 15Text formatting 15Spell-checking 17Bulleted and numbered lists 17Horizontal rules 17

Hyperlinks.......................................................................................................18Linking to another page 18Linking to a page on the Internet 19E-mail links 20Creating links from thumbnail images 20Removing a link 20

Images.............................................................................................................21Inserting an image 21

Tables..............................................................................................................22Tables for data 22Inserting a table 22Adding table data 23Inserting images into a table 23Selecting 23Merging and splitting cells 24Tables for layout 25Nested tables 26

Managing Your Website..................................................................................27Uploading and downloading 27Site map 28

Accessibility.....................................................................................................30Text and colour schemes 30Links 30Images 32

Document No IS-105 06/07/2006

Tables 32Appendix 1.......................................................................................................33

Setting up your remote folder at UCL 33Connection settings 34Accessing personal homepages 34

Learning More.................................................................................................35Getting help with Dreamweaver 35

IntroductionThis workbook has been prepared to help anyone wishing to create or maintain a Website using Dreamweaver. It is recommended that anyone working with websites using Dreamweaver should attend both Part One and Part Two in order to produce and maintain professional looking websites. This guide can be used as a reference or tutorial document. You can download the tasks and accompanying files and the example files used in this manual from the IS web site at: www.ucl.ac.uk/is/documents/

Document No IS-105 06/07/2006

What is Dreamweaver?Macromedia Dreamweaver MX 2004 is a powerful WYSIWYG1 tool for constructing Websites. It offers an intuitive working environment for building cross-platform Websites. Although Dreamweaver generates the necessary HTML code for you, it doesn’t alter existing HTML code by inserting irrelevant tags that do nothing but increase the file size. It is part of the Macromedia suite of Web design products which includes Director, Flash, Fireworks and Authorware. In addition to basic Web page design, Dreamweaver provides a number of other features including the ability to: Manage your Website(s) and links effectively. Incorporate text and graphics easily. Set up and use templates. Take advantage of cascading style sheets. Add rollover images and tables. Integrate Flash and other Macromedia products smoothly. Add and modify behaviours. Insert and manipulate layers. Create timelines which allow you to have moving objects on your page. Create framesets and navigation bars. Create dynamic Web pages, with content extracted from data in databases.

In this course you will learn how to: Set up and manage a local and remote Website. Change and control Web page settings. Use the Properties Inspector and Insert Bar. Insert images and text. Create tables. Create links.

Also covered are the basic principles of good Web page design.

1 What You See Is What You GetUCL Information Systems Tables1

TerminologyThis is a list of some of the most common abbreviations and terms you may come across when starting to use Dreamweaver and working on Web pages:

Abbreviation/Term

Longhand Definition

WWW World Wide Web A collection of sites that offers various resources available through the HyperText Transfer Protocol.

Internet - A collection of sites and resources available through various network protocols – more wide-ranging than the WWW.

Browser - A program used to access Websites and resources on the Internet.

URL Uniform Resource Locator

An address to a Website or resource on the World Wide Web.

HTTP HyperText Transfer Protocol

A means of transferring data across the Internet – most often used by browsers.

FTP File Transfer Protocol A means of transferring data across the Internet – generally used for uploading files to Websites

Broadband - A transmission facility having a bandwidth sufficient to carry multiple voice, video or data channels simultaneously.

ADSL Asymmetric Digital Subscriber Line

Broadband Internet connection.

Webpage - A Web page is an HTML file that has a specific URL and is accessible via the WWW.

Website - A collection of related Web pages and files linked together on a computer connected to the Internet.

Homepage - The main page or first page of a Web site.

HTML HyperText Markup Language

The main language used to write Web pages.

XML eXtensible Markup Language

Another more advanced language used on Web pages.

CSS Cascading Style Sheets A method of applying consistent styling and formatting to Web pages and sites.

Jpg / Jpeg Joint Photographic Experts Group (pronounced j-peg)

A format for compressing images (usually photographic).

Gif Graphic Interchange Format

Another format for compressing images (usually images with flat areas of colour).

Appendix 1 UCL Information Systems 2

Bmp BitMap A Windows image format which should not be used on the Web.

Mpg / Mpeg Moving Picture Experts Group (pronounced m-peg)

A standard for digital video and audio compression.

Frames - Frames divide Web pages into multiple, scrollable regions (these are no longer recommended).

database driven pages

- Web pages whose content is derived from a linked database.

dynamic Web pages

- Non-static Web pages - i.e. those that change depending on user input, may also be database-driven.

UCL Information Systems Tables3

Panel group

Files Panel

Document toolbar

Insert Bar

Tick this box if you would not like to see this screen on startup again.

Choose to create a new HTML page from the New Window

Getting Started1. From the Start menu, select Programs. (On WTS, select Software A-H. (This

range of letters may vary in future.)2. From the submenu choose Dreamweaver, then Dreamweaver MX 2004.Helpful hint:The first time you open Dreamweaver, you may be prompted to choose whether you want to work in the old Dreamweaver 4/MX or the new Dreamweaver MX 2004 environment. This workbook is written for the Dreamweaver MX 2004 environment.

The Dreamweaver MX 2004 environmentWhen entering

Dreamweaver MX 2004 the screen should be similar to the one shown here. Select HTML to create a new HTML page.

You should now see the following screen:


Properties Inspector

Document window


Expand Button

The Insert Bar and the Properties Inspector should be displayed. If they are not shown, do the following:1. From the Window menu, choose Insert and/or Properties.2. The Insert bar and the Properties Inspector should then be displayed.

Insert BarThe Insert Bar displays the most common objects you are likely to place on your Web page such as images and tables. If you cannot see the Insert Bar go to Window | Insert. The buttons available are:

By clicking on the Common drop-down list on the Insert Bar, you can change the contents of the bar or choose Show Tabs to have some of the other bars listed along the top. Some other available bars are detailed below:

Bar/Tab ButtonsCommon Images, e-mail links, date, tables, templates etc.Forms Form controls such as radio buttons, check boxes, lists, etc.Text Characters not found on the keyboard such as em-dash, euro sign,

copyright etc. as well as line breaks and non-breaking spaces.HTML Shortcuts for entering data in the head section of the page, such

as keywords and a description (meta tags). You can also insert a horizontal rule (line) from this bar.

Document windowThe Document window shows the current document. You can choose any of the following views: Code view, a hand-coding environment for writing and editing HTML,

JavaScript, server-language code —such as PHP, Microsoft Active Server Pages (ASP) or ColdFusion Markup Language — and any other kind of code.

Split view allows you to see both Code view and Design view for the same document in a single window.

Design view, a design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see viewing the page in a browser.

For more information on views see page 17.

Properties InspectorThe Properties Inspector changes appearance according to what is selected within the Dreamweaver window. It is used to change the properties of text and other objects on the page such as tables or images. It can be expanded to show more property options by using the Expander Button. Examples of the Properties Inspector are shown below:Contracted view:


E-mail Link

Tables

Image Media

Date

Template

You can change the bar view from here.

Expanded view:

Panel groups Panels provide a range of tools to aid site design. The Properties Inspector and Insert Bar are both examples of panels, as is the Site Panel is explained below. Other panels will not be covered in this course but include the Design, Code and Application Panels which are all displayed by default in the panel groups on the right-hand side of the workspace.All panel groups can be expanded or collapsed by clicking on the panel group title, and can also be docked or undocked with other panel groups. They can also be opened and closed from the Window menu.


Websites and the Site PanelSites are fundamental to Web design, and Dreamweaver makes things easy for you by allowing you to manage your sites via an interface similar to Windows Explorer (the file management program in Microsoft Windows).

What is a Website?You may know how to access various Websites – the UCL Website or the BBC Website, for example – but for the purposes of Web design we need to know what a site physically is.In fact, it's fundamentally just a folder of files, stored on a computer connected to the Internet. When you browse the Web, your Web browser sends messages across the Internet, requesting files from a computer. For example, if you type the URL http://www.ucl.ac.uk/is/training/index.htm your browser knows which computer to ask because of the domain name (www.ucl.ac.uk), which is associated with a specific computer at UCL – the Web server. It knows which file to request from that computer, because the rest of the URL specifies the

file's path and name (index.htm, in the training folder, which itself is in the IS folder).

Normally a Website contains Web pages and files with some common theme – for example UCL’s Website contains files relating to UCL. Within the UCL site there are other, smaller sites, for individual departments etc. Files for the smaller sites are organised in subfolders of the main UCL site folder.

Local and remote sitesWhen designing and editing Web pages it’s a good idea to use a local copy of the site to make changes so the live site remains unaffected until you are satisfied with your results. Your changes can then be sent across to the Web server where they will be accessible by all. The figure below illustrates this process. The local computer contains a copy of the files and folders which make up the Website, and we can transfer files in either direction between the local computer and the Web server. The local copy of the Website is simply called the local site, and the copy on the Web server is called the remote site. You can see that the local site is effectively a mirror image of the remote site.


Browser 1. HTTP request for http://www.ucl.ac.uk/is/training/index.htm

2. index.htm file is sent to browser

“Put”/”Upload” a file to the web server

“Get”/”Download” a file from the web server

Make changes to the files on your computer

Local Site Remote Site

The standard method for sending files from one computer to another like this is called File Transfer Protocol, or FTP. Dreamweaver takes care of the FTP procedure, as well as allowing you to edit your local files. This means that the entire process of creating and maintaining your Website can be managed within one application.The folder which contains the entire site is called the root folder. In our example the local root folder is called copy of www.ucl.ac.uk. This folder can be stored anywhere on your computer, and called anything you like. When you add Web pages and files to your site, you will need to save them into the local root folder, as only files inside this folder will be uploaded to the remote site.


So where is my remote site?If you are working on departmental Web pages, then you’ll need to speak to your departmental Web co-ordinator (or the UCL Web team) to find out where the departmental Web pages are stored. They will either be stored on the UCL Web server (as a site within the main UCL site), or on a Web server run within your department.If you are intending to work on personal Web pages, you can use space provided by UCL. Every member of staff, and every student, may use a special folder within their UCL account named html.pub as their remote site (see Appendix 1 for further details).If you are using an alternative (such as a commercial Webspace provider) your pages will be stored on a Web server run by whoever provides the Webspace. They will be able to provide you with details of how to connect to their Web server.

Setting up your sites in Dreamweaver – site definitionCreate the local root folderSince the local site is simply the contents of a specific folder on your computer, you can use Windows Explorer to create your local root folder. (Open Windows Explorer and select the drive on which you want to create your local root folder, e.g. C:, R: or N:. Select New from the File menu, then select Folder, and give the folder an appropriate name.) Alternatively you can create the local folder through Dreamweaver, as will be described shortly.

Site definitionThe site definition specifies a local site and a remote site. If you are working on several Websites you will need to create a new definition for each site. 1. From the Site menu, select Manage Sites, and then click the New button

and choose Site. The Site Definition dialog box should appear as below:

2. In the Category list make sure that Local Info is selected. In the Site Name text box type in an appropriate name for your site, for example, Training Site.

3. Your Local Root Folder can be located by clicking on the Browse icon. Locate the folder that is to be the root of your site (the one which you


Advanced tabBrowse icon

created in Windows Explorer). If you have not already created your local root folder, you can do this by clicking on the Create New Folder icon in Dreamweaver's file chooser.

4. Once you have found and opened the folder, click on the Select button to return to the Site Definition dialog box.

5. From the list of categories on the left choose Remote Info. Select FTP from the Access box and you should now see the following options:

6. To access the remote site of a departmental Website on the UCL server enter details as follows:

Server Access:

Choose FTP from the list

FTP Host: ftp.ucl.ac.ukHost Directory:

www

Login: [Your departmental Web account Login]

Password: [Your departmental Web account Password]

If you are working in your WTS account, or on a secure computer, you can check the Save box next to the Password box so that you don’t have to enter the password anew each time you use Dreamweaver. If you are using a public or shared computer, do not check the Save box. When you have entered the above information, you can click the Test button to check that you have entered the details correctly.Helpful hint:If you are using the UCL personal Web page server see Appendix 1 for connection details.


When you choose FTP from the Access drop-down box you will now see these options.

Choose Remote Info.

7. Click on OK to finish setting up your site definition.

To return to the Site Definition window at any time, choose Define Sites from the Site menu, and then click on Edit in the dialog box which appears.


Site PanelThe site is now shown in the Site Panel, which is in the Files panel group. This lets you choose between viewing the local site or the remote site (switch between the two using the drop down), or if you would like to see both sites side by side, click the Expand Panel button (press the same button again to revert to the more compact view).

The local view shows any files and folders which you have within the local root folder. At first, the remote site is blank, because we need to connect to the remote site. You can do this by clicking the Connect button on the panel’s toolbar, or alternatively by selecting Connect from the Site menu.Dreamweaver will attempt to connect to the remote site. If it is successful, the remote site will appear – either replacing the local files view or appearing in the left-hand panel of the expanded Site Panel. (If it is unsuccessful, a message will appear to tell you why it could not connect. Mistyping the settings or password problems for the remote site can often cause Dreamweaver to fail to connect.)

You are now ready to start work on creating your Web pages. We will return to the Site Panel later, when we are ready to upload the Web pages we have created to the remote site.

Helpful hint: Take a note of the local and remote settings which you have entered into the site definition in case you ever need to input them again. (Do not leave your site password lying around.)


Expand Panel buttonConnect button

Planning Your WebsiteSite structureThe structure of your site, in terms of the different folders and filenames you use, is important. As we saw earlier, the folder structure is reflected in the URL people will need to type in order to access your pages. Also bear in mind the following: Ordinary Web pages have filenames ending in .htm or .html (it doesn't

matter which; but it’s a good idea to be consistent). File and folder names must not contain spaces or symbols (except hyphens and underscores) and it is recommended to avoid using upper case letters. It is also a good idea to use short, meaningful names, so that the URLs will be easy to type and to pass on to others (e.g. over the phone).http://www.ucl.ac.uk/admissions/postgrad.htm is much better than

http://www.ucl.ac.uk/SECTION_TWO/Page-3.htm A Web page called index.htm or index.html has a special role as the index

page in a folder. If someone types the URL to access a folder on your Website without specifying the filename, for example: http://www.ucl.ac.uk/admissions/the page their browser will display is the index page: http://www.ucl.ac.uk/admissions/index.htm

A useful way to arrange a Website is in a hierarchy according to themes. For example, a departmental Website could have an admissions folder, containing two folders called undergraduate and postgraduate, as well as a research folder, which might contain a folder for each research group in the department.

It is a good idea to have a folder called images in your root directory. In this folder you will store the images which are to be displayed on your Web pages.

In any significant Website project, there will come a point in the future when new sections need to be added, or old sections enlarged. It is important that you plan a site’s structure before you create it. If you create a site, and then later decide to change the names of the folders and the locations of the files, any links which have been created to your pages (from other Websites) will need to be changed. Similarly, bookmarks to your pages stored in people's browsers will no longer work. Therefore it's advisable to create a good folder structure for your Website at the outset, and then to stick with it.

Maintenance needsThe bigger a Website is, the more maintenance it will need. If you're not expecting to have much time available for keeping your Website up-to-date, it is safest to create a relatively small site, and not to put information on it which will rapidly go out of date (e.g. “My next public lecture will be on the 13th...”). Similarly, it is probably unwise to create a News section on your site unless the section is going to be updated at least weekly with new items.

Common Web page featuresAppendix 1 UCL Information Systems 14

You will probably have noticed, while browsing the Internet, that there are some features which are common to a set of Web pages. An institution or company often has a common format for all of their pages, and certain pieces of information may be present on each page. Consider what your Website should have on every page – remembering that people might not see your page in the context you expect. They may follow a link from someone else's Website, or a bookmark in their Internet browser, and so might not go via your Website's homepage. Some things you may want to include are: A link to your homepage Contact information (your e-mail address – possibly also your telephone/postal address) The date the page was last updated (though only if you’re likely to be updating pages often!) A copyright notice A link to your institution (i.e. UCL)'s homepage.


Click on the file name to switch between open pages.

Creating Web PagesOnce you have defined the site and planned its structure, you can start to create the Web pages.

Creating a new Web pageTo create a new Web page:1. From the File menu choose New.2. In the New Document dialog box, select the General tab, then choose

HTML under category Basic Page:3. Click Create.

4. A new, empty window appears ready for you to create the content. This is a Document window, and it functions much like a word processor window. You are presented with a blank Web page into which you can type text, add images, etc.

Opening an existing Web page1. From the File menu choose Open.2. Select the file that you wish to edit.3. Click on Open.4. The file then opens in the document window.ORYou can open a page directly from the Files panel, on the right, by double-clicking on it.


un-saved file

Helpful hint:You can view and switch between all of your open Web pages by using the file tabs at the top of the screen.

Saving a Web page1. From the File menu choose Save.2. Type in a filename in the File Name box, making sure you are saving it in

the correct folder.3. Click on Save.ORYou can save all of your open Web pages at the same time from the File menu and Save All.Helpful hint: If your Web page has not been saved you should see a small asterisk on the file name tab at the top of the screen. In this example the index.htm page has not been saved.

Document window toolbarThe Document window should display a toolbar at the top, underneath the menus. If it is not visible, select Toolbars from the View menu, then choose Document.

Page titleThe page title is displayed in a text box which you can edit simply by clicking on the box and typing. There are no restrictions to what you can input here – you can use capitals, symbols etc. The title is an important aspect of a Web page; it is distinct from the filename, and from any title or heading text on the page. The page title appears in the following situations: At the top of your browser window while browsing the page, and also on the Taskbar in Windows. In the results lists of most search engines – therefore it is often the first encounter people will have with your Web page. (In fact it can affect the ranking of your page in search engines.) In browser Bookmarks or Favourites lists.The page title should be short and descriptive, and include the name of the institution to which it belongs – for example “Graduate Prospectus at UCL”. The default page title in Dreamweaver is “Untitled Document”, which is not very useful, so be sure to give each of your pages an appropriate title!

Design view and Code viewThe document window ordinarily shows your Web page graphically (the Design view) – but we can switch between this and the underlying HTML


Document title

File management

Browser preview/debug

Document view options

code (Code view). HTML stands for HyperText Markup Language and is a page layout code that browsers such as Internet Explorer can interpret. Dreamweaver automatically generates the HTML code while you are creating the Web page. If you are familiar with HTML, you can edit existing code or add to it in the Code view.There are three display options for any Web page you are working on – ,Code view, Split view and Design view. At the top-left of the Dreamweaver screen are the three buttons used to change between these displays.HTML is outside the scope of this course, and we will be using the Design view. If you are interested in learning more about HTML, contact the Open Learning Centre http://www.ucl.ac.uk/is/olc/

Browser viewTo see your page as it is going to be viewed by others on the Internet, you need to view the page through a Web browser. A Web browser interprets the HTML code and displays the page. There are several different types of Web browser available; the most popular is Internet Explorer. To view your page in a browser:1. Select File | Preview in Browser, and from the submenu choose the

required browser.2. The page should load up in the browser of your choice.3. To return to your Dreamweaver page select File | Exit from the browser

menu, or select Dreamweaver on the Taskbar. Helpful hint: F12 is a useful shortcut key to display a page in the default browser.

Page PropertiesThe background colour of your Web page, and the default colour of text and links displayed, are best specified using a stylesheet. These are introduced in part 2 of this course. It is also possible to set page colours etc. in Page Properties:From the Modify menu choose Page Properties.The following window is displayed: Appearance – Change

the font appearance or background colour.

Links – Change the appearance of links and specify active and visited link colours.

Headings – You can change the properties of the in-built heading styles here (see Page 20 for more information on heading styles).

Title/Encoding – Change the title or encoding of the page. Tracing Image – You can use a tracing image as a guide to re-create a page

design that was created in a graphics application such as Macromedia Freehand or Fireworks. A tracing image is a image that is placed in the


background of the Document window. You can hide the image, set its opacity, and change its position (we will not be covering tracing Images in this course).

Background imageIf you wish to have an image as a background to your page you can enter the filename, or you can use the Browse button to locate it from the Appearance category. Graphics are tiled across the Web page. Helpful hint: Having an image as a background is not recommended – it may mean slower loading speeds for your Web page. It can also make your page more difficult to read, particularly if the background image contains too much contrasting detail.

ColoursYou can set the default colours for text and links by either clicking on the colour button and choosing a colour from the colour palette that is displayed, or by typing in the hexadecimal code for the colour1. If you leave any of the colour boxes blank, browsers will use their default colours – for example, black text, white backgrounds, blue links, and purple visited links.Text and link colours should be chosen carefully to avoid clashing with the background colour.

1 All colours on a PC can be represented by a hexadecimal (Hex) code. The code is a six-digit alphanumeric code preceded by a hash (#). For example, the Hex code for yellow is #FFFF99 and the Hex code for red is #FF6666. You do not need to know Hex codes to use Dreamweaver, as choosing the colour from the colour palette inserts the correct Hex code into your text box.UCL Information Systems Tables19

Block Quote

List options (bulleted, numbered)

Insert Characters

Text Entering text is as straightforward as typing it on the screen. Text attributes can be changed with the menus or through the Properties Inspector as shown below. Most of the properties you would expect from a word processing application are available. You can use the Properties Inspector to change the font, size, colour, style (bold, italic) and alignment. You can also create numbered and bulleted lists.

Properties Inspector

Special characters When entering text into a Web page you may notice that you cannot use the spacebar on the keyboard for entering extra space. You will also find that when you use the Enter button on the keyboard that this will give you a paragraph break (HTML code <P>) which gives you double-spacing rather than the single-spacing you may be used to in Microsoft Word. There are some special characters on the toolbar for entering line breaks for single-spacing, non-breaking spaces, which are equivalent to the spacebar, and other characters that you may wish to use that cannot be found on a standard keyboard. To enter special characters:1. Click on the Common drop-down arrow on the Insert Bar and choose Text. 2. You should now see the following options on the Text bar.

3. Click on the Insert Characters button and choose your desired character.Note: The last option Other Characters has a wider range. Once you have chosen a character it will be added to the toolbar as the Characters menu.

Foreign characters You may need to enter foreign or other special characters that are not displayed on the Characters menu or on the keyboard. The easiest way of entering is to find out the associated ASCII1/HTML code and enter it in the page coding. You can find out HTML codes for other characters using a search engine. For example if I wanted to find out the HTML codes for accented characters in Polish, I might search for “HTML characters Polish” in the search engine.

1 ASCII is a way of defining a set of characters which can be displayed by a computer on a screen, as well as some control characters which have special functions.Appendix 1 UCL Information Systems

Symb HTML Capital O- Ó ÓLowercase o- ó ó

20

Format text Style box Alignment options Link box Browse for file

Font size Font colour Bulleted/Numbered list

To enter the symbol onto the Web page go to the Code view of the page and enter the HTML code (don’t forget the semi-colon at the end).If you use copy and paste to copy text containing special charaters, e.g., from Word, check in Dreamweaver Code view that Dreamweaver has coded the special charater correctly, e.g. ó or ó NOT ó. Paragraph formattingEach individual paragraph can be set to one of the following formats:Paragraph Heading 3 Heading 6Heading 1 Heading 4 Preformatte

dHeading 2 Heading 5 NoneParagraph is the default format. Use this style for ordinary paragraphs of text. The heading formats, Heading 1- Heading 6 (often abbreviated to h1 - h6), are used to create headings of different size and precedence. Heading 1 is normally the largest type of paragraph and used for the main headings in a Web page, while Heading 6 is very small (often smaller than ordinary paragraph text!).Preformatted text is displayed slightly differently to other text on a Web page. It is ordinarily displayed in a fixed-width font such as Courier, and allows you to include as much whitespace in your text as you wish. (You may have noticed that, ordinarily, Dreamweaver only allows one space between words – pressing the spacebar multiple times has no effect.)To select a format for a paragraph:1. Ensure that the cursor is positioned within the paragraph.2. In the Properties Inspector select one of the options in the Paragraph

Format box (the first box next to the Format label).Paragraph formats become important in the next course when we use stylesheets to specify appearances for h1 headings, h2 headings, paragraphs, etc.

StylesStyles are a way of saving and assigning text formats to particular parts of the page text. If you would like to use styles you are advised to use Cascading Style Sheets (CSS), which will be covered in the next course –Dreamweaver Part 2.Some styles are automatically created in Dreamweaver MX 2004 when you assign any text formatting properties to text. For example if you were to select some text and make it Arial font and Blue, Deamweaver automatically creates a style called Style1 with those properties. You can use this style again and any other subsequent manual formatting that you apply to text will be saved again as a style and will be called Style 2. However, this is not the best way of managing styles. You should use CSS.

Text formattingUCL Information Systems Tables21

Left Centre RightJustify

Bold/italic1. To embolden or italicise text, select the text.2. In the Properties Inspector click on the Bold or Italics icon.Helpful hint:Although it is possible to underline text, there is a convention on Web pages that links are shown underlined. Therefore, it is not usual to underline text for formatting purposes.

Size To change the text size:1. Select the text.2. From the menu choose Text then Size.3. Choose a size.Alternatively, use the Properties Inspector.

ColourTo change the text colour from the menu:1. Select the text. 2. From the menu choose Text then Color...3. A window is displayed as shown.4. Select the desired colour and click on OK.To change text colour from the Properties Inspector:1. Select the text.2. In the Properties Inspector, click on the button to display the colour palette

and select a colour.3. This second method is preferable, since all the colours in the colour palette

are Web-safe – they will appear the same in all browsers.

AlignmentText can be aligned left, right or centre. To align text:1. Select the text.2. In the Properties Inspector click on the required Align button:

Font ListsThe font describes the physical shapes of the characters. If no font is specified, the text will be displayed in the user's default font. A problem arises when you specify a font the user does not have installed. With Dreamweaver you not only specify a font, but also a second one in case the first one is not available in the user's browser, and if that is not available you can specify a third, and so on. Dreamweaver brings fonts together in font lists. There are a number of combinations already set up. For example: Verdana, Arial, Helvetica, sans-serif.If this font combination was applied to text, Verdana would be the first choice of display. If Verdana was not available in the user's browser, the text would


be displayed in Arial. If Arial was not available, it would be displayed in Helvetica, and so on1. To change the font:1. Select the text.2. From the Text menu select Font, and choose the required

font group:The font can also be changed in the Properties Inspector. It is possible to create your own customised font lists via the Edit Font List.To create a font list:

1. Go to the Font drop-down list in the Properties Inspector.

2. Choose Edit Font List. 3. From the Available fonts area choose a font

and use the double arrows to move the font into the Chosen fonts area.

4. Once you have selected and moved all of the required fonts for your chosen fonts group click on OK.

5. You should now see your own font group listed in the Font drop down arrow on the Properties Inspector.

Spell-checking To spell-check your pages:

1. Go to the Text menu | Check Spelling.2. You can choose to Ignore, Change, Change all or Add to Personal so

that a particular spelling is stored to your dictionary. Helpful hint:Shift+F7 is a useful shortcut key for spell-checking a page.

Bulleted and numbered listsNumbered and bulleted lists (known as ordered and unordered lists) can be created from existing or new text.To create a bulleted (unordered) or numbered (ordered) list:1. Select the set of paragraphs that is to become a list.2. From the Text menu select List.3. From the submenu choose Unordered (or Ordered) List, as required.

1 Sans-serif in the example is not the name of a specific font, but of a generic type of font – a font whose characters don't have serifs. Putting a generic font type at the end of the list is equivalent to saying to the user's browser, “If you don't have Verdana, Arial, or Helvetica, any sans-serif font will do”. Generic font types include serif, sans-serif, cursive, fantasy, and monotype.UCL Information Systems Tables

Unordered list

Ordered list

23

Alternatively you can use the toolbar shortcuts:

Horizontal rulesA horizontal rule is a line that runs across the screen providing a division on the page. To insert a horizontal rule from the menu:1. Position the cursor where the line is to be drawn.2. From the menu choose Insert and then HTML and Horizontal Rule.To insert a horizontal rule from the Insert Bar:1. Position the cursor where the line is to be drawn.2. Click on the Insert Horizontal Rule button:The line is then inserted, occupying the width of the screen.

Horizontal rule propertiesWhen a horizontal rule is selected the Properties Inspector changes to:

Using the Properties Inspector you can change the width, height and alignment, and choose whether to apply a three-dimensional shaded effect. The width can be entered either as a fixed size in pixels, or as a proportion of the screen width as a percentage.


HyperlinksA hyperlink is a graphic or piece of text within a Web page that leads to another place within the same document or to another Web page. Hyperlinked text is usually shown as underlined or in a different colour. Essentially, there are four types of link: a link to your own files on your Website a link to a page on another site a link to other areas on the same Web page an e-mail link, which initiates an e-mail to a specified address.Both text and images can be used as links. Note that the page you are working on should be saved before you create hyperlinks.

Linking to another page1. Select the text or image that you want to become the link. The Properties

Inspectors for text and images are shown below:Text:

Images:

2. If you know the path of the page to link to, it’s possible to type in the full path in the Link box. However, to do this you will need to know how accurately to reference folders above and below the current page, and any typing errors will mean the link won’t work. A safer method is to click on the Browse button to search for the file.

Once you have created a link it will by default appear underlined.Any file that you try to link to that is not held within the root folder of your site will prompt a message box as shown below.


Link box

Link box

Browse

Browse

Click Yes – you will then be prompted to copy the file into your local root folder so that it is available in your live site: just select an appropriate folder for the file within your site root and click Save.


Using the target iconA convenient alternative for creating a link is to use the target icon on the Properties Inspector . To use the target icon:1. Arrange your windows so that the target of the link is visible (e.g. in the

Site Panel on the right).2. Select the text or image that you want to become the link.3. Click-and-drag from the target icon on the Properties Inspector, to the link

target (as shown below).

Linking to a page on the Internet1. Select the text or image that you want to become the link.2. Click in the Link text box within the Properties Inspector.3. Enter the full address of the Website that you want to link to. Make sure

you include the http:// in front and the www. as well, if necessary. For example:

http://www.ucl.ac.uk/ UCLhttp://www.bbc.co.uk/ BBChttp://www.google.com/ Google search engine

As with other links, any typing errors will mean the link won’t work – it’s often a good idea to open the page to which you want to link to in a Web browser and copy and paste the full URL into Dreamweaver.


E-mail linksE-mail links (also referred to as mailto links) are a useful way of setting up a contact link should a visitor to your Website wish to communicate with you. When the link is viewed in a browser the user clicks on the link and the e-mail program should open with a new message window containing your e-mail address. To create an e-mail link:1. In the document, position the insertion point where you want the e-mail

link to appear, or select the text you want to appear as the e-mail link. Then either:

2. Choose Insert from the menu bar then E-mail Link, or, in the Common Bar, select the Insert E-mail Link icon:

3. The Insert E-mail Link dialog box is displayed. In the Text field, type or edit

the text to appear on the page.

4. In the E-mail field, type the e-mail address.5. Click on OK.

Creating links from thumbnail images1. Select the thumbnail image to be linked from.2. In the Link box in the Properties Inspector type the path and filename for

the page or image that it is to be linked to.

Removing a link1. Click anywhere in the text or the image with the link.2. Within the Properties Inspector, select the link address displayed in the

Link box.3. Press the Delete key on the keyboard. The link formatting (the underline

and colour) should disappear from your text.


ImagesImages that can be incorporated into a Web page include JPG files (normally photos) and GIF files (often logos, images with large areas of flat colour or images with very few colours such as line-art).

Inserting an image1. To insert an image, position the cursor at the point where you wish the

image to be placed.2. From the Insert menu choose

Image. The Select Image Source dialog box is displayed:

3. Locate the image that you wish to insert and click on OK.

As with any linked file the image file should be located within your local root folder so that it can be referenced properly. If it isn’t Dreamweaver will helpfully prompt you, asking whether the file should be copied into your local site. Choose Yes when faced with this, and a file chooser window will appear. It is recommended that you save the image within the images folder in your local root folder.

Inserting an image from the Insert Bar 1. Position the cursor at the point where you wish the image to be placed.

2. Click on the Insert Image icon on the Insert Bar. The Select Image Source dialog box is displayed.

3. Locate the image that you wish to insert and click on OK.

Supplying alternative textSome browsers are not capable of displaying images, while others have the facility turned off in order to speed up the downloading of Web pages. To overcome this you should always supply text as an alternative to an image. Alternative text can also be used to provide the user with further information.To supply alternative text:1. Select the image.2. Click in the Alt box within the Properties Inspector and type in the text that

you wish to have displayed.

Alternative text is displayed in a browser in one of two ways:UCL Information Systems Tables29

1. If the picture is not downloaded, the text is displayed instead. (Speaking browsers, e.g. for the visually impaired, will read out the alternative text.)

2. If the picture is downloaded, some browsers will display the text when the user holds the cursor over the image.


TablesTables allow you to line up text and graphics easily and quickly. Tables are simply grids divided into rows and columns. A simple table is shown below:

Name Location Extension

P Smith IT 4553L Whittle Sales 7669

In the above example, the table is made up of three columns and three rows. Each piece of data is contained within a cell. By default the table lines are displayed, but they can be removed.

Tables for dataFor informational tables, the advice is to make sure that clear table headings are given. It is good practice to give a textual summary of the information shown in the table – for example, “The following table shows that heart disease in women has been increasing at a greater rate, over the past twenty years, than in men...”.

Inserting a table1. Position the cursor where you want the

table to be inserted. 2. From the Insert Bar click on the

Insert Table icon Alternatively, select Table from the Insert menu.

3. The following dialog box is displayed:4. Specify the number of rows and columns

in your table.5. Choose a width for your table, either by

typing in the percentage of the page width or by typing in the number of pixels the table width should be.

6. Specify whether the table is to have a border; 0 (zero) means no border. The higher the number, the thicker the border.

7. For information on header and accessibility options see below.8. Click on OK.

Header You can use a header to specify a certain area of the table as a header for the table. This area will then be formatted bold and aligned centered. You can choose one the following headers:None does not enable column or row headings for the table.Left makes the first column of the table a column for headings, so that you can enter a heading for each row of the table.


Top makes the first row of the table a row for headings, so that you can enter a heading for each column of the table.Both enables you to enter column and row headings in the table.

Helpful hint:It’s a good idea to use headers in case any of your Website visitors use screen readers. Screen readers read table headings and help users keep track of table information.

AccessibilityIn the Accessibility section you can specify the following options to make your table more accessible and to give more information, particulary for users with screen readers: Caption provides a table title which displays outside of the table.Align Caption specifies where the table caption appears in relation to the table.Summary provides a table description. Screen readers read the summary text, but the text does not appear in the user’s browser.

Adding table dataTo add text to the table, position the cursor in the cell where you wish to start and then type the text. Helpful hint: To move from one cell to another press the Tab key. To move back a cell press Shift+Tab. To move up or down a line use the cursor keys.

Inserting images into a tableInserting images into tables is similar to inserting images elsewhere on a Web page. Position the cursor at the point in the table where the image is to go, and click on the Insert Image icon on the Insert Bar.

Selecting Table visual aid Once you have inserted your table you may be presented with the table visual aid (green lines beneath the table) which you can use to select and specify widths and heights of columns in the table.

Table visual aid

Selecting a tableTo select a table, click once on the drop-down arrow on the lower green line of the table visual aid. From here you can choose Select Table.


Alternatively right-click anywhere inside the table and choose Table | Select Table. The table should have a thick black line around it and handles in the bottom, right and bottom right-hand corner:The Properties Inspector should look similar to that shown below:

Selecting a column To select a column, click once on the drop-down arrow on the first green line of the table visual aid. From here you can choose Select Column.

Selecting a rowMove the mouse to the left of the row you wish to select, until the mouse pointer becomes an arrow pointing along the row. Then click once to select the entire row/column.

The Properties Inspector will look similar to that shown below.

Deleting a column or row1. Select the column or row to be deleted.2. Press the Delete key on the keyboard.

Merging and splitting cellsMerging is the process of combining two or more cells together. It can be used, for example, where you want titles to span columns. Splitting cells is the opposite of merging, creating two or more cells out of one.UCL Information Systems Tables33

expand arrow

Merging cells1. Select the cells you wish to merge. 2. In the Properties Inspector click on the Merge Cells button

(Note that you might need to click on the expand arrow as shown above to view the merge options).

3. The selected cells are then merged.

Splitting cells1. Select the cell to split.2. Click on the Split Cells button. 3. In the Split Cells dialog box, specify whether to

split the cell into rows or columns, and the number of rows/columns you want it split into.


Merge Cells Split Cells

Tables for layoutTables are a powerful tool for positioning the content and managing the layout of a Web page, the major advantage being that you can position elements (graphics, text, etc.) very precisely.

Have a look at the page below:

This page has a well-defined structure, and contains at least four separate sections:1. A header row – containing a logo, banner etc.2. The left column – which contains the site’s main navigation.3. The middle column – which contains the main content of the page.4. The right column – which contains additional links.

These four sections are actually divided up using a table that takes up the entire page. Section 1 is a row that spans the entire width of the table. The next row is split into three columns. The columns on the left and right are smaller columns, while the one in the middle is a larger column. Section 1 in fact contains a second table used to control the layout of the logos, title and search box.The use of tables to lay out a Web page is widespread, but increasingly frowned upon. Advanced techniques using stylesheets are gradually replacing the use of tables, and if you are designing a large and important Website it may be wise to read up on these techniques.If you do use tables for layout purposes, pay attention to the order in which your elements would appear if presented linearly. Figure 1 illustrates one possible layout achieved with a table.

Title


Menu Option 1

Main Content of Webpage

Menu Option 2

Menu Option 3

Figure 1 – A problematic layout

The Web page in Figure 1 would be rendered linearly as Title, Menu Option 1, Main Content of Webpage, Menu Option 2, Menu Option 3. The menu is split up in an odd fashion.There are a number of ways of getting round this problem. Figure 2 shows one – the menu is now contained within a second inner table. The page would thus be rendered linearly as Title, Menu Option 1, Menu Option 2, Menu Option 3, Main Content of Webpage; this is perhaps the best linear order for the elements.

Title

Main Content of Webpage

Menu Option 1Menu Option 2Menu Option 3

Figure 2 – One possible improvement to the layout

Nested tablesTables can be inserted within table cells (creating a ‘nested table’) and used to layout content within that cell. Further tables can be inserted within the cells of these nested tables, potentially allowing content to be positioned very precisely within the page.This should however be approached with caution as it can be problematic on two levels: It can make it difficult to work out which table a cell belongs to, which can lead to difficulties when adjusting formatting such as cell padding, spacing etc. The underlying HTML code also becomes incredibly complex (making it difficult to work with) and this has a knock-on effect for users of screen readers – the order of things as they appear to sighted users on screen may not be how they are read out by the screen-reader, potentially leading to great confusion and making the page unusable.Given these limitations it pays to use nested tables with restraint, avoiding excessive numbers of nested tables and perhaps compromising on layout if this will simplify things. In fact compromise and simplicity are a good approach when dealing with design. It’s important to remember that most Web sites are created to present information, and it pays to do so in a form that is accessible and usable by all, rather than worrying about the intricacies of design.Appendix 1 UCL Information Systems 36

Managing Your WebsiteHaving designed one or more Web pages and saved them in appropriate locations in your local site, we can now return to the Site Panel to manage your local and remote sites – in particular, to publish your pages to the remote site (i.e. the World Wide Web).If the Site Panel is not visible, it can be displayed by selecting Site Files from the Site menu (or by pressing F8). You can choose between different views of the site by using the Select site view pull-down menu, or you can see a split window by clicking the Expand site panel button. Pressing this button again will revert to the more compact layout.The right-hand panel of the Expanded Site Panel displays your local site files. The left-hand panel can either display the remote site files, or a site map of the local site. Buttons on the toolbar enable you to change between these two views.

Uploading and downloadingMake sure that the Site Files view rather than the Site Map view is enabled. If Dreamweaver is not already connected to the remote site then the left-hand pane will be blank, and you will need to click on the Connect button on the toolbar.


Connected (click to disconnect)

Not connected (click to connect)

Site Files Testing Server Site Map

Uploading a file1. Select the file/folder in your local site which you want to upload to the

remote site. You can select multiple files/folders by holding down the Ctrl or Shift keys while clicking. As in other Windows applications, clicking with the Ctrl key held down selects multiple files, and with the Shift key held down selects a range of files.

2. Click the Put button on the Site Panel’s toolbar, which looks like an blue arrow pointing upwards. Alternatively, choose Put from the Site menu.

3. If Dreamweaver is not already connected to the remote site, it will attempt to connect. It will then attempt to upload the file(s) to the remote site. If any of the files being uploaded have been edited and not yet saved you will be prompted to save them before uploading. If you have the root folder selected you will be asked if you want to Put the entire site – this is just a precaution as very large sites can take a long time to upload.

Using this method, files and folders will be transferred from their position in the local site, to the exactly equivalent position in the remote site.

Downloading a file1. Select the file/folder in your remote site which you want to download to the

local site. You can select multiple files/folders by holding down the Ctrl or Shift keys while clicking.

2. Click the Get button on the Site Panel’s toolbar, which looks like an green arrow pointing downwards. Alternatively, choose Get from the Site menu.

3. If Dreamweaver is not already connected to the remote site then it will attempt to connect. It will then attempt to download the file(s) from the remote site.

Using this method, files and folders will be transferred from their position in the remote site, to the equivalent position in the local site.As an alternative to the Get and Put buttons, you can click-and-drag to move files between the local and the remote site; but this is not advisable because you run the risk of dragging them to the wrong location in the remote site.

Site mapDreamweaver can display a site map which shows graphically the links and relationships between files on your sites.

Setting the HomepageIn order that the site map can be constructed, one of your pages must be designated as the homepage. The homepage is the first page that a user sees when they log into your Website and is normally called index.htm or index.html. The following steps are carried out once the site has been defined and you have created and saved the page that is to be set as your homepage. To define a page as the homepage:


1. In the local site view of the Site Panel click on the file you wish to define as the homepage.

2. From the Site menu select Set as Home Page.This page is then defined as your homepage, for the purpose of building the site map.


Viewing the site mapTo view the site map, use the Site Map button on the toolbar to switch to Site Map view. Note that you must have chosen one file to be your site's homepage, otherwise Dreamweaver will display an error message to tell you that it cannot build the site map.

The top file is your homepage (usually index.htm). Beneath this are displayed all files linked to from the homepage. Any of these are pages which themselves include links will have a + sign alongside them. This can be clicked to display all the files to which this page links. Be warned that this can become confusing as you can potentially keep opening up these links forever if pages link back to the homepage!One useful feature of the site map is that it colour-codes all the displayed filenames to indicate the status of links within the site. Black indicates a link to an existing file (you can double-click the file to open it). Blue indicates an external link (i.e. to another Website) which Dreamweaver can't check automatically. Red indicates a broken link – either the link is incorrect or the file linked to does not exist. In this case you should find the link in the parent page and correct it - or ensure the file linked to does indeed exist but isn't in your local site.

Exporting the site mapYou cannot print out the site map from Dreamweaver but you can export the map as a bitmap file. You can then import that file into a wordprocessor or graphics package to print.1. From the Site Map window choose File.2. Select Save Site Map.UCL Information Systems Tables41

Site map Site files

3. Give the file a name and save it as a bitmap (BMP) file.4. Click on Save.


AccessibilityWeb pages are available for all to view over the Internet, but not everyone accesses the Internet in the same way. There are many varieties of browser (you may be familiar with Internet Explorer and Firefox, but there are others including Camino, Lynx, Mozilla, Netscape and Opera) – which can run on many kinds of computer (for example PC, Mac and UNIX). These platforms all have vastly different possibilities for the amount of screen space available (some monitors only display 640 x 480 pixels, while some are much larger). Remember that not all computers will necessarily display a Web page exactly as yours does. Visually impaired people may navigate the Web via Internet browsers which read out the content of a Web page, or alternatively may have problems if text is very small or low-contrast. People with motor difficulties may find it difficult to click on a small link. Those reading a Web page which is not written in their first language, or those with learning difficulties, may have problems understanding over-complicated text.Often, making your Website useable by all will lead to general improvements, such as in the clarity of your online writing. Here are some specific suggestions for improving the accessibility of your pages:

Text and colour schemesOne of the most general recommendations about page design is to make text easy to read. Dark (e.g. black) text on a very light (e.g. white) background is proven to be the easiest colour scheme to read on a computer screen, especially if there are large amounts of text to read.Text should never be made so small that it could be difficult to read, especially for those with eyesight problems. Text sizes on the Web range between 1 and 7, where 3 represents the ordinary text size (12pt or 14pt on most people's browsers). Size 1 should only be used rarely.Background images can often make text more difficult to read. If you are sure you want to use a background image, ensure that its colours contrast well with text laid over it. It is often best to use a graphics package to convert a background image into a watermark by reducing the contrast, and increasing the brightness, of the image.

LinksLinks should normally be made to stand out. Underlining links often distinguishes them from surrounding text, but it also helps if they are a different colour – ordinarily links are coloured blue in contrast to black for ordinary text.It is also important that the text of a link describes what users will find if they follow the link. The following is a common mistake:

Click here if you'd like to view my CV.UCL Information Systems Tables43

This looks fine to many users. However, certain text-based browsers and speech-browsers list the links on a page, without reference to the text which surrounds them – the above link “Click here” is meaningless out of context. Much better would be:

You can view my CV.or:

You can view my CV.If a link is based on an image rather than text, it is a good idea to ensure that the image's “alternative text” indicates the link destination.


ImagesAs already described in the Images section, it is important that every image you include in your Web pages has alternative text (also called alt text). Otherwise those browsing without images may be unable to use your site as effectively as those able to view the images. As a guide, there are various uses of images, and various corresponding needs for the alt text: Illustration. If an image is used to illustrate a Web page, a short textual description is a good idea for the alt text: e.g. “Photograph of students in a laboratory class”, “Dr E. Penney”. Links. If an image is used as a link, make sure the alt text provides a useful description of the link's function: e.g. “View RAE results”, “E-mail Dr E. Penney”. Icons and logos. Icons and logos are ordinarily given a descriptive alt text, as with illustrations, e.g. UCL logo, Haematology at UCL. If no description is needed, follow the advice for structural images, below. Structural. Structural images, such as ones which are used to give the impression of a border around a page element, do not carry information and don't need to be presented to the text-only browser. The alt text should be a simple space.Considering that many users are not able to make use of images which might be associated with a Web page, no vital information should be encoded in an image. For example, if it is impossible to tell where one should click to access the various sections of your site unless certain images are loaded, this can cause problems.Also remember that images take a long time to download compared with text. If your Web pages are full of high-quality, large images, then the slow speed of downloading may be intolerable for many users. At UCL a very fast Internet connection is available, but your Web pages should also be useable by those in far-off countries, or those accessing your pages via a modem, for whom UCL Web pages will take much longer to download.

TablesTables are commonly used in two situations in Web pages: to display an actual table, i.e. tabular data; and to control the layout of page elements. In both cases it pays to remember that not all browsers are able to render tables properly. Text-only browsers, speaking browsers, and very old browsers all render the contents of a table linearly: imagine reading out the contents of a table row-by-row, left-to-right – would your table's contents make sense?


Appendix 1

Setting up your remote folder at UCL

WTS usersIf we were creating a Website to be hosted by a Web hosting company, then this company would create the root folder on the remote site for us. At UCL there is a program available via WTS called Publish Web Pages which establishes the remote site for you. To use Publish Web Pages on WTS:1. From the Start menu choose Programs and Software O-Z.2. Run the Publish Web Pages program. This program will ask for your user ID and password, and then establish your local site for you. Take care when entering your password, as nothing is echoed on the screen. If you do not have access to the Publish Web Pages feature see the instructions below.

Non-WTS usersIf you don't have access to the Publish Web Pages program available through WTS, then follow one of these sets of instructions to set up your remote folder at UCL. In each case the process will create a folder called html.pub in your home directory, and then ensure that it is world-readable (i.e. that it can be accessed by anyone using a Web browser).

Using UNIX on Socrates or a cluster Sun workstationTo create your html.pub directory in the root of drive R:, use the UNIX mkdir

command:

mkdir html.pub

To publish your pages, use the Unix reveal command. This will automatically make your html.pub and home directories world-readable. You can do this for a single file or a number of files: reveal index.html reveal *

Non-Managed computersTo create and make world-readable your html.pub directory from a non-UCL-Managed computer, you will need to use Telnet. (Users of Windows 95 and later will find Telnet in Start | Programs | Accessories.) Using Telnet, connect


to socrates.ucl.ac.uk, login with your normal username and password, and enter the following UNIX commands: mkdir html.pub chmod og+x $home html.pub

Don’t forget to logout to end your Unix session.


Connection settingsThese are similar to those used to access departmental pages except that the host directory should point to the folder you created in the process above (i.e. html.pub) and you use your personal UCL login and password:

Server Access: Choose FTP from the list.

FTP Host: ftp.ucl.ac.ukHost Directory: html.pubLogin: [Your login name]Password: [Your password]

Accessing personal homepagesTo view your uploaded pages from a browser use the following address: http://www.homepages.ucl.ac.uk/~yourloginTo get the ~ (tilde) use: Shift+#‘yourlogin’ is the login you used in your site definition.


Learning MoreCentral IT TrainingInformation Systems run courses for UCL staff, and publish documents for staff and students. Dreamweaver documents include:

Creating and Maintaining Webpages Part one

This course is for those new to web page authoring or to Dreamweaver who wish to explore the basic features of the software.

Creating and Maintaining Webpages Part two

This 3.5hr course is aimed at users familiar with Dreamweaver who want to use templates and stylesheets, and find out more about Dreamweaver.

Using forms in Dreamweaver

Additional workbook only, currently no course in this area.

UCL Templates This course is aimed at users who need to make use of the UCL templates in their web pages

Open Learning Centre Dreamweaver Workshop – This training is delivered in the Open Learning Centre and is intended for those who wish to obtain training on specific features in Dreamweaver on a individual or small group basis. Please let us know your previous levels of experience, and what areas you would like to cover, when arranging to attend.

You will need to book a session in advance at: www.ucl.ac.uk/is/olc/bookspecial.htm and sessions will last for an hour or possibly longer depending on availability.

See the OLC web pages for more details at www.ucl.ac.uk/is/olc.On-line learningThere is also a comprehensive range of online training available via TheLearningZone at www.ucl.ac.uk/elearning.

Getting help with Dreamweaver Dreamweaver has a help system which you can call upon at any time while you are working on a Website. Select Using Dreamweaver from the Help menu to open Dreamweaver help. For WebCT users there are additional Dreamweaver courses. Details can be found at: www.ucl.ac.uk/learningtechnology/training There is an option on Dreamweaver's Help menu called Tutorials, which takes you through some of the more advanced Dreamweaver features in an interactive fashion. A Web search using a search engine such as Google (www.google.co.uk) can also retrieve helpful Web pages. For example, a search for CSS “style sheet” tutorial would return a useful selection of tutorials. The following faculties have a dedicated Faculty Information Support Officer (FISO) who work with faculty staff on one-to-one help as well as group training, and general advice tailored to your subject discipline. UCL Information Systems Tables49

Arts and Humanities Engineering Maths & Physical Sciences

Life Sciences Social and Historical Sciences Barlett

See the Faculty based support section of the www.ucl.ac.uk/is/fiso webpage for more details.


introduction to excel formulae & functionsccaabaa/is/documents/manuals/d… · web viewtext...

Documents