Which tablet should I buy?

 

Since CES 2011, there are officially a lot of tablets out there and now that the Apple iPad 2 has hit as well, anyone asking themselves “which tablet should I buy?” has plenty of thinking to do. Thankfully, here at RAM we have lined all the major players up back to back to see how they compare. So, while it’s a bit of a mouthful, this effectively is the Apple iPad 2 vs Motorola Xoom vs HTC Flyer vs Samsung Galaxy Tab 10.1V vsBlackBerry PlayBook vs HP TouchPad vs LG Optimus Pad. If you don’t fancy one of these, then you’re probably not after a tablet at all.

Form Factor

1ST: PLAYBOOK

193 x 130 x 10mm, 400g

2ND: IPAD 2

241.2 x 185.7 x 8.8mm, 601g

3RD= HTC FLYER

195.4 x 122 x 13.2mm, 415g

3RD= SAMTAB 10.1V

246.2 x 170.4 x 10.9mm, 599g

5TH: OPTIMUS PAD

243 x 149 x 12.5mm, 654g

6TH: XOOM

249.1 x 167.8 x 12.9mm, 730g

7TH: HP TOUCHPAD

240 x 190 x 13.7mm, 740g

Size is a very important consideration for any mobile device, and dimensions that offer portability are a must for a tablet. Apple’s iPad was previously one of the largest tablets around, but thanks to a few nips and tucks on the second-generation model, it’s not the most unwieldy device around anymore. That title goes to HP’s TouchPad which sports the same slightly square shape as the iPad along with the thickest profile and the largest mass.

Not much better off is the Motorola Xoom that’s got a serious bloat of its own but, fortunately, it all begins to slim down once we get to the LG Optimus Pad – shedding the best part of 100g on its nearest rival.

Unsurprisingly, it’s the BlackBerry PlayBook that comes out top. As one of the two 7-inch tablets, it was always going to be light but it also happens to be the second thinnest of the bunch as well. The real shocker is that its fellow diminutive device, the HTC Flyer, has been bumped down into third by the heavier iPad 2. The reason is all about the profile. At less than the thickness of the iPhone 4, the Apple tablet is seriously impressive at just 8.8mm and, when you compare that to an unnecessarily chunky offering from HTC, it makes more of a difference than that 186g extra in mass.

While the Samsung Galaxy Tab 10.1V is also thinner than the Flyer, it’s less pronounced. So, this time, the difference puts it more on a par. From the Optimus Pad upwards, you’re probably doing okay on form factor. It’s only the TouchPad and the Xoom that might extract the odd giggle from friends who own one of the others.

Display

1ST= XOOM

10.1-inch, 1280 x 800px, LCD

1ST= SAMTAB 10.1V

10.1-inch, 1280 x 800px, LCD

3RD= IPAD 2

9.7-inch, 1024 x 768px, LCD

3RD= TOUCHPAD

9.7-inch, 1024 x 768px, LCD

3RD= OPTIMUS PAD

8.9-inch, 1280 x 768px, LCD

6TH= PLAYBOOK

7-inch, 1024 x 600px, LCD

6TH= FLYER

7-inch, 1024 x 600px, LCD

The display is one of the key considerations when shopping for a tablet – a smaller screen certainly allows for a more portable device, but if it’s not that much bigger than a smartphone, then is it really worth it? By their very nature, the prime purpose of a tablet is to consumer content, so this is really one of the more important categories out there.

The HTC Flyer and BlackBerry’s PlayBook come in last in this round thanks to their relatively small 7-inch screens, which do tend to make them look a little like comically large mobile phones. LG’s Optimus Pad is next up the list with its 8.9-inch screen, but it manages to shift itself up into joint third place with the iPad 2 and HP TouchPad thanks to not only a better aspect ratio for watching movies but also a higher pixel density at 168ppi, compared to the 132ppi of the others, which makes up for the small loss in actual screen real estate.

Sharing the crown in this round, though, are the Motorola Xoom and Samsung Galaxy Tab 10.1V, which both sport a 10.1-inch display with the same 1280×800-pixel resolution. Although there are clear winners and losers here, what the tablet market is really crying out for is someone to come up with a super hi-res panel or even OLED technology but, presumably, there’s the serious issue of pricing to consider.

Engine Room

1ST= IPAD 2

A5 dual-core 1GHz CPU, 512MB

1ST= TOUCHPAD 

Dual-core Snapdragon APQ8660, 512MB

1ST= OPTIMUS PAD

Nvidia Tegra 2, 1GHz dual-core CPU, 1GB

1ST= XOOM

Nvidia Tegra 2, 1GHz dual-core CPU, 1GB

1ST= SAMTAB 10.1V

Nvidia Tegra 2, 1GHz dual-core CPU 1GB

6TH= PLAYBOOK

1GHz dual-core CPU, 1GB

7TH: FLYER

Single-core Qualcomm 1.5GHz CPU, 1GB

In terms of processors, tablet manufacturers have seriously upped the ante in 2011. Most new tablets, and even a few mobile phones now, boast dual-core processors for speeding up operation and bundled in GPUs capable of plenty of gaming and the like.

One of the few companies that hasn’t jumped on the dual-core bandwagon for its new tablet is HTC, with its Flyer sporting a single-core CPU, albeit a one with an impressive 1.5GHz of processing power and a decent wedge of memory to back it up. All the same, that puts it bottom of our league table for this category.

From here on in, it starts to get a bit tricky. CPU-wise, they’re all much of a muchness beyond this point. While, then, one might be tempted to compare them on the basis of RAM, the problem lies in the silent statistic which is the graphics processors. The Tegra 2 set up uses an Nvidia GeForce GPU, the iPad has a PowerVR SGX 543 and HP TouchPad an Adreno 220. RIM has given nothing away about what’s inside the PlayBook.

Technically speaking, the GeForce GPU appears to be the least powerful of the lot with the one inside the Apple A5 chip supposedly edging it over the Adreno. Practically speaking, however, the argument runs that Nvidia has optimised the graphics unit in the Tegra 2 system to work just as well for games as both the Adreno and the PowerVR do. For other jobs such as media playback, though, the Tegra 2 could be around twice as slow.

Quite how all this ties in with the two most powerful engine’s graphically also having half the memory is another thing altogether. Ultimately, though, the take-home message is that HTC Flyer is the least impressive of them all. The others should all be fine for gaming but one might expect the iPad 2 to have the edge when it comes to video editing – perhaps why iMovie has been included for it and not the original iPad as well.

Storage

1ST= FLYER

32GB + SD

1ST= XOOM

32GB + SD

3RD= IPAD 2

16/32/64GB

3RD= TOUCHPAD

32/64GB

3RD= SAMTAB 10.1V

32/64GB

6TH= PLAYBOOK

16/32GB

6TH= OPTIMUS PAD

32GB

The biggest difference between tablets, in storage terms, is whether they have expandable memory or not. You could argue that if a device has 64GB of built-in memory then surely that’s enough for most people, and indeed, for most people it probably is. However, there are always going to be plenty of gadget lovers for whom the lack of an add-on storage option simply won’t cut the mustard.

Trailing back in joint 6th place in the storage round are the LG Optimus Pad and BlackBerry PlayBook which offer a maximum of only half as much storage as all of the others and no way of making it any bigger.

Joint third place goes to the Samsung Galaxy Tab 10.1V, HP TouchPad and Apple iPad 2, each of which takes the user up to a possible 64GB of fixed space. But, it’s the HTC Flyer and Motorola Xoom that mean the most flexibility with a current top level of the same 64GB plus as many spare SD cards as you care to carry around.

Connectivity

1ST= OPTIMUS PAD

3/4G, BT, Wi-Fi, USB, HDMI-out

1ST= XOOM

3/4G, BT, Wi-Fi, USB, HDMI-out

