Beginner’s Guide to Google Webmaster Tools


 

Are you looking for some love… from Google? Other than buying paid traffic through their AdWords program, the best way to get more traffic from them is through search engine optimization. But before you start optimizing your site, the first thing you should do is sign up for Google Webmaster Tools (GWT).

GWT is a free toolset provided by Google that helps you first understand what’s going on with your website. This way you make decisions based off of data instead of going in blindly.

Here is how GWT works.

Adding your website

add website to google webmaster tools

The first thing you need to do after you login to GWT (it’s free to sign up) is to add your website.

After you add your website you’ll have to verify that you actually own the website. You can do this through four ways:

  1. Add a DNS record to your domain’s configuration – You can use this option if you can sign in to your domain registrar or hosting provider and add a new DNS record.
  2. Add a meta tag to your sites homepage – You can choose this option if you can edit your site’s HTML.
  3. Upload an HTML file to your server – You can choose this option if you can upload new files to your site.
  4. Link your Google Analytics account to GWT – You can use this option if your site already has a Google Analytics tracking code that uses the asynchronous snippet. You must be an administrator on the analytics account for this to work.

Dashboard

google webmaster tools dashboard

Once your site is verified you’ll start seeing data on your website. Sometimes it can take a few hours before you see any data, but it’ll start rolling in.

The dashboard gives you a rough overview of everything from what keywords you are ranking for to how much traffic you are getting. In addition to that you’ll see if the Google bot is experiencing any crawl errors when going through your website, the number of sites linking to yours, and how many pages Google has indexed.

Site Configuration

Just like everything else, Google isn’t perfect. So configuring your site can help them do a better job of ranking your website. When configuring there are a few areas that you should be familiar with:

Sitemaps

google webmaster tools sitemaps

Submitting a sitemap will help Google determine what pages you have on your website so they can index them. If you don’t submit a sitemap they may not index all of the pages on your website, which means you won’t get as much traffic.

Sitemaps have to be submitted in an XML format and they can’t contain more than 50,000 URLs or be larger than 10 megs. If you exceed any of those limits, you need to split up your sitemap in multiple files and then submit them.

If you aren’t technical, you can go to XML Sitemaps to create a sitemap. All you have to do is enter in your URL of your homepage and click “start”.

Once your sitemaps have been uploaded, Google will tell you how many of your URLs are being indexed. Don’t worry, it is common for them to not index all of your web pages. But your goal should still be to get as many pages indexed as possible.

Typically if pages aren’t being indexed it’s because the content on those pages aren’t unique, the title tags and meta descriptions are generic, and not enough websites are linking to your internal pages.

Crawler access

google webmaster tools crawler access

There will be some pages on your website that you just don’t want Google to index. This could be private login areas, RSS feeds, or crucial data that you don’t want people accessing.

By creating a robots.txt file you can block not just Google, but all search engines from accessing web pages that you don’t want them to get their hands on. However, for highly sensitive areas of your website you may want to consider password protecting all relevant directories.

Through the robots.txt generator and tester, not only will you be able to create a robots.txt file, but you will be able to see if it is done correctly before you upload it to your server. It’s wise to do because the last thing you want to do is make a mistake and tell them not to index your whole website.

And if you accidentally mess up and find Google indexing pages that you don’t want them to index, you can request them to remove it through this section.

Sitelinks

google webmaster tools sitelinks

Sitelinks are links to a site’s interior pages displayed on a Google search results page. Not all sites have sitelinks, but as you grow in popularity you’ll naturally get them. Google generates these links automatically, but you can remove sitelinks you don’t want.

Through this section you can somewhat control what sitelinks show up when someone searches for your website. The reason you can’t fully control what pages show up here is that you can only block which pages you don’t want to appear, and you can’t pick which pages you want to appear.

Change of address

google webmaster tools change of address

If you are looking to change the URL of your website, you better let Google know or else your traffic is going to decrease.

You can tell them through 4 easy steps:

  1. Setup the new site – You have to get the new domain up and running. Make sure all your content is available for the public to see.
  2. Redirect the old traffic – A 301 permanent redirect tells users and search engines that your site has permanently moved.
  3. Add your new site to GWT – Make sure you also verify your new website.
  4. Tell GWT your new domain – In the change of address section, you can select the new domain name of your website.

Settings

google webmaster tools settings

If your target audience is someone in a specific country, then you can select this option in GWT. For example if my target customer for KISSmetrics lives in the United States, I would then tell GWT that my target audience lives in the United States.

In addition to that you can select a preferred domain name. This is going to be http://yourdomain.com or http://www.yourdomain.com. Either one works, you just have to select which variation you prefer. The reason for picking one is that people may link to both versions of your domain and by selecting one Google will combine the links, which will help your rankings.

The last setting you should be worried about is crawl rate. If you feel that the Google bot needs to be crawling your website more often and faster then you can tell them to do so. Or you can just let them pick the crawl setting for your website. (this is typically the best option because if they crawl your website too often it can cause too much bot traffic going to your server and increase your hosting costs)

Your website on the web

Have you ever wondered how Google looks at your website? After all, it’s a search engine and not a human… so naturally it won’t be able to look at a website in the same way you do.

But luckily for you, through GWT you can see how Google views your website.

Search queries

google webmaster tools search queries

Not only is it important to go after keywords that have high search volume, but it is important to make sure that you have a good click through rate.

By monitoring the search queries page, you can work on improving your click through rate so that people are more likely to click on your listing when they search. Typically you can do this by making your title tag and meta description more attractive as that is what people read before clicking through to your site.

Links to your website

google webmaster tools links to your site

The best way to increase your rankings on Google is to get more sites to link to you. Usually this happens naturally if your website is providing valuable information to potential customers.

A good way to monitor your link growth is to continually monitor this area in GWT. In addition to that, make sure you monitor which pages people are linking to.

If your links aren’t growing fast enough consider writing relevant linkbait that could be submitted throughout the social web. Getting on the homepage of Digg.com can drive thousands of new links to your site.

Keywords

google webmaster tools keywords

You may have a good idea of what keywords you want to rank for, but that may not be consistent with what Google is ranking you for. Under the keywords section you can see what keywords your website is the most related to.

You can also see what variations of each keyword that are also relevant to your website. For example some people misspell keywords and you can find out which misspellings your website is most relevant for.

And if those aren’t the keywords you care to rank for, you can then use that data to adjust the content on your website.

Internal links

Google Webmaster Tools Internal Links

Linking your web pages together is a great way to get more Google love. For example, if you want your about page to rank for your company name make sure you link to it multiple times.

If you don’t link to your internal pages, they will not get as much PageRank and they won’t place as well in the search listings.

In addition to that, this data will also help you determine which pages Google feels is the most important. For example, if you look at the image above you’ll see that website owner felt that their about pages was one of the most important pages on their website. So naturally Google felt that as well.

Subscriber stats

google webmaster tools subscriber stats

If you have a blog, this area of GWT will be useful for you. If you don’t, it won’t.

Under the subscriber stats section you can see which of your blog posts are the most subscribed to by Google’s feed reader. You can then take that data and write more posts that are similar to your popular ones. And of course, you can stop writing blog posts similar to the ones that no one subscribed to, as readers probably didn’t enjoy them as much.

On a side note, if you want to track your RSS growth, you can also check out Feedburner, which will allow you to track how popular your feed is.

Diagnostics

Websites are made by humans, so don’t expect them to be perfect. Your code maybe a bit messed up, and even worse, your website may contain malware.

Through the diagnostics section, you can figure out what’s wrong with your site and how you can fix it.

Malware

google webmaster tools malware

If you have malware on your server, you should see a message here. If you don’t, GWT won’t show you much.

The reason it is important to not have malware on your server is that Google tries not to rank infected sites high because if someone goes to an infected site, their computer may get infected. If you do happen to have malware, make sure you clean it up.

Crawl errors

google webmaster tools crawl errors

The crawl errors section will show you if there any problems that relate to your site on the web or on a mobile phone. The most common error that you’ll see is a 404 error, which means Google’s bot can’t find that page.

The most common reason that you’ll see 404 errors is because other websites sometimes link to pages that don’t exist on your website or used to exist.

What you need to do is get a list of all of the websites that are linking to dead pages on your site and hit them up. When emailing them, ask them if they can change that link to a valid page.

Or if you see a lot of people linking to a dead page on your site, you can always 301 redirect that old URL to the new URL.

Crawl stats

google webmaster tools crawl stats

If you have thousands of pages on your site, then you should expect Google to crawl most of these pages on a daily or weekly basis. If they aren’t, then something is wrong.

Through the graphs and data tables that GWT provides, you should be able to get a good sense if they are crawling enough pages on your website. If they aren’t, consider adjusting the crawl rate under the settings tab.

HTML suggestions

google webmaster tools html suggestions

When Googlebot crawls your site, it may find some issues with your content. These issues won’t prevent your site from appearing in Google search results, but addressing them may help boost your traffic.

