UFH2003:

Web Application Development

TOPIC: Web Application Design
Part 3A: Selecting Tools, Organising
Files, and Creating Templates
 Objectives
• To understand the kinds of software tools that
are used to build a Web site.
• To understand the role of the Web designer in
creating a site.
• To learn how to organise the elements of your
site so that they can be assembled properly.
1.0 Basic Tool Types for Building Your Site

• Some tools are easy to learn and use, whereas

others require considerable study and
practice. Selecting the right tools to execute
the design of your Web site is an important
consideration.
• The best tool for you is the one that fits your
skill level and at the same time allows you to
build the functions called for in your design.
Web page assembly tools fall into three types:

1. WYSIWYG editors: These provide a blank page into which your

import the elements that you have prepared, and they give you
tools for formatting the page and making links between pages.
2. Code editors: These assist you in authoring HTML, XML, or
Javascript code that forms the Web page. They are like
specialised word processor.
3. Save as HTML functions of other programs: To create very
simple Web pages, you can click Save As HTML under the File
menu of programs such as Microsoft Word.
• The working environments for these three
types of Web authoring tools are quite different
• Not all code editors look like the one shown in
Figure 1.
• Many HTML authors write their code in a
simple text editor such as WordPad or
SimpleText, which show only the code and
include no extra windows or tools.
Figure 1. BBEdit Code Editor
• A WYSIWYG editor in Figure 1 looks like a
word processor with extra windows,
parameters, and menu items.
• Although these tools seem quite different, all
of them perform the same function: They
create a file that contains the text of the Web
page as well as instructions on how to
construct and display the page.
• These instructions usually written in HTML
code, although some Web pages may use
JavaScript code
Figure 2. Macromedia Dreamweaver WYSIWYG Editor
Behind the Scenes: HTML and Scripts

• For most Web designers and certainly for

audience of your Web site, HTML, and
JavaScript code are behind-the-scenes actors.
• Consider the typical Web page shown in
Figure 6.3
Figure 3. A Typical Web Page
• Here is some of the HTML code that was used
to create the page in Figure 6.3.
Figure 4. A Typical Web Page
Table 6.1. Selected Code
• Most of WYSIWYG editing tools include the following:
– A document window
– Layout tools
– Text tools
– Import facilities
– Image tools
– Multimedia tools
– Linking tools
– Site management tools
• Figure 5 shows a page editor with some of these tools
invoked and ready for use.
Figure 5. Editing Tools in Dreamweaver
Cont…
 2.0 Directing the Action: The Role of the
Web Designer
• It’s the designer’s task to see that the planned
design and functions of the site are carried out
and that the site as published accomplishes its
purposes.
• The first step is to begin with a clear
specification of what is to be built – a
blueprint to be used to guide the process of
building the pages
• The specification should include the following:
– A list of the purposes of the site and of the page or
section being built (see Topics 1, 2 and 3).
– A description of the target audience.
– A sketch of the Web page, with callouts explaining the
various elements.
– A list of functions for the page.
– A list of elements and their filenames.
– A description of the organisation of directories
(folders) that contain the site’s files.
 3.0 Organising the Elements
• It’s time to take out the flow chart you created in Topic 1,
examine the folders that contain the elements, and organise
them so that you (and, more important, the Web server)
know where everything is located.
• The images, with their file extensions of .gif, .jpg, or .png,
should be in the images folder.
• The videos and sounds, with proper file extensions, should
be in their respective folders.
• You should also have a list of the filenames that you plan to
use for the Web pages themselves.
• Figure 6 shows a typical situation at this point.
Figure 6. Typical Web Site Directory Structure
Web Servers
• A web server is a computer connected to the Internet that
sends files to other computers that request them.
• Most organisations set up a computer dedicated to serving
Web sites.
• It runs 24 hours a day and has a robust Internet
connection.
• Few Web designers use the Web server to build their sites.
Instead, they build the site on their own computer, test it,
and then copy it to the Web server when it’s complete.
 4.0 Using Templates, Tables, and Frames

• In your site sketch, you may have worked up a

common framework that will appear on all the pages.
This may include a common menu bar, a consistent
columnar structure, a background graphic, or a header
or footer that you want to appear on every page.
• If such framework is important to your design, it’s
good idea to combine these elements into a page
template, a file that contains all the common
elements but none of the page specific contents
• Figure 7 shows a template for a simple Web site.
Figure 7. Template for a Web Site
Template with Tables
• The template in Figure 7 was built using tables.
The main table contains two columns and two
rows. The left column contains logos and the
menu items, and the right column contains the
corporate name and the content text.
• You can build such a table directly in HTML or
use a WYSIWYG editor. Figure 8 shows how the
table was configured.
Figure 8. Tables Used to Build the Template in Figure 7
Template with Frames

• You can build a similar template as a frameset.

The frameset page contains three frames. Two
of them (the title and the menu) remain the
same as the third one (the content) changes.
The same template, executed as a frameset,
would look like Figure 9.
Figure 9. Template Built as a Frameset
Figure 10. Building a Frameset with Dreamweaver
 6.0 Summary
• Web pages can be authored by using code editors or WYSIWYG
editors, or by saving Word documents as HTML. The choice of
page-building tools depend on the nature of the site and the skills
of the builder.
• No matter who builds the site, the Web designer is responsible
for seeing to it that the site is constructed according to the design
specifications.
• Files containing the site’s various content display elements must
be properly organised and named before page building can begin.
• Page templates, built using tables or frames, give a consistent
form to the various pages in a site.