Dreamweaver
Lab Lesson 4:
In
this lesson, you will be creating the page layout using AP (Absolute
Position) layers for the LMC Animal Hospital site and create the home page
index.html
You will then use the template to create the home page- index.html.
1. Setup a manage site.
2.
Create a new HTML document.
3. Attach the external style sheet to the HTML document.
4. Insert a wrapper DIV tag to center the page.
5.
Add a parent AP layer container and apply the layout style rule.
6.
Add child AP layer containers and apply the layout style rules.
7.
Insert a table and create the style rules for the horizontal navigation menu.
8. Insert images, Animate component and text into the layers.
9. Create the HTML document- index.html using the page template.
Attached is the desired page template output Lesson 4 output page.
Prerequisites:
1.
Create a site folder called Lesson4 on your desktop.
2. Download and extract the AssignmentLesson4.zip to
the Lesson4 folder.
3. Verify if you have the following files and folder in the
Lesson4 folder:
a. textcontent.html
b. images folder
Below is the wireframe of the pagetemplate:
Below is the font color for the page body: #000048
Below are the hexadecimals values for the AP layer colors:
1.
wrapper DIV: #A6C2FF
2.
parent AP Layer: #A6C2FF
3. banner
AP Layer: #000048
4.
navigation AP Layer: #D5E3FF
5.
content AP Layer: #A6C2FF
6.
textcontent AP Layer: #D5E3FF
7.
boxcontent AP Layer: #D5E3FF
8. footer
Layer: #000048
Below is the HTML document file structure:
Requirements:
A. Setup the manage site.
Create a new manage site definition for your web site called LMC
Animal Hospital.
B. Create a new HTML document.
1. Create a new HTML document.
2. Add the title “LMC Animal Hospital” to the layout.html
page.
3. Name and save the file as “layout.html” page in the root of your Lesson3 folder.
C. Create an external CSS
file and create a tag rule for the body
1. Create an external Cascading Style Sheet (CSS) file.
2. Name and save the file as “mystyle.css”.
3. Attach the CSS file to the layout.html.
4. Create a new style rule for the body tag
a. In the CSS Designer tab, select the external style sheet- mystyle.css
b. For the selector name, enter body
c. Enter the following in the CSS definition rule for the ID body tag
font-family: Arial, Helvetica,
sans-serif
font-size: 14px
color: #000048
background-image:
url(images/gradientblue.jpg)
background-repeat: repeat
margin-top: 10px;
(all sides)
D. Create the wrapper DIV tag layer which will be use to
center the page.
1. Insert a DIV tag.
2. For the ID, enter “wrapper”.
3. Click on New CSS Rule.
4. Define the rule in your external CSS file- mystyle.CSS.
5. Enter the following rules in the Box category:
background-color: #A6C2FF
width: 800px
height: 700px
margin-right: auto
margin-left: auto
7. Delete the text placeholder in the DIV container you created before proceeding.
E. Create the AP (Absolute Position) parent layer container
and apply the ID rule.
1. Verify the cursor is
blinking inside the wrapper DIV layer
you create above
2. Insert a DIV tag. From the Insert Panel, select DIV.
3. For the Insert, select “At
insertion point”
4. Enter “parentAP”
as the ID.
5. Click on New CSS rule
button
6. Define the rule in your external
CSS file- mystyle.CSS (circled in red)
5. Go the CSS panel and
enter the rules for the ID #parentAP
background-color: #A6C2FF
position:absolute
width:800px
height:700px
6. Delete the text placeholder in the DIV container you created
before proceeding.
F. Create the banner AP child container and apply the ID
rule.
1. Click inside the parentAP
layer.
Note:
The guide at the bottom should show this
2. Insert a DIV tag. From the Insert Panel, select DIV.
3. For the Insert, select “After start
of tag” <div id= “parentAP”>
4. Enter “banner”as the ID.
5. Click on New CSS rule
button
6. Define the rule in your
external CSS file- mystyle.CSS
7. Go the CSS panel and
enter the rules for the ID #banner
color: #FFFFFF
background-color: #000048
position:absolute
width:800px
height:90px
top: 0px
left: 0px
8. Delete the text placeholder in the DIV container you created
before proceeding.
G. Create the navigation AP child container and apply the ID
rule.
1. Click inside the parentAP
DIV layer.
Note:
The guide at the bottom should show this.
2. Insert a DIV tag. From the Insert Panel, select DIV.
3. For the Insert, select “After start
of tag” <div id= “parentAP”>
4. Enter “navigation” as the
ID.
5. Click on New CSS rule.
6. Define the rule in your
external CSS file- mystyle.CSS (circled in red)
7. Go the CSS panel and
enter the rules for the ID #navigation
background-color: #D5E3FF
position:absolute
width:800px
height:40px
top: 90px
left: 0px
8. Delete the text placeholder in the DIV container you created
before proceeding.
H. Create the AP (Absolute Position) child container for the
image and text content section and apply the ID rule.
1. Click inside the
parentAP DIV layer. Make sure you are
NOT in the navigation layer
Note:
The guide at the bottom should show this
2. Insert a DIV tag. From the Insert Panel, select DIV.
3. For the Insert, select “After start
of tag” <div id= “parentAP”>
4. Enter “content”as the ID.
5. Click on New CSS rule.
6.. Define the rule in your
external CSS file- mystyle.CSS (circled in red)
1. Click inside the parentAP DIV
layer. Make sure you are NOT in the
navigation layer
Note:
The guide at the bottom should show this
2. Insert a DIV tag. From the Insert Panel, select DIV.
3. For the Insert, select “After start
of tag” <div id= “parentAP”>
4. Enter “content”as the ID.
5. Click on New CSS rule.
6.. Define the rule in your
external CSS file- mystyle.CSS (circled in red)
7. Go the CSS panel and
enter the rules for the ID #content
font-family: Arial, Helvetica,
sans-serif
position: absolute
width:800px
height:530px
top: 130px
left: 0
8. Delete the text placeholder in the DIV container you created
before proceeding.
I. Create the AP (Absolute Position) child container for the
footer section and apply the ID rule
1. Click inside the
parentAP DIV layer. Make sure you are
NOT in the navigation layer
Note:
The guide at the bottom should show this
2. Insert a DIV tag. From the Insert Panel, select DIV.
3. For the Insert, select “After start
of tag” <div id= “parentAP”>
4. Enter “footer”as the ID.
5. Click on New CSS rule.
6. Define the rule in your external
CSS file- mystyle.CSS (circled in red)
7. Go the CSS panel and
enter the rules for the ID #footer
font-family: Arial, Helvetica,
sans-serif
font-size: 13px
color: #FFF
background-color: #000048
text-align:
center
position: absolute
width:800px
height:40px
top: 660px
left: 0px
8. Delete the text placeholder in the DIV container you created
before proceeding.
NOTE: Below is the layout
of the page.
J. Insert the image companylogo.jpg inside the banner AP DIV layer.
K. Create a table for the navigation menu in the navigation
AP DIV layer.
1. In the navigation DIV layer, insert a table with the following
dimensions.
rows= 1
columns= 7
table width =100%
border thickness=
0
cell padding= 0
cell spacing= 0
Header: None
L. Add a new compound CSS rule for the navigation layer
anchor tag (hyperlink):
1 Create a new CSS rule. Go
to the CCS Designer Panel. If panel is
not open, from the File Menu, select Window-> CCS Designer
2. Select mystyle.css as
the Source
3. Click on the + icon in
the Selectors section.
4. Type #navigation a for CCS tag rule
5. Add the following style rules for the #navigation a in the Properties Panel
color: #000048
font-size: 22px
font-weight: bold
text-decoration: none
text-align:
center
margin-top: 1px
margin-bottom:
1px
padding-top: 5px
padding-bottom:
5px
display: block
M. Add a new compound CSS rule for the navigation layer
anchor tag hover (hyperlink):
1. Create a new CSS rule.
Go to the CCS Designer Panel. If panel
is not open, from the File Menu, select Window-> CCS Designer
2. Select mystyle.css as
the Source
3. Click on the + icon in the
Selectors section.
4. Type #navigation
a:hover for CCS tag rule
5.
Add the following style rules for the #navigation a hover in the Properties
Panel
color: #FFF
background-color:
#000048
N. Enter the text and corresponding hyperlinks in the table
cells for the navigation menu.
1. Insert the text in the
table cells..
2. In the Properties panel, insert the
hyperlinks for the text link.
Home index.html
Services services.html
Ask the Vet askthevet.html
Hours hours.html
Coupons coupons.html
Contact contact.html
About Us aboutus.html
O. Enter the text content in the footer AP DIV layer.
1. Copy and paste the following text in the footer
layer.
Note: Use Paste Special- Text Only. Use a line break to have the phone and email
address to display on separate line.
Copyright © 2012 LMC
Animal Hospital | Site Map | Privacy Policy
(925) 513-1625 email:
your email address
2.
Add the text hyperlink for the following links:
a. Site Map:
sitemap.html
b. Privacy Policy: policy.html
3.
Add the email hyperlink for the email address:
4. Create a new CSS rule for the anchor <a> link tag for the
footer ID.
a. For the selector type, select Compound
b. For the selector name, enter #footer a
c. For the rule definition, select
your external style sheet- mystyle.css
5. Enter the following style rules for the #footer a.
color: #FFF
P. Save your mystyle.css and layout.html page and test your
page
1. Select File from the
menu and then Save All.
2. Test your layout.html page. Press F12 to view your page in Internet
Explorer.
Q. Create the Home page- index.html
using the layout.html
1. Select File and then New.
2.
Save the HTML document as index.html.
R. Create the AP Layer container for the Animate Canvas Component
1. Click inside the content
DIV layer.
Note:
The guide at the bottom should show this
2. Insert a DIV tag. From the Insert Panel, select DIV.
3. For the Insert, select “After start
of tag” <div id= “content”>
4. Enter “animate”as the ID.
5. Click on New CSS rule.
6.. Define the rule as an
internal CSS – This document only (circled in red)
5. Enter the following in
the CSS definition rule for the ID #animate
position:absolute
width:800px
height:335px
top:
0px
left:
0px
6. Verify the rules were
entered correctly. After adding the
rules above, click on OK button
7. Delete the
text placeholder in the DIV container you created before proceeding.
8.. Verify the cursor is blinking insert the Animate layer
9.. From the Insert Panel,
select Animated Composition.
10. Select OAM Services_Canvas.oam
from the folder
11, In the Properties Panel,
adjust the Width= 800 and Heigh= 335
S. Create the AP Layer container for the text and image content
and insert the image file.
1. Click inside the content
DIV layer.
Note:
The guide at the bottom should show this
2. Insert a DIV tag. From the Insert Panel, select DIV.
3. For the Insert, select “After start
of tag” <div id= “content”>
4. Enter “textcontent”as the ID.
5. Click on New CSS rule.
6.. Define the rule as an
internal CSS – This document only (circled in red)
7. Enter the following CSS definition rules for the ID #textcontent
font-family:
Arial, Helvetica, sans-serif
background-color: #D5E3FF
padding-top:
10px
padding-right:
20px
padding-bottom:
10px
padding-left:
20px
position:absolute
width:760px
height:175px
top:
335px
left:
0px
8. Delete the
text placeholder in the DIV container you created before proceeding.
9. Insert the image and then create and
apply a class rule to the image.
a. Insert the veterinarian1.jpg image in
the textcontent layer.
b. Create a class style
rule.
For the rule definition, select
your internal style sheet- This document
only-
Name the class rule as .image1
.
c. Enter the following style rules
for .image class in the CSS Definition dialog box:
float:
left
margin-right: 15px
border: 1px solid #000 (all sides)
d. Select the image
and apply .image1 class rule
to the image from the Properties panel.
NOTE: This class rule will float
the image to the left and add 15 px right margin of the image.
10. Add the text content. Create and
apply the class rule for text header.
a. Create a class
rule.
For the rule definition,
select your external
style sheet- mystyle.css
Name the class rule as .boldtext
b. Enter the following style rules for .boldtext class in
the CSS Definition dialog box:
font-size: 16px
font-weight: bold
text-align: left
b. Open
the textcontent.html from the File Panel.
c. Copy and paste the text content to
the right of the image.
NOTE: Use Paste Special- Text Only.
d. Use line
breaks to separate the text header and content.
NOTE: Press <shift><enter> to create a
line break
e. Select
the text headers and apply the .boldtext from the Properties panel.
T. Save and close the index.html and mystyle.css
1. Select File from the
menu and then Save All.
Test:
1. Preview your web page by
clicking the 
in the toolbar.
2. Verify your document is complete and that it closely
matches the attached Lesson 4
output page.
Submit:
1. Zip up and compress your Lesson4 folder.
2. Upload the compressed folder into the Canvas- Dreamweaver Lab Assignement 4
Drop Box.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|