Cert IV in IT (Web Design)

Category Archive

The following is a list of all entries from the XHTML category.

Comments (0)

Creating a Lightbox for your images




The links look like the following:<script type=”text/javascript” src=”js/prototype.js”></script><script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script><script type=”text/javascript” src=”js/lightbox.js”></script>Now the order is important.For now we are ready.The head section will look similar to this: Any other CSS and JavaScript can be placed after line 8 in the sample shown.Now we can turn our attention to the actual images.In the main body of your page, if you wish to use a lightbox effect on any image then you do the following steps.Insert the image as normal.Insert the image’s thumbnail immidiately to the right of the image. For example the code below shown the flow2a and flow2a-thm files insertedintot he code:<img src=”photos/flow2a.jpg” alt=”TheFlow” width=”639″ height=”510″ /><imgsrc=”photos/flow2a-thm.jpg” alt=”The flow thumbnail” width=”100″ height=”100″ />Now we modify the code to create our lightbox link:we start by changing the first img src into an a href, removing the widthadn height sections, plus the / before the > <a href=”photos/flow2a.jpg” alt=”The Flow”><img src=”photos/flow2a-thm.jpg” alt=”The flow thumbnail” width=”100″ height=”100″ /> Now change the alt to title and if you wish extend the title of the image:<a href=”photos/flow2a.jpg” title=”The Flow, and image “>We now add the rel=”lightbox” attribute to the a href.

Comments (0)

CSS, Frames and usability




http://www.456bereastreet.com/lab/cssframes/ There are other variants of this including a very nicely done version at Sitepoint that includes a “ragged” / uneven edge that the text slides from beneath. http://www.sitepoint.com/search/search.php?ps=10&q=fixed+border&submit=Search Also full width, fluid layouts can use these headers if you so wish, and an example is shown at the CSS Play site.

Comments (0)

Centering blocks




a quick pointer to centering blocks was written last year and is shown at: http://c476.edublogs.org/2005/11/15/css-hints-centering-blocks/

Comments (0)

Tutorial – Albino black sheep – CSS Live Design




OK, please follow this tutorial through and you will be surprised what you will see from the code and examples.

Comments (0)

Further Links – CSS and more




Comments (0)

CSS Tutorials




After being asked about how do floats work, I found a series of very good tutorials on floats and other concepts that are very important in CSS. You are recommended, no let me make that required to read if you are having problems.

I suggest you look at them in the order I have given them, so that the content builds up and you become familiar with the techniques involved.

Selectutorial at maxdesign shows the various ways to use selectors in CSS.

Listutorial investigates the use of CSS and lists.

Floatutorial is simple superb and shows you basics through to more advanced concepts.

Building a page template in CSS shows the steps in creating a web page template from the starting mock up to the finished product. Especially useful for the “personas plus” development you are undertaking.

From tables to full CSS shows a method of converting a tables based site layout to use CSS.

Basic web standards workshop shows you the basics of web standards and their use. There are seven parts to the workshop, covering content that includes: Web Standards, What are Web Standards about, and the ideal page structure. (X)HTML and the XHTML dilemma. Semantic markup. Accessibility and why we should bother with it. An introduction to CSS, including why use CSS to separate content from presentation, grouping selectors, shorthand rules, selectors, inheritance and the cascade. Floats and their use including basic float rules, is width required on floats, and floating multiple images to right edge. CSS issues and bugs including margin collapse, trapping margins and IE and the box model to name but a few

Liquid layouts, the joy, pain and tears looks at some of the troubles and pitfalls associated with creating a liquid layout in CSS.

Page source order and accessibility is a presentation that covers one of the most fundamentally important aspects of accessible semantic web design.

CSS Image text wrap shows one way of achieving uneven image wrapping.

Read and use the information here to assist you in your work on the Personas Plus page you are developing.

Aside: a comprehensive HTML tutorial is also found at tizag.com where also you can find a CSS tutorial as well. Note that the HTML tutorial is really aimed at HTML 4 and not XHTML which is what you are required to use for this course.

Comments (0)

Site design




I discovered a very good web site on site design, methods and development.

Ben Hunt, the principle consultant at scratchmedia has given me permission to use the site, and I thank him for that. The content is in the Creative Commons licensing form.

We’ll be using Web Design from Scratch as one of the places to refer to as it keeps things short and simple.

Comments (0)

Books and Resources




When studying this course most of the lecturers will not specify a text book for youi to use. As a result we will list books that may be useful.

The following is a starter list, but will be extended. If you find a resource that is suitable, add the detaisl to the comments.

Designing Web usability
Jakob Nielsen [New Riders, 2000]
Elements of Web Design, 2nd Ed
Darcy DiNuccie [Peachpit, 1998]
Macromedia Dreamweaver MX, training from the source
[Macromedia Press, 2003]
Usability: The site speaks for itself
Braun, Gadney, Haughley, Roselli, Synstelien, Walter, Wertheimer [glasshaus, 2002]
Macromedia Dreamweaver MX, complete concepts and techniques
Shelly, Cashman & Wells [Thomson Course Technology, 2004]