Information Systems Services

Quick Reference Sheets

Researcher@Leeds
Creating an Online Identity
Studying

Support Website:

https://vlebb.leeds.ac.uk

Enter your username and password

Under My Modules, click the Studying tab
Tick the box Show All Years
Click Researcher @ Leeds module
Click Researcher @ Leeds from the side bar menu

Creating an Online Identity

Table of Contents
Dreamweaver Interface .............................................................................................................................. 3
To Start Dreamweaver: ....................................................................................................................... 3
The Dreamweaver CS3 Workspace .................................................................................................... 3
To Display A Panel: ............................................................................................................................. 3
To Expand/Collapse A Panel: ............................................................................................................. 3
To Hide/Display All Panels Press F4 ................................................................................................... 3
To Exit Dreamweaver: ......................................................................................................................... 3
Creating A Website ..................................................................................................................................... 4
Personal Web Site Set Up ................................................................................................................... 4
Allowing Access to Personal Web Site: ............................................................................................... 4
Download the Researcher@Leeds Templates .................................................................................... 4
Defining a Local Site ........................................................................................................................... 5
Creating Web Pages .................................................................................................................................. 8
To Create A Page using the Researcher Template:............................................................................ 8
To Insert A Page Title: ......................................................................................................................... 8
To Preview A Page In A Browser: ....................................................................................................... 8
To Create A Blank Page: ..................................................................................................................... 9
To Change The View Of The Document Window: .............................................................................. 9
To Detach A Template From A File: .................................................................................................... 9
Tables ....................................................................................................................................................... 10
To Create A Table: ............................................................................................................................ 10
To Change The Table Layout: ........................................................................................................... 10
To Amend Column Width/Row Height: .............................................................................................. 10
To Format A Table: ........................................................................................................................... 10
Text ........................................................................................................................................................... 11
To Create a Paragraph Break: .......................................................................................................... 11
To Format Text: ................................................................................................................................. 11
To Set Page Properties: .................................................................................................................... 11
Hyperlinks ................................................................................................................................................. 12
To create an external text hyperlink: ................................................................................................. 12
To Create an Internal Hyperlink: ....................................................................................................... 12
To Create An E-Mail Link: ................................................................................................................. 12
Images ...................................................................................................................................................... 13
To Insert An Image From Within The Site: ........................................................................................ 13
To Add Alternative Text To An Image: .............................................................................................. 13
To Change An Image: ....................................................................................................................... 13
To Add a Video .................................................................................................................................. 13
Publishing & Maintenance ........................................................................................................................ 14
Useful Resources: ............................................................................................................................. 14
To Run Accessibility Reports ............................................................................................................ 14
To Use the Results Panel .................................................................................................................. 14
To Display The Site Map: .................................................................................................................. 14
To Check Links In The Site: .............................................................................................................. 14

Information Systems Services

Generated May 2011

Page 2 of 2

Creating an Online Identity

Dreamweaver Interface
To Start Dreamweaver:

Click on the Windows [Start] button

Select All Programs > Internet Tools > Adobe Dreamweaver CS3

The Dreamweaver CS3 Workspace

Title Bar

Menu Bar

Insert Bar

Document
Tool Bar

Document
window

Panel
Groups

Files Panel

Tag Selector

Property Inspector

Window Size

To Display A Panel:
Panels are used to control and change various elements on a web page

Select Window > choose the panel as desired

To Expand/Collapse A Panel:

Click on the black expander arrow

in the panel group's title bar

To Hide/Display All Panels Press F4

To Exit Dreamweaver:

Select File > Exit

Save your file if prompted

Information Systems Services

Generated May 2011

Page 3 of 3

Creating an Online Identity

Creating A Website
Personal Web Site Set Up
Hosting of personal websites for staff and students at the University of Leeds is provided by Information Systems
Services (ISS) and is free to all ISS Home Directory Users.
In order to use the service, each user must have a ISS Username.

Within the Home directory, create a folder with the name WWW (must be in uppercase)

Save all files into the WWW directory

Ensure the Home Page file has the name index.htm or index.html

The URL for the personal site is http://www.personal.leeds.ac.uk/~username

Note: Changes made to websites are not dynamic and the changes may not be visible until the following
day

Allowing Access to Personal Web Site:

As the Home Directory is the storage place for all personal web pages, it is necessary to change the properties of
the WWW folder in order to give users access to the pages on the internet.

Navigate to the WWW folder created within the Home Directory

Right Mouse Click on the folder and select Properties

Within the dialog box, select the Security Tab

Click the Add button and type everyone into the object name

