Web Authoring Unit 1

breezebongAI and Robotics

Nov 6, 2013 (3 years and 11 months ago)

80 views




1










A
.

Why should I learn to make web pages?




Web pages look wonderful.



They can display photos and moving pictures.



They can play music, and make sounds.



They can display art work.



And, of course, you can place your web pages on
the Internet, for
everyone to see.



B.

Difference between web page and web site


Web pages

are grouped into
web site

and are linked together by
hyperlinks
.
















In this term, you are required to create a personal web site (
個人
網站
⤠w桩hh c潮oa楮i seve牡氠web 灡来s a扯畴 y潵牳e汦⸠A汬 t桥
web 灡来s wi汬 be s瑯牥搠楮i 瑨e

public_html


folder in your
home directory.


The URL of your personal web site is:


_____________
____________________________________________

Web Authoring

Unit 1

Web Site

Web pages




2


C
.

Web Development Workflow (
流程
)


To create
a good

web site, we should
follow these steps:










































Most importantly, you have to update your web site frequent
ly to ensure the
contents of your web
site
are

up
-
to
-
date!



Let’s see some examples of personal web site

we found from the Internet:



i)

http://hk.geocities.com/sandy19820107/


ii)

http://www.slcss.edu.hk/~971321/index.htm


iii)

http://www.slcss.edu.hk/~021221/index.htm



1.
Define a Subject


2.
Collect Materials about the Subject

3.
Organize Co
ntents of your Web Pages

4.
Design How to Present Your Information

5.
Write your Web Pages

6
.
Upload your Web Pages to the Internet

Collect

information from books or
other existing web sites
.

Design paths you want the reader to
follow (story
boarding).

e.g.

Formal/Funny?




Layout Design



What pictures, photos are needed.



Colours, font types and size in
your web pages should be
consistent
.

Raymond’s
Homepage


My Profile..

My School..

My Friends..

Contact..

My Profile

My Friends

A link to
my school
homepage

Send me
an email




3


CLASSWORK


(
1
)

Name as many components as possible that can b
e found in a typical personal
web site
.



e.g.

My Profile (
我的個人檔案
)





















)

W桡琠ta步⁡⁰ 牳潮a氠le戠獩瑥⁡瑴牡c瑩癥?




e⹧.

C潬潲o畬⁣汩灡u瑳t灩捴畲es⁡牥 a摤d搮























4


D
.

Introduction to Web Building Tools



There are m
any web
-
building tools. For examples:


(i)


Microsoft FrontPage Express

(ii)


Microsoft FrontPage


(iii)

Macromedia Dreamweaver



All the above programs are
WYSIWYG

(What
-
you
-
see
-
is
-
what
-
you
-
get) editor.
You don’t need to worry about the
HTML

(Hypertext Markup La
nguage) tags.
You can create a web page as easy as creating a document in a word processor.


In the coming lessons, we will learn how to use DREAMWEAVER 4 to write
our web pages.



E
.

Dreamweaver Work Area


The Dreamweaver work area mainly contains a Doc
ument Window, Floating
Panels, a Launcher Bar, a Property Inspector and an Object Panel.




The document window displays the current document.



The Launcher bar contains buttons for opening and closing inspectors and
panels



The Object Panel contains buttons f
or creating and inserting various types
of objects such as images, layers, tables and frames.





5


Mini
-
Project


In this term, you are required to create a personal web site with the
following structure:


Lets see a sample web site from Mr. Pau!


http://www
.slcss.edu.hk/sample/index.htm


Who am I?

Describe
something

about you (in table
form).

A portfolio
that displays
the project works you
have done in C.L. and
other subjects


Some web sites that
you like to go. These
web sites should be
grouped into different
categories.

Just a link to our
school w
eb site.

My
Works

My Favourite
Links

My School


Email Me


My
Guestbook


?

Copyright

This is the front page of your personal
web site. A menu that
links to the pages
below is required.


