How to Make Layouts for a Web Page
Because much of our communication is done online through social networking sites, email, and personal web pages, it has become necessary that many of us design our own layouts, especially for our personal web pages, not only to show a bit of our own personalities, but also to make our communication experience with others more pleasurable. In just a few steps, you can create great looking layouts for your personal web page.
- Difficulty:
- Moderately Challenging
Instructions
Things You'll Need
- HTML reference book or prior HTML knowledge
- Paper
- Text-editing software, like Notepad
-
-
1
Decide how your web page will function. According to University at Albany Libraries, you should first ask "'What is the purpose of the site?,' Who will be visiting the site?,' and 'How will the site serve the client?'" These questions will help you to decide what information, images, links, and other features you will include on your site.
-
2
Plan your layout by sketching on a piece of paper what you would like to see on your page. You will want to draw boxes and label them according to the type of information they will contain. For example, you might draw a long rectangle across the top of your page and write in it "Page header and company logo." Repeat this process, labeling each box.
-
3
Open your text-editing software and begin by placing the HTML element at the top of the page, followed by the head, title, and body elements and their closers. Between the body opener and closer is where you'll write the layout code.
-
4
Start your layout by opening a table. This table will be table 1, into which your other tables (the boxes you drew on your paper) will fit. The top row of your first table will be the place for your company logo and/or page header. Close this row and add another row for the table that will hold your content.
-
5
Create a new table. This will be table 2, which will contain your links table, your main content table, and any other table you want to include. Simply nest the smaller tables inside of this new table, making sure to keep table 2's row open until you are finished adding tables, then close both table 2 and table 1.
-
6
Save your layout as a .html and preview it in your browser. If you are not satisfied with how your page looks, edit in Notepad, save again, and preview. When you are satisfied, you can upload this to your site, using your favorite FTP program.
-
1
Tips & Warnings
There are many books available that will help you on your way to learning HTML and other types of code. Visit your local bookstore.
Always preview your page before you upload; this way you can save time fix silly mistakes.
Learn CSS; this will take your web design to a higher level by giving you the tools you need to format multiple pages at once with the same formatting. This helps make your site more professional looking.
This article covers only the bare bones of a layout; it is not meant to teach formatting and other personal preferences for page layouts.
