Posts Tagged ‘build a web page’

Build a Web Page Using Modules

Sunday, October 5th, 2008

In the same way modular homes are easily assembled using a set of independent sections, or modules, the Web design process can be made much simpler using pre-built elements.

The idea is to create a set of modules that you can pull together for any future design projects. You might use only a few modules per project, or you might use all of them at some point on every page you build.

The basic list of modules you might create are:

- Head

- Body/Table

- External Stylesheet

- Standard Includes

- Menu Blank

Begin by populating your document head with the relevant data, and then save your progress. Then go back and strip away the unique attributes, leaving only the raw tags.

For instance, delete the text between your title tags, and remove the info in your META tags, leaving only the HTML tags in place. Now save this document as head.html; it will look something like this:

< head >
< title > < / title >
< META NAME=”Description” CONTENT=”" >
< META NAME=”Keywords” CONTENT=”" >
< / head >

You have just created a head module you can use as the base for all future templates. And since you saved your initial document you can simply open it back up and continue working.

Use this modulation for any specific parts of a page you think you’ll be using often. As we’ve already indicate above you should set up modules for your page body, including at least one type of table module.

Also you should have a base CSS stylesheet that you can open and begin adding data to for any design project you start. If you use server side includes to parse your menus and Adsense blocks you should also have a baseline code for your includes commands as well.

And of course you should have multiple blank menu modules that you can copy and paste into a new design scheme as you go. This will save you loads of time and allow you to just plug in the custom fields such as button title, page URL, etc.

By having half a dozen or so modules available to you, any design project can be launched quickly and easily. You just open up your selected module files, begin copying and pasting, and soon you’ll have your base template document ready for custom coding.

I have found this simple technique can shave off at least an hour of any Web design project and sometimes much more. And by arming your employees or outsource agents with your module suite you will be able to get more bang for your buck in terms of hired labor.

You can even use the module formula for add-on elements like ad blocks, banner rotators, email forms, hover pops, audio players, and more. In fact the more pre-built modules you have for these elements the more likely you are to use them freely on your Web pages.

It’s easy to get lazy after a couple of hours of coding and decide to skip a few special features. But if all you need to do is open the audio module to get most of the legwork done odds are you’ll follow through with it.

The modulation approach can also be sued with WordPress blogs. You can and should have an “installation notes” document that has your entire ping list, specific plugin settings, Technorati Faves code, and any other standard elements you include with most blogs. This can make the process of setting up new blogs quick and easy, even without the use of expensive management software.

Put these simple ideas to sue in your own design work today and enjoy the immediate spike in productivity they are sure to create.

We would love to help you learn Web design with our comprehensive Web Design Course. We now offer video training as well through our special Gold Member program - Click Here Now to get full details on our video Web design training!

Build a Web Page One Piece at a Time

Saturday, September 27th, 2008

The best tip for beginning Website developers is to take things one step at a time. It’s easy to become overwhelmed by the thought building an entire Website, so just look at each task in the process as individual projects.

Every HTML document consists of two parts, the head and the body. The head contains your HTML title, META tags, and other relevant data. The body area contains the part of your Web page that will be publicly visible. These two distinct parts of your document represent two separate steps in the building process.

You can break things down further by itemizing each major piece in the head and coding these step-by-step. For instance, you’ll enter your title tag details, style sheet reference, and the META tags you have chosen to use.

Do the same with your body. Create your main table or div elements, and then slowly work your way inward.

Save your progress after each tag or attribute you enter. This will allow you to avoid the chaos of having to start over in the event your work is interrupted by a power surge.

Also, you can leave hard return spaces between lines of code in your HTML editor. These won’t show up as extra spaces on your public HTML page, and they make it easy for you to find specific areas when you need to make changes or updates.

And you can use the comment tag to make notes to yourself that will only be visible when viewing the raw code. This is helpful for breaking the document up into more manageable sections.

Through practice you will begin to see the overall document clearly. The initial sense of anxiety and confusion that comes from opening a piece of raw code and trying to find your way around will pass.

Quickly and easily learn Web design with the author’s amazing online course. You’ll be an ace Webmaster in no time with this full-blown Web design course at your disposal.

Building A Web Page Is Easy And Straightforward

Wednesday, June 25th, 2008

Believe it or not building a Web page is not a highly technical process. Sure there are elements that get pretty deep, but if you jsut want to build a Web page for basic purposes there’s not much to it.

Once you know the basics, Website creation one page at a time is a lot like writing into a word processing document. A lot of people hesitate to learn Web design because they fear it’s highly technical, but in truth it’s about grasping a few basic concepts and then typing in a structured manner.

If you have the skills required to read this post, you have all it takes to learn how to build a Web page. My Website Creation Course will give you a complete overview and lesson plan for learning the entire process of Web site design, management, and optimization.