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.


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:


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.


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.


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 or 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 can drive thousands of new links to your site.


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.


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.


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.


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.


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.


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!

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.”


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.

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


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.


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 3: Adding content to pages

Adobe Dreamweaver CS4 logo

Image via Wikipedia


Welcome to the third part of this tutorial series on creating your first website. This tutorial shows you how to add content to web pages in Adobe Dreamweaver CS5/CS5.5. You can add many different kinds of content to web pages, including graphics, text, links, and Spry widgets—to name just a few. After you’ve added content to your pages, you can preview your work in Dreamweaver so that you can see what it will look like on the web.

Note: You won’t be adding a Spry widget to the page until Part 5 of this tutorial series, Adding the Spry menu.

Locate your files and review your task

In this tutorial, you’ll begin with the CSS layout (index.html) you created in Part 2, Creating the page layout. If you did not complete that tutorial, you must complete it before proceeding, or download KB) and begin with those. All the required assets for this tutorial are in the check_cs5 local site folder that you set up in Part 1. If you are using the completed files from Part 2, follow the instructions in Part 1 for setting up the Check Magazine site on your local computer.

Your task is to add assets to the home page for Check Magazine, a fictional publication. You’ll learn how to add images, text, and links. You’ll also learn how to format text using CSS. Figure 1 shows what the finished page will look like at the end of Part 3.

The page after you have entered content into it.

Figure 1. The page after you have entered content into it.

Insert images

After you create your page layout, you are ready to add assets to the page, starting with images. You can use several methods to add images to a web page in Dreamweaver. In this section, you’ll add three images to the Check Magazine page using various methods.

Insert an image by using the Insert menu

In Part 2, you used the Insert panel to insert an image. This time, you’ll use the Insert menu.

  1. In Dreamweaver, open the index.html file that you created in Part 2, Creating the page layout.
  2. Delete the placeholder text in the left_column div. Make sure the Insertion point remains inside the div (see Figure 2). (In other words, make sure you don’t click anywhere outside the div after you’ve deleted the placeholder text.)

The left_column div with the placeholder text deleted.

Figure 2. The left_column div with the placeholder text deleted.

  1. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div.
  2. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div, and click the Split button to see what has happened in the underlying code. Dreamweaver has inserted two paragraphs ( <p> tags), each with &nbsp; inside them (see Figure 3).

Dreamweaver has inserted two empty paragraphs in the div.

Figure 3. Dreamweaver has inserted two empty paragraphs in the div.

Note: The &nbsp; is the HTML entity (code that represents a special character) for a nonbreaking space. It’s there to make the paragraph easier to select in Design view. Dreamweaver normally deletes it automatically as soon as you start typing or insert anything into the paragraph.

  1. Select Insert > Image.
  2. In the Select Image Source dialog box, navigate to the site’s images folder, select the car.jpg file, and click OK (Windows) or Choose (Mac OS X).
  3. Dreamweaver displays the Image Tag Accessibility Attributes dialog box (unless you’ve changed the default preferences).Type Car in the Alternate Text text box and click OK.The image appears in Design view, and Dreamweaver inserts the necessary HTML in the underlying code, removing the nonbreaking space in the process (see Figure 4).

The inserted car image and the underlying code.

Figure 4. The inserted car image and the underlying code.

  1. Leave the image selected (in other words, don’t click anywhere else on the page), and look at the Property inspector at the bottom of the Dreamweaver application window. (If the Property inspector is hidden, you can display it by selecting Window > Properties).

The Property inspector displays all of the properties for whatever asset you have selected in the Document window. Since we have our new image selected, the Property inspector is displaying the properties for the car.jpg image. You can see that the Property inspector displays the width and height of the image, the file path to the image, and the alternate text that you specified before inserting the image (see Figure 5).

The Property inspector displaying image properties.

Figure 5. The Property inspector displaying image properties.

The Property inspector is one of the most powerful tools in Dreamweaver. You can use it to change properties for any selected asset on your page at any time.

Note also that the <img> tag is selected in the Tag selector (at the bottom of the Document window)—yet another way that Dreamweaver communicates the precise selection of page assets.

