Table of Contents

holeknownSecurity

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

223 views

©2003 Trinity University


All Rights Reserved

Table of Contents


TABLE OF CONTENTS

................................
................................
................................
................................
.....

1

BASIC WEB DESIGN

................................
................................
................................
................................
...

3

DEVELOPING A WEB
SITE

................................
................................
................................
.......................

3

D
ESIGNING
N
AVIGATION
B
ARS
................................
................................
................................
.......................

4

P
AGE
D
ESIGN

................................
................................
................................
................................
...................

5

D
ESIGN
C
ONCEPTS

................................
................................
................................
................................
...........

6

INTRODUCTION TO HTML

................................
................................
................................
.......................

7

W
HAT IS
HTML?

................................
................................
................................
................................
..............

7

HTML

D
OCUMENTS

................................
................................
................................
................................
..........

7

Structure

................................
................................
................................
................................
....................

7

Creating an HTML Document

................................
................................
................................
.............

8

Markup Tags

................................
................................
................................
................................
.............

8

Heading

................................
................................
................................
................................
................................
..

9

Paragraph

................................
................................
................................
................................
..............................

9

Line Break

................................
................................
................................
................................
...........................

10

Comme
nts

................................
................................
................................
................................
...........................

10

INTRODUCTION TO FRON
TPAGE

................................
................................
................................
......

10

W
HAT IS
F
RONT
P
AGE
?

................................
................................
................................
................................
..

10

C
REATING A
N
EW
W
EB
P
AGE

................................
................................
................................
........................

11

P
AGE
V
IEWS
................................
................................
................................
................................
....................

12

P
AGE
P
ROPERTIES

................................
................................
................................
................................
..........

13

W
ORKING WITH
T
EXT

................................
................................
................................
................................
....

14

Formatting Text

................................
................................
................................
................................
....

14

Font Type

................................
................................
................................
................................
.............................

15

Font Style

................................
................................
................................
................................
............................

15

Font Size

................................
................................
................................
................................
..............................

15

Font Color

................................
................................
................................
................................
............................

15

Formatting Paragraphs

................................
................................
................................
.......................

16

I
NSERTING A
P
ICTURE

................................
................................
................................
................................
....

16

Modifying Picture Properties

................................
................................
................................
.............

16

Cropping Graphics

................................
................................
................................
................................

17

H
YPERLINKS

................................
................................
................................
................................
....................

18

Bookmark Links

................................
................................
................................
................................
.....

19

Email Links

................................
................................
................................
................................
..............

20

S
AVING
Y
OUR
W
EB
P
AGE

................................
................................
................................
..............................

20

T
ABLES

................................
................................
................................
................................
............................

21

Creating a Table
................................
................................
................................
................................
....

21

Table Properti
es

................................
................................
................................
................................
....

22

Working with Cells

................................
................................
................................
...............................

23

Cell Properties

................................
................................
................................
................................
....................

23

Spanning Cells

................................
................................
................................
................................
...................

24

Inserting Rows and Columns

................................
................................
................................
...........

25

CREATING A WEBSITE

................................
................................
................................
............................

25

S
AVING
Y
OUR
W
EB
S
ITE

................................
................................
................................
...............................

28

Basic Web Design

IMS Technology Training

-

2

-

©
2003 Trinity University

W
ORKING ON
Y
OUR
W
EB
S
ITE

................................
................................
................................
.....................

28

Creating Web Site Structure

................................
................................
................................
............

29

Viewing Yo
ur Website in a Browser

................................
................................
...............................

32

Creating Titles for Website Pages

................................
................................
................................
..

33

Themes

................................
................................
................................
................................
.....................

35

Publishing Websites

................................
................................
................................
.............................

38

BIBLIOGRAPHY & GENER
AL RESOURCES

................................
................................
....................

40

G
ENERAL
R
ESOURCES

................................
................................
................................
................................
....

40


Basic Web Design

IMS Technology Training

-

3

-

©
2003 Trinity University

Basic Web Desig
n

This hands
-
on workshop introduces you to the basic principles of Web site design and
authoring using HTML. You will then use FrontPage to create your web page or site and
publish it to the World Wide Web for viewing.


Objectives



Understand and apply des
ign principles when creating and modifying a Web site.



Recognize HTML and Web terminology such as hypertext, tags, browser, and
HTML.



Identify the basic structure of an HTML document and create a simple Web page
using HTML.



Create a new Web site or modify
an existing website using FrontPage.



Use tables to design the layout of a Web page.



Understand how typography works on the Web and format fonts and paragraphs..



Set Web page properties such as background colors and images.



Understand graphic formats for W
eb pages; insert graphics, modify picture properties



Developing a Web Site

As with any other project, the first phase in creating a new web site is planning. This
involves determining the site’s navigation structure, content, and page layout. It is onl
y after
this has been accomplished that HTML coding or authoring
tools like FrontPage can be used effectively to actually
create the site.

The planning process involves:



Define site purpose

o

What are the web site’s objectives?

o

Who is the target audience?

o

What is their connectivity (dial up,
broadband, network, etc.)?

o

What computers (PC/Mac) and browsers
(IE, Netscape, Opera, etc.) do they use?



Define content

o

What you have and what you need.

o

How it will be organized.
Categorize
information rather than def
ining categories
and filling them.

B
uild the site structure
around content organization
.

o

What graphics are required and how many?
Remember, the
larger the number of
graphics, the longer the page will take to download.



Develop a file naming convention and s
tick to it.

The Five Golden Rules




Create a clear visual
hierarchy on each
page.



Take advantage of
conventions.



Break pages into
clearly defined
areas.



Make it obvious
what’s cl
楣歡扬e.
=


Minimize noise.


Source:

Don’t Make Me Think,
Steve
Krug


Basic Web Design

IMS Technology Training

-

4

-

©
2003 Trinity University









Avoid spaces in file or folder names. If necessary use an underscore between words.



Determine site architecture and navigation. A simple flowchart
-
style sketch usually
works best. Hierarchical models are best suited to the web.












Sketch page layouts and content layouts to create appropriate page design.



Assess sketches for appropriateness, placement, consistency and usability, and revise
if necessary.


Designing Navigation Bars

The main goal of your website should be to
make it

easy for users

to perform useful tasks.
Develop a
clear information architecture

that is
simple
,
consistent
, and follows
convention
.











Use sticky notes to organize your navigation structure. Use one sticky
note per page and a
rrange them on a wall or table till you achieve
your desired hierarchy. Index cards can be used in a similar manner.

Web files and folders should not have any spaces and be in lowercase.
Use the underscore (_) to connect words in file names.

File names ca
nnot contain colons (:), asterisks (*), questions marks
(?), or other special characters.

Key Elements of Navigation




Site ID.



G
lobal navigation bar.