3RD= IPAD 2

3G, BT, Wi-Fi, HDMI support

3RD= FLYER

3G, BT, Wi-Fi, some DLNA, USB

5TH: SAMTAB 10.1V

3G, Wi-Fi, BT, USB

6TH= TOUCHPAD

(3G), BT, Wi-Fi, USB, NFC

6TH= PLAYBOOK

Wi-Fi, BT, DLNA, HDMI

Without any 3G support for the time being, the BlackBerry PlayBook and HP TouchPad sit at the foot of things for connectivity. Both have promised updated models at a later date but seeing as they’re still struggling to get out the Wi-Fi only versions, that could be some time away. And that’s quite a shame given that the PlayBook comes with DLNA and HDMI support and the TouchPad with some interesting wireless connection action if you happen to have a Palm smartphone.

One could argue that the PlayBook gets around its connectivity issue with its smartphone tethering ability, but that’s going to chew through both your phone’s battery and its data in double quick time.

Next up the list at 5th is Samsung’s tablet, which offers surprisingly little – just 3G, Wi-Fi, Bluetooth and a USB. Standing on pretty much even ground in joint 3rd are the iPad 2 and HTC Flyer. Both have the regulation 3G and Wi-Fi along with Bluetooth, while the Flyer also offers a USB and a degree of DLNA support. Apple’s tablet balances this out with the provision of HDMI support for hooking up to an HD TV, albeit through an accessory, as well as some good wireless action if you happen to own an Apple TV set up.

Fighting it out at the top, though, are the Motorola Xoom and the LG Optimus Pad, both of which have all the usual suspects along with USB and HDMI. They also have 4G support – no use at the moment in the UK, but this could be a key feature a year or so down the line. You’ll have to rely on your Android apps for any wireless streaming.

Software

1ST= PLAYBOOK

QNX BlackBerry Tablet OS

1ST= TOUCHPAD

webOS 3.0

1ST= OPTIMUS TAB

Android 3.0 Honeycomb

1ST=: XOOM

Android 3.0 Honeycomb

1ST= SAMTAB 10.1V

Android 3.0 Honeycomb

6TH: IPAD 2

iOS 4.3

7TH: FLYER

Android 2.3 Gingerbread

The software round is a very tricky one to call, largely because much of it comes down to personal opinion, however, there are a couple of major flaws in one or two of the systems worth being aware of. Last place is easy enough to work out because the HTC Flyer is the only one of the bunch using an operating system that isn’t optimised and dedicated to running a tablet at its core, although HTC has optimised its Sense UI to fit in with the new screen size and form factor. Gingerbread is a mobile phone OS.

In 6th place is the iPad 2 which suffers from the now famous trio of weak spots – no Flash browsing, no personalisation options, and notification issues that will drive you around the bend. Otherwise, of course, it’s a cracking bit of software.

That leaves the five other tablets to occupy top spot. Although no one has really had a good play with the likes of the QNX OS and webOS 3.0 in anything other than demos, there’s plenty to get excited about. The Synergy system of integrating your internet accounts and the cloud syncing on webOS are well documented, and the multi-core, multi-threading capabilities on the PlayBook should mean it can run anything you can throw at it.

At the same time, there’s nothing in those others to necessarily put them above the made-for-tablet Android Honeycomb 3.0, which brings you all the flexibility and support you could need.

Imaging

1ST: OPTIMUS PAD

5MP rear, 2MP front, 1080p video, 3D

2ND: SAMTAB 10.1V

8MP rear, 2MP front, 1080p video

3RD: PLAYBOOK

5MP rear, 3MP front, 1080p video

4TH: XOOM

5MP rear, 2MP front, 720p video

5TH= HTC FLYER

5MP rear, 1.3MP webcam, 720p video

5TH= IPAD 2

Rear cam, front cam, 720p video

7TH: TOUCHPAD

1.3MP front-facing webcam

This is one area that has a fair bit of variation, and things have changed a lot since the original iPad hit the shops in 2010.

Even the last on the list, the HP TouchPad, manages to come up with a 1.3MP front-facing cam for video calling, although sadly that’s where its imaging credentials stop. Sharing the number five spot are the iPad 2 and the HTC Flyer, with the latter offering a relatively basic 5MP rear camera, 1.3MP front-facing cam and 720p video capture. Apple hasn’t released specific details on the iPad 2’s cameras (one rear, one front), but we’d be very surprised if they were any lower-specced than those offered by HTC. The iPad 2 also enables you to take high-def videos at 720p. Motorola’s Xoom does a little better, with all the same attributes, but with a 2MP front-facing camera.

BlackBerry’s tablet ups the ante even further, boosting the front-facing cam’s megapixel count to three and throwing full HD 1080p recording into the mix. Samsung’s device also offers 1080p capture, along with an 8MP rear cam but taking the top spot has to be the LG Optimus Pad. Not only does it have a rear 5MP cam, 2MP front cam and 1080p video capability but it can also capture 3D video, setting it apart from all other tablets currently on the market. Just a shame you can’t actually watch it back in stereoscopic format on the tablet afterwards.

Battery

1ST=: IPAD 2

10 hours

1ST=: SAMTAB 10.1V

10 hours (probably)

1ST=: XOOM

10 hours

4TH: OPTIMUS PAD

9 hours

5TH: TOUCHPAD

8 hours

6TH: HTC FLYER

4 hours

DISQ: PLAYBOOK

Unknown

Battery life is fairly high up the list of priorities when it comes to tablet shopping. Carrying a fancy mobile device around is all well and good, but if the battery is likely to conk out halfway through the day, then it might not seem so cool.

We’ve left the PlayBook out of this one, as BlackBerry hasn’t been forthcoming with the battery details. HTC sits in 6th place, with its quoted 4 hours of video playback, which is a fair way behind most of its rivals. The HP TouchPad takes the next spot with 8 hours, while the Optimus creeps ahead with 9. Bedded in at the top spot are the iPad 2, Samsung and Motorola, although with roughly 10 hours of video playback (or at least those are the numbers currently quoted or estimated). We’ll know more about how the tablets stack up against each other in this category once we can get them in for a full review.

Apps (updated)

1ST: IPAD 2

Lots and lots

2ND=: HTC FLYER

Quite a few

2ND=: OPTIMUS PAD

Quite a few

2ND=: SAMTAB 10.1V

Quite a few

2ND=: XOOM

Quite a few

6TH=: PLAYBOOK

Not that many (but maybe quite a few)

6TH=: TOUCHPAD

Not that many modern ones

You might have the fanciest piece of tablet hardware around but these devices are nothing without apps. It’s been well documented how Apple has led the way with the iTunes app store and the massive amount of apps on offer (over 65,000 for the iPad alone, at the last count). Android is making steady progress in playing catch-up, but it hasn’t quite got there yet, either with the amount of apps on offer or with the usability of its Android Market. That’s why the HTC Flyer, LG Optimus Pad, Samsung Galaxy Tab 10.1V and the Motorola Xoom – all Android-powered devices – sit in joint second position.

The BlackBerry PlayBook offers a relatively small selection of BlackBerry apps, although it has now been confirmed that the tablet will support Android apps, via a special app player that will be available from the BlackBerry App World store. Although this is certainly good news, don’t get too excited, as the PlayBook will only be able to run apps made for the mobile versions of Android, rather than the tablet-angled Honeycomb. That means that some apps will probably have to be stretched to fit the screen.

HP has struggled somewhat when it comes to gathering the support of third-party developers which is why it sits at the bottom of our table. Naturally, webOS 3.0 will have the benefit of lots and lots of more old school apps from the Palm homebrew set up .

Price (updated)

1ST: HTC FLYER

£420 (Wi-Fi) £560 (3G)

2ND: XOOM

£499 (Wi-Fi only) £599 (3G)

3RD: IPAD 2

