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)