1 USE ANY FONT ON YOUR WEBPAGES
Designers have been begging for years to have more fonts on the Web (without resorting to images). Now, thanks to CSS3, you can link to any font and use that font for any or all of the text on your webpages. This long-awaited feature already works in the most recent versions of most browsers, even Internet Explorer (since version 8). In older browsers, text reverts to the default font, but that’s what people with old browsers deserve anyway. Your hip friends and clients using Firefox, and even Safari on an iPhone or iPad, will see your fancy fonts.

2 TARGETING BROWSERS WITH CSS
The good news is a growing percentage of Internet users can view these new CSS features such as linked fonts. If you use a good traffic reporting service, such as Google Analytics (shown here), you can identify the browsers that visit your website—and design for your target audience. Firefox is now the most popular browser in the U.S., and other browsers that use WebKit (such as Safari) also support most of the new CSS3 features. Even Internet Explorer supports a growing number of HTML5 and CSS3 features with each new version.

3 ENHANCE DESIGNS WITH CSS3 TECHNIQUES
If you want to design for the future, without compromising the present, all of the CSS rules in this tutorial won’t break, even in older browsers. If you use something like a drop shadow or fancy font, an old browser simple won’t display it. So you have nothing to lose but a few minutes with this tutorial. The page shown here in Firefox was designed entirely with CSS, not an image on the page. The majority of the Web audience is using browsers that can display these new features already.

4 DREAMWEAVER WON’T DISPLAY HTML5/CSS3
If you know how to write the styles and other code, you can use any Web design program or text editor to create pages with HTML5 and CSS3. If you’re used to getting a good preview of your page designs in Dreamweaver, you may be disappointed that even Dreamweaver CS5 doesn’t support all of the new features of HTML5 and CSS3 (at least not yet). If you add the HTML5 Pack (shown in the next step) you can preview pages with these features, but in Design View in Dreamweaver, as you see here, linked fonts and drop shadows won’t display.

5 THE HTML5 EXTENSION FOR DREAMWEAVER
What you see here is the multiscreen display you get when you add the HTML5 Pack to Dreamweaver. (The HTML5 Pack is now part of the 11.0.3 update for Dreamweaver CS5). The HTML5 Extension adds a three-way split-screen preview that simulates how your pages will look in an iPhone, iPad, and any browser that supports HTML5. The extension also supports many new CSS3 enhancements, which is why you see the fancy fonts, rounded corners, and drop-shadow effects in this preview.

6 LINKING FONTS
You add the font link tag to the head area of an HTML page referencing where the font is hosted on a Web server. There are multiple ways to set up fonts on a server, and a growing list of online services, such as the Google Font Directory, that make fonts easy to use (if you’re willing to settle for limited font collections). Here’s the code generated to link to a font named Lobster in the Google Font Directory: . Just add this code to the top of any webpage and you can use the font in CSS styles.

7 USING LINKED FONTS IN CSS STYLES
Once you link a font to your page, you can use it in any CSS style rule. Here are two examples that use the Lobster font and the Molengo font from the Google Font Directory:
? .molengo { font-family: ‘Molengo’, arial, serif; }
H1 { ?font-family: “Lobster, arial, serif; font-size: large; ?}? .

Finally, you need to apply a style to text in the page (like the ones shown in the image above and the example below):
<p class=”molengo”>. This is how you’d format the HTML to apply a class style like .molengo to use the Molengo font to format this sentence. </p>

8 GENERATE FONT CODE AT FONTSQUIRREL
Check out how FontSquirrel.com makes it easy to use free fonts or to generate the code you need for your website to use any font you can upload to their server. (You’ll find detailed instructions on how to use their Font-Face Generator on the site.) They also offer a collection of font kits that are ready for you to use. Essentially, they have collected all the best free fonts they could find (so you don’t have to worry about licensing issues, even on commercial projects). Similar to the Google Font Directory, you can generate the code you need from their site, but FontSquirrel has a bigger collection of fonts.

