Demo 2

Webpage Divided into Rows

Instructions:

This webpage was is designed to split the page into two parts by rows. This is demonstrated on http://www.public.asu.edu/~pbaluch/demo2.html. To create this type of page requires the formation of three pages where two are layered into one organizing page. The main "organizing" page is the index page that will divide the page into rows. To create this page open a blank webpage and paste the following code into the html section after the </HEAD> section:

<FRAMESET rows="80%,20%">

<FRAME src="http://www.public.asu.edu/~pbaluch/pg3.html" name="frame3">

<FRAME src="http://www.public.asu.edu/~pbaluch/pg4.html" name="frame4">

</FRAMESET>

<NOFRAMES>

The 80% indicates that the top row will take up that much space of the page and the lower row will be 20% of the page. You can change these percentages to how you want your page formatted. You can even divide the page into multiple smaller rows if you want. In the next part, the webpages that fill those rows are listed. These are individual pages that are created and given their own address and are referenced by the index page to compose the final image. In my example, if I want to change out the top row because I pressed the "protocol" button in the lower row I will have to create a protocol page that lists the frame outline above but replace pg3.html with a new page that will have my protocol data. So I now have a protocol.html page (lists frame organization), a pg_.html page (lists protocol data) and the pg4.html (buttons) page. This combination will create the protocol page when the protocol button is pressed (the protocol.html hyperlink will have to be inserted into the button).

Repeat this procedure with all of the button links to create new page images. Once you become proficient with this technique and with the columns that work the same way you can be creative and form different combinations with both columns and rows. Some of the useful web design links that I have listed demonstrate this technique and how to divide the rows and columns and organize them the way you want them to appear (For example: Voodoo's Page).

Home Page | Sound/Movie Clips | Graphic Effects | PDF Files | Webpage designs | Create Effects

Website maintained by Page Baluch: debra.baluch@asu.edu

Last updated 2/5/2000