1 A couple of minutes of background, so that if I lapse into 'technospeak' you wont be totally confused : Web pages are built in the Hypertext Markup Language (HTML) and consist of a series of 'tags' containing data. The tags define how the data is treated and displayed. So if you look at the source code of a web page you will see things like - <div> some sort of data </div> Each individual HTML file generates a 'web page' and several pages are linked to form a 'site'. The 'hypertext' bit means that it is more than text, and you can jump about the site by clicking on 'links'. The standard we will use is 'HTML4 Strict DTD'. Each page has a head section containing housekeeping stuff, and a body section containing the real stuff. Don't worry, about all this - it's just here to introduce the terms.
2 It is very difficult to get this right by typing it in, you must get the open < > and close </ > bits nested correctly, and get the incantation correct (and spelt in American). So we use a program to type what we want to see and convert this to HTML. It takes care of putting things in the head and body and gets the syntax right. For this session we will use KompoZer. It is Open Source Freeware, runs under Windows, Linux and as a Windows Portable version to run from a thumb drive. It gives you full control of the result, but lacks 'draging' of many items on the screen. NetObjects Fusion is used in other SIG sessions, and you can move things about on your page, but it is obstinate about some things, leading to frustration.
3 Some of the graphic elements of our pages will be made with GIMP - either preparing photographs or making banners and buttons. It, too, is Open Source Freeware, runs under Windows, Linux and as a Windows Portable version to run from a thumb drive.
4 See the appendix for download locations and tutorials. w3schools
5 Now we start. First you must decide what you wish to present, how you want it to look and how the various pages link together. This IS your design, the rest is construction. Because we want our pages to look consistent we will make up a template file, and use this as the basis for the site's pages. Don't feel constrained, you may have a reason for some pages to look different and that's OK. We are going to start with a text page, but later we can replace some text with graphics banners and buttons. I'm doing it this way so you can get a working page in the first session, then make your banners to add in the second session. When you know how you can jump right in at the deep end.
6 KompoZer uses 'styles' and 'classes' to control how pieces look. It's a lot easier to say "this is paragraph header" or "this is emphasised text" than setting font type and size each time. Then, if you later want to change the colour of 'paragraph header' you change the style once rather than finding and changing each paragraph header.
7
We will want pictures, icons, graphics and other items on our pages. To keep them in order I use a folder structure like this:
Root folder contains your 'home page' index.html
btns icons, buttons, textures
gifs non-photo images
html the web pages
jpeg photos
jscs styles and scripts
misc other files to link
pngs screen capture images
thun photo thumbnails
You can sub-divide these if you want to, say if your website has several unrelated topics, you may do this:
Root
Topic 1
btns, etc
or this:
Root
btns
Topic 1, etc
Before you start construction you should gather as much of these things as you can. If you don't have something you can make a dummy placeholder so you can see how your pages look and work.
8 Now to KompoZer - Start it up, set it's defaults. In Tools | Options | Advanced - set HTML 4 Strict. The other bits are probably OK unless you want to include non-English text. But in the General tab make sure 'Use CSS Styles' is ticked. OK this and File New to create a blank document. Select Format | Page Title and properties. Make the title 'Page Template, fill in the other stuff if you want but don't yet tick 'This is a template'. OK this - you have now set up the head section now. Select Format | Page Colors and Background. You can set up a custom colour or image as the background. There's your body started. Save the page in your html folder. If you use a background image make sure it is pale and not 'busy' so it doesn't obstruct the content. Similarly, no bright colours, beige better than blue.
9 We are going to create our page with <div> tags to define various regions, and styles to control the display in those regions. Start at the top with a page header. Enter 2 blank lines, move up to the top then type Template and highlight it. In the box that now shows Body Text scroll down to select Generic Container. We have created a <div>. Now click on the CSS editor pallette. For now we will use an internal style sheet, and create a class style (2nd button). Type PageHeader after the . in the entry box and click the Create Style Rule button. Now you select the properties for your header. We'll do just text and background now. Example - custom font Verdana; size 40pt; line height 80pt; weight bold; colour navy; case capitalize; alignment right; decoration none. Now if you want a background other than the page background, set this. OK this. Now apply the style : With the text still selected change the class from (no class) to PageHeader. If you don't like it, go back to the CSS editor and change things, watch the title jump to carry out your slightest whim.
10 Click on the CSS editor, then the little one with an arrowhead and select Style Rule. Create a class rule as before, calling it HeaderCap. Make the font a serif font, 90pt, black. Highlight the T and make this class HeaderCap. Now, as frequently in future, save your page. The <div> as a whole has the class PageHeader, but the T has class HeaderCap. If you want to see what a complicated page you have just made, select the Source View. Right down near the bottom you can see the class of the <div> and T.
11 There are some pre-defined formats eg Header1 that you can apply by the drop-down list showing Body Text. You can use these freely. If you don't like the default styling you can change it with the CSS editor. Type something below your header, highlight it and set its type to Heading 3. Create a new style rule, but select type (1st button) rather than class. Type h3 in the entry box and create the style as before eg Comic Sans 15pt, blinking. Magic.
12 Create any more header bits now - sub header, menu bar. It can be done later with just a bit more difficulty.
13 For the bulk of the page you may want a menu at the left, and your content moved right to accommodate this. Start by making another 2 <div>s with the text saying 'memu' and 'content'. Make 2 more classes Menu and Content. Fonts as you please, then go to the Box tab. For Mwnu set the width to 200px. For Content, set left margin to 200px. Then apply them to your <div>s. Nice, but they don't line up! Back to the CSS editor to edit the Menu style. Select position Absolute. OK. Now, when you click ok the menu you get a little drag handle. Use it to line up the menu with the content.
14 Now you may want a footer bar or menu. So do it. Your template is nearly complete, you just have to test it. Save it now. Add some dummy content (Lorem ipsun) to all your <div>s to se how they look in reality. Save then use F5 to launch it in your browser. Fix-launch-fix-launch until you are absolutely happy with it. Very easy to fix the layout now, much harder if you have already used a dud template to make many pages. (I'm talking about the layout of the <div>s not the CSS). When you are satisfied, throw away the dummy stuff and go to Format Title and Properties to tick This is a template. OK In the CSS editor click Export Stylesheet and save it as styles.css in the jscs folder. Save the page.
15 Now you are ready for your fitst real page. Open your template file, go to Format Title and Properties to un-tick This is a template, and change the title. OK then Save as - in your html folder. Add your content. Apart from text you will probably want to add images, tables and lists. Well leave forms to an advanced lesson. Bullet and numbered lists are available by KompoZer's toolbar (use type ul or li in the CSS editor to change the default appearance). Tables can be used for data, but more usually to control the layout of text and images - which would otherwise flow ungracefully across the page. Images can be set to left/right/top/bottom/centre of the page, but as a cell in a table - the same - so you have finer control of the flow of text and images.
16 Padding can be set in tables and <div>s so the text doesn't hit hard against the edges. This slight margin effect gives a better appearance. Similarly it can be added around images.. Experiment with these effects to see what you like.
17 Menus are links to other pages. When you have a few pages done you can start linking them and completing your menu. A link is made by highlighting the text that will be the place to vlick and then select the link icon. Merely select the HTML file to link to, paste an internet URL or select any file that the browser can handle. You have your link.
18 Images can be inserted with the Image icon. Play with the options for now, more details next session.