Duration: 08 Hours (04 Hrs of Lecture + 04 Hrs of Practical) Learning Outcomes

Lesson 7: Web Design Applications BIT Semester 1 - Application Packages
Duration: 08 Hours (04 hrs of Lecture + 04 hrs of Practical)
Learning Outcomes:
• Determine the basic principles of designing a web page

• Identify the different types of Web Design Applications
• Use the Macromedia Dreamweaver environment to create web pages
• Develop the basic skills needed to design a web page
• Create and use Cascading Style Sheets
Overview
It is an interesting thing to find everything on the web. We don’t need to go from place
to place for learning, buying and selling and even for entertaining with music, films or games.
All this is provided by the Internet with its facility World Wide Web. We use a Browser like
Internet Explorer or Mozilla Firefox to browse pages from Internet, from our network place or
even from our own computer.
How are these pages created? Can we also create pages like that and browse from a
browser application? If you save a web page from Internet using the browser’s File drop down
menu, then the next time you can open it from your computer. But if you click on a link on
that page only some of the links may work.
How are the contents on these pages written? Let’s see the source from the browser
application. Move your cursor to the View option on the Menu Bar and select the option
Source.
It’s a huge content? What is this language? If you try to read it, at least you’ll be able to
read part of it. But it seems little familiar and we can easily grab the pattern of writing. You
can see “<” marks and “>” marks covering meaningful words and within two terms as that
you see a paragraph, a sentence, a phrase, a word or a character.
Is there a way to write all those stuff quickly and accurately? Yes, there are computer
application packages and by using one like that you’ll be able to author a fully interactive,
attractive and a professional looking web page without knowing anything about an authoring
language.
IT1303 ©UCSC 1
Table of Content
7.1 Designing Web Pages for Different Uses [5 min]

7.1.1 What are Web Pages and Web Sites?
7.1.2 Designing Web Pages
7.1.3 Design considerations for different Web Sites
7.2 Web Authoring Languages [5 min]
7.3 Common Features of Web Design Applications [5min]
7.4 Getting Started with Macromedia Dreamweaver [30 min]
7.4.1 Starting the Program
7.4.2 Getting Familiar to the Working Environment
7.4.3 Working with Different Types of Views
7.4.4 Toolbars
7.4.5 Panel Groups
7.4.6 Property Inspector

7.4.7 Status Bar
7.5 Basic File Operations [30 min]
7.5.1 Opening a Web Page

7.5.2 Creating a New File
7.5.3 Working with Multiple Web Pages
7.5.4 Closing and Saving Files

7.6 Working with Websites [30 min]
7.6.1 Creating a Website
7.6.2 Managing a Website
7.7 Working with Headings and Paragraphs [45 min]
7.7.1 Inserting Headings
7.7.2 Format Headings
7.7.3 Inserting Paragraphs
7.7.4 Editing and Formatting Text / Paragraphs
IT1303 ©UCSC 2
7.8 Creating Lists [45 min]

7.8.1 Inserting Ordered/Numbered Lists
7.8.2 Unordered Lists
7.8.3 Nested Ordered/Unordered Lists
7.8.4 Modifying List Types and Bullets
7.9 Page Property Settings [30 min]
7.10 Creating Tables [1 hrs]
7.10.1 How tables are used in Web Pages?
7.10.2 How to insert a table?

7.10.3 Formatting Tables
7.10.4 How to insert a column or a row?
7.10.5 Merging and Splitting Cells
7.11 Inserting Media Element [45 min]
7.11.1 Inserting Pictures to the Web Page
7.11.2 Formatting Pictures

7.11.3 Adding Sound Files
7.11.4 Adding Video
7.11.5 Inserting Flash Button

7.12 Using Hyperlinks [1 hrs]
7.12.1 Creating Text / Image Links
7.12.2 Image Hotspots
7.12.3 Image Rollovers
7.13 Using Frames [1 hrs]
7.13.1 Creating Frame Structures
7.13.2 Opening Pages into Frames
7.13.3 Handling Hyperlinks within Frames
7.14 Creating Styles [30 min]
7.14.1 What CSS is
7.14.2 How to create a CSS file?
7.14.3 How to attach a CSS file?
7.14.4 How to edit a style?
IT1303 ©UCSC 3
Lesson 7
Web Design Applications
7.1 Designing Web Pages for Different Uses [5 min]
7.1.1 What are Web Pages and Web Sites?
Web pages are the files which can be displayed using a web browser
application like Internet Explorer, Netscape Navigator, Firefox …etc. Once you
create web pages, if you want them to be accessed from other computers
connected to the Internet, then you need to have a web Server to hold the web
pages. Here, we use the phrase “uploading to a Web Server”. [Web Server is
another computer running web server software.]
When you have lots of web pages possibly accessed through links
connected to the home page, we call it as a web site. The place where the site
files are saved is the web address which is used in the Address field of the
browser to access the site.
7.1.2 Designing Web Pages
In designing web pages you should consider the design of all types of media
elements that you are going to use to create the web pages. What types of
media are you going to use? Probably you will need text. Other than that you
may use graphics, animations, audio and video clips.
You should design a common template that can hold any type of media you
are going to use in the web site. This design template should describe how and
where the media is to be placed.
7.1.3 Design considerations for different Web Sites
Design of the web page should be matched with the purpose of creating the
web page, the field (commerce, education, government, health, etc.), the target
audience and the customer’s taste (to whom you develop the site).
Commercial web sites are designed to attract the audience for business
dealings. The product information highlighting the best features of the product
should be shown first. The photographs or videos of the product can be added to
the web pages. If possible the customers should be able to make orders through
the web. You may use dark colours and fancy font styles to grab the attention
IT1303 ©UCSC 4
the customers and background music may also be there to attract the site
visitors.
But if you are designing web sites for educational purpose your designs
should support for teaching and learning. You should use light colour
backgrounds and dark colour text. Text formatting should be done meaningfully
to show or highlight the different levels of topics and key words. Media clips
should be selected wisely not to disturb or confuse the learner but to help
him/her to acquire the learning objectives fast.
7.2 Web Authoring Languages [5 min]
What is Web Authoring?
Web authoring is creating web pages. You should use a web authoring language to
create the web page. There are different types of web authoring languages like HTML, JSP,
ASP, PHP, XHTML and XML which are used in developing web sites for different server
platforms and for different uses.
What is HTML?
HTML (HyperText Markup Language) is the basic but most commonly and heavily used
web authoring language. Who ever starts designing and developing web pages should know
the HTML basics before using any other Web authoring language.
HTML is a tag language using markups to describe the elements on the web page. For
example it uses;
<HTML> to tell the browser that this is HTML not plain text,
<H1> for the heading 1 style and <H2> for the heading 2 style
<Table> to start a table structure
<LI> for a list item…etc.
A web page in HTML uses the structure;

