|
|
Updated: 03/27/2004 12:09:58 PM (Broken Link? Report It Here) |
|
|
Design Area
What can you learn from Design Tutorials? Design tutorials are nothing more than one or more people passing on what they have learned from their own experiences or research efforts. My design tutorial will pass on to you what I have a learned about website building through a lot of trial and error, lots of research and loads of hints and tips I have received from visitors such as yourself. Membership requirements for Giz Gears. This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.
No matter which layout style you choose, a webpage should always have three parts: 1. The header - Usually this section consists of nothing more than image files you create for your webpage title and your webpage bar, or horizontal rule. Occasionally, you will also see logos, navigation menus and welcome statements in the header portion of the page. Logos are often placed at the top of every page on a web site and linked back to the main page. Notice the webpage title and six buttons I placed in the header portion of this webpage. 2. The body - Where the bulk of your text information goes, plus occasional image files that are used to support your subject and make your web page more interesting. Sometimes you will see a navigation menu in the body. That is one of the distinguishing traits of the one-column body with contents style. All this text you are reading is in the body portion of this webpage. 3. The footer - Where you will most likely find navigation menus, copyright information, contact information, counters, banners and a horizontal rule. Horizontal rules help break up web page sections and make them easier on the eyes. The eight buttons and copyright information you see at the bottom of this webpage is considered my footer section.
A website can consist of anywhere from one webpage to several webpages. The only restriction you have is on the amount of space you are given by your web space provider. If you have a lot of content though, you want to consider breaking the content up into different webpages instead of placing all of it on one webpage. This will help keep your page loading time down; as well as make your website better organized.
The two major styles of HTML webpage layouts are frames and non-frames. Non-frame layouts require the entire webpage to reload when a link is clicked to go to a different webpage. Frames allow webpages to load into different locations of the web browser without having the entire webpage reloaded. Working with non-frame styles is very easy and straight-forward when it comes to coding and navigation. The most difficult concept in working with frame styles is ensuring the navigation coding is correct otherwise your webpages load in some very unexpected ways.
There are several different types of non-frame layouts that can be used in almost as many combinations: 1. One-column 2. Two-column 3. Three-column 4. With and without sidebars 5. With and without contents 6. With and without contents and sidebars 7. Left-aligned 8. Center-aligned Perhaps the most popular layout is the one-column layout that is aligned either to the left or in the center. The next most popular layout is probably the one-column layout with contents.
There are approximately 10 different types of frame layouts: 1. Banner and contents 2. Contents 3. Footer 4. Footnotes 5. Header 6. Header, contents and footer 7. Horizontal split 8. Nested hierarchy 9. Top-down hierarchy 10. Vertical split Perhaps the most popular layout is the banner and contents layout with the contents layout running a close second.
If you are new to website building, I strongly suggest you stick with the non-framed style and the simple, one-column layout. If you have a little experience with website building, you may want to progress to a more complex layout while remaining with the non-framed style. More experienced website designers may wish to move on to the frame style if they are looking for a change of pace. There are a great number of highly-experienced website designers that never use the frame style. Not because they don't know how to work with them, but because frames raise many issues that go beyond just navigation and building them. Therefore, they require a lot of considerations in their use that are not needed when using the simpler non-frame styles. To give you an idea of how versatile a webpage layout can be, consider this concept. All the redesigned webpages within The Giz-Net Network are built using the frame style with a modified version of the top-down hierarchy layout. The top-down hierarchy style is comprised of three sections with the smallest section at the top and the largest section at the bottom. I modified the layout so the middle section is the largest and the bottom section is usually the smallest. I have decided to use the one-column layout with a mix of left and center alignment for the website we will be building in this tutorial. It will have the traditional header, body and footer portions clearly lined out so you won't have any trouble seeing where they begin and where they end.
So far we have the following items for our website: 1. Our content idea - My content is a dedication webpage to my favorite comic book hero ... Storm from The X-Men. What's your content? 2. Our basic building tools - I will be using Microsoft's FrontPage as my HTML editor and JASC's Paint Shop Pro as my graphics editor. Which will you use? 3. Our web space - I chose Yahoo! GeoCities as my new websites home. Which one did you choose? 4. Our webpage layout - I chose the non-frame, one-column layout with a mix of left and center alignment. Which layout style did you choose? What do we need to accomplish next? We need to create basic image files: a title or header, a horizontal rule, a navigation button set (home, back, next, top, email, links, sign guest book, view guest book), bullets, a background, a copyright and/or logo image. The next step in the tutorial is called "Creating a Basic Image Set".
Contributions for Giz Gears. If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum. |
||
|
|
||
