Tài liệu Learning HotMetal pro 6_132 pdf

Copyrights and Trademarks

No part of this document may be reproduced, stored in a retrieval system, or
transmitted in any form or by any means – electronic, mechanical, recording, or
otherwise – without the prior written consent of the publisher.

Netscape Navigator is a trademark of Netscape Communications Corp.
Windows 3.1, Windows 95, Windows NT, and Internet Explorer are trademarks of
Microsoft Corporation.
All trademarks and brand names are acknowledged as belonging to their
respective owners.

Published by
XtraNet
180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9
Phone: 416-675-1881 Fax: 416-675-9217 E-mail:


Copyright
©
1999 by XtraNet
All Rights Reserved
January 1999
First Edition
1 2 3 4 5 6

Copyrights and Trademarks

No part of this document may be reproduced, stored in a retrieval system, or
transmitted in any form or by any means – electronic, mechanical, recording, or
otherwise – without the prior written consent of the publisher.

Netscape Navigator is a trademark of Netscape Communications Corp.
Windows 3.1, Windows 95, Windows NT, and Internet Explorer are trademarks of
Microsoft Corporation.
All trademarks and brand names are acknowledged as belonging to their
respective owners.

Published by
XtraNet
180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9
Phone: 416-675-1881 Fax: 416-675-9217 E-mail:


Copyright
©
1999 by XtraNet
All Rights Reserved
January 1999
First Edition
1 2 3 4 5 6 7
Table of Contents
SoftQuad HoTMetaL PRO Training 1

Chapter 1 - HTML Introduction....................................................................................... 1
Linear Media ......................................................................................................................2
Hypermedia........................................................................................................................2
What is HTML Markup ........................................................................................................3
A Basic Document ..............................................................................................................4
Review Questions ...............................................................................................................5
Summary ...........................................................................................................................6
Chapter 2 - Overview of the HoTMetaL Editor ............................................................ 7
Launch Screen ...................................................................................................................8
Initial Screen ......................................................................................................................9
Editor Window ..................................................................................................................10
Docking Windows .............................................................................................................11
Left Windows ....................................................................................................................12
Assets View............................................................................................................................................................. 12
Document Windows ..........................................................................................................15
Editor Views .....................................................................................................................16
Source View ............................................................................................................................................................ 17
Tags On View.......................................................................................................................................................... 18
WYSIWYG View...................................................................................................................................................... 19
WYSIWYG-Frames View ........................................................................................................................................ 19
Page Preview View ................................................................................................................................................. 20
Editor Preferences ............................................................................................................21
Menu Items ......................................................................................................................21
Toolbars ...........................................................................................................................22
Selecting Toolbars................................................................................................................................................... 22
Moving Toolbars...................................................................................................................................................... 23
Customizing Toolbars.............................................................................................................................................. 23
Toolbar Functions .............................................................................................................24
Review Questions .............................................................................................................27

Summary .........................................................................................................................28
Chapter 3 – The Anatomy of an HTML Document ...................................................29
Document Structure..........................................................................................................30
Head Elements.................................................................................................................31
Document Properties ........................................................................................................32
Inserting Elements and Attributes.......................................................................................33
Modifying an Elements Attributes .......................................................................................34
Removing Elements..........................................................................................................35
Exercise...........................................................................................................................36
Optional Exercise .............................................................................................................36
Review Questions .............................................................................................................37
Summary .........................................................................................................................38
Chapter 4 - Headings, Paragraphs, Breaks and Horizontal Rules.........................39
Headings, <Hx> </Hx>......................................................................................................40
Paragraph, <P> </P>........................................................................................................41
HoTMetaL Tip ..................................................................................................................41
Horizontal Rule, <HR> ......................................................................................................43
Exercise – Headings .........................................................................................................44
Exercise – Horizontal Rules ...............................................................................................45
Exercise – Paragraphs & Breaks .......................................................................................46
Review Questions .............................................................................................................47
Summary .........................................................................................................................48
Chapter 5 - Character Formatting ................................................................................49
Bold & Italic and other Character Formatting.......................................................................50
Font Element ....................................................................................................................52
Alignment .........................................................................................................................54
Special Characters & Symbols...........................................................................................54
Special Characters Toolbar..................................................................................................................................... 54
Table of Contents