Select checknames, then select everyone

Click OK until all dialog boxes have closed

For further information with regards to maintaining and managing personal websites, visit
http://www.personal.leeds.ac.uk or contact the ISS Help Desk.
Note: As ISS are responsible for hosting personal web pages, the conventional method of uploading sites using
Dreamweaver is not used.

Download the Researcher@Leeds Templates

The University has created a special template for Researchers to use in order to set a Home Page on their
Personal Web Sites. The template includes the Researcher@Leeds logo, and is formatted to differentiate between
ordinary University web pages and Researcher web pages.

In the web browser, navigate to the URL www.leeds.ac.uk/vle

Click the Researcher@Leeds module

Within the Module click Researcher@Leeds

Click Web Page Templates

Click the hyperlink Index_Files.zip and click Open

Save the Files in your Home Directory M/WWW/Index_Files

Click the hyperlink Templates.zip and click Open

Save the files in your Home Directory M/WWW/Templates

Information Systems Services

Generated May 2011

Page 4 of 4

Creating an Online Identity

Defining a Local Site

The purpose of a local site is so that you can work on your web pages on any computer anywhere, and then when
they are finished, they can be uploaded to the web server. For University of Leeds Personal Web Sites, the local
site is the WWW folder in your Home Directory. If you are working on your web page on campus, then you will not
need to upload your web pages, this will happen automatically.
If you want to work on your web pages remotely, you will need to have Dreamweaver installed on your local
machine, as it is not an application that is available through RMAS.

Start Dreamweaver

Select Site > New Site, then click on the Basic tab (if not already selected)

Type the web name WWW

Type web address www.personal.leeds.ac.uk/~username and click Next

Select No to use a server technology and click Next

Information Systems Services

Generated May 2011

Page 5 of 5

Creating an Online Identity

Select to Edit local copies on my machine, and specify the root folder as M:\\WWW (Note: You can use
the Browse button to navigate to this location)

Click Next

Enter the following information:-

Note: This information is only

required when working off campus.
How do you connect to your remote
server? (Select None if working oncampus)
FTP
What is the Hostname or FTP address of
your Web server?
ftp.home.leeds.ac.uk
What folder on the server do you want to
store your files in?
WWW
What is your FTP login?
Enter your iss username
What is your FTP password?
Enter your iss password

Click Next

Information Systems Services

Generated May 2011

Page 6 of 6

Creating an Online Identity

As you will be the only one editing files in your website, you will not need Check in and Check out facilities.
Select No, do not enable check in and check out and then click Next

The last page of the site set up is the summary, click Done

The Files panel will now display the folder structure and the files downloaded earlier.

Information Systems Services

Generated May 2011

Page 7 of 7

Creating an Online Identity

Creating Web Pages

The University of Leeds has designed special template for use by Researcher at Leeds only. It is not
necessary to use the templates as you may prefer to use a design of your own.

To Create A Page using the Researcher Template:

Select File > New > Page from Template > WWW > Select the appropriate template

Click Create

Enter the appropriate information on the page

Select File > Save As and navigate to the WWW folder

Enter the file name Index.html

To Insert A Page Title:

Type desired Title in the Document toolbar

Select File > Save (Keyboard Shortcut: CTRL+S)

OR

Click the Save

button if the Standard Toolbar is displayed

To Preview A Page In A Browser:

Select File > Preview in Browser (Keyboard Shortcut: F12)

OR

Click

and select the browser

Information Systems Services

Generated May 2011

Page 8 of 8

Creating an Online Identity

To Create A Blank Page:

Click HTML in the Create New section of the Welcome Screen

If the Welcome Screen is not displayed, select File > New

Select Blank Page > HTML > Create

To Change The View Of The Document Window:

When creating a new HTML page, Dreamweaver will automatically write the HTML code, but it is sometimes useful
to view the code behind a page.

Click

Click

Click

to display the HTML Code

to view the page in Design View (As it will appear in the Web Browser)
to display both the HTML code and Design View

To Detach A Template From A File:

From the Modify menu, point to Templates

Click Detach from Template

Information Systems Services

Generated May 2011

Page 9 of 9

Creating an Online Identity

Tables
Tables can be particularly useful for controlling the layout of a page.

To Create A Table:

Place the cursor in the required position and select Insert > Table, or

Click on the Table tool

Enter the table properties and click on [OK]

which is in the Common category on the Insert bar

To Change The Table Layout:

Select the row/column/cells

Select Modify > Table and select the desired option

OR

Right click the table, point to table and choose from the table options

To Amend Column Width/Row Height:

