Cert IV in IT (Multimedia)

Moving over to C475…

Due to the fact that there are so few students in C123, we are all going to share the one web log (blog). Please head over to C475 and use that one for all future communication.

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.

Albino Black SheepCSS Live Design

Also useful will be the HTML and XHTML tutorial.

A tutorial on CSS & Fonts also may give you some more information, along with the CSS Backgrounds tutorial.


Assessment 2006 S1 – Site Design & Site Implementation

Please remember to email me as instructed in the assessment outline.

Continue reading this entry »

Further Links – CSS and more

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.

Navigating a site

When using web sites we encounter a large number of types of navigation methods. These include:

• Lists

• Breadcrumbs

• Tabs

• Drop downs

• Multi level tabs (usually horizontal tabs with a submenu)

• Hierarchical, and

• Pagination

This is not all the list as Ben Hunt shows on his pages about navigation models.

Problem: Identify two examples for each type of navigation and explain (in one or two sentences) why you believe they are that type of navigation model.

For example:

Screenshot 02-1

Could be a tabbed menu, or a horizontal top bar. This is because the menu contains a list of items across the page. The items are highlighted when the mouse rolls over. The current “area” is highlighted by an underline.

Screenshot 01-1

is most probably a list of contents. This is because there is a list of items that may be accessed by clicking on the links. Visited and active links are also highlighted.

Both these navigation types were displayed on the site “465 Berea Street” [visited: 07/03/2006]

What sites have you found and what navigation types?

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.

What do we know about… General web concepts?

  1. What does the term FTP stand for?
  2. When developing a web site, should you use a ‘live’ site for testing?
  3. What is the HTTP stand for?
  4. What is a URL?
  5. What is a 301 status code?
  6. What is a character entity?
  7. How would you display a copyright symbol on a web page?
  8. What returns the data back to a browser when a web page request is made?

Answer these questions by putting your answers in a comment.

What do we know about… XHTML?

  1. What is/was the latest standard version of html?
  2. There are two types of tag in xhtml and html, what are they?
  3. There are three document types in xhtml. What are they?
  4. What is semantics?
  5. What is the 404 status code for?
  6. What does HTTP stand for?
  7. What is an URL?
  8. What graphic types can most common browsers display?
  9. What are redundant tags?
  10. When shouod you use tables in layout?
  11. What target attribute will force a link to open a new browser window?
  12. What is the <noscript> tag used for?
  13. What is a http status code?
  14. What is done to create a link for selected text or an image?
  15. What events are attributes of a <body> tag and available for 4.0 or higher version browsers?
  16. In HTML, name three PRESENTATION related tags.
  17. The font tag is deprecated from the future specifications for html, name one other tag that is also deprecated.
  18. Who invented the WWW?
  19. What is an URI?
  20. What is HTML based upon?
  21. What is resolution?
  22. What is a DTD?
  23. What is XHTML based upon?
  24. What is XML?
  25. What must an XHTML document contain?
  26. What “actions” can be applied to the body tag?
  27. In XHTML and HTML name three SEMANTICS related tags.
  28. Write the HTML that sets the margins on the main body of a web page to zero.
  29. What is the httpd?
  30. What is the 200 status code for?

Logo Design Competiton

A heads up…
James is looking for a logo design for the edublogs.org site… no details yet, but this’ll get you thinking.

Coming soon: ‘Call for Plugins’, edublogs logo design competition and more (and better) customizable themes.

The original story is here