“You are here” indicator.



Local navigation bar.



Breadcrumb trail



Small text version of navigation bars (optional)

Source:
Don’t Make Me Think,
Steve Krug


Basic Web Design

IMS Technology Training

-

5

-

©
2003 Trinity University











You will know you have succeeded if your site navigation helps users answer these basic
questio
ns:



Where am I? (Site ID)



Where page am I on? (Indicator)



Where can I go? (Navigation)


Page Design

With web pages, the layout design process accounts for the arrangement of text and graphics
elements on the page. These elements can be broadly divided in
to:



Page Header
: Located at the top of the page, it includes the page banner or title and
the navigation bars.



Page Footer
: Located at the bottom of the page, this is where you insert copyright
and authoring information, the date of the most recent update
, institutional affiliation.



Side Navigation
: This is usually a rail along the side of the page that displays the
global or local navigation.


Site ID

Global Navigation

Breadcrumb Trail

“You are here” indicator

Local Navigation

Basic Web Design

IMS Technology Training

-

6

-

©
2003 Trinity University

It is usually a good policy to sketch out the page layout and identify the position of each
element on that p
age as demonstrated in the diagram below.


















Design Concepts

When designing a web site, you need to consider four basic design elements:



Appropriateness

o

Does it match with the site’s target audience?

o

Do the graphics

mesh with the site’s intended purpose?

o

Do the tone and style of the language complement the site’s objectives?



Placement

o

Place the most important information at the top of the page.

o

Use white space to create breaks between page elements.



Consistency

o

Plac
e page elements like titles, banners, logos, and navigation elements in the
same spot on every page.

Page
Header

Navigation
Panel

Page
Footer

Home Page Layout




Has to convey site identity and mission: what it is and what it’s
景f.
=


Has to provide an overview of what the site has to offer, and how
it’s organized.
=


Should provide a

way to search the site.



Has to appeal to diverse interests.

Source:
Don’t Make Me Think,
Steve Krug


Basic Web Design

IMS Technology Training

-

7

-

©
2003 Trinity University

o

Consistent visual cues provide the user with a reference point, making it
easier for them to navigate the site.



Usability

o

Make the site self
-
explanatory.

Don’t make your users think!

o

Make your “clickables” obvious.

o

Follow conventions.

o

Keep your text brief and to the point. The less there is to scan, the easier it
will be for your users to find their information.

o

Design for the lowest common denominator of
800x600 pixels in screen
resolution.

o

Screen
-
size page banners and navigation bars should not exceed 760 pixels in
width, and 410 pixels in height.





Introduction to HTML

What is HTML
?

An acronym for
Hypertext Markup Language
, HTML is the language used to

create web
documents. Contrary to popular notion, HTML is not a programming language. It is simply a
set of codes that define the layout and content of a web page so that they can be read and
displayed by a web browser.
A non
-
proprietary language, HTML ca
n be created by a simple
text editor as well as a sophisticated web authoring tool like FrontPage.

The World Wide Web Consortium, also know as the W3C, monitors the development of
HTML. As new features are added and obsolete ones deprecated (removed), it
is assigned
version numbers. The most recent version is HTML 4.01.

HTML Documents

HTML documents are made up of
tags

or angled brackets (<>) that contain an
element

within them to determine the layout and formatting of the web page. For example, <B> is th
e
tag used to define text in bold where “B” is the element contained within the tag.

Elements can also include
attribute
s, or additional information for that element. Attributes
are included inside the start tag. For example, you can specify the alignment

of images (top,
middle, or bottom) by including the appropriate attribute with the image source HTML code.

Structure

The basic HTML document
is contained within the
<HTML> </HTML>

tags and
comprises
two sections:
Head
and
Body
.

The Head contains the page

title

and
meta
-
tags

within the
<HEAD> </HEAD>

tags. Any
JavaScript code that is used, as well as Cascading Style Sheet information is also contained
within the Head.
This section will not be displayed on the web page.

Basic Web Design

IMS Technology Training

-

8

-

©
2003 Trinity University

The
Body
holds the actual content of
the page (text, graphics, lists, etc.) contained within the
<BODY> </BODY>

tags. The <HTML>, <HEAD>, <TITLE>, and <BODY> tags are also
referred to as
document tags
.

A basic
HTML document would look something like this:

<HTML>

<HEAD>

<TITLE>A Simple HTML Ex
ample</TITLE>

</HEAD>

<BODY>

Welcome to the world of HTML. This is the first paragraph.

</BODY>

</HTML>







Creating an HTML Document

Since HTML documents are essentially text files with the extension
.htm
or
.html
, any basic
text editor like Notepad W
ordPad can be used to create one. You can also the HTML view in
authoring systems like FrontPage or Dreamweaver, or HTML hand coding applications like
Home Site.

HTML documents do not recognize white spaces created by formatting tools such as
spaces,
linef
eeds, and carriage returns
. These are automatically compressed into a single space when
the page is displayed in the browser. For instance, the HTML code in the example above can
also be written out as

<HTML>

<HEAD><TITLE>A Simple HTML Example</TITLE></HEA
D>

<BODY>Welcome to the world of HTML. This is the first
paragraph.</BODY>

</HTML>

and it would still display in exactly the same manner in the browser. However, it is harder to
read and edit in this format. Consequently, for clarity in reading and editin
g HTML, it is best
to structure the document using carriage returns and indents.

Markup Tags

The information contained in the Body section of an HTML document is formatted using
markup tags
. These tags allow us to create paragraphs, line breaks, headings,

lists, etc. They
can also be used to set the position of the content using alignment attributes. The most
common markup tags are:



Tags are case inse
nsitive, i.e. <B> will work as well as <b>.



Not all tags work with all web browsers. If a browser does not
recognize a tag, it simply ignores it. It will display the
information contained within the tags however.

Basic Web Design

IMS Technology Training

-

9

-

©
2003 Trinity University

Heading

These
tags are used to highlight text by making them bigger and bolder than normal text.
There are six levels of head
ings numbered
1
through
6
, wh
e
re 1
is the biggest and 6 is the
smallest heading.

Headings are specified as <Hy> </Hy> where H stands for heading and y is
the level number (1 to 6).

E.g.:

<HTML>

<HEAD>

<TITLE> Headings</TITLE

</HEAD>

<BODY>

<H1>Level 1 hea
ding</H1>

<H2>Level 2 heading</H2>

</BODY>


</HTML>

Paragraph

These tags, denoted by <P> </P>, are used to define paragraphs. Since HTML does not
recognize carriage returns, it is especially important to use these tags to indicate paragraphs,
or you will e
nd up with as one long block of text.

E.g.:

<HTML>

<HEAD>

<TITLE>
Working with Paragraphs

</TITLE

</HEAD>

<BODY>

<
P
>
This is the opening paragraph for this page. It does not have much

