Great CSS Resources

MORE INFORMATION


www.sitepoint.com/article/css-is-easy

SitePoint’s easy introduction to the world of CSS is a great place to start.


www.w3schools.com/css

W3Schools’ CSS tutorials are helpful whether you’re learning from scratch, or simply brushing up on your knowledge of CSS.


www.csszengarden.com

The CSS Zen Garden is a marvellous demonstration of the power of cascading style sheets alone. It has a real wow factor!


www.centricle.com/ref/css/filters

This comprehensive list of CSS hacks shows you which browsers will be affected by a given hack, if you need to hide certain CSS directives (or deliver certain directives) to a particular browser.


www.positioniseverything.net

This site demonstrates CSS issues in various browsers and explains how to work around them.


www.css-discuss.org

The CSS-Discuss mailing list is ‘devoted to talking about CSS and ways to use it in the real world; in other words, practical uses and applications.’ The associated wiki is a repository of useful tips.


www.sitepoint.com/books

If you’re after something more definitive, HTML Utopia: Designing Without Tables Using CSS is a complete guide for the CSS beginner. The CSS Anthology: 101 Tips, Tricks & Hacks is a perfect choice if you prefer to learn by doing. A lot of tutorials on the web cover JavaScript. Some explore both DHTML and the DOM, while others do not; you should try to find the former.


www.sitepoint.com/article/javascript-101-1

This tutorial provides an introduction to the basics of JavaScript for the total non-programmer. Some of the techniques in this article aren’t as modern as the alternatives we’ve presented here, nonetheless you’ll get a good feel for the JavaScript language itself.


www.quirksmode.org

Freelance web developer Peter-Paul Koch’s list of CSS and JavaScript techniques and scripts covers a considerable amount of useful ground in this area.

Building Dynamic Web Sites

Use our brief overview to find out about the building blocks that make up DHTML websites – from what HTML really is, to adding interactivity using JavaScript…

DHTML is actually a combination of proper HTML for your content, Cascading Style Sheets for your design and JavaScript for interactivity. Mixing these technologies together can result in a humble stew or a grandiose buffet. It’s all in the art of cooking, so let’s begin…

HTML starting points

Websites are written in HTML. For a successful DHTML-enhanced website, it’s critical that your HTML is two things: valid and semantic. These needs may necessitate a shift away from your previous experiences writing HTML. They may also require a different approach.

A specific set of rules, set out in the HTML recommendation, dictate how HTML should be written. HTML that complies with these rules is said to be “valid”. Your HTML needs to be valid so that it can be used as a foundation on which you can build DHTML enhancements. While the set of rules is pretty complex, you can ensure that your HTML is valid by following a few simple guidelines.

Correctly nest tags

Don’t let tags “cross over” one another. For example, don’t have HTML that looks like this:

Here is some <strong>bold and <em>italic</strong> text</em>.

Here, the <strong> and <em> tags cross over one another; they’re incorrectly nested. Nesting is extremely important for the proper use of DHTML. If you cross your tags, each browser will interpret your code in a different way, according to different rules (rather than according to the standard). Any hope of your being able to control the appearance and functionality of your pages across browsers goes right out the window unless you do this right.

Close container tags

Tags such as <strong> or <p>, which contain other items, should always be closed with </strong> or </ p>, or the appropriate closing tag. It’s important to know which tags contain things (e.g. text or other tags) and to make sure you close them. <p>, for example, doesn’t mean “put a paragraph break here”, but “a paragraph begins here”, and should be paired with </p>, “this paragraph ends here”. Those who know what they’re doing with container tags will be aware that HTML 4.01 doesn’t actually require that all container tags are closed, though XHTML still does. However, it’s never invalid to close a container tag, though it is sometimes invalid to not do so. It’s considerably easier to just close everything than it is to remember which tags you’re allowed to leave open. The same logic applies to <li> tags as well.

Always Use a Document Type

A document type (or DOCTYPE) describes the dialect of HTML that’s been used; there are several different options. Here, we’ll use the dialect called HTML 4.01 Strict. Your DOCTYPE should look like this:

<!DOCTYPE HTML PUBLIC “-//W3C [13]//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

That information can be typed on a single line, or with a line break after EN”. Be sure to place it at the top of every page. The article Fix your site with the right DOCTYPE! published on www.alistapart.com lists all the DOCTYPEs you might want to use.

The most important page creation step is to check that your HTML is valid. There are numerous tools that you can download and run to test your code’s validity – some HTML editors even have such tools built in – or you can use one of the many online validators, the most common of which is the W3C’s own validator (validator.w3.org). A validator will tell you how you need to adjust your HTML in order to make it compatible with DHTML techniques. The ultimate reference for what constitutes valid HTML is the HTML recommendation (www.w3.org/TR/html4). It’s complex and detailed, but you’ll find the answers there. As mentioned above, browsers rely on a standard that describes how validated HTML should be interpreted. However, there are no standards to describe how invalid HTML should be interpreted; each browser maker has established their own rules to fill that gap. Sticking to valid HTML means that any problems you find are deemed to be bugs in that browser – bugs that you may be able to work around.

Step up to semantic HTML

In addition to its validity, your HTML should be semantic, not presentational. What this means is that you should use HTML tags to describe the nature of an element in your document, rather than the appearance of that element. So don’t use a <p> tag if you mean, “put a blank line here”. Use it to mean, “a paragraph begins here” (and place a </p> at the end of that paragraph). Don’t use <blockquote> to mean, “indent this next bit of text”. Use it to mean, “this block is a quotation”. If you mark up your HTML in this way, you’ll find it much easier to apply DHTML techniques to it further down the line. This approach is called semantic markup – a fancy way of saying, “uses tags to describe meaning”.

Let’s look at a few example snippets. First, imagine your website has a list of links to different sections. That list should be marked up on the basis of what it is: a list. Don’t make it a set of <a> tags separated by <br> tags; it’s a list, so it should be marked up as such, using <ul> and <li> tags. It might look something like this:

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”about.html”>About this Website</a></li>

<li><a href=”email.html”>Contact details</a></li>

</ul>

You’ll find yourself using the <ul> tag a lot. Many of the items within a website are lists: a breadcrumb trail is a list of links, a menu structure is a list of links and a photo gallery is a list of images. If your list contains items with which comments are associated, it should be marked up as a definition list:

<dl>

<dt><a href=”index.html”>Home</a></dt>

<dd>Back to the home page</dd>

<dt><a href=”about.html”>About this Website</a></dt>

<dd>Why this site exists, how it was set up, and who did it

</dd>

<dt><a href=”email.html”>Contact details</a></dt>

<dd>Getting in contact with the Webmaster: email addresses and phone numbers</dd>

</dl>

Remember: the way your page looks isn’t really relevant. The important part is that the information in the page is marked up in a way that describes what it is. There are lots of tags in HTML; don’t think of them as a way to lay out information on your page, but as a means to define what that information means. If you don’t use HTML to control the presentation of your pages, how can you make them look the way you want them to? That’s where Cascading Style Sheets come in.

Adding CSS

Cascading Style Sheets (CSS) is a technique that enables you to describe the presentation of your HTML. In essence, it allows you to state how you want each element on your page to look. An element is a piece of HTML that represents one thing: one paragraph, one heading, one image, one list. Elements usually correspond to a particular tag and its content. When CSS styles are used, DHTML pages can work on the appearance and the content of the page independently. Imagine you want your main page heading (an <h1> tag) to be displayed in big, red, centred text. You should specify that in your style sheet as follows:

h1 {

font-size: 300%;

color: #FF0000;

text-align: center;

}

See More information for some links to introductory tutorials on CSS, which should help if the above lines don’t make a lot of sense to you.

The key point here is to remove the presentation aspects from your HTML and put them into your style sheet. If, for example, you made your page heading bigger by putting <font> tags in your HTML, then you’d need to paste those tags into every page on which a header was used. By making your HTML semantic and moving the page’s presentation into CSS, you can control the look of headings across the whole site through a single style sheet.

Of course, it’s not quite as easy as that. Although the full definition of CSS enables you to do some fairly amazing things, and to control the presentation of your pages to a high degree, not every browser supports everything that CSS has to offer.

In order to know about the differences in browser support for CSS, you need to know what CSS can do. There are two sorts of browser incompatibilities: things that a given browser doesn’t implement and things that it implements incorrectly.

Missing implementations are relatively easy to deal with: don’t rely on such rules if you want your CSS to work in browsers that have failed to implement them. This can be a pain, especially since the most commonly used browser in the world, Internet Explorer for Windows, has some serious holes in its CSS support; however, this “solution” is often a necessary compromise.

Badly implemented standards are a bigger problem. In such cases, the browser gets it wrong. You’ll need to understand exactly what each browser does wrong, and how you can work around those failings. You’ll pick up this knowledge as you go along. Workarounds for CSS bugs in different browsers are usually achieved using CSS hacks. These hacks take advantage of the bugs in a browser’s CSS parser to deliver specific style sheet directives that work around its poor implementation of the standards. A huge variety of these CSS hacks is documented for each browser in various places around the web.

Learning to understand and adapt to the vagaries of CSS handling in various browsers is part of the work that’s required to use CSS effectively. While it can be a lot of work, many CSS bugs only become apparent with the complex use of this technology; most CSS is handled perfectly across platforms and browsers without the need for hacks or complex tests. While CSS is powerful, it doesn’t quite give us true flexibility in presentation. The capabilities of CSS increase all the time, and more “interactive” features are constantly being added to the CSS specification. However, it’s not designed for building truly interactive websites. For that, we need the final building block of DHTML: JavaScript.

Adding JavaScript

JavaScript is a simple but powerful programming language. It’s used to add dynamic behaviour to your website. HTML defines the page’s structure and CSS defines how it looks, but actions, the things that happen when you interact with the page are defined in JavaScript. JavaScript works with the Document Object Model to attach actions to different events (mouseovers, drags, and clicks). The ‘More information’ box below has some links to a few JavaScript tutorials if you need them.

MORE INFORMATION



www.sitepoint.com/article/css-is-easy

SitePoint’s easy introduction to the world of CSS is a great place to start.

www.w3schools.com/css

W3Schools’ CSS tutorials are helpful whether you’re learning from scratch, or simply brushing up on your knowledge of CSS.

www.csszengarden.com

The CSS Zen Garden is a marvellous demonstration of the power of cascading style sheets alone. It has a real wow factor!

www.centricle.com/ref/css/filters

This comprehensive list of CSS hacks shows you which browsers will be affected by a given hack, if you need to hide certain CSS directives (or deliver certain directives) to a particular browser.

www.positioniseverything.net

This site demonstrates CSS issues in various browsers and explains how to work around them.

www.css-discuss.org

The CSS-Discuss mailing list is ‘devoted to talking about CSS and ways to use it in the real world; in other words, practical uses and applications.’ The associated wiki is a repository of useful tips.

www.sitepoint.com/books