£399/£479/£599 (Wi-Fi) £499/£579/£659 (3G)

4TH= PLAYBOOK

$499/$599/$699

4TH= TOUCHPAD

£699

4TH= OPTIMUS PAD

$529.99

4TH= SAMTAB 10.1V

£600-900

Pricing is a bit of a tricky one for the moment as the only two which are actually official on this front are the iPad 2 and the Motorola Xoom. However, there are some solid rumours on how much the HTC Flyer is set to cost which puts it at the top of the tree. (Remember that, at 32GB of storage, it needs to be compared to the equivalent size Apple model). Next down is the Xoom which is, once again, cheaper than the equivalent iPad by a matter of £11.

Beyond those are the odd and fairly spurious claims, which makes neither of the last four world beaters much different from the other. We’ve heard US prices for some of them, but it’s usually impossible to predict what the UK price will be from this. Either way, it’s something we’ll update as the announcements come. For now, though, we’ll have to leave the bottom of the table as a tie.

Conclusions

There’s a few different ways you can use all of this data to work out which is the best tablet, and, in the name of fairness, we’ll run through the lot. Pay close attention now:

Ranking

Calculated purely on total of the rank positions, the table looks like this:

1ST: XOOM

20 points

2ND: SAMTAB 10.1V

23 points

3RD= IPAD 2

28 points

3RD= OPTIMUS PAD

28 points

5TH: PLAYBOOK

40 points

6TH: HTC FLYER

41 points

7TH: TOUCHPAD

43 points

The problem with this method, though, is that it ignores the fact that some categories might be more important than others and, indeed, the fact that some of the losses or wins might have been narrower or larger than others. What is clear very quickly, however, is that there seems to be a large gap between the top four and the bottom three meaning that it was more than just a one off heavy loss in a single category for the Flyer, PlayBook and TouchPad to find themselves where they are. Something to bear in mind if you’re thinking of going for one of them.

Considered

Probably a more realistic way to look at the results is by considering which areas are more important than others. Naturally, this is going to vary from one person to the other depending upon your priorities. However, looking at it as objectively as possible, something like imaging is not very important at all for a tablet. So, as long as it has a front facing camera – which they all do – you’ve always got your phone on you to shoot video and stills for which a smaller device is far more convenient anyway.

The price is fairly irrelevant too. None of these things are cheap and, if you’ve got your heart set on one, you’ll find the money for it somewhere. So, taking those two out of the equation and the picture changes a little, but not a lot.

1ST: XOOM

14 points

2ND: SAMTAB 10.1V

17 points

3RD: IPAD 2

20 points

4TH: OPTIMUS PAD

23 points

5TH: TOUCHPAD

32 points

6TH: PLAYBOOK

33 points

7TH: HTC FLYER

35 points

The only real shift around has been in the bottom order but there’s still two distinct packs. So, is it still a fair idea of which you should be spending your cash on? Perhaps a more realistic way of looking at the data is the final one.

Realistic

The bottom line with all of this is that your tablet choice is most affected by which ecosystem you’ve already bought into. If you’re an iPhone user, then the answer is to buy an iPad 2. It’s as simple as that.

Likewise, if you’re an Android user, it’s going to be an awful upheaval to switch your life to Apple. So, unless you really want to, the best option on paper looks to be the Motorola Xoom which only allows the Samsung Galaxy Tab 10.1V to be close on account of the former’s slightly more robust form factor. We’d like to say that the HTC Flyer is there for those looking for a smaller size device to carry around but, without a proper tablet OS to back it up, there’s some serious reservations.

BlackBerry users are in a slightly different position. While the PlayBook is the obvious choice, a 7-inch tablet might not be what you’re after. If that’s the case, then your best bet is either the Xoom or the iPad 2 depending upon which way you’d rather go. If you’re all about the sleek look and smooth operation, Apple might be the best solution, and chances are you’re already rocking an iPod touch in your household anyway – the iPad 2 and the original iPad for that matter really is just a bigger version of that. For a more open experience, and possibly one that will eventually lure you away from the phone OS as well, it’s Android all the way.

Dedicated Palm device users are probably only reading this out of some kind of self-torture. It’s pretty clear that the HP TouchPad is not the best tablet here based on specs, but it is the one with webOS and that’s what makes the difference.

If you have no affiliations to any of the systems above, then again it’s a choice between the iPad 2 and the Xoom. It’s a matter of taste as to which you’ll prefer but as the story of the spec sheets go, one would have to advise the Xoom as the correct choice.

Use the Homegroup Feature in Windows 7 to Share Printers and Files

 

The new HomeGroup feature makes sharing files and printers between Windows 7 machines very easy.  Today we will take a closer look at this new feature to show how easy the sharing process is.

Setting up your HomeGroup

There are several ways to access the HomeGroup feature, go to Control Panel and click on“Choose homegroup and sharing options” or just type “homegroup” without quotes into the start menu search bar.

Next click on the Create a homegroup button.

In the Create a HomeGroup screen select what you want to share with the other machines.

After the group is created you will get a password to access it from the other computers.

After you get the Password you’re brought back to the HomeGroup screen where you can make additional changes if you want.

Connecting to your HomeGroup

On the other Windows 7 computer(s) go into the HomeGroup feature and click to join the group you just created.

Enter in the password that was created for the HomeGroup.

When the password is accepted the connection will take place and you’re finished.

If you don’t want to use a password at all go into the Network and Sharing Center under advanced options and turn off password protected sharing.

Another thing you might want to do is create a shortcut to the HomeGroup.  I just go into Network and copy the icon to my desktop by Right-Clicking and dragging it.  A more direct approach is to create shortcuts directly to the shared public folders but of course it’s completely up to you.

To share a printer make sure to select Printers when creating the group and when you go into Devices and Printers on the Start menu you should see it and can set it as the default if you wish.

This should help get you started sharing files and printers between you’re Windows 7 machines on your home network.

Adobe Dreamweaver CS5 – Creating your first website – Part 1: Set up your site and project files

Image via Wikipedia

 Requirements

Prerequisite knowledge

This tutorial requires no previous knowledge of Dreamweaver. However, familiarity with web design concepts such as HTML and CSS will be helpful. The tutorials in this series are designed to be completed in order.

User level

Beginning

Required products

• Dreamweaver (Download trial)

Sample files

• first_website_pt1.zip

Note: This tutorial series was originally written for Dreamweaver CS4 by Jon Michael Varese. It has been updated for Dreamweaver CS5 by David Powers. The content is still valid for Dreamweaver CS5.5.

This tutorial introduces you to the concept of an Adobe Dreamweaver CS5 site and shows you how to set up the project files for the Check Magazine sample website. In Dreamweaver, a site generally consists of two parts: a collection of files on a local computer (the local site) and a location on a remote web server to which you upload files when you’re ready to make them publicly available (the remote site). You use the Dreamweaver Files panel to manage the files for your site.

The most common approach to creating a website with Dreamweaver is to create and edit pages on your local drive, and then upload copies of those pages to a remote web server for viewing on the web. In this tutorial, you’ll learn how to set up only the local site so you can begin building web pages right away. Later, after you’ve completed the website, you’ll learn how to create a remote site so that you can upload your files to a web server.

A follow-up tutorial series will show you how to adapt the website to use a server-side technology to create a simple content management system for a news page that draws its content dynamically from a database.

In this first part of the series, you will complete the following tasks:

• Learn about Dreamweaver sites
• Set up your project files
• Define a local folder

Learn about Dreamweaver sites

In Dreamweaver, a site organizes on your local computer all the documents associated with your website and lets you track and maintain links, manage files, share files, and transfer your site files to a web server. Think of your Dreamweaver site as the “bucket” that contains all of the files and assets for your website.

A typical Dreamweaver site has at least two parts:

