Enjoy Web Design at Sydney PC User Group

Web Design

Scroll to the bottom of this page for links to Member's Websites

Centring Images

The images and text below have been grouped to the middle of the page using a special "centring class" attribute for experimental display purposes. Positioning images is one of the more difficult tasks when using "liquid" divisions, without reverting to the use of tables. John L

Kodak Printer

and

Dell Mini-notebook

Fun with CSS & Alternative styles

Fashion coloured scrollbars
Internet Explorer only has proprietry styles which allow the scrollbar to be given bright colours as shown.

Alternate styles
Firefox and Opera allow you to select alternative styles to be used for printing, impaired vision viewers, etc. With either browser, try the "Bigblue" style - Click: View | Page Style | Bigblue. (this page only)

HTML-Kit: A webpage editor for beginners and professionals alike.

HTML-Kit is a full-featured editor designed to help HTML, XHTML and XML authors to edit, format, lookup help, validate, preview and publish web pages. Despite its name and the light download size, HTML-Kit is a multi-purpose tool that has support for several scripting and programming languages. This program has won me over and has been my default editor for some months now. Having previously used HAPedit - another excellent program - for quite a while, I was delighted to find the change-over rather painless. I found HTML-Kit, which is also free, a little more user friendly and easier to customize for my needs.

Newcomers to web page design can benefit from letting it point out errors and provide suggestions on how to create standards compliant pages. Experts can save time spent on common tasks using the highly customizable and extensible integrated development environment while maintaining full control over multiple file types including HTML, XHTML, XML, CSS, XSL, JavaScript, VBScript, ASP, PHP, JSP, Perl, Python, Ruby, Java, VB, C/C++, .NET C#, Delphi / Pascal, Lisp, SQL, and more.

In addition to the user friendly environment that support multiple file types and standards, HTML-Kit includes internal, external, server-side and live preview modes; FTP Workspace for uploading, downloading and online editing of files; and the ability to use hundreds of optional free add-ins through its open plugins interface. jl

- Latest free CSE Validator 8.04 released -

There aren't many freeware programs out there these days that are this well done and useful.
- Tim Matheson, CSE HTML Validator User

cshpix I downloaded CSE HTML Validator Lite about two months ago and have used it ever since. It's absolutely delightful to use - and has options for everything you can think of (and a lot that you can't!). But in spite of the options, it can be used by amateurs like myself with the default values only. I have tried several other validators before and none comes near it for ease of use, flexibility, and thorough reliability. When I develop to the stage of needing the even more powerful edition, I won't bother to look elsewhere, as I'm confident this product will be of the highest standard also. Well done, and thanks.
- Phil Taylor, CSE HTML Validator User

I just downloaded the free version and used it immediately. Already I can't say enough about this product! As soon as I have a few bucks ahead I absolutely will be upgrading, and recommending CSE HTML Validator products to everyone I know who makes web pages.
- Connie Srnka, CSE HTML Validator User

In addition to checking HTML syntax, CSE HTML Validator Lite can also:

Check spelling.
Quickly change all tags and attributes to lowercase.
Automatically place quotation marks around all attribute values.
Strip HTML tags from HTML documents, leaving only the text.
Quickly change all the headers and/or footers of every page of your web site when you design your pages using the template tool.

If you want to automatically fix HTML problems and/or check CSS, links, and accessibility, then download CSE HTML Validator Professional Trial.

Recent Web Design SIG activities:

Report for meeting January 2009

A good roll-up today, very pleasing. We checked out our site and upgraded the reports. We then looked at my 'new' site and discussed options for designs. We made up a series of text styles using the CSS function in Fusion. We discussed if there are any new PDF files to update the MWRPA site. Nothing at the moment.

The next meeting is on Saturday 21st February, when we will look further into my 'new' site?. See you all there.

Robert

HTML Element Hierarchy

Any HTML page comprises a number of (perhaps a large number of) elements - headings, paragraphs, lists, and so on. Often, developers use the term "tag" to refer to an element, making reference for example to "the p tag". But the tag is simply the  part of the element. The whole construction of This is the content of the paragraph is in fact the  element (as we refer to it in this guide). What many web developers don't realize (largely because it wasn't particularly important until style sheets came along) is that every element is contained by another element, and may itself contain other elements. The technical term for this is the containment hierarchy of a web page.

At the top of the containment hierarchy is the <html> element of the page. Every other element on a web page is contained within the <html> element, or one of the elements contained within it, and so on. Similarly, many elements will be contained in paragraphs, while paragraphs are contained in the <body>.

Graphically, we can understand it like this.

The Containment Hierarchy With cascading style sheets, elements often (and with CSS2 can always be forced to) inherit properties from the elements which contain them (otherwise known as their parent elements). This means that if you give the body of the page certain properties (for example font and color) then every element within the page will inherit these properties- there is no need to set the font and color again for each element, such as list items or paragraphs.

You can always override the inheritance however. By assigning a property to an element, you override the inherited property.

Source:Westciv.com

Web Graphics

Image format comparison There are many web pages devoted to describing the relative merits of using JPEG, GIF and PNG images. This page is a short summary of some of the things I have learned about these formats while designing the web pages for my department and while writing software to view medical images. This is not meant as a definitive guide, more a basic introduction with a few useful links.

There are three common formats used by web pages: GIF, JPEG and PNG. Each of these formats uses compression techniques to reduce the amount of time required to download images. In general, each has its own strengths and weaknesses. Learn more... Source: http://www.sph.sc.edu/comd/rorden/graphics.html