The most common problem is related to title tags and meta descriptions. If every page on your site has unique and detailed title tags and meta descriptions, you should be fine. At the same time, you also have to make sure your title tags aren’t too short or too long.

And if that isn’t the case, then you can go through the URLs that GWT tells you they have an issue with, and fix it.

Labs

GWT regularly tests new features out. The easiest way to find out about these new features is to go through the labs sections.

Fetch as Googlebot

google webmaster tools fetch as Googlebot

With Fetch as Googlebot you can see exactly how a page appears to Google. All you have to do is type in a URL and GWT will tell if they could successful see it or not.

There currently isn’t a ton of data that GWT is showing in this area, but I expect this to change in the future.

Sidewiki

google webmaster tools Sidewiki

If you’re a webmaster, you can leave a special Sidewiki entry on pages of your site. You can choose to leave a master entry for the whole site, or create page specific entries to engage your visitors.

All you have to do is:

  1. If you’ve successfully validated your account in GWT, you will see an option to write as the page owner.
  2. Select the “Write as the page owner” checkbox in the entry form. If you’d like to leave a master entry across the whole site, also select the “Show this page owner entry on all pages…” checkbox.
  3. Click Publish.

Site performance

google webmaster tools site performance

Your website’s load time is one of the most important things you should be monitoring. Every month you should be making sure you improve this number because if your website is too slow your Google traffic may drop.

Numerous website owners have seen a positive increase in their traffic by improving their website load time.

If you aren’t sure how fast your website should load, don’t worry. Google will tell you if your website is too slow or quick enough.

Video sitemaps

google webmaster tools video sitemaps

If you have video on your site, you want to make sure you include those raw video files in your sitemap. This way, Google can index them as they may not be able to find them otherwise.

This will help ensure that your videos are getting the traffic they deserve from Google video search.

If you are trying to create a video sitemap, this page should explain how to do so.

Conclusion

GWT is a useful tool that’s free. If you aren’t making use of it, you should start doing so now. The reason it’s worth using is because it will help guide you and tell you what to do if you want to improve your Google traffic.

What are you waiting for? Sign up for Google Webmaster Tools, it’s FREE!

Advertisements

A Guide to Google’s APIs


Image representing Google as depicted in Crunc...

Image via CrunchBase

 

 

Google has been opening up many of its most popular services to outside developers over the past year, including the Google Docs API this week. From quirky applications to venture-funded startups, a wide variety of new services are being launched leveraging Google’s APIs, helping users perform a multitude of tasks. Here is a non-technical introduction to some of the company’s most popular APIs and some of the most interesting applications built on top of them.

Google Toolbar API

The Google Toolbar is widely-used and comes standard with Firefox. The Toolbar API allows developers to create buttons for Google Toolbar, thus creating a way for you to add data from your web site to the user’s web browser. For example, the Fox News – Latest Headlines button will display all of the latest news from the Fox News site and let you click to the story. In addition to the more than 100 apps featured in the Google Toolbar Gallery from mainstream names like CNN and YouTube, dozens of independently developed applications and mashups have also been created. For example, the Twitter Google Toolbar Button allows you to input Twitter feeds and receive updates in your toolbar.

Google Gadgets API

Perhaps the most important of the Google APIs for those looking to take advantage of Google’s massive user base, the Google Gadgets API allows developers to create applications that run on iGoogle (formerly Google Personalized Home), Google Desktop, Google Page Creator, and the “Google Gadgets for Your Web Page” directory. For example, the CNN TV gadget streams live news, while Outlook Tasks imports your task list from Microsoft Outlook. Assuming you are able to get your application into Google’s official directory, the Gadgets API is a great way to gain exposure for your company’s product.

Google Base API

Google Base is Google’s service for listing things online – essentially a classifieds service integrated with the company’s other products like search and Google Checkout.

The Google Base API allows developers to both search the Google Base database and input new listings. Thus, shopping sites, classifieds aggregators, and others are building applications that either expand their own listings or allow sellers to submit items to multiple sites at once. vFlyer is a service that enables you to post to Google Base, Craigslist, and eBay, among others. For real estate listings, BaseEstate integrates Google Base listings into their service, which displays properties on a mashup of the Google Maps API.

Google Calendar API

The Google Calendar API allows developers to build applications that let users create, manage, and delete events from their calendars. Online task manager Remember The Milk has utilized the Google Calendar API to enable their users to sync their task list with their Google Calendar. For business users, there is a mashup on Salesforce.com that allows you to merge your events from salesforce.com with your Google Calendar. If you want to sync your Google Calendar with your mobile phone, open source project GCALSYNC allows you to do so. With dozens of startups focused on finding and managing events, expect more mash ups with Google Calendar in the future.

Google Desktop SDK

The Google Desktop SDK (Software Developer Kit) allows developers to build plugins that extend the functionality of Google’s popular desktop search software. Some plugins add capabilities to Google Desktop, while others are essentially widgets for other programs that you can place in your Desktop sidebar. An excellent example of an application that adds capabilities is the Google Desktop Search Plugin for Windows Explorer which links the “Search” icon that can be found throughout Windows to Google Desktop instead of the default Windows search tool. On the widget side of things, any Google Gadget can be quickly and easily added to your Desktop sidebar, thus making Gadgets an attractive method for developers to reach new users.

 

Google Maps API

One of the most popular (and longest running) Google API’s is that of Google Maps. The API allows developers to built applications that plot their own data on top of Google Maps. We recently took a look at 13 Must-See Google Maps Mashups, but there are hundreds (if not thousands) of applications using the API, ranging from Frappr’s social maps to Trulia’s real estate search. In addition to the API, Google also recently introduced Maplets, essentially allowing developers to place Google Gadgets on Maps.

AdWords API

The Google AdWords API allows developers to design new programs for managing and analyzing AdWords campaigns. This has lead to a variety of software packages (many of which are of course advertised on Google) that built upon AdWords. For example, the VisualCalc AdWords Dashboard turns data from AdWords into charts and graphs for analyzing which campaigns are performing best, how clicks and conversions are tending over time, and how various metrics compare in different ad groups. Unlike most of Google’s other APIs, developers pay a fee to build applications for AdWords, which is why most of the applications built to-date such as VisualCalc cost money.

Google Docs & Spreadsheets APIs

As announced earlier this week, the Google Documents List Data API allows developers to build applications that can upload documents to Google Docs, request a list of a user’s documents, or search content within a document. The Google Spreadsheets API performs similar functions, allowing external applications to access and edit data within the company’s spreadsheet program. A good example of these relatively new APIs in action is Swivel, where data can be pulled in from Google Spreadsheets and then utilize Swivel’s community tools for analyzing and discussing data.

In all, Google currently offers more than two dozen APIs, which can be found on the Google Code site. Much like the Facebook platform or the APIs offered from widely-used startups like Flickr and Twitter, Google’s APIs provide developers with an “in” to millions of potential users through Google’s vast reach. In turn, creating applications that are both useful and provide smooth integration with an existing Google service is an effective way to spread your product through technology instead of relying solely advertising or viral marketing. At the same time, as Google continues to add new APIs and expand on existing ones, the company further expands its reach as the developer community builds new products tailored to Google products and services.

Designing a blog with html 5


 

Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.

Firstly what we’ll do is use the headerfooterand nav elements to mark up the broad structure of the page. We’ll make the blog comments form much smarter by using the new data types and built-in validation available in HTML 5-aware browsers.

Then we’ll do some work on the guts of the page, using HTML 5’s article elements to better mark up blog posts and comments and show how to use the section elements to better structure accessible hierarchical headings on sites that are CMS-driven. As blogs are chronologically ordered, we’ll see what HTML 5 offers us for representing dates and times.

So take the phone of the hook, and make a cup of tea and we’ll get started.

Setting the DOCTYPE

HTML 5, when used as plain HTML rather than its XHTML 5 sibling doesn’t need a DOCTYPE. But all browsers do, otherwise they go into Quirksmode, which you don’t want: the collision of HTML 5 and Quirksmode is like matter and anti-matter meeting, and will cause a negative reality inversion that will make your underwear catch fire.

You’ve been warned, so at the top of your document, you need the line<!DOCTYPE html>.

Some sites “use” HTML 5, when in actual fact all they’ve done is take their existing code and change the DOCTYPE. That’s fine and dandy if you’ve been using valid, semantic code as HTML 5 is very similar to valid HTML 4.01. Eric Meyer mentions small differences like “not permitting a value attribute on an image submit”, and there are a few differences between the languages, summarised in the documentHTML 5 differences from HTML 4.

However, I don’t want simply to rebadge my existing code, but to use some of the new structural elements now.

Using some new structural elements

My blog – like millions of others – has a header denoted by <divid="header">, a footer <div id="footer">, some articles (wrapped by an area called “content”, <div id="content">) and some navigation (wrapped up in an area called “sidebar” <divid="sidebar">). Most sites on the Web have similar constructs, although depending on your choice they might be called “branding” or “info” or “menu”, or you might use the equivalent words in your own language.