• Local folder: This is your working directory. Dreamweaver refers to this folder as your local site. The local folder is usually a folder on your hard drive.
• Remote folder: This is where you store your files on the computer that’s running your web server. The computer running the web server is often but not always the computer that makes your site publicly available on the web.

In some circumstances, you might have more than one remote folder. For example, if you work in a team environment, all members of the team might upload their files to a common testing server before they are deployed on the live website. Also, it’s normal to set up a testing server when developing websites that use a server-side technology, such as Adobe ColdFusion or PHP. The site setup process in Dreamweaver CS5 has been changed to enable you to define multiple remote and testing servers.

Another reason for the changes is to simplify the process of defining a site in Dreamweaver CS5. All you need to do to start working is to give your site a name, and tell Dreamweaver where you want to store the files on your local computer. Dreamweaver CS5 automatically prompts you for further information about the site setup only when it’s needed.

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

Set up your project files

When you create a local site, you can place any existing assets images or other pieces of content in the local site’s root folder the main folder for the site . That way when you add content to your pages, the assets are there and ready for you to use.

The sample files included in the download ZIP file contain assets for the sample website you’ll build in this tutorial series. The first step is to copy the sample files to an appropriate folder on your hard drive:

1. Decide where you want to store your website files on your hard drive. The folder can be anywhere on your computer, but the less buried it is the easier it is to find later. For example:
   • Windows C:\Sites
   • Mac OS X Your home folder already includes a folder called Sites.
2. Download and unzip the first_website_pt1.zip sample files from the link at the top of this page if you haven’t done so already.
3. Copy the check_cs5 folder into the Sites folder.

The check_cs5 folder is the folder you will use as the root folder main folder for your Dreamweaver site.

Note: The local root folder of your Dreamweaver site is normally the main or top-level folder for your website. It usually corresponds to a folder called public_html, www, or wwwroot on your remote server. For example, if you have a website at http://www.example.com, and have a file called news.html in the root folder, its URL ishttp://www.example.com/news.html. The normal practice is to give your local root folder the same name as the website without the top-level domain such as .com or .org . For example, I store the files for my website athttp://foundationphp.com in a folder called foundationphp on my local hard drive.

Define a local site folder

You must define a Dreamweaver local site folder for each new website you create. Dreamweaver needs to know where your site files are to create all the internal links correctly, and to update them when you move files to a different location within your site.

Next, set up the site for this tutorial series and define as your local site folder the check_cs5 folder you copied into your Sites folder:

1. Start Dreamweaver and select Site > New Site. The Site Setup dialog box appears.
2. In the Site Name text box, enter Check Magazine as the name of the site. The name is used internally by Dreamweaver to identify the site. It doesn’t matter if it contains spaces.
3. Click the folder icon next to the Local Site Folder text box to browse to and select the check_cs5 folder.
   1. The Site Setup dialog box should now look like Figure 1.
   

   Figure 1. Defining the local site folder for the Check Magazine site.

   Note: The file paths might differ, depending on where you created the Sites folder on your hard drive.

   4. Click Save. That’s it!

   The Files panel in Dreamweaver now shows the new local root folder for your current site (see Figure 2). The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a desktop.

   

   Figure 2. List of files in the Files panel

   For more information about how the Files panel works, see Work with files in the Files panel in Dreamweaver Help.

   You’ve now defined a local site folder for the Check Magazine site. This is where you keep the working copies of web pages on your local computer. Later, if you want to publish your pages and make them publicly available, you’ll need to define a remote folder—a place on a remote computer, running a web server that will hold published copies of your local files. You’ll learn how to do that in part 6 of this tutorial series.

   Where to go from here

   Now that you have finished defining your site, you can begin building your web pages by following Part 2 in this series, creating the page layout

Adobe Dreamweaver CS5 – Part 2: Creating the page layout

Image via Wikipedia

Requirements

Prerequisite knowledge

Part 1: Setting up your site and project files

User level

Beginning

Required products

• Dreamweaver (Download trial)

Sample files

• first_website_pt2_completed.zip

Note: This tutorial series is intended for use with Dreamweaver CS5/CS5.5. If you are using an earlier version of Dreamweaver, some features might differ in the Document window and dialog boxes. The Spry Menu Bar used in Part 5 requires Dreamweaver CS3 or later.

Welcome to the second part of this tutorial series on creating your first website. This tutorial explains how to create a CSS-based page layout in Adobe Dreamweaver CS5. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and other kinds of content.

Laying out web pages with CSS (cascading style sheets) has become the standard for modern web design. CSS offers superior dreamweaveribility and control over your layout, allowing you to create elements on the page and fine-tune their positions with pixel precision. However, CSS layouts can be difficult to understand and create, and it helps to have some background knowledge before building your first layout with CSS. You can start by reading CSS page layout basics, which is an overview of how CSS layouts work. For a more in-depth look at CSS, take a look at theextracts from my book, Getting StartED with CSS. But this reading is not required. If you’re up for the challenge, you can just dive right into this tutorial to begin creating your first CSS-based layout.

Note: Dreamweaver CS5 comes with 16 wonderful pre-designed CSS layouts that you can use as the starting point for your web pages. But I didn’t want to start you off with any of these layouts because I think it’s important to experience what it’s like to build a page layout completely from scratch. For more information on these new layouts, refer toWhat’s new in the Dreamweaver CS5 CSS layouts by Stephanie (Sullivan) Rewis.

Evaluate the task ahead

Typically, you don’t begin building a website by opening Dreamweaver and laying out pages. The first steps to creating a website begin on a piece of paper or in a graphics-editing application such as Adobe Fireworks or Adobe Photoshop. Graphic designers usually sketch out a piece of comprehensive artwork (also known as a comp) for the website to show it to the client and make sure that the initial ideas for the site meet with their client’s approval.

Examine the comp

A comp consists of any number of page elements that the client has requested for a website. For example, the client might say, “I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips.” Based on that discussion, the designer begins planning the layout of the site and creates sketches of sample pages that fulfill the client’s requirements.

This tutorial provides you with the completed and approved comp for Check Magazine, a fictional publication that is in need of a website. As the web designer, your job is to transform the comp into a working web page (most likely with the help of other graphic designers). Figure 1 shows a comp of the Check Magazine home page layout.

Figure 1. A comp of the Check Magazine home page layout

You’ll notice that the graphic designer has provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. Note also that the text is lorem ipsum text (fake Latin placeholder text) and that the headings in the bottom columns are not final (two of them are identical). Even though the page content remains undecided, you can still use Dreamweaver to lay out this design.

You can also open the original comp file if you want to see it on the computer screen. You can find the comp, check_comp.gif, in the images folder of the check_cs5 folder that you copied to your hard drive in Part 1 of this tutorial series, Setting up your site and project files. You might even want to print the comp so that you can have it in front of you as you build your page.

What to do if things go wrong

When learning new techniques or working with unfamiliar software, it’s easy to make mistakes. The instructions throughout this tutorial series try to anticipate common errors, and each part contains a ZIP file showing how the code should look when you have finished. If your page doesn’t look the way you expect, use the Dreamweaver File Compare feature to compare your files with the download versions. To use File Compare, you need a third-party file comparison utility, such as WinMerge for Windows. On a Mac, you can use the file comparison tool in TextWrangler. Both are free.

The most common causes of mistakes are accidentally skipping a step in the instructions, or mistyping an ID or CSS property. Retrace your steps to see where you might have gone wrong. Sometimes, the best idea is to start again from scratch. It can be frustrating, but you can learn a lot from your mistakes.

Of course, if you do get stuck, call for help. The best place is in the Dreamweaver General Discussion Forum, where you’ll find experts and beginners alike helping each other.

Above all, enjoy yourself. Web design can sometimes be challenging, but it’s also a lot of fun.

Create and save a new page