information at the
moment, but it indicates how a paragraph is construct
ed in HTML.

</
P
>

<
P
>
This is the second paragraph on this page.

</
P
>

</BODY>

</HTML>


Paragraphs can be positioned or
aligned
relative to the sides of the page by using the
ALIGN=“alignment”
attribute

within the opening tag where
the value for
alignment is

left,
right, center, or justified.
The default alignment for a paragraph tag is
left
.

E.g.

<HTML>

<HEAD>

<TITLE> Working with Paragraphs </TITLE

</HEAD>

Basic Web Design

IMS Technology Training

-

10

-

©
2003 Trinity University

<BODY>

<P align = “center”>This is the opening paragraph for this page.
I have used the attribute
alig
n with the value center to put it in the middle of the page.

</P>

<P align = “right”>This is the second paragraph on this page and it is right

aligned.

</P>

</BODY>

</HTML>

Line Break

The line break tag <BR> is used to simulate the effect of creating a li
ne break by pressing the
Enter key on the keyboard. It is one of the few HTML tags that is
not

paired
with a closing
tag.

E.g.


<HTML>


<HEAD><TITLE> Page with Line Breaks </TITLE


</HEAD>


<BODY>


Trinity University<B
R>


One Trinity Place<BR>


San Antonio, TX 78212<BR>


USA



</BODY>


</HTML>

Comments

Comments are one of the most useful tools in HTML as they can be used to explain and
clarify the structure of the

HTML code to other readers. They can also be used to include
information such as
the name of the person
editing a
file

or
the software and version used in
creating a file
. Comments do not appear on the web page.
To include a comment in your
HTML file, ent
er:

<!
--

Your comment goes here
--
>



Introduction to FrontPage

What is FrontPage?

FrontPage is an application used to create web pages. As an
authoring tool
, FrontPage
includes tools that allow you to design, create, manage, and publish web pages without
needing prior knowledge of
HTML.
How
ever,

a basic grounding in HTML allows you to
tweak and optimize the HTML code that FrontPage generates.

Basic Web Design

IMS Technology Training

-

11

-

©
2003 Trinity University

Creating a New Web Page

To l
aunch
FrontPage 2002
,

click

on
the shortcut on your desktop

(see image on the right)
.

If no icon is available on the desktop,
click
on

the
Start

button
in the
lower left corner

of the screen, then
Programs,
and then on
Microsoft FrontPage
.

Unlike previous versions of FrontPage where a new page
automatically appeared on launching the appli
cation, when you first launch FrontPage 2002,
it displays an empty screen (grey area).
To create your first web page

click
File



New



Page or Web

or on the
Create a new normal page

icon
.


Your screen should now look like this.





Source: Microsoft Office XP Inside Out


Basic Web Design

IMS Technology Training

-

12

-

©
2003 Trinity University



The

Views bar
, on the left of the screen, allows you to view your web
page or site, in many different ways. Notice that the topmost button titled
Page

seems to be “
depressed
.” This indicates that you

are in the
Editor

view. This view is primarily used when
creating

and
editing

a
web page
or site.


Folders,

shows you your
web site

in “file” form. You can’t see anything
at the moment because we haven’t created a web site.

Reports

will show you the
status

of all the pages in your web site as
you
create them.

Navigation

will show you, as you create your web site pages, a little
organization chart
. The
lines

connecting the boxes

(as shown in the
Navigation

icon button), indicate the
hyperlinks

betwe
en
the
pages
.

Tasks

is a

little word processor that let
s you maintain a

To Do


list once
you begin creating your web site.

Click back on the
Page

view to begin building your web page.





Page Views

FrontPage allows you to work on your page in three vi
ews:



Normal
View
or the
WYSIWYG
(What You See Is
What You Get) editor. This is the most commonly
used view.



HTML View
, which displays the HTML code generated for the page. This is useful
if you want to modify or tweak the HTML code.



Preview Page View

di
splays the page as it would appear on a web browser. You
cannot make any modifications in this view.


To select a specific view, click on the appropriate tab in the lower left hand corner of the
Page View

window.





Use the
Reveal Tags

(Ctrl+/) option under
View
in the
Menu Bar
to
display HTML tags in the
Normal View
. T
hese tags are for
information only and cannot be edited or changed in this view.

Basic Web Design

IMS Technology Training

-

13

-

©
2003 Trinity University

Page Properties

The page properties
option allows you to change the default look (white) of your webpage by
adding a background images or color, page titles, and even sound and animation.


To view the Page Properties screen, select
Format



Background
in the
Menu
B
ar
.

You can also righ
t
-
click on the page and select
Page Properties

in the pop
-
up menu.



You should now see the Page Properties screen shown
below.. As you can see, you can set a
number of page options here. For this class, we will only work with title, and background
color a
nd image.


General

In the title box, t
ype in a new
page title, appropriate to your
page. It is
not

a good idea to
have background sounds on
your web page as it slows the
download.



Background

Click on the
Background

tab
to change screen options.
To
a
dd a background image, click
on the
Browse

button and
navigate to the location of the
desired image.


To change the default
background and
text

colors,
click on the little arrow to
drop down the menu.


Basic Web Design

IMS Technology Training

-

14

-

©
2003 Trinity University

You can also change
hyperlink

colors in the same ma
nner. However, it is advisable to stay
with the convention i.e.:



Blue for a page that has not been visited yet.



Purple for a page that has been viewed.



Red is the color of the link as it is being pressed.










Working with

Text

To place content in a

new page simply start typing in the information onto the page, like you
would in a word processor. Check that you are in the
Page View
(
the
Page

button in the
View bar will have a square around it) and that your cursor is
flashing

on the left hand side
of

the white area.

At the
upper left corner, above the white area,
you should
see the indicator
new_page_1.htm
. If you don’t,
click on
the
Page

button
again
.

Type in a
heading for
your page (E.g. My First Web Page) and then press the
Enter
key.
Every time

you press the
Enter

key, FrontPage automatically generates a
paragraph tag

(<P> </P>) with a blank line after it.

To insert a line break (<BR>) instead of a paragraph break, use the
Shift
-
Enter

combination.






Formatting
Text

You can format text t
o be in different fonts, sizes,
styles,
and colors using the lists and
buttons on the toolbar or the
Format


F潮琠
option in the
Menu Bar
.





When modifying a web page, it is best to view the formatting marks.
Use the
Show All
button
-


-

to display formatting marks.



Light colored backgrounds with dark text work well together.



A dark background can add drama, but needs a bright text color fo
r
contrast..



Bright colors are eye
-
catching, but can tire a reader. Use them sparingly.



Use background images that have subtle patterns and textures. A busy
background image makes it harder for the user to read the content.

Font List

Size

List

Basic Web Design

IMS Technology Training

