!

"#$ &&'()
"
Introduction to Dreamweaver: Activity

Step 1: Starting Dreamweaver
Open Dreamweaver
Click on the Site Menu. Select Manage Sites
Click New A Site Setup dialogue window will appear
o Site Name: Hogwarts A History
o Click the folder image next to Local Site Folder and navigate to
the Hogwarts A History folder you created last lesson

o Advanced Settings > Local Info > click the folder next to Default
Images Folder and navigate to the images folder you created
inside the Hogwarts a History folder last lesson

Click Save
Click Done

Select File > New > Blank Page > HTML > Layout: None > Create
You have now created your first webpage
Make sure your workspace is set to Classic Mode click the
workspace button in the top right-hand corner (by default it may be
DESIGNER and select Classic. You will see different menu bars
appear.

Step 2: Creating Webpage Layout

Click on the table icon
Set up as shown: Rows > 3 Columns > 3 Table width > 100% Border
thickness > 0. Click OK



You screen should look like the one below
!"#$ &&'()
#



Click away from the table to deselect it. The handles and green lines
will disappear.
Click anywhere in your table, then click the <table> tag at the bottom of
the screen. This will show you the properties box of the table see
below



Using the Properties box, change the number of rows to 4 and the
number of columns to 2.
Right click on the top left cell in the table. Select Table > Insert Column.
The table should now have 3 columns
Use the same method to delete one of the rows
Select the entire second row in the table. Click the Merge Cells icon in
the properties box
Click in the centre cell in Row 3. Click the Split Cells icon in the
Properties box. A dialogue box appears, giving you the choice of
!"#$ &&'()
$
splitting the cell into rows or columns. Click Rows and enter a 2 for the
number
You table should look like the one below:



Rearrange the borders of your table to look like this:



You have now created the layout for your webpage

Save your work!
Click File > Save As
Naviage to Hogwarts A History > html_files folder
Save webpage with the file name index.html
From the Save as type dropdown menu select HTML documents
Click Save

Step 3: Inserting Image
!"#$ &&'()
%
Place cursor in the second (merged) row. Click Insert > Image.
Navigate to the images folder located in the Hogwarts A History folder.
Select hogwarts_logo.jpg
On the Accessibility dialogue box, type in logo as Alternative text as
shown:



Click OK. The Image will appear in the second row
Save again


!"#$ &&'()
&
Step 4: Adding colours
Click in the last cell in row 3. In the properties box, click the small grey
square labelled Bg. A dropper appears. Select a colour from the logo.
The cell should now be filled with that colour.
Click on the first cell in row 3. Click the small grey square labelled Bg
again. Use the dropper to select the colour the bottom cell is filled with.
Repeat with the top and bottom cells in the left column. Your webpage
should now look similar to this:



Select all cells in table and click <table> in the Properties bar. Click
Convert Table Widths to Pixels icon.
Save again
Select File > Preview in Browser > IExplore. You can now preview what
your webpage will look like.


!"#$ &&'()
'
Step 5: Using HTML to edit
Although Dreamweaver allows you to edit through the design view, as we
have done so far, we are going to practice editing using HTML so you
understand what is going on behind the scenes

Ensure your view is set to Split (icon in top left-hand corner) so you
can see both the design and the code
Click in the bottom-middle cell in row 3. You will note the cursor in the
Code view jumps to where that cell is located within the code.
Click to select the text in between the two <td> tags (as shown below).



Press Delete on your keyboard.
In this space (between the two <td> tags) type Welcome to Hogwarts,
A History Website!
You will notice nothing has changed in the Design view. Click Refresh
in the Properties window and you should see the following:


!"#$ &&'()
(

We want to now adjust this text. Back in the Code view update the
code to the following:
o <td height=175><H1><CENTER>Welcome to Hogwarts, A
History Website!</CENTER></H1></td>
Click Refresh in the Properties window and you should see the
following:



We are now going to add some welcoming text below this Welcoming
Title.
Go back to the coding and place your cursor inbetween </H1> and
</td> - we are going to add code after the Welcoming Title, but still
inside this cell.
Type the following:
o <br><P><CENTER>Hogwarts School of Witchcraft and
Wizardry is proud to present this website, which provides
everything you need to know about this magical
school</CENTER></P>
Click Refresh in the Properties window and you should see the
following:

!"#$ &&'()
)


Save your work!
Select File > Preview in Browser > IExplore. You can now preview what
your webpage will look like.



!"#$ &&'()
*
Step 6: CSS Styles
CSS stands for Cascading Style Sheet. Each style sheet can contain many
different styles. This is where you will set your text styles.
Make sure you can see the CSS Styles panel in the Design panel group

Click the New CSS Rule Icon in CSS Styles Panel
A new CSS Style window appears:
o Choose Class (can apply to any HTML element) from
dropdown
o Selector Name: PageTitle
o Rule Definition: choose New Style Sheet File from the drop
down menu
Click OK
In the Save Style Sheet File As dialogue that appears, create a new
folder called StyleSheets inside your Hogwarts A History folder
Enter in the filename of TextStyles for the CSS. Click Save
Set the following properties:



Click Ok
To apply the new style, click once on the Welcome Title text. In the
Properties window, select CSS icon on the left. From the Targeted Rule
dropdown select Apply Class > PageTitle. The style of the text changes
and takes on the properties that have been set.
Repeat this process to create a CSS Style for the body text. Click New
CSS Rule from the CSS Styles panel. Enter the name as PageContent.
Click OK. Set the style properties as shown below. Click OK. Apply the
PageContent style to the welcoming body text in the same way as
above.
!"#$ &&'()
"+


!"#$ &&'()
""
Step 7: Div Tags
The <div> tag defines a division or a section in an HTML document. Think of it
as a container for text, images and other page elements.
Unlike table cells, which are restricted to existing somewhere within the rows
and columns of a table, div tags can appear anywhere on a webpage. You
can position them absolutely (by specifying x and y coordinates) or relatively
(by specifying their distance from other page elements).

The <div> tag element is very often used together with CSS, to layout a
webpage it is regarded as the basic building block of the CSS layout.

Note: by default, browsers always place a line break before and after the
<div> element. However, this can be changed with CSS

To practice <div> tags we are going to create our second Hogwarts A History
page the About page:

Save your index.html page
File > New > Blank Page > HTML > None > Create. A blank
document will appear.
Ensure you have Split view enabled so you can see both the code and
design.
Delete all code currently in the code view. Copy out the following:


<!DOCTYPE html>
<html>
<style type=text/css>
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
</style>

<style type=text/css>
#sidebar {
float: left;
width: 200px;
background: #F2C311;
!"#$ &&'()
"#
padding: 15px 10px 15px 20px;
}
</style>

