Dreamweaver tutorial for Biology 110 - 2006 edition

This tutorial shows you how to create a home page using "frames" (each frame displays a separate web page). It is not required that you use frames for your home page, but we will use frames here so that you learn the technique. The entire tutorial is on this single web page, and you should go through it in sequence the first time you use it. To skip down to a particular part of the tutorial, click one of the links below. Click the 'back' button of your browser to jump back to the top of the page.

IMPORTANT--To be visible on the Internet, all of your files must be saved in the PersonalPages folder of your W drive.

1. Open up Dreamweaver as shown below, using one of the university PC labs (Gray, Blue, Orange, or Brown).

2. The first time you open Dreamweaver, click 'HTML' to create a blank page...

3. It will be easier to edit if you change the look of Dreamweaver's buttons. To do this, click the 'Common' button, then change to 'Show as tabs' as shown below. You only have to do this once, at the beginning of the session.

4. Click the 'Layout' tab, then click the button shown below and select the first option...

5. You have just created a 'frameset', a file that organizes web pages. This is because we want to have two pages visible in the same browser window - a navigational page (on the left) and a main page (on the right). Dotted lines below indicate the position of these two pages, which we will create shortly.

6. Save the frameset, giving it the name "welcome.htm". We must give it this name because the frameset will be your "home page", and on the university server the home page file must be named "welcome.htm" (or "welcome.html"). Use the File menu and select "Save frameset" or "Save framset As"...

...and then type "welcome.htm" in the Save dialog box, as shown below. Make sure that you save the file in the PersonalPages folder of your W drive, or else it will not be visible on the Web.

7. Use your cursor to drag the border over an inch or so to the right, as shown in the image sequence below...

8. Now type the words shown below in the left frame, which will be your navigational frame (later we will create links to these words).

9. Use the File menu to save this frame, giving it the name "leftframe", as shown in the second graphic below (note that the saved file "welcome.htm", the frameset, is already saved in the PersonalPages folder of your W drive).

10. Note that two files are now present in the 'Files' window on the right of your screen - 'welcome.htm' (the frameset) and 'leftframe.htm' (the web page that appears in the left frame).

11. In the right frame, type the words below, substituting your name for 'Freddy Falcon', and then click the 'centering' button in the Properties window at the bottom of your screen.

12. Hit the 'enter' key a few times to move the line down, then click the small black triangle next to the 'Size' field (see below) and select '24'.

13. Italicize the line using the button shown below, just as you would with a word processor.

14. Save the frame, naming it 'rightframe.htm' as shown in the second graphic below (note that the saved files "welcome.htm" and "leftframe.htm" are already saved in the PersonalPages folder of your W drive).

15. This is what Dreamweaver looks like after creating and saving all three files. Note that the three filenames appear in the 'Files' window on the right. To recap, 'welcome.htm' is the frameset file that organizes the two webpage files 'leftframe.htm' and 'rightframe.htm'.

16. To see what this looks like in an actual web browser, use the File menu and select 'Preview in browser'. Note that in a web browser, the line separating the left and right frames is not visible, because framesets are invisible files (second graphic below).

17. Next, use the Window menu and select 'Frames'.

18. Note that the Frames window appears in the lower right-hand corner of the screen. Click the left side of this window, as shown below, and note that the Property window changes to show the properties of the 'leftframe' file.

19. Change the 'Scroll' field from 'No' to 'Yes', as shown below. As you will see shortly, this will cause a scrollbar to appear on the left frame.

20. You can also change the color or background of a frame. To do this, position the mouse cursor anywhere in the left frame, hold down the right mouse button, and select 'Page Properties' as shown below.

21. Use the 'dropper' cursor to select a light blue (or any other light color), then click 'OK' (below left). Then click 'OK' again (below right).

22. Your home page now appears as shown below, with a light blue background for the left frame and a scrollbar also associated with this frame (the scrollbar would be useful if you end up with lots of links on the left frame). You could use the 'Preview in browser' feature to see what this looks like in your web browser, but we won't show it here.

23. We now need to get some pictures to put on the right frame. We'll get them from the Freshman Colloquium home page. To go to this page, first activate your web browser and go to the university home page, then click on the "A to Z Directory" button as shown below.

