Lab-05 HomeSite - The HTML Editor

rungabbyInternet and Web Development

Nov 10, 2013 (3 years and 9 months ago)

59 views

CS
OC 2956 Internet Tools, Winter 2002



Lab_05





rungabby_9d5be5a5
-
04ee
-
4ff5
-
94b7
-
a0723d1a07e5.doc


Page
1
(5)

Lab
-
05

HomeSite
-

The HTML Editor



Objective:





To become familiar with the HTML Editor "
HomeSite 4.5
.2
"
.



To create links to different section of the same page and different pages using
relative and absolute URLs.


Introduction:

HomeSite is accessible on
the Algoma system on the Desktop by choosing,
Start

Programs

Computer Science (COSC)

HomeSite

HomeSite is an HTML Editor not an Authoring tool (e.g., Dreamweaver).

It is also an easy
-
to
-
use editor with support for HTML, DHTML, VTML, XML, HDML, SMIL, and
a
variety of scripting languages.


HomeSite has a great many uses, including:

As a general
-
purpose editor for text files.

For HTML pages.

For scripting.

For developing static and dynamic Web sites.


Web Development Features:



Editing

--

Access local and

remote files, insert and convert files, set bookmarks, easy tag selection, automatically
convert special characters.



Page Design

--

Visually layout page elements for quick edits and rapid prototyping. Convert content, such as lists
and tables, from Micro
soft Word and Excel into equivalent HTML formatting.



CodeSweeper

--

Enforce code formatting with customizable rules.



Browsers

--

Preview pages in multiple browsers, automatic detection of installed browsers.



Proofing and Testing tools

--

Maintain site c
ontent with search and replace, spell checking, code validation, and
link verification.



Enhanced Projects

--

Create, deploy, and manage local and remote Web sites.



Tag Inspector

--

Edit code in a customizable property sheet interface.



Tag Tree

--

View a
nd navigate the current document's tag hierarchy.



Site View

--

View, edit, and test links on the current page and in linked pages.



Style Editor

--

Easily create, edit, preview, and link Cascading Style Sheets.



Code templates
--

Quickly insert common tex
t blocks and expand abbreviations.



Snippets

--

Save code blocks and content for reuse.



Templates and Wizards

--

Quickly create basic pages, tables, frames, JavaScript and DHTML elements, and
synchronized RealAudio content.



Image preview

--

View Web imag
es and their properties.



Code validation

--

Configurable for multiple versions of HTML, CFML, SMIL, and browser
-
specific tags.



Color
-
coding

--

Customizable for HTML, CFML, and a wide range of scripting languages.



Version Source Control

--

Add projects t
o a source control system for team development.



User macros

--

Automate tasks by scripting the Visual Tools Object Model.





CS
OC 2956 Internet Tools, Winter 2002



Lab_05





rungabby_9d5be5a5
-
04ee
-
4ff5
-
94b7
-
a0723d1a07e5.doc


Page
2
(5)

Lab Activities:


Part
-
A: Familiarize with HomeSite Workspace


1.

Using your browser
, "Internet Explorer”, type in this address



C:
\
Program Files
\
Allaire
\
HomeSite 4.5
\
Help
\
Using_HomeSite

Then double click on “contents.htm”. This opens and presents you with a list of choices.
Choose ‘Exploring the Workshop’. This is Chapter 2.


Learn the names of the different parts of the works
pace and what their functions are.


Close the above page and try to label the different parts of the HomeSite Workspace.











CS
OC 2956 Internet Tools, Winter 2002



Lab_05





rungabby_9d5be5a5
-
04ee
-
4ff5
-
94b7
-
a0723d1a07e5.doc


Page
3
(5)



2.

Open the following file and learn the three views HomeSite offers to view each document.

This is found in
C:
\
Program File
s
\
Allaire
\
HomeSite 4.5
\
Help
\
Using_HomeSite
\
workspace4.htm

This is just another method to access page 4 of the “Exploring the Workspace”.


Describe these three views in your own words:


NOW OPEN THE HOMESITE PROGRAM

from

the Desktop
. You will notice the 3
areas/windows
that appear. In the right window the Edit View is presented.


3.

USING VALIDATOR

Insert an error in your html document, which you can explain, e.g., remove the "/" from the ending
</body> tag.