Although these all have very different functions within the page, they use the same generic div in the markup. as HTML 4 has no other way to code them. HTML 5 has new elements for distinguishing these logical areas: headernavfooter and friends. (There’s more on this in an artice by Lachlan Hunt on A List ApartA Preview of HTML 5.)

The overall aim is to replace this structure:

structure chart before redesign

with this:

structure chart after redesign

It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and “colophon” information as well as site-wide navigation. I decided against the aside element, as the spec says it “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content”, but it’s nevertheless content rather than navigation. So I decided to go for the nav element as the closest fit.

I’ve wrapped the main content in a section element (previously I’d kept it as a div). section is defined in the spec

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.

Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use adiv element. Read more about using section appropriately.

In this case, the “generic document section” is that of main content. I’ve retained an id so that a skip links feature will work, although I hope that in the future, assistive technology will offer an automatic way for people to go to the first section or article.

My fellow HTML 5 doctor, Remy Sharp, also notes that if you retain the div, Internet Explorer without JavaScript would style the div, but none of the other content, making the site very hard to read.

New form attributes

As well as the main structural item on the page, I’ve added some new attributes on input elements in the comments form.

HTML 5 was designed to reflect what developers actually do rather than to reflect a philosophical purity, and that’s very clearly manifested in the new attributes which mean the browser takes up much of the work currently done by developers re-inventing validation routines in JavaScript. (Extending forms functionality was how the HTML 5 spec began).

So I amended the email input field in the comments to be input type="email" which means that when the user submits the form, anHTML 5-aware browser will use built-in validation routines to check that it’s in the correct format, without any JavaScript. Check it out in the current version of Opera, as that the only full implementation at the time of writing (June 2009), and note that it also adds a “mail” icon in the input field as a cue to the user.

There are similar input validation routines triggered by some of the new input types, such as url (which I use on the field that asks for the user’s web address), number and pattern which compares the input with an arbitrary regular expression.

Another good example is input type="date", which pops up a calendar widget/ date picker when the user focusses on the input field. You can test the date picker, or here’s a screenshot from Opera 9.6:

date picker pops up next to input field

A very useful new attribute I used on both input fields for commenter’s name and email address, and the comment textareawas type="required" which generates a message on submission if the fields are left blank. Each different localisation of a browser would need to have a different message, and it’s not (so far) customisable by the developer.

red-bordered browser message 'You have to specify a value' next to unfilled required field

The good thing with all this new form fabulousness is it’s all formed around new attributes on an existing element, so people using older browsers just see a plain old input field.

A note on screen-readers and HTML 5

I hope screen-readers are ready for these new interactions; I asked the html 5 group to formally invite screenreader vendors to participate in the specification; to my knowledge, none have done so.

Laying out the new elements

It’s not too hard to layout the new elements. In all the non-IE browsers, you can lay out anything using CSS – even a nonsense element. One gotcha is that that the current crop of browsers have no “knowledge” of these elements, although support is improving all the time.

All browsers have default settings for the elements they “know about”—how much padding, margin they element gets, does it display as a block or inline?. (Here’s a sample default stylesheet.) Unless over-ridden by CSS, these defaults apply. But the browsers don’t know about headernav and the like, so have no defaults to apply to them.

I got terrible rendering oddities until I explicitly told the browsers

header, footer, nav, article {display:block;}

IE layout

There’s one gotcha about styling HTML 5 pages in IE: it doesn’t work. You can force it to quite easily with a JavaScript hackdocument.createElement('element name'). (Lachlan Hunt gets to the bottom of why IE needs this.)

For your convenience, Remy Sharp has written an HTML 5 enabling script which I use in the header to conjure all the missing elements into existence all at once.

But let’s be clear: this won’t work if your IE user doesn’t have JavaScript turned on. How much of that’s a big deal that is for you to decide. Pragmatically, it seems to me that the sites that will benefit the most from HTML 5’s new “Ajax”-style features, such as drag-and-drop, are the sites that currently have no hope of working without JavaScript.

Firefox 2 and Camino 1 layout

Firefox 2 and Camino 1 both use Gecko 1.9 which has a bug and so gets grumpy if you don’t serve the page as XHTML. (Go figure; that’s almost enough to trigger a negative reality inversion and you know how bad that can be). However, Firefox and Camino users upgrade frequently so Firefox is in version 3, while Camino 2 beta is out, so the problem will soon cease to exist. (Read more at How to getHTML5 working in IE and Firefox 22 by Remy Sharp.)

What’s the point of those new structural elements?

Well, they add semantics to the page. The browser now knows which area of your site is the header or the footer because there are headerand footer elements, whereas div might be called “branding” and “legal”, or even “en-tete” and “pied-de-page” or “kopfzeile” and “fusszeile“.

But so what?

Robin Berjon expressed it beautifully in a comment on A List Apart:

Pretty much everyone in the Web community agrees that “semantics are yummy, and will get you cookies”, and that’s probably true. But once you start digging a little bit further, it becomes clear that very few people can actually articulate a reason why. So before we all go another round on this, I have to ask: what’s it you wanna do with them darn semantics?

The general answer is “to repurpose content”. That’s fine on the surface, but you quickly reach a point where you have to ask “repurpose to what?” … I think HTML should add only elements that either expose functionality that would be pretty much meaningless otherwise (e.g. canvas) or that provide semantics that help repurpose for Web browsing uses.

In my view, there are a couple of things I want to do with those semantics. The first is for search engine use; it’s easy to imagine Messrs Google or Yahoo! giving lower weighting to content in footer elements, or extra weight to content in the header. The second reason is to make the site navigable for people with disabilities. People with learning difficulties might instruct their browser always to put the articles before the navigation, for example. User agents might very well have a keyboard shortcut which jumped straight to the nav for example, or jumped straight past the navigation, in a programmatic implementation of “skip links“.

Which brings me to…

Further refining the HTML 5 structure

The blog home page

An interesting thing about a blog homepage is that there are generally the last 5 or so posts, each with a heading, a “body” and data about the post (time, who wrote it, how many comments etc.) and usually a link to another page that has the full blog post (if the homepage just showed an excerpt) and its comments.

HTML 5 has an article element which I use to wrap each story:

The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

Let’s look in more detail at the guts of how I mark up each blogpost.

Anatomy of a blog post

diagram of article structure; explanation follows

The wrapper is no longer a generic div but an article. Within that is a header, comprising a heading (the title of the blogpost) and then the time of publication, marked up using the time element.

Then there are the pearls of wit and wisdom that consitute each of my posts, marked up as paragraphs, blockquotes etc., and is pulled unchanged out of the database. Following that is data about the blog post (category, how many comments) marked up as a footer and, in the case of pages that show a single blogpost, there are comments expressing undying admiration and love. Finally, there may be navigation from one article to the next.

Data about the article

Following the content there is some “metadata” about the post: what category it’s in, how many comments there are. I’ve marked this up as footer. I previously used aside which “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content” but decided that it was too much of a stretch; data about a post is intimately related.

footer is a much better fit: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.” I was initially thrown off-course by the presentational name of the element; my use here isn’t at the bottom of the page, or even at the bottom of the article, but it certainly seems to fit the bill – it’s information about its section, containing author name, links to related documents (comments) and the like. There’s no reason that you can’t have more than one footer on page; the spec’s description says “the footer element represents a footer for the section it applies to” and a page may have any number of sections. The spec also says “Footers don’t necessarily have to appear at the end of a section, though they usually do.”

Comments

I’ve marked up comments as articles, too, as the spec says that an article could be “a user-submitted comment”, but nested these inside the parent article. The spec says

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.

These are headed with the date and the time of the comment and name of its author—if you want, you can wrap these in a header, too, but to me it seems like markup for the sake of it.

Times and dates

Most blogs, news sites and the like provide dates of articlepublication.

Microformats people, the most vocal advocates of marking up dates and times, believe that computer-formatted dates are best for people: their wiki says “the ISO8601 YYYY-MM-DD format for dates is the best choice that is the most accurately readable for the most people worldwide, and thus the most accessible as well”. I don’t agree (and neither do candidates in my vox pop of non-geeks, my wife, brother and parents).

I do agree with the micro formats people that hidden metadata is not as good as visible, human-readable data and therefore elected not to use the pub date attribute of article.

Therefore I’ve used the HTML 5 time element to give a machine parsable date to computers, while giving people a human-readable date. Blog posts get the date, while comments get the date and time.

The spec is quite hard to understand, in my opinion, but the format you use is 2004-02-28T15:19:21+00:00, where T separates the date and the time, and the + (or a -) is the offset from UTC. Dates on their own don’t need a timezone; full date times do. Oddly, the spec suggests that if you use a time without a date, you don’t need a timezone either.