A counter (can be applied from
Statcounter.com
) should also be added to
count the number of visitors.

Home




No. of Visitor: 099




Visitor can click
this link to send
email to you.

Just a link to your
guestbook (
You can
use the guestbook
provided by hkedcity
)

Design your own
p
age with any topic
you like.

This is a page that
shows all your
picture

sources.




6


Marks will be given according to the following aspects:


Contents

10

Design

10

Skill

10

Clarity

10

Total Marks:

40


*
Detailed marking

scheme will be displayed later on our web site:


http://intranet.slcss.edu.hk/cl/oa
s/default.asp




















The weighting of this mini
-
project is

2
0
%
of the total scores.


So, put all your efforts to make good result on it!




7











A.


Before Building your First Web Site





Please copy all folders from
J:
\
Subjects
\
CL
\
Form 2
\
w
eb

to your
H:
\
public_html.


These folders contain some graphics files for you to build your web site.




After
successfully

copied the folders, your

Public_html


folder should look
like this:



















IMPORTANT NOTES:



Unlike PowerPoint, all

graphics files MUST be saved before
attaching them to your web pages.




Below are some web sites that allow you downloading clipart freely.


1.

http://www.homepagediy.com/homepagediy/wwwicon.htm

2.

http://www.free
-
clip
-
art.net

3.

http://www.hkedcity.net/resourc
es/ires/home/igal_index.phtml

4.

http://www.clipart
-
graphics.net

5.

http://www.animfactory.com

Web Authoring

Unit
2

myworks




8




Remember! All Internet materials have copyrights. You must obtain the
authorization from the web owner before downloading any materials from
his/her web site.



I
n fact
, you can create your own graphics files by using graphics software such
as PaintBrush
or

PhotoImpact
.



In order to encourage creativity,
BONUS MARKS WILL BE GIVEN IF
YOU CAN CREATE YOUR OWN GRAPHICAL WORKS.





B.

Build your First Web
Page


1.

To run
Dreamweaver, click
Start



Programs



Macromedia
Dreamweaver 4



Dreamweaver
.


2.

A new document (called untitled
-
1) is opened.


3.

In the Title box, enter

the following texts:







[Your Name]’s Homepage

These texts will be shown on the title bar of the web

browser.


3.

Select
File



Save

to save the file.

Since this is the front page of your web, it MUST be named as
“INDEX.HTM
”.




9


4.

Now, follow teacher

s instructions to modify the page as follows:



















Note:


(a)

To insert a picture,

click
Insert Picture

button on
the
Object Panel

window.


(b)

To insert a horizontal line, select
Insert



Horizontal Rule

from the menu
bar.


(c)

To insert background image, select
Modify



Page Properties

from the
menu bar. In the Page Properties window, Click

Browse to select a graphic
file for the background.








5.

Save

the index file again.

Image File:

workstation_M.gif

Background Image:

background11_L.gif

Add the following text:

Best viewed by MS Internet Explorer 5.0 or above with resolution 800 x 600.

Copyright (c) [your name]. All rights r
eserved.

Add a heading:

[
Y
our name]

s
Homepage

Add text:

[
Who am I?] [My
Works] [My Favourite
Links
]

[Email Me]

Add a
Horizontal
Line
here.




10


C
.

Add an email link


1.

On the front page, highlight the text
Email Me
.





2.

In the Property Inspector window, type
mailto:sl
-
xxxxxx@hkedcity.net

in
the
link

box. (
Note:
xxxxxx

is your registration number)










D
.

Test your Web
Page



From the

File


menu, choose

Preview in Browser





iexplorer


to
preview the web page in the web browser.
OR


Click


and then choose

Preview in iexplorer






OR


Pres
s
F12
.



Classwork








1.

Which button helps you insert picture on your web page?

___________

2.

Which button helps you center the text on your web page?

___________

3.

Which button helps you change the font size of the text?

___________

4.