If you’re after something more definitive, HTML Utopia: Designing Without Tables Using CSS is a complete guide for the CSS beginner. The CSS Anthology: 101 Tips, Tricks & Hacks is a perfect choice if you prefer to learn by doing. A lot of tutorials on the web cover JavaScript. Some explore both DHTML and the DOM, while others do not; you should try to find the former.

www.sitepoint.com/article/javascript-101-1

This tutorial provides an introduction to the basics of JavaScript for the total non-programmer. Some of the techniques in this article aren’t as modern as the alternatives we’ve presented here, nonetheless you’ll get a good feel for the JavaScript language itself.

www.quirksmode.org

Freelance web developer Peter-Paul Koch’s list of CSS and JavaScript techniques and scripts covers a considerable amount of useful ground in this area.

A simple JavaScript example

Here’s a simple piece of JavaScript that converts a text field’s value to uppercase when the user tabs out of the field. First let’s see the old, bad way of doing it:

<input id=”street” type=”text” onchange=”this.value = this.value.toUpperCase();”>

Here we’ll recommend a more modern technique. First, the HTML:

<input id=”street” type=”text”>

Second, the JavaScript, which is usually located in the <head> part of the page:

<script type=”text/javascript”>

function uppercaseListener() {

this.value = this.value.toUpperCase();

}

function installListeners() {

var element = document.getElementById(‘street’);

element.addEventListener(‘change’, uppercaseListener,

false);

}

window.addEventListener(‘load’, installListeners, false);

</script>

The first function does the work of converting the text. The second function makes sure that the first is connected to the right HTML tag. The final line performs this connection once the page has loaded in full. Although this means more code, notice how it keeps the HTML content clean and simple.

Get some tools!

A good JavaScript development environment makes working with JavaScript far easier than it would otherwise be. Testing pages in Internet Explorer (IE) can leave something to be desired; if your page generates JavaScript errors, IE isn’t likely to be very helpful at diagnosing where, or what, they are. The most useful, yet simple, tool for JavaScript debugging is the JavaScript Console in Mozilla or Mozilla Firefox. This console will clearly display where any JavaScript error occurs on your page, and what that error is. Mozilla Firefox works on virtually all platforms, and it’s not a big download. It also offers better support for CSS than Internet Explorer, and should be part of your development toolkit. Beyond this, there’s also the JavaScript debugger in Mozilla, which is named Venkman. It can be useful, but be aware that it takes a bit of setting up. In practice, though, when you’re enhancing your site with DHTML, you don’t need anything as complex as a debugger; the JavaScript Console and judicious use of alert statements to identify what’s going on will help you through almost every situation.

Another tool that’s useful is a good code editor in which to write your website. Syntax highlighting for JavaScript is a really handy feature; it makes your code easier to read while you’re writing it, and quickly alerts you when you leave out a bracket or a quote. A good editor will seriously speed up your coding work. Plenty of powerful, customisable editors are available for free. But, if you’re currently writing code in Windows Notepad, have a look at what else is available to see if any other product offers an environment that’s more to your liking. You’ll want syntax highlighting, as already mentioned; a way to tie in the external validation of your pages is also useful. Textpad and Crimson Editor are Windowsbased editors that cover the basics if you’re developing on a Windows platform; Mac users tend to swear by BBEdit; Linux users have gedit or Kate or vim to do the basics, and there’s always Emacs. JavaScript is the engine on which DHTML runs. DHTML focuses on manipulating your HTML and CSS to make your page do what the user wants, and it’s JavaScript that effects that manipulation. This article outlines the very basic building blocks of DHTML. Read DHTML Utopia: Modern Web Design Using JavaScript & DOM by Stuart Langridge (www. sitepoint.com) and discover the basic techniques you can use to start making your websites dynamic, plus advanced scripting techniques for building menus, forms and even whole dynamic web applications.

About the author

Stuart Langridge has been playing with the web since 1994, and is quite possibly the only person in the world to have a BSc in Computer Science and Philosophy. He invented the term ‘unobtrusive DHTML,’ and has been a leader in the quest to popularise this new approach to scripting. When not working on the web, he’s a keen Linux user and part of the team at open-source radio show LUGRadio. He likes drinking decent beers, studying stone circles and other ancient phenomena, and trying to learn the piano. Stuart contributes to Stylish Scripting: SitePoint’s DHTML and CSS Blog.

Building a Web Site Poll Using Ajax

Paul Hudson reveals how to add a poll to your pages using AJAX power

Just when you thought it was safe to open your web browser, JavaScript is back with a vengeance. Admit it: when you moved from clientside to serverside programming, you breathed a sigh of relief at leaving cross-browser problems, broken scripting implementations and technology acronyms behind. But now that web site back-ends have been revolutionised through powerful new scripting languages, it’s time to focus on the front end.

AJAX – in case you didn’t see our feature last issue, is an acronym for Asynchronous JavaScript and XML – is about eliminating the lack of interactivity that we’ve all grown used to on the web. If you have a document that may change while a user is viewing it (an email inbox, for example), then you would normally have had to set a HTML meta tag to refresh every minute, or force users to click Refresh by hand. With AJAX, we can program the page to ping a server to check for updates, download any new information and insert it into the page.

Nothing about AJAX is new: XML has been around for several years and JavaScript for longer. The difference is that a special JavaScript object, known as XMLHttpRequest, is being bound by JavaScript and used to send and receive XML. This object isn’t new either, but has only started to see proper use with AJAX.

To check whether a page has changed, our HTML page calls a JavaScript function that sends off an XML request to our server. This is processed and a response is sent back in XML saying what has changed. PHP fits into the AJAX equation as the serverside parsing mechanism: it accepts the client XML, runs the necessary database checks, and sends the results back down to the client. This close interrelationship of languages means you need to be up to scratch not only on PHP, but also on JavaScript and XML.

Copy the code:

We are going to take you through a very basic example of AJAX code with the aim of creating a web poll that will enable your site users to vote on an issue:

Our mission this issue is to produce an AJAX web poll using PHP, MySQL, JavaScript and good old HTML. Once you’re more proficient with AJAX you’ll see there are many ways of doing the same thing, including lots of shortcuts. Take your time: learn the standard way of doing things first, then cut corners later! For this code to work, you need to choose a relatively modern web browser: Safari 1.2, Firefox 1.5, IE 6 and other browsers of that level are all AJAX-ready.

1. The first thing we’re going to look at is how to create an instance of the XMLHttpRequest (XMLHR) object. Surprisingly enough, this was invented by Microsoft back in the IE5 days, and was implemented as an ActiveX object. Most other web browsers don’t use the ActiveX system for embedding objects into pages, so they have their own method of creating an XMLHR object. Fortunately, IE7 (due out in Windows Vista) will drop the ActiveX method and switch to the de facto standard used by other browsers. Until then, we need to write a function that detects the browser and creates the object in the correct way. Save this in ajax.js:

function createAjax() {

var ajax = false;

if(window.XMLHttpRequest) {

ajax = new XMLHttpRequest

();

} else if(window.ActiveX

Object) {

ajax = new ActiveXObject

(“Microsoft.XMLHTTP”);

}

return ajax;

}

This will create an XMLHttpRequest on any modern browser, as long as the IE browser has ActiveX enabled.

2. We can now go ahead and write a script that creates a new XMLHR object with the createAjax() function, then requests content from our server and loads it into the page. The full code to do this is in the index. php files in directory 2 of the PHP tutorial file on the CD, but we want to explain what these important lines do:

var http = createAjax();

if (http) {

http.open( get , check.

php );

http.onreadystatechange =

handleResponse;

}

function handleResponse() {

if (isAjaxReady(http)) {

response = http.response

Text;

document.getElementById

( mycontent ).innerHTML

= response;

}

}

When we’ve created our object and made sure it’s working, then call its open() function. This tells our XMLHR object what HTTP method it should use (get, rather than post or head) and what file it should request (check.php). We also set its ‘onreadystatechanged’ property to be ‘handleResponse’, which means that when the ready state (the current state of our XMLHR object) is changed, the handleResponse() function will be called. The ready state changes when the object is doing something, such as sending data or receiving data. By attaching ourselves to this state change, it’s possible for us to monitor what it’s up to and catch when it’s received some data.

The handleResponse() function gets called whenever the state of our XMLHR object changes. The first thing that happens is a call to the isAjaxReady() function, which we’ve added to your ajax.js file. The XMLHR object has several states: zero is uninitialised, one is loading, two is loaded, and so on. What we care about is state four, which means finished, and is used when the XMLHR object has sent its data and received a response back from the server. The isAjaxReady() function is just a quick one-liner to check whether the XMLHR object is in state four, and returns true if that’s the case.

If we’re in state four, then we’re able to read the response we got back from the server and print it out. In index.php you’ll see there’s a DIV with the ID ‘mycontent’. This is where the output from the XMLHR object gets stored. The request itself just loads check.php, which, if you look on your CD, you’ll see that it contains a call to phpinfo() to send back a lot of HTML. If everything has worked as it should, you’ll be able to see it embedded inside index.php thanks to AJAX.

3.Receiving some text and printing it out is hardly interesting and not at all useful, but AJAX can do so much more. If you look in the directory 3 on this issue’s CD you’ll see the file sql.txt. Take the SQL from there and insert it into a database server, because we’re now going to have our PHP script read that data, convert it into XML, send it across the web to our XMLHR object, then parse and display it using JavaScript. There are two interesting code sections to examine here. The first is check.php, which is now useful:

<?php

header(“Content-type: text/

xml”);

mysql_connect(“localhost”,

“dotnet”, “blabla69”);

mysql_select_db(“dotnet”);

$result = mysql_query

(“SELECT Question, Answer1,

Answer2, Answer3, Votes1,

Votes2, Votes3 FROM poll

ORDER BY ID DESC LIMIT

1;”);

extract(mysql_fetch_assoc

($result), EXTR_PREFIX_ALL,

“vote”);

echo “<vote>”;

echo “<question>$vote_

Question</question>”;

echo “<answer><value>$vote_

Answer1</value><votes>$vote

_Votes1</votes></answer>”;

echo “<answer><value>$vote_

Answer2</value><votes>$vote

_Votes2</votes></answer>”;

echo “<answer><value>$vote_

Answer3</value><votes>$vote

_Votes3</votes></answer>”;

echo “</vote>”;

?>

4. You’ll need to edit the MySQL connection data to work on your local system. The call to mysql_query() loads the most recent poll in your database, which is extracted and set inside some basic XML. There’s no DTD, which means there’s little point trying to reference elements by IDs because XML has, as yet, no innate knowledge of what an ID is, unlike HTML and XHTML. The second piece of interesting code is in index.php, which has now been upgraded to handle XML rather than plain text:

var response = http.response

XML;

pollQuestion = response.get

ElementsByTagName( question )

[0];

pollAnswers = response.get

ElementsByTagName( answer );

pollAnswerText = “”;

for (i = 0; i < pollAnswers.

length; ++i) {

pollAnswerValue = pollAnsw

ers[i].getElementsByTagName

( value )[0].firstChild.

data;

pollAnswerVotes = poll

Answers[i].getElementsByTag

Name( votes )[0].firstChild

.data;

pollAnswerText += <input

type=”radio” name=”vote”

value=” + (i + 1) + ” />

+ pollAnswerValue + “ (“ +

pollAnswerVotes + “)<br

/>”;

}

