Upload
ashlyn-stafford
View
225
Download
8
Embed Size (px)
Citation preview
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
8.6 Integrated Web Authoring Tools
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
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 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
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 barSelect 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.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