Which button helps you change the colo
u
r of the text?

___________

(8)

(1)

(2)

(3)

(4)

(6)

(7)

(5)




11


Homework (1)







Mark:
/15

Preparation Work for the coming Lesson



1.

Download the following cliparts from our suggested clipart web sites. They will
be used for building our w
eb site in the coming lessons.


At least
2

buttons

At least
2

separators

At least
2

backgrounds



SAVE all the files in your
H:
\
public_html
\
images
.

(5

M
arks
)



2.

In the coming lesson, you have to create a page with several hyperlinks to your
favourite web si
tes. Write down at least FIVE URLs of your favourite web sites.


Site Name

URL























(5

M
arks
)



3.

Choose
ONE

English or Chinese composition that you like the most. Type the
whole passage in Microsoft Word. Save the file as

mycomp
.do
c


in your
H:
\
public_html
\
myworks
\
.

(5

M
arks
)






12














A.

Modify
the

Index.htm


file


1.

Run
Macromedia Dreamweaver 4.0

from the
Start

menu.


2.

Select
File



Open

form the menu bar.


3.

Go to
H:/public_html
and choose
index.htm
.


4.

Click
OK

to open it.



Web Authoring

Unit
3




13


B
.

D
ownload an Image File from the Web



Now, you want to change the graphic on the front page. Let

s go to one of our
suggested clipart web sites and download one picture you like the most.




How to download image?


Point to the picture you like. Right
-
cli
ck and choose

Save
Picture

As ”

from the menu.




Save the picture in
H:
\
public_html
\
images
.


Replace the picture on the front page with the picture you have chosen from the
web.
















Go home to download some pictures beforehand. You may then

use them to
build the other web pages.



You have already created the front page
of

your personal web site.
It’s time to create the second page and establish a link between the
front page and the second page.



C
.

Create

the

Who am I?


page


1.

Select
File



New

to create a new document.


2.

Save the file as


WHOAMI.HTM

.


3.

Add a title to this page:


Who am I?



Change the font and font size of this title.





14



4
.

Use the
Table

tool


to create a
2 x 7

table below the title.



5.

Type in your personal information

in the table. Here is an example:



6.

Highlight the whole table.




















The Property Inspector will change like this:


You can define the
number of rows and
columns here.

You can define width
and height of the table.

Background colour
of the table


Border colour
of the table


Table

猠潲se爠
睩摴w
=
=



15



Activity (I)


Change the table width to 600 pixels.

Change the Background color and the Border color o
f the table.




5.

Highlight the first column. The Property Inspector will look like this:









Activity (II)


Change the column width of the first column.

Change the background colour of the first column.

Change the font and font size of the te
xt to make the table more eye
-
catching.




At last, the

Who am I?


page should look like this:














Background Colour
of the selected cells

Border colour of
the selected cells

Merge se
lected cells




16


D.

A
dd a Home Button to the Page


It is very important to have a

Home


button to let visitor go back to the front
page.


1.

Use the
Insert Image



button to insert an image named

home.gif


at
the bottom of the table.


2.

Select the home image, type
index.htm

in the
Link

box in the Property
Inspector window.









E.

Save and test the

Who am I?


Page


1.

Save the file.

2.

Press F12 to preview the pag
e in MS Internet Explorer. Test the hyperlink.


1

2




17


F.

Update the “Who am I?” Link on the Front Page


1.

Open the “index.htm” file.

2.

Select the text “[Who am I?]” and then add a
hyperlink

to point to the
“whoami.htm” file


3.

Save the file.

4.

Press F12 to test th
e web pages and the hyperlink created.


G.

Create

the

My Favourite Links


Page


1.

Select
File



New

to create a new document.


2.

Save the file as


MYLINKS.HTM

.


3.

Add a title to this page:


My Favourite Links




Change the font and font size of this title.


4.

Below the title, insert a table with no border.


5.

