What is Web Authoring? Web Authoring Tools Use Text Editors HTML Editors Web-based Authoring Tools Integrated Web Authoring Tools 8Basic Understanding

What is Web Authoring?

Web Authoring Tools

Use Text Editors

HTML Editors

Web-based Authoring Tools

Integrated Web Authoring Tools

8 Basic Understanding of WebAuthoring Tools

8.1

8.2

8.3

8.4

8.5

8.6

Get Started with Macromedia Dreamweaver – Define a Web Site

Basic Web Design Features of Macromedia Dreamweaver

Save and Preview Web Pages in Macromedia Dreamweaver

Comparison of Different Web Authoring Tools

8 Basic Understanding of WebAuthoring Tools

8.7

8.8

8.9

8.10

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

File structure

Page layout

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)

HTML editors

More sophisticated text editors which provide additional support for HTML tags, such as tag checking.

HotDog Professional, Macromedia Homesite, BBEdit (MacOS)

primitive

advanced

8.2 Web Authoring Tools Web Authoring ToolsTool Description Example Style

Web-based 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

primitive

advanced

Mac OS SimpleText

Windows Notepad

8.3 Use Text Editors Examples of Text Editors

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

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 – editor panel

Hotdog Professional – tool palette

Usually offer great functionality and control over HTML code

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


Macromedia Dreamweaver An integrated platform for creating, establi

shing and managing web sites Supports highly flexible page layout design

s with optimized HTML code Has strong supportive functions for creatin

g dynamic web sites Allows updated web server technologies th

at can be used in e-commerce


Macromedia Dreamweaver Interface of Dreamweaver MX 2004


Macromedia Dreamweaver Layout table

Contains various cells and allows for more complex page design


Macromedia Dreamweaver Supports web site navigation and site file management


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 webs

ite. --- ‘web’ Open Dreamweaver Select ‘Site’ in the menu bar and click ‘Manage Sites’ i

n the pull down menu

Activity 2 of Ch. 9 p. 71Design the file structure for the ‘Virtual Campus’ web site using Macromedia Dreamweaver1. Start Macromedia Dreamweaver MX 20

04.2. Select ‘Site’ → ‘Manage Sites’ to

create a new site

Activity 2Design the file structure for the ‘Virtual Campus’ web site using Macromedia Dreamweaver3. Enter ‘Virtual Campus’ for the site

name and the name of the local root folder.

Activity 2Design the file structure for the ‘Virtual Campus’ web site using Macromedia Dreamweaver4. 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 2Design the file structure for the ‘Virtual Campus’ web site using Macromedia Dreamweaver6. Create a few more web pages and nam

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

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


Design View, Code View and Split View Split view

shows HTML code and page layout


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 barSelect from the ‘Format’ drop down menu of the Properties inspector.


Insert Page Title and Heading


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.10Comparison of Different Web Authoring Tools

Text editors

HTML editors

Web-based

authoring tools

Integrated web

authoring tools

User-friendliness

Low Low Higher The highest

HTML knowledge

Required Required

someNone None

Flexibility in modifying web pages

High high Low High

Site and links management functions

None Some Some Full set

Documents

What is Web Authoring? Web Authoring Tools Use Text Editors HTML Editors Web-based Authoring Tools Integrated Web Authoring Tools 8Basic Understanding