1 creating a professional website i mutsumi ogawa - [email protected] lg 400 – wk10

20
1 Creating a professional website I Mutsumi Ogawa - [email protected] LG 400 – wk10

Upload: alexandrea-hickman

Post on 31-Mar-2015

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

1

Creating a professional website I

Mutsumi Ogawa - [email protected] 400 – wk10

Page 2: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

2

General Information

Course homepage http://courses.essex.ac.uk/lg/lg400 Updated after session runs

Email: [email protected]

2

Page 3: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

33

Introduction

Making your work available online opens it up to the rest of the academic and non-academic world.

This session focuses on helping you build a very simple webpage where you can include information about your academic activities.

Page 4: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Outline

Topics of this week’s session will include: Typical structure of a webpage What a professional website may include Introduction to web building using Word Inserting hyperlinks Inserting headings and font formatting

(bold, italics) Hosting your website on the University’s

privatewww server

4

Page 5: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Typical structure of a webpage

Header

Main body

Footer

5

Page 6: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Typical structure of a webpage

Header

6

Page 7: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Typical structure of a webpage

Header

Main body

7

Page 8: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Typical structure of a webpage

Header

Main body

Footer

8

Page 9: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

What a professional website may include

Bio information Research interests Teaching Research (assignments, papers, talks,

projects) Favourite links Possibly a link to a personal page or a

page of personal interest

9

Page 10: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

University Web Server <privatewww>

All essex users have got space on the webserver where they can upload information about their academic activities. For more information see the privatewww.

Your website is of the form http://privatewww.essex.ac.uk/

~essexusername where essexusername is your essex

username Navigate to it and see what it looks like!

10

Page 11: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Where can I find the Web server?

In the labs: Double click on my computer icon Locate the ‘MyWeb’ drive near your M:

drive

Double click on this – you are now in your web space drive!

‘index’ file is the first page of your website.

11

Page 12: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Creating your first webpage Using Word 2007, open a new

document. Click on the view tab – and select web

layout. Type your page content

Do not forget to use headings and subheadings to make the structure of your webpage clearer

Include sections like bio, papers, talks, teaching etc.

12

Page 13: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

What a professional website may include

Bio information Research interests Teaching Research (assignments, papers, talks,

projects) Favourite links Possibly a link to a personal page or a

page of personal interest

13

Page 14: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Saving your webpage

Save as .htm or .html: Click on Save as , then select Other formats In the dialogue box that will appear, type

index.html and select Web Page, Filtered (*.htm; *.html)

Click on save

14

Page 15: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Uploading your webpage to the Web server

All essex users have got space on the webserver where they can upload information about their academic activities. For more information see the privatewww.

Your website is of the form http://privatewww.essex.ac.uk/

~essexusername where essexusername is your essex

username Navigate to it and see what it looks like!

15

Page 16: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Uploading your webpage to the Web server

Now locate the index.html file you created earlier

Copy it into your www server

Open a browser and navigate to http://privatewww.essex.ac.uk/~essexusername where essexusername is your essex username You should now be able to see your

homepage!!!

16

Page 17: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Edit your website

Go back to your www server. Left click on the index.html file and select Open

with then choose programme. In the list of programmes that will appear,

locate Microsoft Word. Select this and click OK. This should open the file you were working on

earlier. If you directly click on the index.html file, it

opens your webpage on Internet Explore, or Chrome, etc, in which you cannot edit the page.

17

Page 18: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Inserting hyperlinks

hyperlink (or link): a reference to a document that the reader can directly follow. The reference points to another document or to a specific element within a document (wikipedia)

Your hyperlink will have two parts: the text and a link.

18

Page 19: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

Inserting hyperlinks

write or select some text that you would like to create a link from

Select the insert tab and click on hyperlink. Type the URL address of the form (http://)

in the box, then press OK

You can also create links to other documents or other pages, by selecting from the pages in your www server directory.

19

Page 20: 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

20

Next session

More on creating your website such as: Inserting images Changing the font and background colour of your page Inserting an embedded object (video, other objects) Academic social networking sites Alternative hosting options

For PG students:If you would like your homepage linked from the dept website, please let me know.

20