Category Archive
The following is a list of all entries from the Design category.
Logo design needed (URGENT)
I have been asked if anyone would like to design a quick logo for a group of management students.
They require a logo based around disability awareness. The logo should not be “disabled” but be more of a pointer to the support that disabled people can obtain.
The logo is eventually to be used at TAFE, if all goes well!
Let me know by email (put Disability Services Logo as the subject title), and I will forward your details to Amanda who made teh request.
DEADLINE for logo is 10 days (told ya it was urgent).
Ady
PS: you can easily add this sort of thing into your portfolio to show what you are able to do!
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.
What do we need to learn?
The break between the two terms is here, and we’ve achived a fairly good look at CSS, navigation concepts, XHTML, information architechture, and testing.
This is fine, but what do we need to know to get a web site that looks presentable and professional?
What ideas besides how to create cross browser compatible accessible menus, can you think of?
Add your ideas to this story as a comment.
On that note see you on May 1st, 2006 for the second term.
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.
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/
Testing web sites
As a class, Ben, Raylene, Robyn, Marc, Brendan, Alyssa and Sam came up with the following areas for testing to be performed within the site: Link checks (on site, off site and eMail) Speed Search engine placement & optimisation Accessibility Images Multimedia Audience Accuracy Readability Page size & browser compatbility Hits & other data These items all have areas to be checked against…. What are your thoughts on what criteria should be placed on the testing for each area, and how can you test them?
Web Accessibility and Usability Standards
Are there standards that we can apply to our web sites so that we have a site that is accessible to a broad range of users and usable by people with a wide range of skills and knowledge?… What could be ten key points from standards around the globe that should be applied to your web site design and implementation?
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.
Further Links – CSS and more
- CSS Help Pile: Links and Discussion About the Best CSS Resources on the web
- CSS Basics – Making Cascading Style Sheets Easy to Understand
- Writing cross-browser CSS | 456 Berea Street
- Dnevnik eklektika · CSS Stamps
- johnoxton.co.uk: Scalable logos
- SkimCSS – Skim Everything (CSS) Cascading Style Sheet Related!
- 24 ways: Centered Tabs with CSS
- Friendly Bit » Cross-browser strategies for CSS
- Managing HTML and CSS to Keep Clients Happy and Avoid ‘Disaster’ – Part One
- Zimbra™ – Zimbra Ajax Toolkit Download
- Semantic Typography: Bridging the XHTML gap : Journal : Mark Boulton | Information design
- Become a better Standardista | Muffin Research Labs
- PHP + CSS Dynamic Text Replacement (P+C DTR) – CSS Help Pile
- wg:Printing CSS background images (sort of)
- Lightbox JS
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.