<HTML>
<HEAD>
… (Page information to the Servers and the Browser)
</HEAD>
<BODY>
… (Content of the Web Page that you see on the Browser)
</BODY>
</HTML>
The authored Web pages should be previewed using one or more Browser Applications to
check whether your audience having different Browser Applications will see the pages in the
same design.
IT1303 ©UCSC 5
7.3 Common Features of Web Design Applications [5min]
There are lots of Web Design Applications; Macromedia Dreamweaver, Front Page, Home
Site …etc. These Applications are used to design and develop web pages/sites quickly and
easily. Most popular Web Design Applications are with the feature called “What You See Is
What You Get” (WYSIWYG). That means it supports you to design the media on the working
area of the application and save it as a Web page to view it as you designed.
Most applications provide you two views as Code View and Design View to author Web
pages. They support for more than one Web authoring language. You can select the desired
Web authoring language in which you like to create the Web page.
The user interfaces of these applications support even a beginner to find Web designing
and authoring more easy and interesting. Every element you may need to insert or write into
the Web page can be easily done with command buttons available on toolbars or with options
available on Menus.
Application itself provides you pre-build scripts and codes which can be customized as
you want and easily insert into your page.
Help is also there to overcome your problems in working with the application.
7.4 Getting Started with Macromedia Dreamweaver [30 min]
7.4.1 Starting the Program
You can use the Dreamweaver shortcut icon on the

Desktop to start the program quickly or start Dreamweaver Application by
selecting Start > Programs > Macromedia > Dream weaver. The program
starts with a flash screen showing the product information of the application
program and next you’ll see the start page.
The start page will help you to select the type of language you want to use
for authoring the Web Page. Under the Create new category you can see there
are lots of different types of Web Authoring languages and even it supports you
to add some more from the Dreamweaver site.
It lists you the recently created Web pages on the left hand side of this
page, and you don’t need to remember where you saved them to continue with
the development next time. If you are running the application for the first time
then you will not see anything listed there other than the link to open the
existing document from the machine.
On the right hand side of this page, it lists you the samples which are
already created and can be used for your developments with some modifications
to them. You can add your content to those samples and make them look as
your own creation.
IT1303 ©UCSC 6
Flash Screen
Start Page
If you cannot see the start page in your application then you can set it to be opened
using the Preferences dialog box from Edit > Preferences. You have to select the check
box, “Show start page” at the “Document options” under the General category and click
OK. Before closing the Preferences dialog box you can have a look at it to identify the other
important settings on this dialog box.
IT1303 ©UCSC 7
Preferences Dialog Box
To start working with Dreamweaver for the first time you may select the link
HTML under the Create New category on the Start page to create an HTML page.
7.4.2 Getting Familiar to the Working Environment
Once you select an authoring language to create a new page you‘ll get the
Dreamweaver working environment adjusted to provide support for the
authoring with the selected language. The Macromedia Dreamweaver working
environment is with menus, Toolbars and lots of Panels. Those Window
components take lots of space on the Window and sometimes you may feel like
closing or removing most of components to get some more space for the
Document Window.
But you can have more space without closing them. You can click on the
buttons available on the borders; left to the Panel groups and top of the
Properties Inspector. You can see the button available on the left border as the
figure below;
Once you click on this button (the button left to the panel groups) then the
panel groups collaps and if you click on the button again the panel groups
expand.
IT1303 ©UCSC 8
Manu Bar
Panel Groups
Insert Toolbar
Document Toolbar
Document Window
Files Panel
Property Inspector
Dreamweaver Design Workspace
7.4.3 Working with Different Types of Views
Dreamweaver provides you a very nice working environment. It displays

three views as Code View, Design View and Split View. If you are a beginner
and weak in or have no knowledge of HTML then you can use the Design View
quite comfortably and create professional Web Sites. If you are an expert and
quite familiar with the Authoring language you are using then you can work in
the Code View. If you are not a beginner or not an expert then you may use the
Split View (Code and Design Views) where you can see what is happening in the
Code View at the time of designing something in the Design View.
To select a View you can use the Document Toolbar open it from View >
Toolbars > Document. The Document toolbar appears at the top of the
Document window.
IT1303 ©UCSC 9
7.4.4 Toolbars
There are three most useful toolbars in Macromedia Dreamweaver; the

Insert Toolbar, the Document Toolbar and the Standard toolbar. You can get any
of these toolbars from View > Toolbars.
Insert Toolbar –
This toolbar is located just below the Menu Bar. There are two
arrangements of this toolbar; as Tabs or as Menus.
As a Menu
Here (in the figure as a Menu), you can see only the commands
available under the common category. If you want to select an option on
another category first you have to select the category name by clicking on
the down arrow next to Common.
You can shift from this toolbar arrangement to the other by clicking on
the down arrow next to Common and selecting the option As Tabs.
As Tabs
Tab arrangement is more user-friendly than the other as it shows all
available category names in tabs and each tab lists its set of buttons in a
row allowing the user to select the required command quickly.
Document Toolbar -
Document Toolbar is the toolbar which lists buttons to shift from one
Document Window view to the other. Next to those three buttons you can
see the field Title where you can type the Window title of the Web page.
What you type here will be displayed on the Browser Title Bar. So, type
something meaningful.
There is another important button on this toolbar; Page Preview
button. You can click on this to preview the Page in a Browser. This
will help you to browse the page over the Dreamweaver application
IT1303 ©UCSC 10
Window. Once you have finished checking the page on the browser, you can
close it just by clicking on the Close button on the top right hand corner of the
window.
Standard Toolbar –
This toolbar is located just below the Document Toolbar and it contains
almost all the commands you’d find on most Standard Windows toolbars.
There is only one change that is the Save All button. The Save All button is
really helpful when you are editing the site files. All opened site files get
listed on the Document Window / Workspace in tabs and you can save them
all quicky by clicking on the Save All button.
New - Create a new document