new_html = <form method=

”post” action=”vote.php”

><strong>Question: ;

new_html += pollQuestion.

firstChild.data + :</strong>

<br /> + pollAnswerText;

new_html += <input type=

”submit” value=”Vote!” /></

form> ;

document.getElementById( mycon

tent ).innerHTML = new_html;

The first line contains a subtle but important difference: we’re not using http.response any more, but http.responseXML instead, which gives us an object to work with rather than a text string. This object is quite difficult to use, precisely because the lack of IDs for direct reference mean we have to pull out tags by name using getElementsByTagName(), then refer to the first item in that array (the [0] part), even if there’s only one such element in the XML.

Most of the code is there to pull values from the XML (specifically the question and answer tags) and convert them into an HTML form where users can submit their answer. This form is set up to be sent to vote.php, which means that we’re using AJAX to read the data but plain old HTML forms to submit the data.

Of course, if we’re going to do an AJAX web poll we ought to go the whole hog and send and receive data. The code for this is in directory 4 on your CD, and you’ll see that check.php is still there to read the vote data, but there’s now also vote.php, which saves votes back to the database. There’s a minor change in check.php: the <vote> element now has an ID attribute so we know which poll people were voting in. As mentioned already, this isn’t the same as the HTML/XHTML ID attribute that can be used to identify elements uniquely; instead, this is just a data field, like anything else.

The index.php file has also been upgraded somewhat, because we now need to make two calls through XMLHR: one to read the poll, and another to write our vote. It’s not tricky to re-use XMLHR objects for multiple requests, but when you’re learning it’s easiest just to keep a clear separation between XML requests. As a result, in the code you’ll see that loadVote() creates an XMLHR object, doPollRead() retrieves the data, handlePollRead() parses the XML and displays it, and doVoteWrite() creates a fresh XMLHR object and submits the vote. It also re-calls loadVote() and doPollRead() so that the poll updates once you’ve voted.

The only other part of the code that needs any explanation in the new index.php is the following section:

for (i = 0; i < vote_options.

length; ++i) {

if (vote_options[i].checked

) item_selected = i + 1;

}

if (http) {

http.open( get , vote.

php?Vote= + pollID + &

Answer= + item_selected);

}

The first part loops through our vote radio buttons and finds the one that’s selected. Note that we add one because JavaScript arrays are zero-based whereas out database fields are Votes1, Votes2 and Votes3. The second part is where we send our selection over to vote.php using the HTTP GET method. This requires us to separate our URL from our data with a question mark, and also to separate each field with ampersands, as per normal.

We’ve only had space to cover the absolute core parts of the AJAX code here – to learn more, read the code on your CD.

Boosting Your Site Traffic

If your shopping cart is scaring off sales, you might never know – unless you track what works and what doesn’t. Gary Marshall discovers how metrics can shed light on your site

She’s spotted a must-have product on your pages, and the credit card is poised. She clicks on the checkout button… and discovers that you want her entire life story before you’ll sell anything to her. “Sod that,” she says. “I’m off to take a look on Amazon”. Another customer lost.

When you run a web site, knowledge isn’t power: it’s money. Spotting problems at an early stage can stop visitors being scared off, while knowing who your visitors are, where they come from and what they’re doing can help boost your search engine rankings, improve the performance of adverts and alert you to possible problems such as bandwidth leeching and other unpleasant online activities. Best of all, you don’t need to spend a fortune to get that information – and in many cases, everything you need is free.

Going metric

Analysing site traffic is known as ‘metrics’, and there’s a huge range of metrics packages to choose from. The simplest form of metrics is a basic hit counter, which tells you how many times a page has been viewed. However, if you want information you can actually use then you’ll need something a bit more powerful.

Many hosting firms include metrics as part of their package, so for example if you host your site with 1&1 (www.oneandone.co.uk) you can see a range of statistics including the most popular pages, the browsers your visitors use and where in the world they come from. Even if your host doesn’t provide such packages it’s easy to get the same features online: Site Meter (www.sitemeter.com) and eXTReMe Tracking (www.extremetracking.com) both provide free stats packages that can provide an insight into what your visitors have been up to. In both cases you simply sign up for a free account and paste a bit of code into the HTML of the pages you want to track.

Both services are useful, but there are some limits to what the free accounts actually do. In the case of Site Meter you need to put a logo or counter on your page, which means anyone can click on it and see the stats; you’re also limited to viewing details of the last 100 visitors, which means the free account isn’t suitable for busier sites. It doesn’t track the search terms people use, either, so it won’t help you optimise your pages for better search engine performance, and you can’t see what sites referred people to your pages.

eXTReMe Tracking is more generous. It shows the search engines and search terms people are using to find your site, and it also provides information about your visitors’ locations. With both services you can pay a little extra for more detailed statistics, so for example if you spend $6.25 (about £4) per month with eXTReMe you get additional information such as detailed visitor analysis, which enables you to see how individual visitors arrived at your site, how long they spent there and what pages they looked at.

Before spending money on such services, though, it’s a good idea to look at some of the free options. In many cases you can get everything you need without paying a penny.

Help from your host

We’ve already mentioned that 1&1 provides a metrics package as part of its hosting plans, and you’ll find that rival firms such as Fasthosts do, too. While the specific packages differ from host to host, the products they use tend to cover the same basic information: where your visitors come from, which pages they’ve been looking at, what sites sent them to you and which bits of your site are the most popular. You can also see where they come from, although this data is rather simple: typically you’ll be able to see your visitors’ ISPs, but not the particular location they’re connecting from. For detailed geographical information you’ll need a more powerful analytics program such as a package from WebTrends, NedStat or Google. However, there’s another way to get data from your host: download the server logs and analyse them yourself.

Your web server keeps a log of traffic to and from your site, and you can download the log file to your computer to analyse it yourself. Two of the most popular log file analysers are Analog (www.analog.cx) and Webalizer (www.mrunix.net/webalizer), both of which are free (Webalizer is open source) and run on all the major operating systems. Once you’ve installed the software it’s just a matter of pointing it at the log you want to analyse and waiting a few seconds for the program to generate an HTML report that you can view in your browser. In both cases you can then see which URLs are referring people to your pages and what terms your visitors are using in search engines; if you use Webalizer, you can also see which pages are proving most popular, which pages your visitors tend to arrive at and which pages result in the most exits from your site. Exit data is particularly useful for ecommerce sites: if one of the top exit pages is a key component of your checkout system, it suggests that something is scaring people off between placing an item in the shopping basket and actually paying for it.

Advanced analysis

Being able to see where your visitors come from and what they do is useful for any site, but when your site is your business then you need to know even more. Typically, large sites need to monitor the performance of advertising, special offers or promotions, and to identify problems such as registration forms that scare off potential customers.

For large sites, firms such as WebTrends (www.webtrends.com) and NedStat (www.nedstat.co.uk) can track almost anything. WebTrends describes a few scenarios: “The business analyst… knows that customers who visit the site three to five times are twice as likely to buy as those who have visited once, and the customers who have visited more than ten times in the last week aren’t likely to buy at all – they’re almost always just looking.” Meanwhile the email marketer knows that 95 per cent of list recipients have yet to buy, the online marketer can see that the most popular paid keyword campaigns include phrases such as ‘cruises from Miami’ and the site designer can see that ‘a large number of people are leaving the conversion process on the page where they select airfare’.

Dedicated metrics suites are overkill for modest sites and could prove expensive. Prices start at a few hundred pounds, but metrics packages are typically priced according to traffic volumes – so the busier your site, the more expensive the metrics become. However, medium-sized sites can get similar functionality for free – if you can get an invite.

If your site serves up fewer than five million page views per month (or if you have an AdWords account) then you can get Google Analytics (analytics.google.com) for free. However, as with many Google services the Analytics service is only available to a select few, with invitations to join handed out on a first-come, first-served basis. As you’ll see from our tutorial below, Getting Started With Google Analytics, it’s worth the wait: with a bit of tweaking you can use it not just to track your traffic, but to monitor any clickable content. You can even set filters to exclude clicks from particular IP addresses (such as your office network) or to turn dynamic URLs into something more readable. There’s only one potential problem: the service relies on a short piece of JavaScript code, so you won’t be able to track users who browse with JavaScript disabled.

One of Google Analytics’ most powerful features is its Goal Analysis. A goal is a page you want visitors to end up at, such as your ‘thanks for downloading’ page or your ‘thanks for subscribing’ page. You can define up to four pages as goals in Google Analytics, and you can also define ‘funnel’ pages, which are the pages leading up to a goal. For example, to get to the ‘thanks for downloading page’ visitors might first visit the list of downloads, then the download instructions page. By defining the goal and the funnel process you can see whether any visitors are leaving midway through the process, which can highlight potential problems with particular pages. You can also see conversion rates for each goal, so for example, you’ll be able to see what percentage of visitors end up downloading your file or subscribing to your newsletter.

Whether you’re monitoring a few hundred visitors or hundreds of thousands, site metrics enable you to see what works on your site, what doesn’t, and where you should be concentrating your energies – whether that’s improving your search engine rankings, spotting problem pages, making your site stickier or just ensuring that you don’t exceed your hosting firm’s monthly data transfer limit. Every single visitor to your site is trying to tell you something, and metrics can make sure you receive their message loud and clear.

Add A Search Engine to your Site - Google

Rob Buckley shows you how to make your sitey the sharpest search engine of them all using Google’s Co-op technology. The secret behind it? Refinement and customisation

When you think of searching, more often than not, you think of Google. It has even become a verb, despite the best attempts of its legal department to prevent it – have you ‘Googled’ someone today? But it has become much more than just a web search engine. Because you can now embed it into your website, it’s also an easy way to add a search facility to your pages.

The ability to use Google as a site search engine has been around for a while now, and is reasonably common. As long as Google can access all the pages on your site and it updates its indexes as often as you update your pages, it’s a great, hassle-free and cheap tool to make your site’s content available to visitors, whether you’re using static pages or a Content Management System.

But recently, Google created a new version of its “embeddable” search engine. As well as being customisable so that it matches your site’s look and feel, Google’s Co-op custom search engine can be set to search a list of sites as well as your own, or it can search the whole web. You can also preload it with search terms so that it favours particular kinds of searches. If your site is about karate, for example, and someone searches for “belt”, the results of the search can favour karate belts, rather than those available from Marks & Spencer.

About the author:

Name: Rob Buckley
Site: www.the-word-is-not-enough.com
Areas of expertise: XHTML, PHP and MySQL
If I were a kitchen implement… I’d definitely be a whisk

Click here to download tutorial PDF

From Mess to CSS - by .net Magazine

The ubiquity of the web makes it easy to forget how young the art of web design is. It’s just a little over ten years since a ground breaking aspect of browser markup (the language of web design) was introduced by a privately funded version of Mosaic, which enabled web page authors to align site content using the CENTER tag.