2 SoftQuad HoTMetaL PRO Training

Symbols Toolbar ..................................................................................................................................................... 54
Additional Character Formatting Elements..........................................................................55
HoTMetaL Tip ..................................................................................................................57
Exercise 1........................................................................................................................58
Exercise 2........................................................................................................................59
Optional Exercise .............................................................................................................59
Review Questions .............................................................................................................60
Summary .........................................................................................................................61
Chapter 6 - Lists .............................................................................................................62
List Elements....................................................................................................................63
Unordered List......................................................................................................................................................... 63
Ordered List............................................................................................................................................................ 64
Definition List........................................................................................................................................................... 65
Other Lists............................................................................................................................................................... 66
HoTMetaL Tip ..................................................................................................................66
Nesting Lists.....................................................................................................................67
Exercise – Ordered List.....................................................................................................68
Optional Exercises ............................................................................................................68
Review Questions .............................................................................................................69
Summary .........................................................................................................................70
Chapter 7 – Anchors and URLs ...................................................................................71
Link Elements <A Href=> </A> ..........................................................................................72
Link Types .......................................................................................................................72
Internal Links....................................................................................................................73
Creating Local Links .........................................................................................................74
URLs – Uniform Resourced Locators .................................................................................75
HTTP – HyperText Transport Protocol .................................................................................................................... 75
FTP – File Transfer Protocol ................................................................................................................................... 75

News – News Groups .............................................................................................................................................. 75
Gopher.................................................................................................................................................................... 76
E- mail ...................................................................................................................................................................... 76
Telnet – Remote Terminal Emulation ...................................................................................................................... 76
Link Colors .......................................................................................................................77
HoTMetaL Tip ..................................................................................................................78
Exercise – Mailto and HTTP Link .......................................................................................79
Review Questions .............................................................................................................80
Summary .........................................................................................................................81
Chapter 8 – Images and Image Maps.........................................................................82
Supported Image Formats.................................................................................................83
GIF.......................................................................................................................................................................... 83
JPEG....................................................................................................................................................................... 84
Limited Support or Non-Supported Image Formats .............................................................84
Inserting Images <IMG> ....................................................................................................85
Image Attributes ...............................................................................................................86
Inserting Images using the Asset Manager .........................................................................88
HoTMetaL Tip ..................................................................................................................88
Using Images as Links ......................................................................................................89
Image Maps .....................................................................................................................90
Server-side Image Maps ......................................................................................................................................... 90
Client-side Image Maps........................................................................................................................................... 91
How to create a Client-side Image Map..............................................................................92
Exercise 1........................................................................................................................95
Optional Exercise .............................................................................................................95
Review Questions .............................................................................................................96
Summary .........................................................................................................................97
Chapter 9 - Tables .........................................................................................................98
Tables <TABLE> </TABLE> ..............................................................................................99
Inserting a Table ............................................................................................................. 100

Table of Contents
SoftQuad HoTMetaL PRO Training 3

Table Attributes..................................................................................................................................................... 101
Table Captions ...................................................................................................................................................... 103
HoTMetaL Tip ................................................................................................................ 103
Table Header ........................................................................................................................................................ 104
Editing the Table ................................................................................................................................................... 105
Tables Toolbar ...................................................................................................................................................... 105
Table Properties............................................................................................................................................... 106
Row Properties ................................................................................................................................................ 108
Column Properties ........................................................................................................................................... 109
Cell Properties ................................................................................................................................................. 110
Exercise – Add and customize a table .............................................................................. 112
Review Questions ........................................................................................................... 113
Summary ....................................................................................................................... 114
Chapter 10 - Converting Legacy Documents and Using Templates....................115
Converting Legacy documents......................................................................................... 116
HoTMetaL Tip ................................................................................................................ 117
Using Templates ............................................................................................................. 118
Exercise – Converting a legacy document ........................................................................ 120
Exercise – Creating a new document using a template...................................................... 120
Review Questions ........................................................................................................... 121
Summary ....................................................................................................................... 122
Chapter 11 - Frames....................................................................................................123
Frames .......................................................................................................................... 124
Frames Architecture........................................................................................................ 125
Creating a Frames Page ................................................................................................. 126
Frameset............................................................................................................................................................... 127
Frame .................................................................................................................................................................... 129