Open - Open an existing document
Save - Save the current document
Save All - Save all open documents
Cut - Cut the current selection

Copy - Copy the current selection
Paste - Paste the contents of the clipboard
Undo - Undo the last action
Redo - Redo the last action in the undo history
7.4.5 Panel Groups
IT1303 ©UCSC 11
There are lots of Panel Groups in Macromedia Dreamweaver. You can

open any of them using the Window drop down menu. The panels are
categorized into groups and Window menu lists them in groups using a separator
line.
But when you select one panel it opens you the whole Panel Group. All
panel groups, are displayed vertically on the right side of the Dreamweaver
window. The selected panel is displayed on a tab.
You can collapse or expand these panels. To expand a panel group and
view its available panels, click on the right arrow in the upper left corner of the
group or just click on the name of the panel group. To collapse it you can click
on the down arrow or on the name of the panel group.
There is a menu on the top right corner of the panel group. You can see the
same menu by right clicking o the top left corner of the panel group. This menu
helps you to group the selected panel with another panel group, close the panel
or panel group…etc.
7.4.6 Property Inspector
The Property Inspector lets you specify the properties of the text or object
that’s currently selected on the Document Window. The content on the Property
Inspector vary depending on the current selection.
For example, if you select some text or place the cursor on an area of text,
you can see the following panel.
IT1303 ©UCSC 12
The fields and button available on the property inspector show what you
can do to the selected elements on the Document Window.
You can open the Properties inspector from Window > Properties or by
pressing the Ctrl key together with the F3 key.
7.4.7 Status Bar
The Status Bar is the small row at the bottom of the Document window. In
Dreamweaver 8, it lists you the tag selector, Select Tool, Hand Tool, Zoon Tool,
Set Magnification menu, Window Size menu and the document size and the
estimated download time.
Zoom Tool Set Magnification Set Magnification

Menu Menu
Tag selector Select Tool Hand Tool Document size and the
Estimated Download Time
By clicking on a tag listed on the Tag Selector you can select the content
of that tag on the document. Next, there are three tools listed on this bar. The
first one, the Select Tool helps you to select the content on the Document. The
second one, the Hand Tool helps you to move the document by clicking and
dragging the document from any place to any direction. The third one, the
Zoom Tool helps you to zoom in the document just by clicking on the document
having selected the tool.
To unselect a tool you have to select another. You better select the Select
Tool if you are not using the Zoom Tool or the Hand Tool.
The Status Bar lists the menu “Set Magnification” next to the Zoom Tool
and you can use it for Zoom in or out the document. You can also use the key
strokes Ctrl++ for Zoom in or Ctrl — for Zoom out operation.
Next to the “Set Magnification menu, you can see the Window Size menu.
This pop-up menu is visible only on the Design View and with this you can resize
the Document Window to predetermined or custom dimensions.
The last figures shown on the Status Bar indicates the Document
Size/Download Time. This value changes as you add content to the
document. The download speed depends on the connection speed you have set.
To set the connection speed, you can select the last option, Edit sizes on the
Window Size pop-up menu or select the option Edit > Preferences and
IT1303 ©UCSC 13
select the category Status Bar. Set the connection speed on the Preferences
dialog box and observe the download speed on the Status Bar.
7.5 Basic File Operations [30 min]
7.5.1 Opening a Web Page
To open an existing Web Page you can select the option File > Open or click
on the
Open button on the Standard Toolbar. Locate the file in the Open
dialog box and click on the button Open to open it to the Document Window.
But if you have already created a Web Site and you are working with site
files then you can see the file listed on the File Panel and you can open it by
clicking on it.
7.5.2 Creating a New File
You can open a new page to the Document Window by clicking on the New
button on the Standard Toolbar. This opens you the New Document
dialog box and you can select the type of document you want to create. Let’s
create a Basic HTML page. So, select the option Basic page from the category list
and select the HTML from the list of Basic Page. Next, click on the button Create.
IT1303 ©UCSC 14
This will give you a new blank untitled document opened on the Document
Window. But if you have already created a Web Site and you want to create the
file for the Web Site, then open the File panel from Window > Files and right
click on the folder or drive where you want to create the file and select the
option New File.
7.5.3 Working with Multiple Web Pages
All the opened documents get listed on the Document Window in tabs. You
can click on the tab to shift from one document to the other. In the following
figure the top.html is currently selected but if you want you can click on the tabs
having the names of the other files and work on them. Once you have
finished, you can click on the Save All button to save all the opened
documents.
IT1303 ©UCSC 15
When you change the path of a file (file saved location), the Dreamweaver
prompts you to update the links of the related files and because of this admirable
feature we don’t need to manually edit all links of the interconnected files.
7.5.4 Closing and Saving Files
How to Save a Web Page?
Once you have created a Web page you can save it using the Save
button on the Standard Toolbar or using the option File > Save. If
you have lots of opened files and you want to save them all then simply select
the option File >Save All or
click on the Save All button on the Standard Toolbar. Also you can use
the keyboard shortcut Ctrl +S to save the file.
If you are saving the file for the first time then you need to give a name for
the file in the Save As dialog box. Next you have to select the file type or let the
default setting All Documents be there and type the file name with the
appropriate file extension in the File name field. If you do not specify the file
extension with the option “All Documents” in the field, “File type”, the
Dreamweaver saves your HTML file with a .htm extension.
IT1303 ©UCSC 16
When you are deciding a name for the file you should try to have a short
but meaningful file name. Type all letters on lowercase. Do not put spaces in the
name of a file to overcome some problems that you may face in linking the files
in servers (You can use an underscore or a hyphen to separate two words)
How to close a file?
Use the black cross button on the Document Window to close the
currently working documents. If you like to use the menu options; to close the
currently working document select the option File > Close and to close all the
opened documents select the option File > Close All. Also to close the current
working file you can use the keyboard shortcut Ctrl+W.
When you try to close a file without saving, if you have done some changes
to it then Dreamweaver prompts you to save the file before closing. You can see
that an asterisk mark appearing on the tab next to the name of the file if you
have done some changes after the last saving.
IT1303 ©UCSC 17
7.6 Working with Websites [30 min]
7.6.1 Creating a Website
Macromedia Dreamweaver supports you to organize and manage all your

