Basic Web Design.doc

Table of Contents

TABLE OF CONTENTS......................................................................................................................................1
BASIC WEB DESIGN...........................................................................................................................................3
DEVELOPING A WEB SITE..............................................................................................................................3
DESIGNING NAVIGATION BARS..................................................................................................................................4
PAGE DESIGN.........................................................................................................................................................5
DESIGN CONCEPTS...................................................................................................................................................6
INTRODUCTION TO HTML..............................................................................................................................7
WHAT IS HTML?..................................................................................................................................................7
HTML DOCUMENTS...............................................................................................................................................7
Structure.........................................................................................................................................................7
Creating an HTML Document.......................................................................................................................8
Markup Tags..................................................................................................................................................8
Heading....................................................................................................................................................................9
Paragraph..................................................................................................................................................................9
Line Break..............................................................................................................................................................10
Comments...............................................................................................................................................................10
INTRODUCTION TO FRONTPAGE...............................................................................................................10
WHAT IS FRONTPAGE?..........................................................................................................................................10
CREATING A NEW WEB PAGE.................................................................................................................................11
PAGE VIEWS.........................................................................................................................................................12
PAGE PROPERTIES..................................................................................................................................................13
WORKING WITH TEXT............................................................................................................................................14
Formatting Text...........................................................................................................................................14
Font Type...............................................................................................................................................................15
Font Style...............................................................................................................................................................15
Font Size.................................................................................................................................................................15
Formatting Paragraphs...............................................................................................................................16
Modifying Picture Properties......................................................................................................................16
Cropping Graphics......................................................................................................................................17
HYPERLINKS.........................................................................................................................................................18
Bookmark Links...........................................................................................................................................19
Email Links..................................................................................................................................................20
SAVING YOUR WEB PAGE......................................................................................................................................20
TABLES................................................................................................................................................................21
Creating a Table .........................................................................................................................................21
Table Properties...........................................................................................................................................22
Working with Cells.......................................................................................................................................23
Cell Properties........................................................................................................................................................23
Spanning Cells........................................................................................................................................................24
Inserting Rows and Columns.......................................................................................................................25
CREATING A WEBSITE...................................................................................................................................25
SAVING YOUR WEB SITE.......................................................................................................................................28
WORKING ON YOUR WEB SITE...............................................................................................................................28
Creating Web Site Structure........................................................................................................................29
Viewing Your Website in a Browser............................................................................................................32
Creating Titles for Website Pages...............................................................................................................33

©2003 Trinity University
All Rights Reserved

Basic Web Design

Themes.........................................................................................................................................................35
Publishing Websites.....................................................................................................................................38
BIBLIOGRAPHY & GENERAL RESOURCES.............................................................................................40
GENERAL RESOURCES............................................................................................................................................40

IMS Technology Training -2- © 2003 Trinity University

Basic Web Design

Basic Web Design
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 design 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 Web 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 only after
this has been accomplished that HTML coding or authoring
tools like FrontPage can be used effectively to actually The Five Golden Rules
create the site.
• Create a clear visual
The planning process involves:
hierarchy on each
• Define site purpose page.
o What are the web site’s objectives? • Take advantage of
o Who is the target audience? conventions.
o What is their connectivity (dial up, • Break pages into
broadband, network, etc.)? clearly defined
o What computers (PC/Mac) and browsers (IE, areas.
Netscape, Opera, etc.) do they use? • Make it obvious
• Define content what’s clickable.
o What you have and what you need. • Minimize noise.
o How it will be organized. Categorize
information rather than defining categories Source:
Don’t Make Me Think, Steve
and filling them. Build the site structure Krug
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.


Basic Web Design

• Develop a file naming convention and stick to it.
Web files and folders should not have any spaces and be in lowercase.
Use the underscore (_) to connect words in file names.
File names cannot contain colons (:), asterisks (*), questions marks
(?), or other special characters.

• 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.

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

• 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.

Key Elements of Navigation

• Site ID.
• Global 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

Site ID Global Navigation

Breadcrumb Trail
“You are here” indicator

Local Navigation

You will know you have succeeded if your site navigation helps users answer these basic
questions:
• 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 into:
• 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.


Basic Web Design

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

Page
Header

Navigation
Panel

Page
Footer

Home Page Layout

• Has to convey site identity and mission: what it is and what it’s
for.
• 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

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


Basic Web Design

o Place page elements like titles, banners, logos, and navigation elements in the
same spot on every page.
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 can 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, is the
tag used to define text in bold where “B” is the element contained within the tag.
Elements can also include attributes, 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.

Basic Web Design

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.
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 Example</TITLE>
</HEAD>
<BODY>
Welcome to the world of HTML. This is the first paragraph.
</BODY>
</HTML>

• Tags are case insensitive, i.e. will work as well as .
• 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.

