Create Your Web template as an Image and export it to a HTML

Well web designing is not my field though, I was engaged in few designing stuff whole last week. Mainly contributing in molding a theme to a web site . The stuff I am going to write is not so new to professional designers but for beginners it will be some help.

In web designing the most important task is to design the site template. In this case some beginners tend to do this by editing and writing HTML codes for all the stuff they want to include, for an example if you want to use some images or a small spacer image to add the shadow effect, what mistake you do is include them using tables or div tags manually. If you are using some kind of an IDE this task will be bit more easy. but yet there is an easer way.

What you have to do is, using Adobe Photoshop or Macromedia (Adobe) Fireworks design the template as an image. Add the pictures as you want. keep space for flash headers/banners. Basically create the whole page as an image. What you have to do next is using the “Slice” tool., Slice the image in to the separate areas where you want to edit.

Example : text areas, banner areas

Then Export the image as an HTML page. (FILE -> Export) and there you get the HTML out put as well as the sliced image peaces. Open the HTML page with you favorite IDE and remove the unwanted image areas and fill it with the same background color as it was in the image. leave the images which you want to add to your page and edit the rest of the page. The exported page is created using a table, so you can easily edit and add what you need in the deign process.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s