There’s considerable controversy over the time element at the moment. Recently one of the inner circle, Henri Sivonen, wrote that it’s for marking up future events only and not for times tamping blogs or news items: “The expected use cases of hCalendar are mainly transferring future event entries from a Web page into an application like iCal.” This seems very silly to me; if there is a time element, why not allow me to mark up any time or date?

The spec for time does not mention the future event-only restriction: “The time element represents a precise date and/or a time in the proleptic Gregorian calendar” and gives three examples, two of which are about the past and none of which are “future events”. Although the spec doesn’t (currently) limit use of the element, it does limit format to precise dates in “the proleptic Gregorian calendar”. This means I can mark up an archive page for “all blog posts today” using time, but not “all July 2008 posts” as that’s not a full YYYY-MM-DD date. Neither can you mark up precise, but ancient dates, so the date of Julius Ceasar’s assassination, 15 March 44 BC is not compatible.

I don’t expect this to be resolved. If you think as I do, feel free to mail the Working Group to express your feeling!

Hopefully, this brief article has given you a quick overview of how to use some of the new semantic elements.

Make use of Cloud services. More effectively


Cloud computing icon

Image via Wikipedia

 

Cloud and cloud services are the latest buzz words, be it with major organizations, medium businesses, individual developers or ordinary home users. Everyone wants to share and store their documents, media and files on to the cloud. That is because it is simple, you can access it anywhere, gives you centralized storage, providesbackup and most cloud service companies claim that it is exceedingly secure. Many technology evangelists around the world foresee Cloud as the next big thing incomputer technology and predict that it will change the way we work, store, share and connect.

Listed below are few common tips on how an individual or home user can effectively use cloud service.

Backup your documents from Google Docs

Google Docs is the most extensively used online documents storage and sharing cloud service offered by Google. It offers to store, edit, save and share all major document formats commonly in use. Even after the assurance of online reliability from Google, it is safer to keep a backup on your offline storage. Not because Google data centres may crash tomorrow, but simply because your Internet connection may face issues one day and you may need a specific document urgently.

With Google Docs, you can download all your online documents into a zip file and save it offline. It allows a maximum download of only 2GB per zip file.

Open Google Docs and log in using your Google account. Select checkboxes of all or only required documents. Click Actions. Click Download. Choose the respective document formats or proceed with the default selection. Click Download. Wait for the processing to complete, post which it will prompt you to open or save the zipped file. Save it offline.

Backup your documents from Google Docs

Listen to music from Dropbox

Dropbox is fabulously good for storing and sharing any kind of files over the Internet. You can even store your music collection on Dropbox. These music files can also be played online via DropTunes service.

If you do not have any music files in your Dropbox, upload few from your hard drive. I uploaded a track by Enrique Iglesias.

Listen to music from Dropbox 1

Now, go to DropTunes and log in with your Dropbox credentials only. Navigate to the folder where your music files are stored. It will list all music files with a Playnext to each one. Click the respective Play button to play that track online.

Listen to music from Dropbox 2

Sync My Documents on your Windows to Dropbox

The My Documents directory on Windows acts as a primary document storage directory for most of us. Isn’t that the sole purpose Microsoft created it in the very first place? I think yes.

You can sync your My Documents directory to Dropbox. Therefore, anything you store, move or delete within My Documents will automatically synchronize with Dropbox. You should have the Dropbox client installed on your computer and a Dropbox directory already set.

Right click on My Documents and select Properties. Click on Location tab. Click the Move button and choose the already set Dropbox directory. Click Select Folder. Click Apply and then OK. Your My Documents directory is now synced with Dropbox.

Note: My Documents directory in Windows 7 may be found under the directory with your Windows Username (commonly placed on the desktop).

Sync My Documents on your Windows to Dropbox

How do you play around with Cloud services?

iWeb – Build A Quick, Easy & Beautiful Website [Mac only]


IWeb

Image via Wikipedia

 

Having recently discovered a way to get my own (unlimited) domain names and several good places where I could host them for free, I can’t help but falling into the mood of web building. And while I’m at it, I think this is the perfect time to try building one using Apple’s own iWeb 09.

This free Mac website building tool comes with iLife suite – free with every new Mac purchase. It promises its users quick and easy ways to build beautiful websites. To be able to achieve that, iWeb comes with various ‘plug and play’ ready-made templates for users to use and modify.

Experience is the best teacher. So there’s no better way to explore what iWeb can do than by using it to make use of our domain name and web host.

Settling on the Settings

The first thing that you’ll see when you first open iWeb is the choices of templates. Don’t worry too much at this stage. Just pick the one that you like, and you can change your mind later.

free mac website builder tools
Then we can continue with the settings. Click the “Site” item on the left pane, and you’ll see the “Site Publishing Setting” opened in the middle pane. This is the place to change the name of your site from “Site” into something more appealing.
free mac web tools

If you want to publish your site on your chosen hosting service, choose “FTP Server” from the “Publish to” options. (Note: This option is not available on the older version of iWeb). Then fill in all the fields with the required information; from the site name, to the FTP settings, to the website URL.

iWeb

For you Facebookers, there’s a bonus that you’ll love: the ability to update your Facebook profile when you publish your site. Tick the checkbox and provide the user information if you want to activate this option.

mac web design software

Shaping the Site

The web building process itself is as simple as adding pages (Command + N), editing the text, and replacing the pictures.

mac web design software

If you want to, you can edit every element of the page by clicking on that specific element and opening the “Page Inspector” from the “View –> Show Inspector” menu or by pressing “Command + Option + I

mac web design software

There are several types of pages that you can add, such as a blank page; ready to edit pages (Welcome Page, About Me page); blog page – where you can write and update your posts; and also the rich-media pages (Photo Album page, Movies page and Podcast page).

The pages will be placed in the left pane and you can re-arrange the order as you like. You can also add another website(s) (Command + Shift + N) to the project, each with its own pages and themes.

designing web pages in a mac

Enhancing with Elements

To enhance your site, you can add as many kinds of elements you want to each page. There are four tabs on the right pane:

    • Audios –> You can add music to your pages from Garageband and iTunes

designing web pages in a mac

    • Photos –> You can add pictures from iPhoto and Photobooth

designing web pages in a mac

    • Movies –> You can add movies from iMovie and iTunes

free mac web design programs

    • Widgets –> You can add several ready made widgets, including the one to include HTML code called HTML snippet widget

free mac web design programs

There are more advanced settings that you can do by going deeper into the Page Inspector, but the scope is too big to be discussed here. You can find many nice effects while you experiment with iWeb.

After the building process is done, you can do the final step by clicking the “Publish Site” button below. If you put the FTP settings right, everything should be uploaded to your server, and your site will be alive.

iWeb might not be the ultimate tool for those professional-level web designers. But for everyday folks who just want to build a beautiful site quickly and easily, this app is more than capable to fulfill their needs.

Have you tried iWeb? Got any tricks to optimize iWeb? Share using the comments below.

Adobe Dreamweaver CS5 – Part 6: Publishing your website


Adobe Dreamweaver CS4 logo

Image via Wikipedia

Welcome to the sixth and final part of this article series on creating your first website. This tutorial shows you how to set up a remote site in Dreamweaver. A remote site is usually a web server on a remote computer that holds copies of your local files. Users access the remote site when they view your pages in a browser.

This tutorial presents a very broad example of connecting to a remote server. It contains troubleshooting hints, but much depends on how your remote server is configured. When in doubt, consult your hosting company’s help desk or your system administrator.

Learn about remote sites

After you create a website, the next step is to publish it by uploading the files to a remote server. This is where you store your files for testing, production, collaboration, and publication (depending on your environment).

Before you can proceed, you must have access to a remote web server—such as a hosting company’s server, a server owned by the client you’re working for, or an intranet server within your company. Also, some Internet Service Providers (ISPs) provide access to free web space as part of your contract for internet connection. If you don’t have access to such a server, contact your ISP, your client, your system administrator, or one of the many hosting companies that provide web hosting packages. Some hosting packages are free, but usually insert advertisements into your site. An advertisement-free package can cost as little as a few dollars a month.

Alternatively, you can run a testing server on your local computer or network. For more information, see Setting up a local testing server in Dreamweaver CS5. The rest of this article concentrates on connecting to a remote server using FTP (file transfer protocol) or SFTP (secure file transfer protocol).

You also need to have a local site defined before you proceed. For more information, see Part 1 of this tutorial series,Setting up your site and project files.

Note: For more information about Dreamweaver sites, see Setting up a Dreamweaver site in Dreamweaver Help.

Define a remote server

Dreamweaver site management is based on the principle that your local files are an exact duplicate of your live site on the internet. So, index.html in your check_cs5 folder becomes the front page of your remote site. If you already have a live website that you don’t want to overwrite, use your site’s control panel to create a folder called check_cs5 where you can upload the Check Magazine files.

  1. In Dreamweaver, select Site > Manage Sites.
  2. In the Manage Sites dialog box, select the Check Magazine site.If you did not define the Check Magazine site, create a local folder for the site before you proceed. For more information, see Part 1 of this tutorial series, Setting up your site and project files.
  3. Click Edit.
  4. In the Site Setup dialog box, click Servers to open the panel where you add your server definitions (see Figure 1).