site content in a folder and automatically track and maintain your links, manage
and share files.
To create a Site with basic HTML pages you have to;
1. Define a Site using the menu option Site > New Site… (with
Dreamweaver 8) on the Menu Bar. [This will open you a Wizard to
define and create a Site.]
2. On its first step you have to enter a Site name and if you have already
decided the Site address then you can put the Site Address as well.
3. Click on the Next button to proceed

4. Next, select the 2nd option button as you are not going to use any
server technology in this Site
5. Click on the Next button
6. Next, it asks how you want to Work with the Site files during the
development.
IT1303 ©UCSC 18
7. If you are going to work on the Server then you can select the 2nd
option else select the 1st option to edit files in the local machine and
upload to the Server when ready.
9. Next, you have to select the option which describes how you want to
connect to the remote Server and the path to the folder in Server
where you are going to upload the files. If you are not going to
connect to a remote Server then select the option None for the first
field.
11. Wizard shows you the summary of options you have selected. If you do
not agree with that you can click on the Back button and edit the
previous settings. If you agree you can click on the Done button.
12. Open the Files panel from Window > Files if it does not display on the
screen. Here, you will see Site folder.
Once you have created a Site folder, whatever you want to add to the Site
should be saved in this folder. You should create separate folders to save image
files, Audio Files, Video Files…etc. All these folders should be created in the Site
folder.
7.6.2 Managing a Website
If you have dislocated your previous Web Site then Macromedia

Dreamweaver requests you to manage the Web Site as soon as you start the
application. Sometimes you may also want to change some settings you
previously set for the defining of the Site. You can use the Manage Site dialog
box for these.
IT1303 ©UCSC 19
How to use the Manage Sites dialog box?
1. Select the option Site > Manage Site… from the Menu Bar
2. Select the site form the list of sites

3. Click on the button Edit… [This will open you the Site Definition dialog
box]
4. Follow the steps in the Wizard that you did in creating the Site and do
the changes where necessary
5. Click on the Done button once you are back on the Manage Site dialog
box
7.7 Working with Headings and Paragraphs [45 min]
7.7.1 Inserting Headings
Headings can be inserted using the Insert Toolbar or you can change the
selected text to a heading by applying a heading format using the Properties
Inspector.
There are six levels of headings in HTML as H1, H2, H3,…H6 ( Heading 1,
Heading 2, …Heading 6) where the largest is H1 and the smallest is H6. When
you insert headings you should not change the order of headings. You can start
form any level, but you should preceed with the next smaller size and so on.
IT1303 ©UCSC 20
To insert a heading
1. Click on the h1, h2 or h3 on the Insert Toolbar
2. Type the text which should appear as heading
3. Press Enter key and you will be back on the paragraph style
7.7.2 Format Headings
Heading or the text which is to be appeared as a heading should be