After you have set up a site and examined your comps (if any), you are ready to begin building web pages. You’ll start by creating a new page, and saving it in the check_cs5 local root folder of your website. The page eventually becomes the home page for Check Magazine.

Note: If you haven’t created the check_cs5 local site folder, you must do so before you proceed. For instructions, see Part 1 of this tutorial series, Setting up your site and project files.

1. In Dreamweaver, make sure the Check Magazine site is selected in the Files panel (see Figure 2).

Figure 2. Before starting work on a site, select it in the Files panel.

2. Select File > New.
3. In the Blank Page category of the New Document dialog box, select HTML from the Page Type list, select <none> from the Layout list (these two options should already be selected by default), and click Create.Note: In the Page Type list below the <none> option you’ll see all of the CSS layouts that come with Dreamweaver. Later you can return to this dialog box to explore the different kinds of CSS layouts available.
4. Select File > Save, or press Ctrl+S (Windows) or Cmd+S (Mac OS X).
5. In the Save As dialog box, make sure you’re in the check_cs5 folder that you defined as the site’s local root folder. Dreamweaver should have selected this automatically, but if a different folder is selected, click the Site Root button at the bottom of the dialog box (it’s on the right in Windows, and on the left in the Mac version).
6. Enter index.html in the File Name text box and click Save. The file name now appears in the tab of your new document.
7. In the Document Title text box at the top of your new document, type Check Magazine (see Figure 3).

Figure 3. Add the page title.

This is the title of your page (different from the file name). Your site visitors will see this title in the browser’s title bar when they view the page in a web browser.

8. Click the page once to move the insertion point out of the Document Title text box. You’ll see that an asterisk (*) appears next to the file name in the document’s tab. This asterisk indicates that a file has changed and that you need to save the file if you want to keep the changes.
9. Select File > Save to save your page.

Insert DIV tags

If you did any of the background reading recommended at the beginning of this tutorial (for example, CSS page layout basics), then you already know that the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements—is the basic building block of a CSS layout. You place div tags on the page, add content to them, and use CSS to position them. Unlike table cells, which are restricted to existing within the rows and columns of a table, div tags are much more dreamweaverible.

If you look at the design comp again (see Figure 1), you’ll notice that the page is divided into distinct sections: a banner logo at the top of the page, a central graphic area in the center of the page, and then a third bottom section that contains three separate columns within it. These sections all correspond to separate div tags that act as containers for the content inside of them. Actually, it is a little more complicated than that, but don’t worry about that right now.

Start by creating the most basic, most important, and most common div tag for CSS layouts—the container. The container div contains all the other tags in the layout. If your CSS layout is like a sandbox, and you are going to place a beach ball, a bucket, some shells, and an umbrella in the sandbox, then the container tag is the outer rim of the sandbox. It defines the shape, dimension, and limitations of the sandbox, and holds everything together.

1. Make sure the Design button is selected at the top left of the Document window, and click once on the page to ensure that the insertion point is in the upper-left corner of the page (see Figure 4).

Figure 4. Place the insertion point in the upper-left corner of the page.

2. If it isn’t already expanded, expand the Insert panel by clicking its tab or by selecting Window > Insert. (In the Designer workspace [the default Dreamweaver workspace], the Insert panel is on the right side of the Dreamweaver interface, above the Files panel.)
3. The default display for the Insert panel is the Common category. Make sure the Common category is selected, and click Insert DIV Tag (see Figure 5).

Figure 5. Click Insert Div Tag in the Common category of the Insert panel.

4. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type container in the ID text box, and click OK.The new div appears on your page, surrounded by a dotted line in Design view, and with some placeholder text (see Figure 6).

Figure 6. The placeholder text identifies the div by its ID.

Note: If you can’t see the dotted line surrounding the div, select View > Visual Aids, and make sure there’s a check mark alongside CSS Layout Outlines. Clicking any of the options in the Visual Aids submenu toggles them on and off.

5. Select the placeholder text and delete it, making sure you delete only the text. If the outline of the div disappears, repeat step 4. The placeholder text should be automatically selected when the div is inserted, so all you need to do is to press Delete.
6. In the Insert panel, click Insert Div Tag again.
7. In the Insert Div Tag dialog box, select “After start of tag” from the Insert pop-up menu. This activates a new pop-menu alongside, which lists the places where Dreamweaver can insert the new div. At the moment, the only candidates are the <body> tag and <div id="container"> .You want to nest the new div inside the container div, so select <div id="container"> (see Figure 7).

Figure 7. Nesting the new div inside the container div.

8. Leave the Class text box blank, type banner in the ID text box, and click OK.The new div appears on your page, and within it you can see the placeholder content for the banner div. But where did the container div go? Well, it’s there, you just can’t see it in Design view. The best way to see it is to look at the code.
9. Click the Split view button (see Figure 8).

Figure 8. Click the Split view button.

Split view displays the underlying code on the left of the Document window. You can see the container div tag, and inside it is the new banner div tag, just as planned (see Figure 9).

Figure 9. The container and banner div tags in Split view.

Note: Working in Split view (formally called Code and Design view) is a great way to learn how Dreamweaver generates code. When you insert something in Design view, you see the code that Dreamweaver writes in Code view. It’s particularly useful if you have a large monitor, because you can see the web page in Design view and the underlying code both at the same time.

10. Since you’re looking at the raw code, let’s continue working there. If you’re cramped for space in Split view, click the Code button at the top of the Document window.Place the Insertion point after the banner div’s closing tag— </div> —and press Enter (Windows) or Return (Mac OS X) to create a new line (see Figure 10).

Figure 10. Press Enter/Return after the banner div’s closing tag.

Note: Pay careful attention to where you create the new line. You should still be inside the container div. The container div’s closing tag is on line 12 of Figure 10.

11. With the Insertion point still on the new line, click Insert Div Tag in the Insert panel.
12. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type main_image in the ID text box, and click OK.The new div tag appears on your page, and within it you can see the placeholder text. This new div tag is inside the container div, on the same level as the banner div.Tip: When you create new IDs watch out for extra space either before or after the ID. For example, make sure that when you type the main_image ID, there is not an extra space after the “e” in image. If there is, it can lead to CSS problems later.
13. Place the Insertion point after the new main_image div’s closing </div> tag and press Enter (Windows) or Return (Mac OS X).
14. In the Insert panel, click Insert Div Tag.
15. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type left_column in the ID text box, and click OK.
16. Place the Insertion point after the new left_column div’s closing </div> tag and press Enter (Windows) or Return (Mac OS X).
17. In the Insert panel, click Insert DIV tag.
18. In the Insert Div tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type center_column in the ID text box, and click OK.
19. Once more—with feeling—place the Insertion point after the new center_column div’s closing </div> tag and press Enter (Windows) or Return (Mac OS X).
20. In the Insert panel, click Insert Div tag.
21. In the Insert Div tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type right_column in the ID text box, and click OK.Your code should now look as shown in Figure 11.

Figure 11. The HTML code after adding all six divs.

22. If you’re in Split view, press F5 or click in the Design view half of the Document window to update Design view. Alternatively, click the Design button to return to Design view.All your divs are stacked one on top of another and stretch the full width of the page. This is the default behavior until you create CSS rules for them.
23. Save the page (File > Save).

Create a new style sheet

Now that you have your div tags in place, the next step is formatting and positioning them with CSS. CSS stands forcascading style sheets—a collection of formatting rules that control the appearance of content on a web page. Using CSS to format a page separates content from presentation. The content of your page—the HTML code—resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file, the external style sheet.

Note: You can also put CSS rules in the head section of a document, or inline with the code itself. However, an external file is the most efficient way of using CSS, because changes made to rules in an external style sheet are automatically applied to every page attached to it.

1. Select File > New.
2. In the New Document dialog box, verify that the Blank Page category is selected, select CSS from the Page Type column (see Figure 12), and click Create.

