Dreamweaver
SECTION 5 DREAMWEAVER
Structure
5.0 How to Work in Dreamweaver?
5.1 How to Save your File?
5.2 Menu
5.3 Adding Layers to the Timeline and Giving Motion to the Layer.
5.4 Inserting Scripts
5.5 Inserting External Media in the Web Page
5.6 Adding SSI (Server-side include to the Page)
5.7 Adding CSS Style to your Page
5.8 Adding XML Files to your Page
5.9 To Export a Dreamweaver Document as XML File
5.10 Exercises for Practice in Lab Sessions.
5.0 HOW TO WORK IN DREAMWEAVER?
Where and how to open Dreamweaver?
Step 1: Click on Start
Step 2: Select Program
Step 3: Select Macromedia Dreamweaver
Step 4: Click on Dreamweaver
You will get the screen as given below:
21
Lab Manual
On opening Dreamweaver you will see 3 main windows, (1) Object; which contains
Character, Common, Forms, Frames, Head and Invisible. Many options are available
under these, like under common where you will get, insertion of image, rollover
image, layer, tabular data, horizontal bar, line break, email link, date, flash movie,
fireworks object, shockwave file, generator, plug-ins, active x controls, SSI etc.
under character in which you will find some special character/symbols like ©, ®, £,
¥, ™ etc; under frames where you will find different type/style of frames; under
forms where you will find all the elements of forms, like text box, password box,
radio button, check box, selection box, jump menu, submit & reset button etc. (2)
Properties; which provides the properties of the selected object/item, page properties
etc; (3) Launcher; which contains: Site, Library, HTML Style, CSS Style,
Behaviours, History, HTML Source; On clicking any of the items on the Launcher
the subsequent window opens up.
Before creating your Web page you have to create a Root directory in which all of
your work will be saved. Then in Dreamweaver create a Site and Provide the Root
Directory (which you have created). To do this:
Step 1: Select Site from Launcher window
Step 2: Click on Define Site
Step 3: Click on NEW
Step 4: Give a name under “Site Name”
Step 5: Select the folder by browsing under “Local root folder”
Step 6: Click on OK
Step 7: Click on DONE
Now start working on Dreamweaver
Write your text, format the text, insert picture through Object window or by INSERT
-> IMAGE. The Insert Menu provides you all the features available under the Object
window. The modify menu provides you scope to modify the selection properties,
page properties, link, table, frames etc. The Text menu helps to do all the formatting
for the text, like selecting font, font-size, colour, alignment etc.
5.1 HOW TO SAVE YOUR FILE?
Step 1: Click on FILE
Step 2: Click on SAVE
Step 3: Choose the folder in which you want to save
Step 4: Provide a name to the file (with .htm / .html extension)
Step 5: Click on SAVE
5.2 MENU
File Menu: Under it we have New, Save, Save as, Save as template, Import, Export,
Preview in browser etc. options.
Edit Menu: In this menu we have Cut, Copy, Paste, Undo, Redo, Select all, Find,
Replace, Preference etc. options which help us in editing the document.
View Menu: Rulers, Grids, Plugins etc. are available under this.
Insert Menu: It contains almost all the things, which are there, in the Object tool bar.
Modify Menu: Under this we have Page properties, selection properties, Make link,
remove link, link target, table, layer, frameset, library, template, timeline, translate
etc. This menu helps to modify the page by choosing the option as per requirement.
Text Menu: It helps to format the text written in the page by providing details, such
as indent, outdent, list (ol, ul, dl), alignment, font, style, size, size increase, size
22
Dreamweaver
decrease, HTML style, CSS style, colour etc. It also provides the facility to check the
spellings in the page.
Site Menu: This menu contains site files, site map, new site, open site, define site
options.
Window Menu: It contains all the different windows, like object, properties,
launcher, site file, site map, CSS, timeline, history, behaviour, layer, frame, library,
template etc.
5.3 ADDING LAYERS TO THE TIMELINE AND GIVING
MOTION TO THE LAYER
Step 1: Choose Layer from Common toolbar and draw a layer.
Step 2: Write the text inside the Layer.
Step 3: Click on Modify (when the layer is selected)
Step 4: Click on Timeline
Step 5: Click on Add layer to timeline.
Step 6: Modify -> Timeline -> Select Record path to Layer
Step 7: Drag the layer as per your wish, to define a path.
Step 8: Tick on Auto Play & Loop (if required)
Step 9: Open it in the Browser to see the effect.
5.4 INSERTING SCRIPTS
Step 1: Click on Insert
Step 2: Click on Script
Step 3: Choose the type of Script
Step 4: Write the code in “Content”
Step 5: To finish, click on OK
5.5 INSERTING EXTERNAL MEDIA IN THE WEB PAGE
Step 1: Click on the icon in the object tool bar
Or
Insert -> Media -> Choose the media type to be inserted
Step 2: Find and select the file required (browse)
Step 3: Click on OK
5.6 ADDING SSI (SERVER-SIDE INCLUDE) TO THE
PAGE
Step 1: Click on the icon in the object tool bar
Or
Insert -> SSI
Step 2: Select the file
Step 3: Add the file
Step 4: Provide the URL (where to be attached)
Step 5: Provide information on Relative to the document or to the “Site Root”
Step 6: Click on OK.
To Show/Hide The SSI Document In The Page
Step 1: Click on Edit
Step 2: Select reference
23
Lab Manual
Step 3: Select Translation
Step 4: Click on SSI
Step 5: For showing the SSI file; choose one of the following options:
a) in all files
b) in no files
c) in files with extension (stm, htm, html, shtm, shtml)
d) in files matching one of these expressions “<!-- #include”
Example : <!--#include virtual="/virtual campus/bitmain/result.html" -->
Step 6: Click on OK
5.7 ADDING CSS STYLE TO YOUR PAGE
Step 1: Click on Window Menu
Step 2: Select CSS Styles
Or Click on CSS Styles in the “Launcher”
Step 3: Click on New to create a new CSS style
Step 4: Choose the Type
a) Make custom style
b) Redefine HTML
c) Use CSS Selection
Step 5: Give a name
Step 6: Click OK
On choosing (a) of step 4 you will get a new screen in which you have to provide the
following details in Category:
i. Type: Provide the Font, Size, Style, Weight, Decoration, then click OK
ii. Background: provide a Colour or insert an image, then click OK
iii. Block: Give the alignment style, then click OK
iv. Box: Provide the margin setup of Top, Left, Right & Bottom, then click OK
v. Border: Provide the width & colour, then click OK
vi. List: Select the list type (OL, UL, DL), then click OK
vii. Positioning: Provide the style, Visibility, Z-index, Placement (Top, Left, Right
& Bottom), click OK.
After providing the details, select the style from the CSS style window. Choose
where to apply this style (body, p, layer etc.), by clicking on Apply button in the CSS
style window.
5.8 ADDING XML FILES TO YOUR PAGE
Step 1: Choose File -> Import XML into Template
Step 2: Select the XML file & click Open
When an XML file is imported, Dreamweaver merges the XML content into the
Template, which is being specified in the XML file and shows the result in the
document window of Dreamweaver. If that specified Template is not found, then
Dreamweaver prompts you to select another Template for use.
The XML file should contain the name of the Template and editable region as XML
tags.
Example:
<doctitle>
<![CDATA[<title>newTemplate</title>]]>
</doctitle>
<Edit-Region>
24
Dreamweaver
<![CDATA[{Edit-Region}]]>
</Edit-Region>
Here doctitle identifies the title of the Template and edit-region identifies the editable
region.
But in a standard Dreamweaver file XML tags use the “item name”. The above
example (XML tags) is given below in standard Dreamweaver file:
<item name="doctitle">
<![CDATA[ <title>newTemplate</title>]]>
</item>
<item name="Edit-Region">
<![CDATA[{Edit-Region}]]></item>
</item>
Here “item name=doctitle” identifies the title of the Template and “item name=edit
region” identifies the editable region.
5.9 TO EXPORT A DREAMWEAVER DOCUMENT AS
XML FILE
Step 1: Choose File -> Open,
Step 2: Select the document that uses a template (and has editable regions)
Step 3: Click Open
Step 4: Choose File -> Export -> Export Editable Regions as XML.
Step 5: In the XML dialog box, choose a tag notation
Step 6: Click OK.
Step 7: Enter a name for the XML file
Step 8: Click Save.
When the document is exported, the generated XML file contains the name of the
Template the document is using and all editable region names.
5.10 EXERCISES FOR PRACTICE IN LAB SESSIONS
SESSION 1
Exercises
1. Design a Home page of your TLC.
2. Design a Home page for a Toy Company. The page has an image as the
background. Do some attractive text formatting to the text written in the page.
3. Insert an image in your page. Give a zigzag motion to the image in your page.
(Hint: Using timeline)
SESSION 2
Exercises
1. Insert an image in a page. In the browser, when you take cursor over it, another
image emerges under it and when you click on the second image, it takes you
to exercise 2 of session 1.
2. Design a Web page which contains details about your TLC. Give links to a few
options. Also make a link “Mail Us”. On clicking this, it will open the
compose box for mailing to “bit@ignou.ac.in”.
25
Lab Manual
SESSION 3
Exercises
1. Show the course contents of HND in a table.
2. Design the table as given below and enter some data:
Table 1 Table 2 Table 3
Name Age Phno. Name Address Name M-1 M-2 Total
Personal Table Address Table Marks Table
3. Include .css file to one of your Web page created earlier.
SESSION 4
Exercises
1. Design a form as shown below:
2. a. Include an SSI file in your document. Show the SSI file in this document.
b. Include an SSI file in your document. Don’t show the SSI file in this
document.
SESSION 5
Exercises
1. Show the course contents of HND in a table using XML and not HTML.
2. Create a Website that has a questionnaire (any), on submitting, it displays the
inputted data on the other page. You are supposed to use CSS and SSI
(wherever necessary).
26
Dreamweaver
SESSION 6
Exercises
1. Create a website that divides the Web page into two unequal frames. In Frame
One, there are two links to two different forms. The forms are validated on
submitting and the result is shown at the bottom of the same page. Use CSS for
formatting.
2. Design the homepage for IGNOU BIT using XML.
3. Write “Indira Gandhi National Open University”, “Bachelor of
Information Technology”, “Name of your TLC”, “Your Name” and “Your
Enrollment Number” in a Web page. The above written text will overlap each
other. The texts written have different coloured backgrounds. (Hint: Use Z-
index)
SESSION 7
Exercises
1. Design a form, which has a list menu. On selecting any item from that menu it
jumps to the related page. Insert a “GO” button alongside the list menu.
2. Using CSS, remake the Website given in Question 2 of Session 1.
SESSION 8
Exercises
1. Make a Web page to include:
1) a background image,
2) set the text colour to blue,
3) make 2 logos, link them to the IGNOU home page,
4) set the colour of all other text links black. (Use Hexadecimal
colour values rather than named colours).
Use Cascading Style Sheets to develop the above Web page
2. Explain the effect of the following HTML Code:
<html>
<head>
<title> Question 2: Session 8</title>
</head>
<body marginwidth="0" marginheigth ="0" topmargin ="0" leftmargin ="0">
<table>
<tr>
<td bgcolor ="#6BA2CC" >
<img src ="image_1.gif">
</td>
<td bgColor ="#6BA2CC" width ='500'> <center>
<b>THE TITLE OF THE WEBSITE </b></center>
</td>
<td bgcolor ="#6BA2CC" align ="right" width ='230' valign ='top'>
<a href="index.asp" style="color:'#134A81'">Home</a> |
<a href="contact_us.asp" style="color:'#134A81'">Contact Us</a> |
<a href="feedback.asp" style="color:'#134A81'">Feedback</a>
<a href="help.asp" style="color:'#134A81'">Help</a>
<input type="text" size ="16" class ="input_box">
<input type="button" value="Search" class ="button">
</td>
</tr>
27
Lab Manual
</table>
<table>
<tr>
<td>
<input type="Button" value="Home">
<input type="Button" value="Contact Us">
<input type="Button" value="Feedback">
<input type="Button" value="Email">
<input type="Button" value="Help">
</td>
</tr>
</table>
</body>
</html>
3. In the above question use gif images instead of buttons.
SESSION 9
Exercises
1. Develop a Web page with the following enhancements:
• A rollover effect, where an image changes if the user places the mouse
over it.
• An animation that occurs in response to the user clicking on an image.
• A pull-down menu with each option linking to a specific page.
2. Design a Web page. Integrate images, audio, video and animation all in one
page.
3. Develop the Question 1: Session 8 using XML
SESSION 10
Exercises
1. Design a website about yourself (minimum 5-7 pages).
2. Design the home page using Frames. The top frame will contain a Flash
animation file (showing pictures of you from childhood to till date), the left
frame will contain all the links and the right page will contain “Welcome to
My Home Page”. When clicked on the links the related page will open in the
right frame.
28
