Web Design the Wright Way: Web Layout

If you already have your web design software configured and your web hosting service in place, you are ready to proceed with your first web design. For the purpose of this article, we are using Adobe Dreamweaver for our software.

To get started, click "New" in Dreamweaver, and select "html". You should have a blank white page. The first thing I recommend is to set up everything in a table. This ensures that your content is displayed the same way on most every monitor that views your site. To set up a table, click "Insert" and then "Table". Select one row and one column, and enter your pixel width. I like to use a standard pixel width of 800 or 850. This seems to work well on most monitors. Click "Ok".

The first thing I like to do while the table is still highlighted is to choose "Center" in the "Align" section in the bottom toolbar. Next click outside the table so that your cursor is at the very right of the box. Hold down your shift key and hit "Enter" on your keyboard. Insert another table just like you did before. Center this one as well. Now go back up to your first table and place your cursor again on the far right, outside the table. Hit your "Delete" key on your keyboard to delete the empty space between the two columns. You should now have two tables the same width, one on top of the other. Repeat this again to make one more table below these two.

Now, you have three tables. This is your basic web design format for your header, body, and footer. For the purpose of this article, we're going to place a logo and horizontal buttons in the header. First, let's just make an easy logo using a great site called CoolText.com. Simply choose your style, add your text, and save! Now insert this image into your header. To do this, click in your top table, center your cursor, and select "Insert" and then "Image". Browse to your image and select it. If it is not already in the correct folder, it will ask if you want to save it to the right one. Be sure to click "yes" on this one!

After you have placed your image, hit your "Tab" key on your keyboard to insert a new row into your top table. This row is where we'll place your navigation buttons. In this row, right click, choose "Table", and then "Split Cell". For this first web design, let's split it into 5 columns. In each column, name your pages. Let's use "Home", "About", "Photos", "Contact", and "Links". This will give you a good start. Center your text in each of these columns.

Now we'll link each of these to your pages that we'll design later. To link, highlight the text you wish to link, and enter the link in the "link" section in the bottom toolbar. All of your pages will be in the format "http://www.examplesite.com/examplepage.htm". Link your first text, "Home", to your main URL. This one will not have the ".htm" at the end. Next link your "About" text using the format in the example above. Your link should end with "About.htm". Do the same for "Photos", "Contact", and "Links". Remember to use all lowercase letters in your link because your pages will be case sensitive!

Great job, setting up your header! This is the first step in creating a quality web design that will allow visitors to navigate freely within your site. Giving your visitors something they can count on is a very important step in securing their business!

Seed Newsvine

Bookmark this article in your preferred program

Comments

Add Comment

Popular Articles in this cathegory

This article is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.