|
|
|
|
|
|
Creating Web Pages with Macromedia DreamWeaver MX 6.0 for the Mac (Without Knowing HTML!)
Edition 3: Frames – What they are and how to Use them to Spruce up your Webpages
Frames : the main component in creating navigation in web pages
First off, let’s define frames. Frames are components that divvy up your one single webpage into a bunch of subpages. First off you’ve got tables – this guys create a bunch of organized elements on your page called table data cells. Tables are all fine and dandy, but if you want, say, a navigation bar, to be fully and totally accessible from any area of your page, at all times, then you have to bring in the Frame element. The frame component of html allows you to specify areas of a single page as individual subpages that each have there own <html>, <body>,<header> tags – the whole deal! The beauty of frames is that whatever part of your html page is defined as a frame is essentially sectored off, and will remain visable despite how much the user scrolls on the main page. Well, here we go off to Dreamweaver to figure out how to create this wonderful element of frames!
You’re going to new find the toolbar – this time, instead of going to the Table component of the toolbar – fire up the Frames component. After doing this, you’ll see an array of different frame arrangements. There are set-ups for frames to be allined on the left, the right, centered, etc. There is even a set-up for the frame to be with a nested frame – allowing you to have multiple frames on a page. This can lead to extremely complex and convoluted page structures – which most certainly allows for much more control and precision within a page.
Using Frames: Nested or Unnested
Okay, first off to create frames you want to think about what you are going to put on your site. That is, decide on how your site deisgn layout should appear. Your reason for using frames should be that you want to create a page that has one (or atleast one, for the case of nested frames) stagnant, non-moving consistent area of the page. You do this buy dragging – this is so simple – the main frame layout you want for your page to the design workspace. (If these introductory tasks seem unfamiliar to you, you should review the First Edition: Introduction to Dreamweaver of the Dreamweaver Tutorials) Make sure you are in Design View, of course, by clicking on the Design View Tab, which is the third menu tab from the program’s toolbar layout menu as shown here:
Let’s start off with creating a framed page that has the bottom frame formation. This is located under the Frames tab (which you should have accessed by now) and is the fourth formation from the left. Simply click on the "Bottom Frame" frame formation tab, and then you will be able to view, in your "Design View", the bottom frame formation. Note that this page’s formation had the center as turquoise blue and the actual – frame part of the page as white. If you look down the line of the frame formations you will see a huge amount of nested frame options including "Left and Nested Top Frames", "Top and Bottom" Frames, etc. - the whole deal. But for now we are just going to focus on simple, but still powerful, "Bottom Frame" formation. Actually, the bottom frame is one of the most common formations of frames where you’ll see pages because you can use it for navigation bars most easily. Some site webmasters decide to put navigation bars on the left, the top, wherever, but for instructional purposes we are going to use it with the bottom placement. The first thing to do is to examine your "Design View" - you should see a cryptic organization of rectangles and the usual window size information in the bottom right corner. This information is used, quite nicely in fact, to set the size of your window. For introductory purposes setting your window size isn’t all that necessary, but when you begin to create sites that have a lot of design emphasis, and want to focus less on scrolling, and aim for wanting to have all the information on a single page, window size becomes and issue. Your "Design View" should look like this:
Click on the bottom panel of the design view and you’ll notice that the header at the top of the page turns to "Untitled Document(Untitled Frame). This is because the frame is actually treated as as mini-webpage, or nested web page if you prefer, and if you close your document Dreamweaver will actually ask you to save the pages frames! So go ahead and click in the bottom frame.
Creating a Navigation Bar
The best way to create a navigation bar is to use a table in the frame. I know this sounds complicated, but if you understood last lesson (Creating Tables) you can plug that information in and easily apply it to this lesson. Click on the "Table" icon under the "Common" Tab. Refer to Edition 2 to see how to insert a table from lesson 2 – creating tables. After specifying your table’s column and row attributes, select the Text ¬ Align¬Center menu option, to center your table. Now simply apply the image application from the Edition 2 to create the final touches on your table. Make these images hyperlinks (see Edition 1) on how to do this, and you’ve got yourself a neatly centered, organized color navbar! Create material for your main <body> page (from the first edition) and your frame page is complete!
Saving Your Frame Page
Just a final note to creating a frame page – you are going to have to create a saved file for the individual frame(s) on your page and for the actual frame page. A good solution to all of this naming and saving mumbo-jumbo is to put all the compenents (i.e. the frames and the body pages) in a single folder within your entire site folder and by giving the pages and frames similar names.
For Questions, Commetns, and Conerns Contact the Webmaster
SpyderByte Corp.
Colorado Springs, CO 80903
|
|
|
|