Noframes............................................................................................................................................................... 131
Targets.................................................................................................................................................................. 132
Special Targets ..................................................................................................................................................... 133
Frame Editor .................................................................................................................. 134
Exercise – Using a Framed page ..................................................................................... 135
Exercise – Creating a link in a framed environment ........................................................... 135
Exercise – Creating a Frames Based Page ...................................................................... 136
Exercise – Creating Three Panels.................................................................................... 137
Review Questions ........................................................................................................... 138
Summary ....................................................................................................................... 139
Chapter 12 - Forms ......................................................................................................140
Forms <FORM> </FORM> .............................................................................................. 141
Form Attributes...................................................................................................................................................... 142
HoTMetaL Tip ................................................................................................................ 142
Form Elements ............................................................................................................... 143
Hidden Values....................................................................................................................................................... 144
File Upload ............................................................................................................................................................ 146
Text area............................................................................................................................................................... 148
Select.................................................................................................................................................................... 149
Drop down list....................................................................................................................................................... 149
List box.................................................................................................................................................................. 149
Options ............................................................................................................................................................ 150
Common Gateway Interface - CGI ................................................................................... 151
CGI Scripts..................................................................................................................... 151
Simple CGI Program ....................................................................................................... 152
Three-Tier Web Application Development ........................................................................ 153
Four-Tier Web Application Development .......................................................................... 154
Exercise – Creating an Order Form.................................................................................. 155
Review Questions ........................................................................................................... 169
Summary ....................................................................................................................... 170

Chapter 13 - Special Elements ..................................................................................171
Uses of the Meta Element ............................................................................................... 172
Client Pull, Server Push........................................................................................................................................ 172
Table of Contents

4 SoftQuad HoTMetaL PRO Training

Description............................................................................................................................................................ 172
Keywords .............................................................................................................................................................. 172
Author.................................................................................................................................................................... 173
Company............................................................................................................................................................... 173
Copyright............................................................................................................................................................... 173
Adding sound to an HTML page....................................................................................... 174
Embed................................................................................................................................................................... 174
BGSound............................................................................................................................................................... 174
Marquee ........................................................................................................................ 175
Blink .............................................................................................................................. 175
Exercise – Adding Client Pull, Server Push....................................................................... 176
Optional Exercise ........................................................................................................... 177
Review Questions ........................................................................................................... 178
Summary ....................................................................................................................... 179
Chapter 14 - Page Layout and Design Considerations ..........................................180
Technical Design Considerations ..................................................................................... 181
Screen Resolution................................................................................................................................................. 181
Color Depth ........................................................................................................................................................... 181
Document Size vs. Download Time ....................................................................................................................... 182
Page Loading – HTTP 1.0 vs. HTTP 1.1 ............................................................................................................... 183
Browser Compatibility & Quirks ............................................................................................................................. 183
Page layout .................................................................................................................... 184
Page Layout Guidelines ........................................................................................................................................ 184

Site Design Factors and Criteria ...................................................................................... 186
Site Layout and Navigation .............................................................................................. 186
Review Questions ........................................................................................................... 187
Summary ....................................................................................................................... 188
Chapter 15 - Cascading Style Sheets .......................................................................189
Introduction to Cascading Style Sheets ............................................................................ 190
Inline Styles.................................................................................................................... 191
Embedded Style Sheets.................................................................................................. 193
Creating an Embedded Style ........................................................................................... 194
Linked Style sheets......................................................................................................... 195
Creating a Linked Style Sheet.......................................................................................... 196
User Defined Selectors ................................................................................................... 197
Classes ................................................................................................................................................................. 197
IDs......................................................................................................................................................................... 198
Creating Classes and IDs ................................................................................................ 199
HoTMetal PRO Display Styles ......................................................................................... 200
DIV and SPAN................................................................................................................ 201
Cascading and Inheritance.............................................................................................. 202
Exercise – Inline Styles ................................................................................................... 204
Exercise – Embedded Styles ........................................................................................... 205
Exercise – Linking in a Cascading Style Sheet .................................................................. 207
Exercise – Editing a Cascading Style Sheet ..................................................................... 209
Optional Exercise ........................................................................................................... 212
Review Questions ........................................................................................................... 213
Summary ....................................................................................................................... 214
Chapter 16 - JAVA and JavaScript Introduction......................................................215
JAVA ............................................................................................................................. 216
Applet ............................................................................................................................ 216
<PARAM> Element ............................................................................................................................................... 217
JavaScript ...................................................................................................................... 218

