Before the class starts'''

1
Before the class starts...

• Make sure you have started up
• English Windows 98
• Dreamweaver 3
• Netscape
• WinZip 7.0

2
Download Course Exercise Files

• In Netscape, go to http//cpcc79.cityu.edu.hk/lite
  racy/index.htm
• Click Training Exercises
• Choose FrontPage 2000 section
• Click Course Exercise File to download the
  exercise file.
• Save the file to D\

3
Unzip Course Exercise Files

• In WinZip, open file dw3_intro_ex.zip.
• Click Extract button in WinZip
• In the field Extract to, make sure is D\
• Make sure All Files option is selected
• Click Extract button

4
Make sure you have the following setting

• Make sure you have started up
• English Windows 98
• FrontPage 2000
• Netscape
• WinZip 7.0
• NetOp
• In Netscape, go to http//cpcc79.cityu.edu.hk/lite
  racy/index.htm
• Choose Course Exercises
• Click FrontPage2000 - Sample Data File to
  download the exercise file.
• Unzip the exercise file to D\

5
Design Internet Home Page FrontPage 2000

• Computing Services Centre
• City University of Hong Kong

6
What will you learn in this course?

• Web Essentials Knowledge
• How to use FrontPage 2000 to design your personal
  homepage
• How to upload files from your local PC to web
  server
• Tips Tricks in designing your homepage

7
Part 1 - Web Essentials
8
What is Internet?

• The Internet is a very large network connecting
  other small network throughout the world
• You can assume it as a single network joining
  computer all over the world
• The Internet provides information and
  communication

9
What is World Wide Web?

• Also known as WWW, W3 or just called Web
• Information (such as texts and graphics) is
  organized into pages
• The pages are linked together to form a Web (or
  simply, a home page)

10
Browser

• For viewing web site
• Two most popular browsers - Netscape- Internet
  Explorer (IE)

11
Uniform Resource Location (URL)

• The address of a homepage on the Internet
• FormatFile_type//servername/filenamee.g.
  http//www.cityu.edu.hk/ http//www.cityu.edu.
  hk/index.htm http//personal.cityu.edu.hk/
  99999999/

12
Uniform Resource Locator (URL)

• The address of an internet file (such as web
  page) on the Internet
• example http//www.cityu.edu.hk

13
More about URL (1)

• (1) -- http//www.cityu.edu.hk/(2) --
  http//www.cityu.edu.hk/index.htm
• QuestionWhat is the difference between them?
• AnswerAlthough URL (2) has one more thing --
  index.htm, they both point to the same page --
  the first page of CityU web site.

14
More about URL (2)

• http//personal.cityu.edu.hk/99999999/where
  99999999 Your Student ID

15
What is Web Site?

• A collection of related web pages
• Usually those web pages are stored on the same
  host computer.

16
What is Web Page?

• Information in WWW which organized into pages
• Documents written with HTML
• Pages linked together by hyperlinks

17
What is Homepage?

• The first page of the web site
• Usually the file name of homepage is index.htm
  (or index.html). However, it is NOT a must

18

• Web page All pages in the Website .htm
• Homepage The First Page of the
  Website index.htm

19
HTML

• Hyper Text Markup Language
• e.g. These are ltbgtbold textlt/bgt and ltIgtitalic
  textlt/Igt.gt These are bold text and italic text.

20
Web Server

• A place for you to place your web-site-related
  files such as html, images and sound files
• For students, their web server in CityU
  ispersonal.cityu.edu.hk

21
Part 2 - Using FrontPage 2000
22
What is FrontPage?

• Developed by Microsoft
• A software which make the process of designing a
  homepage become easier
• You dont need to know how to write HTML
• Other similar software- Netscape Composer-
  Macromedia Dreamweaver

23
In this course, you will make...

• A sample web site which contains 4 web pages.
• index.htm
• profile.htm
• gallery.htm
• links.htm

24
Your Web Site Structure
index.htm
profile.htm
gallery.htm
links.htm
25
Page Formatting

• Paragraph Style Formatting
• Text Formatting
• List
• Other Page Elements

26
Page Properties

• Page title
• Background sound
• Background image
• Background color
• Default Color of Text, Hyperlinks, Visited
  Hyperlinks, and Active Hyperlinks

27
Image

• Three kinds of image formats used in Internet
• GIF (Graphic Interchange Format)
• JPG / JPEG (Joint Photographic Expert Group)
• PNG (Portable Network Graphic)

28
GIF vs JPEG

• GIF
• less compression, less colour,can be transparent
  image, animated GIF
• JPEG / JPG
• higher compression, more colour, high degree of
  degradation (pixel loss)

29
PNG

• New web image format
• Have the advantages of both GIF JPEG

30
Inserting Image

• From Clip Arts
• From Local Files

31
Table

• Functions
• As a table
• As a layout manager (i.e. invisible table)
• Table properties, Cell properties

32
Hyperlinks

• Provides jumps to other parts of the same
  homepage (Bookmark) or to the different homepage

33
Types of Hyperlinks

• Link with pages in the same web site(or called
  Local Link)
• Link with the pages in the other web site(or
  called External Link)
• Link with Email Address
• Link with Anchors within the same page(or called
  Bookmark)

34
Type of Appearance of Hyperlinks

• Three kinds of appearances of hyperlink
• Underlined URL
• Underlined Texts
• Images

35
Frame

• Can divide a page into two or more sections
• Can be formed horizontally, vertically or a mix
  of both.

36
Frame
Left.htm
Right.htm
index.htm
37
Part 3 - Upload Files to Server
38
Steps for Uploading Files

• Step 1
• activate your own account in the web server
• Step 2
• use File Transfer Protocol (FTP) (such as WS_FTP)
  to upload files to your account

39
Activate Account in Web Server

• If this is your first time to upload files, you
  need to activate your own account
• Windows 95/98/NT Start Menu -gtRun -gt Type telnet
  personal.cityu.edu.hk
• Enter username gt Your student ID
• Enter password gt Your CityLink Plus password

40
Activate Account in Web Server (2)

• Type mkdir public_html and press ltEntergt key
• Type setup_perweb and press ltEntergt key
• Type exit and press ltEntergt key

41
Create your own account (contd)

• Type mkdir public_html and press Enter
• Type setup_perweb and press Enter
• Type exit and press Enter
• If command not found/usr/local/public/setup_scri
  pts/SETUP_GENERAL

42
File Transfer Protocol (FTP)

• Upload the homepage-related files from your local
  PC to the web server
• Most common FTP tools
• WS_FTP

43
Steps for using FTP

• Enter the following setting
• Host name personal.cityu.edu.hk
• UserID Your Student ID
• Password Your Citylink Plus password

44
(No Transcript)
45
Steps for using FTP (2)

• In Local Site, change to the drive and directory
  which the web-page-related file located
• In Remote Site, change to /public_html/
• RememberUpload all the files INTO the directory
  /public_html/, NOT OUTSIDE the directory

46
Steps for using FTP (3)

• Select the web-page-related files in the Local
  Site
• Transfer the files from the Local Site to the
  Remote Site

47
How to view your web site?

• Enter the URL in the browserhttp//personal.cit
  yu.edu.hk/99999999where 99999999 is your
  Student ID