<style type=text/css>
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>

<body>

<!--container div tag-->
<div id=container>

<!--sidebar div tag-->
<div id=sidebar>
<h3>Navigation</h3>
<p>Home</p>
<p>About</p>
<p>Gallery</p>
<p>Contact</p>
</div>

<!--mainContent div tag-->
<div id=mainContent>
<h1>About Hogwarts</h1>
<p> Hogwarts School of Witchcraft and Wizardry is a British wizarding
boarding school teaching the magical arts, located in Scotland inside
Hogwarts Castle.</p>

<h2>Location</h2>
<p>Hogwarts School is located in Hogwarts Castle, a large castle
somewhere in Scotland.</p>

</div>

</body>
</html>


!"#$ &&'()
"$
Click refresh to view your new layout. It should look like the following:



Save your work




!"#$ &&'()
"%
Step 8: Adding a Navigation Menu
- Open index.html file
- Place cursor in bottom left (orange) cell
- Click on Image icon > Image
- Navigate to images folder and select nav-menu.png
- Menu image will appear in the cell
- Make sure this menu image is selected. Select the blue hotspot icon in
the bottom left of Properties window
- Draw around the home button
- If prompted, type home into the Alt text field in Properties window
- Then go to Window > Behaviours. Behaviours panel will appear in the
interface
- Within the Behaviours panel, select the + > Go To URL
- A Go To URL dialogue window will open. In the URL field type
index.html
- This new behaviour will appear in the Behaviour panel list. Currently
the action is set to occur on mouseover we want it to occur on click.
So, click on onMouseover and select onClick option.