selected and formatted using the Properties Inspector. Open the Properties
Inspector from Window > Properties if it is not displaying on the Screen.
How to apply a different heading style?
1. Select the text/heading
2. Select the appropriate heading style from the format field on the
Properties Inspector or select the option Text > Paragraph Format and
select the appropriate Heading level [You can also apply a heading style
using
How to change the font style, Size, colour…etc?

1. Select the heading
2. Set the property attributes using the fields on the Properties Inspector or
use the menu options at Text > Paragraph Format
7.7.3 Inserting Paragraphs
You can start typing from any where in a new line on the document without
applying any format then by default the Dreamweaver adds you a paragraph.
Once you press the Enter key it creates you a new paragraph in the next line.
7.7.4 Editing and Formatting Text / Paragraphs
How to edit the text on a paragraph?

Just like editing a Word Document you can edit the text on a paragraph in
Macromedia Dreamweaver. You can use the methods of cut and paste, move
(drag and drop), delete and copy with the help of the keyboard short cuts or
with the help of the command buttons on the Standard Toolbar.
IT1303 ©UCSC 21
Copy
Cut Paste
Redo Undo
How to format a paragraph?

To format a paragraph you can use the Property Inspector or the Text drop
down Menu. If you select the paragraph and use the Property Inspector you can
see the following fields and buttons on it. You can change the font type, size,
colour, bold or italic and the alignment
Bold Italic Alignment
Font Type
Size Color
Settings on the Property Inspector can be done easily but it contains only a
limited number of options. But if you use the Text drop down menu options you
can find all the possible formatting options.
The Text drop down menu helps you to check the spelling of the document too.
IT1303 ©UCSC 22
How to underline some text?

The underlining text on a Web page should be done wisely as it may
mislead the users. By default the text links on a Web page appear in blue colour
with an underline mark and when you click on them, they change their colour
from blue to green or red. Some developers use different colour variations for
links. So, it is not good to use the underline mark for normal text on the Web
page unless you really want to have them.
To underline text you can use the menu option Text > Style > Underline.
How to set the font size?

In HTML font sizes are defined in 7 sizes as 1, 2, 3, 4, 5, 6, 7. Font sizes
can be set in two different ways; with the exact number referring to the size or
with a relative size (+1 or -1 to +4 or -3). The size 3 is the default font size and
if you want to increase the font size by 1(one) then you can select the relative
size as +1 or the exact font size as 4.
You can set the font sizes using the Property Inspector or the Text > Size or
Text > Size Change sub menus.
The Property Inspector in Macromedia Dreamweaver sets the font size by
defining a style and in the font size menu it shows eight different font values (9,
10, 12 …36) and eight different relative font sizes (xxsmall, x-small,…xx-large).
7.8 Creating Lists [45 min]
7.8.1 Inserting Ordered/Numbered Lists
If you want to list something in an order you may need to create ordered
lists. To create and ordered list use the Insert Tool bar or the Property Inspector.
How to create an ordered list using the Insert Toolbar?
1. Click on the Text tab on the Insert Toolbar in tabs or select the
option Text from the Insert Toolbar in menus
2. Click on the button “ol”

3. Start typing the list items
4. Press the Enter key once you finish typing one item and type the next
on the next line
How to create an ordered list using the Properties Inspector?
1. Click on the Ordered List button on the Properties Inspector

on the next line
IT1303 ©UCSC 23
7.8.2 Unordered Lists
Unordered lists are created when we want to list some items not in an
order. This can be inserted to the page using the Insert Toolbar or the Property
Inspector.
To create an unordered list using the Insert Toolbar
1. Click on the Text tab on the Insert Toolbar in tabs or select the
option Text from the Insert Toolbar in menus
2. Click on the button “ul”

on the next line
How to create an unordered list using the Properties Inspector?
1. Click on the Unordered List button on the Properties Inspector

on the next line
7.8.3 Nested Ordered/Unordered Lists
Sometimes we want to create lists with two three levels where we get sub
lists within one list. Following is an example of a nested list.
Fruits and vegetables of my taste
Vegetables
1. Beans
o Butter Beans
o Green Beans
2. Carrots
3. Cabbages
4. Radish
Fruits
1. Apples
a. American Apples
b. Chinese Apples
2. Papaws
3. Graphs
4. Oranges
Herbs
IT1303 ©UCSC 24
Here, you need to start with one number/bullet style and change into
another for the sub list. You can start the ordered/unordered list as usual and
when you want to
shift to the 2nd level you have to click on the “Text Indent” button on
the Property Inspector. Then, it automatically starts another numbered list or if it
is a bulleted list then changes the bullet style to another bullet style and creates
you the sub-list.
To come back to the 1st level you have to click on the “Text Outdent”
button.
7.8.4 Modifying List Types and Bullets
If you want to have a different number style or bullet style then;

1. Place the cursor at a list item of the list of which the bullet or number
style should be changed
2. Click on the List Item… button on the Properties Inspector [This
will open you the List Properties dialog box
3. Select a deferent style at the “Style” field
If it is a numbered list and if you want you can change the starting number
of the list item. If only that particular list item number/bullet style is to be
changed then select a different style at the field “New style” on the frame “List
item”.
IT1303 ©UCSC 25
7.9 Page Property Settings [30 min]
Properties like base-font (default font for the page), font colour, Font size,
background colour / background image, page margins…etc can be set for the whole
page.
How to set a default font type, colour and size?
1. Place the cursor on a text area or a blank space

2. Right click and select the option Page Properties from the popup menu
or click on the Page Properties… button on the Properties
Inspector. [You’ll see the Page Properties dialog box.]
3. Select the category Appearance and set the Page font as you want
4. Set the font size for the page
5. Click on the small box at the field Text colour to set a font colour
6. Set the other properties as you want
7. Click on the Apply button
8. Click OK
How to apply a background color?

Background colour of the page should be matched with the text and the
content of the page. Decide a colour which will help to improve the look and the
readability of your site content.
To set background colour you can use the Page Properties dialog box. Click
on the colour box at the field Background colour. Your cursor will change to the
dropper and you can select any colour from the colour palette. If you want you
can get a colour from the page content by moving the dropper (cursor point)
over the colour you want to apply and clicking.
IT1303 ©UCSC 26
How to insert a background image?

When you apply a background image it repeatedly apply (tiles) on page
background. If you have applied a background colour then you will not be able
to see that colour any longer.
You should use light weight tiny image as a background image. The image’s
colours and designs should not disturb or the content of the page.
To apply a background image;

1. Open the Page Properties dialog box
2. Click on the Browse button in front of the Background image filed on the
Appearance category [You’ll open the Select Image Source dialog box]
3. Locate the desired image [ Select a small image]

4. Click OK
5. If you have not saved the Web page then, Dreamweaver prompts you to
save your Web page
IT1303 ©UCSC 27
6. Click OK [ If the selected image file is not in your site folder then
Dreamweaver prompts you to save it to your folder]
7. Click on the Yes button to save the file

8. Save the image to your Web Site folder
9. [You’ll be back on the Page Properties dialog box] Click on the Apply
button
10. Click on the OK button
7.10 Creating Tables [1 hrs]
7.10.1 How tables are used in Web Pages?
Tables can be used to present data in fields. Also, they are heavily used in
creating the structure of the Web page. Before authoring any Web page should
be planned out and the design should be drawn at least on a piece of paper. You
have to decide where the text, images and other elements should appear on the
page.
IT1303 ©UCSC 28
Next, decide for how much of space is allocated between the elements to
make the Web page readable and clear. Finally, you can design the structure in a
table.
7.10.2 How to insert a table?
You can use the Common tab/menu or the Layout tab/menu on the Insert
Toolbar and click on the Table button or use the menu option Table on
Insert > Table to start inserting a table. This will give you the
Table dialog box.
Enter the number of rows and columns you wish to have. You can enter the width of the table
and the border thickness as well. Next there are two fields called Cell padding and Cell
Spacing. Cell padding is the padding distance (distance from the border to the cell content)
and the Cell Spacing is the space between two cells of the table. These values can be
changed as you wish even after creating the table. Finally click on the OK button to insert the
table.
7.10.3 Formatting Tables
Use the Property Inspector to modify the table. To make the Property
Inspector updated with the Properties of the table first you have to select the
table. To select the table you can click on the table structure showing on the top
left corner of the table or click on the <table> tag at the Tag Selector on the
Status Bar.
IT1303 ©UCSC 29
Then your Properties Inspector displays the properties of the table. You can
modify the values on the fields of the Properties Inspector. Click on the
document to update the document accordingly.
In Dreamweaver, you can select the table elements (rows, columns or cells)
separately as you do the selection in the tables of MS Word. After selecting the
table element, you can modify its properties without affecting the other elements
of the table.
7.10.4 How to insert a column or a row?
Method 1
To Insert a Row;
1. Place the cursor in a cell (You’ll insert the new row above the row of the
cell where the cursor is)
2. Right click and select the option Table > Insert Row from the popup
menu
To Insert a Column;
1. Place the cursor in a cell (You’ll insert the new column left to the column
of the cell where the cursor is)
2. Right click and select the option Table > Insert Column from the popup
menu
Method 2:
To insert a row or a column;

1. Place the cursor in a cell
2. Select the appropriate menu option from Insert > Table Objects submenu
IT1303 ©UCSC 30
7.10.5 Merging and Splitting Cells
How to merge some cells?

1. Click inside the cell and drag over the adjoining cells to select the
neighboring cells which are to be merged
2. Click on the Merge button (Merges selected cells using

spans) on the Properties Inspector or select the menu option Modify >
Table > Merge Cells or use the key strokes Ctrl+Alt+M
How to split a cell into number of cells?

1. Place the cursor on the cell which is to be split
2. Click on the Split button (Split cells into rows or columns)

on the Properties Inspector or select the menu option Modify > Table
> Split Cell
3. This will open you the Split Cell dialog box.
4. Select the option button, Rows or Columns which matches your need
5. Enter the number of rows or columns you need the cell to be split in the
next field
7.11 Inserting Media Element [45 min]
7.11.1 Inserting Pictures to the Web Page
You can insert GIF, JPEG, or PNG files to Dreamweaver Web Pages. To
insert an image;
1. Select the menu option Insert > Image or use the keystrokes
Ctrl+Alt + I or Click on the Image button on the Common tab/menu
of the Insert Toolbar [This will open you the Image Source dialog box]
2. Locate the image file
3. Click OK
IT1303 ©UCSC 31
4. If you have not saved the Web page then, Dreamweaver prompts you
to save your Web page
5. Click OK [ If the selected image file is not in your site folder then
Dreamweaver prompts you to save a copy of it to your folder]
6. Click on the Yes button to save the file

7. Save the image to your Web Site folder
IT1303 ©UCSC 32
You’ll get another dialog box where you can enter the alternative text that
you may like to show the user when they place the cursor over the image or
display on the place of the image when the picture is not accessible.
8. Enter the alternative text

You’ll get the image inserted to the document.
7.11.2 Formatting Pictures
Use the Properties Inspector to edit the image.

Optimize in Fireworks
Edit in Fireworks
Crop
Resample Brightness Sharpen

& Contrast
You can change the width and height of the image, edit the image using
Macromedia Fireworks if you have installed that in your computer, set the
brightness and contrast values and sharpen the image.
How to change the width and Height of the image without distorting
the picture?
If you change the width on the Properties Inspector you cannot predict the
due height proportionate to the width to set the height without distorting the
IT1303 ©UCSC 33
image. You can change the width and height of the picture by dragging selection
handles.
Selection
Handles
To resize the image without distorting;

1. Hold the Shift key down
2. Drag the image up from the bottom right selection handle
Resizing an image changes the appearance of the image on the screen and
it does not change the exact size of the image file. So, if you have reduced the
size of the image by resizing then click on the resample button on the Property
Inspector to reduce the download time by reducing the file size accordingly.
7.11.3 Adding Sound Files
You can play lots of different types of audio files on Web; .midi, .aif, .wav,
mp3, Real Audio, Quick Time files…etc. There are two ways to play an audio file
on Web;
1. On request (as a link)
2. As background music or playing audio with more control over the audio
player (as an embedded file)
How to link an audio file?

Text or images on the page can be linked to an external audio file. Then the
user needs to click on it to access and play the file. So, this method is more user-
friendly. Users will click on the link to play the audio only if they want to listen to
it.
IT1303 ©UCSC 34
To link an audio file;

1. Select the text or image you want to use as the link to the audio file.
2. Open the Property Inspector from Window > Properties
3. Click on the folder icon next to the Link filed to browse the file [You’ll open
the Select file dialog box]
4. Locate the audio file
5. Let Dreamweaver to save a copy of it to the site folder if it resides out side
the Site folder.
How to embed an audio file?

If you embed an audio file to the Web page then your users should have
necessary plug-ins to play it in their computers. This method should be used only
if you want to play the file as background music or if you want to control the
volume, the way the player looks on the page, or the beginning and ending
points of the sound file.
To embed an audio file in your Web page;

1. Position the cursor where you want to insert the control panel of the player
2. Select the menu option Insert > Media > Plugin or click on the Plugin button
on the Media drop down menu on the Common tab/menu of the Insert
Toolbar
3. Use the Property Inspector to change the properties of it
7.11.4 Adding Video
You can insert or embed video files of format AVI or MPEG to a Web page.
Linking or embedding can be done as you link or embed audio files.
To embed an video file;

1. Position the cursor where you want to insert the player of the video
2. Select the menu option Insert > Media > Plugin or click on the Plugin button
on the Media drop down menu on the Common tab/menu of the Insert
Toolbar [The Plugin placeholder gets inserted to the page and by default it is
displayed as a 32 x 32 icon]
3. Use the Property Inspector to change the properties of it [But you can resize
it as you resize an image on the Document Window]
IT1303 ©UCSC 35
When you embed a video file to a document on Dreamweaver, you’ll see a

green colour play button on the Property Inspector. You can play the video on
Dreamweaver’s Document Window by selecting the plugin place holder and
clicking on the Play button on the Property Inspector. Then, the green button
becomes a red Stop button and you can stop playback, just by clicking on the
Stop button.
7.11.5 Inserting Flash Button
Macromedia Dreamweaver supports you to customize built-in Flash button

and insert them to your Web page.
To insert a Flash button;

1. Place the cursor where you want to insert the Flash button
2. Select the option Insert > Media > Flash Button from the Menu Bar or
click on the Flash button option on the Media drop down menu on the
Common tab/ menu of the Insert Toolbar [This will open you the Insert
Flash Button dialog box.]
IT1303 ©UCSC 36
3. Select a button style from the Style list box [You can preview the on it on
the sample]
4. Add some meaningful text to the Button Text field
5. Select a Font from the Font combo box
6. Set the other properties as you want [All these can be modified later with
the properties Inspector]
7. Click on the button Apply
8. Click OK
You’ll get another dialog box where you can set the Flash accessibility
attributes. But it is optional to enter this information and if you don’t want to
provide any information as this, you can open the Preferences dialog box and
remove the check marks in front of the options on the Accessibility category.
Note that the accessibility information is provided to support your Site visitors
with disabilities of visual, auditory, motor and other.
IT1303 ©UCSC 37
7.12 Using Hyperlinks [1 hrs]
7.12.1 Creating Text / Image Links
Links helps you to navigate from one page to the other and jump from one
location to the other. There two different methods to create a text or an image
link to open a file.
If the file to be linked with is inside the Site folder you can view it from the
File panel. Hence you can easily use the Point to File method. But if the file to be
linked is not inside the Site folder then you should browse for it.
Point to File Method;

1. Select the text/image on the document that you want to convert to a link
2. Open the File panel from Window > Files
3. Open the Properties Inspector from Window > Properties
4. Place the cursor over the Link to File icon next to the Link field on the
Properties Inspector
5. Click and drag on to the file to be linked with on the File Panel [You’ll get
an arrow pointing to the linked file]
6. Release the mouse button [You’ll see the file name with the relative path
of the file appears on the Link field on the Properties Inspector]
Browsing for File Method;

1. Select the text/image on the document that you want to convert to a link
2. Open the Properties Inspector from Window > Properties
3. Click on the folder icon next to the Link field on the Properties Inspector
4. Locate the file you want to link on the Select File dialog box
5. Click OK
IT1303 ©UCSC 38
You can open a linked file on a normal web page as a popup or by replacing
the previous file. The default setting will open the second page replacing the
previous page. So, if you want to open the second file as a popup then select the
option _blank in the target field on the Properties Inspector.
7.12.2 Image Hotspots
After inserting an image into a web page sometimes you may want to mark
a particular area of that image and make it a link. A link like this can be used to
show detail information of the selected area of the image on the linked page.
The areas marked on the image as links are called as Hotspots and the image
with Hotspots is called as Image Map.
There are three Hotspot tools on the Properties dialog box as Rectangle
Hotspot Tool, Oval Hotspot Tool and Polygon Hotspot Tool.
To create a Hotspot;
1. Select the inserted image on the Document Window
2. Open the Properties Inspector
3. Enter a unique name for your image map in the Map text box
4. Click on a Hotspot Tool to describe a rectangle, oval, or polygon shape.

5. Use the Pointer Hotspot Tool to select and edit Hotspot points
[Click and drag on the point to be modified]
When you have finished drawing a hotspot, Dreamweaver displays the
properties of it on the Properties Inspector.
IT1303 ©UCSC 39
6. Select a hotspot and enter the link address on the Link field or use the
“Point to File” or “Browse to File” icon to link the Hotspot to the required
file.
7.12.3 Image Rollovers
You may like to have buttons or image links which changes its image to
another with the mouse over event and changes to the previous with the mouse
out event. To create buttons or image links like this need scripting languages to
be incorporated with HTML.
But if you use Dreamweaver for creating rollovers, you don’t need to know
anything about a scripting language.
How to create a rollover?

1. Place the cursor where you want the rollover image to appear
2. Select Insert > Image Objects > Rollover Image, or select
Rollover Image from the Images menu on the Insert Toolbar’s
Common category
3. Enter a unique name for the rollover image in the field, “Image name”
4. Browse for the two images, original image and the rollover image
5. Enter an Alternative text to display when the image is not accessible
6. Next, enter the URL of the file you want to open by clicking on the
rollover image
7. Select the option Preload Images to load the images before they are
requested to be. So that ,there will not be any delay in loading the
images.
IT1303 ©UCSC 40
7.13 Using Frames [1 hrs]
7.13.1 Creating Frame Structures
A normal Web page opens on one Window and once you click on a link on
the Web page with the default setting you’ll open the second file replacing the
first file. If you set the target property of the link to “_blank” then you’ll open a
popup. But if you don’t like to replace the original file having links and if you
want to show the links all the time then, you can use the Frames to open the
pages.
The frames divide the window into several segments and in each segment
you can have a different Web page. When you have more than one frame on a
Window we refer to them as a set and call it as frameset.
How to create a frameset?

1. Click on the “New” button on the Standard Toolbar to open a new page
2. In the New Document dialog box, choose the Framesets category
3. Select a frameset option on the category Frameset
4. Click on the button, Create
Dreamweaver will create you a set of frames and you can handle each
frame as a different page. You can add content in each frame and save them all
by clicking on the button Save All on the Standard Toolbar. Click on a border of
the frameset then you can see the properties of the frameset on the Properties
Inspector
Open the Frames panel from Window > Frames and click on a frame to
see its properties on the Properties Inspector.
There is another method to create a frameset. If you have already opened a
new page then split that into frames using the menus of the Frames button on
the Layout tab/menu of the Insert Toolbar.
IT1303 ©UCSC 41
To modify the existing frame structure select an option which describes how
you want to split the frame from Modify > Frameset.
7.13.2 Opening Pages into Frames
If you have already created the pages then you can open them into frames.
1. Select the option File > Open in Frame from the Menu Bar or
press Ctrl + Shift +O.
2. Locate the file in the Select HTML File dialog box
3. Click OK
7.13.3 Handling Hyperlinks within Frames
Frames in a frameset are named with meaningful names to find where they
are. When we have hyperlinks on a page in a frame, we can open the target file
into the parent frame, into another frame or as a popup. You can use the Target
field on the Properties Inspector to do the necessary settings.
How to target a link to a section of your frameset?

1. Select the text or image in one frame which you want to use as a link.
2. In Link field of the Property inspector, enter the URL of the file to
be linked or click on the “Point to File” or “Browse for File” icons to
add the link address
3. Select the name of the frame where you want to open the linked file in
the field Target on the Properties Inspector
There are lots of other options other than the frame names on the Target combo
box;
_blank: Opens the linked file on a different Window as a popup
_parent: Opens the linked file into the parent frameset of the current
frame
_self: Opens the linked file into the current frame, replacing its contents
(the default)
_top: Opens the linked file into the outermost frameset of the current
Web page, replacing all frames
7.14 Creating Styles [30 min]
7.14.1 What CSS is

CSS stands for Cascading Style Sheets. They are a different type of files
which declared style effects. Those styles defined in a CSS file can be accessed
from a Web page and format the content on the Web page accordingly. There is
a separate panel called “CSS Styles” to handle CSS files.
IT1303 ©UCSC 42
New CSS Rule Delete CSS Property
Attach Style Sheet Edit style…
7.14.2 How to create a CSS file?

1. Open the CSS Style panel from Window > CSS Styles
2. Click on the New CSS Rule button on the CSS Style Panel [This will
open you the New CSS Rule dialog box]
3. Select a selector type for the style effect
4. In the Name field enter a name for the CSS style [This field changes
according to the Selector type you selected. For example; if you have
selected the selector type as “Tag” then this field name gets changed
into “Tag” and you have to select a tag used on the document]
5. In the Define in category select the first option if you want to create a
new CSS file or the 2nd option to define the style in the current
document itself
6. Click OK
IT1303 ©UCSC 43
If you select the option New Style Sheet File then you’ll get the Save Style
Sheet File As dialog box to Save the file.
7. Locate the CSS folder in the Web Site Folder [If you haven’t
created a separate CSS folder first you should create one]
8. Enter a file name on the field File name
9. Select the Save as type; Style Sheet Files (*.css)
10. Click Save [ Next, you’ll get the CSS Rule Definition dialog box]
11. Select a category form the Category list box
12. Set the properties for the CSS style
13. Repeat the steps 11-12 for any number of properties
14. Click Apply
15. Click OK
IT1303 ©UCSC 44
7.14.3 How to attach a CSS file?
1. Select the text or other content on the document

2. Click on the combo box at the Style field of the Properties Inspector
3. Select a style you defined earlier [You can attach a style sheet by
linking or importing too.]
IT1303 ©UCSC 45
7.7.4 How to Edit a Style?
1. Select the text or content on the page where you have applied the style
2. Click on the CSS button next to the Style field on the Properties
Inspector [This will open you the CSS Style panel having selected the
current style]
3. Click on the Edit Style… button on the CSS Style panel
4. Do the relevant property changes on the CSS Rule Definition dialog box
5. Click Apply
6. Click OK
You can edit any style listed on the CSS Style panel by selecting it and
clicking on the Edit Style… button on the CSS Style panel.
IT1303 ©UCSC 46

Duration: 08 Hours (04 Hrs of Lecture + 04 Hrs of Practical) Learning Outcomes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Duration: 08 Hours (04 Hrs of Lecture + 04 Hrs of Practical) Learning Outcomes

Uploaded by

Copyright:

Available Formats

Lesson 7: Web Design Applications BIT Semester 1 - Application Packages

Duration: 08 Hours (04 hrs of Lecture + 04 hrs of Practical)

• Determine the basic principles of designing a web page

7.1 Designing Web Pages for Different Uses [5 min]

7.4.6 Property Inspector

7.5.1 Opening a Web Page

7.5.4 Closing and Saving Files

7.8 Creating Lists [45 min]

7.10.2 How to insert a table?

7.11.2 Formatting Pictures

7.11.5 Inserting Flash Button

7.1.1 What are Web Pages and Web Sites?

7.1.2 Designing Web Pages

7.1.3 Design considerations for different Web Sites

7.2 Web Authoring Languages [5 min]

What is Web Authoring?

A web page in HTML uses the structure;

7.3 Common Features of Web Design Applications [5min]

7.4 Getting Started with Macromedia Dreamweaver [30 min]

7.4.1 Starting the Program

You can use the Dreamweaver shortcut icon on the

Preferences Dialog Box

7.4.2 Getting Familiar to the Working Environment

Dreamweaver Design Workspace

7.4.3 Working with Different Types of Views

Dreamweaver provides you a very nice working environment. It displays

There are three most useful toolbars in Macromedia Dreamweaver; the

New - Create a new document

Cut - Cut the current selection

7.4.5 Panel Groups

There are lots of Panel Groups in Macromedia Dreamweaver. You can

7.4.6 Property Inspector

7.4.7 Status Bar

Zoom Tool Set Magnification Set Magnification

7.5 Basic File Operations [30 min]

7.5.1 Opening a Web Page

7.5.2 Creating a New File

7.5.3 Working with Multiple Web Pages

7.5.4 Closing and Saving Files

How to Save a Web Page?

How to close a file?

7.6 Working with Websites [30 min]

7.6.1 Creating a Website

Macromedia Dreamweaver supports you to organize and manage all your

3. Click on the Next button to proceed

7.6.2 Managing a Website

If you have dislocated your previous Web Site then Macromedia

How to use the Manage Sites dialog box?

2. Select the site form the list of sites

7.7 Working with Headings and Paragraphs [45 min]

7.7.1 Inserting Headings

7.7.2 Format Headings

Heading or the text which is to be appeared as a heading should be

How to change the font style, Size, colour…etc?

7.7.3 Inserting Paragraphs

7.7.4 Editing and Formatting Text / Paragraphs

How to edit the text on a paragraph?

How to format a paragraph?

Bold Italic Alignment

How to underline some text?

How to set the font size?

7.8 Creating Lists [45 min]