24. Click on "B" (below left), then click "Biology" (below right).

25. Before continuing, bookmark the Biology Department's home page. Click on the "Faculty and Staff" link (below left), scroll down and click the "Mark Bergland" link (below middle), then click the "Freshman Colloquium" link (below right).

26. Before going any further, bookmark the Biology 110 home page, because you will be coming back to it.

Position your cursor anywhere on the leftmost photo (the one showing the blood pressure check), click the right mouse button, and select "Save Picture As"

27. Remember, all files must be saved in the PersonalPages folder of your W drive. If you are not there already, click the 'My Computer' icon (left below), double-click on the 'web' drive (middle below), and save in the PersonalPages folder (right below).

28. Repeat the above procedure (steps 26 and 27 above) for the remaining two pictures on the Freshman Colloquium home page.

29. Click on the right end of the "Freddy Falcon's Home Page" text so that the cursor is blinking just to the right of the "e" in the word "Page" (left below), then hit the 'Enter' key several times so that the cursor is below the text (right below)...

31. A table will appear as shown below left. In the Properties window, change the default setting to 'Left', to left-justify the table (below right).

32. Drag the picture named 'bloodlabf.jpg' from the Files window to the leftmost cell of the table, as shown below.

33. Drag the picture named 'ck_01f.jpg'' from the Files window to the middle cell of the table, as shown below. You will have to make the table cell bigger before doing this (by dragging the cell border to the right).

34. Drag the picture named 'bio_01f.jpg' from the Files window to the middle cell of the table, as shown below. You will have to make the table cell bigger before doing this (by dragging the cell border to the right).

35. To see the entire table, temporarily hide the Files window by clicking on the small triangle shown below.

36. Get in the habit of saving your work frequently. The easiest way to do this is to use the 'Save all' command, so that changes to any frame will be saved.

37. Preview your web page again by using the 'Preview in Browser' menu item.

38. The image below is how your web page would appear in Internet Explorer. Note that the table borders are visible.

39. To make the table borders invisible, go back to Dreamweaver and select the table. One way to do this is to move your cursor over the upper left-hand corner of the table until a miniature table appears as shown below, then click the left mouse button. This will hilight the table borders as shown on the right below. This method for selecting a table can be somewhat tricky to do. An easier way is to click anywhere inside the table, then use the 'Modify->Table->Select Table' menu sequence, as shown in the lower graphic below.

40. When the table is selected as shown above, the Properties window changes to show the table properties. Change the default 'Border' value from 1 to zero, as shown below...

41. Use the File menu and select 'Preview in Browser' to see what the table and images look like in a web browser. Note that the borders are now invisible, which in this case looks better. (In other cases you may want to leave the borders visible, for example a table of numbers.)

42. Use the bookmark you created earlier to open your web browser to the Bio 110 home page, and click the 'Assignments' link as shown below.

43. Find and click the "career paper template" link (it may look different than shown here).

44. You will use the web page as as "template" on which to write your career paper. Save the template to the PersonalPages folder of your W drive, changing the name to "career.htm" as shown below right.

