DEPARTMENT OF MECHANICAL ENGINEERING, UNIVERSITY OF BATH

IT PACKAGES, ME20261

HTML, Word and Dreamweaver – creating your own web pages.

Objectives

The first IT package within module ME20261 introduces you to three methods for writing web pages:

â The first method uses HTML which is the fundamental basis of all web pages and allows you to create a page from first principles. The aim is to create a very basic page with headings, some different font sizes and a hyperlink or two.

â The second method uses the Microsoft Word package to create a web-based CV. You might include a photograph of yourself, your educational background and work experience, recreational activities and sports interests. Hyperlinks to favourite web pages should be included.

â The third method enables you to employ a sophisticated commercial package, Dreamweaver 4, for which the University has a license. The aim is to create a more sophisticated web architecture on a chosen topic, e.g. a performance artist, football team or any other theme.

Each of the three web pages should be saved onto your University of Bath Home Page where I will assess it via Person Finder.

What is HTML ?

HTML is HyperText Markup Language, which is a collection of platform-independent styles, indicated by markup tags, that define the components of a World Wide Web document. HTML was invented by Sir Tim Berners-Lee when at CERN, Geneva.

An HTML document is a plain text (ASCII) file that can be created using a text editor such as Notepad, available on your Windows-based PC.

How can I create a web page using Word?

Quite simply, open up a Word file and instead of saving it as a Word Document (*.doc), save it as a Web Page (*.htm, *.html).

What is Dreamweaver 4 ?

Dreamweaver 4 is a Macromedia package which are used to create, edit and view pages using a WYSIWYG (What You See Is What You Get) interface similar to word processing programs such as Word. All text, styles and page formatting are based on HTML standards and the HTML text may be viewed. Indeed, if you right click on any web page and View Source you can inspect the HTML text.

Accessing and editing your personal home page and create a folder for web pages

Your home page is available at the folder: H:\dos\public_html\

You can access the file by selecting the H drive and clicking on public_html.

Externally, it will be accessible to anyone at the address: http://people.bath.ac.uk/user/

(otherwise known as a URI or Uniform Resource Identifier) where user is your username.

As a depository for all of the web pages that you are going to create you need to open public_html and create a folder. Call it something like My Stuff (or Index or Documents). You can create a link between your home page and this folder where you can save your web pages. This is achieved by creating a link like the University of Bath link at the bottom of your home page.

Creating a link from your home page

From My Computer select H drive, then public_html and home.htm (or file name for you home page if identified differently).

Select Edit with Microsoft Word for Windows. Your editable home page will appear. Great!

Type in the name you have chosen for your link at the bottom of the page, e.g. My CV.

Drag over link text. Right click on dragged text and select Insert Hyperlink. You should then select the required web address or type it in. For example you might have saved a Word document to your public_html folder in .htm form or you could choose any web page.

Go to File and Save your modifications. Close.

Refresh your home page and the link should work.

Creating a very basic HTML document via Notepad

We're now going back to basics and creating a web page (HTML document) using HTML code.

Click on Start, then Programs, then Accessories, then Notepad.

You can now produce an HTML document using HTML tags such as <body> or <P>. Each document comprises head and body text. The head contains the title and the body contains the main text which is composed of headings, paragraphs, lists, tables, images, hypertext links and so on.

Try typing the following example or something similar into Notepad:

<html>

<head>

<TITLE>HTML for Sports Technologists</TITLE>

</head>

<body>

<H1>Writing web pages is fun especially if you are sporty</H1>

<P>This is the first paragraph.</P>

<P>This is paragraph number two.</P>

<A HREF="http://www.google.com">Google</A>

</body>

</html>

OK, when you’ve done that got to File and Save As. At the top of the window in the Save In box select your H drive and the folder public_html/My Stuff. Now this bit is important! The File name should end in .html and the Save as type should be All files.

You can then open the document from your My Stuff file and it should look something like this:

Writing web pages is fun especially if you are sporty

This is the first paragraph.

This is paragraph number two.

Google

 

Clicking on Google should open up the Google front page.

Now you can get some practice composing your own web pages using HTML and you should use one of the many freeware primers for inspiration which explain the function of Markup tags. The web reference given below is a useful source for HTML.

HTML reference

http://www.cfcl.com/vlb/Projects/Howto/Primer/

Many other primers are available via Google (see link above).

Saving Word documents to your web page

For the second exercise, when you want to save your CV Word document onto the web, go to File, Save as HTML and direct it to your H:public_html/My Stuff folder.

Using  Dreamweaver to create web pages (current web page package available in PC room)

Dreamweaver is not "installed" on the lab and library PCs as such. It is on the BUCS terminal servers. You can connect to a terminal server from anywhere on campus.

 

With windows XP just go to:

 

Start->Programs->Accessories->Communications->Remote Desktop Connections and enter:

 

terms

 

as the computer name. After a few seconds a remote desktop will pop up showing the standard windows logon screen.

Just logon using your normal BUCS credentials (make sure the domain name is set to "campus" - you may need to click on the Options button to check this).

You now have an open session on the terminal server.

Just go to the Start->Programs menu and start up Macromedia Dreamweaver.

 

Your H: drive and My Documents folder will be mapped so you can access your documents and save any new ones.

When you have finished just start_>logoff. If you want access to your own PCs desktop then you can minimise the remote desktop in the usual windows way.

Go to “Help” and click onto “Guided Tour” and “lessons” to get started.

To save your Dreamweaver-generated web pages go to File, then Save In box and select your H drive and the folder public_html/My Stuff and Save.

 

Happy page-making!

Dr Martin Ansell

2nd February 2006