CS1c Handout #5 11/01/2005 Tai-Jin Lee HTML Layout and Design Layout and design of a webpage is of utmost importance. Without at good layout and navigation system, webpages are just plain bad. Navigation One of the most important aspects of a webpage is how a user will go from one page to the next. Where should people look to find another part of your webpage? Every page should link to all most other pages (especially main pages), unless it is specific to only one or two other pages. Hierarchy The hierarchy of design should be something close to this: The home page (index.html) and main pages should always be accessible, while subpages need not be accessible by all pages. File hierarchy So you need to make sure you know where all your files are going to be so that you can edit them with ease. So in your WWW folder, you will want to create new folders. This can be set up in many different ways. My file hierarchy (WWW folder):
File Hierarchy (cont d) As you can see, I personally put all my html pages directly on the WWW folder, and have all images/javascript includes/css pages/pictures/music in their own folders where the HTML files will find them. There are other ways of organizing files as well, such as giving each html file its own folder, and include all of its needed things within the given folder. Find a good way to sort your files otherwise you ll be in a mess when your webpage becomes somewhat sizeable. Layout A good layout allows good navigation. So we need to figure out how to compose layouts so that people can surf your webpage easily. Navigation bar Most websites implement what we would call a navigation bar, where every page has some sort of way of getting to other pages. Some examples: As you can see, navigation is quite varied. Some websites use a dedicated area that will always be navigation whereas other websites use a navigation system that is more embedded into the webpage. Either one works, as long as the user understands which are links to outer pages and which are links to inner pages.
Forms of Layout In HTML, there are many ways to code this kind of layout. The first way, and somewhat obsolete way, is using frames. Frames can be in columns or rows. These are a couple way frames can be used: In general, frames are not used because they don t offer too much. But here is the source code for such frames: <!--For columns--> <html> <body> <!--Can specify exact pixel number col sizes--> <frameset cols="20%,80%"> <frame src="nav.html"> <frame src="body.html"> </frameset> </body> </html> <!--For rows--> <html> <body> <! Can specify exact pixels number row sizes--> <frameset rows="10%,90%"> <frame src="nav.html"> <frame src="body.html"> </frameset> </body> </html>
Forms of Layout (cont d) The second way is to use headers and footers as a standard navigation area. The way to do this is to create a table that has header and/or footer cells where you can put the navigation. To separate your links, you can use a variety of text separators, if you don t want to use an image. Some ASCII characters such as and ~ work pretty well for separating links A third way to do a navigation area is by using tables to do what we did with frames. Just try to judge how many cells you will need for each area. Generally, you can do a lot by just having a table layout such as: HEADER NAVIGATION BODY FOOTER Making different number of cells in each row requires a <td> tag attribute called colspan. In order to make the header span 2 columns, you would use <td colspan=2>header</td>
Forms of Layout (cont d) The table above would have code as follows: <table> <td colspan= 2 >HEADER</td> <td width= 100px >NAVIGATION AREA</td> <td>body AREA</td> <td colspan= 2 >FOOTER</td> </table> Another good table attribute to know is the width attribute, as included in the above code. You can use width as absolute pixel widths as in the code, or as percentages: <td width= 20% > Using tables is a very simple and easy way of laying out a page. There are more advanced techniques in organizing the layout of a page, such as using CSS s. We will go there if there is time later. For now, frames, tables, or just plain headers and footers can help you define a shape and structure to your website.