Drag a selection handle or change W or H from the Properties Insepector

To Format A Table:

Select the cells/rows/columns/table

Use the Properties inspector to change the appearance

This Property:

Does This:
Number of rows in the currently selected table and can be used to
increase/decrease number of rows
Number of columns in the currently selected table and can be used to
increase/decrease number of columns
Table width (% is a relative measurement, pixels are a fixed measurement)
Margin in the cell (in pixels)
Space between cells in a table
Alignment of the table with in relation to other page elements
Border Width (in pixels)
Clear Column Widths
Clear Row Heights
Convert Table Width to Pixels
Convert Table Width to Percentage
Cell Shading Colour
Table Border Colour
Table Background Image

Information Systems Services

Generated May 2011

Page 10 of 10

Creating an Online Identity

Text
To Create a Paragraph Break:

Press

to start a new paragraph.

To Create a Line Break:

Press

to start a new line.

To Format Text:

Use the Properties Inspector

Font Style
Font headings
Font Type Face
Font Size

Font Colour

OR

Use the features from the Text Menu

OR

Use the features from the Text Tab on the Insert Bar

NOTE: It is best practice to use a sans serif font such as Arial

To Set Page Properties:

Page properties will allow you to set defaults for the entire page, e.g., you may want all text on the page to be blue,
by setting the font colour in page properties, you will not need to select all text and apply the colour blue.

Click

Click the appropriate Category and Select the required settings from the available options

Click [OK]

Information Systems Services

Generated May 2011

from the Properties InspectorError! Bookmark not defined.

Page 11 of 11

Creating an Online Identity

Hyperlinks
To create an external text hyperlink:

Select the text

Select Insert > Hyperlink or click

Type the URL including the http://www... in Link, enter other details as desired, then click on [OK]

OR

Select the text and enter the URL in the Link box in the Properties Inspector

To Create an Internal Hyperlink:

Select the text or image

Select Modify > Make Link to display the Select File dialog box
OR

Click on the Browse for File icon

OR

Click and drag the Point to File icon

to the target file in the Files panel

To Create An E-Mail Link:

Position the cursor

Click on the Email Link tool

Type the desired Text and E-Mail, then click on [OK]

Information Systems Services

Generated May 2011

on the Insert bar (Common category)

Page 12 of 12

Creating an Online Identity

Images
To Insert An Image From Within The Site:

Click the Images button

from the Common tab of
the Insert bar OR
Click Insert menu > Image OR

Drag the image from the Files panel and drop it in the
appropriate position on the page

Type Alternate text if desired (Alternative Text

appears on the web page when the mouse is hovered
over the image. It also means the image is more
accessible)

Click on [OK]

To Add Alternative Text To An Image:

Click on the image

Type the desired text in the Alt field in the Properties inspector, then press

To Change An Image:
Crop an image

Specifies Width of Image

Resample an image

Specifies Height of Image

Brightness and Contrast

Align

Sharpen an image

V Space

Optimise the image

H Space

Edit the image in another program

Border

Controls how text appears around

the image
Vertical gap before and after the
image
Horizontal gap before and after the
image
Specify a border width to create a
border around the image

To Add a Video
It is possible to include videos on your web pages that are stored elsewhere. For example, if you have a
video on www.youtube.com or LUTube, you can display it in your web page. The video is not stored in
your web directory, you are basically creating a link to it.

Locate the video on the website

Copy the HTML Code (if available)

Return to Dreamweaver and display the page in Code view

Select the position for the video and Paste the code

Note: the video will only play when you view your page in a web browser.

Information Systems Services

Generated May 2011

Page 13 of 13

Creating an Online Identity

Publishing & Maintenance

Useful Resources:

http://campus.leeds.ac.uk/guidelines/accessibility

http://campus/leeds.ac.uk/guidelines/accessibility/resources.htm

http://validator.w3.org

http://jigsaw.w3.org/css-validator

http://www.personal.leeds.ac.uk

http://www.leeds.ac.uk/identitymanagement/downloads/logos.htm

To Run Accessibility Reports

From the Site menu click the Reports

Select from the Report on: drop down

Select the Accessibility report

Click Run

To Use the Results Panel

Display the Results Panel

Select the Reference Tab

Select UsableNet Accessibility Reference from the Book: list

Select the required Rule:

To Display The Site Map:

Click on the Expand to show local and remote sites tool

Click on the Site Map tool

on the Files panel toolbar

To Check Links In The Site:

Select Site > Check Links Sitewide

Information Systems Services

Generated May 2011

Page 14 of 14