Figure 12. The New Document dialog box.

3. A blank style sheet appears in the Document window. The Design view and Split view buttons are disabled. CSS files are text-only files—their contents are not meant to be viewed in a browser.
4. Select File > Save.In the Save As dialog box, create a new folder called styles in the site root, select the new folder, and save the file in the styles folder as check_cs5.css.
5. Five divs in index.html are nested inside the container div. To center the content on the page, you need to create a style rule for the container div by giving it a fixed width and setting its left and right margins to auto .To create a style rule for a div (or any other tag) that has an ID, you prefix the ID with a hash sign (#). So the CSS selector for the container div is #container .Note: CSS is case-sensitive. The spelling of the ID must be the same as you used when inserting the div tag. So, if you used an initial capital letter, the CSS selector would be #Container . Also, make sure there’s no space between the hash sign and the ID.Type the following code in the style sheet:

#container { width: 968px; background: #FFF; margin: 0 auto; padding-left: 10px; padding-right: 10px; overflow: hidden; }

As you type, Dreamweaver uses code hints to suggest options for completing your entry. Press Enter (Windows) or Return (Mac OS X) when you see the code you want, and let Dreamweaver finish the typing for you.

When typing the pixel values, do not leave a space between the number and px . For example, it must be 968px , not968 px .

Don’t forget to include a semicolon at the end of each line, after the property values.

When you’re finished, the code should look as shown in Figure 13.

Figure 13. The style rule for the container div.

Each of the properties in your new rule means something specific for the container div. The first one— width —is the most obvious. It sets the width of the container div to 968 pixels. You are setting the background color to white (#FFF), and declaring 0 pixels for the top and bottom margins of the container, and auto for the left and right margins of the container. (This effectively centers the container in the middle of the page when the user views it in a browser.) For the padding, you’ve specified 10 pixels on the right and the left, and you’ve specified a hidden overflow, which forces large assets like images to stay within the confines of their container tags.

Tip: For more information about CSS properties, check the O’Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O’Reilly CSS Reference from the pop-up menu in the Reference panel. This contains details of CSS2, plus some non-standard CSS properties.

6. Save the style sheet.

Next you’ll attach the new style sheet to the index.html page.

Attach the new style sheet

To attach the style sheet, follow these steps:

1. Click the tab for the index.html page and make sure you are looking at the page in Design view. (If you’re still in Code view, click the Design view button.) Your page should look exactly like Figure 14.

Figure 14. The index.html page in Design view before attaching the style sheet.

Even though you created a complex CSS rule for the container div, the page still looks the same as before. This is because the CSS style sheet is not yet attached to the page. When you attach the style sheet to the page, the#container rule that you created in the style sheet will format the div with the id “container” on your web page.

2. Open the CSS Styles panel by clicking its tab. (In the Designer workspace [the default Dreamweaver workspace], the CSS Styles panel group is located below the Insert panel. If it isn’t, you can always select Window > CSS Styles to display it.)You’ll notice that the CSS Styles panel is empty (save for the message, “(no styles defined)”) because there are no CSS rules applied to this page.
3. (Optional) Double-click the Insert panel to close it and create more room.
4. In the lower right-hand corner of the CSS Styles panel, click the Attach Style Sheet button (see Figure 15).

Figure 15. Click the Attach Style Sheet button.

5. In the Attach External Style Sheet dialog box, click the Browse button. This launches the Select Style Sheet dialog box. Navigate to the check_cs5.css style sheet that you created in the styles folder, select it, and click OK (Windows) or Choose (Mac OS X).
6. Click OK to close the Attach External Style Sheet dialog box.Note what happened to the page. You can immediately see that the container div added padding of 10 pixels on the left and right. Depending on the size of your Document window, you might also see that the container div looks centered on the page. That’s because if you have extra room (in addition to the 968-pixel width you specified), the container will also have an “auto” margin on its left and right sides. This effectively means that the browser will create exactly the same amount of pixel space to the left and right of the container div, thus creating a centered effect.
7. Save the page.
8. Run your cursor over the border of the container div until you see a red line, and then click to select the container div. Figure 16 shows what you should see when the container div is selected.

Figure 16. The container div selected in Design view.

Note: If you have difficulty selecting the border of the container div, click inside any of the divs you have created, and select <div#container> in the Tag selector at the bottom of the Document window.

Here Dreamweaver is giving you a nice visual rendering of how the CSS rule applies to the container element. The light gray shading on the left and right sides of the container div indicates the 10-pixel padding, and when you hover your cursor over the area, Dreamweaver displays a tooltip that tells you that. Similarly, the lighter blue areas at the outermost left and right sides of the container indicate the auto margins. Again, the amount of auto margin that displays in Dreamweaver depends on the size of your Document window. If you are working in the default Dreamweaver Designer workspace, and you make your Document window smaller by dragging the docked panel area on the right, you should see the auto margin disappear as less space becomes available on the page.

Note: If the visual rendering of the padding and margins fails to display, select View > Visual Aids, and make sure the following options have check marks next to them: CSS Layout Box Model and CSS Layout Outlines.

9. Click the Inspect button at the top of the Document window (see Figure 17).

Figure 17. Click the Inspect button.

This is a new feature in Dreamweaver CS5. It turns on Live View in CSS Inspect mode. The dotted outlines of the divs disappear, and you see the page as it would look in a browser. In fact, you are looking at the page in a browser—Live View uses the WebKit browser engine that powers the Safari and Google Chrome browsers.

10. Move your cursor over the divs in the center of the page. As you move up or down, each div is highlighted in light blue.
11. Move your cursor to the left of the place holder text (see Figure 18).

Figure 18. CSS Inspect mode highlights the divs, padding, and margins.

This highlights the container div. The div itself is highlighted in blue. The 10-pixel padding on either side is highlighted in purple, and the auto margins are highlighted in yellow. Being able to see the effect of your style rules like this makes it a lot easier to understand the effect they have on your layout.

12. Click Live View to return to Design view and turn off CSS Inspect mode.

Add the main images

Now that you have all your divs in place and your style sheet attached to the page, you are ready to create the remaining CSS layout rules, and apply them to the appropriate elements on the page. But first, you need to think about the two main images: the banner at the top, and the large image of a man standing alongside the reflection of palm trees in a glass wall.

With CSS, you can add a background image to any HTML element, such as a div. However, background images should be used only for decorative purposes. By default, browsers turn off background images when a page is printed. Important images should be inserted directly in the HTML, using the <img> tag. The images in this page play different roles, so they need to be handled differently.

Insert the banner image with the <img> tag

The banner image at the top appears on all pages and identifies the Check Magazine site, so it’s not appropriate for a background image.

1. Click inside the banner graphic div and delete all of the placeholder text so that the banner div is empty.
2. In the Insert panel, click Images. If it’s the first time you have used Images, a submenu opens, showing the various options. Choose the first one (Image), as shown in Figure 19. This opens the Select Image Source dialog box.

Figure 19. Selecting Image in the Images submenu.

Note: After the first time, Dreamweaver remembers your most recent choice, and makes it the default. To choose a different option, click the tiny down arrow to the right of the icon in the Insert panel.

3. In the Select Image Source dialog box, navigate to the images folder in the Check Magazine site, and select banner.jpg. Click OK (Windows) or Choose (Mac). This opens the Image Tag Accessibility Attributes dialog box.
4. When you insert an image in an HTML page, you need to add alternate text that gives a brief description of the image for the benefit of people with visual disabilities. When they visit your site using a screen reader—assistive technology that reads the content of web pages aloud—the alternate text gives them a verbal indication of what’s on the screen. The alternate text is also displayed in place of the image if a visitor has images turned off in the browser, or if your image is missing.Type Check Magazine in the “Alternate text” text box (see Figure 20), and click OK.

Figure 20. Adding the alternate text for the image.

Note: Purely decorative images should normally be added as background images with CSS, but if you do put them directly in the HTML, select <empty> from the “Alternate text” pop-up menu. This inserts an empty alt="" attribute in the <img> tag. The “Long description” option is intended for complex images, such as graphs or charts, and should contain the URL of a text description of the content. The link to the text description is seen only by screen readers.

5. Your page should now look like Figure 21, with the banner image sitting above the remaining div placeholders.

Figure 21. The banner image is in the top div.

Insert the main image as background

When the layout is finished, text will be added in front of the main image, which is mainly decorative anyway. So, this time, you’ll use CSS to insert it as a background image to the main_image div.

1. Place the insertion point in the main_image div, and delete all the placeholder text.After you’ve deleted the last character, it will look like the div has completely disappeared. Don’t worry, it’s still there. Don’t click anywhere in the Document window before proceeding to the next step.
2. In the lower right-hand corner of the CSS Styles panel, click the New CSS Rule button (see Figure 22).

Figure 22. Click the New CSS Rule button.

As long as your Insertion point was in the main_image div when you clicked the button, the New CSS Rule dialog box should automatically suggest appropriate settings for the CSS selector (see Figure 23).

Figure 23. The New CSS Rule dialog box suggests the selector type and name.

Dreamweaver detects that the Insertion point is in the main_image div, which is nested inside the container div, and it suggests using a compound selector #container #main_image . The text area below the Selector Name text box describes the meaning of this selector.

Although it’s correct, everything in the page is nested inside the container div, so you don’t need to be so specific.

3. Click the Less Specific button. This changes the value in the Selector Name text box to #main_image , which is exactly what you want.Technically speaking, the Selector Type pop-up menu should now be set to ID. However, don’t do it. If you do, Dreamweaver clears the existing value from the Selector Name text box.
4. Leave the Selector Type pop-up menu set to Compound, and make sure check_cs5.css is selected from the Rule Definition pop-up menu. Then click OK.The CSS rule definition dialog box appears, indicating that you are defining properties for the new #main_imagerule.
5. Select the Background category in the Category column.
6. In the Background category, click the Browse button next to the Background-image text box.
7. In the Select Image Source dialog box, navigate to the images folder inside the Check Magazine site.
8. Select the main.jpg graphic and click OK (Windows) or Choose (Mac OS X).
9. Select no-repeat from the Background-repeat pop-up menu.The main.jpg graphic is now defined as the background image for the main_image div (see Figure 24).

Figure 24. Setting the background image for the main_image div.

10. Select the Positioning category in the Category column.In the Positioning category, do the following:
    • Select relative from the Position pop-up menu.
    • Type 968 in the Width text box and select px from the pop-up menu to the right.
    • Type 376 in the Height text box and select px from the pop-up menu to the right.
    • Click OK.

    The main.jpg graphic appears in the main_image div, and the dimensions of the div are set.

    Normally, it’s not a good idea to give a div a fixed height, because a div expands or contracts automatically depending on the amount of text or other content inside it. However, in this case a fixed height is necessary, because you need the div to be the same height as the background image. Without the height declared in the CSS, the div would collapse to nothing, and the background image would not be displayed.

    I’ll explain the reason for setting Position to relative in Part 4 of this tutorial series, when you’ll add some text to the main_image div.

11. Select File > Save All Related Files to save the page and the style sheet.

Figure 25 shows what your page should look like at this point.

Figure 25. The index.html page after setting properties for the main_image div.

Position the columns

The last major task for the basic layout of index.html is to marshal into order the columns at the bottom of the page. CSS categorizes most HTML elements as block-level or inline. A block-level element begins on a new line of its own, and forces the following element onto the next line, whereas inline elements snuggle up alongside each other. Typical block-level elements include headings, paragraphs, and divs. Text inside a paragraph and images are inline elements.

Before moving the columns into position, you need to do a little calculation. The main image is 968 pixels wide. That doesn’t divide evenly by 3, but you need a little breathing space between each column, say 10 pixels. So, if you divide 948 by 3, you get 316. That’s how wide each column needs to be. It also happens to be the width of the images at the top of each column.

1. If your monitor is wide enough, the best way to work is in Split view, using Dreamweaver’s related files feature. Close check_cs5.css by clicking the X on its tab, leaving just index.html open.
2. Click check_cs5.css in the Related Files toolbar just below the tab for index.html. This opens the style sheet in Split view, while leaving index.html visible in Design view (see Figure 26).

Figure 26. Using related files, you can work in the style sheet and see your page at the same time.

You can now edit the style sheet, and see the changes in Design view.

Tip: If you’re cramped for space, drag the center bar to resize the windows. You can also make extra room by pressing F4 to hide all the panels. Press F4 again to restore them.

3. All columns need to be 316 pixels wide, you can apply the same width to all of them by creating a combined selector for the three divs. Add the following style rule at the bottom of the style sheet:

#left_column, #center_column, #right_column { width: 316px; }

Tip: Code hinting in Dreamweaver CS5 is super-smart. It recognizes unique character combinations within CSS properties. Instead of typing widt before Dreamweaver selects width , just type dt to jump straight there, and then press Enter (Windows) or Return (Mac OS X) to insert width: in your style sheet. This trick works with all code hints, not just CSS.

Separating the ID selectors for the three divs with commas applies the same rule to each of them.

4. Click in Design view (or press F5) to refresh the page. The columns are now much narrower, but they’re still stacked on top of each other (see Figure 27). That’s because they’re block-level elements.

Figure 27. The column divs are still stacked on top of each other.

5. To get them to sit alongside each other, you need to use the float property.Position the Insertion point after the semicolon at the end of the line in the style rule you have just created, and press Enter (Windows) or Return (Mac OS X). Dreamweaver displays code hints for the available properties. Type fand press Enter/Return to insert float: . Then type l (lowercase L) and press Enter/Return to insert left . Don’t forget to add a semicolon at the end of the line.
6. Refresh Design view by clicking in it or pressing F5. The columns should now be alongside each other across the bottom of the page.
7. Finally, you need to add the margins between the columns. You do this by adding a 10-pixel left margin to the center and right columns. Add the following style rule at the bottom of the style sheet:

#center_column, #right_column { margin-left: 10px; }

Like the previous style rule, the same property is assigned to multiple elements by listing their selectors separated by commas.

8. Select File > Save All Related Files.Note: depending on where the focus is in the Document window, Save All Related Files might be grayed out. If it is, select Save All. The difference is that Save All saves all files that are currently open. Save All Related Files saves only those files that are related to the current document.Figure 28 shows what your page should now look like in Design view.

Figure 28. The columns are now in place.

Your CSS page layout is now complete. If for some reason your layout does not look the way it’s supposed to, double-check the spelling (including capitalization, if appropriate) of all your CSS rules. The most common causes for CSS layout errors are typographical ones, so you must make sure that the IDs in your external CSS file correspond exactly to the IDs in your index.html file. Also, don’t forget to watch out for those extra spaces that can creep in before and after IDs when creating new CSS rules

Now that you’ve finished the layout, you’re ready to add some content. You’ll add some images and text in Part 3: Adding content to pages

The Best Antivirus Software in 2011

Antivirus vendors have included “2011” in their product names since the summer of 2010. Now that the year 2011 has actually arrived it’s time for a new look at the whole collection. Several of the latest additions attempt to crank up protection by running two different antivirus engines, and some actually succeed. This batch also brings a new Editors’ Choice for free antivirus and a new shared Editors’ Choice for commercial antivirus.

As always, when I say “antivirus” I mean a utility that protects against all kinds of malicious software, not just viruses. Trojans, spyware, rootkits, keyloggers, adware, scareware – a proper antivirus must handle all of these.

Standalone or Suite?
Many of this year’s products blur the line between standalone antivirus and security suite. In the past the presence of a personal firewall has been one defining suite element; not any more. There’s a fully-functional firewall inside Panda Antivirus Pro 2011. eScan Anti-Virus 11 and McAfee AntiVirus Plus 2011 also offer firewallprotection. Norton AntiVirus 2011 doesn’t include a complete firewall, but its intrusion prevention feature is more effective against exploits than most full-blown suites.

Spam filtering is another component typically found in a suite. The spam filter built into BullGuard Antivirus 10 is reasonably accurate and unusually helpful at setup time. eScan also offers a spam filter, but it’s not something you’d want to inflict on your Inbox.

StopSign Internet Security 1.0 includes an optional firewall with spam filtering built in. None of the independent labs have tested it, though, and its performance in my own malware blocking and removal tests was so poor that I didn’t bother evaluating those optional features.

BitDefender Antivirus Pro 2011 offers full remote management of other BitDefender installations across the network. McAfee can monitor other installations remotely and fix problems. Panda and Norton can at least let you know when another installation has problems, though they won’t fix those problems remotely.

BitDefender includes a very effective phishing prevention tool, as does G Data AntiVirus 2011. The LinkScanner component in AVG Anti-Virus Free 2011 also works to block phishing sites, as does McAfee’s SiteAdvisor. AVG and Norton both scan the links on your Facebook pages to protect you from Facebook scams and viruses. BitDefender and Kaspersky Anti-Virus 2011 both check your system for security vulnerabilities, though BitDefender takes the concept a bit farther.

Outpost Antivirus Pro 7.0 and BitDefender can block transmission of user-defined private data, a feature usually found only in suites. Ad-Aware Pro Internet Security 9.0, AVG, Kaspersky, and McAfee will tune system performance and wipe out traces of computer and Internet use. Sometimes it’s hard to remember that the product is “only” an antivirus, not a full suite.

The true standalone antivirus isn’t dead, however. For example, F-Secure Anti-Virus 2011 sticks to the business of virus protection without any sign of morphing into a mini-suite.

Twin-Engine Trend
Several late-season additions aim to double your protection by using two antivirus engines, with varying degrees of success. G Data’s dual scan doesn’t take much longer than the average single-engine product, and it includes powerful phishing protection. However, it doesn’t thoroughly clean up the threats it detects, and a failed cleanup effectively killed one test system. TrustPort Antivirus 2011 ran a bit slower than G Data and failed significantly in my testing. After its alleged removal some threats were still running. In the malware blocking test a few threats that it claimed to block managed to install and launch anyway.

Double Anti-Spy Professional v2 turned in the best performance of the twin-engine antivirus tools. It scans first with one engine, then with the other, and it also requires two separate updates. It’s noticeably slow, but effective enough that it’s worth waiting for.

Adjustable Interfaces, Built-in Support
Some users want to hear about every little security event, but most prefer a product that just does the job, without making a fuss. Ad-Aware Pro appeals to both with a choice of simple or advanced mode. BitDefender goes even further. Not only can its users choose basic, intermediate or expert view, they can build a personal collection of their most-used tools.

Webroot AntiVirus with Spy Sweeper 2011 totally focuses on keeping everything as simple as possible. It updates automatically, scans while the system is idle, and interacts with the user through a completely redesigned interface. All the detail a tech-savvy user might want is available, but hidden when not needed.

The user interface for Trend Micro Titanium Antivirus + 2011 discards the standard landscape-orientation window for a skinny vertical panel that takes up minimal space. McAfee, too, has switched to a vertical interface.

Norton reserves a panel across the bottom of its main window for interaction and communication with other security components. Initially the panel shows an interactive world map of security activity, but it can also connect with Norton Safe Web for Facebook or with your Norton Online Backup account.

Built-in and automated support features grace many of these tools. BitDefender includes a search box for help topics right on its main screen; a built-in tool will gather system information and contact an agent for chat-based support. Norton’s one-click support system gathers diagnostics and offers relevant FAQs or chat-based support. Kaspersky’s built-in support tool can send diagnostic reports to the company and process purpose-built scripts to fix specific problems. Panda’s PSCAN lets remote analysts request samples and push fixes without requiring full chat-type interaction. BullGuard offers built-in access to e-mail and live chat support with a message center to manage your support interactions. eScan links to live chat and online help.

How to Transfer Files to a New Computer

When purchasing a new computer, you’ll want to transfer files from the old computer to the new one. With today’s technology, it is easier than ever to do this. Transferring files to a new computer may be done with a flash drive, an external hard drive, or over a network.

Windows Easy Transfer

If the new computer is running Windows 7*, you may use the program called ‘Windows Easy Transfer*.” If the old computer was not running Windows 7, you’ll need to download the software from Microsoft’s page. If both computers are connected on a network, the “Windows Easy Transfer” software can use the network connection. If no network is available, an “Easy Transfer” cable is required. This transfer cable is a USB cable with male connections on both sides and may be purchased at any computer store for a minimal amount of money.
With the new computer, open the “Windows Easy Transfer” application. To do this, click on the “Start” button, type “Easy Transfer” in the search field, and press the “Enter” key. Click on the “Windows Easy Transfer” link to run the software. Follow the wizard to transfer the specific information you want to transfer to the new computer. The wizard will tell you the exact timing for running the software on the old computer. Continue following the wizard until all files and folders have been transferred successfully. Transferring files to the new computer using the “Windows Easy Transfer” software may take a few hours. This is dependent on the amount of data you will be transferring.

External Hard Drive

One other way of transferring files to a new computer is to use an external hard drive. These come in a variety of sizes, holding up to 2 TB of data. These also may be purchased at most any computer store. The price is dependent on the brand name and the amount of storage needed. The more space on the hard drive, the more expensive the device will be.
Connect the external hard drive via USB port to the old computer. The hard drive appears as another drive letter, just as a CD drive comes up as the E: or F: drive. Copy all files and folders you want on the new computer onto the hard drive using Windows Explorer.
Once all files and folders are on the hard drive, disconnect it from the old computer and connect to the new computer. The external hard drive will most likely be automatically recognized by the new computer. If not, use Windows Explorer again to copy the files and folders from the external hard drive and paste them into the desired location on the new computer.
The external hard drive may now be used as a back-up device by copying data onto the drive from the new computer at regular intervals.

Flash Drive

Yet another way of transferring files to a new computer is to use a flash drive. Flash drives do not hold as much data as external hard drives, but can hold up to 128GB of data. As with the external hard drives, the more data storage you purchase, the more expensive the device.
Plug the flash drive into the old computer using a USB port. Following the same steps as with the external hard drive, copy all data onto the flash drive; then plug the flash drive into the new computer and copy the data from the flash drive onto the new computer.
Any time you transfer files to a new computer you should use caution to ensure you have copied everything needed before disposing of the old computer. If you have space, the know-how, and a static bag, it is a good idea to keep the hard drive until you are sure you no longer need it. The data can be recovered from the old hard drive.
Once you are ready to dispose of the old computer, use caution and ensure all data has been erased from the hard drive. Software is available to do this; or you may take it to a computer repair store to have it done for you.

Apple’s infamous keynotes are a thing of

Apple’s infamous keynotes are a thing of legend in the consumer technology world, with pomp and pageantry unrivaled by any other company. Whether it’s Steve Jobs’ “uniform,” the “reality distortion field” effect or the “one more thing” tradition, the keynotes — sometimes called “Stevenotes” — have become more than a slightly flamboyant way to announce new products. They have become part of our modern pop culture. http://ow.ly/3ElmH

Steve Jobs Remixed: 5 Creative Takes on

Steve Jobs Remixed: 5 Creative Takes on the Iconic Apple Keynote [VIDEOS] http://ow.ly/3EllQ