8
Basic Understanding of Web
Authoring Tools
8.1 What is Web Authoring?
8.2 Web Authoring Tools
8.3 Use Text Editors
8.4 HTML Editors
8.5 Web-based Authoring Tools
8.6 Integrated Web Authoring Tools
8
Basic Understanding of Web
Authoring Tools
8.7 Get Started with Macromedia
Dreamweaver – Define a Web Site
8.8 Basic Web Design Features of
Macromedia Dreamweaver
8.9 Save and Preview Web Pages in
Macromedia Dreamweaver
8.10 Comparison of Different Web
Authoring Tools
8.1 What is Web Authoring?
 Web Authoring
 The process of establishing a web site
 Includes designing the file structure of the
web site and the layout of the web pages
Page layout
File structure
8.2 Web Authoring Tools
 Web Authoring Tools
Tool
Description
Example
Style
Text
editors
The most primitive tools
which require users to
have a considerable
knowledge of HTML code.
Notepad
(Windows),
SimpleText
(MacOS)
primitive
HTML
editors
More sophisticated text
editors which provide
additional support for
HTML tags, such as tag
checking.
HotDog
Professional,
Macromedia
Homesite,
BBEdit
(MacOS)
advanced
8.2 Web Authoring Tools
 Web Authoring Tools
Tool
Description
Example
Webbased
authoring
tools
They are usually
provided by large web
hosting companies or
portals. Usually
installation of special
software is not needed
Yahoo!
Geocities
Integrated
and
authoring
tools
They are WYSIWYG
HTML editing tools
which provide
comprehensive web
authoring functions,
such as web site
management and
dynamic web page
editing
Macromedia
Dreamweaver,
Microsoft
FrontPage,
Microsoft
Word
Style
primitive
advanced
8.3 Use Text Editors
 Examples of Text Editors
Windows Notepad
Mac OS SimpleText
 Web Page Creation
 Type the text to be displayed and the
required HTML tags into text editor
 Requires reasonable HTML knowledge of
web authors
8.4 HTML Editors
 Usually offer great functionality and control over HTML
code
 HotDog Professional
 HTML tags and attributes are in different colours to
make editing easier
 Tool palettes: help complex HTML tags editing,
such as establishing an ordered list
Hotdog Professional –
tool palette
Hotdog Professional –
editor panel
8.4 HTML Editors
 BBEdit
 HTML editor for MacOS
 has a ‘Lite’ edition (now called Textwrangler)
which is free to download.
BBEdit
8.5 Web-based Authoring Tools
 Free Online Web Authoring and
Hosting Service
 Many famous portals provide free account
and storage space for users to create their
own web sites
 The web pages are usually hosted in the
web server’s directory
 Generally no additional software required
except certain browser plug-ins
8.5 Web-based Authoring Tools
 Establish a Web Site through ‘Yahoo!
GeoCities’
 Open an account in GeoCities:
http://hk.geocities.yahoo.com
 Create a simple web page of yourself through
the wizards provided by Yahoo.
 Submit the link of your webpage through email
to me OR just ask Mr. Lam to take a look at
your page.
8.6 Integrated Web Authoring Tools
 Integrated Web Authoring Tools
 Usually WYSIWYG HTML editors with site
management functions
 Include common supportive functions like
table and frame creation, hyperlink
checking and updating
 Users can focus on the page design rather
than on tedious HTML code editing
8.6 Integrated Web Authoring Tools
 Macromedia Dreamweaver
 An integrated platform for creating,
establishing and managing web sites
 Supports highly flexible page layout designs
with optimized HTML code
 Has strong supportive functions for creating
dynamic web sites
 Allows updated web server technologies that
can be used in e-commerce
8.6 Integrated Web Authoring Tools
 Macromedia Dreamweaver
 Interface of Dreamweaver MX 2004
8.6 Integrated Web Authoring Tools
 Macromedia Dreamweaver
 Layout table
Contains various cells and allows for
more complex page design
8.6 Integrated Web Authoring Tools
 Macromedia Dreamweaver
 Supports web site navigation and site file
management
8.6 Integrated Web Authoring Tools
 Macromedia Dreamweaver
 Provides more sophisticated design tools
like layers and timelines
8.7
Get Started with Macromedia
Dreamweaver – Define a Web Site
 Steps of Site Definition Process
 Open a new folder in your hard disk to save files of
the website. --- ‘web’
 Open Dreamweaver
 Select ‘Site’ in the menu bar and click ‘Manage Sites’
in the pull down menu
Activity 2 of Ch. 9 p. 71
Design the file structure for the ‘Virtual
Campus’ web site using Macromedia
Dreamweaver
1. Start Macromedia Dreamweaver MX
2004.
2.
Select ‘Site’ → ‘Manage Sites’ to
create a new site
Activity 2
Design the file structure for the ‘Virtual
Campus’ web site using Macromedia
Dreamweaver
3. Enter ‘Virtual Campus’ for the site
name and the name of the local root
folder.
Activity 2
Design the file structure for the ‘Virtual
Campus’ web site using Macromedia
Dreamweaver
4.
Select ‘File’ →
‘New’ to create
a new web
page.
5.
Save the file as index.htm which is
the homepage of the web site.
Activity 2
Design the file structure for the ‘Virtual
Campus’ web site using Macromedia
Dreamweaver
6. Create a few more web pages and
name them as virual_campus.htm,
tai_chi.htm, exercise.htm,
web_links.htm, feedback.htm,
history.htm, photo.htm and video.htm.
8.7 Get Started with Macromedia
Dreamweaver – Define a Web
Site
 Steps of Site Definition Process
 If you choose to use an FTP account, you
have to enter the FTP host, login ID and
password in the ‘Remote Info’ section.
8.8 Basic Web Page Design Features
of Macromedia Dreamweaver
 Design View, Code View and Split
View
 Design view
shows page outlook
8.8 Basic Web Page Design Features
of Macromedia Dreamweaver
 Design View, Code View and Split
View
 Code view
shows HTML code
8.8 Basic Web Page Design Features
of Macromedia Dreamweaver
 Design View, Code View and Split
View
 Split view
shows HTML code and page layout
8.8 Basic Web Page Design Features
of Macromedia Dreamweaver
 Insert Page Title and Heading
 To insert title, type in title in the ‘Title’ text
box.
 To insert headings, either
Choose from
buttons on ‘Text’
Insert bar
Select from the ‘Format’ drop down
menu of the Properties inspector.
8.8 Basic Web Page Design Features
of Macromedia Dreamweaver
 Insert Page Title and Heading
8.8 Basic Web Page Design Features
of Macromedia Dreamweaver
 Insert Line Break
 Click line break button
on the ‘Text’
Insert bar
 Line break insertion hotkeys: ‘Shift + Enter’
8.9 Save and Preview Web Pages in
Macromedia Dreamweaver
 Save a Web Page
 A web page should be saved before it can
be previewed in a browser
 To save a web page, select ‘File’ → ‘Save
As’ on the menu bar.
 Lowercase characters, numbers and
underscores (_) can be used in filenames
8.10 Comparison of Different Web
Authoring Tools
Integrated
web
authoring
tools
Text
editors
HTML
editors
Web-based
authoring
tools
Userfriendliness
Low
Low
Higher
The highest
HTML
knowledge
Required
Required
some
None
None
Flexibility in
modifying web
pages
High
high
Low
High
Site and links
management
functions
None
Some
Some
Full set