Now run the Validator by choosing
Tools

-

Validate D
ocument
.

Watch the result in the Results Window.

Add your name in the <body> and take a “print screen” of the current screen. Print out a copy using
the Edit/Paste command in MSWord.


4.

MANAGING FILES

The Universal Files tab on the Resources window is your p
rimary location for accessing and
working with drives, directories, and files.

Try opening this file using Universal Files Tab in HomeSite:

In the Drive List choose Local Disk C. In the Directory list below, choose Program
Files
\
Allaire
\
HomeSite
\
Help and f
rom the list choose “Managing Files”. This is Chapter 3.

If this does not work, access the file using the Browser C:
\
Program Files
\
Allaire
\
HomeSite
4.5
\
Help
\
Using_HomeSite
\
contents.htm and choose “Managing Files” from the list



Part
-
B: HomeSite tutorial




In the HomeSite program, open C:
\
Program Files
\
Allaire
\
HomeSite 4.5
\
Help
\

and choose the file
called “tutorial.htm”. This is Chapter 4, choose “Getting Started” from the presented list.


This tutorial acquaints you with the basics of using HomeSite fo
r HTML authoring. Completing the
tutorial produces a Web page that looks like the one in
tour_html.htm

file. It combines text, color,
layout, formatting, and links in an attractive, functional design. The techniques you learn here apply
to the major elemen
ts of building Web content.


Opening the default template

When you first open HomeSite, it displays a new,
untitled document
. If you do not see this document,
click the
New

button on the Main toolbar. It looks like this:

CS
OC 2956 Internet Tools, Winter 2002



Lab_05





rungabby_9d5be5a5
-
04ee
-
4ff5
-
94b7
-
a0723d1a07e5.doc


Page
4
(5)

Setting a working directory

All
the files you need to complete this sample page are in

C:
\
Program Files
\
Allaire
\
HomeSite 4.5
\
Help
\
Using_HomeSite
\
tutorial_files


Using Windows Explorer:

Copy the "tutorial_files" folder to your H:
\
username drive and make it (tutorial_files) your working
directory: You will be designing the tutorial page in this folder.


Using HomeSite Universal Files tab:

Navigate to this folder in the Universal Files tab. All file operations can now be done without having to
change directories.

We're using a single direc
tory to make the tutorial easier, but when you develop Web content on your
own you will want to keep your document files and supporting files (images, media, scripts) in separate
folders.


To create the tutorial page:

Open HomeSite and select the "Untitle
d" document tab in the editor.

Type
Archaeology Tours

between the <TITLE></TITLE> tags to replace "Untitled".

Choose File >
Save

to open the Save dialog box.

Enter
yourInitials
_
tour.html

in the File name text box and save the file in the tutorial_files
folder.

This step ensures that HomeSite will correctly determine the file paths when you create links by
dragging and dropping links to images and other files.


To preview the
sample page
, open the
tour_html.htm

file.


Once you have created the page
you
rInitials_tour.html

save
as
XXtour.html
, show it to TAs.

The XX stands for your initials.



Part
-
C: Create a Page describing AUC using HomeSite




Now it is time to create a similar page describing AUC.



Add content to your taste.



Structure should be simil
ar to the screen shot provided in the following page.



Show it to TAs for assessment.



CS
OC 2956 Internet Tools, Winter 2002



Lab_05





rungabby_9d5be5a5
-
04ee
-
4ff5
-
94b7
-
a0723d1a07e5.doc


Page
5
(5)





Evaluation:



Next week, at the end of the lab period you will be given a short quiz on the concepts and results
obtained in this lab.



You must create a new web
page using HomeSite for the purposes of this lab. Existing web pages
are not acceptable.


Lab Report:

1.

Write a short description of the HTML editor "HomeSite".

2.

Name the three views one can work in while using/designing in HomeSite.

3.

Write a short note on
the HTML Validation that HomeSite supports
. Attach your “printScreen”
printout of

your validation result from Part A.

4.

Show the TA your XXtour.html and resulting web page from Part B.

5.

Show the TA your XXauc.html and resulting web page from Part C.


On the
Lab Report Title Page, please print clearly lab #, lab title, your name, your student #,
course
code

and date handed in. On each page of your report must also have your student name and student #
on it.


Marks:


Report and Demo 50 + Quiz 50 = Total 100