The Servers panel in the Site Setup dialog box.

Figure 1. The Servers panel in the Site Setup dialog box.

Dreamweaver CS5 allows you to set up multiple server definitions for both remote and testing servers. However, only one of each type can be active at any given time.

  1. Click the plus button at the bottom left of the panel to add the remote server definition. This opens a new panel for you to enter the server details (see Figure 2).

The panel where you enter the basic server details.

Figure 2. The panel where you enter the basic server details.

  1. In the Server Name text box, type a name for the server. This is used internally by Dreamweaver to identify the server, so you can choose any name you like. For example, you might want to create a definition for a server where you upload files for a client’s approval, and a different server for the live site. If you have only the one server, call it Remote Server.
  1. From the pop-up menu Connect using, select the method you want to use to connect to the server.The most common methods for connecting to a server on the Internet are FTP and SFTP. If you aren’t sure which to select, ask your hosting company or the server system administrator.
  2. The following options apply to both FTP and SFTP:
    • Enter the server’s FTP address (for example, ftp.yourdomain.com).
    • Enter your user name and password in the appropriate text boxes.
    • Click Test to test your connection.

    If the connection is unsuccessful, verify that you have the correct username and password. Passwords are usually case-sensitive, so make sure that Caps Lock is not turned on. If you selected SFTP, try FTP instead. If that doesn’t solve the problem, consult the troubleshooting section further down this page.

  3. The value that you need to enter in Root Directory is where many people go wrong, and it’s difficult to give precise instructions because hosting companies and server administrators have different policies.As I said earlier, Dreamweaver site management is based on the principle that your local files are an exact duplicate of your live site on the Internet. The value of Root Directory should be the path you need to enter after logging into your server to get to the folder where you want to install index.html.
    • If you want the Check Magazine home page to be the front page of your website, then this needs to be the path to the remote server’s site root. On some servers, it’s public_html. Others might use wwwwwwroot, or even nothing at all. On my remote server, it needs to be /home/username/public_html. If in doubt, ask your hosting company or server administrator.
    • If you want the Check Magazine home page to be in a subfolder called check_cs5, you need to enter the path to that folder. For example, on my server, it would be /home/username/public_html/check_cs5.
  4. The Web URL text box should contain the URL for the folder that you defined as the Root Directory. For example,http://www.example.com/ or http://www.example.com/check_cs5/. Dreamweaver might have tried to guess the correct value, but it’s only a guess. Do not accept the default value without checking it carefully.

Your settings should look similar to Figure 3.

Settings for connecting to a remote server by SFTP.

Figure 3. Settings for connecting to a remote server by SFTP.

  1. Click the Advanced button at the top of the panel to display the advanced options (see Figure 4).

Advanced options for a remote server.

Figure 4. Advanced options for a remote server.

  1. In most circumstances, you should leave these options at their default settings.
    • Maintain synchronization information is selected by default. This keeps track of when the files on your remote server were last updated, and allows you to use the Site Synchronization feature (see Synchronize the files on your local and remote sites in Dreamweaver Help).
    • Automatically upload files to the server on Save should rarely, if ever, be used because it overwrites your live files. If you make a mistake, it’s immediately displayed on your remote site for all the world to see.
    • Enable file check-out is for use in a team environment. It allows only one person at a time to edit a page (seeChecking in and checking out files in Dreamweaver Help).
  2. Click Save to register your server definition. This returns you to the Servers panel of the Site Setup dialog box, where your server definition is now listed (see Figure 5).

The remote server is now registered in the Site Setup dialog box.

Figure 5. The remote server is now registered in the Site Setup dialog box.

Dreamweaver selects the Remote checkbox automatically.

The icons at the bottom of the Servers panel allow you to add another server, or to delete, edit, or make a copy of the selected server definition. Making a copy is useful if you need to change only a few details to connect to a different server.

  1. Click Save to close the Site Setup dialog box, and then click Done to close the Manage Sites dialog box.

Upload your local files

You can now upload your files from your local folder to the remote web server to make your pages publicly accessible.

  1. In the Files panel (Window > Files), select the site’s local root folder (check_cs5).Note: In the Files panel, the local root folder actually begins with “Site – Check Magazine” because that’s the name of the site. If you hover the cursor over that title, Dreamweaver shows you the full path to the check_cs5 folder.
  2. Click the Put Files (up arrow) icon in the Files panel toolbar (see Figure 6).

Put files on the server.

Figure 6. Put files on the server.

  1. When Dreamweaver asks if you want to put the entire site, click OK.Dreamweaver copies all of the files to the remote folder you defined in the previous section. This operation may take some time, as Dreamweaver must connect to the remote server and then upload all the files.

    Note: Normally, you select the local root folder and upload the entire site only the first time you upload. Afterwards, you can upload only the files you’ve changed.

  2. Open your remote site in a browser to make sure all of the files uploaded correctly. Congratulations, you have a site online!

(Optional) Troubleshoot the remote server setup

A web server can be configured in many ways. The following list provides information about some common issues you may encounter in setting up a remote server and how to resolve them:

  • The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access.
  • In the panel where you set the basic options for the remote server, set the “Connect using” pop-up menu to FTP, and click the triangle at the bottom of the panel to reveal the More Options section (see Figure 7).

The More Options section can help solve FTP connection problems.

Figure 7. The More Options section can help solve FTP connection problems.

  • Use Passive FTP often solves connection problems caused by a software firewall.
  • Use IPV6 Transfer Mode should be used only if your remote server supports the newer IPv6 protocol (check with your hosting company or server administrator).
  • If you need to connect through a proxy server, select the Use Proxy check box, and click the Preferences link to set up the proxy details.
  • The other two options are self-explanatory.
  • If you still have problems with FTP access, contact your hosting company or system administrator for help.
  • For the Dreamweaver FTP implementation, you must connect to the remote system’s root folder. (In many applications, you can connect to any remote directory, and then navigate through the remote file system to find the directory you want.) Be sure that you indicate the remote system’s root folder (or the check_cs5 subfolder) as the Root Directory. If you have problems connecting, and you’ve specified the host directory using a single slash (/), you might need to specify a relative path from the directory you are connecting to and the remote root folder. For example, if the remote root folder is a higher-level directory, you may need to use ../../ to specify the host directory.
  • File and folder names that contain spaces and special characters often cause problems when transferred to a remote site. Use underscores in place of spaces, and avoid special characters—colons (:), slashes (/), periods (.), and apostrophes (‘) are not permitted in file or folder names.
  • Many servers use symbolic links (Unix), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server’s disk with another folder elsewhere. For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory; however, if you can connect to one part of the server but not to another, there may be an alias discrepancy.
  • If you encounter an error message such as “cannot put file,” your remote folder may be out of space. For more information, look at the FTP log.

Note: In general, when you encounter a problem with an FTP transfer, examine the FTP log by selecting Site > Advanced > FTP Log. For more information, see the extensive tech note on FTP troubleshooting on the Adobe website.

Adobe Dreamweaver CS5 – Part 5: Adding the Spry menu


Adobe Dreamweaver CS4 logo

Image via Wikipedia

Welcome to Part 5 of this tutorial series on creating your first website. This tutorial shows you how to add a Spry Menu Bar widget to the index page for Check Magazine, a fictional publication. A Spry Menu Bar widget is a set of navigational menu buttons that link to other pages of your website. In many cases, the menu displays submenus when a site visitor hovers over one of the buttons (though you won’t be using submenus in this tutorial). You may have heard of a navigation bar for a website—that’s essentially what I’m talking about here. Adobe calls its navigation bar a Spry Menu Bar widget, because the widget is a built-in part of the Adobe Spry framework for Ajax and comes installed with Dreamweaver CS3 and later.

The tutorial also shows you how to customize the widget by editing its CSS rules.

Note: For more information about the Spry Menu Bar widget in general, see Working with the Menu Bar widget in Dreamweaver Help. For more information about the Spry framework for Ajax, see About the Spry framework in Dreamweaver Help.

Locate your files and review your task

In this tutorial, you’ll begin with the index page you added text to in Part 4, Adding the main image text. If you did not complete that tutorial, you must complete it before proceeding, or download first_website_pt4_completed.zip and begin with those files. If you haven’t completed Part 1: Setting up your site and project files, you will need to complete that tutorial as well.

Your task in this tutorial is to add a Spry Menu Bar widget to the banner area of the Check Magazine home page. You’ll also learn how to customize the menu bar by editing its CSS rules. Figure 1 shows what the banner area will look like in a browser after you’ve added the menu bar.

The banner area of the Check Magazine home page with a Spry Menu Bar widget included.

Figure 1. The banner area of the Check Magazine home page with a Spry Menu Bar widget included.