Creating an HTML Document
Since HTML documents are essentially text files with the extension .htm or.html, any basic
text editor like Notepad WordPad 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,
linefeeds, 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></HEAD>
<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 editing 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

Basic Web Design

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

Heading
These tags are used to highlight text by making them bigger and bolder than normal text.
There are six levels of headings numbered 1 through 6, where 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 heading</H1>
<H2>Level 2 heading</H2>
</BODY>

</HTML>

Paragraph
These tags, denoted by , 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 end up with as one long block of text.
E.g.:
<HTML>
<HEAD>
<TITLE> Working with Paragraphs </TITLE
</HEAD>
<BODY>
This is the opening paragraph for this page. It does not have much information at the
moment, but it indicates how a paragraph is constructed in HTML.

This is the second paragraph on this page.

</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>

Basic Web Design

<HEAD>
<TITLE> Working with Paragraphs </TITLE
</HEAD>
<BODY>
This is the opening paragraph for this page. I have used the attribute
align with the value center to put it in the middle of the page.

This is the second paragraph on this page and it is right aligned.

</BODY>
</HTML>

Line Break
The line break tag is used to simulate the effect of creating a line 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 
One Trinity Place 
San Antonio, TX 78212 
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, enter:


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

IMS Technology Training - 10 - © 2003 Trinity University

Basic Web Design

needing prior knowledge of HTML. However, a basic grounding in HTML allows you to
tweak and optimize the HTML code that FrontPage generates.

Creating a New Web Page
To launch 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 application, 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

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 between the pages.
Tasks is a little word processor that lets 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 views:
• 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 displays 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. These tags are for
information only and cannot be edited or changed in this view.


Basic Web Design

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 Bar.
You can also right-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 and image.

General
In the title box, type 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
add 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

You can also change hyperlink colors in the same manner. 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.

• Light colored backgrounds with dark text work well together.
• A dark background can add drama, but needs a bright text color for
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.

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
( ) with a blank line after it.
To insert a line break ( ) instead of a paragraph break, use the Shift-Enter combination.
When modifying a web page, it is best to view the formatting marks.
Use the Show All button - - to display formatting marks.

Formatting Text
You can format text to be in different fonts, sizes, styles, and colors using the lists and
buttons on the toolbar or the Format  Font option in the Menu Bar.

Font List
Size List

Basic Web Design

Font Type
It is best to select a simple, san-serif font that is easily available on most computers to avoid
variations in how the page is displayed. Choose fonts such as Arial, Verdana, or Helvetica
that are easy to read and available on most computers.

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

Font Style
This usually refers to setting text as bold, italics, headers, lists, etc.. An easy method to
convert text to bold or italics is to select the text and then click on the Bold ( ) or Italics (
) button.

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

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 as 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.

The Font dialog box offer allows you to set text 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.

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.


Basic Web Design

Formatting 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 command 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 Photographic 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 Bar. Select
From File or Clip Art to specify the
file location.
When the Picture menu screen appears,
navigate to the location of the desired
image, select it, and then click Insert to
place it on the page.

In order for the page to load correctly, all the “parts” of the web page
(graphics, animations, video files, photos, sounds, etc.) have to be located
in the “same place”. If the web “page” can’t find items, you 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.

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.


Basic Web Design

Dragging on a corner handle sizes the graphic proportionately.
Dragging the middle handle will distort the image.

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 Properties dialog box.

Change the Alignment of 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 you 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.

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

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 hyperlinks 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 on the Hyperlink button at the top of the dialog
box.

Hyperlink
button

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, type 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 Hyperlink dialog box.


Basic Web Design

Click on the Browsed Pages button and select your site from the list of choices that appears.
The 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 hyperlink.

Web address

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 the 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 
Bookmark from the Menu Bar. Give the bookmark a
suitably descriptive name and select OK. In the Normal Page
View, a bookmark will show with a dashed underline.

To create the hyperlink to the bookmark, select 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
Hyperlink 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 Ctrl key and click on the link.


Basic Web Design

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  Save), 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 arrow 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 name box and click the Save button. FrontPage will automatically add the
extension .htm to the file name.

More locations
Location name

File name

• 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 should not have an apostrophe (’) as this is a reserved
Java character and could cause later problems as well.


Basic Web Design

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  Insert  Table from the Menu
Bar. This will display the Insert Table dialog box
shown below.

Use the Rows 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

Table Properties
Specify width sets the width of the table by a distinct 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 their 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

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 select Tables 
Properties  Cell 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

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 that 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 into the first cell.

• Highlight both cells in the top row and select Table  Merge Cells from the Menu
Bar. You can also right-click and select it from the popup menu.


Basic Web Design

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  Insert  Rows or Columns 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 of 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.

You can also insert a row or column right-clicking in the cell the new row or
column will be adjacent to. Select Insert Row or Insert Column from the
popup menu.


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 pages 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 by clicking 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.