Exercise – Inserting a JAVA Applet .................................................................................. 220
Optional Exercise – Adding JavaScript to a page .............................................................. 221
Review Questions ........................................................................................................... 222
Summary ....................................................................................................................... 223
Chapter 17 - ActiveX Objects and VBScript introduction.......................................224
Table of Contents
SoftQuad HoTMetaL PRO Training 5

ActiveX Support .............................................................................................................. 225
<OBJECT> ..................................................................................................................... 225
VBScript......................................................................................................................... 229
Exercise – Adding an ActiveX Object to a page ................................................................ 230
Optional Exercise – Adding VBScript to a page................................................................. 233
Review Questions ........................................................................................................... 234
Summary ....................................................................................................................... 235
Chapter 18 - High Speed Publishing .........................................................................236
Keeping HoTMetaL PRO Current ..................................................................................... 237
URL Hot List................................................................................................................... 238
Macros ........................................................................................................................... 240
Customizing Toolbars ..................................................................................................... 242
Creating Toolbars ........................................................................................................... 243
Creating New Menus ...................................................................................................... 245
Menu Customization Options ........................................................................................... 246
Working with Image Libraries & Other Web Components................................................... 247
Image Explorer...................................................................................................................................................... 247
Asset Manager...................................................................................................................................................... 248
Assets ................................................................................................................................................................... 249
Assets - adding ................................................................................................................................................ 250
Review Questions ........................................................................................................... 253
Summary ....................................................................................................................... 254

Chapter 19 – From Web Pages to a Web Site ........................................................255
Designing a Web Site...................................................................................................... 256
Planning the Directory Structure for a Web Site ................................................................ 257
Establishing Document Standards ................................................................................... 258
Using Templates ............................................................................................................. 259
Review Questions ........................................................................................................... 260
Summary ....................................................................................................................... 261
Chapter 20 – Site Management Overview ...............................................................262
Site Management Tools .................................................................................................. 263
Creating New Project ...................................................................................................... 264
Opening an existing project ............................................................................................. 266
Project Tab..................................................................................................................... 267
Page and Site Views ....................................................................................................... 268
Right Click Menus & Functions ........................................................................................ 270
Review Questions ........................................................................................................... 271
Summary ....................................................................................................................... 272
Chapter 21 – Using Site Management tools to Manage a Web Site ..................273
Creating a New Folder .................................................................................................... 274
HoTMetaL Tip ................................................................................................................ 274
Importing Content ........................................................................................................... 275
Import Site............................................................................................................................................................. 275
Choosing a Destination ......................................................................................................................................... 277
Level Selection...................................................................................................................................................... 277
Content Selection.................................................................................................................................................. 277
Creating Links by Dragging and Dropping ........................................................................ 279
Managing Files and Links Between Files .......................................................................... 280
Moving Files .......................................................................................................................................................... 281
Copying Files ........................................................................................................................................................ 282
Deleting Files ........................................................................................................................................................ 283
Renaming Files ..................................................................................................................................................... 284

Find and Replace across Multiple Documents................................................................... 285
File Selection......................................................................................................................................................... 286
Search Options ..................................................................................................................................................... 286
Project Maintenance ....................................................................................................... 287
Finding Broken Links............................................................................................................................................. 288
Fixing Broken Links ............................................................................................................................................... 289
Table of Contents

6 SoftQuad HoTMetaL PRO Training

Testing External Links ........................................................................................................................................... 291
Locating Orphan Files ........................................................................................................................................... 293
Project Summary ............................................................................................................ 294
Review Questions ........................................................................................................... 296
Summary ....................................................................................................................... 297
Chapter 22 – Publishing a Web Site with HoTMetaL PRO ...................................298
Pre Publishing Procedures .............................................................................................. 299
Changing your URLs for the Web.......................................................................................................................... 299
Changing to Complete URLs ........................................................................................... 300
Changing to Relative URLs ................................................................................................................................... 302
Site Wide Changes to URLs ............................................................................................ 303
Configuring a Site for Publishing...................................................................................... 304
Site Properties....................................................................................................................................................... 304
Viewing Remote Files ..................................................................................................... 311
Publishing Files to Remote Sites...................................................................................... 312
Working with Remote Files .............................................................................................. 316
Post Publishing Procedures ............................................................................................. 317
Review Questions ........................................................................................................... 318
Summary ....................................................................................................................... 319

