Unit 2, Lesson 5 Website Development Tools AOIT Web Design Copyright © 2008–2012 National Academy Foundation. All rights reserved.

There are three main types of web authoring tools Text editors WYSIWYG editors Web-based publishing tools Which types of web authoring tools have you used so far?

Use text editors to write code in HTML Advantages: You control coding Editor is inexpensive or free HTML text in Notepad Disadvantages: Must manually write HTML Coding is tedious Easy to make mistakes

WYSIWYG editors show web pages as you write Advantages: HTML coding is optional Creating web pages is faster Fewer coding errors Disadvantages: Less flexibility Additional learning curve Must buy software Coding mistakes difficult to troubleshoot without understanding code Dreamweaver editor What other advantages or disadvantages can you think of?

Web-based publishing tools make posting easy Advantages: No HTML coding Easy to start creating pages Community aspect of social networking and blogging Disadvantages: No control over code Page can be posted only on the social networking site WordPress editor

Websites have many building blocks HTML pages Cascading Style Sheets Graphics Animation Multimedia objects Client-side scripts Server-side scripts Navigation

HTML is the basis of all web pages Use tags to define the content on the page: Structure headings, paragraphs, and lists Insert links Define how text is formatted Insert objects like images and multimedia What else can you do with HTML?

A CSS defines what all pages on a site look like CSS is the acronym for Cascading Style Sheets. CSS defines colors, fonts, layout, spacing, and other aspects of document presentation. An external CSS file reduces complexity and repetition in structural content. A CSS provides flexibility and control of presentation. It also promotes brand identity. CSS for Lesson 4 web page

Graphics make web pages interesting Graphics can include: Navigation bars Buttons Menus Photos Drawings Flowcharts Shapes

Animation makes text or elements move Animation can enhance a web page: Information on the page can become dynamic. It’s a way to draw the user’s eye to a particular spot on the page. Dangers: Watch out for large file size. Too much movement will annoy site visitors.

Use the tag to insert multimedia objects Multimedia objects: Flash (SWF) files QuickTime movies Shockwave movies Java applets ActiveX controls Inserting a Flash object in HTML code Inserting a Flash object using Dreamweaver Silverlight ASF ASX WMA WMV

Client-side scripts dynamically change web pages Client-side means it runs locally on the user’s browser. Client-side JavaScript (CSJS) is a client-side script used to write functions embedded in HTML pages.

Server-side scripts generate pages for each user Use web-server technology Fulfill user’s request by running a script directly on the web server Generate dynamic web pages

Use these elements to enhance your web pages Cascading Style Sheets (CSS) Graphics Animation Multimedia objects Client-side scripts Server-side scripts What are some concrete examples of how each of these elements can improve your web pages?