From this humble beginning, it is almost incredible how sophisticated web design and page layout has become in such a relatively short time span. In 1996 typographer David Siegel, in a bid to emulate print design, instructed designers of the time to use tables to lay out pages, filling cells with content and stretching single pixel GIFs to achieve the desired white space of the ultimate killer site.

Yet within two years Siegel had published The web is dead and I killed it. He was alluding to the fact that although his designs relied on table layouts and HTML hacks like the single pixel GIF spacer, sites should never have been built this way. This issue, Steve Pashley shows you how to bring your site bang up to date by converting your old tables-based layout to CSS...

As increasing numbers of site builders are aware, using Cascading Style Sheets (CSS) is the preferred way to lay out pages and tables should only be kept for tabular information like calendars. Yet, while the web building community has largely been happy to adopt CSS to style elements and select fonts, some are still unwilling to let go of the tables layout of old.

The most common explanation for this is that CSS layout lacks an intuitiveness that using tables seems to offer - once you’ve sketched your page framework by deciding how many tables will go where, it’s simply a case of dropping content into the gaps. By contrast, linking to an external file, learning another language’s syntax and round-tripping between an HTML editor, CSS file and browser can seem, at best, convoluted and at worst technologically intimidating.

So why bother? Well, first of all, the main benefit of turning to CSS for page layout is that you can keep your content separate from your design. Accessing the web today entails more than simply using Internet Explorer or Firefox on a PC; phones and other handheld hardware jostle with printers and other peripherals for access to your content while screen readers make a nonsense of many table-based designs. Using a stylesheet for your design means you can select an appropriate design for whichever software or hardware combination is downloading your page.

Imagine how much time you can save when you want to change the colour scheme of your site if you only need to edit one file, rather than wading through the HTML on every one of your pages. Similarly when you’re building pages you can reuse a design by calling a CSS rule instead of recoding the layout or style again. And who hasn’t had to carefully deconstruct a page to determine where that closing td tag should be after seeing a design collapse in Mozilla? This coding leanness is reflected in download times and server hits. Not only will your pages contain less code but the eradication of tables and spacer images will mean that pages render more quickly with less files to be delivered.

Let’s go to work
What should become evident is that laying out your page with CSS is a lot simpler than many site builders currently believe. To demonstrate this we’ll take a familiar table layout and convert it to CSS in three steps:

• Firstly we’ll identify the key design areas of the page


• Then we’ll strip out all the unnecessary HTML


• Finally we’ll use CSS to control the design of the page

The goal with any design using CSS is to finish with mark-up that has a strong structure delivered in a sequential order (important for those using screen readers), which looks as close as possible to the original table layout.

Deconstructing the design
You’ll probably already be familiar with the building blocks of your own page design. If you aren’t then there will be some good indicators in your existing layout. If you’re using a master table to lay out your page then turn the borders on by setting the width value to five or more. Similarly if you’re using SSI (Server Side Includes) then you’ve probably already thought about how best to carve up your design.

If we look at the example shown in the image on the right then we can see that the main areas are the masthead, the navigation strip, the right-hand content area and a footer area. We’ll add some HTML comments to these areas so that we can easily distinguish between them later. Be sure to add further comments where these sections end as well.

Next we need to strip out all formatting HTML. Strip out all the tables, font tags and spacing hacks (i.e. line breaks and spacing GIFs) until only contextual tagging remains. This means titles in header tags and text in paragraphs, lists and hyperlinks. You should now be left with just content and comments.

Building it back up
To understand how to build CSS layouts we first need to understand the box model. For display purposes, this means that every element on the page is a rectangular content area surrounded by margins, borders and padding. We can then position these elements using the 'float’ property. Floating an element will move it to the right or left of a line according to which value you give to the property, and allow surrounding content to flow around it. We’ll use it to position our column chunks, namely navigation and content.

If you don’t want an element to wrap around floating objects then we can use the 'clear’ property, with values right, left or both. We can see how this works with our footer section.

We use div (division) containers for our table-replacement containers. These are called block level elements in CSS mark-up, meant for largish blocks of mark-up and effectively force a line break before and after content. We use the span tag for smaller bits of content as it is an inline element, which means it won’t disrupt layout.

The last thing to note before we begin building our layout is that without the correct document type declaration your page is unlikely to render correctly in most modern browsers. As we’re using XHTML we’ll use the following with a correct language declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang=“en” xml:lang=“en”>
To begin with replace opening and closing HTML comments with opening and closing div tags. Be sure to include identifying ID values as well. In our example we’ve now got the following code:
<div id=“header”></div>
<div id=“navigation”></div>
<div id=“content”></div>
<div id=“footer”></div>

A quick check of our page in a browser reveals that it’s looking a bit bare. Fear not, we’ve already made some progress in terms of accessibility. Notice that we have a good sequential order for our information, which is handy as this is the order in which a screen reader will relate information back to a user.

Let’s begin to add some style to our stylesheet. To make it more simple we’ll put the stylesheet in the head section of the HTML page, in this example. However, if you’re familiar with stylesheets then it’s much better to link to your stylesheet externally. By doing this, your site has its CSS in one location that is referenced by all your web pages. This reduces document weights and makes them quicker to download. We add the following to the head section:

<head>
<title>Layout Example</title>
<style type=“text/css”>
</style>
</head>

The area between the style tags is where we’ll add our CSS. We’ll give the page some basic style by adding font-size, font-family and colour properties to the body selector’s declaration block. Notice that the fontsize value, 'small’ is a relative one rather than something specific, such as 12pt, an important accessibility consideration. This allows users to adjust the size of the text in their browser if they wish. We’ll add the background image here - a tiny GIF image that browsers will tile vertically and horizontally to cover the screen. For the purpose of clarity, though, we’ll comment this rule out until we’ve finished the rest of the stylesheet.

body {
font-family: Verdana, Geneva, Arial,
Helvetica, sans-serif;
font-size: small;
color: #2f4f4f;
background-image: url(images/backer.gif);
margin: 0px;
padding: 0px;
}

Let’s look at the header section. The original uses an image to create a background and display the name of the web site but we’re going to make it more accessible. We’ll give the div header a background image, and in order for it to display fully we’ll need to give it the same height and width dimensions as the image. We’re going to add the white gutter around the heading graphic by creating a four-pixel-wide white border. Importantly this must be deducted from the overall width of the header div. As the width of our layout is 700 pixels we must subtract the eight pixels of the border to get a value of 692 pixels.

#header {
background-image: url(images/
header_blank.jpg);
width: 692px;
height: 60px;
border: 4px solid white;
}

Now, rather than have the site name displayed as part of the overall image, we’ll render it as text. We’ll place the site name in an h1 tag and declare a font size, font family and colour for the text. If you take a look at the stylesheet you’ll be able to see that the selector has been appended by the div id. This style will now only be applied to h1 tags used within a div that has an id of 'header’.

To position it in the same place as before we’ll move it from the top and left by adding padding-top and padding-left properties to the declaration block and specifying the appropriate values. The site name will now be visible to screen readers and anyone else that might view the page with the images turned off.

#header h1 {
color: white;
font-size: large;
font-family: Arial, Helvetica,
sans-serif;
margin-left: 34px;
margin-top: 14px;
}

Next we come to the navigation section. If we reference the HTML table design we are able to see that the navigation was included in a table cell, which was 216 pixels wide with cell padding of four pixels. We can replicate these measurements by giving the navigation div the same pixel width and a white border measuring four pixels to the left. Give the div a background colour.

#navigation {
width: 216px;
margin-left: 4px;
background-color: #c8d8e8;
float: left;
}

To style the links and position them within this blue box we’ll create a paragraph style specific for the navigation div, the same way we did with the h1 tag for the header. To position our links we’ll move the paragraph in from the left and the top by declaring those properties in our CSS rule and adding the appropriate values. The style of the text is achieved by adding font-size, font-weight and font-family properties.

#navigation p {
margin-top: 45px;
margin-left: 30px;
font-size: medium;
font-weight: bold;
font-family: Arial, Helvetica,
Sans-serif;
width: 125px;
border: 1px solid #2f4f4f;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 20px;
}

The content area can be created in much the same way. We’ll create a rule that builds a blue background for the copy, 472 pixels wide with white four-pixel borders to the left and right. Let’s look at the page so far. Here we can see the default behaviour of consecutive divs; a vertical stack to the default left alignment.

Obviously this needs to change. To position the div we need to add the float property with the value left to the navigation div. This wraps the content to the left of the navigation. It also enables the content div to wrap below the navigation as well, which we don’t want. To remedy this and to create two columns we need to float the content div to the left.

#content {
width: 472px;
margin-left: 4px;
margin-right: 4px;
padding-bottom: 70px;
float: left;
}

If we look at the original table-based design for the page you can see that a nested table is used to create margins around the content, 20 pixels to the left and 30 to the right. Using CSS we can apply this to the text selectors directly. The content title is placed in an h2 tag while the content is wrapped in paragraph tags. We’ll create id specific tags for this content:

#content p {
padding-left: 20px;
padding-right: 30px;
}
#content h2 {
padding-top: 45px;
padding-left: 20px;
font-size: xlarge;
font-family: Arial, Helvetica,
sans-serif;
font-weight: normal;
}

The contact details were placed in their own table so that they could be wrapped by the content and to creating a border around the content. We’ll create it by nesting its div within the content and then floating it right. We apply spacing using margins and font properties as before.

blockquote {
width: 160px;
margin-left: 10px;
margin-right: 20px;
font-size: small;
font-family: Verdana, Arial,
Helvetica, Sans-serif;
font-weight: bold;
padding-bottom: 20px;
float: left;
}

The coloured border, which required the use of a table and all those GIFs can be achieved using one line of the declaration, then we can move the text away from it by creating padding.

Finally the footer section is created in much the same way as the header, with a four-pixel white border, and a width running across the two columns above. However, if we check in the browser we see something unexpected happening. The content div is continuing to wrap around subsequent elements. To stop this happening we use the clear property. Adding clear:both stops content wrapping on either side of the footer and returns content to its correct position of running across the entire layout.

We can now add text styles and colour as before. We can change some of the text to white by wrapping them in span tags.

#footer {
width: 692px;
border: 4px solid white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-size: x-small;
background-color: #a7c4d8;
clear: both;
}
#footer span {
font-weight: bold;
color: white;
}

Finally we add the background on to the body rule and that should be the design finished. But it’s clearly not; look how the navigation column is no longer extending as far down the page as the content div. This highlights one of the biggest drawbacks to CSS design in contrast to table-based design. Tables can move and stretch in response to each other, whereas CSS layout is largely static.
The way round this particular problem is to wrap the entire layout from header to footer in another div that will tile an image to give the appearance of our coloured columns.

#wrapper {
width: 700px;
background-image: url(images/
contentbg.gif);
background-repeat : repeat-y;
}

If we now make the navigation and content divs transparent by removing the background colours then we’ve got our columns of equal length. Of course it’s not an ideal solution, the correct way to progress is to stop designing as if for print and work to the strengths of CSS instead.