SoftQuad HoTMetaL PRO Training 1


1
HTML Introduction


In this chapter you will be introduced to the concepts of linear media and
hypermedia. You will learn about HTML and the basics of document
structure.



Objectives

Upon completing this section, you should be able to

1. Explain hypermedia vs. linear media

2. Define HTML

3. Describe the Basic Document Structure

2 SoftQuad HoTMetaL PRO Training

Linear Media

Linear media is a term used to describe any media where there is a
defined beginning and a linear progression to the end. Forms of linear
media such as movies, audio and videotapes, and most books are
organized with this expectation. The World Wide Web, however, is
organized very differently.


Hypermedia

Hypermedia is where the user simply selects the next item of interest and
is immediately transported to that new location. A good example is an
audio CD where you can choose song 5 and listen to it almost
immediately. Contrast this with an audiotape where you would have to
scan through from your current location on the tape to the beginning of the
song.

When this concept is applied to text you get hypertext, where by
{Clicking} on a link or hotspot (hyperlink) you are immediately transported
to a new location within the same page or to a new page altogether.

When you interlink a large number of pages of text on different computers
all over the world, you get a spider web-like system of links and pages.
This is known as the World Wide Web – a system whereby pages stored
on many different web servers, connected to the Internet, are linked

together.

The system is useful because all of the pages are created in the same
format. This format or “language” is called HTML, (Hypertext Markup
Language) a subset of an international standard for electronic document
exchanged called SGML (Standard Generalized Markup Language).

In this class you will be introduced to the format of an HTML page, you will
learn about the components that make up HTML, and how to use
HoTMetaL PRO to create pages that can be published on the World Wide
Web.


SoftQuad HoTMetaL PRO Training 3

What is HTML Markup?

HTML is a set of logical codes (markup) in parentheses that describe the
appearance of a web document and the information it contains.

E.g. <B>This text would appear bold in the browser</B>

The codes are enclosed by less than “<”, and greater than “>” brackets.
These bracketed codes of the markup are commonly referred to as tags.
HTML codes are always contained inside these brackets and are case-
insensitive; meaning, it does not matter whether you type them in upper
case or lower case. However, tags are easier to recognize in a web
document if they are capitalized.

There is an opening element (tag) and a closing element (tag). The

closing element is distinguished by the “/” inside the “<” opening bracket,
as in </B> to end where the text is in bold.

The first word or character that appears inside the “<” opening bracket is
called the element. An element is a command that tells the browser to do
something, such as <FONT>.

Words that follow the element and are contained inside the “>” closing
bracket are called attributes. Attributes are not repeated or contained in
the closing element (tag). Confused? Attributes are another way of
describing the element’s properties. For instance, a t-shirt can have
several properties or “attributes” – the t-shirt’s color, size, material etc. are
all attributes.

Attributes that appear to the right of the element are separated by a
space, and followed by an equal sign. The value of the attribute is
contained in quotes. In the following example the element is FONT, the
attribute is COLOR, and the value of that attribute is BLUE.



Most HTML elements have more than one attribute.
E.g. <FONT COLOR="BLUE" SIZE=”+1”>This text would be blue and
one size larger than normal.</FONT>




4 SoftQuad HoTMetaL PRO Training

A Basic Document

An element called HTML surrounds the whole document. This element
contains two sub-elements, HEAD and BODY. These elements are
required to form any HTML document.




Course Goal

The goal of this course is to teach you how to use HoTMetaL PRO 6.0 to
apply HTML Elements and Attributes in designing web pages. This course
will review almost every element in the current HTML specification. Not all
web pages use all of the elements, however it is to your advantage to
understand that they exist so that you can create more effective pages.


SoftQuad HoTMetaL PRO Training 5

Review Questions

1. What does HTML stand for?



2. What is an Element?

3. What are the Attributes of an Element?



4. What are the three basic elements of an HTML document?









6 SoftQuad HoTMetaL PRO Training

Summary