In the table, type in at least 5 names of your favourite web sites. Here is an
example:













Create bulleted List





18


6.

Select all the text in the table


7.

Click the Unordered List

button in the Pr
operty Inspector window.


















8.

Change the font type and the font size of the text. The page should look like
this:











H.

Add Hyperlinks to the Bulleted items


1.

Highlight the first bulleted item. Type the corresponding URL in the

Link


b
ox. For example:

2.

In the
Target

box, select
_blank
.











3.

Repeat step 1 to 2 for the rest of the bulleted items.

1

2




19





Question:


What is the use of target

_blank

?


________________________________________________________________





H.

A
dd
Links betwe
en this Page and the Front Page


Again, add a

Home


button to let visitor go back to the front page.














Open “index.htm” and update the “My Favourite Links” link on the front page.



I.

Save and test
Web Pages


1.


Save
all
the file
s
.

2.


Press F12 t
o preview the page
s

in MS Internet Explorer. Test the hyperlinks.





20


Homework (2)

Mark:
/10




1.

Apply the following changes to the page

Who am I?

.


(a)

Add a background image.

(b)

Add more personal information to the table.

(c)

Add a hyperlink to

Shun Lee Cathol
ic Secondary School


(d)

Add one or more
clipart

to the page.

(
5
M)


2.

Apply the following changes to the page

My Favourite Links

.


(a)

Add a background image.

(b)

Add more links to the list. You
should

divide the links into
different categories.

For example:


My Fr
iend

s Homepage



Chan Tai Man



Wong Chung Ming



……



Search Engines



Yahoo!



Altavista



……



Newspapers



Ming Pao



SCMP



……




(c)

Add one or more cliparts to the page.


(
5M
)




21












A.

A
dd
the “My Works” page



The “My Works” page is a page that used to prese
nt some of your works created
in C.L. and other subjects. For example, the picture GRASSLAND or the poster you
created in the last term, the composition you wrote in the Chinese/English lesson, the
cushion you made in the H.E. lesson, and the picture you d
rew in the Art lesson, can
be good masterpieces to be displayed on this page.


Use the techniques you learned in the previous chapters, create this page and
link it to the front page. Below is a sample page you can follow:


http://www.slcss.edu.hk/sample/m
yworks.htm









Web Authoring

Unit 4




22

















































23


B.

Creating a rollover button



A rollover is an image that changes when the mouse pointer is over it. A rollover
actually consists of two images: the primary image (the image displayed wh
en the
page first loads) and the rollover image (the image that appears when the pointer
moves over the primary image).




First of all, we need to create two buttons in PhotoImpact.


Select

開始



程式集



Ul ead Phot oI mpact

6



Pho
t
oI mpac t

6

t o r un
Phot oI mpa ct
.


Sel e ct
Component Des i gner

(
元件設計師
) f r om t he
Net work

(
網路
) me nu.








24


From the
Button

(
按鈕
)

template list, select
Irregular_2

(
不規則
_2). You will

see a
lot of button templates in the window.


Select one button type you like and click
Next

(
下一步
) button
.


D
efine the properties of the button. For example, change the title of the button to

Who am I?
”.



After defining the properties of the button, click
Export

(
匯出
) to create the image.


Save the file as

whoami_p.jpg
” in the
Images

folder. This is the prim
ary image for
the rollover button.


Green




25


Now, change the color of the button and save the button image as “
whoami_r.jpg
” in
the
Images

folder. This is the rollover image for the button.






Now, go back to Dreamweaver and open the front page (index.htm) of

your web site.


Yellow




26


Delete the text “Who am I?” on the front page. Then click
Insert Rollover Image

button in the Object panel to open the Insert Rollover Image dialog box.



In the dialog box, browse and select the original image and the rollover imag
e. Also,
type the path (i.e. whoami.htm) to the URL. Then click OK button.




Save the file and press F12 to preview the page.




Self
-
Test


Create rollover buttons for the other menu options on your front page.