If you still have your single web page on the screen, select File  Close in the
Menu Bar. If you are prompted to save your changes, select Yes.


Basic Web Design

To create a new web site, select File  New  Page or Web in the Menu Bar. This will
bring up a “Task Pane” on the right
hand side of your screen.

The Task Pane is Office 2002’s alternative to the dialog box. It is a Web-style
command area that you can dock along the right or left edge of your screen or
float anywhere on the screen.
Source: Microsoft Office SP Inside Out

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 “small 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 highlighted. If it is
not, click on it.
• Second (2), in the “white area” under Options, specify the location of your new
web by typing in c:webtest.

If your Web Site Templates dialog box should looks like the one on the following page,
click OK. This will 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 your
web site.


Basic Web Design

1.
2.

To visually see/confirm that your web site has been
created by FrontPage, 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


Basic Web Design

To create our web site we’ll want to be in the Navigation View, so 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 Your Web Site
If you haven’t already, you’ll notice that the Save option under File in the Menu Bar is
grayed out, as is the Save button in the Tool Bar. One of the neat things in FrontPage 2002
is that it automatically saves your web site as you make a change.

To see this, select File  Exit in the Menu Bar. FrontPage will close. Now open
FrontPage as you did at the beginning of this tutorial. Your new web site will shows up just
as you had 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
index.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
Folder List view area.

You will still have to save individual web page
changes as you work on them.


Basic Web Design

Creating Web Site 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 click 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 icon, 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 your home 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 hyperlinks it to the corresponding
page. Your screen should now look like the one at the right.

Add two more pages under your Home Page (index.htm). Each
time, click on the 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. Your web site should now look like the one below.


Basic Web Design

• 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 the page and select Delete from the popup
menu.

• You can also click on the Undo button.

You now have the beginning of a small web site.

Before you can look at it however, you need to do a very important task. You need to tell
FrontPage what you want to see on your web pages in your web site. To do this, select
Format  Shared Borders in the Menu Bar. This will bring up the Shared Borders
dialog box.
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 shared 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, copyright notice, etc.

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 page. When
it does, select OK.


Basic Web Design

To see what your site looks 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 View).

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
Editor (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 Navigation View and re-name these pages so that
they make more sense to your web site. Don’t worry about the dashed lines, these are


Basic Web Design

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

Viewing Your Website in a Browser
To see what the site would look like on the Web, in Page View, click on
the browser button in the Tool Bar. Or select File  Preview in
Browser from the Menu Bar.

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.

Your initial view of your Home Page (index.htm) should look 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.

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 your Shared Borders, you set it up so that


Basic Web Design

links to pages 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 their names. These are part of the automatic hyperlinks
that FrontPage creates.

Now click on New Page 3 in the browser. Your browser should now look like the image
below.

Pages
Below
New
Page 3 Pages Above and at
the Same Level as
New Page 3

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 navigation level as New Page 3.

Creating Titles for Website Pages
To get an idea of how page titles are displayed 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 displays the actual page names as they 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.

To rename a file name (new_page_1.htm in this example), right-
click on the file name in the Folder View in the 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

Return to the Navigation View in the View Bar to give your pages 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 Enter key when you are finished. Select
View  Refresh 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 you are done, select View 
Refresh 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 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 Bar.


Basic Web Design

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 Bar, 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 screen. 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
For 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
consistent look. (You 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 bars.
• Table border colors.
Source: Microsoft Office XP Inside Out


Basic Web Design

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 selected 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 have decided on a theme, make sure you select one of the options under Apply
Theme to:.

• If you select All pages, the theme 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

This will bring up the following message screen:

It

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  Save All in the Menu Bar.

When you are in the Page view, you’ll need to save
your changes to each page just like you did when
creating a single web page.

You can save each page individually, or all of them at
the same time with the Save All option.

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

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.

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

Publishing Websites
For 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  Publish Web from the Menu Bar. This will display
the Publish 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 username and password as shown below. When
typing in your username, make sure you use the following format: trinityusername. Once
you connect, you will see the Publish Web dialog box displayed on the following page.


Basic Web Design

local view remote
view

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.

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 box.


Basic Web Design

Once the “publish” is complete, you will see the following dialog box. Select 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 Press, 2001.
• Halverson, Michael and Michael J. Young. Microsoft Office XP Inside Out.
Redmond: Microsoft Press, 2001.
• Murray, Tom. Creating a Web Page and Web Site. Lynchburg College, 2002.
• Krug, Steve. Don’t Make Me Think. Indianapolis: New Riders Publishing, 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/office2000/frontpage/>
• A Beginner’s Guide to HTML, NCSA, 14 May 2003
<http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html>
• Web Design & Architecture. Educational 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/)

Basic Web Design.doc

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (8)

Similar to Basic Web Design.doc

Similar to Basic Web Design.doc (20)

More from butest

More from butest (20)

Basic Web Design.doc