45. Before continuing, click the small black triangle on the extreme right-hand side of your screen to show the Files window (remember, you hid this window in Step #35 above).

46. To make a link, hilight the words "Career Paper" in the left frame, click on the round target icon (bottom of graphic below), and drag up to the file "career.htm"...

47. Set the Target of this link to 'top', as shown below. We'll explain why shortly.

48. Now hilight the word "Home", then drag from the target icon to the "welcome.html" file as shown below right. The word "welcome.html" appears in the link box next to the target (again, you could have simply typed this in the link box, rather than dragging, but dragging is preferred).

49. Set the Target to "top" (again, you'll see why shortly).

50. We'll use a different procedure to create the link to the Biology Department. First, open your web browser to the Biology Department's home page (you can type the URL in as shown below, or use the bookmark you made earlier in Step #25).

Highlight the URL, and copy it to the computer's clipboard by holding down the Control key and hitting the 'C' key (or use the Edit menu of the web browser and select 'Copy').

51. Go back to Dreamweaver, hilight the words "Biology Department", then click in the Link box (bottom right) and paste the URL in the box by holding down the Control key and hitting the 'V' key (or using the Edit menu and selecting 'Paste'). After doing this, set the Target to 'top' as you did before.

52. Use the 'Preview in Browser' command to show the links in your web browser, then click on each one. Note that the linked page will take up the entire browser window, which is why we set the target to 'top' in the preceding steps.

52a. Use the above techniques to add one more link in the right frame, to the Career Services home page. Don't forget to set the target to 'top'.

53. One of the requirements of the career paper assignment is to read and summarize a scientific paper in your chosen field. You should type up your summary in Microsoft Word, 'print' it as a PDF file, then link this PDF file to your career paper web page. The following steps show how to do this.

First, open Word using the Start button, selecting 'Microsoft Office', then selecting Word as shown below...

54. Type a line of text in Word, any text, such as the example below (in reality, you will be typing your summary of a scientific paper, but for now just type a linke of text).

55. Select 'Print' from the File menu of Word (you won't be printing to regular paper, you'll be printing to a PDF file as you'll see in the next step).

56. In the Print dialog box, click the black triangle and select 'Adobe PDF' as your printer.

57. Now click the OK button on the dialog box.

58. A Save dialog box appears. Give your file the name papersummary.pdf, then click the Save button.

59. A progress bar appears, indicating that the Word document is being saved as a PDF file. Web browsers can display PDF files, as long as a plugin called 'Acrobat Reader' is installed in the browser (which is the case at the computer lab). If you are using a browser that does not have this plugin, you can download it for free from the Adobe web site (www.adobe.com).

60. Go back to Dreamweaver and double-click on the 'career.htm' line in the Files window (below right). The file appears, ready for editing. Remember, this is how you will be writing your career paper, using Dreamweaver to edit the 'career.htm' file.

61. Scroll down towards the bottom of this page, and hilight the line "Here is a PDF link to the summary of this paper." Then, drag from the target icon to the PDF file as shown below, just as you did before.

62. Preview this page in your web browser (using the "Preview in browser" command), and click on the PDF link.

63. The PDF file appears in your web browser window, exactly as it looked in Word. The nice thing about PDF files is that they are visible on the web without any special formatting. You can use this procedure to save any other class project for your web portfolio, as long as it is created in an application that is on one of the university computers (Word, Excel, etc.). If you are using a Macintosh computer, you can print directly in PDF format.

The next section of the tutorial deals with another way of creating tables. We've already gone through the procedure for creating tables using Standard view, so here we'll show you how to create tables using 'layout' view. Tables are important, for they enable you to position text on the screen. Remember, never use 'Layers' in Dreamweaver to position text of images, always use tables instead. Layers don't work consistently.

64. To begin, use the File menu to create a new HTML page...

66. Click the icon next immediately to the right of the Layout button - this button enables you to "draw" the outlines of a table.

67. Drag with your mouse to draw the outline for a new table (below left).

68. When you release the mouse, the table outline appears with a green tab that says "Layout Table". To draw a cell in this new table, first click the icon shown below (the one to the right of the first icon you clicked).

69. Drag with a mouse to create a new cell, anywhere in the table outline.

70. Click the icon again, then draw a second cell.

71. Switch back to Standard view by clicking the Standard button.

72. There are two ways to select the entire table in standard view. You can either move the cursor over the left-hand until the cursor changes to a minature table, then click the table to select it (below left), or you can use the 'Modify - > Table -> Select Table' menus (below right). Click anywhere in the table before doing using the menu to select a table.

73. After selecting the table, copy it as shown below left, then paste it into your home page, below the other table (below right).

74. In your web browser, go to the Fish and Wildlife Service home page by typing in the URL shown below.

75. Find a picture you like (such as the Ocelot shown below), position the cursor over it, hold down the RIGHT mouse button, and select 'Save Picture As...'

76. Using the above techniques, drag the saved picture into one of the cells of the new table.

77. Preview your home page, and it should look something like this. This was only for practice, so of course you should delete these images and put your own in their place. You are not being graded on your home page, only on your career paper, so feel free to use your imagination in creating an informative, professional-looking home page.

Back to top of page