Introduction to Computer Science – CSC101
Lab #3 – Dreamweaver I: Introduction to Dreamweaver
Due: July 20, 2011 @ 5:00pm (Wednesday)
Points will be deducted for labs that are turned in late!
Your Name: __________________
Summer II 2011
WFU E-mail Address:_________________
Pre-Lab Reading Assignment:
If you have not completed the Pre-Lab instructions then stop now and complete
them. They can be located by going to http://www.wfu.edu/~pryoree and then to
Course Calendar. You simply cannot do this week’s lab without doing the prelab
first.
Lab Objectives:
1 - To gain basic familiarity with Dreamweaver, a visual HTML editor
2 - To understand frames and framesets in HTML
Grading:
You will be editing the webpage that you created last week that contains your
CSC101 journal. You will end up with several HTML files by the end of lab and they
must “fit” together in a very specific way.
I will visit your web site and look at the page. In addition there are questions on the
final page of this report that you will answer. Your score for the lab will be based on
the web page that you create and post on your web site and your answers
to the questions.
-
Lab Questions: 10pts
Web Page that displays properly on your site: 10pts
o <frameset> tags are constructed properly
o Target frame for links are correct
o Image properties are changed
I will check the following website for your page:
http://www.wfu.edu/~yourusername/csc101/index.html
If this link does not open up the proper webpage, you will receive no points for the
completion of the page, even if it is located somewhere else. It is your responsibility
to ensure this link works before handing in you lab. If you have any problems,
please ask me during lab!
Lab Instructions:
I.
Establishing a Dreamweaver “site”
This critical, one-time, configuration step will be demonstrated in class.
You
must complete this step before continuing or the instructions below will not work.
After you complete this step, close Dreamweaver and then restart it. The files
that you organized in the prelab should show up on the right hand side of your
screen in the list of files in your csc101 site.
II.
Getting used to Dreamweaver
To see how Dreamweaver works, let’s add some formatting to the dates on
your web page.
1) Open the entries.html file from the csc101 site in Dreamweaver by
clicking on the name.
2) Highlight the first due date (7/11/11), before your first entry, and use
the options available in Dreamweaver to change the font size / color /
and font face. You are experimenting with a new program, use the
help menus or ask if you are having trouble doing this. The best way
to learn new software is to dive right in and experiment.
3) Repeat this for the second date before your second entry.
4) Feel free to experiment and add features to other areas of your
webpage!
III.
Modifying your image
Last lab, we inserted a picture into our webpage. Dreamweaver allows us
to control many properties of that image very easily.
1) Open info.html in Dreamweaver. Click on your image in the Design
View panel. Note that when you click on the image a Property panel
appears where you can change the fundamental properties of the
image.
2) Find the Align option in the Property inspector and select “Left”. Your
image should move from the right side of the window to the left. We’ll
leave it there for today’s lab.
3) Select the image and in the Property panel set the Height (H) to be
300 pixels and set the Width (W) to blank.
4) Select the image in Dreamweaver and add some descriptive text for
“Alt text” is
your image's “Alt text” in the Property inspector.
displayed when a web browser is unable to display the image itself or
by some browsers any time you move the mouse over the item. “Alt
text” on a web page can be very useful to the visually impaired when
they are using reading aids.
5) Save the modified file, and open info.html in Internet Explorer (firefox
will not display alt text). Hover your mouse over the image. See what
happens?
IV.
Working with framesets
1) With info.html still open in Dreamweaver, highlight the “back” link that
you created in Lab2, and delete the link. Save and close the file.
2) Open menu.html in Dreamweaver.
3) Currently menu.html only contains 2 links, one to info.html, and one to
the course webpage. Add a link to the menu.html file that directs to
entries.html. How do you add a link to a page in Dreamweaver?
(Hint: Type some text and highlight it. In the properties box, there
will be a box where you can type your link). You should now have
three links on the page.
4) Make these links into an unordered list.
This is easy to do in
Dreamweaver as well!
5) This file will serve as the menu or switchboard for our newly designed
web page. In order to have HTML open each link in a different frame
(not in a new HTML screen) we need to tell HTML where to display the
linked page by adding “target” attributes. In Dreamweaver we will do
this by clicking on each of the links and finding the “Target” option in
the Property Inspector. In the Target box, type in “content”. Repeat
for all links.
V.
Putting it all together
1) It’s finally time to look at these multiple pages you’ve been editing as
a collective web site. Open index.html in your browser and preview
the page. Try the links. Resize the window. Observe how the frames
interact. Try to understand how the pieces fit together.
VI.
Posting your webpage
Since you have established a site under Dreamweaver you no longer have to go
through Network Places to upload your files to the web server. All you need to
do is click on the csc101 folder in Dreamweaver’s file list and then click on the
Blue “Put” button right above the list of files. Answer “Yes” to any questions
about dependent files.
1) Look at your updated webpage at:
i. http://www.wfu.edu/~user/csc101
ii.
If you get any errors, or if the page does not
display, go to: http://users.wfu.edu
1. log in
2. click “Set permissions for personal homepage”
3. click Continue
4. Select “Yes” from the drop down box, and click OK
iii. This should fix most problems
Short Answer Questions:
1) Look at the HTML code in entries.html. We changed the way the text for the
date looks. What HTML code do you feel is responsible for that change? It
may look unfamiliar to you. (2 pts)
_________________________________________________________________
_________________________________________________________________
2) Look at the HTML code for one of the links that you created in menu.html. In
the space below, write down the values for href, and target. Explain the
relationship between these two attributes, and what happens when you click
that link. (2pts)
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
3) What do you feel is the purpose of using frames to design a webpage? (2 pts)
_________________________________________________________________
_________________________________________________________________
4) In the diagram below, A and B refer to the two frames that we created. For
each frame, give the HTML name for each frame: (2pts)
a.
b.
5) In the same diagram, what is the initial source for each frame: (2pts)
a.
b.
(A)
(B)