9 CREATE SIMPLE ROUNDED CORNERS
One of the simplest and most popular new options in CSS3 is the ability to create rounded corners without a lot of extra markup or that image trick we used to put in the corners of our divs. If the Web were a perfect, standards-based world, border-radius: is all the code you’d need, but if you want your rounded corners to work in Firefox, you’ll need to add a second line with -moz to create a style like this:
.rounded-corners { width: 225px; padding: 10px; border-radius: 15px; -moz-border-radius: 15px; border: 1px solid #333;}

10 CREATE COMPLEX ROUNDED CORNERS
Now, rounder corners can be created with a single line of the border-radius option in CSS and can be used to create a different style for each corner. Using the four border-radius properties (border-bottom-right-radius, border-top-right-radius, etc.) you can create more complex designs. For example, this code makes the two left corners rounded:
.two-rounded-corners { width: 200px; padding: 20px; margin: 10px; color: #fff; background-color: #999; border-top-left-radius: 50px 50px; border-bottom-left-radius: 50px 50px; -moz-border-radius: 50px 50px 0px 0px; }

11 ADD A DROP SHADOW TO TEXT
CSS3 finally eliminates the need for Photoshop when all you want to do is add a simple shadow. The text-shadow property can be used in a style rule. For example, this code adds a drop shadow to any text formatted with the H1 tag. You can adjust the color and spacing of drop shadows by changing the pixel size and hexadecimal color code in the example below:
h1 { text-shadow: 2px 2px 2px #999;}

12 COMBINE FONTS AND DROP SHADOWS
You can use the CSS rules in combination to create more elaborate text effects. In this example, we used a font face, text shadow, and contrasting text and background colors. Remember, you must first link a font to a page (see Step 6) before you can use a font in a style rule. Here’s the style:
.logo { font-size: 300%; color: #FFF; background-color: #930; padding: 10px; text-shadow: 2px 2px 2px #000; }

13 ADD A DROP SHADOW TO A DIV
You can also add drop shadows to div tags. Again, you can control the color and location of the shadow, and you can even control how big it is, but the code for this is a bit more complex when you add all of those options, and you’ll need to use three different variations on this code to create shadows that work in Firefox and WebKit browsers. The code for this example is included in the following step, where you can see how it looks in Safari (like the other features in this column, you won’t see the drop shadows in Dreamweaver).

14 VIEW SHADOWS IN FIREFOX AND SAFARI
To view most of these features, you’ll need to preview your pages in the latest version of Firefox or Safari. Here’s the example shown in Safari above (and in Dreamweaver in the previous step).
.drop-shadow {
width: 625px;
padding: 5px;
-webkit-box-shadow: #CCC 10px 10px 5px;
-moz-box-shadow: #CCC 10px 10px 5px;
box-shadow: #CCC 10px 10px 5px; }

1 WEB SERVER AND DATABASE SOFTWARE
To run WordPress, you need a Web server, a MySQL database, and PHP installed on your local computer. It’s also best to have the Firefox Web browser, so be sure to install it if you haven’t already. On a Mac, you can get everything you need in one nifty package at www.mamp.info. If you’re on Windows, go to wampserver.com/en. Because of the limited space in this column, these steps are specific to the Mac, but the process is similar for both platforms (and you’ll find special instructions for Windows users in the Dreamweaver Help Center on my site at www.DigitalFamily.com).

2 LAUNCH MAMP
After you download, install, and launch MAMP, a little window opens with controls to turn the Apache server and MySQL database on and off. Give them a second to get going and MAMP will launch the Firefox Web browser. If the browser doesn’t open automatically, click on the Open Start Page button. You’ll know that the server is working on your Mac when you see the Welcome to MAMP screen in your browser window and http://localhost/8888/MAMP in the address bar.

3 SET SERVER PREFERENCES
This is an optional step to remove the 8888 from the local URL: In the small, floating MAMP window, click Preferences, then click the Ports tab, and click the Set to Default Apache and MySQL Ports button. This changes the port from 8888 to 80. Click OK. Anytime you make a change to the server setup, or if things just don’t seem to be working right, restarting the server often fixes the problem. Click the Stop Servers button, wait a minute, and then click the Start Servers button to restart the server. Click the Open Start Page button to refresh the browser with the simplified URL.

4 CREATE A MYSQL DATABASE
Next, you need to create a database. Don’t worry, it’s not as hard as you may imagine because WordPress builds all of the tables for you. With MAMP open in Firefox, click on the phpMyAdmin tab at the top. In the Create New Database Field, enter a name (don’t use spaces or special characters). Make note of the name. Better yet, copy it so you can just paste it into WordPress when you get to Step 8 (you’ll need to enter it exactly). Click the Create button and you’ve created a database (WordPress takes care of the rest).

5 DOWNLOAD AND INSTALL WORDPRESS
Next, go to WordPress.org (not WordPress.com) and download WordPress (it’s free and it’s a quick download.) Unzip the WordPress folder and you’ll find all of the files and subfolders for a new blog. There’s really nothing to install but you’ll need to copy these files into the root folder of your local Apache Web server. On a Mac, the htdocs folder inside the MAMP folder inside the Applications folder is the root folder of your local server. (More on copying these files into the htdocs folder in the next step.)

6 COPY FILES INTO THE HTDOCS FOLDER
If you’re creating a single blog, simply copy all of the files in the WordPress folder you unzipped into the htdocs folder (inside the MAMP folder). If you’re working on multiple blogs, or if your blog is part of an existing Dreamweaver site and you want to work on all of the files together, you can create subfolders in the htdocs folder. Then copy the entire WordPress folder into the subfolder within htdocs as well as any Dreamweaver site files. This way you can work on them together in the same root folder in Dreamweaver.

7 OPEN WORDPRESS IN FIREFOX
Now it’s time to open the blog in a Web browser on your computer. Make sure that the Apache server and MySQL database are still running in the background (you can always check the floating MAMP dialog). In Firefox, enter the URL: http://localhost/ followed by any subfolder names you added to the htdocs folder. Note: The http:// isn’t optional, and you don’t use www. Also note: If you didn’t change the preferences in Step 3, you’ll still need the 8888, so your URL would be something like this: http://localhost/8888/foldername. Don’t panic when WordPress returns an error.

8 CREATE A CONFIGURATION FILE
Click the Create a Configuration File button and follow the WordPress instructions. On the screen where you have to enter the name of the database, enter the exact name you entered when you created the database in Step 4. In both the MySQL User Name field and the Password field enter “root.” Note: All MySQL databases come with the user name and password “root.” Unless you’re worried about someone hacking your blog on your local computer, there’s no reason to change them. Leave the last two fields in the WordPress setup page as they are and click Submit.

9 INSTALL AND SET UP WORDPRESS
Click Run the Install button and fill in the WordPress Welcome screen. I recommend you don’t use “admin” as the Username and that you take note of your user name and password because you’ll need them to access your blog even on your local computer. Follow the rest of the WordPress instructions and you’ll soon find yourself at the WordPress Dashboard. From here you can do all the things on your local computer that you can do on a remote server with a WordPress install, including creating and editing posts, downloading and changing themes, adding plug-ins, etc.

10 SET UP YOUR BLOG IN DREAMWEAVER
Once you have the Apache server and MySQL database working and you’ve installed WordPress, you can set up your blog so that you can edit it in Dreamweaver. You set up a blog much as you would set up any site in Dreamweaver. Choose Site>New Site. Give the site a name (this name is just for your reference). Click on the Browse for Folder icon at the far right of the Local Site Folder field and browse to find the htdocs folder in your MAMP folder in the Applications folder. If you created a subfolder for your site, select that folder. Don’t click Save yet.

11 SET UP THE TESTING SERVER
With the Site Setup dialog still open, click the Servers category on the left. Click on the small plus sign (+) near the bottom of the servers dialog to add a new server (just as if you were setting up a remote server connection). Enter a name, such as “Testing Server” (again this name is just for your reference). From the Connect Using drop-down list, choose Local/Network (not FTP). With Local/Network selected, the rest of the options will change. Again, use the Browse icon (folder) to find the site folder. If you didn’t create a subfolder, it should be Applications/MAMP/htdocs.

12 SAVE SERVER SETTINGS
In the Web URL field at the bottom of the Server Setup dialog, type http://localhost/ (again, adjust this name to include any subfolder names you may have added to the htdocs folder.) Note: You’ll need to add 8888 if you didn’t change the preferences in MAMP in Step 3. Click Save. The dialog closes and the server is added to the Servers list in the Site Setup dialog. Important: Next to the server name are two checkboxes for Remote and Testing. Uncheck Remote and check Testing. Then click Save to complete the setup.

13 OPEN THE INDEX.PHP PAGE
Choose File>Open and select the index.php file in your WordPress blog folder (you can also open it by double-clicking on the index.php page in the Files panel). Expect a blank screen—this doesn’t mean you’ve made a mistake (necessarily). In tiny text at the top of the workspace, look for the message: This page may have dynamically-related files that can only be discovered by the server. Click the Discover link, then click Yes. Finally, click the Live View button at the top of the workspace to make Dreamweaver act like a Web browser and display the dynamic WordPress page.

14 EDIT YOUR BLOG IN DREAMWEAVER
If you got through all those steps, congrats! Setting all that up is complicated, but you only have to get it right once. Dreamweaver saves your server settings and you can now take advantage of all of the wonderful CSS and PHP features in Dreamweaver to edit your blog theme. (Note: You still want to create and edit posts in the WordPress Dashboard.) When you get the theme design the way you want it, you can copy just the CSS file to your remote Web server, or use the WordPress export/import features to move the entire blog from your local server to a remote server.

1 CREATE A NEW PAGE
To use a CSS layout in Dreamweaver, create a new document by choosing File>New. Then, choose Blank Page from the left column and HTML from the Page Type column. Choose one of the more advanced options—such as ASP.NET, PHP, or ColdFusion—only if you’re working on a dynamic site. (If you’re not familiar with these technologies, stick with HTML.) From the Layout column in the middle, click to select a CSS layout and a preview of the layout is displayed in the top right of the dialog.

2 CHOOSE A FIXED OR LIQUID LAYOUT
Dreamweaver includes several layouts designed with two distinct approaches to CSS. When you create a new page with one of these layouts, the first thing you must do is decide which type you want to use. Essentially, you have two options: Liquid layouts are designed to expand and contract depending on the size of the browser window; fixed layouts are centered within the browser and set to a width of 960 pixels. Although there are some advantages to the flexibility of liquid layouts, you’ll have more design control with fixed layouts. We chose the 2 Column Fixed, Left Sidebar, Header and Footer layout.

3 SPECIFY HOW TO SAVE THE STYLES
When you save a CSS layout, Dreamweaver generates all of the CSS styles to create the layout as it creates the page. You can choose to save the styles in an internal style sheet or an external one. The Layout CSS drop-down menu includes three options: Add to Head creates an internal style sheet with all of the styles saved in the Head area of the file; Create New File saves all of the styles in a new external style sheet linked to the page; and Link to Existing File lets you add the styles to an existing external style sheet.

4 SAVE THE NEW PAGE AND STYLES
Click Create to open the page in the main workspace. If you chose to save the styles in an external style sheet, a dialog will first prompt you to save the style sheet separately. If the styles are contained in an internal style sheet, they’re saved automatically when you save the page. With the new page open, choose File>Save to save the page and the corresponding styles at the same time. It’s also good practice to add a page title as soon as you create a new page so you don’t forget to replace the words “Untitled Document” in the Title field.

5 EDITING TEXT IN A CSS LAYOUT
To add text, just click and start typing. You can replace any of the text in the page or simply delete it. Just be careful as you delete and replace text that you don’t remove the formatting unintentionally. Keep in mind that there is code behind the Design view and if you delete too much, you may turn a headline into plain text by accident. If this happens, just use Undo (Command-Z [PC: Ctrl-Z]) to restore the formatting, or use any of formatting features to format the text as you prefer. You format text in these layouts as you would format any other text on a page in Dreamweaver.

6 EDIT STYLES IN CSS STYLES PANEL
When you work with CSS layouts, the style information is saved in an internal or external style sheet. Either way, you can edit the styles in the CSS Styles panel. Choose Window>CSS Styles to open the panel. Make sure you have the All button selected at the top of the CSS Styles panel to view all of the styles. Click the triangle (PC: plus [+] sign) next to the style sheet name to open the style sheet and view the list of style names.

7 CHANGING THE WIDTH OF A CSS LAYOUT

The CSS layouts in Dreamweaver follow a common practice of using div tags as dividers (or boxes) around each element on the page and then using styles to describe how those boxes should be displayed. Each layout includes a div tag with a class style named .container that surrounds everything else in the layout. To change the width of the overall design, click on .container and change the Width in the CSS Styles panel. The fixed width of CSS layouts in version CS5 is 960 pixels wide, which is the recommended width for most pages on the Web today.

8 CLASS STYLES VS ID STYLES
In versions CS3 and CS4, layouts in Dreamweaver used a combination of Class and ID styles, but the layouts in CS5 use only Class styles. All of these layouts follow the rules of CSS, but they were created by different designers with different philosophies about CSS. ID styles can only be used once per page and are commonly used for the container, header, and footer styles in CSS layouts. Class styles can be used multiple times per page so they are more versatile. The designers who created the CS5 layouts preferred this option for all of the styles in these layouts.

9 REVIEW CSS STYLES
If you’re new to CSS, the layouts can be confusing at first because you can’t just change the colors or sizes of elements in the design area of Dreamweaver. You need to create new styles or edit the style that’s already associated with an element to change the color, width, or other formatting. A good way to start is simply by clicking on each style in the CSS Styles panel to get familiar with the rules defined in the style sheet. You can double-click on a style name in the CSS Styles panel to edit it in the CSS Rule Definition dialog.

10 EDIT PAGE-WIDE SETTINGS
To edit page-wide settings, such as the background color of the page or the main font face, size, and color of the text used throughout the page, double-click on the style named body in the CSS Styles panel. In the CSS Rule Definition dialog, select the Type category from the left to change font settings. Select the Background category and use the color well in the Background-Color field to specify a color for the entire background of the page. If you prefer, you can enter any hexadecimal color code in the Background-Color field. Click OK to save the changes.

11 ADD AN IMAGE TO THE HEADER
You can insert images into any section of a CSS layout just as you would any other page in Dreamweaver. To add an image into the header area, you should first delete the placeholder image with the text “Insert_logo (180 x 90).” You can insert an image of any size into the header area of the page. First, click to place your cursor in the header area, then choose Insert>Image and select any image on your hard drive and click OK. If the Image Tag Accessibility Attributes dialog opens, enter a brief text description in the Alternate Text field and click OK again.

12 EDIT THE SIDEBAR
You can change the color and width of the sidebar by editing the style named .sidebar1. Double-click on .sidebar1 in the CSS Styles panel to open it in the CSS Rules Definition dialog. Click on the Background category on the left to change the background color. To remove the background color, delete the hexadecimal color code from the Background field and leave it blank. To change the width, choose the Box category on the left, enter the width you want in the Width field, and choose a size option, such as pixels. Click Apply to preview the changes; click OK to save them.

13 EDIT LINK STYLES
The color, size, and style of the links in the left sidebar of the CSS layouts in Dreamweaver are controlled by three different style rules. The top border and bottom margin are defined in the style ul.nav; the bottom border is defined in the style ul.nav li. The way the links appear in the page is defined in the style ul.nav a, ul.nav a:visited. To change the rollover effect, edit the style name ul.nav a:hover, ul.nav a:active, ul.nav a:focus. Double-click the name in the CSS Styles panel to open any of these styles in the CSS Rule Definition dialog to edit them.

14 ALIGN IMAGES AND OTHER ELEMENTS
All of the CSS layouts that come with Dreamweaver CS5 include styles you can use to align images and other elements to the left or right of the page. To use these styles to align an image, insert the image and then select it. With the image selected, the Properties inspector at the bottom of the workspace changes to the image options. Click to open the Class drop-down menu and select fltrt (to align the selected image to the right using the float right style) or fltlft (to align the selected image to the left using the float left style).

ALL IMAGES BY JANINE WARNER UNLESS OTHERWISE NOTED

1 THE NEW, SIMPLER, SITE SETUP
In version CS5, Adobe streamlined the website setup process. When you first start working on any new or existing site in Dreamweaver, it’s important to begin by setting up the site and identifying your main website folder. The new Site Setup dialog (Site>New Site) requires two settings to get started. First, give your site a name (any name will do, it’s just for your reference). Next, click the folder icon to the right of the Local Site Folder field and select the folder on your hard drive where you’ll store all of the files and subfolders in your site.

2 SETTING UP WEB SERVERS
Use the list on the left of the Site Setup dialog to access more advanced features and FTP settings. The new dialog now makes it possible to set up multiple servers for any site, a great way to manage both a testing server and a live server for the same website. Note: You’ll need to click the Add New Server icon (+, plus sign) at the bottom of the
Servers tab to open the FTP settings dialog.

3 OPTIONAL IMAGES FOLDER AND MORE
You’ll find many other options in the Site Setup dialog when you click the Advanced Settings tab, including the setting for an images folder in your local site folder. If you identify an images folder, and then insert an image into a page that is outside your root folder, Dreamweaver will copy the image into the folder you identify in this field. You can also use the Advanced Settings tab to specify a folder for spry assets, setup version control, cloaking, contribute, and other advanced features. When finished defining your settings click Save and you’re done.

4 THE WIDGET BROWSER
The Adobe Widget Browser makes it easy to add a growing list of widgets to your site. Most are created in jQuery or Ajax and you can use them to add slide shows, drop-down menus, and other interactive features to your webpage. To access the Widget Browser, select it from the Extend Dreamweaver menu (the gear icon) located in the Application Bar (Window>Application Bar) just below the Dreamweaver menu (just to the right of the Help menu on Windows). Note: When you click this option for the first time, read the resulting dialog and follow its prompts to download the Widget Browser from Adobe Labs.

5 DOWNLOADING WIDGETS
Click the Adobe Exchange link at the top left of the Widget Browser window to view all of the widgets available on the Adobe Exchange website. To download a widget, click to select it, and then enter a valid Adobe ID and password (if you don’t already have an Adobe ID, you can create one for free, simply click the Create Account button at the bottom of the Sign In dialog).

6 ADDING WIDGETS TO DREAMWEAVER
Most widgets are small so they download quickly and once a widget is downloaded to your hard drive, it opens in its own widget browser window automatically. Click the Add to My Widgets button at the bottom right corner of the Adobe Widget Browser window to add the widget to your local widget browser where it becomes available in Dreamweaver. Click the Go To My Widgets button in the Widget Added dialog to open the local widget browser and view the new widget in your local collection; or click on My Widgets, which is located at the top of the Adobe Widget Browser window.

7 INSERTING WIDGETS INTO PAGES
You can insert any widget that you’ve added to the Adobe Widget Browser into a page in Dreamweaver by clicking the Widget icon in Insert panel (Window>Insert), or by selecting Insert>Widget. Then, in the Widget dialog, select your desired widget from the Widget drop-down menu and click OK.

8 CUSTOMIZING WIDGETS
Each widget is different, but most come with default images or other content in place and need to be customized to feature your content. In this example, I replaced the default images that come with the LightBox widget by changing the image references in the HTML code to reference images in my main images folder.

9 ACTIVATING CSS INSPECT
Dreamweaver CS5 adds a new tool designed to help you identify how CSS is used in a webpage. The CSS Inspect option makes it easy to quickly view the CSS that defines the styles used in different parts of any webpage. To use CSS Inspect, click the Inspect button at the top of the Workspace and click the text link Switch Now (it appears just below the Inspect button). The Switch Now link automatically changes the Dreamweaver layout to best take advantage of the CSS Inspect feature.

10 USING CSS INSPECT
Once it’s activated, just roll your cursor around the screen to use CSS Inspect. As you do, Dreamweaver highlights content in the Design View area with color-coded highlighting that identifies each tag and associated style, as well as any margins and padding created by the style rule. Simultaneously, Dreamweaver identifies the corresponding code in Code View, and displays the corresponding style rules in the CSS Styles panel (which automatically pops-up when you use Switch Now). Click the Inspect button again to turn off CSS Inspect.

11 TESTING IN ADOBE BROWSERLAB
Adobe BrowserLab is designed to help you preview how your pages will display in a variety of Web browsers, even if you don’t have all of those browsers available on your local hard drive. In CS5, you’ll find a new Adobe BrowserLab panel you can use to preview any open page in your local site. To preview a page, save your page (File>Save) and click the Preview button in the Adobe BrowserLab panel (Window>Extensions>Adobe BrowserLab), or go to File>Preview in Browser>Adobe BrowserLab. You must have the page open in Dreamweaver and you must be connected to the Internet to use this feature.

12 USING ADOBE BROWSERLAB ONLINE
When you open a page in Adobe BrowserLab, you’re connected to the Adobe BrowserLab website and a screen shot of the page is automatically created using whatever browser was last selected in Adobe BrowserLab. In the top left corner of the Adobe BrowserLab website, click the View button and choose 2-up View menu to display the same page in two different browsers side by side, or Onion Skin to place two previews on top of the other; which makes it easier to identify subtle differences.

13 CHOOSING AVAILABLE BROWSERS
You can preview your pages in a variety of Web browsers in the Adobe BrowserLab website, including the notorious Internet Explorer 6.0. You can also use the Browser Sets option (located near the top of the Adobe BrowserLab webpage) to create a shortcut to any collection of browsers available on the site that you want to use for testing. Note: You can’t click on the links or test interactive features on your page with this option active because it only takes a screen shot of the page in each browser.

14 SPELL CHECK IN 37 LANGUAGES
As the Internet becomes increasingly multilingual it’s great to see Adobe upgrade the spell check features in Dreamweaver to handle 37 languages (previous versions supported less than half that many). To change the dictionary to any of the included languages, go to Dreamweaver (PC: Edit)>Preferences. In the General category, use the Spelling Dictionary menu to select any of the listed languages and click OK. Then choose Commands>Check Spelling to use spell check in the language you selected.

ALL IMAGES BY KEN RIDDICK

1 THE NEW, SIMPLER, SITE SETUP
In version CS5, Adobe streamlined the website setup process. When you first start working on any new or existing site in Dreamweaver, it’s important to begin by setting up the site and identifying your main website folder. The new Site Setup dialog (Site>New Site) requires two settings to get started. First, give your site a name (any name will do, it’s just for your reference). Next, click the folder icon to the right of the Local Site Folder field and select the folder on your hard drive where you’ll store all of the files and subfolders in your site.

2 SETTING UP WEB SERVERS
Use the list on the left of the Site Setup dialog to access more advanced features and FTP settings. The new dialog now makes it possible to set up multiple servers for any site, a great way to manage both a testing server and a live server for the same website. Note: You’ll need to click the Add New Server icon (+, plus sign) at the bottom of the
Servers tab to open the FTP settings dialog.

3 OPTIONAL IMAGES FOLDER AND MORE
You’ll find many other options in the Site Setup dialog when you click the Advanced Settings tab, including the setting for an images folder in your local site folder. If you identify an images folder, and then insert an image into a page that is outside your root folder, Dreamweaver will copy the image into the folder you identify in this field. You can also use the Advanced Settings tab to specify a folder for spry assets, setup version control, cloaking, contribute, and other advanced features. When finished defining your settings click Save and you’re done.

4 THE WIDGET BROWSER
The Adobe Widget Browser makes it easy to add a growing list of widgets to your site. Most are created in jQuery or Ajax and you can use them to add slide shows, drop-down menus, and other interactive features to your webpage. To access the Widget Browser, select it from the Extend Dreamweaver menu (the gear icon) located in the Application Bar (Window>Application Bar) just below the Dreamweaver menu (just to the right of the Help menu on Windows). Note: When you click this option for the first time, read the resulting dialog and follow its prompts to download the Widget Browser from Adobe Labs.

5 DOWNLOADING WIDGETS
Click the Adobe Exchange link at the top left of the Widget Browser window to view all of the widgets available on the Adobe Exchange website. To download a widget, click to select it, and then enter a valid Adobe ID and password (if you don’t already have an Adobe ID, you can create one for free, simply click the Create Account button at the bottom of the Sign In dialog).

6 ADDING WIDGETS TO DREAMWEAVER
Most widgets are small so they download quickly and once a widget is downloaded to your hard drive, it opens in its own widget browser window automatically. Click the Add to My Widgets button at the bottom right corner of the Adobe Widget Browser window to add the widget to your local widget browser where it becomes available in Dreamweaver. Click the Go To My Widgets button in the Widget Added dialog to open the local widget browser and view the new widget in your local collection; or click on My Widgets, which is located at the top of the Adobe Widget Browser window.

7 INSERTING WIDGETS INTO PAGES
You can insert any widget that you’ve added to the Adobe Widget Browser into a page in Dreamweaver by clicking the Widget icon in Insert panel (Window>Insert), or by selecting Insert>Widget. Then, in the Widget dialog, select your desired widget from the Widget drop-down menu and click OK.

8 CUSTOMIZING WIDGETS
Each widget is different, but most come with default images or other content in place and need to be customized to feature your content. In this example, I replaced the default images that come with the LightBox widget by changing the image references in the HTML code to reference images in my main images folder.

9 ACTIVATING CSS INSPECT
Dreamweaver CS5 adds a new tool designed to help you identify how CSS is used in a webpage. The CSS Inspect option makes it easy to quickly view the CSS that defines the styles used in different parts of any webpage. To use CSS Inspect, click the Inspect button at the top of the Workspace and click the text link Switch Now (it appears just below the Inspect button). The Switch Now link automatically changes the Dreamweaver layout to best take advantage of the CSS Inspect feature.

10 USING CSS INSPECT
Once it’s activated, just roll your cursor around the screen to use CSS Inspect. As you do, Dreamweaver highlights content in the Design View area with color-coded highlighting that identifies each tag and associated style, as well as any margins and padding created by the style rule. Simultaneously, Dreamweaver identifies the corresponding code in Code View, and displays the corresponding style rules in the CSS Styles panel (which automatically pops-up when you use Switch Now). Click the Inspect button again to turn off CSS Inspect.

11 TESTING IN ADOBE BROWSERLAB
Adobe BrowserLab is designed to help you preview how your pages will display in a variety of Web browsers, even if you don’t have all of those browsers available on your local hard drive. In CS5, you’ll find a new Adobe BrowserLab panel you can use to preview any open page in your local site. To preview a page, save your page (File>Save) and click the Preview button in the Adobe BrowserLab panel (Window>Extensions>Adobe BrowserLab), or go to File>Preview in Browser>Adobe BrowserLab. You must have the page open in Dreamweaver and you must be connected to the Internet to use this feature.

12 USING ADOBE BROWSERLAB ONLINE
When you open a page in Adobe BrowserLab, you’re connected to the Adobe BrowserLab website and a screen shot of the page is automatically created using whatever browser was last selected in Adobe BrowserLab. In the top left corner of the Adobe BrowserLab website, click the View button and choose 2-up View menu to display the same page in two different browsers side by side, or Onion Skin to place two previews on top of the other; which makes it easier to identify subtle differences.

13 CHOOSING AVAILABLE BROWSERS
You can preview your pages in a variety of Web browsers in the Adobe BrowserLab website, including the notorious Internet Explorer 6.0. You can also use the Browser Sets option (located near the top of the Adobe BrowserLab webpage) to create a shortcut to any collection of browsers available on the site that you want to use for testing. Note: You can’t click on the links or test interactive features on your page with this option active because it only takes a screen shot of the page in each browser.

14 SPELL CHECK IN 37 LANGUAGES
As the Internet becomes increasingly multilingual it’s great to see Adobe upgrade the spell check features in Dreamweaver to handle 37 languages (previous versions supported less than half that many). To change the dictionary to any of the included languages, go to Dreamweaver (PC: Edit)>Preferences. In the General category, use the Spelling Dictionary menu to select any of the listed languages and click OK. Then choose Commands>Check Spelling to use spell check in the language you selected.

1 BEST USES OF DREAMWEAVER TEMPLATES
Dreamweaver templates are great for portfolios, photo galleries, and other sites where a series of pages use many of the same elements. In our sample website, CaliforniaWildlifePhotography.com, the template includes common elements, such as the banner graphic and navigation links across the top and bottom of the pages.

To create templates for your webpages, you must already have a site set up using the Manage Site features in Dreamweaver to define a local root folder on your computer.

2 CREATE/OPEN A PAGE IN DREAMWEAVER
To create a new HTML template in Dreamweaver, choose File>New. In the New Document dialog, select Blank Template. For the Template Type, select HTML Template, choose a Layout, and click Create.

To save an existing page in Dreamweaver as a template, choose File>Save As Template. We’ll show you how to design HTML templates, but you can also save other kinds of templates (including PHP, JSP, or ASP.NET). Give each template a special name to identify it later and to help organize a site that uses many templates. If you expect to use many different templates in the same site, a description can be useful.

3 VIEW YOUR TEMPLATES FOLDER
Dreamweaver stores all of the templates you create in a folder called Templates, which it creates for you when you save your first template. The Templates folder is saved at the top level of your site folder and you shouldn’t move or rename this folder. If you want to view your templates, choose Window>Files and then open the Templates folder in the File panel.

4 SELECT AREA TO MAKE EDITABLE
Before you can use a template, you need to designate editable regions—areas that you’ll change on individual pages created from the template. Say you want to change the photo and caption on each gallery page, you’d make those sections of the template page editable. Start by clicking on the edge of a region to select it—choose an HTML tag (div tags work best) that surrounds the contents you want to make editable.

5 INSERT AN EDITABLE REGION
After you select an area of the page you want to make an editable region, such as a Div tag, choose Insert>Template Objects>Editable Region to add the necessary code in Dreamweaver. Remember, you don’t want to make everything editable, just the areas you’ll change; for example, the list of navigation links at the top of this template should not be editable regions, because then you’ll be able to update those areas on all of the pages that use this template at a later time by simply updating the template (see Step 9).

6 NAME EDITABLE REGION
Each time you insert an editable region into your page, you need to name it. You can name editable regions anything you like, just don’t use spaces or special characters. Each editable region in a template must have a unique name. Insert a name for your new region in the New Editable Region dialog and click OK. You can identify editable regions in the template, and the pages created from the template, by the blue outline and tabs. If you don’t see these features in the Dreamweaver workspace, choose View>Visual Aids>Invisible Elements. After you save your template, you can always return later to add more editable regions.

7 CREATE A NEW PAGE FROM A TEMPLATE
To create a new page from a template, choose File>New. Choose Page From Template in the New Document dialog, choose the name of the site you’re working on from the Site list, and select a template for your site. Use the preview to make sure you select the correct template. This is easy if you’re only working on one site with one template, but as your site gets larger and more complex, you need to make sure you’re using the correct template when you create new pages. After you’ve selected all of the Preferences you want, click Create to generate a new page from the template.

8 EDIT A PAGE CREATED FROM A TEMPLATE
After you’ve created a page from a template, you can edit it as you would any other page, inserting images, text, and multimedia into the editable regions. Just remember, you can only change the areas of the page that are editable. If you decide you want to change something that’s not in an editable region, you’ll need to open the DWT template file and make changes to locked areas in that file. When you save a page that you’ve created from a template, give it a new name with an HTML (or other) extension, just as you’d save any other page you create in Dreamweaver.

9 EDIT THE TEMPLATE
The greatest advantage of templates is when you want to edit elements you use throughout your site (such as the navigation links at the top of these pages), you can go back and make that change once to the template and it’s automatically changed on every page created from the template. For instance, if I added a new gallery link to the template, it automatically updates all of the pages with the new link.

10 SAVE CHANGES TO ALL PAGES
When you save a template with changes (File>Save), Dreamweaver opens an Update Template Files dialog. Dreamweaver gives you the option to update all of the pages created from the template, or not. I usually click Update, because it’s a big advantage and timesaver to be able to update all of those pages automatically. After clicking Update, an Update Pages dialog appears. Click Close and all of your pages will be updated.

1 CREATE A DESIGN IN PHOTOSHOP (IF YOU PREFER)
If you prefer to create your designs in Photoshop (or any other graphics program), and then convert the designs to HTML in Dreamweaver later, you can follow that same workflow when designing email. Just keep in mind that simpler is better when it comes to email messages. Set the width of your designs to no more than 600 pixels wide (550 is even safer), and limit the use of images, which won’t display at all in some email programs.

2 OPTIMIZE IMAGES FOR FAST DOWNLOAD
Before you insert images into your email designs, you’ll want to optimize them so they download quickly and save them in a Web-safe format, such as JPEG, PNG, or GIF. The Save for Web dialog in Photoshop (File>Save for Web & Devices) is an ideal way to prepare your images for email messages, as well as the Web. When designing email messages, you want to be even more ruthless about limiting file size because many email programs limit the total size of messages and most people have even less patience for downloading email than they do for slow webpages.

3 CREATE BLANK PAGE IN DREAMWEAVER
Once you’re ready to start designing your HTML email, open Dreamweaver and choose File>New. In the New Document dialog, select HTML for Page Type, for Layout, and click Create to create a new, blank page. Don’t use any of the predesigned CSS layouts (those are great for webpages, but not for email). And, you don’t need to bother with the site setup process because you won’t be using any of the site management or link features in Dreamweaver.

4 INSERT A GOOD OLD-FASHIONED TABLE
Although HTML tables are no longer recommended for creating page layouts on the Web (except when you’re formatting tabular data), tables are the best option when you’re designing email messages. In Dreamweaver, choose Insert>Table and then enter the number of Rows and Columns you’ll need to create your layout. Set the Border Thickness to 0 to make the borders invisible, increase the Cell Padding and Cell Spacing a little to create margins, and click OK. (Don’t worry about getting it perfect; you can always adjust these settings later using the Property inspector.)

5 MERGE OR SPLIT CELLS TO ADJUST LAYOUT
The design for this example has a two-column layout, but we’re going to use an image that spans the width of both columns at the top of the design. To accommodate the image, we need to merge the two cells in the top row. To merge cells, click the inside of one cell and drag over to the next to select them, then click the tiny Merge button at the bottom left of the Property inspector. To split a cell in two, click to select the cell and click the Split button, located just to the right of the Merge button.

6 IMAGES MUST BE ONLINE TO APPEAR IN EMAIL
For images to display in an email message on someone else’s computer, they have to be online and you must use the full URL to the image in your HTML code. To manage this, you can use the image features in any bulk email service (such as those listed at the end of this column) or you can upload your images to any site on the Web (even Flickr). To find the full URL of an image on any webpage, Right-click and choose Copy Image Address (PC: Properties), then copy the URL into the image source code, or replace the image source (the Src field) in the Property inspector.

7 USE ALT TEXT AND REMOVE HEIGHT AND WIDTH
When you insert an image using the image features in Dreamweaver, the program automatically identifies and enters the height and width, but many email programs don’t display images, so including the height and width will force a blank space in the page. Removing the height and width helps make the page look better if images are not visible. Similarly, including Alternative Text (use the Alt field in the Property inspector) will make sure that your message is visible as text even if your images aren’t displayed.

8 ADD TEXT AS YOU WOULD TO ANY WEBPAGE
To add text to your design, you can simply type the text into the page or use copy-and-paste as you would with any other webpage. If you use copy-and-paste from Microsoft Word, make sure you use the Paste Special option in Dreamweaver to automatically remove any extraneous code from Word. To do so, choose Edit>Paste Special and choose the Text with Structure option to preserve basic formatting without all the extra Word-specific code.

9 ADJUST TABLE SETTINGS
To adjust the width or height of cells in Dreamweaver, you can simply click-and-drag the table border between columns or rows (as shown). Once you select an entire table (click on the outside edge of the table), the table properties appear in the Property inspector at the bottom of Dreamweaver where you can adjust other options, such as border size and cell padding. If the contents of two columns in a table aren’t exactly the same, they can appear out of alignment. To fix this, select both cells, go to the Property inspector, and set the Vertical Alignment drop-down menu to Top.

10 DON’T USE JAVASCRIPT, VIDEO, OR MULTIMEDIA
Complete your design by adding text and inserting additional images, but stay away from interactive features, such as drop-down menus or scrolling windows, which require JavaScript or AJAX. These features are popular on webpages, but they won’t work in email programs, and worse, most spam filters are set up to scan emails for scripts because they may contain viruses. Thus, if you use any JavaScript in an email, you’re almost guaranteed the message will get caught in a spam filter.

11 USE INLINE STYLES
Although some email programs provide basic support for CSS, most don’t support styles, even internal styles sheets (those saved in the head area of the document). If you want to add formatting to your text or images, use inline styles, which are included with the HTML code within a page. Here’s an example of an inline style that will change the color and remove the underline from a link: Digital Family.com. Note inline styles must be repeated each time you use a tag, part of why they’re not recommended for webpage designs.

12 INCLUDE CONTACT INFO AND UNSUBSCRIBE LINK
Because spam is such a problem on the Internet, there are strict rules about sending bulk email messages. Two of the most important are: you must make it easy to unsubscribe and you must include your street address (or at least a P.O. Box). Most designers include an unsubscribe link and contact information at the bottom of the email. In the table above, two cells were merged again to create a space that spans both columns for contact info, and style information was added to the table data tag to center the text and make it smaller.

13 USE A BULK EMAIL SERVICE
Unfortunately, you can’t just copy-and-paste the HTML from Dreamweaver into Outlook, Gmail, or any of the other most popular email programs. Thus, to use your wonderfully designed email message, you’ll either have to have administrative access to an email server, or use a bulk email service. The most popular email services are: Constant Contact (www.constantcontact.com), iContact (www.icontact.com), Benchmark (www.benchmarkemail.com), and StreamSend (www.streamsend.com). Charges start at $10 to $15 per month and all four of these services offer email templates, as well as the ability to use your own designs for your messages.

14 TEST IN MULTIPLE EMAIL PROGRAMS
No matter how you send your email, it’s always a good idea to test your designs in multiple email programs. It’s easy (and free) to set up accounts with Gmail, Hotmail, Yahoo!, and AOL. If possible, I recommend you also test with the popular Outlook or Outlook Express (which comes free with all Windows computers), as well as Thunderbird. If you want to test your designs in all of the most popular email programs at once, consider using the service PreviewMyEmail.com (prices start at $9 for three email tests).

1 CREATE/OPEN A NEW PAGE IN DREAMWEAVER
I built this website to showcase my friend Jasper Johal’s photography. In addition to displaying galleries of his photos, his bio, and contact information, he also wanted to sell a few prints and calendars. Thanks to Google Checkout, all I needed was to set up a Google Account for him, then copy-and-paste a little code into a page In Dreamweaver. In this tutorial, you’ll see how I used Google to help him sell his beautiful photographs.

2 SET UP AN ACCOUNT
First, you’ll need to sign up for an account. I chose Google Checkout (http://checkout.google.com) because I like the interface, but PayPal offers a similar service, and supports transactions in more countries than Google. Both offer services that are ideally suited for websites where you want to sell only a handful of products and you don’t want to handle credit card processing yourself. With PayPal and Google you get the shopping-cart features and transaction processing in one easy package. (And did I mention no up-front cost?)

3 LOG INTO GOOGLE CHECKOUT
Log into your Google Checkout account with the email address and password you used to set up the account. Once you’re logged in, click on the Tools tab at the top of the screen to access the Buy Now Buttons (great if you only sell one item) and Checkout Cart (best for multiple products). You also find links here to Google’s invoicing services and details about how to integrate Google Checkout with third-party shopping carts, such as Zen Cart, if you want more advanced features or need to integrate sales with some kind of inventory or special tracking service.

4 SET UP A CHECKOUT CART
If you want to sell more than one item, or offer different sizes or other options, your best choice is the Checkout Cart. When you click on the Checkout Cart link on the left, you open Google’s Checkout Wizard, which makes it easy for you to create the code you need to add a product listing to your shopping cart. You can create a Simple product listing with one name and price, or you can create new product listings With Multiple Options and Prices based on size, color, quantity, etc.

5 ENTER PRODUCT DESCRIPTION
Enter a description of your product by filling in the form fields. As you see in our example, we’re setting up a shopping-cart item for a set of prints with two options: Option 1 to buy one set; and Option 2 to buy three sets at a special price. To create a new product listing, just fill out the form with the text and pricing you want, and Google automatically creates the code that lets you add these products to your site.

6 CREATE BUTTON CODE
When you get the description the way you want it, click the checkbox next to Yes, I Have Configured My Account to Accept Unsigned Shopping Carts (see next step for details). If you haven’t configured your account yet, you can come back and do it later—just make sure to check the box. To generate the code you need to add to your webpage, click the Create Button Code button and skip ahead to Step 8 to continue. If you prefer to take care of configuration first, just follow along.

7 SETTING UP TO ACCEPT UNSIGNED CARTS
Because Google Checkout Shopping Cart works entirely in the Web browser, it’s possible for a site visitor to alter the pricing in Google checkout when they place an order. Unfortunately, there’s no way for Google to protect the secret key needed to sign a shopping cart. To get around this limitation, you can allow the shopping cart to work without being signed; but you’ll have to change that setting first. To accept unsigned carts, click the Settings tab and then click Integration. Remove the check in the box beside My Company Will Only Post Digitally Signed Carts, and then click Save.

8 COPY CODE
If you create a Buy Now button, you can use one simple snippet of code to place the button anywhere in a webpage. When you use the Checkout Cart option, Google generates two pieces of code, one that should be copied into the page where you want the button to appear and the other—the code that creates the cart itself—should be pasted into the bottom of the page, as you’ll see in Step 11.

9 PASTE CODE INTO DREAMWEAVER
Because you’re copying code from Google’s site, you need to paste it into the code in Dreamweaver. A great way to do that is to use Split view by clicking on the Split button at the top of the workspace. Split view is great because you can see how the page will look in Design view as you’re working in the code, which makes it easier to find your place if you’re not familiar with XHTML or other Web technologies.

10 COPY SECOND PART OF CODE
Once you have the button code where you want it, return to the browser window and copy the second string of code. Tip: You can use Right-click to copy code from the Google Checkout page.

11 PASTE CART CODE AT BOTTOM OF PAGE
The second piece of code goes at the very bottom of the page, and you only need to add it to the page once, even if you have multiple products on the same page. Again, just use copy-and-paste to select the code and insert it into Dreamweaver. As Google instructs, the best place for the shopping-cart code is just above the close body tag ().

12 PREVIEW TO SEE THE CART IN ACTION
To test your product listings and Add to Cart buttons, preview your page in a Web browser by choosing File>Preview in Browser and then selecting any browser you have associated with Dreamweaver. (In Step 9, notice that the Add to Cart button doesn’t show up in Design view, but it does appear when you preview the page in a Web browser.) When previewing this example, I decided that I should include longer descriptions in the drop-down lists because the product title only appears in the shopping cart, not the product listing.

13 EDIT PRODUCT LISTING
Although you can edit a product as you’re creating it in Google, if you want to go back later to change a product listing, you have to recreate it. The inability to save listings is one of the biggest limitations of Google Checkout, IMHO. Although it would be more efficient if you could save your product information, you don’t have to start completely from scratch. You can copy your price and other information from the code in Dreamweaver and paste it back into Google to save some typing. If all you want to do is edit the name of product, you can change the text in Code view in Dreamweaver.

14 TWEAKING FORMAT
Experiment with formatting around the code to align the Add to Cart button to the right of the drop-down menu as shown here. (Tip: You can do this with an HTML Table or by creating styles for divs around the code.) Be careful, however, when you edit around Google’s code: You can split the button from the drop-down but you need to keep all of the code intact. And remember, if you make a mistake and the page doesn’t display properly, you can always go back and copy-and-paste the code in again.

ALL PHOTOS BY JASPER JOHAL UNLESS OTHERWISE NOTED

The best way to make your site search-engine friendly is to design your site so that it’s easy for search engines to ”read” your pages—doing things like adding alternative text behind your images and using the meta description tag. In this tutorial, you’ll find a few search engine optimization (SEO) tips and discover the features in Dreamweaver that will best serve your SEO efforts.

1 NEVER LEAVE A PAGE UNTITLED
When you create a new page, Dreamweaver automatically adds the word “Untitled” at the top of every page, but don’t ever leave it that way. Although the title text doesn’t appear in the body of your webpage, it’s highly valued by search engines (so be sure to include your best keywords). Title text also appears at the very top of the browser window and that’s the text that’s saved when someone bookmarks your site. It’s easy to change a title in Dreamweaver; just click in the Title field at the top of the workspace and type your own text.

Click here to see the rest of the tutorial

1 NEVER LEAVE A PAGE UNTITLED
When you create a new page, Dreamweaver automatically adds the word “Untitled” at the top of every page, but don’t ever leave it that way. Although the title text doesn’t appear in the body of your webpage, it’s highly valued by search engines (so be sure to include your best keywords). Title text also appears at the very top of the browser window and that’s the text that’s saved when someone bookmarks your site. It’s easy to change a title in Dreamweaver; just click in the Title field at the top of the workspace and type your own text.

2 USE ALTERNATIVE TEXT BEHIND IMAGES
The HTML image attribute for alternative text (alt text) lets you include a text description with your images. The spiders and bots that search engines use to crawl your site’s content can’t see words saved in an image, but they can read alt text in the code. When you insert an image, Dreamweaver prompts you to add Alternate Text in the Image Tag Accessibility Attributes dialog (unless you’ve turned it off in Preferences). You can also add alt text by clicking to select any image and then entering text in the Alt field in the Property inspector.

©ISTOCKPHOTO/EKATERINA MONAKHOVA

3 ADD A META DESCRIPTION
The meta description tag appears in the head area at the very top of your HTML code. Humans never see this text because it’s not displayed in a webpage, but meta descriptions are often used in search engine results and they can make a big difference in whether someone clicks on your site or not. To add this text in Dreamweaver, choose Insert>HTML>Head Tags>Description and then type a description. You can add different descriptions to any or all of the pages in your site. Although search engines vary, most will only display the first 250 characters.

©ISTOCKPHOTO/JOSE ELIAS

4 INCLUDE META KEYWORDS
Many search engines ignore the contents of the meta keyword tag because it’s been so badly abused by Web designers’ trying to trick search engines with unrelated or misleading terms, but adding keywords can’t hurt your pages (as long as they match the content), and it’s good practice to include your most important keywords on every page. While you’re adding the meta description tag, it’s easy to throw in a few keywords with the meta keyword tag. The two dialogs are accessible from the same menu in Dreamweaver, just choose Insert>HTML>Head Tags>Keywords.

5 USE HEADING TAGS TO SHOW HIERARCHY
Heading tags—HTML tags h1 through h6—are designed to format headlines with graduated levels of big, bold text. Although there are many ways to style text so that it stands out in a webpage, heading tags are considered especially valuable because they help identify the importance of information on a page using a clearly defined hierarchy. Format your most important headline with the h1 tag, less important text with the h2 tag, and so on. Although there’s no guarantee this will improve your rankings, it’s widely believed that text formatted in heading tags gets special attention from search engines.

6 STYLE HEADING TAGS
If you’re not happy with the bold, Times Roman style of the heading tags, you can use CSS to change their appearance. By creating CSS Rules using the Tag selector, you can change the font, color, size, and other formatting options of any or all of the h1–h6 heading tags. To do so, create a new style (Format>CSS Styles>New), choose Tag as the Selector Type, and then select any heading tag from the Selector Name drop-down list. Define the style you want and save it into your stylesheet. Once you do, any text formatted with that heading tag will display with the formatting rules defined in that style.

7 USE COMPOUND STYLES FOR HEADING TAGS
You can create different styles for the same heading tags using compound styles. For instance, you can create a style for the h1 tag where the formatting changes when it appears in a sidebar so that it’s different from text formatted with the h1 tag when it appears in the main content area. For example, to create a style for the h1 tag to be used on an area of the page already styled by the ID #sidebar, you’d create a compound style that looks like this: #sidebar h1.

8 ATTRACT THE RIGHT LINKS
Search engines view links to your site as a vote of confidence. But it’s not just the link that counts; it’s also the text in the link tag. If the link to your site includes keywords, it can improve your ranking even more. Say I were to link to the fictional pet site featured in this tutorial, I’d serve them better by including keywords, such as pet grooming and boarding, in the link text with their domain name. Ask your friends to do the same when they link to you.

9 HARNESS THE POWER OF INTERNAL LINKS
Most search engines also put higher value on keywords that appear in internal links on your own website. When you link from one page in your site to another, use words that have relevance to your content and avoid wasted phrases like “click here.” If the pet site puts the words, “Pet Grooming Services” in a link, most search engines will recognize that those words have special value. Although this alone may not make a big difference, the combined effect of many small changes like this can add up to valuable improvements in your search status.

©ISTOCKPHOTO/DIANE DIEDERICH

10 CREATE A NAVIGATION BAR OF KEYWORD LINKS
The more times the same keywords are linked to the same page, the more attractive it becomes to most search engines. As a result, one key to search engine success is to pay special attention to the way you create navigation links—the links to the most important pages of your site. Make sure to include good keywords in the links and use text, not images, for the links. If you must use graphic buttons to achieve the design you want, repeat navigation links by adding a row of text links to the bottom or side of every page.

11 CREATE DESTINATION PAGES FOR POPULAR TOPICS
Many visitors who discover your site through search engines will enter through an internal page in your site because it matches a specific search string better than the front page of your site. With this in mind, many Web designers create “destination” or “landing” pages optimized for popular keywords and designed to attract people searching for those terms. Once they find the content on those pages, you can then lead them into the rest of the website.

JANINE WARNER

12 USE TEMPLATES TO REPEAT KEY ELEMENTS
When creating a website in Dreamweaver—even if the site only has a few pages—using the Web templates in Dreamweaver can make it easier to repeat (and update) key elements, such as navigation bars, and the alt text behind commonly used images, such as banners. You can create templates in Dreamweaver by saving any page as a DWT file and then create and update the rest of the pages in your site using that template. (You can find instructions for creating templates in Dreamweaver at www.layersmagazine.com/category/dreamweaver.)

13 MAKE EXISTING SITES SEO FRIENDLY
Considering the best options for SEO from the start is best, but if you’ve already built your site in Dreamweaver, you can always go back and make adjustments. Most search engines, such as Google, visit websites regularly (it can vary from a daily occurrence to more than a month between visits depending on your site’s popularity and how often you refresh the content). If you’re not familiar with Google Webmaster Tools, the many reports, charts, and graphs on this page make it a great place to learn more about how your site ranks and how to make it better.