Frames

Web Page Design Frames Using Frames on a Site 1. Open your Dreamweaver and create a new site called YourNameMyFramesSite. 2. In this folder, create a subfolder called images. 3. Choose File>New>Framesets>Fixed Top. 4. Click on Create

Top Frame

Bottom Frame

5. 6.

7. 8. 9.

In the title box type My Frameset. In the Properties inspector: a. Borders: Yes b. Border Width: 5 c. Border Color: #FF0000. d. Row Value: 120 Press enter. Choose File>Save All a. In the dialog box, in the File Name box, name the frameset file index.html. b. Save it in your My Frames Site folder. You will then be asked to save either the top or the bottom frame. IMPORTANT: The frame that is outlined like the picture below is the frame you are about to save. This one will be saved as bottomframe.html.

Web Page Design Frames

10.

After you have named the first frame, the computer will automatically prompt you to save the other frame. If it is the top frame, name it topframe.html. Pay close attention to which of the frames has the outline!

11.

Choose Windows>Frames to open the Frames Panel on the lower right side of your window.

Web Page Design Frames 12. 13. 14.

15.

16.

17.

Click inside the frame labeled topFrame. In the Properties inspector: a. Scroll: yes b. No resize: Unchecked Go back to your main document window and click inside the Top Frame. Make sure that the grey tab at the top of the window says “Top Frame” so you are working in the right area. a. In the Title box, type Top Frame. b. In the Properties inspector, click the Page Properties button at the bottom of the properties inspector section. c. In the background color box, type #FFCC00 d. Click ok – Your screen should look similar to this.

WHILE STILL IN THE TOP FRAME, choose Insert>Image. a. Go to MTComputers\Scook\WebImages0514 and select the logo_mydiskdesigns.gif. b. Save it to your site’s images folder that you just created c. In the Alt text type MyDiskDesigns logo. In the Frames Panel like #14 above, click in the frame labeled mainframe. a. In the Properties inspector: b. Scroll: yes c. No resize: Unchecked Go back to your main document window and click inside the Bottom Frame. Make sure that the grey tab at the top of the window says “Bottom Frame” so you are working in the right area. a. In the Title box, type Bottom Frame.

Web Page Design Frames b. In the Properties inspector, click the Page Properties button at the bottom of the properties inspector section. c. Set the Font Size to 18 d. In the background color box, type #99CCFF e. Click ok – Your screen should look similar to this.

Note – this is how the files should be set up in your panel. >>>>>>>>>>>>>>>>>>>>>>

18. 19.

20. 21. 22. 23.

In Dreamweaver, click in the bottom frame. READ THIS PART VERY CAREFULLY!!!!! You are figuring this out on your own. I am NOT going to show you how! a. In your MyDiskDesigns file that you worked on Tuesday and Wednesday, go to the Privacy.html page that you created. b. Copy the privacy text from the MyDiskDesigns file. c. Paste the text into the bottom frame of the My Frames Site file. Format the text for the words Privacy Policy only to 36 pixels bold. Your screen should look similar to this. SAVE ALL. TURN IN YOUR FILE!

Web Page Design Frames LEFT AND RIGHT FRAMES 1. Open Dreamweaver and create a new site called “YourNameFrames”. 2. DO NOT SAVE THE PAGE YET! 3. Choose Modify>Frameset>Split Frame Left. a. This puts a vertical frame divider through your page. b. What you are actually seeing are three pages in one: the frameset, the left frame, the right frame. 4. Choose File>Save Frameset As and save the file as frameset.html. This frameset will be the container for the other HTML files. 5. Click inside the left frame and select File>Save Frame As and save the file as left.html. Make sure that you are saving it in your root directory with your index.html. 6. Click inside the right frame and select File>Save Frame As and save the file as right.html. Make sure that you are saving it in your root directory with your index.html. 7. Select Window>Frames to open the frames panel. This panel will give you a preview of your frameset.