Basically what you’ll do to accomplish this task is very similar to what you did in Part 4, Adding the main image text, of this tutorial series. You’ll add another content element to an already specified div (in this case, the new content element is a Spry Menu Bar widget, and the already specified div is the banner div), and use a combination of relative and absolute positioning to move the new element into place.

Insert and position the Spry Menu Bar widget

Dreamweaver lets you insert two kinds of Menu Bar widgets: vertical and horizontal. In this tutorial, you’ll insert a horizontal Menu Bar widget, as pictured in the previous section.

  1. In Dreamweaver, open the index.html file that you created in Part 4: Adding the main image text.
  2. Click in the banner div to select the banner image. Then press your right arrow key once to place the Insertion point to the right of the image, but still inside the div. You should see a large blinking Insertion point in the banner div (the top div.
  3. Click the Split view button to make sure the Insertion point is in the banner div between the <img> tag and the closing </div> tag. (This is very important; see Figure 2).

The Insertion point inside the banner div.

Figure 2. The Insertion point inside the banner div.

  1. Select Insert > Spry > Spry Menu Bar.Tip: You can also insert a Spry Menu Bar widget from the Spry category of the Insert panel. The Spry category of the Insert panel shows you all of the Spry widgets available in Dreamweaver.
  2. In the Spry Menu Bar dialog box, leave Horizontal selected and click OK.The Menu Bar widget, with its default color scheme of black text and gray background, is inserted in the page, but pushes the main image to the right (see Figure 3).

The Spry Menu Bar widget drops below the banner image, and displaces the main image.

Figure 3. The Spry Menu Bar widget drops below the banner image, and displaces the main image.

  1. You’ll fix the layout in a moment, but take a look at the code for the Menu Bar widget in Code view. The Menu Bar widget is actually a set of unordered lists nested inside a container <ul> (unordered list) tag. Each menu item is in<li> (list item) tags, and everything is styled with CSS. The container <ul> tag is assigned the CSS class attributeMenuBarHorizontal , the main attribute referenced in the many CSS rules responsible for the widget’s formatting.Note: I have not talked about CSS class rules in this series, and I’m not going to go into an in-depth explanation of them here; but essentially a class rule is a type of CSS rule that lets you format any HTML element on the page. Class rules do not restrict you to formatting specific tags or elements with IDs. For more information on class rules, see Understanding Class Rules in Dreamweaver
  2. The first thing you should do after inserting a Spry widget is to save the page.The Copy Dependent Files dialog box appears, stating that Dreamweaver is copying a number of supporting files to your local site. These files are all related to the display and functionality of the Spry Menu Bar widget. In particular, the SpryMenuBar.js file contains all of the information that drives the widget’s functionality, whereas the SpryMenuBarHorizontal.css file contains all of the CSS rules that dictate the widget’s formatting.
  3. Click OK to close the Copy Dependent Files dialog box and install the dependent files.Dreamweaver adds a SpryAssets folder to the root folder of your site. (You might need to click the Refresh button in the Files panel to see the new SpryAssets folder.) This folder contains all of the files necessary for the Spry Menu Bar widget to function. Later, you’ll need to make sure you upload these files to the web server when you publish your page on the Web.You’ll also notice that the Related Files toolbar now lists the Spry files associated with the index page. That’s because when you saved the page after creating the widget, Dreamweaver automatically attached the required files to the page for you.
  4. Now, let’s fix the layout.To position the Spry Menu Bar correctly, you need to create a rule for the banner div. It’s generally a good idea to keep your style sheet in logical order, so the new rule should come after the body rule. Dreamweaver always inserts a new CSS rule immediately after the rule that’s currently selected in the CSS Styles panel.Open the CSS Styles panel, and make sure it’s in All mode. Select the #container rule, and click the New CSS Rule button (see Figure 4).

Select the #container rule and click the New CSS Rule button.

Figure 4. Select the #container rule and click the New CSS Rule button.

  1. Use the following settings in the New CSS Rule dialog box:
    • Set the Selector Type pop-up menu to ID.
    • Type #banner in the Selector Name text box.
    • Make sure the Rule Definition pop-up menu is set to check_cs5.css.
  2. Click OK to open the CSS Rule Definition dialog box, and select Positioning from the Category list on the left.
  3. Select relative from the Position pop-up menu, and click OK to close the dialog box.
  4. The main image snaps back into position, with the menu bar occupying a block of its own between the banner and main images (see Figure 5).

The menu now occupies a block of its own between the two images.

Figure 5. The menu now occupies a block of its own between the two images.

  1. Move your cursor pointer over the menu bar. This triggers the display of a turquoise tab at the top left. Click this tab to select the menu bar (see Figure 6).

Click the turquoise tab to select the menu bar.

Figure 6. Click the turquoise tab to select the menu bar.

  1. In the Property inspector, change the menu’s ID (in the text box just below Menu Bar) from the default MenuBar1to check_menu, and press Tab to make the change. The new ID is displayed in the Property inspector and in the Tag selector at the bottom of the Document window (see Figure 7).

Change the menu bar's ID in the Property inspector.

Figure 7. Change the menu bar’s ID in the Property inspector.

  1. You can now create a new CSS rule to position the menu bar.With the menu bar still selected in Design view, open the CSS Styles panel, select #banner , and click the New CSS Rule button.
  2. In the New CSS Rule dialog box, the Selector Name text box should be automatically populated with#container #banner #check_menu .Click the Less Specific button twice to leave just #check_menu .Make sure that Rule Definition is set to check_cs5.css, and click OK.Note: If the correct values weren’t automatically selected in the New CSS Rule dialog box, just set them manually. When setting the values manually, select ID from the Selector Type pop-up menu.
  3. In the CSS Rule Definition dialog box, select Positioning from the Category list on the left.
  4. In the Positioning category, use the following settings:
    • Position: absolute
    • Top: 50 px
    • Right: 0 px
    • Bottom: 0px

    Click OK to close the dialog box.

  5. Check the position of the menu bar in Design view. It’s not quite right. It’s aligned with the right edge of the banner image, but isn’t aligned correctly at the bottom (see Figure 8).

The menu bar isn't in the right position in Design view.

Figure 8. The menu bar isn’t in the right position in Design view.

The reason for this is because there are conflicting top and bottom offsets for the #check_menu style rule. The ultimate aim is to align the bottom and right of the menu bar with the bottom and right edges of the banner image, in the same way as you aligned the main_text div against the guides in part 4 of this tutorial series.

Unfortunately, the menu’s own style rules prevent Design view from displaying the menu in the correct position. So, the top offset of 50 pixels has been added as a temporary measure to make life easier while working in Design view.

  1. Select #check_menu in the CSS Styles panel, and move your cursor pointer to the left of the top property in the Properties pane until the Disable CSS Property icon appears (see Figure 9).

Temporarily disable the top property for #check_menu.

Figure 9. Temporarily disable the top property for #check_menu.

Click once to disable the top property temporarily. If you’re lucky, the menu should snap into its correct position, but it’s more likely to jump to the top of the banner div and remain inaccessible in Design view.

Note: If you’re using an older version of Dreamweaver, you’ll need to comment out the top property manually in the style sheet.

  1. Click the Live View button. The menu is displayed where you want it—aligned with the right and bottom edges of the banner image (see Figure 10).

The menu bar is in the right position in Live View.

Figure 10. The menu bar is in the right position in Live View.

  1. Click the Live View button to exit Live View, and re-enable the top property by clicking the disabled symbol to the left of its name in the CSS Styles panel.
  2. Select File > Save All Related Files to save all your changes.

Change the width of the Menu Bar widget

The appearance of the Spry Menu Bar widget is controlled by the CSS in the SpryMenuBarHorizontal.css file that Dreamweaver just added to your site. The SpryMenuBarHorizontal.css file resides in the SpryAssets folder (see Figure 11).

The SpryMenuBarHorizontal.css file in the SpryAssets folder of your site.

Figure 11. The SpryMenuBarHorizontal.css file in the SpryAssets folder of your site.

You can (and now do) have multiple CSS files attached to a single page. For example, if you add more Spry widgets to the page, Dreamweaver creates and attaches a new style sheet for each of the new widgets you add.

  1. Double-click SpryMenuBarHorizontal.css in the Files panel to open it in the Document window. You’ll see that the CSS rules that format the Menu Bar widget are long and—if you’re not familiar with CSS—confusing. Unfortunately, of all the Spry widgets that come with Dreamweaver, the Menu Bar widget is the most complicated animal, and in order to avoid confusing you any more than you need to be, I’m going to avoid talking in depth about these rules.Note: There’s an in-depth tutorial about customizing a Spry menu bar on my website athttp://foundationphp.com/tutorials/sprymenu/customize1.php.Luckily, Dreamweaver makes it somewhat easier to customize the Menu Bar widget by giving you the ability to edit the widget’s CSS rules in the CSS Styles panel.
  2. Any changes made to SpryMenuBarHorizontal.css automatically affect every Spry menu bar in the same site. So, before editing the style sheet, it’s a good idea to make a copy, and make the changes to the copy. That way, if you make a mess of the menu, you can always revert to the original file.With SpryMenuBarHorizontal.css the active document, select File > Save As. In the Save As dialog box, navigate to the styles folder in the Check Magazine site, and save the file as check_menu.css. When Dreamweaver asks if you want to update the links, click Yes.
  3. Close both SpryMenuBarHorizontal.css and check_menu.css.
  4. You need to detach SpryMenuBarHorizontal.css from index.html and attach check_menu.css in its place.In the CSS Styles panel, select SpryMenuBarHorizontal.css, and click the trash can button at the bottom of the panel to unlink the style sheet (see Figure 12).

Unlink SpryMenuBarHorizontal.css.

Figure 12. Unlink SpryMenuBarHorizontal.css.

  1. Click the button that looks like a chain link at the bottom of the CSS Styles panel to attach a new style sheet (see Figure 13).

Attach a new style sheet.

Figure 13. Attach a new style sheet.

  1. In the Attach External Style Sheet dialog box, click the Browse button to navigate to check_menu.css in the stylesfolder, and click OK (Windows) or Choose (Mac OS X) to select it. Then click OK to close the Attach External Style Sheet dialog box.You should now have two style sheets listed in the CSS Styles panel: check_cs5.css and check_menu.css (see Figure 14).

The copy of the menu's style sheet has been attached to the page.

Figure 14. The copy of the menu’s style sheet has been attached to the page.

  1. Save index.html. The two style sheets should be listed in the Related Files toolbar, together with SpryMenuBar.js, the external JavaScript file that controls the menu (see Figure 15).

The two style sheets and the JavaScript file are listed in the Related Files toolbar.

Figure 15. The two style sheets and the JavaScript file are listed in the Related Files toolbar.

  1. Click the Current button in the CSS Styles panel. (You’ve been working in All mode up until now.)
  2. In the Document window, select the Menu Bar widget by clicking its turquoise tab. (Hover over any part of the widget to make the tab appear.)Tip: You can always tell which page element is selected by looking at the Property inspector (Window > Properties). In this case, you’ll be able to tell if the Spry Menu Bar widget is selected if you see its properties displayed in the Property inspector.You’ll notice a few things happening in the CSS Styles panel after you’ve selected the widget. One is that the#check_menu rule appears in the Properties pane of the CSS panel. That’s because the #check_menu rule governs the <ul> container for the widget (the tag you’ve selected). The other thing you’ll notice is the appearance of properties for the #check_menu rule in the Properties pane. Even with a large monitor, you’ll probably need to resize the CSS Styles panel to see everything I’m talking about. You can resize the panel by dragging the bottom boundary of it downwards. This will reduce the height of the Files panel, but that’s OK. Alternatively, double-click the Files panel tab to close it. For now, you need as much real estate in the CSS Styles panel as possible (see Figure 16).

The CSS Styles panel in Current mode.

Figure 16. The CSS Styles panel in Current mode.

Tip: You can also resize any of the three separate panes in the CSS Styles panel by dragging their top or bottom borders.

OK, now that you can see everything you need to see in the CSS Styles panel, you can begin editing the widget. But before you proceed, ensure that the Rules pane in the CSS Styles panel looks like Figure 16. THIS IS VERY IMPORTANT. If it doesn’t, chances are you have About view showing in the Rules pane, rather than the cascade of rules. If you have About view showing in the Rules pane, click the Cascade button in the upper right corner of the Rules pane. (There are only two buttons there; it’s the one on the right.)

  1. Click the ul.MenuBarHorizontal rule in the Rules pane to select it. When the ul.MenuBarHorizontal rule is selected, the full name of the rule appears below in the title bar of the Properties pane.
  2. Click the Add Property link in the Properties pane. This opens a pop-up menu.
  3. Click the pop-up menu arrow to reveal the menu, scroll down to find the text-transform property, and select it.
  4. From the value pop-up menu to the right, select uppercase.The text in your Menu Bar widget changes to uppercase.
  5. Now click inside the text ITEM 2 in the Menu Bar widget. (Do not select the text, simply click somewhere inside of it.)Three more rules appear in the Rules pane of the CSS Styles panel, with the last rule selected. There are now a total of eight rules listed, five of them related to the Menu Bar. (You might need to expand the Rules pane to see them all.)
  6. In the Rules pane, click the third Menu Bar rule in the list, the ul.MenuBarHorizontal li rule.
  7. In the Properties pane, edit the last property listed ( width ). Click the 8 em value of the width property to make it editable, and then change the width to 7 em (see Figure 17), and then press Enter/Return.

Change the width property for the ul.MenuBarHorizontal li rule.

Figure 17. Change the width property for the ul.MenuBarHorizontal li rule.

The width of the menu items in the menu bar is reduced to 7 em. Don’t worry that the menu is no longer aligned with the right edge of the banner image. You’ll fix that in a moment.

Note: When you see strikethrough lines in the CSS Styles panel (for example, the width property is struck through in Figure 17) it means the property doesn’t directly affect what’s currently selected in Design or Code view. Your cursor is inside the text, but the width property here governs the surrounding <li> tags, not the text itself. Of course, changing the width property of the <li> element has an indirect effect on the text inside.

If you want to see what I mean, hover over the edge of the ITEM 2 menu item in Design view until you see its border outlined in red, then click to select the item. When you select the item, all strikethroughs in the CSS panel should disappear. That’s because all of the rules you’re now viewing directly affect that selection (the <li> tag). And if you’re still not convinced, just look down at the Tag Selector at the bottom of the Document window. The <li> tag should be selected down there as well.

If you do all of this, be sure to click back inside the ITEM 2 text when you’re finished. You need to have the <li> tag deselected for the rest of the following tasks.

  1. In the Rules pane, click the fourth Menu Bar rule in the list, the ul.MenuBarHorizontal a rule.
  2. In the Properties pane, select the padding property and click the Delete CSS Property button, the trash can icon (see Figure 18).

Delete the padding property from the ul.MenuBarHorizontal a rule.

Figure 18. Delete the padding property from the ul.MenuBarHorizontal a rule.

After you delete this rule, the Menu Bar should be much shorter in Design view. It also springs back in alignment with the right edge of the banner image.

Edit the Menu Bar widget’s text and links

Now that you’ve reduced the default size of the menu bar, you’ll edit the menu bar items themselves. But before you do that, I want to show you how the default submenus of the Menu Bar widget work.

  1. Click the Live View button to enter Live View.
  2. Run the cursor over the menu bar and observe the interaction. Items 1 and 3 have submenus. If you hover over Item 3, you’ll see that the Item 3.1 submenu has a submenu (see Figure 19).

The Menu Bar widget and its submenus.

Figure 19. The Menu Bar widget and its submenus.

Menu Bar widgets can have as many submenus as you want. However, the Dreamweaver Property inspector only supports two levels of submenus. To add more submenus, you need to work directly in the code.

You don’t need to worry about submenus right now though. You’re actually going to get rid of all of them for this website.

  1. Click the Live View button again to exit Live View.
  2. Select the Menu Bar widget in the Document window by clicking its turquoise tab.
  3. In the Property inspector, make sure Item 1 is selected in the first column.
  4. Select the submenu item, Item 1.1, in the second column, and click the minus (Remove menu item) button (see Figure 20).

Delete the first submenu item from Item 1.

Figure 20. Delete the first submenu item from Item 1.

  1. Delete Item 1.2 and Item 1.3 as well.
  2. Select Item 3 in the first column.
  3. Select the submenu item, Item 3.1, in the second column, and click the minus (Remove menu item) button.When you try to delete this submenu, Dreamweaver alerts you that you are also deleting the submenu’s submenu (referred to as its children). Click OK.
  4. Delete Item 3.2 and Item 3.3 as well.Now that you’ve deleted all of the submenus, you are ready to edit the menu bar text.
  5. Select Item 1 in the first column again and then do the following:
    • In the Text text box, type Features.
    • In the Link text box, type news.html (see Figure 21).

Text and Link values added for Item 1 of the Menu Bar widget.

Figure 21. Text and Link values added for Item 1 of the Menu Bar widget.

Note that the Menu Bar widget is changing before your very eyes. You don’t need to type capital letters in the Property inspector because you already defined a CSS rule that makes all letters in the Menu Bar widget capital no matter what.

Additionally, as in an earlier tutorial, you’re going to use the news.html page as your sample page for all links. But if you were building the website for real, you would be linking to separate pages.

  1. Select Item 2 in the first column of the Property inspector and then do the following:
    • In the Text text box, type Fashion.
    • In the Link text box, type news.html.
  2. Select Item 3 in the first column of the Property inspector and then do the following:
    • In the Text text box, type Lifestyle.
    • In the Link text box, type news.html.
  3. Select Item 4 in the first column of the Property inspector and then do the following:
    • In the Text text box, type Calendar.
    • In the Link text box, type news.html.

    Your Menu Bar widget now looks like Figure 22.

The Menu Bar widget after the text for all menu items has been changed.

Figure 22. The Menu Bar widget after the text for all menu items has been changed.

You’re almost there. You just need to add one more menu item to the widget.

  1. With the Menu Bar widget still selected, click the plus button above the first column in the Property inspector (see Figure 23).

Add another menu item.

Figure 23. Add another menu item.

Dreamweaver adds an Untitled Item to the menu bar.

  1. With the Untitled Item selected in the first column of the Property inspector, do the following:
    • In the Text text box, type News.
    • In the Link text box, type news.html.
  2. Click anywhere on the page to deselect the menu bar. Don’t worry if the new item in the menu bar has dropped down below the other items.
  3. Select File > Save All Related Files.
  4. Click the Live View button to turn on Live View. Then click it again to exit Live View. The menu items should all line up in a single row.

Change the Menu Bar widget’s colors

Only a few more edits and the menu bar will be final.

  1. Click anywhere inside the Menu Bar widget. For example, click inside the word Fashion.The five Menu Bar–related rules appear in the Rules pane of the CSS Styles panel.
  2. Click the fourth Menu Bar–related rule, the ul.MenuBarHorizontal a rule.
  3. In the Properties pane, click the black box in the color value field and use the eyedropper to select white ( #FFF), as shown in Figure 24.

Change the default text color.

Figure 24. Change the default text color.

You’ll notice that the text of the Menu Bar widget has changed to white. The ul.MenuBarHorizontal a rule is the rule that controls the text color of the menu items in their default state (that is, when you’re not hovering over them).

  1. Click the gray box in the background-color value field and use the eyedropper to select black ( #000 ).The background color of the menu items changes to black.
  2. Click the Live View button and run your cursor over the menu items.Yikes! You’re getting blue backgrounds upon hovering. That’s another default property of the Spry Menu Bar widget, so let’s change it.
  3. Click the Live View button again to exit Live View.
  4. Click anywhere inside the Menu Bar widget. For example, click inside the word Fashion.
  5. The five Menu Bar–related rules appear in the Rules pane again.Click the last Menu Bar–related rule, the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule.Note: I know that it’s impossible to see the full name of this rule in the Properties pane. You just have to trust me that it’s the final rule listed in the Rules pane.
  6. In the Properties pane, click the blue box in the background-color value field and use the eyedropper to select black ( #000 ).
  7. Click the #FFF default color in the color value field, change it to #00ADEF (that’s zero, zero, A, …) and press Enter/Return (see Figure 25).

Change the background and text properties for the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule.

Figure 25. Change the background and text properties for the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule.

The #00ADEF color is blue, as you can see. It’s the color the menu bar’s text will change to when you hover over the links in the menu bar.

Note: Don’t forget the hash sign at the beginning of the hexadecimal number for the color.

  1. There’s one more rule you need to edit before you’re finished; it’s a tricky one, hidden deep within the CSS file. You’ll switch to All mode in the CSS Styles panel in order to make it easier to find and edit the rule.In the CSS Styles panel, click the All button to view All mode.As you know from previous tutorials, All mode shows you all of the rules that affect the page you’re working on, not just the rules that affect the current selection.
  2. Click the plus sign next to check_menu.css to expand the list of rules if it isn’t already expanded. (Macintosh users need to click the arrow to expand the list.)The check_menu.css file name is at the bottom of the All Rules pane, so you might need to scroll or resize the pane to see it.
  3. Scroll down and locate the rule that begins ul.MenuBarHorizontal a.MenuBarItemHover . . . (The rule is so long I don’t even want to spell the whole thing out.) It’s immediately below the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule that you were just editing in Current mode (see Figure 26).

Select the world's longest CSS rule.

Figure 26. Select the world’s longest CSS rule.

Once you’ve located the rule, click it to select it.

You now need to do exactly the same thing that you did for the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule. Sorry, but it’s just the way the CSS for the Menu Bar widget is written, and if you don’t change this rule, too, the hover states will not work as you intend them to work.

  1. In the Properties pane, click the blue box in the background-color value field and use the eyedropper to select black ( #000 ).
  2. Click the #FFF default color in the color value field, change it to #00ADEF (that’s zero, zero, A, …), and press Enter/Return.Note that nothing has happened in Design view for awhile. Why? Because you’ve only been editing properties that affect the hover and focus states of the menu bar. To see those states, you need to enter Live View and test the widget again.But first, you need to save the CSS file so that the changes can take effect.
  3. Select File > Save All Related Files.
  4. Click the Live View button, and hover over the items in your menu bar.
  5. The menu is still in the wrong place, so select the #check_menu style rule in the CSS Styles panel (it’s in check_cs5.css), and click to the left of the top property to disable it. The menu drops into place. The hover background color is now black, and the hover text color is the blue you defined (see Figure 1).
  6. Hold down the Ctrl key (Windows) or the Cmd key (Mac OS X), and click one of the links. The news.html page loads into Live View.

The menu loads news.html into Live View.

Figure 27. The menu loads news.html into Live View.

  1. The menu in news.html is only an image, so click the Home or Back button on the Browser Navigation bar to return to index.html.Note: Live View navigation works only in Dreamweaver CS5. If you are using an older version of Dreamweaver, you need to test the links by previewing the index page in an ordinary browser.
  2. Click the Live View button to exit Live View. The menu moves back to the top of the banner image. If you want to do any further work on it, re-enable the top property for the #check_menu style rule. However, the top property should remain commented out when the page is uploaded to a remote server.

It’s unfortunate that Design view can’t handle the position of the menu accurately, but that’s what Live View is for—to test the way the page will look in a standards-compliant browser. Design view should only ever be taken as an approximation, although most of the time, it’s a very close one.

Add a top-level heading to the page

There’s just one final tweak that you need to make to index.html before it’s complete. The page doesn’t have a top-level heading ( <h1> ). The design uses the banner image instead. This looks fine in a browser, but search engines and screen readers expect pages to be organized with a proper hierarchy of headings: <h1> at the top of the page, <h2>for sideheads, and <h3> for subsections. You rarely need to use deeper levels of headings, and you should never choose a particular level just because of its default size. As you have seen throughout this tutorial series, you can use CSS to change the default look of a tag.

The problem with adding an <h1> tag to this page is that it will destroy the design. Well, it would if it weren’t for the magic of CSS. You can use absolute positioning to move the heading out of view. People visiting the site in a visual browser see the banner as normal, but search engines, text browsers, and screen readers see the <h1> at the start of the page.

Here’s how you do it.

  1. You need to add the <h1> tag between the opening <div> tags of the container and banner divs. The obvious way of doing this is to switch to Code view, and add it manually. However, I’d like to show you a neat trick to get the insertion point in the right place.Click anywhere inside the banner at the top of the page. Then select <div#banner> in the Tag selector at the bottom of the Document window. This selects the whole div.
  2. Press the left arrow key once. If you check in Split view, you’ll see that the insertion point is to the left of the opening tag of the banner div.
  3. In the Property inspector, make sure the HTML button is selected, and choose Heading 1 from the Format pop-up menu. This inserts a pair of <h1> tags between the two <div> tags, and opens up a large blank space above the banner image.
  4. In Design view, click in the space that has just opened up, and type Check Magazine: Fashion and Lifestyle (see Figure 28).

Adding a top-level heading to the page.

Figure 28. Adding a top-level heading to the page.

  1. Open the CSS Styles panel, which should still be in All mode, and scroll up to the #container rule in check_cs5.css. Select it, and click the New CSS Rule button at the bottom right of the CSS Styles panel.
  2. If your insertion point is still inside the heading, the New CSS Rule dialog box should already have the correct settings. Check that they look like Figure 29, and amend them if necessary.

Creating a new CSS rule for the top-level heading.

Figure 29. Creating a new CSS rule for the top-level heading.

Note: The value in the Selector Name text box is #container h1 . This is a descendant selector that affects <h1>tags in the container div. Normally, a page should have only one <h1> tag, so you could use h1 on its own. However, the selection made by Dreamweaver is fine.

  1. Click OK to open the CSS Rule Definition dialog box, and select the Positioning category.
  2. Select absolute from the Position pop-up menu.
  3. In the Top text box, type -500 (minus 500), and set the pop-up menu alongside to px.
  4. Click OK to close the CSS Rule Definition dialog box, and select File > Save All Related Files.
  5. Test the page in Live View, and BrowserLab. The top-level heading is tucked out of sight, 500 pixels above the container div. You can’t see it, but search engines, text browsers, and screen readers can.

Congratulations! You’ve finished the index.html page for Check Magazine, and the client is very pleased. If you want to compare your work against the completed files for the series, download the first_website_pt5_completed ZIP file.

The last thing you need to do is publish the page and its assets to a web server so that other people can view your work. I’ll show you how to do that in the next tutorial, Part 6: Publishing your website