1. What is Web Authoring? Web Authoring Tools Use Text Editors HTML Editors Web-based Authoring Tools Integrated Web Authoring Tools 8Basic Understanding of Web Authoring Tools 8.1 8.2 8.3 8.4 8.5 8.6

2. 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 8Basic Understanding of Web Authoring Tools 8.7 8.8 8.9 8.10

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

4. 8.2 Web Authoring Tools Web Authoring Tools ToolDescriptionExampleStyle 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

5. 8.2 Web Authoring Tools Web Authoring Tools ToolDescriptionExampleStyle 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

6. Mac OS SimpleTextWindows 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

7. 8.4HTML 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. 8.4HTML Editors BBEdit HTML editor for MacOS has a ‘Lite’ edition (now called Textwrangler) which is free to download. BBEdit

9. 8.5Web-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

10. 8.5Web-based Authoring Tools Establish a Web Site through ‘Yahoo! GeoCities’ Open an account in GeoCities: http://hk.geocities.yahoo.com 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.

11. 8.6Integrated 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

12. 8.6Integrated 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

13. 8.6Integrated Web Authoring Tools Macromedia Dreamweaver Interface of Dreamweaver MX 2004

14. 8.6Integrated Web Authoring Tools Macromedia Dreamweaver Layout table Contains various cells and allows for more complex page design

15. 8.6Integrated Web Authoring Tools Macromedia Dreamweaver Supports web site navigation and site file management

16. 8.6Integrated Web Authoring Tools Macromedia Dreamweaver Provides more sophisticated design tools like layers and timelines

17. 8.7Get 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

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

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

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

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

22. 8.7Get 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.

23. Design View, Code View and Split View Design view shows page outlook 8.8Basic Web Page Design Features of Macromedia Dreamweaver

24. Design View, Code View and Split View Code view shows HTML code

25. 8.8Basic Web Page Design Features of Macromedia Dreamweaver Design View, Code View and Split View Split view shows HTML code and page layout

26. 8.8Basic 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.

27. 8.8Basic Web Page Design Features of Macromedia Dreamweaver Insert Page Title and Heading

28. 8.8Basic 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’

29. 8.9Save 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

30. 8.10Comparison of Different Web Authoring Tools Text editors HTML editors Web-based authoring tools Integrated web authoring tools User- friendliness Low HigherThe highest HTML knowledge Required Required some None Flexibility in modifying web pages HighhighLowHigh Site and links management functions NoneSome Full set