This page introduces you to all the delights of designing, uploading, marketing and maintaining a website. Before proceeding, take a quick look at the following picture, which is the map of a typical commercial website, based on a Flash introduction, navigation button sets (navbars) and frames (this is conveniently the frames version of the author’s commercial website). It may give you an idea of how a website is structured, but it’s boring, so do move along!
Here’s another map version of the same website (typed):
index.htm (Flash)=>eclipsetbs_fs (frameset)…..
logo_navbar.htm (fixed top frame)
contact.htm (fixed bottom frame)
main_frame.htm (selected contents=>)
prices.htm=>guide.htm (spec guide)
The design of a website involves the following stages not necessarily in the order shown):
Planning, ie deciding its purpose, expected audience, structure, image, style, navigation methods, webspace, domain name, server and search facilities, together with which software tools are to be used.
Design of images and backgrounds (in graphics software applications).
Design of client-side (limited to your website) or server-side scripts (if you’re an experienced programmer or you are familiar with code for scripts).
Design of the web pages that will make up your website with an HTML structure and main content, but sometimes with images, scripts and other elements.
Testing your website in your browser (and possibly the other main browsers if you want to make sure they present your site adequately, if not perfectly, because there are differences!). Testing may also be appropriate in a local server, eg for ASP or PHP scripts (see ‘Training’ below).
Before embarking on this journey, you need to be mentally prepared and this section advises what you should do. You first need to understand why you can’t have full control of what visitors to your website will see. How your website is seen by visitors depends on:
How the visitors’ browsers are configured, eg are they Java-enabled and are Cookies (files sent to the visitor’s Temporary Internet Files folder with an expiry date and specific details related to the visit – ostensibly to help the site to relate more easily to the visitor’s next visit) (Ref 40) enabled (as set in the MS Windows Control Panel ‘Internet Options’ dialogue)?
How the visitors’ display monitors are configured, ie the number of horizontal and vertical pixels (800×600, 640×480, etc) and the colour resolution (16-bit, 256-bit, etc), as set in the MS Windows Control Panel ‘Display’ dialogue.
How the visitors’ Internet Security software ad-blocking elements (or any other software that blocks ads) are configured.
You will by now know that HTML is the very simple tag-based language on which web pages are based. Its latest standard is now mostly accepted by the latest versions of the main browsers (but there may still be some small differences).
XML (eXtended Mark-up Language) is a tag-based mark-up language based on the Standardised General Mark-up Language (SGML), each application of which requires a tailored Document Type Definition (DTD). The SGML is accommodated by the Adobe Framemaker software Application for the creation of large publications.
ASP is a server-side facility that’s made available for dynamic web pages when a Windows NT-based web server is used.
The CGI is a protocol that’s made available on many web servers to route (server-side) scripts to their associated (server-side) software applications, normally Perl and PHP.
You should now have some synergy with all that follows…..
Learn the basics of HTML straight from the horses mouth, ie the W3C, ably represented by Dave Raggett (Ref 8). Dave’s tutorial helps you to accommodate the different browsers in your HTML code. It leads you from basic HTML to Advanced HTML and to a bonus ‘Adding a Touch of Style’ section. It then lists sources of even more details that include important stuff on CSSs and DHTML.
This script displays a continuously updating world clock, allowing the User to see the analogue or digital time at any instant in five locations around the world, with optional background and foreground colours.
CAUTION: This is only a demo really. Nevertheless, the clock was correct on 1 November 2003 for international Winter times.
To set up a clock on your own Home Page, go to The Maker
Then you should become familiar with CGI. CGI is the method by which a web server can obtain data from (or send data to) databases, documents and other programs, and present that data to viewers via the web. More simply stated, CGI is programming for the web to add a counter, a form to let visitors send you mail or place an order, or something similar. A CGI program (script) can be written in any language such as PHP or PERL.
To learn the basics of PHP, go to either or both of the free tutorials at The PHP Group (Ref 11) and Webmonkey (Ref 12). To learn a bit about PERL for CGI (for fun or profit), go to Ref 13. Remembering that there are many ready-made Perl scripts out there, if you still think you have the patience to learn the basics of programming in PERL for CGI, go to Ref 14.
ASP is used by some websites that are hosted by a server supporting ASP. I believe this means there is a Microsoft Windows NT Server or an improved Windows 2000 Server or now an even more advanced Windows 2003 Server at the host. A page comprising html code, images and text is modified by ASP code, which has opening and closing tags <% and %> placed anywhere on the page. The page is then given a .asp suffix in place of the .htm or .html one to identify it on the server. The instructions in this code are then acted on at the server before the file is downloaded to a requesting browser. In Window XP Professional, there is an optional facility called an Internet Information Server (IIS) which allows a website designer to preview .asp pages before uploading them to the public server. Further details on ASP are available at Ref 46.
A What You See Is What You Get (WYSIWYG) editor such as FrontPage, CoolPage or Dreamweaver makes life for a starter much easier, because it allows you to see the page design resulting from its code and then to preview in your browser what visitors will see in theirs before you upload it to its allocated webspace (so get one if you possibly can!). On the subject of browsers, if you’re really serious you could also download and install the free versions of the Netscape Navigator and Opera browsers (assuming you’ve already got MS Internet Explorer), so that you can see what visitors with these browsers would see (there are differences!).
You don’t have to re-invent the wheel, so look at other websites to get ideas and acquire a copy of anything you can use (see Acquisitions’ below). Look at, but don’t be limited to, similar websites to the one you are planning (do a bit of ‘lateral’ thinking).
Note in particular the page structures and navigation methods used. Note particularly the differences between a site in which pages are based on ‘frames’ and one that is not: On a page in a site based on ‘frames’, navigation buttons (the navbar) and contact details are always visible, regardless of its scrollable length (an obvious elegance, the downside of which is that some search engine spiders and older browsers can’t see it, so it’s a good idea to provide an optional ‘noframes’ – based site, accessed via the ‘noframes’ html tags you may have learned about earlier in this tutorial). If you have the patience to enter my Eclipse TBS ‘noframes’ site, browse a while and then click on the link on the Main Intro page to the Eclipse TBS ‘frames’ version site, when you will see what this is all about.
If it’s a commercial website, you need to decide on a budget for domain names, server and search facilities and if it’s a non-commercial website it’s common sense to use all those facilities that are free – let’s not spend money (see ‘Costs’ below) when we don’t need to, unless you’re very keen to attract millions of visitors of course!
On a large sheet of paper, draw what you think is a family tree of the website you want, ie a hierarchy of pages represented by boxes. Decide if it’s to be based on frames or not and decide on the navigation method(s) to be used.
To be continued…
When looking at a web page containing something you can use, view its HTML and other code in Notepad or your preferred HTML editor:
HTML code. Right-click on any blank area of the page and select View Source or select View>Source via your browser Menu bar to bring up a display in your HTML editor normally Notepad). Highlight and copy any code you think you can use for pasting and modification in your own (offline) pages.
Images. Any image that you like (which will normally have a .jpg, .jpeg or .gif extension) can be copied to your hard drive by right-clicking on it, then selecting Save Image To>Browse>the folder to go to, and then following the presented dialogues (an image file won’t contain a virus).
General. It’s often impossible to capture all the images you need in a Java Script, etc, using the above procedure, so remember that you can simply save a page (with all its assets) to your hard drive, via the (old faithful) File>Save route, for you to pick the bones of the resulting folders and files on your hard drive where you (sensibly) saved it at your leisure!
Design and Test
Design your pages. Wherever possible, decide to make all your HTML files ‘.htm’ (not a mixture of ‘.htm’ and ‘.html’, because you’ll forget ther full names and it’s one less button to press!).
Note: In the following descriptions, examples of HTML and other code are displayed red.
From your planning, you will have decided on a ‘frames’ based or a ‘no-frames’ based site:
Frames-based. When it’s to be frames-based, decide on how the frameset(s) is(are) to be structured, ie what frames do you want and where? An example frameset contains a fixed frame at the top of the page for a logo and your navigation buttons (called, say, top_fm), a fixed frame at the bottom of the page for contact and copyright details (called, say, bottom_fm ) and a (central) frame for your optional pages (called, say main_fm), that may or may not have scrollbars. The following procedures will assume that this configuration is adopted….
First create the two files you want in the fixed frames as normal HTML files called, say, logo_navbar.htm and contact.htm (to create the menu or navigation buttons for the former, you will need to have decided on the structure for your site and listed your pages during the Planning phase and the ‘target’ for all the menu items or buttons is ‘main_fm’).
Then create the page you want to be initially displayed in the frame called main_fm, ie on the site’s entry page or the page entered from a ‘Flash intro’ (‘movie’) page, as a normal HTML file and call it, say, start.htm.
Then create the frameset (as a frameset file), specifying the HTML code for the three frames in a similar way to the following example (performing this exact sequence should avoid any of the brain teasers that can be associated with frameset and frame files):
Then (if you’re going to create a ‘no-frames’ version of your website) allow for visitors who can’t see frames by adding HTML code based on the following example in the frameset file:
Unfortunately, your browser is too old to support frames. If you need to see details on this site, this has to be using a new browser, ie IE6 (recommended), NN7 or Opera7.01. Alternatively, you could go to the Your business, etc ‘no-frames’ website (if you have ‘rem’ patience).
Then you create all the other pages (and their sub-pages, etc) that you want to be optionally selected for display in the frame called ‘main_frame’ as HTML files, making sure that the file names match the hyperlinks from the menu or buttons in the logo_navbar.htm file.
To be continued…