As a result of this chapter, you should be able to

• Explain hypermedia vs. linear media

• Define HTML

• Describe the Basic Document Structure

SoftQuad HoTMetaL PRO Training 7

2
Overview of the HoTMetaL PRO

Editor


In this chapter you will learn about the powerful HTML editor HoTMetaL
PRO 6.0, and how to customize it to your liking.



Objectives

Upon completing this section, you should be able to

1. Launch HoTMetaL PRO

2. Manage different window options

3. Identify the Asset Manager window functions

4. Switch between and describe the editor views in the Document
Window

5. Set the editor preferences

6. Find and select different toolbars

8 SoftQuad HoTMetaL PRO Training

Launching HoTMetaL PRO 6.0

To start up HoTMetaL PRO 6.0, {Click} once on the "Start" icon in the left
corner of your screen, slide your mouse up to "Programs", {Click} once
and slide over to "SoftQuad Applications", {Click} once and slide onto
"HoTMetaL PRO 6.0" and {Click} once.




SoftQuad HoTMetaL PRO Training 9

Initial Screen

When you startup HoTMetaL PRO 6.0 for the first time you will see the
“Tip of the Day” screen. You can view a series of Tips by {Clicking} on the
"Next Tip" button or you have the option to "Close" the window.

If you do not want to see the tips the next time you start HoTMetaL PRO,
uncheck the box in the lower left corner "Show Tips on StartUp".





10 SoftQuad HoTMetaL PRO Training

Initial Editor Screen

Once you have closed the Tips Window, you will get the Editor interface in
its default configuration. Throughout the rest of the chapter we will be
familiarizing you with the editor, and how to customize it to your liking.







SoftQuad HoTMetaL PRO Training 11

Window Management - Docking

Windows can either be active on the same screen layer as the editor
window – “docked” - or they can be “floating” above the screen layer. A
docked window will have a “handle”, 2 ridges, at the top of the window.



{Double Clicking} on the handle will convert the window to a floating
window which can then be easily repositioned anywhere in your display.

To redock the window you can {Double Click} on the floating window’s title
bar or you can {Right Click} on the title bar and choose the redock option
from the pop up dialog box.

If you {Right Click} on the handle you can enable or disable the Allow
Docking feature.



Note: If you undocked the window by turning off `Allow Docking', the only
way to return it to a docked position is as follows:

• {Right Click} on any edge of the window
• Choose Allow Docking to turn docking back on
• {Right Click} on the title bar at the top of the window
• Choose Redock


12 SoftQuad HoTMetaL PRO Training

Left Windows

Assets Tab


Provides an active view, drag & drop window interface. The active view
shows image “thumbnails” with live animation and the drag & drop
interface allows for easy insertion of selected objects into your working
documents.



SoftQuad HoTMetaL PRO Training 13

Desktop Tab


This view uses a Windows Explorer type of interface to allow file
administration operations. It can be helpful when you want to move
existing files into your working design environment.




14 SoftQuad HoTMetaL PRO Training

Remote Tab



This view displays sites that you create as Publishing Locations. It allows
selection of files for editing by dragging and dropping from the Remote
Tab onto the editor window.

SoftQuad HoTMetaL PRO Training 15

The Document Window

To explore the HoTMetaL PRO document window you need to create a
new file. {Click} on the “New Page” button

When you create a new page for the first time, the HoTMetaL PRO
document window displays the page in Tags On view, with Workbook
mode turned on. Workbook mode means that each open file will have a
tab displayed at the bottom of the document window. You can select any
open file by {Clicking} on its tab.

When a page is open in the document window you can edit it directly and
you can also drag and drop objects from the Asset Manager.


16 SoftQuad HoTMetaL PRO Training

Editor Views

HoTMetaL PRO supports five different views:
1. HTML – Shows the raw HTML code.
2. TAGS – Shows the HTML tags in a graphical environment.
3. WYSIWYG – What you see is what you get.
4. WYSIWYG-Frames - Shows you how your frames design will look.
5. Page Preview - What a page should look like in the browser.

You can switch between these views in several different ways:
1. Use the View Menu and select one of the views.
2. Use Keyboard short cuts visible in the View menu (Ctrl + Shift
H/T/W/F/B)
3. Use the icons in the bottom left corner of the editor window.