Now let’s add the remaining images.

Insert an image by dragging

To insert an image by dragging:

  1. Delete the placeholder text in the center_column div. Make sure the Insertion point remains inside the div.
  2. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div.
  3. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div.
  4. In the Files panel (Window > Files), locate the data_addict.jpg file (it’s inside the images folder) and drag it to the insertion point in the center_column div (see Figure 6).Important: Make sure you drag the data_addict.jpg to the Insertion point at the top of the center_column div. It’s easy to mistakenly drop the image in the lower half of the div when dragging.

Drag the data_addict.jpg file to the insertion point in the center_column div.

Figure 6. Drag the data_addict.jpg file to the insertion point in the center_column div.

  1. In the Image Tag Accessibility Attributes dialog box, type Data in the Alternate Text text box and click OK.The image appears on your page. You can see all of its properties in the Property inspector.
  2. Save the page. It’s important to save often!

Insert an image from the Assets panel

To insert an image from the Assets panel:

  1. Delete the placeholder text in the right_column div. Make sure the Insertion point remains inside the div.
  2. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div tag.
  3. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div.
  4. Click the Assets tab in the Files panel group, or select Window > Assets to make your site assets appear.The images category in the Assets panel is selected by default. If it isn’t selected, click the Images button to view your image assets (see Figure 7).

The Images category of the Assets panel.

Figure 7. The Images category of the Assets panel.

The Assets panel displays assets for the site associated with the active document in the Document window. In the screen shot, you can see that the Assets panel displays the selected image asset in the preview area.

  1. In the Assets panel, select the helmet.jpg file.
  2. Do one of the following to insert the helmet.jpg file in the page:
    • Drag the helmet.jpg file to the insertion point in the right_column div.
    • Click Insert at the bottom of the Assets panel.
  3. In the Image Tag Accessibility Attributes dialog box, type Helmet in the Alternate Text text box and click OK.
  4. Save the page, which should now look as shown in Figure 8.

The page after inserting images in the columns.

Figure 8. The page after inserting images in the columns.

For more information on working with the Assets panel, see Working with Assets in Dreamweaver Help.

Insert text

Now you’ll add text to the page. You can type text directly in the Document window or you can copy and paste text from other sources (such as Microsoft Word or plain text files). Later, you’ll use CSS to format the text.

  1. Return to the Files panel by clicking its tab.
  2. In the Files panel, locate the text.txt file (in the check_cs5 root folder) and double-click the file’s icon to open it in Dreamweaver.You’ll notice that this window is in Code view (see Figure 9) and cannot be switched to Design view because it’s not an HTML file.

The text file opens in Code view only.

Figure 9. The text file opens in Code view only.

  1. In the text.txt Document window, select the first block of text (beginning with “Inside Tesla Motors®” up to and including “read more…”).
  2. Copy the text by pressing Ctrl+C/Cmd+C, or by selecting Edit > Copy. Alternatively, you can right-click and select Copy from the context menu that appears.
  3. Leaving the text.txt file open, click the tab of the index.html document.
  4. Click inside the left_column div below the car image, placing the Insertion point in the same place where you created space earlier (see Figure 10).

The Insertion point placed below the car image in the left_column div.

Figure 10. The Insertion point placed below the car image in the left_column div.

  1. Paste the text by pressing Ctrl+V/Cmd+V, or by selecting Edit > Paste. Alternatively, right-click and choose Paste from the context menu that appears.

The text is displayed in the div (see Figure 11).

The Inside Tesla Motors® text pasted in the div.

Figure 11. The Inside Tesla Motors® text pasted in the div.

