Dreamweaver: A Walkthrough Tutorial
Dreamweaver: A Walkthrough Tutorial
Dreamweaver: A Walkthrough Tutorial
1. Setting up a Site
Websites that are published on the Internet are not just random pages that are
thrown together in the hope that people will be able to view them over the Web.
Rather, each site is a group of pages, images, and if applicable, multimedia effects
that are linked together. When is comes to creating a whole site it is important that
you create a structure into which you can place all of the content for your site.
2. Preparing a structure
Before you start working in Dreamweaver, it is a good idea to decide where you want
to store your pages and other content for your website.
1. Go to your W:/
2. Create a new folder called DreamweaverCourse
Every website has to have a home page. This is the one that appears when the site
is first accessed. Dreamweaver needs to know what your homepage is as a
reference point. To specify a home page
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 1
b. A drop down menu appears. Click on Edit Site.
c. A dialog box appears. Click on the Edit button.
d. Another dialog box appears Click on the Advanced Button
Adding Text
Notice: that whenever text is being added or edited, the Text properties inspector at
the bottom of your screen is displayed.
1. Click on the Font Drop Down List to select a font. Dreamweaver only lists the
most commonly used fonts. However, you can add more fonts. From the Text
Properties Inspector Font List, go to the last option “Edit Font List …”
2. In the Edit Font List dialog box, click in the “Available Font” list to select a font.
Choose Comic Sans MS.
3. Using the arrow buttons, click the arrows so that the chosen font is selected and
added to the chosen fonts box.
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 2
4. Now change the Font of your text to Comic Sans MS.
a. Click on the Text Properties Inspector to access the options for changing
the size of the font.
b. Select a size ranging from1 (smallest) to 7 (largest).
c. Change the Heading to Size 5 and bold
d. Change the paragraph to Size 2
1. On the menu, click Text, then Click Colour. A colour dialog box appears.
Choose a dark blue and click OK.
Alignment
Create a list
Page Properties
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 3
2. Alternatively you can use an image for your background.
3. Click on Modify > Page properties from the menu bar.
In the Page Properties dialog box, under Background images browse and select
Background Spiral.gif
A warning on using background images – make sure your image is not too complex
or gaudy. A background image should be subtle and unobtrusive, rather than flashy
and too bold. The image we used is not really suitable for our webpage as it detracts
rather than adds.
4. Remove the background image and return to our original colour lemon.
The page properties dialog box also allows you to change the title of the page.
1. Inserting an image
Insert the cursor at the point on the page between the heading and body of our text
and click on the image button on the common tab Insert Panel
A dialog box appears. Locate the image you want to use and Click OK.
2. Image Properties
3. Resizing Images
Add Alternative text to your image. In the Alt Box type in the words Organisation
Logo
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 4
Save your work. Press the F-Key on your keyboard to activate the function keys,
and then Press F12. This will allow you to see your work in a browser. Check to see
if your ALT message in your image has worked.
On the Common tab on the Insert panel, click the Rollover Image button
Type in as follows:
Using Hyperlinks
1. Open a new blank page. In the menu bar click on File > New. Click on Basic
Page and then Create.
Many organizations have a mission statement that summarises the vision and
purpose of the organization and serves to focus all employees on what the
organization aims to achieve. Goals and specific objectives are defined to work
within this basic statement, and policies and procedures are put in place to
achieve them.
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 5
3. Format page properties, font, font size and colours.
4. Click on File and save page as page2.htm.
5. Open your index page.
6. Click on the “Mission Statement” Rollover button we created earlier.
7. In the image properties box, click on the Link folder and find and click on
Page2.htm
8. Click Save.
9. Browse your index page in an Internet browser to check if your link works.
10. Add a link from your page2.htm back to the index page.
To create a link that allows the user to access an email address, first insert the
cursor at the point where you want the link to appear. That is:
1. Insert the text that will be displayed – in between the body of the text and
the rollover hyperlink button
2. Left align your cursor
3. Click on the Email link button on the common tab on the insert panel
4. In the Email Link dialog box, Text: type the following
Send your email comments
5. In the Email category : type in an email address
6. Save the page
7. Preview in browser and test your new link
4. In the Text box type : Search Google for information on Mission Stateemnts
5. In the Link box type : http://www.google.com
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 6
6. Click OK
7. Save your page.
8. Test your link in your browser
One of the best devices for moving around a website is a navigation bar. This is a
set of buttons that contain links to other main areas of the site. Once a navigation
bar has been created, it can be stored and placed on as many pages as required.
Click on your index page where you want your navigation bar to appear. Place
your cursor at the very top of your page.
1. Click on the Navigation bar button on the common tab.
2. The following dialog box appears
3. You can create different images, for each mouse movement. Click in the box
Element name and type in the word MissionStatement.
4. For Up image use mission statements button1.gif
5. For Over image use mission statements button.gig
6. For Down image use mission statements button1.gif
7. For Over while down image use mission statements button.gif
8. Alternative text type in Home Button
9. When click go to URL: browse for Page2.htm
10. Click OK
11. Use the Plus sign to create another element for your navigation bar
12. Repeat the Process for index and page3.htm
13. Save your work
14. Test in browser.
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 7
Designing with Tables
Tables are used for formatting, such as aligning text and images. You can insert as
many tables as you like on a page and tables can also be nested, that is tables
placed within other tables. They are very useful to give your page the structure and
look you desire.
To insert a table
1. Open page3.htm
2. On the common tab on the insert panel, click on the Table button. The
following dialog box will appear
3.
Enter the number of rows and columns that are required for the table.
Enter the Cell padding and cell spacing values. Cell padding effects how much
space there is around each item in a cell and cell spacing affects how much space
there is between the cells in a table.
4. Click OK
5. Remove the heading “This is page 3” and replace with the heading Types of
Information Systems
6. Add the following to your table
Transaction Processing
Systems Are used to keep track of financial
transactions, shops, banks, etc would use
this.
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 8
9. The Table properties inspector should appear at the bottom on your screen.
10. Click on Bg Color to change the colour of the table.
When tables are being used, particularly for complex designs, it is unlikely that
the correct number of rows and columns will be specified first time around. It is
possible to add or delete the number of rows and columns by selecting the table
and amending the values in the Tables Properties Inspector.
Merge Cells
1. Create another row, and in the second cell type in the following: Information
systems enable individuals and organizations to manage their data and
information and enable decision making.
2. To merge the two cells, highlight the row
3. Using the right click button on your mouse, right click. A menu should
appear. Click Table > Merge Cells
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 9
Formatting Cells
1. Click on the cell entitled “Expert Systems”. In the Vert Alignment box –
choose Top
Using Layers
One of the drawbacks of web pages created in HTML is that there has not always
been a facility to overlap elements on a page, such as text over an image, or several
images stacked on top of each other. Layers can give us a degree of flexibility to
create interesting designs.
Creating Layers
A single layer can be added to a page, or numerous ones can be included. Layers
have to be inserted before content can be added to them.
1. On the Common tab on the Insert Panel, click on the Layer button
2. Click and drag in the document window to draw the layer
3. A layer marker will appear at the top left of the page.
4. Add the following words to the layer Types of information systems. Change
the font, font size and font colour
5. Select the layer by clicking on its border once. This activates the Layer
Properties Inspector. Give the layer a meaningful name. This is advisable is
you are going to be using a lot of layers.
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 10
6. Place three layers on your web page and create the following logo, using text
and the images informationsystems1.jpg and informationsystems2.gif
At times it may be necessary to change the order of your layers. Select Window >
Others > Layers from the Menu bar.
Drag layers to appropriate position.
Layers can be moved and resized in a similar way to working with images. Select a
layer by clicking on its border. Click and drag as required.
1. Link Types of Information Systems Page to your index page and Mission
Statement page.
W:/jtabone/Dreamweaver/Dreamweaver Tutorial.doc 11