Get tooled up for the internet

Designing, creating and maintaining your own web site is now well within the reach of all Windows Middle East readers. Let us guide you through the options.

  • E-Mail
By  Andrew Picken Published  July 22, 2003

Introduction|~||~||~|Surfing the internet can be a complete washout sometimes, especially when faced with poorly designed web sites, which are about as easy to navigate as the Kalahari desert. Think you can do better? Well you probably can and this workshop will show you how simple it is to build your own web site, completely from scratch.

The first thing that you need to get to grips with is planning, though in truth, a web site should always be viewed as a perpetual ‘work in progress’. Determining your audience and then organising the site for their benefit, as well as easy maintenance, is crucial to the success of your project. Developing the content for your site is another important planning consideration and you need to take into account that your visitors may not want to be bombarded with fancy graphics and hordes of text. Also consider the sensitivity of the content that you decide to include, if your e-mail address is on the web site then you will be more exposed to those unscrupulous people who mine web sites for e-mail addresses for spamming purposes.

No matter how well organised and interesting your content, graphics set the tone of any internet page and will create the best first impression. A well designed web site uses graphics sparingly and also repeats key design elements, such as the same coloured border, throughout the site to create a sense of continuity.

It makes sense to display large graphics, such as photos, in a manner so that visitors can decide if they want to see them or not. The best way to do this is to make a “thumbnail” or miniature version of the graphic, which links to a larger version of that image. The thumbnail gives readers a preview; if they are interested in seeing the larger version they can click on the thumbnail. For properly developing and editing images it might be worth investing in software such as Adobe Photoshop or Paint Shop Pro.

It’s important to remember that the best designed web site may look radically different when viewed on different computers that use different web browsers. It is possible to create separate versions of your pages, tailored to different browsers, or use programmed scripts to detect the different browsers, but this is costly and time consuming so just keeping your site simple would be the best bet. Another logical move is to test your web site with a number of different browsers on different computers during the development stage.

Once you have planned your site and created the content, you will need to convert your information into an internet friendly form, converting your text documents into Hypertext Markup Language (HTML). This language is at the kernel of web sitebuilding and is essentially a set of special codes referred to as ‘tags’ which instruct a web browser how to specifically display a hypertext document.
||**||Introduction Continued|~||~||~|
For the purposes of our workshop we used Macromedia Dreamweaver but plenty of other software packages exist on the market, including the popular Microsoft FrontPage. The advantages of software like this is that you don’t need any programming knowledge yourself, as it’s possible to construct a site solely using graphical interfaces.

As you get more confident in your designing skills then you may want to consider some of the more advanced design features used by professional web designers. CGI scripting, Flash animation and Java scripting have all evolved from HTML but with a strong emphasis on the interactive features you find in most web sites today. It is possible to use these languages simultaneously with Dreamweaver and what you are doing is essentially building up different layers of interoperable code.

It’s important to keep your web site up to date and if you want people to return to the site then someone will have to add new content, update existing material and answer any e-mails. For a small site, this can take as little as two or three hours a month. Also, there is no point in creating your masterpiece if nobody knows about it, get your site noticed by registering with the major internet search engines.

When you have finished all your development work offline, it is time to take the plunge and go online. If you’re just starting out, or you have a relatively small site, we recommend that you go with a free hosting service, such as Yahoo’s GeoCities. These are completely free but they do have server space and bandwidth constraints that might become an issue if your web site suddenly becomes very popular. A web site with up to 7000 visitors each month, will typically require around 1GB of data uploading from the hosts server.

So now you have the background to putting pages onto the internet, let Windows now take you through a step-by-step guide to actually building your own web site.
||**||Steps 1 and 2|~||~||~|
Step 1
Getting started in Dreamweaver is fairly straight forward and after installing the application, there are a number of tutorials available that can guide you through, step by step. Dreamweaver provides you with the option to build your pages either completely by programming the code yourself or through its visual authoring tool. This tool is ideal for beginners because it doesn’t require any programming knowledge.

Again for simplicity’s sake, we used the visual authoring tool to create a static web site that consisted of only two linked pages. It certainly would not win any prizes for aesthetics but it did only take thirty minutes to create. The best approach to take is to create and edit pages on your PC before uploading copies of those pages to a remote web server to make them available on the internet. This is by far and away the simplest method for beginners but it is possible to use Dreamweaver in other ways, such as running a web server on your local computer, or uploading files to a staging server.

Step 2
The next stage involves shaping the definition of your site and its important to get this right or you will create problems for yourself at the later stages. After setting up what folders you’re going to be saving your work into, go back to the main page and then choose New Site from the Site menu. The first screen of the Site Definition Wizard appears asking you to enter a name for your site. In the text box, enter a name to identify the site within Dreamweaver. The next screen asks if you want to work with a server technology, select the No option to indicate that the site is a static one, with no dynamic pages.