Don’t worry about the look of the text. You’ll format it with CSS so that it looks more like the text in our design comp.

  1. Return to the text.txt file by clicking its tab.
  2. In the text.txt Document window, select the second block of text (beginning with “Facts and Figures” up to and including “read more…”).
  3. Copy the text.
  4. Leaving the text.txt file open, click the tab of index.html.
  5. Click inside the center_column div below the data image, placing the Insertion point in the same place where you created space earlier.
  6. Paste the text.
  7. And one last time, return to the text.txt file by clicking its tab.
  8. In the text.txt Document window, select the third block of text (beginning with “Today’s Self Improvement” up to and including “read more…”).
  9. Copy the text.
  10. Close the text.txt file by clicking the X in the upper-right corner of its tab. (You won’t need the remaining text until later.)
  11. On the index.html page, click inside the right_column div below the helmet image, placing the Insertion point in the same place where you created space earlier.
  12. Paste the text.Your three columns are now filled with text (see Figure 12).

The text in all three columns.

Figure 12. The text in all three columns.

  1. Save the index.html page.

Now all you need to do is format the text so that it looks more like what the designer intended.

Format text with CSS

In Part 2, Creating the page layout, you learned how to insert div tags and then position those tags on the page to create the layout. You separated content (the HTML div tags) from presentation (the CSS that controls the layout) by creating new CSS rules, placing them in an external style sheet, and then applying them to the div tags on your page. In a nutshell, you learned that you can insert elements on a page and create styling rules in a linked CSS page, and that when you apply those styling rules to particular elements on a page, those elements are directly affected by the rules.

Well, the same holds for text on a page. CSS is used to format text as much as it is to position div tags. You type or paste your text on the page, create a CSS rule, and then apply the rule to the text, just as you would apply it to a div. In fact, all text is contained within some sort of tag—it might be a div, but it could also be a paragraph tag ( <p> ), a heading tag ( <h1> , <h2> , etc) or any other kind of tag. Normally what you do when you format text with CSS is apply the CSS rule to the particular tag that you want to format.

Before going on, I recommend that you read Understanding Cascading Style Sheets, a basic overview of how CSS works to format text. Having a little background information about the ins and outs of CSS will make the rest of this tutorial a lot easier to comprehend.

Now let’s format some text.

  1. Open the CSS Styles panel (Window > CSS) by clicking its tab.
  2. (Optional) If it’s not already closed, double-click the Insert panel to close it and create more room.
  3. In the CSS Styles panel, click the All button to make sure you are viewing All mode.Earlier, when you first used the CSS Styles panel to create a new rule, the panel displayed no rules because you hadn’t created any yet. Now that you have a bunch of rules applied to elements on the page, the CSS panel is displaying all of the pertinent rules (see Figure 13).

Layout rules in the CSS panel.

Figure 13. Layout rules in the CSS panel.

In addition to creating and attaching new rules, the CSS Styles panel lets you track the CSS rules and properties that affect the elements on the page. All mode lets you see all of the page’s rules at once, while Current mode lets you see the rules that apply to the current selection on the page. The CSS Styles panel also lets you modify CSS properties without opening an external style sheet.

There are a number of ways we could go about formatting your text. Beginners often create class rules and apply them to each paragraph, but that’s a very inefficient approach. It’s better to use CSS to apply an overall style first, and use classes and other CSS selectors only for those elements that you want to style differently.