-

15

-

©
2003 Trinity University

Font Type

It is best to select a simple,
san
-
serif
font that is easily available on most computers to avoid
va
riations in how the page is displayed. Choose fonts such as
Arial
,
Verdana
, or
Helvetica

that are easy to read and available on most computers.





Font Style

This usually refers to
setting text as
bold, italics
, headers, lists, etc.
.
An easy method to

c
onvert text to bold or italics

is to
select the text and
then
click on the
Bold
(

) or
Italics
(
) button.






To set text as a
header
or
list
, select the appropriate option
from the
Style
menu on the
Tool Bar
.
Header sizes range
from 1 to 6, with 1 a
s the largest and 6 as the smallest.


Font Size

In web documents, font sizes have different values from the point sizes used in word
processors. The latter are indicated in parentheses next to the HTML sizes for a sense of
proportion.
A point size of 2 or
3
works the
best for paragraph text.

Select the desired size
from the list or the Font dialog box.









Font Color

You can select font color along with other options in the
Font dialog box. You can also use the
Font Color
button
on the
Tool Bar
.



Avoid l
eaving the font setting at
Normal
or
Default
. This will
display the page in whatever font the user has set as default.


Don’t use the underline style as it will look like a hyperlink and
confuse the reader.

The
Font

dialog box offer
allows you to set te
xt effects such as
superscripts, subscripts, strikethrough, etc. Not all of them are
supported by browsers, and some, like
Blink
, can also be annoying.

Avoid using them.

Basic Web Design

IMS Technology Training

-

16

-

©
2003 Trinity University

Fo
rmatting
Paragraphs

Paragraphs are
aligned
or positioned relative to the sides of the web page as
Left
,
Right
,
Centered
, or
Justified
. You can align a paragraph with any of the following methods:



Right
-
click in the paragraph and select the Paragraph comman
d from the menu.



Select Format



Paragraph



Use the Align Left (
), Align Right (
), Center (
), or Justify (
) buttons on
the
Tool Bar
.

The first two methods will open a dialog box where you can set the alignment as well other
options such as text indents

and line spacing.



Inserting
a

Picture

Graphics for web documents
should be in one of the following formats:

GIF (Graphic Interchange Format)
: Limited to 256 colors, therefore, best suited for logos
and clip art (non
-
photo images)

JPEG (Joint Photographi
c Experts Group)
: This format supports millions of colors and is
ideal for photographs. Save scanned photos in this format.


To insert
your picture,
click

on
Insert



Picture
in the
Menu
B
ar
. Select
From File

or
Clip Art

to specify the
file location.

When the
Picture

menu

screen appear
s,
navigate to the location of the desired
image, select it, and then click
Insert

to
place it on the page.







Modifying Picture Properties

Once you have inserted the image, you can change its size and positioning on
the screen.

To resize an image, click on it once to select and display the sizing handles (
small “
squares

at
each

of the
corners

and in the middle of the top, bottom, and side edges). Use these
handles to change image proportions.

In order for the page to load correctly,
all