And so we’re done! Not only have we emulated our original design, give or take a few pixels, we’ve also slimmed down our file and improved accessibility. Our page mark-up is also clearer and easier to maintain. Experiment with the techniques in this article - practice will make CSS layout second nature, and be sure to check out the resources highlighted on these pages for further guidance and inspiration.

 

20 Tips for good Web Designers to become Excellent Web Designers - by .net magazine

The difference between a good web designer and a great one is the ability to know how to take short cuts and save time without compromising the quality of work. Pixelsurgeon’s Jason Arber has put together 20 top tips and tricks you should be using to give your work that all-important professional edge

1. Planning

When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Whether it’s drawing wireframes and site diagrams in OmniGraffle or Visio, or even on a scrap of paper, you’ll save time by having an overview of your design at the site and page level before you start building. Obvious errors can be detected and solved before it’s too late to go back and it makes explaining your ideas to clients and colleagues a lot simpler than waving your hands in the air.

2. Do it by hand

Although there are some excellent tools around for building web sites, such as Adobe GoLive and Adobe (formerly Macromedia) Dreamweaver, professional code monkeys prefer to code by hand. Are they crazy masochists? Quite possibly.

There’s only one way to learn HTML, and that’s to roll up your sleeves and get your hands dirty with some actual code. But fear not: HTML has one of the easiest learning curves you’ll ever come across and you can create a basic web page with only a couple of lines. Writing code by hand also ensures that you write the leanest code possible, which is the ultimate aim of all HTML geeks.

Don’t throw out that copy of GoLive or Dreamweaver just yet. Both applications have excellent code writing environments, and have useful features, such as collapsable blocks of code and split views so you can code and see the results at the same time. If you want to try the code-only route, then any text editor that can save in the basic .txt format should do, but Mac users might want to check out Bare Bones Software’s BBEdit, and Windows users should give the freeware AceHTML editor from Visicome Media a whirl.

3. Stylesheets: importing vs linking

There are two ways to attach an external stylesheet to your HTML page, and not all browsers understand both methods. This can be used to your advantage to feed one stylesheet to modern browsers and another to Netscape 4.x, which would otherwise choke on more complex CSS.

Cascading stylesheets are designed to flow over each other. The secret is to create a simple stylesheet that works in Netscape 4, with more complex CSS relegated to an additional stylesheet that’s attached using @import, which Netscape 4.x will ignore:

<link rel=”stylesheet” href=”simple. css” type=”text/css” media=”screen”>

<style type=”text/css” media=”screen”> @import url(simple.css); </style>

4. Smarter gradient backgrounds

CSS gives you a lot of control and flexibility over the tiling of background images. And the great thing is that tiled images are not limited to the Body background but can also be applied to any DIV, block level or inline element.

Images that tile conventionally or just along the x or y axis can be set to scroll with the page or remain fixed while the rest of the page scrolls over it. Backgrounds can also be offset. This means that it’s easy to create a vertically graduated background that never repeats no matter how long the page is, using graphics that are only a few kilobytes in size.

Using the following code, the background.png file need only be as tall as the gradient and one pixel wide. This example assumes that the gradient fades into white, but the backgroundcolor attribute could be any value.

body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }

5. Commenting

When you come back to a site that you designed months ago, there’s nothing worse than trying to figure out what you did and attempting to untangle a spaghetti of code. Do yourself (and anyone else who wants to check out your code) a favour by putting comments in your HTML. Comments might add anything from a few bytes to a kilobyte or two to your page, but the time savings are invaluable.

Commenting also encourages you to keep your code tidy by breaking it into logical chunks. Some coders even use comments to create a table of contents for the page, which is only visible in code view.

Be aware that HTML and CSS use two different kinds of commenting, so you may want to learn the difference.

<!-- HTML commenting looks like this and is enclosed within angle brackets and two dashes. The opening tag includes an exclamation mark. --> /* CSS comments are enclosed by a forward slash and an asterisk. */

6. Use simple PHP to build sites

There’s no need to become a PHP expert to start using it in your site. If your server supports PHP, you can quickly and easily use server side includes to build a library of commonly used elements, inserting them into your web page with a simple link. This is great for elements like menus, which can exist as a single instance, and means that if you add a new menu item or change the design, you just need to change the include file, which will then update the whole site.

Includes are simply snippets of HTML code such as a table or unordered list. The page calling the includes should end .php and the includes are inserted using the following simple code:

<?php include(“filename.html”); ?>

7. Set fonts using ems

Designers love specifying type sizes in pixels because it corresponds easily and naturally with what they do in Photoshop. But as a type size specification for the web, pixels have one major disadvantage: they can’t be resized in Internet Explorer. As monitor resolutions increase, it’s not only the visually impaired who may want to increase the font size in your design, so what’s the solution?

The answer is to specify type in ems. If you’re unfamiliar with the unit, an em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:

body { font-size: 62.5% }

This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels could be expressed as 1.2em; 9 pixels becomes 0.9em and so on. What’s more, both the designer and user are happy.

8. IE Box Model Hack

Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts. The solution is known as the Box Model Hack, which uses another bug in IE to force it to use tags that other browsers ignore. If you have a div validly specified like this:

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

You’ll end up with a box that’s 120 pixels wide in most browsers, but only 100 pixels wide in IE. The easiest solutions is the box-within-a-box method, which places one div inside another:

div {_ width: 100px;_ }

div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }

This is applied in the following way:

<div>

<div class=”hack”>

Your content goes here

</div>

</div>

9. Space saver

Nobody likes building forms in HTML, especially as browsers insist on adding padding around them for no reason. Simply add the following CSS to your stylesheet:

<form style=”margin-top: 0; margin-bottom: 0;”>

10. Test, test and test again

While Internet Explorer still dominates the browser market by a huge percentage, its lead is being gradually eroded by other browsers such as Firefox and Opera. There are also plenty of people out there still using archaic browsers like pre-Mozilla versions of Netscape.

It’s virtually impossible to design great-looking web sites that work in all browser versions, so it’s best to decide which browsers you’ll support. Mozilla-based browsers, WebKit-based browsers (such as Apple’s Safari), KHTML-based browsers (such as Konqueror), Opera and Internet Explorer versions four and higher are generally considered a safe benchmark. However, you should still be a good net citizen by ensuring that your code degrades gracefully, so that even unsupported browsers can experience your site – even in a limited form (see tip 14).

11. Format fundamentals

In the old days it used to be simple. If the image contained flat colours like a logo, use a GIF. If it was photographic, use a JPEG. There’s also an overlooked third format, PNG (pronounced ‘ping’) that comes in two flavours: an 8-bit version containing 256 colours, like GIFs, and a 24-bit version with alpha channel support allowing for variable transparency.

The bad news is that Internet Explorer doesn’t support PNG’s alpha channels without resorting to a complex hack. However, 8-bit PNGs generally compress much smaller than the equivalent GIF version. Unless you need animation, which PNGs can’t do, PNGs can replace GIFs in most situations, resulting in an overall file size saving.

JPEGs usually create smaller files than 24-bit PNGs, so unless you’re taking advantage of PNG’s alpha channel transparency using the hack (www.alistapart.com/stories/pngopacity/), then JPEGs are still the best format for continuous tone images.

12. The ‘title’ and ‘alt’ attributes

Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page:

<img src=”logo.gif” alt=”logo” title=”logo/” />

13. The correct format for pseudo classes

For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:

a:link { color: blue; }

a:visited { color: purple; }

a:hover { color: purple; }

a:active { color: red; }

14. Use semantic mark-up

The idea behind semantic mark-up is to separate the content of your web site from its appearance so that it degrades gracefully. Ideally, if you were to remove the stylesheets, your web site should still work. It might not look pretty, but it means that users with older browsers, will still be able to get meaningful content from your site.

The positioning, styling and a certain amount of interactivity can then be added with stylesheets and CSS-P.

15. Favicons

Favicons are the little 16x16 pixel icons that appear in your favourites lists and the title bars of web sites. They’re quick and easy to add: save a graphic in .ico format (Mac users may want to consider using Graphic Converter as Photoshop doesn’t support this format) and put it in your site’s root folder. It’s as simple as that.

16. Change capitalisation using CSS

If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format.

h1 { text-transform: uppercase; }

17. Wrapping text around images

For a quick and dirty way of wrapping text around images, use the image’s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge.

<img src=”image.jpg” align=”left”>

18. Universal character sets

Character sets are an important part of a web page’s definition, but they’re probably the least understood component. Character sets, which are defined in a web page’s invisible head section, tell the browser what method is being used to encode the characters. A charset ISO Latin 1 (also known as ISO 8859-1) will render the code it finds using a basic Western alphabet, but a charset of Shift JIS will attempt to render any characters it finds as Japanese.

With so many competing character sets, problems can occur, especially when using the MS Windows character set (which contains certain characters that may be replaced by a blank space on other operating systems) or when several languages need to appear on a single page.

The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s head like this:

<meta http-equiv=”content-type” content=”text/ html;charset=utf-8” />

19. Print styles

When people print web pages, often they’re not interested in your flashy graphics: they just want a simplified version of the page. Using CSS it’s possible to create a separate stylesheet that only affects printed versions of your site, rather than having to create a new HTML page or adapt an existing one. You add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:

<link rel=”stylesheet” type”text/css” href=”print.css” media=”print”>

or

<style type=”text/css” media=”print”> @import url(print.css); </style>

This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability.

20. Learn from others

Finally, a quick and simple tip: learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.

Slicing and Roll-overs

Slicing in photoshop CS3
This exercise is designed to give you some experience in slicing an image in photoshop CS2 or CS3.
Advantages of slicing:
1. Smaller images load faster
2. You can optimize each slice, also mix gif, jpg and png.
3. Creating rollovers
4. Creating "hotspots" to click
5. Add animation
In this exercise, you'll complete the following tasks:
IMPORTANT: read both Create slices from guides and Create slices from the slice tool BEFORE you begin, then choose whichever method is more appropriate.
Create guides
Create slices from guides

Create slices using the slice tool

Create guides
1. open the file you have chosen in Photoshop
2. if not visible, select View>Rulers or Ctrl-r (pc) cmd-r (mac)
3. right-click the ruler and set the units to pixels
4. drag from the ruler to create guides around the areas where you want to create slices
Create slices from guides

This method is only recommended if you have only a few areas that you want to slice. Otherwise, as in the example below, you get more slices than you need. In that case, you will need to combine and delete slices to get the desired effect.

1. select the slice tool

slice tool

2. click slices from guides

slices from guides

3. if you have a complex layout, you will end up with more slices than you need... in this case, I ended up with over 80 slices

80 slices

4. select the slice select tool (underneath the slice tool)
5. shift select the slices you want to combine, then right-click and select combine slices or delete slices as needed
6. your image should now look something like this

note: I only have slices where needed, around navigation elements, images, and text areas:
slices

7. if there are any areas that you would like to designate to use html text instead of image text, double-click the slice and select the no image option from the drop down menu in the slice options window
8. select File>Save