(You may find a sample page from
http://www.slcss.edu.hk/sample/index_rollover.htm
.)



Note:


If you want a button with transparent background, you need to save the image file
as GIF format.





27


B.

Adding a Hit Counter to the fron
t page




It is very common to have a hit counter placed on the front page. It is used to count
the number of visitors who have browsed your web site.


To create a hit counter, you should first of all find a web site that provides free hit
counter. I
n the following example, we use the counter service provided by
Statcounter.com

(
http://www.statcounter.com
)






28


1.

Please go to
http://my.statcounter.com/reg
ister.php
.











2.

Complete the form and click “Create my Account” button. Another form will
then appear.





3.

Fill in this form and Click “Create Project” button.




29



After successfu
lly registered the service, the following screen will appear.




4.

Select “Install Code” to view the HTML codes of the counter




5.

Copy the codes

from the text box.






30


6.

Go back to
Dreamweaver, select
Code

from the
View

menu, paste the code in a
suitable position:


7.

Then select
Design
from the
View

menu to change the display mode back to
WYSIWYG.



You should see some special tags on top of the horizontal line.

Don’t worry! Just save the file and press F12 to preview the page.








31


To check th
e visitor’s statistic:


1.

L
ogin the web site (http://my.statscounter.com)



2.

After successfully login, you will see the following main menu.



3.

Select to view the real
-
time statistic report.






32


Mini
-
Project






Mark:
/40


Ple
ase complete your personal web site by


1.

completing ALL the web pages as specified on page
51

(or see
sample web site at
http://www.slcss.edu.hk/sample
).

2.

enhancing the web site by re
-
designing each page and adding more
information.

3.

add more masterpieces i
n the “My Works” page.



Marking Scheme:



Content

= 10M


Design

= 10M


Skill


= 10M


Clarity

= 10M




Deadline for this homework: __________________






Sample Web Site:


http://www.slcss.edu.hk/sample/index.htm


http://www.elabhk.net/computer/frcss/f1
/index.htm


http://www.elabhk.net/computer/frcss/f2/frame.htm




33













A.

How to down
load the web pages to your home computer
?


1.

Using Internet Explorer (Version 5.5 or above)


In the address box, type in
ftp://www.sl
css.edu.hk

and then press enter.

The Login dialog box appears.


Type in your username and password

(Same as the username and password
of
your school network account
)
. Then click the
Login

(
登入
) button.


After successful login, you should see all the folders in your home directory.



Web Authoring

Appendix




34


If you are using IE 6.0, you can drag and drop the files and/or folders to the local
directory just like what you did in the window explorer.


However, if you
are using IE 5.5, you should right
-
click the file/folder and then
select
Copy to Directory

(
複製到資料夾
)

and save the file in the local directory.



2.

Using WS_FTP Program


First of all, you have to install
an

FTP program in your home computer.

You are suggested

to install WS_FTP LE

because it is free of charge.

This software can be downloaded from:



http://www.slcss.edu.hk/download/
ws_ftple
.exe




After successfully install WS_FTP LE, the following program group appears in
the START menu.

















1.

Fro
m the
Start

(
開始
) menu, choose
Program Files

(
程式集
)


WS_FTP



WS_FTP95 LE
.

2.

In the Profile Name box, type
slcss
.

3.

In the Host Address box, type
www.slcss.edu.hk

4.

Uncheck the Anonymous box.

5.

In the Login box, type your login name (same as the login name of your
school networ
k account).

6.

In the Password box, type your password (same as the password of your
school network account).

7.

Click
OK
.




35




















8.

After successfully login, the following screen appears.




















9.

In the Remote Site window, open
the
public_html

folder. This is, in fact,
the public_html folder of your home directory.


10.

In the Local System window, open the disk/folder that you want to save the
files.


11.

Select the files you want to download in the remote window. Then click on
t
he
<
--

button to copy the files from the school server to your home
computer.

Open

the folder “
public_html

瑨慴⁣潮瑡楮猠y潵爠r楬es
.
=
pe汥l琠t桥⁤楳欯景汤f爠yo甠睡湴n
瑯⁳慶t⁴桥
=
睥戠b~ge⁦楬=献
=



36



















12.

After downloading the files to your local disk / folder, you can use
Dreamweaver 4.0 to edit you web pages.


Select the files you want to
download
.

Click this button to start the
download
.




37


B.

How to upload

the
updated
web pages
to
the web server?


1.

Using Internet Explorer (Version 5.5 or above)


Login the school web server using Internet Explorer.


Just drag and drop the files and/or folders from the local directory to the IE.

Those files and/or folders will be uploaded automatic
ally.



2.

Using WS_FTP Program


1.

Use WS_FTP LE to login the school web server.


2.

In the Remote Site window, open the
public_html

folder.


3.

In the Local System window, open the disk/folder where the updated web page
files are saved.


4.

Select the fil
es you want to upload to the remote window. Then click on the
--
>

button to copy the files from your home computer to the school web
server.
















Sel
ect the files you want to
upload.

Click this button to start the
upload.




38









Q1.


Everything works fine when I edited my homepages from the floppy disk.
However,

after I ha
ve

uploaded all the files to the Internet, I found some
pictures missing when I browse my homepages in the Web browser. Why?


Answer:



There are
three

possible reasons:


(1)

Some pictures are not uploaded to the Internet. So, check whether you
have

uploaded
all
the files or not.


(2)

Unix system is used in HK
edCity
. In Unix system, the files named
“AAA
.GIF
”, “aaa
.gif
” or “Aaa
.gif

are treated as different files
. This
means that the path that links the picture file is
case
-
sensitive

(
大小寫要
一致
)
.

For example:


If the file name of the picture is “
BK1.GIF
” but the path that links the
picture is “<img src=“images
\
bk1.gif
”>”, then the picture will not appear
on the web page.


Therefore, I suggest you to
set all filenames to lower case

and wit
hout
space between characters
so that the picture link can point to the correct
files.


(3)

The path that links the picture file is wrong!



Suppose you have saved a picture file “bk1.gif” in the folder
images

under
the
public_html

directory.


There are 2 way
s to define the path of the file.

(a)

Absolute path (
絕對路徑
)

e.g. <img src= “http://sl.hkcampsu.net/~sl00001/images/bk1.gif”>


(b)

Relative path (
相對路徑
)

e.g. <img src= “images/bk1.gif”>


In your case, the path that links the file may be written as

<img src= “
file:///A:/images/bk1.gif”>. “file:///A:/” means th
e file is
located in drive A:. That’s why others can’t see the picture in the Internet.

Web Authoring

Q&A




39


Q2.


How to create FRAMES in my homepage?


Answer:



It is a good idea to divide your homepage into frames. However, there are many
different ways to create frames. Her
e is one example:



Source Code

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>


<FRAMESET COLS="120,*">


<FRAME SRC="a.htm" NAME="F1">


<FRAMESET ROWS="100,*">


<FRAME SRC="b.htm" NAME="F2">


<FRAME SRC="c.htm" NAME="F3">


</FRAMESET>


</FRAMESET>

</HTML>

O u t p u t













E x p l a n a t i o n


5
th

Line:

The page is divided into 2

parts: left & right frame. The number
120

defines the width of the left frame.


6
th

Line:

The left frame shows

a.htm

and the name of the left frame is
F1
.


7
th

Line:

The right frame is further divided into 2 parts: upper & lower frame.
The number 100 defi
nes the height of the upper frame.


8
th

Line:

The upper frame shows
b.htm
and the name of the left frame is
F2
.


9
th

Line:

The lower frame shows
c.htm

and the name of the left frame is
F3
.


Line
No.

1

2

3

4

5

6

7

8

9

10

11

12