Showing results for 
Search instead for 
Did you mean: 

General: Building a Graphical Web Interface


General: Building a Graphical Web Interface

Tutorial: General : Building a Graphical Web Interface
With all Broadband Home accounts, 250MB of webspace is supplied and this tutorial will help you with using it and creating a simple website. Software used in this tutorial:

  • Microsoft Frontpage (Notepad can be used)
  • Jasc Paint Shop Pro (version 7.0 - later versions can be used)

Firstly, let us start with the basics. A website consists of a selection of pages and there are many different types of website out there. There are personal websites, business-related websites (e-commerce, business portfolio sites, etc). Before you begin, you will need to decide what your website is about, it could be about a hobbie that you have, a website showing your CV and a biography of yourself or something different. The programming language that is used to create a website is called HTML. When learning to create a website it is always best to start off by learning some basic HTML and using Notepad to create your site, but you can also use a What-you-see-if-what-you-get editor (WYSIWYG) such as Microsoft FrontPage or Macromedia Dreameaver. What is good about the latest versions of Macromedia Dreamweaver and Microsoft Frontpage is that they are somewhat a hybrid editor because you can code the pages by just composing them like you would do in a word processor or you can type the HTML directly in to the software. This gives a great level of flexibility.

In this tutorial, Microsoft Frontpage 2002 will be used, but Notepad or Dreamweaver or another web editing package can be used to achieve a similar effect.

There is another side to website creation though, and that is the graphical element of it. Any backgrounds, logos or navigation buttons that you see on websites will have been created using a web graphics package. In this tutorial I intend to show you how to design a graphical website interface and tweak it to your needs. Jasc Paint Shop Pro will be used for this, but Adobe Photoshop & ImageReady could also be used.

Creating the main image
The first thing that we need to do is to create the main image that will be used for the website. This should be about 750 pixels by 540 pixels so that the website will work on monitor resolutions of 800x600 and above.

Make sure the width and height is set in pixels and you can just leave the background colour as transparent for now, as this can be changed later.

Now, after creating the new image file in Paint Shop Pro you will need to draw the main shape of the website on to the canvas. Do this by selecting the “Preset Shapes” button on the standard toolbar. Then, select a “rounded rectangle” from the list, making sure “antialias” is ticked, and set the line width to 2.

Before drawing, remember to specify the fill colour and stroke colour of the rounded rectangle. This can be done using the “Colour Palette” toolbar.

To specify the stroke colour of the rectangle (the colour that the edge of it will be), we need to click on the top box and choose a colour from the colour selector. To specify the fill colour of the rectangle we would do the same thing, but we would click on the lower box. However, I have used a gradient here for the fill colour to make it look slightly more interesting. To do this, click on the arrow next to the bottom box, and select the gradient icon. Then select any gradient you wish to use (quite a simple one preferably) and then use it or modify it to your taste.

This site needs to have a logo or else no-one will be sure what it is about, or who made the site. To do this, make a new Rastor layer by going to Layers>New Rastor Layer> and then naming the layer. Then click on the layer in the “Layer Palette” (if this floating palette is not enable, go to view>toolbars> and enable it). There are many methods you can use to create a logo but, for simplicity’s sake, we are just going to use a preset shape and some text for our logo. In my case, I drew selected a “party hat” from the shape list and clicked the “retain style” to keep the fill colour and border it had in the list and drew it in the top left hand corner of my rounded rectangle.

I then added some text to the logo using the “Add Text” button on the standard toolbar. Remember to keep the logo to a reasonably small size but not too small that it is not noticeable.

Then I selected “Layer 1” on the Layer Selection palette and drawn a rounded rectangle with equal settings to the large rounded rectangle. This should turn out like this:

The creation of the master image is now almost complete. We just need to save it as the master image (as a .psp file so that it can be modified later), and then we will be ready to slice the image and add content to the site in Microsoft Frontpage.

Slicing the image
Now, to slice the image in to HTML tables, go to file>export>image slicer. This screen should appear:

Now, click the knife icon which is the third in the row of buttons along the top of the image slicing screen. Then draw gridlines that separate all the curved edges from the straight edges. Make sure your graphic looks like this:

Remember, just draw gridlines using the knife icon and as long as it looks like the screenshot above you should be ok. Then after you have done this, click “Optimize Cell” on the bottom left handside of the image slicer window. A new dialog box should then appear, make sure the colour setting is set to “Optimized Octree” and that you use current “existing image and layer transparency” in the transparency tab. Then close that and click “save as…” in the image slicer to save the image’s new HTML file – make sure to put it in a new folder where you will put the rest of the site’s pages, and make sure to name it “index.html”.

Modifying the HTML file produced
Now close paint shop pro, and open Microsoft Frontpage and click “Open Web” on the toolbar. Then select the folder where you save the index.html file. After you have done this, click open. Then, click the “Open” icon in the toolbar in the main Microsoft Frontpage window to open the index.html file. Then select the main table cell (the one in the middle), and delete the image there. After you have done this, right-click on the table cell and click properties in the menu that appears. Then, make the sliced image that you deleted from that cell the background of it (this is so you can add text).

The finished site can be seen here.
Related Links

Tutorial written by Lowry.