note: be sure to save your file as a PSD to preserve the layers, that way you can always go back and make changes.
no image slice

why use html text vs image text?

1. html text loads quicker
2. html text is easier to edit (you don't need to open the file in photoshop to edit)
3. search engines can find it easi

Create slices with the slice tool

This is the most flexible method for slicing images. The slice tool allows you to draw your own slices, then auto generates the slices it needs. If you have the Snap option selected, when you draw the slice, it will "snap to" your guides making it easier to get them perfectly aligned.

1. select View>Snap To>Guides (make sure that there is a check mark in front of Guides)

snap

2. select the slice tool

slice tool

3. click and drag diagonally in between guides to draw slices
4. select the slice select tool (underneath the slice tool) to edit or resize slices

draw slices

5. if there are any areas that you would like to designate to use html text instead of image text, double-click the slice and select the no image option from the drop down menu in the slice options window.
6. select File>Save

Note: be sure to save your file as a PSD to preserve the layers, that way you can always go back and make changes
no image slice

why use html text vs image text?

1. html text loads quicker
2. html text is easier to edit (you don't need to open the file in photoshop to edit)
3. search engines can find it easier

Export html and images for the web

Now, we will save the file in a format that can be used to create a web page from. Photoshop CS2 & CS3 generate html and images in tables and CSS. Tables have been the standard for a number of years, but now that CSS is supported by most browsers reliably, many web designers are taking advantage of the greater flexiblity that CSS posesses.

1. select File>Save for Web
2. in the save for web window, select Preset: JPEG High

jpeg preset

3. click the options button and select Edit Output Settings...

output options

3. select Generate Table or Generate CSS use the default settings for both
4. click OK

table or CSS

5. click Save, the Save Optimized As window will open
6. click the Save as type: drop-down menu, select HTML and Images (*.html)
7. name the file index.html
8. browse to your web site folder
9. click Save

save as

6. if you did it correctly, you should end up with a folder titled images and a file titled index.html

Creating rollovers in Adobe Photoshop and exporting rollover images for the web
This exercise is designed to give you some experience in creating image rollovers in photoshop.
Image rollovers add a dynamic and interactive element to your web pages. They work like this, as the user moves the cursor over an image that uses a rollover script, the image will be swapped for another image.
You will need to create two sets of images in order to create the rollover effect. One set for the static mode or state and another set for the dynamic or rollover state.
You will then export the sliced photoshop images to be used in Adobe Dreamweaver.
In this exercise, you'll complete the following tasks:
Create rollover images using layer effects
Create rollover images using new layers
Export rollover images for the web


Create rollover images using layer effects

This is a very simple method of creating rollover effects using text layer effects. By simply turning the layer effect visiblily on and off, we can create the two sets of images necessary to put together our rollovers in Dreamweaver.

1. open your completed comp in photoshop, make sure that this is your original PSD file

complete comp

2. select the text layer where you want to create a rollover effect (in this example, I have selected the About the Rally text layer)

selected layer

3. at the bottom of the layers palette, click the fx icon and the layer effects pop-up menu appears
4. select a layer effect (in this example, I choose Outer Glow)
5. repeat steps 2, 3 and 4 for each text layer you want to create the effect for
6. when you are finished, your layers pallete should look something like this:

note: Effects and Outer Glow has been added underneath each text layer
select fx

7. you should now see the effects you created on your image.

note: the text in the leftside navigation bar now glows

Here is an example of the effect

Create rollover images using new layers

With this method, you will create new layers where you want to create the rollover effect. Again, we will create the two sets of images necessary to put together our rollovers in Dreamweaver.

1. open your completed comp in photoshop, make sure that this is your original PSD file

complete comp

2. make sure that your slices or guides are visible, then use the rectangular marquee to draw a selection around the slice where you wish to create the rollover (you must do this for each rollover, so you will need to move or redraw the marquee for each one)



3. you will now create new layers that contain your rollover images (in this example, I placed them in a layer group titled background)
4. there are tons of different ways to do this, I will give you two examples:
1. use part of the images and change it using adjustments, filters, etc (in this example, I selected the layer that contained the nav bar image)
1. using the rectangular marquee, select the pixels you want to copy and then paste in to new layers.
2. with the new layer selected, add a filter, adjustment, etc
3. make sure you leave the visibility for these layers turned on
2. fill the selection with a color, pattern or a gradient (you must create a separate layer for each rollover)
3. when you are finished, your layers pallete should look something like this:

note: I have a separate layer for each of my rollovers: about, gallery, and contact


7. you should now see the effects you created on your image

note: I added a chalk and charcoal filter to the layers

Export rollover images for the web

Now that you have created the rollover effects, you will save them as new images in you web site folder

1. select File>Save for web and devices...
2. in the dialogue window, select the slice select tool (circled)
3. double click one of the slices that you created a layer effect for





4. in the Slice Options window, rename the slice with a "_down" added to it (or something similar)
5. click OK
6. repeat steps 9 - 11 for the remaining slices your created layer effects for




7. holding down the shift key, select the slices you created layer effects for
8. select JPEG high in the presets and click Save



9. in the Save Optimized As window, select the following:
1. Format: Images Only
2. Settings: Default Settings
3. Slices: Selected Slices
10. make sure you have your root folder selected(the one that contains your html and images files)
11. click save

note: if the files were not saved in the images folder, you neen to drag them into that folder. If you had your images folder selected when you saved, there will be a new images folder in your original images folder.

CSS and Templates - Week 10

Learning Outcomes fro CSS and Templates
• Create import and format text
• Create unordered and ordered lists
• Insert a Background Image
• Create, Apply and Edit Cascading Style Sheets
• Create Templates with Editable and Optional Regions
• Enhance and Nest Templates
• Use Templates to Create Pages
• Use Templates to Update a Site
Overview
Formatting text as lists
In order to help viewers to digest large blocks of text, you can break the text up into several types of lists: directory lists, menu lists, ordered lists, and unordered lists. Lists are especially helpful when you want to include a number of related topics. Using lists makes it easier for readers to scan the information on the Web page and choose which topics they would like to explore in further depth, without having to sift through a long paragraph. Lists also give the page a clean, organized look.
CSS
One of the best reasons to use CSS is that it stores the formatting rules in an external style sheet file. By keeping the style sheet file separate, all you have to do to modify each page is to simply make the alteration on the style sheet. In addition to external style sheets, you can also create embedded CSS styles. This means that the code that creates the file is inside of the HTML of the Web page, not external to it. Embedded styles can be used to override external styles. However, in general, you should avoid using embedded styles to format all the pages of a Web site; it is a better practice to keep formatting rules in a separate file from the content. Note that using external style sheets reduces the overall file sizes of your pages.
Using Cascading Style Sheets (CSS) not only saves you time in creating your Web site; it will also create a uniform appearance to all of the site's elements. Cascading Style Sheets can be used to format both text and tables. The formatting attributes that you choose can then be applied to any other element in the Web site.
Why use CSS? Well if you have a website that has hundreds of pages and you want all the link properties, text properties, margins, and background properties to be consistent. What if you wanted to change the background or font color in the website. Imagine changing that code for a hundred pages. With CSS, you can do it once and it will then be applied to all of your documents.
Templates
Templates can help you create a professional-looking Web site that feels whole and complete to the viewer. When you are building a site for the Web, you want your site to come across as unified, each page leading visually to the next so that viewers know they are on one of the pages of your site no matter which section of it they have navigated to. For starters, the navigation panel, the company logo, and the other common elements should appear in the same manner and area on every page. You could give every page the same background color, or color-code your site according to sections. Working with templates is a surefire way to be sure every page in your site has a consistent look. A template is a special kind of page that gives you a basic structure to work with. Templates are made up of locked regions, sections of the page that cannot be altered by users of the template, as well as other sections that users are permitted to customize. Some examples of these customizable regions include optional regions, sections of the template that can be visible or hidden depending on how you set them, and editable regions, sections where users can enter or alter text and content. Using templates not only guarantees consistency of design, but also will save you substantial development hours. Once your template is complete, you just plug in the content and save your pages. Templates are especially handy if your site is going to be worked on by several different people. The templates can ensure that no one will be able to take liberties with your design and site conception.
Create, Import, and Format Text
Creating and Importing Text
Much of the content on a Web site is presented in text. Text can be created in the Dreamweaver program or it can be imported from another program. Most commonly, students will be importing their text from Microsoft Word. To import text from Microsoft Word into Dreamweaver, highlight the text you want to import and then use the copy command, Cmd C (Mac) or Ctrl C (PC) and then paste Cmd V (Mac) or Ctrl V (PC). This will preserve most the formatting and generate clean HTML code. You will still need to clean it up a little. DO NOT create web pages in MS Word and then open them in Dreamweaver. Even with the "Clean up Word HTML..." command, you will still have all kinds of extra code you will need to deal with. Adobe Photoshop, Adobe Illustrator and some other programs convert text into images so that it maintains its appearance whether or not the viewer has the font installed on his/her computer.
Tips for Success The book is incorrect...The File>Import>Word Document command works only on a PC. It does not work on the Mac platform.
Formatting Text Using the Property Inspector
Using Dreamweaver, you change the font, size, and color of text in the same way as other programs. To format text, first select the text you want to alter. Then, use the Property inspector to change the font size, type, color, indents, and alignment. When formatting text, it is important to remember that it is much harder on the eyes to read text on a computer screen. Because of this, text on a Web page should be as distinct and easy to read as possible.
Changing Fonts
The Font list in the Property inspector allows you to change fonts. A font combination is a set of three fonts that are used by the browser to display a Web site. If one of the fonts is not available, the browser uses the next one in the set. For example, you can format your site with the font set Garamond, Times New Roman, and sans serif. In displaying the site, the browser will then search for your first choice, Garamond. If it isn’t available, it will search for Times New Roman. If both of these aren’t available, it will then search for sans serif. Remember to design a site that is attractive using all of the three fonts in the set that you choose. The following are lists of standard system fonts that may be helpful in creating a site. For Macintosh, the standard system fonts are: Chicago, Courier, Geneva, Helvetica, New York, and Times New Roman. For Windows, the standard system fonts are: Arial, Courier, Courier New, Impact, Times New Roman, and Veranda.
Changing Font Sizes
In Dreamweaver, the default base font size is 3. One way to change the font size is to go to the Size list and increase or decrease the size relative to the default size. For example, choosing –2 will decrease the font size from a 3 to a 1. Another way to change the font size is simply to select a font size between 1 (the smallest) and 7 (the largest) from the Property inspector. Always keep in mind that font sizes differ between Macintosh and Windows platforms, so you should try to view the page on both types of computers.
Formatting Paragraphs
Text can be formatted in two ways: as paragraphs or as headings. Text formatted as headings is distinguished from paragraphs of text because they are displayed in bold. Using headings can help to highlight certain areas of content and organize the page to make it more comprehensible to the viewer. To format text as a heading, click on any part of the text. Then, choose a heading size from the Format list in the Property inspector. There are six different heading styles: Heading 1 is the biggest and Heading 6 is the smallest.
Create Unordered and Ordered Lists
Creating Unordered Lists
Sometimes, the items on a list do not need to be displayed in any specific order. This type of list is called an Unordered List. A list of things to buy for an upcoming party is an example of an unordered list. There are a few ways to format the items in an unordered list. Paragraph indentations are one way to format an unordered list, but these are sometimes difficult to read. Instead, you can use symbols, or bullets before each item--this is called a bulleted list. To create a bulleted list, you should first select the text that you want to format. Then, in the Property inspector, click the Unordered List button to insert bullets in front of each item.
Formatting Unordered Lists
In Dreamweaver, it is possible to change the default bullet style, the round dot, to a different shape. Changing to shape of a bullet can add interest to your page, and can also separate one unordered list from another. To do this, first expand the Property inspector to its full size. Then, click List Item to open the List Properties dialog box. Change the style for the bulleted list to a square. You should remember that different browsers may display square bullets incorrectly--in some browsers they may appear as round dots. Check the formatting of your bulleted list on a number of browsers to make sure it appears the way you intend.
Creating Ordered Lists
At other times, you may want the information in a list to be presented in a specific order. Ordered lists, also called numbered lists, place a number or a letter before each item to show their sequence. A good example of an ordered list is a recipe: the instructions must be followed in a specific sequence so that the dish is prepared correctly.
Formatting Ordered Lists
Using the List Properties dialog box, you can choose numbers, Roman numerals, lowercase letters, and capital letters in creating an ordered list. Before choosing, try out a number of different options to make sure you create the type of list you desire.
Tips for Success Be wary of letting your lists go for too long. Some Information Mapping experts suggest that lists contain no more than 7 items. Obviously, this can not always be helped, but it is something to keep in mind.

Insert a Background Image
Inserting a Background Image
Background images can add atmosphere or additional branding to a Web site – but should be used with great care. When used well, they can provide new levels of depth or visual interest, but when used poorly, they can distract from your site and make it an unpleasant place at which to spend time. Background images are graphic files that are used instead of HTML-generated background colors. There are two main techniques to using background images, though all background images should be relatively small in file size and preferably in GIF or JPEG format. The first technique is called a tiled image. This consists of a very small (in height and width) graphic that repeats hundreds of times all across your Web page, creating an effect of texture or a pattern. The second technique is using a seamless image. This image will tile also if the window requires it to, but it is much larger in size and its edges blur so that it will still appear to be one image regardless of any tiling that does occur. Background colors and background images should not be used on the same page, unless a certain color must show before the background image has finished downloading.
Create, Apply and Edit Cascading Style Sheets
Using Cascading Style Sheets
Cascading Style Sheets can save you tons of time and give you greater flexibility, all by applying format preferences for you throughout your site. A Cascading Style Sheet (CSS) is composed of sets of attributes assigned either to a new name or to a pre-existing HTML tag. Using CSS, you will be able to control your content, calling up collections of attributes with one easy assignment. For instance, you might want all of your section titles to appear in Arial font, very large and green. With CSS, you can assign these attributes to a header tag and every place you use that tag, the text will appear just as you want it. Cascading Style Sheets have the added bonus of being able to instantly apply changes to your entire your site, for instance if you later decide you wanted those headers to be blue. The CSS Styles panel is the place to find all the buttons and dialog boxes you will need to experiment with style sheets on your site. The New CSS Style dialog box allows you to name a style and designate whether it should be added to a new or existing style sheet. Then, set the formatting attributes in the CSS Style Definition dialog box. Once you add a new style to a style sheet, you will be able to see it in the CSS Styles panel. Simply select the text to which you want the style to be applied and then click the style name in the list on the CSS panel. The content will immediately reflect the style attributes.
CSS styles have revolutionized the possibilities of Web development. They give so much control and have so many time-saver benefits that it is almost painful not to use them. And yet many developers make this terrible choice. Why would they choose not to use CSS styles? Because, unfortunately, the Web has not yet caught up with CSS styles. The lack of standardization across browsers has brought us to current moment wherein each browser supports a different subsection of CSS styles (some versions not supporting them at all), and often there is not even standardization in the way they are displayed even if they support the same feature. One can only assume that the time is not far when CSS styles will be supported better. Until then, however, be sure to consider who your target viewer constituency is and what their preferred browser versions are likely to be.
Tips for Success Text is not the only content that can be formatted using CSS styles. Other elements such as backgrounds, borders, lists, and tables can also be worked with.
Understanding CSS Style Sheet Settings
The coding for the CSS styles can be found in the style sheet file. CSS styles are made up of a selector and a declaration. The selector is the tag or name employed by the style declarations. The declaration segment displays the property (or properties) and the associated values. For instance, the property font-weight might have the value bold.
Inline Style Sheets and Html Formatting
Inline Style
An inline style is part of the individual page code, but it is written in the body section, rather than the head section. Inline styles refer to a specific instance of a tag, rather than a global tag style on a page.
The Inline Style goes in between the body tag and looks like this.
Insert open body tag here

part 1

Insert closed body tag here
This will make the text appear yellow.
HTML Formatting
HTML formatting is inline and between the body tags. It looks something like this.

This will cause the text to appear red with a size 4 Arial font.
By default, Dreamweaver is set to use CSS, if you want to use HTML formatting, you must change your preferences.


Embedded Style Sheets
Understanding Embedded Styles
An external style sheet is a separate file with a .css extension that contains a collection of rules for formatting elements of a Web site. Because external style sheets can be applied to many pages at the same time, they are an excellent way to make sure that the formatting of an entire Web site is consistent. There may be times, however, when you want one page of the site to look different from all of the others. You can create a style that is only used on one page by using embedded styles. Unlike external files, the code of embedded styles is embedded within the code of that page. Embedded styles override external styles. Note the difference between embedded styles and inline styles.
Here is what the CSS code looks like when you format a document with "Page Properties..." ("Use CSS instead of HTML tags" setting must be selected).

The CSS code lies in between the head tags. The code begins with . The first part

is telling the browser to see whatever is in between the body, the td (table data) or the th (table header) tags as the font family, font size and font color listed above. So we will see white text, with Georgia font at 14px.
The next set of code

effects only what is in the body tag, in this case the background will be black and the margins will be setting accordingly.
Creating, Applying, and Modifying a Custom Style
The New CSS Rule dialog box is used to create embedded styles and styles that are added to external style sheets. To get to this dialog box, go the CSS Styles panel and click the New CSS Rule button. To indicate that the style should be an embedded style, go to the Define in section and click the option button that says This document only.

Figure 1. New CSS Rule dialog box
A Custom style, also called a class style, contains a number of different formatting attributes that you can apply to text or other page elements. After you name a style and click OK, the CSS Rule Definition dialog box will open. This dialog box contains eight categories whose settings can be defined.
Tips for Success When you name a custom style, you must begin the name with a period (.). If you don’t type a period at the beginning of a custom style name, it will automatically be added for you.
After you have created a custom style, it will appear in the CSS Styles panel along with the other styles. If you want to apply this custom style to a portion of a Web page, first select the element to which you want the style to apply. Next, click the style in the Style list of the Property inspector. To edit a custom style, click the style you want to edit and then click the Edit Style button in the CSS Styles panel. Finally, use the CSS Rule Definition dialog box to change the settings. One great feature about CSS is that any changes that you make to the style are automatically altered on each individual Web page where the style has been inserted.
Redefining HTML tags
Whenever you change an element of a Web page using the Property inspector, Dreamweaver adds an HTML tag to the element. At some point, you may decide that you want to change an HTML tag yourself in order to alter the elements that have that tag. For example, you can redefine the tag, normally used to make text bold, to mean that everything with this tag will be put in green italics. To do something like this, first go to the New CSS Rule dialog box and click the Tag option button. Next, click the Tag list arrow to view all available HTML tags. Then, click the tag you want to redefine, and click OK. This will open the CSS Rule Definition dialog box. In this dialog box, you can change the formatting settings. After you save the new tag, all of the selected text will be formatted according to the new settings you have chosen. Later, if you want to change the settings again, click the setting in the CSS Styles panel. This will show the list of all customized HTML tags. Select the HTML tag you want to edit. Then, click the Edit Style button. This will open the CSS Rule Definition dialog box where you can make the necessary changes. Note that there are two modes in the CSS Styles panel: All (document mode) and Current (selection mode). Make sure you understand the difference between these.
External Style Sheets
External CSS style sheets are useful if you want to ensure that the formatting of all of the elements on your Web site is uniform. The advantage of CSS Style sheets is that you can easily change the appearance of an entire Web site without touching any of the content. This may be much more efficient than using embedded styles, which require that you make alterations to each individual page. Using embedded styles also leaves much more opportunity for error.
Attaching an External CSS Style Sheet to a Page or Template
Another great feature about external CSS style sheets is that you can attach them to pages that you have already created. In this case, all of the HTML tags on the page are affected by the formatting rules that you have created for the style sheet. For example, if the external style sheet indicates that all paragraph text will appear in Helvetica 12-point black, then all of the text in your Web page that is wrapped in the

tag will change to Helvetica 12-point black when the style sheet is applied to the site.
In order to attach an external style sheet to a page, use the Attach Style Sheet button in the CSS Styles panel to open the Attach External Style Sheet dialog box. In this dialog box, look for the name of the external style sheet file you want to attach. Indicate here whether to link or import the file. In general, it is a good idea to link the file. This way, the content of the page is separated from the style sheet file.
When you have created a Web site in which the pages are based on a template, you can simply attach an external style sheet to the template itself. This will save a lot of time and effort because you don’t have to attach the style sheet to every page in the site. You only have to complete the process once, when you attach it to the template file. In this case, the template will be directly affected by any alteration you make to the style sheet. The template will then update all of the pages to which it is attached.
Adding Hyperlink Styles to a CSS Style Sheet
External style sheets can also be used with links in a Web site. To create styles for all the links in your site using external style sheets, you must first open the style sheet in the document window. Then, open the New CSS Rule dialog box and click the Advanced option button. Choose one of the selectors from the Selector list. Clicking OK will open the CSS Rule Definition dialog box. Here, you can decide how you want the link to be formatted. Note that not all browsers recognize link styles.

Figure 18. New CSS Rule dialog box with Advanced Selector Types displayed
Adding Custom Code to a CSS Style Sheet
One way to make changes to a style sheet is to add code to it. To do this, you must first open the style sheet file in the document window. Then, click the place in the sheet where you want to add code. Then insert your code. For example, you can add code to the body tag of the style sheet that changes the background color of all tables on the page from red to pink
An External Style Sheet can be created by copying what is between style tags in the head content after you format your page using "Page Properties" and pasting it into the code view of a DW document (you can also highlight the code in between the style tags and use the File>Export>CSS Styles... command). You must then save the document with a .css extension.
Here is what the content of a .css documents looks like:


Create Templates with Editable and Optional Regions
Creating Templates from an Existing Page
Let’s say you have designed and built one Web page that you love. The thought occurs to you; why not base my whole site around this look? Why not use this layout and design for all the rest of the Web pages? Just use the Save As Template command, and your page will be saved as a template. A .dwt extension is employed when pages are saved as Dreamweaver templates. You can find them in the Templates folder, located in the root folder of your Web site. Even if your site does not have a Templates folder, Dreamweaver will automatically generate one for you the first time you save a template. You can find a list of templates in your site in the Templates folder in the Files panel. If you want to preview a template prior to opening it, use the Templates button in the Assets panel, on the Assets panel toolbar, and select a template from the list. You will be able to have a look at it in the preview window, located above the templates list.
Defining Editable Regions
Dreamweaver wants to make certain to uphold the integrity of your template. That is why, when you save a template, Dreamweaver will lock all the content of the page by default. This is to ensure that no one else will be able to add content or modify the template until you have told the software exactly which regions of the template are meant to be adaptable and which are to be fixed. Obviously, if your template is going to be functional, at least one editable area will have to be included. Otherwise, you would have a collection of the exact same page over and over. The look should be consistent but the content should change from page to page. To designate editable regions, use the Editable Region button on the Templates tab of the Insert bar to open the New Editable Region dialog box. Use this dialog box to indicate a name for the region. To make it easier to differentiate them on the template page, the editable regions are contoured in blue and the names of the editable regions are shown in blue shaded boxes.
Tips for Success To create a template from scratch, click File on the menu bar, click New to open the New Document dialog box, click the General tab, click Basic page in the Category list, click HTML Template in the Basic page list, and then click Create.
Defining Optional Regions
Not all the manipulatable regions of your template have to be editable ones. Optional regions can also be added to a template. An optional region can be either visible or hidden depending on the editor’s choice. For instance, a supplementary logo on the bottom-left corner of the page or a secondary navigation panel can be made into an optional region, allowing users of the template to decide whether or not to display it on the page they are creating. The conditional statement if is used to control the visibility status of an optional region. To designate a page element to be an optional region, first select the element you wish to designate, and then use the Optional Region button on the Templates tab of the Insert bar. This will open the New Optional Region dialog box, where the region can be named and the new default visibility status can be specified.
Defining Editable Optional Regions
You may want to give the template users even more flexibility in filling it out. If you want them to be able to show or hide a page element and modify its content too, then the element can be designated as an editable optional region. For instance, a promotional banner might be a good editable optional region so that users of the template could change its text depending on what the current monthly promotion was, and if there wasn’t any this month, or if it was a page that didn’t call for the banner, they could hide the region entirely. To designate an editable optional region, first select the proper element, then use the Editable Optional Region button on the Templates tab of the Insert bar to open the New Optional Region dialog box. This dialog box will allow you to name the region and specify the default visibility status.
Tips for Success To remove an editable region from a template, select the editable region in the document window, click Modify on the menu bar, point to Templates, and then click Remove Template Markup.

Enhance and Nest Templates
Setting Parameters for Optional Regions
In some instances, you will create a template that is used by a wide range of people. In these cases, it may be beneficial to create optional components of the template. This way, users can choose from a variety of content elements to tailor the template to their needs. You can specify how these optional regions are displayed. For instance, based on specific conditions, you can choose whether they are displayed or hidden. For instance, let’s say you have two optional regions named band and songs, respectively. You could set the songs optional region parameter to band so that the songs optional region would appear only when the band optional region is showing, and would be hidden only when the band optional region is hidden. To do this, click the Advanced Settings tab of the New Optional Region dialog box to set the parameters of an optional region. The Advanced Settings tab can also be used to write a conditional expression in JavaScript.
Nesting Templates
When making large Web sites that include many pages, you may also want to use nested templates. Nested templates also come in handy when your web site is used by a wide variety of people who have different needs. Nested templates are based on other templates and are useful in defining an area of a page (or an entire page) in more detail. With nested templates, when you make a change to the original template, it is automatically applied to the nested template as well. To make a nested template, first create a new page based from the original template. Next, click the Save As Template command to save it as a nested template. After you have done this, you can alter the nested template by defining new editable regions and adding or removing content. In making nested templates, you should be aware that the editable regions in the original template will be passed on as editable regions in the nested template as well. However, any time you add a new editable or optional region to an editable region that was passed on from the original template, the original editable region will become a locked region in the nested template.
Creating Repeating Regions and Repeating Tables
In many Web sites, the format of certain elements is repeated in a large number of places throughout the site. For example, sites that sell clothing often use the same format to display all of the items in their catalog. When you use templates to create these kinds of sites, these areas can be defined as repeating regions. Within repeating regions, you can define certain areas as either locked or editable. One kind of repeating region is a repeating table. A repeating table has a pre-defined structure that remains the same every time you insert it. This simplifies the process by which template users add content. To create a repeating table, you must first decide where you want the table to be placed and set the insertion point there. Then, click the Repeating Table button on the Templates tab of the Insert bar to open the Insert Repeating Table dialog box. Then, set the properties for the table, including the number of rows, the number of columns, and the number of editable rows the table will have. Remember that in templates containing repeating tables, the top row is locked and the other rows below it are editable.
Creating Editable Attributes
It is also possible to allow users of your template to change attributes of a locked region. You can allow users to change the source file for an image in a locked area or the cell background color of the top row. Use the Editable Tag Attributes dialog box to specify that certain attributes of locked regions be editable. To do this you should first specify that it should be editable, give it a label, and choose its type and its default setting. Using the Template Properties dialog box, you can define editable attributes of elements in locked regions. In this way, template users can make changes to the element’s attributes.
Tips for Success To format text in an editable region, you must select the table cell. If a dialog box opens telling you that you have inserted a repeating region inside a

tag, click OK to close the dialog box.

Use Templates to Create Pages
Creating Pages with Templates
Using templates saves you time in creating a page because the format and some of the content of the page has already been competed. Another advantage of using templates is that they help you to create new mages that exactly match the other pages on the site. This gives the site a professional and uniform look and feel. There are a number of different ways to create a page from a template. The easiest way is to use the File tab on the menu bar. After you click File, then click New. This opens the New Document dialog box. Then click the templates tab and choose your template. Clicking Create completes the process.
Modifying Editable Regions
You should be aware that whenever you make a new page from an existing template, some areas of the page will initially be locked. When you move the mouse to the locked sections, its appearance changes into the shape of a circle with a line cutting through it. This icon indicates that the user cannot make changes to the region. You can tell which regions are editable because these are outlined in blue and marked with a blue shaded label. You can editing, delete, or add content to the editable region of the template-based page in the same way that you perform these tasks on any other page. Just select the element you want to modify and make your changes.
Tips for Success You can create a new page based on a template by right-clicking (Win) or control-clicking (Mac) a template in the Assets panel, then clicking New from Template. To attach a template to an open page, drag the template from the Assets panel to the document window.
Modifying Object Attributes
Sometimes, certain elements in the locked region of a template have editable attributes. Thus, the user can modify these elements, even though they cannot modify other elements in the same region. To do this, use the Template Properties dialog box. The editable attributes for the page are listed and the banner property selected. Also, you should remember that the banner’s source attribute can also be altered. To change the source file of the banner, type in the URL for the graphic you want in the banner text box.
Using Repeating Tables
Because the structure of repeating tables has already been defined, it is easy to make changes to it than it is to create a new table from scratch. You can click on any place that is outlined in blue and then insert graphics or type text in that area.
Tips for Success Use the buttons in the top row of a repeating table to add or delete rows, or to move a row up or down in the table.
Creating Links in Template-Based Pages
In adding links to template-based pages, you can only use document relative links, since these are the only kinds that work. Keep in mind that the path to a link actually goes from the template file, not from your newly created the template-based page, to the linked page. You can check to make sure that all of the links you have inserted are document relative. To do this, first select the page element to which you want to add a link. Then, drag the Point to File icon from the Property inspector to the page you want to link to in the Site panel.
Attaching a Template to an Existing Page
It is also possible to add a template to a page that you created previously. For instance, perhaps you constructed a page before you learned about templates. You can go back to this page and decide to change it to be based on a template that you recently created. However, before you attach a template to an existing page, you should delete the parts of the page that are repeated in the template. For example, both your page and the template may have the same picture of your cat. You should delete the picture of your cat that already appears on the page, because it will be duplicated in the template. After deleting the duplicate content, select the template in the Assets panel. Then, click Apply. This will open the Inconsistent Region Names dialog box which allows you to specify in which portions of the template you should place the content from your page.
Use Templates to Update a Site
Making Changes to a Template
It is important to remember that all sites, especially successful ones, must continually be reevaluated and updated in order to meet the changing needs and interests of its viewers. This often requires you to change both your Web site’s appearance and its functions. When you have used templates to create your Web site, the process of updating it is much easier and less time consuming. Changing a template is very similar to creating one. First, open the template from the Files panel or Assets panel. Next, edit the content as you would a non-template-based page. You can also change editable regions to locked regions, and vice versa. To turn locked regions into editable regions, use the New Editable Region command. To change an editable region into a locked region, first select the region. Then, right-click can allow you to choose the Remove Tag .
Updating All Pages Based on a Template
When you make a Web site that is based on templates, you can change all nested templates by making alterations to the original template. To do this, save the modified template. This will open the Update Template Files dialog box which asks you if you want to update all the files in your site that are based on that template. After you click Update, the Update Pages dialog box opens. This gives you a full listing of all the files that were updated.
Tips for Success To update all pages based on a template, click File on the menu bar, then click Save. The Update Template Files dialog box opens. Click Update to open the Update Pages. The Status area will show what files were updated. Click Close.

1. create a folder on your hard drive and name it with your Pipeline username (e.g., mine is magallegos)
2. create another folder in that folder and name it mat153
3. log in to Xythos and create a folder named mat153 (see module 09)
4. define your site in Dreamweaver as per the instructions in module 09
5. slice the winning comp (be sure to check the comments in the comps assignment if you are not sure which one this is) as per the instructions in module 07
6. be sure to save the file as index.html
7. be sure to the files in the folder you made in step 2
8. you should now have a file, index.html, and a folder images in the mat 153 folder
9. open index.html in Dreamweaver
10. in the properties inspector, click the Page Properties button
11. set the properties in the Appearance and Links sections
12. click the code view, your code should look something like this: (code not here)

13. note that the properties you set in the properties inspector created an embedded style sheet. You will use this style sheet for the rest of the documents in your web site. to do so, we must export it to an external style sheet.
14. highlite the all of the code inbetween the grey tags (this is the pink and blue code)
15. go to Text>CSS Styles>Move CSS Rules, and a window will open

16. select A new style sheet...
17. save the style sheet as main.css in the mat153 folder
18. delete all the code you highlited in step 14
19. got to Text>CSS Styles>Attach Style Sheet...
20. select main.css that you created in step 17
21. you will repeat steps 19 and 20 for the rest of the pages you create for your site.
22. upload index.html, main.css and the images folder to Xythos
23. post the URL to index.html in Xythos to the CSS Exercise discussion in Module 10