8. In the frames panel click on the outermost border. a. In the toolbar at the top of the document, enter in the Title Field: My First Frameset b. Press Enter. 9. Choose File>Save All. Part 2 – Coloring Frames 1. With your index.html still open, click on the left frame and make sure you see the BLINKING CURSOR. a. Choose Modify>Page Properties. Set the: i. background color #993300. ii. text #FFCC33. iii. links #FFFFCC iv. visited links #CC9900 v. active links #FF0000 b. Click ok

Web Page Design Frames 2. a.

b. 3. a.

b.

4.

Click on the right frame and make sure you see the Choose Modify>Page Properties. Make the: i. background #FFFFCC. ii. text #000000. iii. links #990000 iv. visited links #669900 v. active links #FF0000 Click ok Click on the middle dividing frame border. Make sure that the left frame in the property inspector is selected and enter the value 150 into the column setting in the property inspector. Press enter.

BLINKING CURSOR.

We will now turn off the dividing borders. a. In the property inspector choose borders: no and border width 0 b. Choose File>Save All

Web Page Design Frames Part 3 – Links and Targets This exercise will show you how to insert a link into the left side page of the frameset. 1. Create a new page called tools.html. 2. The page will look like this. a. The images are under MTComputers \Scook\WebDesignImages\ b. You will need to insert the header on the page and type heading 1 for Bonsai Tools. c. You need to insert a table to hold your images. The width of the columns will be approximately 260. d. The description of the tools will use heading 2, Arial font, and black.

3. a. b. c. d. 4. a. b.

c.

d.

Go back to your frameset.html. Click inside the left frame and make sure you see the blinking cursor. Type the words Bonsai Tools. – Arial, Size 16 Highlight the words that you just typed and in your property inspector click on the folder to the right of the word link. Browse to the page that you just created called tools.html. Click open – Bonsai Tools should now appear as an underlined link. Make sure that your frames panel is open. If it is not, choose Window>Frames to bring it up. Notice that it reads (no name) on both the right and left sides? Click on the left side and it will become outlined with a dark line. The property inspector should now display the setting for the Frame Name field. Enter left. Click on the right side and look at the property inspector again. Enter right into the frame name field. The frames panel should now read left and right in faded letters.

Web Page Design Frames Select the words Bonsai Tools in the left frame. a. Click on the arrow next to the target field to access the pop up menu. b. Select right from the menu. c. The word right should pop into the target field. 6. When you preview your page in a browser and click on the link in the left frame, the tools.html page will appear in the right frame. 5.

Part 4 – Adding a Background Image Adding a background image is similar to coloring a background of each frame. There can be alignment problems when you add an image and the frameset can make the background image so the entire image does not show. This exercise will show you how to keep that from happening. 1. Click inside the left frame and make sure that you have a blinking cursor to the right of the words Bonsai Tools. 2. Choose Modify>Page Properties. a. Click the browse button to the right of the background image field to browse to your images folder. b. Select cascade.jpg. c. Click open and then OK in page properties. d. The image should appear in the left side of the frameset 3. Click inside the right frame and make sure that you have a blinking cursor. 4. Choose Modify>Page Properties. a. Click the browse button to the right of the background image field to browse to your images folder. b. Select cascade.jpg. c. Click open and then OK in page properties. d. The image should appear in the right side of the frameset. 5. Since the image is not even and has been cut off, you will establish the size of the background image. a. Click on the left.html frame again and make sure you see the blinking cursor. b. Choose Modify>Page Properties. c. Click on the browse button to the right of background image to locate the cascade.jpg symbol. d. Make sure that you check the preview images checkbox in the select image source dialog box. e. Notice that the dimensions of the image appear now? Make a note of those dimensions. f. Click cancel twice to return to the document window. 6. In the frames panel, click on the outer border of the pane. a. Enter the value Column: 250 into the Property Inspector and press enter. b. The left column should have shifted a bit to the right. Don’t worry if it doesn’t look exactly right – there are more steps.

Web Page Design Frames 7. In the property inspector, click on the right column icon, at the right of the panel. a. Select Units: Relative. b. Under border width type 0. 8. SAVE YOUR FILE.