GET AHEAD

Setting up your own website: Designing a homepage

By Ankur Jain
September 14, 2007

Part I: Hosting options
Part III: Design errors to watch out for

What affects your online presence most, either as an individual or as a company, is, perhaps, your website. Your home page is the one thing that defines you most, for the millions of strangers online. Today, with so many free options for web-hosting, it's almost a crime not to have a functional and regularly updated site.

We will walk you through the basics of designing a simple site. You need to decide where and how your site will be hosted. All the millions of options you have can be categorised into either free or paid solutions. Once you've decided on the type you want, you can go ahead and start planning the look of your site.

A common misconception is that coders who know HTML and other web design languages can only design sites. In this age of software empowerment, anyone to do anything: Web design has not been spared. Design programs such as Microsoft FrontPage and Macromedia Dreamweaver make sure that a good design is simple to achieve.

Frontpage

FrontPage has always had the distinction of being really easy to use, but has generally been less respected as a web design tool by hard-core designers. However, for those just starting out with Web design, there is no simpler tool. As with most Microsoft products, you'll take almost no time to get to grips with the interface.

Let's take a look at MS FrontPage:

~ When you run FrontPage, it starts off with a blank page.
~ You can choose to build a site from a template. There are several templates available -- choose one that matches your needs.
~ We chose to build a 'Corporate Presence' site.
~ Change the logos and add suitable text where clearly marked, and save each page.
~ Check the pages you've designed in different browsers by going to File > Preview in Browser.
~ Once all the pages have been edited, upload the entire web folder to your hosting server.
~ Check all the pages again, and your site is done.

Though this sounds a little too simple, the fact is FrontPage is designed that way, so the easiest way to experience its simplicity is to install it and try it yourself.

Web Components:

Web components in FrontPage are very important. FrontPage calls Flash movies, hit counters, buttons, etc 'Web Components'. The simplest way to see what each does is to open a blank page, insert one of each component and then preview the page in your favorite browser.

Pictures:

Inserting a picture in FrontPage is very easy: just go to Insert > Picture and choose the appropriate option.

Themes:

Use a theme to get a predefined colour scheme and save your time trying to think up one.

Import:

If you already have a site, and are looking to modify the existing site rather than building a new one from scratch, you can choose to import your site by going to File > Import.

Dreamweaver

Macromedia Dreamweaver is the preferred professional Web design tool. Though it is not as easy to use as FrontPage, it is considered to be much more powerful. Of course, this does not mean it is impossible to use, and it is actually quite simple to accomplish basic tasks, just like in Microsoft FrontPage.

When you run Dreamweaver, you are presented with a blank page. You can just close that page and go to File > New, and in the 'New Document' dialog that pops up, choose 'Page Designs' from the 'Category' pane on the left. You will see a long list of options in the 'Page Designs' pane in the middle, and clicking on one will show you a preview of what that design looks like in the 'Preview' pane on the right.

Choose one that suits your needs for the page you're designing and click 'Create'. Just like in FrontPage, you are shown a page with blank images and dummy text. All you have to do is edit the text and images by double clicking on them.

Once you are satisfied with your final page, press [Ctrl] + [Shift] + [S] and choose where to save the web page. Create all the pages you want for your site and save all pages in the same folder relative to the index.html page. If you need to make new folders, do so and make sure to keep all images in a separate 'images' folder. This will help you sort your data more efficiently.

Once you are done creating all the desired pages, make sure to right-click to see the many options easily available to you. Preview all of them in a browser -- you can do this by pressing [F12]. The last step is to upload all the pages and images to your web server. Remember to keep all relative paths exactly the same as they are in your root folder (where 'index.html' is saved) on your hard disk.

Inserting Objects:

In Dreamweaver, you can insert a large variety of objects into the current page. Just click on the 'Insert' menu to see the list of available objects. Once done, don't forget to save your page.

Right-click:

Dreamweaver's right-click menu is quite exhaustive. Right-click anywhere on the page to see the long list of options available.

Tables:

Drawing tables is easy in both Dreamweaver and FrontPage. All you need to do is look for the 'Insert Table' option in the 'Insert' dropdown menu.

Task Panes:

In order to use Dreamweaver more efficiently, you'll need to learn to use the various task panes provided on the top, bottom and right-hand side. The best way to learn is to use each task pane and get the hang of the software.

Covering both the tools in detail would require a big fat book. Just start using these tools -- look up Internet tips and tutorials, and basic information about them for help.

Part I: Hosting options
Part III: Design errors to watch out for

Ankur Jain

NEXT ARTICLE

NewsBusinessMoviesSportsCricketGet AheadDiscussionLabsMyPageVideosCompany Email