the “
parts
” of the web page
⡧(a灨楣猬p
a湩na瑩潮猬⁶o摥漠晩汥猬⁰桯s潳Ⱐ獯畮摳Ⱐ
e瑣⸩⁨=ve⁴漠扥潣ate搠
in the “
same place
”. If
=
the web “page”
can’t find
楴e浳Ⱐ
y潵o
will not
be
able to see them in your page.

Make sure you put your image files in the same location as your web
page.

Basic Web Design

IMS Technology Training

-

17

-

©
2003 Trinity University






For precise sizing

as well as to set other options, right
-
click on the image and select
Picture
Properties

from the menu

to
display the Picture Prop
erties dialog box.


Change the
Alignment

o
f the
image depending on how you
want it positioned
on the page.


To add a border,

enter a value
(in pixels) in the
Border
Thickness
box. The higher your
value, the thicker your border
will be. The default value is
0
or
No Border
.


Use the
Horizontal spacing

and
Vertical spacing

options to add
white space around the picture,
both above
and below (vertical)
or on both sides (horizontal).
This prevents text from running
into the image.


Cropping Graphics

You can also resize an image by
cropping

it so that y
ou only retain the details you want.
Basic cropping can be done in FrontPage itself
as follows:



Select
View


Toolbars


Pictures
to bring up the
Pictures
toolbar.



Click on the Crop button (
) to display the cropping box on the graphic.



Drag the cropping box handles to size the box and click on the
Crop

button again to
crop the graphic.











Dragging on a corner handle sizes the graphic
proportionately
.

Dragging the middle handle will dis
tort the image.

It is highly recommended that you use an image editing application like
Adobe Photoshop to resize and crop images, and then insert the modified
images into your web page.

Basic Web Design

IMS Technology Training

-

18

-

©
2003 Trinity University

Hyperlinks

A web page’s power lies in its ability to link text and/or an image to another document or
section of a document.
Text
h
yperlink
s

are
underlined and highlighted in blue to make it
easy for the reader to pick them out while scanning the

page.

Select the
text
or graphic
that
will function as the hyperlink, then
select
Insert


Hyperlink

from the
Menu Bar
or use the shortcut Ctrl+K. You can also click on the
Hyperlink

button

on the
Tool Bar
.


In the
Insert Hyperlink

dialog box, click o
n the
Hyperlink

button at the
top

of the
dialog
box
.





A
Text Help

will appear indicating that this button will “Browse to the web.” You will then
be taken to the default page in your browser. In the
Address Area
, t
ype in the address of the
web page

or site you would like to link to and tap the Enter key to go to that page. When you
see

the
web site
,

click

on the
Front Page button

at the
bottom

of your
screen

in the
task
bar
.








This will take you
back

to
FrontPage 2002

and the
Insert Hyperlin
k
dialog box
.


Hyperlink
button

Basic Web Design

IMS Technology Training

-

19

-

©
2003 Trinity University

Click on
the
Browsed Pages

button

and select your site from the list of choices that appears.
T
he
Address area

at the
bottom of the
menu
screen

will also
indicate
the
web address

to
which you browsed. Click on
OK

to complete placing the h
yperlink
.




Bookmark Links

Bookmark links are used to link to a section within the same document. It is particularly
useful with long documents that would require the user to scroll up and down. There are two
steps to adding a bookmark link:



Create th
e bookmark.



Create a link to the bookmark.


To create a bookmark, position the cursor by the first word of
the section you want to bookmark and select
Insert


B潯om
慲k

from the
Menu Bar
. Give the bookmark a
suitably descriptive name and select
OK
. In th
e Normal Page
View, a bookmark will show with a dashed underline.


To create the hyperlink to the bookmark, se
lect the text to be hyperlinked, then
select
Insert


Hyperlink

from the
Menu Bar
or use the shortcut
Ctrl+K
. You can also click on the
Hyperlin
k button

on the
Tool Bar
.


This will open up the
Insert Hyperlink

dialog box. Click on the
Bookmark…

button and select the appropriate bookmark. The
hyperlinked text will now appear as blue underlined on the page.
To test your link, hold down the
Ctr
l

key and click on the link.

Web address


Basic Web Design

IMS Technology Training

-

20

-

©
2003 Trinity University

Email

Links

Email links are used so that users can email webmasters or other contact individuals their
comments and feedback. To create an email link, select
Insert


Hyperlink

from the
Menu
Bar
or use the shortcut Ctrl+K. You
can also click on the Hyperlink button

on the
Tool
Bar
. In the
Insert Hyperlink

dialog box, click on
Email Address
and fill out the email
address.


Saving Your Web Page

It’s wise to
save your web page

periodically

so that you don’t lose your work. You

can save
your file by selecting the
Save

option from the
File
menu (
File


S慶a)
, or by clicking the
Save button.

When you save a web page for the first

time
, the
Save As
dialog box will appear
. The
Save
In
box displays the location name. Click on the ar
row on the right hand corner of the box to
display more locations. When the
Save In
box displays the desired location, type in the file
name in the
File
n
ame
box and click the
Save

button. FrontPage will automatically add the
extension
.htm

to the file nam
e.











FrontPage will
try to use your title

for the name of the web page.



If it is
more

than
8 characters long
, some
older

computer systems and
servers might not work well with the name.



Also, the name shoul
d
not

have an
apostrophe (’)

a猠瑨s猠楳⁡⁲ 獥牶r搠
ga癡⁣桡牡c瑥t⁡湤nc潵汤oca畳u慴 爠灲潢汥浳⁡猠睥汬.

L
ocation
name

More
location
s


File name


Basic Web Design

IMS Technology Training

-

21

-

©
2003 Trinity University

Tables

A table on a web document is essentially a
grid

of rows and columns. Each intersection of a
row and a column creates a
cell
. Tables make it easier to design page layouts because they
allow you to display information in a formatted

tabular form.


Table properties for each web page should be determined and sketched out as early as
possible.
Several small tables will load faster than one long table.
Sometimes, depending
on the content, you may need to tables within tables.
These are

called
nested tables
.


Creating
a

Table

To create a table on your page, place the cursor at the point you want the table to be and
select
Table


䥮獥r琠


Tab汥l
from the
Menu
Bar
.
This will display the
Insert Table

dialog box
shown below.



Use the
Row
s

and
Columns

options to determine the
number of rows and columns in the table. (This is where having a sketch becomes handy.)

Select
OK

once you have entered your options.




















You can create a basic table
using the
Table button
(
)
on the

Tool
Bar
.

Click the button and drag the mouse over the grid, highlighting the
cells that should appear on the table. When the table size has been
selected, click the mouse button again.




Basic Web Design

IMS Technology Training

-

22

-

©
2003 Trinity University

Table Properties

Specify width

sets the width of the table by a di
stinct number of pixels or by a percentage of
the screen width.
Use the
In pixels

option, when you want the table to be a certain width and
avoid horizontal size changes.


Alignment

refers to the table's position on the page as in centered, left, right, or

justified.
The default is usually
left alignment
.


Cell padding

is the number of pixels between the text and the cell walls.


Cell spacing

is the number of pixels between
each table cell
.


Specify height

is usually not necessary to set since the height

depends on the number of rows
in the table.


Border size

indicates the
thickness of the
border

around each cell. Tables used for content
layout should have a border of 0 to hide the borders. Tables that are used to display tabular
information can have the
ir borders set to higher values.


E.g.


Table with no border




The same table with a border of 5 pixels




Border color

defines the color used for the border. For example, the

border color in the table
above is grey.


Background color

adds a
colored

background to the table cells.

E.g.






Use background picture

add a background image to the table.

E.g.







Basic Web Design

IMS Technology Training

-

23

-

©
2003 Trinity University

Working with Cells

To add content (text or graphic) to a cell, click in the cell to place the cursor there, then type
to enter text or insert

the graphic.


Within a cell, the formatting options are the same as within the document. Therefore,
pressing the
Enter

key will create a paragraph break, while pressing
Shift+Enter

will create
a line break.


Pressing the
Down Arrow
(↓) key will move the cursor out of the table and to a new
paragraph below.


Cell Properties

To modify cells properties, first select the cells to be changed, then s
elect
Tables



Pr潰er瑩ts



䍥汬

from the
Menu Bar
.
You can also right
-
click within a cell
and select
Cell
Properties

from the menu.

Either option will bring up the
Cell Properties
dialog box.
























Horizontal alignment

defines the position of the content within the cell. The
default

is
the
Left
side of the table cell.
You can
change this
to
Centered
,
Right
,
or
Justified
.


Vertical alignment

refers to the position of the contents relative to the top and bottom of
the cell. The
default

is
at
the
Middle
.


Basic Web Design

IMS Technology Training

-

24

-

©
2003 Trinity University

Specify width

and
specify height

defines the width and height of the cells.

Percentages refer
to the
portion of the table
, not the
entire screen
.



The
Header cell

option will automatically bold and center the cell content.



Border color

changes the color of the cell border as demonstrated below.




Background color

changes the

cell's background color.



Background image

adds a graphic to the background of each cell.



Spanning Cells

Sometimes, you may need to
create a cell tha
t

spans rows or columns
; a cell that carries the
page banner or title for example. In such situations
, you will need to span that cell across
columns or rows as the case may be. Using the table used in the above examples, it would
work like this:




Insert a new row at the top of the table.



Type the text of the row that will be spanned across the columns in
to the first cell.







Highlight both cells in the top row and select
Table


Mer来⁃ 汬s

from the
Menu
Bar
. You can also

right
-
click and select it from the popup menu.





Basic Web Design

IMS Technology Training

-

25

-

©
2003 Trinity University

Inserting Rows and Columns

To add
rows or columns to a table
, place a cursor in

the cell that the new row or column will
be adjacent to. Then select
Table


In獥r琠


副w猠潲⁃潬 mns

from the
Menu Bar

to
open the
Insert Rows or Columns

dialog box.




To insert a row, select
Rows

and enter the
Number of Rows
.



Then select the
Location

o
f the new row by
selecting
Above selection

or
Below
selection

from where you placed the cursor
in step 1.



Click
Columns

to insert a new column and
the choices will change. Enter the
Number
of columns

and the
Location

left or right of
the selected point.



Click
OK
.










Creating a Website

In this section, you will learn to create a small web site
using FrontPage. It is
recommended
that you familiarize yourself with the basic concepts of
web design
, and learn to use
FrontPage to create and edit web page
s
prior
to creating a web site.


In the chapter
Introduction to FrontPage
, you learnt
to hyperlink to other web pages and
sites. When creating a web site, FrontPage automatically creates the links to the other pages
in your web site.



Launch
FrontPage
b
y
click
ing

on the shortcut on your desktop (see
image on the right). If no icon is available on the desktop,
click on

the
Start

button in the
lower left corner

of the screen, then
Programs,
and then on
Microsoft FrontPage
.
Take a few
moments to

review what

the screen should look like and re
-
familiarize yourself with the
various buttons on the top and left side of the screen.




You can also insert a row or column right
-
clicking in the cell th
e new row or
column will be adjacent to. Select
Insert Row

or
Insert Column
from the
popup menu.

If you still have your single web page on the screen
, select
File


Close
in the
Men
u Bar
. If you are prompted to
save

your changes, select
Yes
.

Basic Web Design

IMS Technology Training

-

26

-

©
2003 Trinity University

To
create

a new
web site,
select
File



New


P慧a ⁗ b

in the
Menu Bar
. This will
bring up a “Task Pane” on the right
hand s
ide of your screen.










Place your cursor over the small yellow folder
with an “earth” on it or on the text
Empty Web
.


You will notice that the words
Empty Web

are
now underlined in blue
.
You will also notice that
your cursor will change to the “sm
all pointy
hand” hyperlink icon. Click

on
Empty Web
to
display the
Web Site Templates

dialog box.


To create a space for your web site, you need to
do the following in the dialog box:





First (
1
) , make sure that the upper left icon

One Page Web

is high
lighted. If it is
not, click

on it.



Second (
2
), in the “white area” under
Options
, s
pecify the location of
your
new
web

by
typ
ing
in
c:
\
webtest
.


If y
our
Web Site Templates
dialog box
should look
s

like the one
on the following page
,
click
OK
.

This wil
l take you
back

to the
FrontPage 2002

main screen.


It
may

appear that nothing has happened. However, if you look at the upper left corner of
your screen you will see that the web site c:
\
webtest has been created

(se image below)
.





Since this is a

web site, and the
Views Bar
on the left of the screen is set on
Page
,
you
will
have to select another button in the Views Bar to be able to
see

and work with
y
our
web site.


The Task Pane is Office 2002’s alternative to the dialog box. It is a Web
-
獴yle=
c潭oa湤⁡牥a⁴桡琠y潵⁣a渠摯n欠k汯lg⁴桥⁲ig桴爠汥晴⁥dge映y潵爠獣牥en爠
晬潡琠慮y睨w牥渠瑨攠獣ree渮
=
Sourc
e: Microsoft Office SP Inside Out

Basic Web Design

IMS Technology Training

-

27

-

©
2003 Trinity University




To visually
see/confirm

that your
web site has been
created
by FrontPa
ge,
click

on
View

in the
Menu
Bar
. In the
drop
-
down menu
,
click

on
Folder List

.












The
Folder List

will now
appear

on the
left side of your screen

to the
right of the Views
Bar
.

The
Folder List
indicates that your new
web site
is located on the
C: drive

in the
Folder webtest
. Notice also that
two new folders

have been created by FrontPage
:
private

and
images
. FrontPage has also created your
initial home page

called
index.htm




1
.

2
.

Basic Web Design

IMS Technology Training

-

28

-

©
2003 Trinity University

To
create our web site

we’ll want to be in the
Navigation

View
, s
o

click

on
the

Navigation

button
on the View
Bar
.
When this process is complete you will see
your initial
Home Page

of the web site in the center of the screen.







Take a few minutes to look at all of the “stuff” on the screen
.

Take
note

of the words
below

the
Home Page (index.htm)
, they’re
important
.


Saving
Y
our
W
eb
S
ite

If you haven’t already, you’ll
notice

that the
Save

option under
File

in the
Menu Bar

is
gr
a
yed out
, as is the
Save
button
in the
Tool B
ar
. One of the neat things in FrontPage 20
02
is that it
automatically saves

your web site as you make
a
change.


To see this, select
File



E硩x

in the
Menu Bar
. FrontPage will close. Now
open
FrontPage as you did at the beginning

of this tutorial.
Y
o
ur
new
web site
will shows up just
as you h
ad left it.
This is a new feature of FrontPage 2002.



Working on Your Web Site

To begin working on your web site pages, select
File



Open
and click on the
small
triangle

to the
right

of the
Look in

area. Navigate to your saved Web (
webtest
), select
ind
ex.htm (or the file you want to work on), and click on
Open
.
Then switch to the
Navigation

View
so you can get started creating your web site


If your
Folder List view area
is still
visible
, simply
click

on the small “
X

in the
upper right corner

of the
F
older List view area
.











You will still have to
save individual web page
changes

as you work on them.

Basic Web Design

IMS Technology Training

-

29

-

©
2003 Trinity University

Creating
W
eb S
ite

Structure

You should be in
Navigation

View at this point.


First, click on the
Home or Index Page

in the
middle of the screen
. Prior to your click, it
will appear as a
light yellow

icon,
when you clic
k

on it, it will turn
blue
. This indicates to
FrontPage which page you desire to work on. In this case you will add, and automatically
link,
three additional

pages
below

your main home page.


If you
accidentally double
-
clicked

on the
Home/Index Page

ic
on, FrontPage will assume
you want to edit the page and load it in the
Editor
. Simply
click

on the
Navigation

button in
the
View

Bar

and you’ll be back where you want to be.


Again,
make sure the Home Page icon

is
blue
. To
add

the
first page
under
y
our h
ome page
,
click on the
New Page
button (
looks like a sheet
of paper
)
in the
upper left corner

of the
screen
.
As soon as you click,
your screen will change to reflect that
you have just created
New Page 1
below your Home
Page (index.htm).




This is where
FrontPage really does its work. When you
add a new
page, FrontPage automatically
hyperlink
s

it to the corresponding
page
.

Your screen should now look like the one at the right.


A
dd
two more pages

under
y
our
Home Page

(index.htm)
. Each
time,
click

on th
e
Home Page

(index.htm)

to turn it
blue
, and
then
click

on the
New Page button
. Your screen should now look like
the one below
:
.












Next, we’ll
add two pages under
New Page 3
. The process is similar to what we just did.
First, click

on

New Page
3
, to turn it
blue
, and then
click

on the
New Page button
. Do this
twice
.
Yo
ur web site should now
look like the one below.






Basic Web Design

IMS Technology Training

-

30

-

©
2003 Trinity University























You now have the beginning of a small web site.


Before
you

can
look at it

however
,
you
need to d
o
a very important task
.
You
need to
tell

FrontPage
what

you
want to
see

on
y
our web pages in
y
our web site
. To do this
, s
elect
Format


Shared Borders

in the
Menu Bar
.
This will bring up the
Shared Borders

dialog
box.













To
make

the
titles

and the
links

of each web page

visible
, select
All Pages
.

Also
check the
squares to the left of

Top

and
Include navigation buttons,
and
Left
, and
Include
navigation buttons.



Your
Shared Borders
screen

should look
exactly

like the
one

on
the
following p
age.
When
it does
, select
OK
.



If you
make a mistake

as you are
adding new pages
, simply
click
-
on the erroneous new page
and
tap

the
Delete

key.



Or
right
click

on t
he page
and select
Delete

from the popup
menu.



You can also click on the
Undo

button.

Shared borders allow you to display content that is identical to all
pages without having to repeat the process for each page. If you add
or edit an element in a shar
ed border in one page, it will affect the
content in all the pages that display that shared border.


Typically, a top shared border will contain a page banner and
navigation bar, the left another navigation bar, and the bottom,
information such as email, c
opyright notice, etc.

Basic Web Design

IMS Technology Training

-

31

-

©
2003 Trinity University




















To
see

what
your
site
look
s

like
at this point
,

double click

on the
Home Page (index.htm)

icon. You can also
right
-
click
on the
Home Page (index.htm
)
icon and select
Open

from

the
popup menu.

This will load

the Home Page in
the
Editor (Page
V
iew)
.


Take a few moments to
look at the
top
of the page in the Editor (Page View). It should look
like the view below.




Observe that the title to the
Home Page
(index.htm)

appears

at the
top

of the
page in the
E
ditor (Page View)


just as it did when FrontPage created it
.


Also,
New Page 1, 2 and 3

on the
left

side of the page are
links
to
the
pages
that you created
one level
below the
Home Page (index..htm).


As indicated earlier,
you will

return
to the
Navig
ation View

and
re
-
name

these pages
so that
they
make more sense
to your web site.
Don’t worry about the
dashed lines
,

t
hese are
Basic Web Design

IMS Technology Training

-

32

-

©
2003 Trinity University

simply
there
to assist you later in the Page View.
T
hey
will
disappear when you view your
web site in a browser.


Viewing Your

W
eb
site
in a
B
rowser

To see what the site would look like on the Web, in
Page View
,
click

on the
browser
button
in the
Tool

B
ar
. Or select
File



Preview in
Browser
from the
Menu Bar
.












Your
initial view

of your
Home Page (index.htm)

should
l
ook like the image below
.



In the
browser
,

your “blank” website will respond like any other website. When you move
the cursor over the titles
New Page 1, New Page 2,
and
New Page
3
, you will notice that the
pointing hand

appears, indicating a hyperlink.



Click

on
New Page 1
, it
should look like the image below.








When you choose
Preview in Browser
, FrontPage will ask you to
choose a browser

available on your computer. Internet Explorer is
the default browser at Trinity University.


However, when possible, it is recommended that you view the

site
in other browsers such as Netscape and AOL to ensure
compatibility.

Basic Web Design

IMS Technology Training

-

33

-

©
2003 Trinity University

The
text buttons

on the
line below
the title
New Page 1

are
hyperlinks

back to the
Home
Page

and to
pages
2 and 3
. When
you
created
y
our
Shared Borders
,
you set it
up so that
links
to
pa
ges that are
above

or on the
same level
as
the current page (
New Page 1
in this
example)
show below the page title
.


It does not matter if there are more than three pages above, or on the same level as the current
page, all the pages will show with thei
r names. These are part of the automatic hyperlink
s

that
FrontPage creates
.


Now
click

on
New Page 3

in the browser
.
Your
browser
should now
look like
the
image
below.






Remember the two new pages you created below
New Page 3
? These now show up
as
New
Page 4
and
New Page 5
on the
left
side of the page. The
line below
New Page 3
now
contains the text links for pages
above
or on the
same
n
avigat
ion
level

as
New Page 3
.


Creating
Titles for
W
eb
site Pages

To get an idea of how page titles are displa
yed in FrontPage, click on the
Folders
button in
the View Bar. You should now see the following screen:











The
Name

column on the
left
side of the screen displays the file

names (index.htm,
new_page_1,
etc.) for each page. The
Title

column display
s the actual page names as they
Pages
Below

New
Page 3

Pages Above and
at the Same

Level

as New Page 3

Basic Web Design

IMS Technology Training

-

34

-

©
2003 Trinity University

appear on the
Navigation

View
boxes (index.htm, New Page 1, etc.)
.

When
you rename the
page titles,

the
new
titles
will appear in the
Title
column.











Return to the
Navigation View
in the
View Bar

to
give your pag
es new titles.


Click
once on the
Home Page
(
index.htm
)
box

to turn it
blue
.
Then
click

on the
title

(
index.htm
)
and
wait a few moments

till
the title is
highlighted in
blue
. Your screen should
look like
the
image on the
right
.


In a
Windows
program

this

indicates

that you
can
edit
the text
. You
can
start typing
immediately

to replace
index.htm
,
or you can delete the text and then type

in the new page
title
.


For now
, type

in
First Name’s
Home Page

where
First Name’s
is
your first name, and tap the
Ent
er

key

when you are finished. Select
View


剥fre獨
on the
Menu Bar

to
update

your changes
.
You
will see the page title is now the one you entered.


Place the following
titles
for the other pages in your website in a similar manner. Once you
get the hang
of this, you can change the titles to anything you desire, add more pages, etc.



New Page 1:
About Me




New Page 2:
About My Family




New Page 3:
My Hobbies



New Page 4: Type
-
in the name of
a hobby



New Page 5: Type
-
in the name of
another hobby


When yo
u are done, select
View


剥fre獨
on the
Menu Bar

to
update

your changes


Now return to the
Folder
view by
clicking on the
Folder
button on the
View Bar
. Your
Title

column,
should look similar to this
one.



To rename a file name (new_page_1.htm in this example), right
-
click on the file name in the Folder View in t
he View Bar, select
Rename, and type in the desired file name.


Remember the file name conventions outlined earlier in this
book when renaming files.


Basic Web Design

IMS Technology Training

-

35

-

©
2003 Trinity University


To see what your updated site looks like in the

browser,
first
return to the
Navigation
view

by clicking on the
Navigation
button
in the
View
B
ar
.


Double
-
click
on
your home page icon (ABC’s Home Page)

or right
-
click on the
home page icon and select
Open

from the popup menu.
This will load the
page
in
the
Page View
.


In
Page View
, click

on the
browser
button
in the
Tool B
ar
, or
select
File



Preview in Browser

in the
Menu Bar
.


If nothing seems to happen, or it looks like your browser hasn’t
opened,
look
at
the
Task Bar

at the
bottom

of your
scre
en
. Your
browser button

should be
flashing

blue
. If it is
, click
on it

to bring up your web site.


Click around your web site. You will notice that FrontPage has automatically changed all of
your pages and buttons.


Themes

F
or a website to
be effective
, it needs to have consistent design.
FrontPage
allows you to
create this easily by using
themes
, or consistent
formatting features

that are applied to all the
elements of a page. Applying the same theme to all the pages gives the entire website a
consiste
nt look. (Y
ou can change them page by page later if you
so
desire).


If you are not there already, return to FrontPage by clicking
on the
FrontPage
button

in the
Task Bar

at the
bottom

of the
screen
.

It does not matter which view (Page, Navigation, etc.)

you are in when you return to FrontPage.


Themes affect the following web page characteristics
:




Background color or image
.



Text colors and fonts used with paragraph styles (Normal and Heading 1 to
Heading 6).



Text hyperlink colors.



Images used for bullets in bulleted lists.



Images used for horizontal rules.



Text color and font, and images used in page banners and navigation ba
rs.



Table border colors.

Source:
Microsoft Office XP Inside Out

Basic Web Design

IMS Technology Training

-

36

-

©
2003 Trinity University

Select
Format



Theme
in
the
Menu

Bar
.

This will take you to the
Themes

dialog box..
When it
first appears,
you will
notice
that the display
area is blank. this is because at this point, you have not
yet selec
ted a theme to
view
.


Select a theme from the
choices
in the left side of the
dialog box. When you do, your selection will be
highlighted in blue and the theme will appear in the
sample screen. Go through the choices to pick one you
like.




When you ha
ve decided on a
t
heme
, make sure you select one of the options under
Apply
Theme to:
.




If you select
All pages
, the th
eme will be applied to all the pages in your website.



If you choose
Selected page(s)
, FrontPage will apply the theme to only those pages
.


Remember the consistency rule while making your choice!

Click
OK

when you are ready.









Basic Web Design

IMS Technology Training

-

37

-

©
2003 Trinity University

This will bring up the following message screen:


I
t indicates that all of your formatting will be changed to the theme you selected. Click
Yes
.


To see if
your theme has been applied to the website, click on the
Navigation
button
in the
Views

Bar
.
When you see your
website
organization chart
, double
-
click

on your
home page

at the
top

of the
chart
. As before, this will
take you to the

Page view

and
your home

page
.
You will notice that the
theme

you chose has been
applied

to this page.


You are now ready to save your website and view it in a web browser. To save your pages,
select
File


S慶a⁁汬
in the
Menu Bar
.
















You are now ready to view

your updated website in the browser. Click on the
Preview in
Browser
button
, or select
File



Preview in Browser
in the
Menu Bar

to open your
website in the browser. Browse around to see how everything works.













When you are in the
Page view
,

you’ll need to
sa癥=
yo畲u
c桡nge猠
瑯t
each page

just like you did when
creating a single web page.


You can save each page individually, or all of them at
the s
ame time with the
Save All

option.


Don’t forget to save frequently as you are editing
your individual web pages
.

Once you have created a website, you can make changes to it
at any time by selecting
File


Open Web
in the Menu Bar.
Make sure that you
are in the
Folder
or
Navigation
view in
the
Views Bar
when you do this.

Basic Web Design

IMS Technology Training

-

38

-

©
2003 Trinity University

Publishing
W
ebsite
s

F
or people to

see it on the Web, you will need to
publish

your website.
In other words, you
need to copy it to a
specified location
on a
Web server
.


Trinity’s web server is indicated by
Web on TUCC
-
Web’ (W:):
.
You can access it by
clicking on the
My Computer
icon on

the desktop, or by right
-
clicking the
Start
button and
selecting
Explore
from the popup menu.


As you can see, there are two parts to the Web server.



The
trinity

folder is used to allocate web space
to campus departments so they can publish
departmental
websites.



The
users

folder is the personal web space allocated to faculty and staff to publish
non
-
departmental websites. This space is available on request.


To publish your website,
select File


Pub汩獨⁗ b
from the

Menu Bar
. This will display
the Publ
ish Destination dialog box as shown below.


















In the
Enter publish destination
box, type the full URL (address) of the location you want
to publish to as indicated in the picture.

Don’t use the Browse button to navigate to the W: drive!

You need to enter the
complete URL.


You will now be prompted to enter your usern
ame and password as shown below. When
typing in your username, make sure you use the following format:
trinity
\
username
.
Once
you connect, you will see the
Publish Web
dialog
box displayed on the following page.






Basic Web Design

IMS Technology Training

-

39

-

©
2003 Trinity University



The top part of the dialog box indicates the location you are publishing from and the one you
are publishing to. Use the
Change
button to change the publishing location if you need to.


The middle area of
the dialog box is divided into two parts:



The
local
view is on the left.



The
remote
view is on the right.


If you are publishing for the first time, simply click on the
Publish

button to copy your files
to the specified web location. If your website has

subwebs (websites within websites), make
sure you have checked off on the Include subwebs option. In fact, it is a good policy to check
this off always before publishing.









local
view

remote

view

If you are publishing a
modified/edited

website,
you can opt to publish
only the changed

pages by
clicking on the
Options

button in the
Publish web
dialog b
ox.

Basic Web Design

IMS Technology Training

-

40

-

©
2003 Trinity University

Once the
“publish


is complete, you will see the following dialog box. Se
lect
Click here to
view your published web site

to view your web site on the Web.















Congratulations! You have successfully created your first website.




Bibliography
& General Resources


The material in this manual was adapted from the following books, documents, and online
resources:



Presley, Bruce, Beth Brown, and Elaine Malfas.
A Guide to Web Authoring Using
FrontPage 2000
.

Pennington:
Lawrenceville P
ress
, 2001
.



Halverson, Michael and Michael J. Young.

Microsoft Office XP Inside Ou
t
.
Redmond:
Microsoft

Press, 2001.



Murray,
Tom.
Creating a Web Page and Web Sit
e
.
Lynchburg College
, 2002.



Krug, Steve.
Don’t Make Me Think
. Indianapolis: New Riders Publishi
ng, 2000.



Krug, Steve.
Don’t Make Me Think
. Indianapolis: New Riders Publishing, 2000.



FrontPage 2000 Tutorial
.

Florida Gulf Coast University
.
14 May

2003

<
http://www.fgcu.edu/support/office
2000/frontpage/
>



A Beginner’s Guide to HTML
, NCSA,
14 May 2003
<
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
>



Web Design & Architecture
.

Educatio
nal Technology Center
. University at Buffalo.

<
http://www.etc.buffalo.edu/workshops/html/design/web_design_arch_print.html
>


General Resources



Webmonkey
(
http://www.webmonkey.com
)



About.com Guide to Web Design
(
http://webdesign.about.com/mbody.htm
)



Web Developer’s Virtual Library
(
http://wdvl.internet.com/
)