Next, select the option labelled, “edit local copies on my machine, then upload to server when ready.” The text box allows you to specify a folder on your local disk where Dreamweaver should store the local version of the sites files. It’s easier to specify an accurate folder name if you browse to the folder rather than typing the path, so click the folder icon next to the text box.
||**||steps 3 and 4|~||~||~|
Step 3
Now that your site is set up, you can set about creating the actual web pages to populate it. When you start Dreamweaver, a blank HTML document is automatically created, before you proceed, make sure that you close this document. Next up, choose New from the File menu, in the category list on the left select the Page Designs category. The list in the middle column of the dialog box is relabelled Page Designs. A list of pre-designed page designs appears, there is a wide selection but for our purposes we chose the item named ‘Text: Article D with Navigation’. If you prefer, you can create a page using any of the other provided page designs, or create a page with no preset design by choosing an item from the Basic Page category.

Ensure that the Document Radio button is selected in the lower right of the dialog box and then click on Create. The page is filled with placeholder “Lorem ipsum” text to show how the page design will look when real text is added to it. Save your document, using any filename, but just ensure it has the .htm suffix.

Step 4
For this workshop, we deliberately chosen the simplest path in terms of layout but as you will discover, designing web sites can really get your creative juices flowing. The predesigned pages moreover provide a starting point and are unlikely to exactly match the layout you need for your own pages. Modifying the layout of a page is straight forward enough using Dreamweaver’s layout tools. The scope for changing the look of your pages is almost limitless and one of Dreamweavers endearing qualities is the abiltiy to learn through ‘trial and error’ without any fear of destroying your work permanently.

One of the first sensible steps to take is to remove the layout elements that you don’t need, such as removing unnecessary tables and cells. It is also possible to animate layers, add image placeholders and also adjust the widths of table columns (using Dreamweaver’s Layout view) to make everything fit nicely. Another way to change things around is to go to the Modify menu and choose Page Properties, this allows you to adjust text and background colours among other things.
||**||steps 5 and 6|~||~||~|
Step 5
Creating the right blend of colours in your website is an important consideration, too many web site are spoiled by designers going over the top with mis-matching colour schemes.In the predesigned pages provided with Dreamweaver, the background colours of table cells are mostly set to grey and you’ll have to change the colours to match your site’s colour scheme. If the Property inspector isn’t open, choose Window, then Properties to open it.

If the Property inspector is collapsed (showing only its title bar), click the expander arrow in the title bar to expand it. Then, in the Property inspector, click the Background Colour button that appears next to the lower of the two ‘Bg’ labels. The colour picker appears and the pointer changes to an eyedropper. Select the colour that you want, do this by either selecting a colour in the colour picker’s palette, or click anywhere on your display to select the colour of the pixel you clicked.

Step 6
You will no doubt be looking to have more than one page on your internet site and adding extra pages is easy enough. There are several possible ways to create a second page with the simplest being making a copy of the first one, so that your additional pages have the same layout as the first. If you want to create a layout of your own instead, you can either use the Dreamweaver table-editing tools or Layout view. In a more complex web site, the best way to make sure all your pages have the same layout would be to use a template.

To create a copy of your first page, go to the site panel, right-click the filename of the first page you created and then from the Context menu, choose Duplicate. A copy of the file appears (when we tried this, it did not appear immediately but clicking on the Refresh button in the Site panel made it appear). Select the new duplicated file, pause for a moment, then click it again to make the filename editable (this is the same technique used in Windows Explorer). Then finally, give the new file a new name.
||**||steps 7 and 8|~||~||~|
Step 7
In the fourth step we emphasised the importance of removing unnecessary material from your pages. To do this, open your page by double-clicking on it in the Site panel, look at the window's title bar to be sure that you're looking at the right .htm file. The title bar should have the folder name and a filename; the filename should be whatever you named it in the previous procedure. Sweep through the page, look for the unnecessary material and select the items and then delete them.

The design view gives a rough idea of what your page will look like in a browser, but the only way to be sure how it will look is to preview it in an actual browser. Each version of each browser has its own quirks; Dreamweaver strives to produce HTML that will look as similar as possible from one browser to another, but sometimes differences can't be avoided. (That's why Dreamweaver doesn't display a preview directly; there's no way for Dreamweaver to mimic all the different behaviours of all the different browsers available.)

Step 8
The final stage involves connecting to a remote site, firstly choose Edit Sites from the Sites menu. Click on the site you are working on and then click Edit, ensure that the Basic tab at the top of the dialog box is selected. You’ve already filled in the first few steps in the Basic tab, so click Next a few times, until the Sharing Files step is highlighted.

In the pop-up menu labelled “How do you connect to your remote server?”, choose an appropriate method. The most common method for connecting to a server on the internet is File Transfer Protocol, FTP. If you choose an FTP connection, enter the hostname of the server (such as ftp.macromedia.com). Enter your user name and password in the appropriate text boxes and click Test Connection. If successful, click on Next and then click Done to finish setting up the remote site. Click Done again to finish editing the site. All of the site’s files should now be uploaded to the remote site, open your remote site in a browser to make sure everything is uploaded correctly.
||**||

Add a Comment

Your display name This field is mandatory

Your e-mail address This field is mandatory (Your e-mail address won't be published)

Security code