For now, all you need is a nice font format and size, and since you want your format to be uniform across all three columns, you can simply define the font format in a rule for the body tag ( <body> ). The body tag is the topmost tag of the HTML page, which means that all other tags on the page (including all of our div tags) inherit the properties defined for the body tag. By defining your text properties in the body tag, you will effectively be defining text properties for all text that appears on the page.

  1. In the lower right-hand corner of the CSS Styles panel, click the New CSS Rule button.
  2. In the New CSS Rule dialog box, do the following:
    • Select Tag from the Selector Type pop-up menu.
    • Type or select body in the Selector Name text box.

    Note the description in the text box below the selector name. Dreamweaver is telling you that the rule you’re creating will apply to all <body> elements. That’s exactly what you want.

  3. Make sure check_cs5.css is selected from the Rule Definition pop-up menu.
  4. Click OK.The CSS rule definition dialog box appears, indicating that you are defining properties for the new body tag rule.
  5. Select the Type category in the Category column. (It should be selected by default.)
  6. In the Type category, do the following:
    • From the Font-family pop-up menu, select Trebuchet MS, Arial, Helvetica, sans-serif
    • Click the Color box and use the eyedropper tool to select black (#000).
    • Click Apply.

    As soon as you click Apply, all the text in Design view should be formatted with the new style (see Figure 14).

You can check the effect of your styles by clicking the Apply button.

Figure 14. You can check the effect of your styles by clicking the Apply button.

Tip: If you want to experiment with different styles, you can change the values in the CSS Rule Definition dialog box, and click Apply to see the effect immediately reflected in Design view.

  1. While you’ve got the CSS Rule Definition dialog open, you should set a background color for the <body> tag. Although current browsers set the background color to white, it’s generally recommended to set the color explicitly in your own style rules—and, of course, you can choose any color you like.Select Background from the Category list on the left.
  2. Click the Background-color color box, and select white (#FFF).
  3. Click OK to close the CSS Rule Definition dialog box.You’ll notice two things. One is that Dreamweaver has added the new body tag rule to the CSS Styles panel (see Figure 15).

The new body rule in the CSS Styles panel.

Figure 15. The new body rule in the CSS Styles panel.

The other thing you might notice is the asterisk (*) that appeared next to the check_cs5.css file name in the upper left-hand corner of your document (see Figure 16).

The asterisk in the Related Files toolbar reminds you to save the changes to the style sheet.

Figure 16. The asterisk in the Related Files toolbar reminds you to save the changes to the style sheet.

What Dreamweaver is showing you here is that you have an unsaved related file.

  1. Select File > Save All Related Files to save the changes you made to the style sheet.

Format headings and create links

Now you just need to do a couple more things to finish formatting the text in your columns.

Format headings

To format headings:

  1. In the left_column div, place the Insertion point after the ® symbol at the end of the first line, and press Enter (Windows) or Return (Mac OS X).Note that the Insertion point is now on a line above the following text. Open Split view to understand what has happened. There’s a line break ( <br /> ) tag immediately after the opening <p> tag (see Figure 17).

The text you pasted into the columns contains &lt;br /&gt; tags.

Figure 17. The text you pasted into the columns contains <br /> tags.

When you pasted the text from text.txt, the newline characters were converted to <br /> tags. This gives the impression of paragraphs, but causes problems for formatting the text correctly. Pressing Enter/Return created a closing </p> tag at the end of the first line, and an opening <p> tag at the beginning of the next line, but the <br />tag wasn’t removed, leaving too big a space between the paragraphs.

  1. Make sure the Insertion point is still in the same place, and press your down arrow once to move the Insertion point before the word The.
  2. Press Backspace to delete the unnecessary line break (see Figure 18).

The line break has gone, leaving two paragraphs.

Figure 18. The line break has gone, leaving two paragraphs.

This is a very important step. The main paragraph text must be completely separated from the heading before we apply a format to the heading.

  1. Click anywhere in the heading text. For example, click in the word Tesla. You do not need to select any text—you only need to make sure that the Insertion point is somewhere in the heading text.
  2. In the Property inspector (Window > Properties), make sure the HTML button on the left is selected.
  3. Select Heading 2 from the Format pop-up menu (see Figure 19).

Select Heading 2 from the Format pop-up menu in the HTML Property inspector.

Figure 19. Select Heading 2 from the Format pop-up menu in the HTML Property inspector.

The Inside Tesla Motors® heading changes to a Heading 2. The size and weight of the text you see here is the default size and weight for a Heading 2. In other words, you did not really need to apply any CSS to achieve this effect (though you could have!)

Now you’ll do the same thing with the remaining headings.

  1. In the center_column div, place the Insertion point after the word Figures at the end of the first line of text and press Enter (Windows) or Return (Mac).
  2. Press the down arrow once, to move the Insertion point before the word How at the beginning of the next line, and press Backspace to remove the line break.
  3. Click anywhere in the heading text. For example, click in the word Figures.
  4. In the Property inspector, select Heading 2 from the Format pop-up menu.The Facts and Figures heading changes to a Heading 2.
  5. Lastly, in the right_column div, place the Insertion point after the word Improvement at the end of the first line of text and press Enter (Windows) or Return (Mac OS X).
  6. Press the down arrow once to move the Insertion before the word Whether at the beginning of the next line, and press Backspace to remove the line break.
  7. Click anywhere in the heading text. For example, click in the word Improvement.
  8. In the Property inspector, select Heading 2 from the Format pop-up menu.The Today’s Self Improvement heading changes to a Heading 2.
  9. Save the page.

Create links

A link is a reference, inserted in a web page, that points to another document. You can turn almost any kind of asset into a link, but the most common kind of link is a text link. In this section, you’ll turn the “read more…” text in each of our three columns into links.

The check_cs5 site root folder contains a finished HTML page that you can link to (a news page for the magazine). You’ll use this page for all of the links in the columns, even though you would have distinct pages for each of these links if you were building a real site.

Note: The news.html page is a dummy page made up of images, and is not intended for practical use. A follow-up tutorial will later show you how to create a functioning version of the page using a database and PHP server-side technology.

  1. In the left_column div, select the “read more…” text at the end of the paragraph, including the periods (see Figure 20).Tip: Because there’s no gap between the text and the left side of the div, you might find it difficult to select the text from left to right. Click and drag from the right—it’s much easier.

Selecting text in the left_column div.

Figure 20. Selecting text in the left_column div.

  1. In the HTML Property inspector, click the folder icon next to the Link text box (see Figure 21).

Clicking the Folder icon in the Property inspector.

Figure 21. Clicking the Folder icon in the Property inspector.

  1. In the Select File dialog box, select the news.html file (which is in the same folder as index.html) and click OK (Windows) or Choose (Mac OS X).
  2. Click next to the “read more…” text to deselect the link. You’ll see that the text has transformed into a link, underlined and blue.
  3. Repeat the previous steps and link the “read more…” text in the remaining two columns to the news.html page. When you’re finished, your page should look as shown in Figure 22.

The three columns with linked text.

Figure 22. The three columns with linked text.

  1. Save the page.

You just created three links to a page that’s internal to our site. But you can also use the Link text box in the Property inspector to create links to external websites. To do so, simply select the text or element you want to link, and then type the website’s full URL in the Link text box of the Property inspector. For example, if you wanted to link the third “read more…” text in our example to, you would select the text, type in the Link text box, and press Enter/Return.

Note: When linking to an external site, you must include the http:// at the beginning of the URL. If you omit it, the browser treats it as an internal link.

Preview the page

Design view gives you a reasonably good idea of what your page will look like on the web, but you must preview the page in Dreamweaver or in a browser to see the definitive end result. With Dreamweaver CS5, you can preview your page directly in the Document window using Live View. You can also compare how your site looks in leading browsers by launching BrowserLab.

Preview your page in Live View

To preview the page, ensure that the index.html page is open in the Document window, and click the Live View button (see Figure 23).

Click Live View to preview the page inside Dreamweaver.

Figure 23. Click Live View to preview the page inside Dreamweaver.

Dreamweaver displays a preview of your page, just as it would appear in a browser. The page does not look all that different, as Dreamweaver does a pretty good job of displaying pages in Design view as they would look in a browser; but you’ll notice that small changes occur when you enter Live view—the outlines for all of the div tags disappear, for example.

Dreamweaver Live View uses WebKit as its rendering engine—the same engine that powers the Apple Safari browser, and a host of other applications such as Google Chrome and Adobe AIR.

Check links in Live View

In Dreamweaver CS5, Live View works just like a real browser, allowing you to follow links. Hold down the Ctrl key (Windows) or Cmd key (Mac OS X) when you click a link, and Dreamweaver takes you to the target page within the Document window—even if the link points to an external page on a different site (assuming you’re connected to the internet at the time).

  1. Click the Live View button to view index.html as it looks in a standards-compliant browser.
  2. Hold down Ctrl/Cmd and click one of the “read more” links.The news.html page appears in the Document window (see Figure 24).

You can follow links to other pages in Live View in Dreamweaver CS5.

Figure 24. You can follow links to other pages in Live View in Dreamweaver CS5.

Notice that there’s a Browser Navigation bar at the top of the Document window. It works in the same way as you would expect in a browser with Backward and Forward buttons. The Home button takes you back to the page you started from. You can even type a completely different URL in the Address text box, and Dreamweaver loads it into Live View (as long as the site is accessible).

If you don’t want to hold down Ctrl/Cmd each time you click a link, select Follow Links Continuously from the Live View Options menu (see Figure 25).

Select the option to follow links continuously.

Figure 25. Select the option to follow links continuously.

However, this works only during the current Live View session. If you turn off Live View, you need to select this option again the next time you launch Live View.

  1. Click the Home icon in the Browser Navigation bar to return to index.html, and click Live View to turn it off.

Preview your page in BrowserLab

BrowserLab is an online Adobe service integrated directly into Dreamweaver CS5 that lets you see what your pages look like in a wide range of popular browsers on both Windows and Mac OS X, saving you the need to install multiple browsers and operating systems locally.

To use BrowserLab, you need an Adobe ID. If you registered your Adobe ID during the installation of Dreamweaver CS5 (or Creative Suite CS5), you’re ready to go. Otherwise, select Help > Register, and follow the instructions onscreen to register for CS Live Services.

  1. With index.html open in the Document window, open the BrowserLab panel by clicking its tab, or by selecting Window > BrowserLab. Make sure you’re connected to the internet, and that the menu option alongside the Preview button in the BrowserLab panel is set to Local, and click Preview.Alternatively, press Ctrl+Shift+F12 (Windows) or Shift+Cmd+F12 (Mac OS X).
  2. Dreamweaver opens BrowserLab in your default browser, and prompts you to sign in with your Adobe ID. It then uploads your page and all related files and assets to the BrowserLab server.After a short while (the time depends on the speed of your Internet connection), BrowserLab displays your page as it looks in a range of different browsers and operating systems. You can create your own subsets of browsers and operating systems to test in, view different ones side by side, or superimpose them in “onion skin” mode.Figure 26 shows index.html as it currently looks in Safari 4.0 on Mac OS X and Internet Explorer 6 on Windows XP.

Comparing the Check Magazine page in different browsers in BrowserLab.

Figure 26. Comparing the Check Magazine page in different browsers in BrowserLab.

If you look closely at the image on the right of Figure 26, you can see that Internet Explorer 6 leaves no gap between the main image and the image in the columns (Internet Explorer 7 does the same).

Note: When checking the page in BrowserLab, you’ll notice that the main image is not rendered in Firefox 2.0 on either Windows or Mac, because it’s a background image. The market share of Firefox 2.0 is estimated at about 0.6 percent and falling, so it can be ignored, particularly since the image is purely decorative.

  1. Switch back to Dreamweaver, and add the following style rule at the bottom of the check_cs5.css style sheet:

p { margin-top: 1em; }

This adds a margin of one em to the top of each paragraph. An em is a measurement borrowed from typography. In CSS, one em is equivalent to the height of the current font. When typing the rule, make sure there is no gap between the number and the unit. Type 1em, not 1 em.

  1. Save check_cs5.css, and click the Preview button in the BrowserLab panel to refresh the version on BrowserLab.
  2. Select Internet Explorer 6 in BrowserLab. The images at the top of the columns are now correctly positioned (see Figure 27).

BrowserLab confirms that the paragraph style has fixed the problem.

Figure 27. BrowserLab confirms that the paragraph style has fixed the problem.

  1. Select Internet Explorer 7. The images are correctly positioned.
  2. Check the other browsers. The images are now in the same position in all of them. By default, most browsers add a top margin equal to the height of one line at the top of every paragraph. It’s just Internet Explorer 6 and 7 that weren’t playing ball. The style rule brought them back into line without affecting the look in other, more standards-compliant browsers.
  3. Close your browser window or tab to exit BrowserLab.

Preview your page in a browser

Using BrowserLab to compare how your pages look in different browsers on different operating systems is important before you publish them on the Internet. But sometimes, you just want to take a quick look in a browser or two on your local computer. That’s where Preview in Browser comes in useful.

To preview the current page in your default browser, just press the F12 key (Windows) or Option+F12 (Mac OS X). You can also edit Dreamweaver Preferences to register other browsers.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS X) to open the Preferences panel.
  2. Select Preview in Browser from the Category list on the left.
  3. Dreamweaver might already have detected other browsers on your computer. To add other browsers, click the plus button alongside Browsers to open the Add Browser dialog box.
  4. Type the name of the browser in the Name text box, and click the Browse button to navigate to the browser’s application file.
    • On Windows, this is normally the .exe file in the browser’s subfolder of C:\Program Files or C:\Program Files(x86).
    • On Mac OS X, select the browser’s name in the Applications folder.

    Tip: On Windows, Google Chrome is installed in a folder associated with your user account. To locate it, you need to enable the display of hidden files and folders. Right-click the application name in the Windows Start menu and select Properties to find the exact location.

  5. Select one of the browsers listed in the Browsers text area, and select the Secondary browser check box. To launch the current page in the Document window in your secondary browser, press Ctrl+F12 (Windows) or Shift+Opt+F12 (Mac OS X).
  6. To launch your page in a particular browser, select File > Preview in Browser, and choose the browser from the list. Alternatively, click the Preview/Debug in Browser button on the Document toolbar, and select a browser from the list (see Figure 28).

Select a browser from the list to preview your page locally.

Figure 28. Select a browser from the list to preview your page locally.

Note: For more information about working with Live View, see Previewing pages in Dreamweaver in Dreamweaver Help. For more information about previewing in browsers, see Previewing pages in browsers in Dreamweaver Help.

Your page is almost finished and ready for publication. In Part 4: Adding the main image text, you’ll add another div to the main image area and position it using CSS.

Web Design And Site Analytics


Web design and SEO share a very good affiliation. It’s SEO which effectively brings the web site into the 1st webpage of Google, and it is good quality design, and content that makes the site visitors keep on coming back to your web site.

In actual fact, your website analytics can advise you if the web design is welcoming. Take into account bounce rates. Google defines bounce rate as “the percentage of single-page visits or visits in which the person left your site from the entrance (landing) page. Use this metric to measure visit quality – a high bounce rate generally indicates that site entrance pages aren’t relevant to your visitors.

The more compelling, and relevant to the search term your landing pages are, the more visitors will stay on your site and convert to regular readers. You can minimize bounce rates by tailoring landing pages to each keyword and ad that you run. Landing pages should provide the information and services that were promised in the ad copy.”

Web design will only take you so far

This tells you that with regards to web design, your website’s homepage needs to be appropriate and attractive and may definitely communicate to the site visitors what topic your site is relating to. Home web page can be worthy for SEO. Search engine spiders provide the heaviest importance relating to the content of the home page. So this is certainly where your most important key words needs to be found. Links to supplementary web pages onsite must also be present in the home webpage leading to related webpages.

Optimise each individual page / post / article to a specific “keyword”, each of which should be related to the main niche that your site is aimed at. For example, a site dealing with dog training may have articles about dog food, dog care, dog grooming, even articles about puppies, since they are young dogs. What you would not expect to find is articles about cats, or parrots, or fish keeping. Each individual article on the appropriate topic will add to your site’s “authority status” within the niche, as they are all directly related to the main site topic.

It’s not simply enough to have a “pretty looking” site, you need relevant content to keep your visitors coming back for more.

Nonetheless, single page visits don’t also necessarily suggest a bad thing for the internet site. Quite the opposite, it can signify your website is simply too good that site visitors get what they are trying to find in so short a time and exactly on the webpage where they landed once they entered a particular key word. To know whether or not your web design along with SEO is working or not, simply inspect your conversion rates.

A quality web design can make individuals love the site plus your products and services a lot to stay on your site for a longer period, and also to eventually discover the information that they are looking for, or to include the product to their shopping cart the moment they spot it.

Web design and SEO work hand in hand in getting you return for your internet marketing investment.