- Click on the + sign again and select Swap Image
- Click Browse and select home-rollover.png like shown. Click Ok


!"#$ &&'()
"&


- You will now have three behaviours listed in your panel like shown:


- We will now repeat these steps for the About section.
- Use the hotspot selector from the Properties panel to select the About
button
- If prompted, type about into the Alt text field in Properties window
- Then in the Behaviours panel select the + > Go To URL
- A Go To URL dialogue window will open. In the URL field type
about.html


!"#$ &&'()
"'

- This new behaviour will appear on Behaviour panel list. Click on
onMouseover option and change to onClick
- Click on the + sign again and select Swap Image
- Click Browse and select the about-rollover.png. Click Ok
- You will now have three behaviours listed in your panel.
- Click Save and then Preview in IExplorer to check everything works.
- Repeat for Gallery and Contact buttons. The URLs do not exist yet, but
we will be creating them in the following steps so still type in
gallery.html and contact.html
- Save your work
- We now have a rollover navigation menu, with the links to index and
about pages working. In the following two steps we will create the
gallery and contact pages. These links will then automatically work.



!"#$ &&'()
"(
Step 9: Insert Gallery
- Have index.html document open
- Click File > Save As
- The Save As dialogue window will open. Rename document
gallery.html and select HTML Documents as the Save as type. Click
Save
- We now have a new webpage called Gallery, that is a duplicate of the
index layout. This maintains consistency throughout our webpage.
- In the middle cell of the second row above the cell with the text type
Gallery
- Select this text, click CSS icon in Properties panel and from the
Targeted Rule dropdown menu select .PageTitle The font will change
to that style, which we created in an earlier step
- Place your cursor in the cell below. Ensure your view is set to Split so
you can see the code. Select the coding relating to the title and text in
the bottom middle cell and delete as shown (be careful not to delete the
<td> tags):



- Click refresh. The text is now deleted. This is the cell where we will
insert a gallery.
- Make sure your cursor is in this cell
- Click Insert > Media > SWF
- Navigate to your images folder > Hogwarts-gallery folder and select the
Hogwarts-gallery.swf file
- The Object Tag Accessibility Attributes dialogue will appear. For Title
type Hogwarts Gallery. Click OK
- Save your work
- Preview in IExplorer


!"#$ &&'()
")
Step 10: Contact Form
- Open index.html
- Click File > Save As
- The Save As dialogue window will open. Rename document
contact.html and select HTML Documents: as the Save as type. Click
Save
- We now have a new webpage called Contact, that is a duplicate of the
index layout. This maintains consistency throughout our webpage.
- In the middle cell of the second row above the cell with the text type
Contact Us
- Select this text, click CSS icon in Properties panel and from the
Targeted Rule dropdown menu select .PageTitle. The font will change
to that style.
- Place your cursor in the cell below. Ensure your view is set to Split so
you can see the code. Select the coding relating to the title and text in
the bottom middle cell and delete as shown (be careful not to delete
<td> tag):


- Click refresh. The text is now deleted. This is the cell where we will
insert our contact form
- Click Insert > Form > Text Field
- Fill out as shown:
!"#$ &&'()
"*


- If prompted to add form tag, select Yes
- Place cursor after text field and press Enter to start a new line
- Click Insert > Form > Text Field
- Fill out as shown:



- If prompted to add form tag, select Yes
- Place cursor after text field and press Enter to start a new line
- Click Insert > Form > Text area
- Fill out as shown:

!"#$ &&'()
#+


- Your form should now look like this:



- Place cursor after Text area and press Enter to start a new line
- Click Form from the menu tabs across the top of interface. Click on
button icon to insert a button.
- Fill out as shown:


- Preview in IExplorer your page should now look like this:
!"#$ &&'()
#"