-August 2019+
SMTWTFS
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567
  • RSS
  • Add To My MSN
  • Add To Windows Live
  • Add To My Yahoo
  • Add To Google

Statistics

  • Entries (4)
  • Comments (0)

Archives


Insert Google Adsense with Dreamweaver 

Friday, July 1, 2011 10:30:00 AM

Insert Google Ads with Dreamweaver

Dreamweaver CS3 makes it easy to create beautiful webpages without ever having to look at the code behind your designs. But even though you don’t have to learn HTML, every once in a while knowing how to work with the code can come in handy. In this tutorial, you’ll find instructions for using Dreamweaver’s code-editing features to insert Google ads and other features.

1 ADDING GOOGLE ADS
We’ll use Google AdSense as the main example in this tutorial but the process is similar for nearly all sites that offer features you can include on your pages. You generally begin by creating an account. In the case of Google AdSense, once you’re approved (most websites are), you simply log in to create the code needed to display Google ads for your pages. Once you’ve added the code, Google delivers ads to your site based on the content on your pages. If your visitors click on those ads, Google pays you a small fee.

2 CHOOSE AD SIZES, COLORS, ETC.
As you go through the Google AdSense setup process, you can select from a variety of advertising options, including the size and colors you want for your ads. You can also create Channels to better organize and track ads on different parts of your site.

3 GENERATE GOOGLE ADSENSE CODE
Once you’ve completed the ad setup process and specified all of the options for your ads, Google generates a unit of code in JavaScript that you can add to your webpages. You’ll need to copy all of this code, from the opening tag to the closing tag, so that you can paste the code in its entirety into the pages on your site.

4 USE CODE VIEW IN DREAMWEAVER
Now, open the page where you want to insert your ad code. Click either the Split view or Code view buttons (located in the upper-left corner of the workspace) to display the code behind the page. The advantage of using Split view (shown here) is that you can see Design and Code views at the same time. Tip: Highlight any element in Design view, such as the headline, “Saving and Editing Family Photos,” on this page, and Dreamweaver automatically highlights the corresponding code so that you can find your place more easily.

5 INSERT GOOGLE ADSENSE CODE
Find the exact place on your webpage where you want to insert the Google ads and click to place the cursor in that spot in the code. Note: If you paste the JavaScript into Design view, it won’t work. Choose Edit>Paste to insert the code from the website into your code. Again, make sure that you have all of the code including the opening and closing tags. If you ever want to move or remove this code, you’ll need to select all of this code.

6 VIEWING GOOGLE ADS
One of the most confusing aspects of working with Google AdSense in Dreamweaver is that although you can see the code in Code view after you paste it into your page, you won’t see the ads in Design view. The only indicator that you’ve successfully added your Google ads will be a little blank space added to your design.

7 PREVIEWING ADS IN A BROWSER
To view your ads in your pages, you’ll need to preview the page in a Web browser: Click the Preview button at the top of the workspace or choose File>Preview in Browser. As long as you’re connected to the Internet, the Google ads should automatically appear wherever you added the code to your page. Note: Google ads can take up to 10 minutes to become activated before they’ll display.

8 ADDING MORE ADS
You can add the same AdSense code to as many pages in your site as you want. You can create a variety of ads to include in different places in your site by repeating the Google AdSense setup process and choosing different options before generating a new snippet of code. Tip: When you open Dreamweaver to add your code, leave your Web browser open so that you can easily return to Google to make changes or copy the code again, if necessary. You can switch between two programs on your computer by pressing Command-Tab (PC: Alt-Tab).

9 WORKING WITH CODE IN TEMPLATES
If you use Dreamweaver’s Dynamic Web Templates (a great way to save time and create more consistent designs), you can add Google AdSense code to a template and automatically insert ads into all of the pages created from the template at once. To do so, open the template file, choose Split or Code view, and paste the code into the template file just as you would into any other HTML page. When you save the template, choose the Update option to automatically insert the ads into all corresponding pages.

10 WORKING WITH FLICKR AND OTHER SITES
Although the first nine steps in this tutorial are specific to Google AdSense, the process of inserting code into a page in Dreamweaver works the same whether you’re using AdSense or any of the myriad other online advertising options, such as www.CommissionJunction.com and www.Linkshare.com. You can also use this process to add widgets or images from sites such as www.Flickr.com.

11 ADDING INVISIBLE FEATURES
Some of the code you may want to add from sites like Google won’t appear in your webpages in a browser, making it a little trickier to add. For instance, you can use Google Analytics to track your Web traffic (with better detail than you’ll get from most Web hosts). Just insert code in a way that’s similar to the way you do it with AdSense but because the code won’t be visible on the page, save it somewhere that makes it easy to find, such as just above the body tag at the bottom of your pages.

12 CHANGING CODE DISPLAY OPTIONS
If you spend a lot of time working in Code or Split view, you may want to take a minute to adjust the code preferences in Dreamweaver. Choose Dreamweaver>Preferences (PC: Edit>Preferences) and then specify your preferred options in these Categories: Code Coloring, Code Format, and Code Hints. Also note that the Code Rewriting category provides options for how (or if) Dreamweaver will alter any code to your pages.

13 UPLOAD YOUR PAGES
Although you should be able to test most third-party code, such as Google AdSense, by previewing your pages on your local computer, remember that your new features won’t become visible on your website until you’ve uploaded the pages to your Web server.

Use CSS to style the list 

Friday, July 1, 2011 10:25:00 AM

Use CSS to Style Your Lists in Dreamweaver CS3/4

There are many good reasons to format text with the unordered list tag, but that doesn’t mean you have to settle for the vanilla bulleted-list style you get from plain old HTML. Add a little CSS to your lists and you can create accessible, versatile designs that fit the look and feel of any website—and follow Web standards. Here are a few CSS tricks for formatting lists. (This tutorial works for both Adobe Dreamweaver CS3 and CS4.)

1 [START WITH A SIMPLE BULLETED LIST]
Enter the text you want to use in your list and make sure to separate each item with a paragraph

tag, not a break
tag. The Unordered List feature (Format>List>Unordered List) in Dreamweaver only works properly if it’s applied to elements separated by paragraph tags. If you try to format text with the unordered list and the bullets don’t appear before every item, it’s probably because they weren’t separated by paragraph tags. To fix the list, just delete any space between list items and press the Return or Enter key before each item in the list. Next, convert your list items to links (Modify>Make Link).

Dreamweaver Lists

2 [CREATE NEW STYLE FOR LIST ITEMS]
To create a new style that will alter the look of each list item, you’ll want to create a style for the

  • tag. Choose Format>CSS Styles>New to create a new CSS rule. Under Selector Type, choose Tag and then select li from the drop-down list to the right of the Selector Name field (or type li into the field). Press OK to continue to the CSS Rule Definition dialog.

    Dreamweaver Lists

    3 [CHANGE THE BULLET STYLE]
    In the CSS Rule Definition dialog, choose the List Category on the left. Here you can change the style of the bullet by selecting any of the options in the List-Style-Type drop-down menu. If you prefer, you can replace the bullet with your own image by clicking on the Browse button next to the List-Style-Image field and selecting the image you want to use in place of the bullets. You can also remove the bullet completely by choosing None (as we did in this example). Click OK.

    Dreamweaver Lists

    4 [STYLE LINKS IN AN UNORDERED LIST]
    You can alter the way links display in an unordered list in much the same way you’d alter any other links on the page, and you can use compound styles (by choosing Compound for the Selector Type in the New CSS Rule dialog) to create link styles that only affect links within an unordered list. For instance, you can create a style named ul a, which will only affect the link tag when it appears within the unordered list tag. So you could remove the underline from all links that appear within unordered lists by choosing the Type category in the CSS Rule Definition dialog, and under Text-Decoration, click on the None checkbox.

    Dreamweaver Lists

    5 [ADD SPACE BETWEEN BULLETED ITEMS]
    The default HTML style for unordered lists places list items too close together for most designers, but it’s easy to add a little breathing room. Just create a new style for the li tag (as you did in Step 2), or edit your existing li style by double-clicking on the style name in the CSS Styles panel. In the CSS Rule Definition dialog, choose the Box Category and use the Margin and Padding settings to increase the space around the list items. In our example, we added 10 pixels of space to the Bottom of each list item.

    Dreamweaver Lists

    6 [USE COLOR AND PADDING FOR BUTTONS]
    You can create colored boxes around your links by defining a CSS rule for the active link, or a:link tag, that combines a Background-Color (such as the light blue shown here) with a Width (ours is set to 100 px) and Padding (5 pixels Top and Bottom and 10 pixels on the Left) in the Box Category. And here’s the trick that makes it work: In the Block Category, you need to set the Display option to Block. In this case, we used a compound style ul a:link so that links will only display this way if they’re contained within an unordered list.

    Dreamweaver Lists

    7 [DEFINE DIFFERENT LINK STYLES]
    A great way to create a rollover effect is to create a second link style for the hover link state, a:hover. And here’s another trick: Duplicate the a:link style you created in Step 6 by Right-clicking (PC: Option-clicking) on the style name, then choose Duplicate, and name the new style ul a:hover. You want all of the elements of the style to be the same (same Padding, Width, etc.) except, in this case, for the background color (see next step). Starting with a copy of the a:link style means all you need to change are the formatting options you want for the hover style.

    Dreamweaver Lists

    8 [DEFINE THE A:HOVER STYLE]
    This time, we changed the Background-Color in the a:hover style to yellow so that when a visitor to the site rolls their cursor over a link, the only effect will be that the background color changes from light blue to yellow. For more complex rollover effects, use different background images in the Active link and Hover link styles. You can also change the font color, font face, and other formatting options to alter the text style.

    Dreamweaver Lists

    9 [PREVIEW TO TEST ROLLOVER EFFECTS]
    In order to test any styles you create that are triggered by a rollover, you’ll need to preview the page in a Web browser (File>Preview in Browser). As you can see here, when a cursor rolls over the light blue links, they turn yellow, because that’s the background color we defined in the a:hover style.

    Dreamweaver Lists

    10 [REMOVE INDENTING BY STYLING UL TAG]
    You can increase, decrease, or remove the amount of indenting by defining a style rule for the ul tag. Remember, the HTML for an unordered list includes the

      and close

    tag, which surrounds the entire list, and the

  • tag, which sets off each list item. Thus, if you define a style for the ul tag (just as you did for the li tag in Step 2), you can use the Box category to set the Padding to 0 and the default indenting will be removed. Similarly, you can add indenting by adding Padding to the Left.

    Dreamweaver Lists

    11 [USE BORDERS TO CREATE DIVIDING LINES]
    To add a line between each list item, define or edit the li tag and set only the Bottom options in the Border Category. Similarly, you can use borders only on the Left, Right, or Top to create dividing lines. Make sure that Margins and Padding in the Box Category are set to 0 to remove any space between the list items, and set the Width to 110 px (as shown here).

    Dreamweaver Lists

    12 [TURN LIST FROM VERTICAL TO HORIZONTAL]
    The trick to making an unordered list display horizontally across a page is to create or edit a style for the list item

  • tag and in the Block Category of the CSS Rule Definition, set Display to Inline. Note: If you’ve set Display to Block in the style for the link tag, you’ll need to remove the block setting (i.e., the Display field should be empty) for the links to appear horizontally. You can alter the space between links, background, etc. by changing the Padding and color settings.

    Dreamweaver Lists

    13 [USE COMPOUND STYLES]
    If you want to use different formatting options for lists of links on the same page, consider surrounding each list with a div tag that includes an ID style, and then use that ID style as part of the compound list. For example, you could use a div with ID style #navbar around your main navigation links and then a div with an ID style #sidebar around another list you want formatted differently on the page. In this case, you’d create compound styles, such as #navbar ul and #sidebar ul, respectively.

    Dreamweaver Lists

Add Depth and Dimension in Dreamweaver CS4 

Friday, July 1, 2011 10:24:00 AM

Add Depth and Dimension in Dreamweaver CS4

In the early days of the Web you could only use background images that filled the entire screen or tiled down and across the page. Thanks to CSS, now you can control how background images appear by creating CSS rules that define alignment and positioning. In this tutorial, we’ll explore a few examples of how you can use backgrounds with CSS to add depth and dimension to your pages. (Note: This tutorial works for both Adobe Dreamweaver CS3 and CS4.)

1 [COMBINE BACKGROUND IMAGES TO ADD DEPTH]
Background images are a great way to add decorative elements—such as textured backdrops, gradients, and borders—to your webpages. You can create rich, seemingly layered, designs by combining background images in the body, as well as div and other tags. Keep in mind, these aren’t really layers like you’d find in Photoshop, and I’m not using the Layer tag that was included in earlier versions of Dreamweaver. What you see in this example is a background image positioned in a div tag with an ID style that centers it on the page.

Dreamweaver

2 [CENTER A BACKGROUND IMAGE ON A PAGE]
You can still add a background image to the entire body of a webpage, but don’t insert it into the HTML body tag where it will just repeat and tile down the screen. Instead, create a new CSS style for the body tag and use the CSS Rule Definition dialog to choose alignment options. Using CSS, you can control whether the image repeats on the x or y axis (across or down the page), or prevent the image from repeating at all. You can also center your background in the middle of the page.

Dreamweaver

3 [BACKGROUND COLORS WITH BACKGROUND IMAGES]
You can set background colors as well as a background images and combine them to create seemingly layered designs. In this example, the background color of the page was set to a dark gray and then an 1100 pixel-wide image was inserted using a CSS body tag style to center it on the page. On a wide monitor, you can see the color behind the background image, but on a smaller screen the background color may be cut off. Designing a page with backgrounds this way helps create the illusion that the design fills the screen on big monitors.

Dreamweaver

4 [ADD BACKGROUND IMAGE TO A CONTAINER DIV]
One of the advantages of the CSS Box model, and the practice of building a page with div tags, is that you can add multiple background images to a page by placing them in different divs on the page. Here, adding to the last step, a div tag has been inserted with an ID style #container that’s set to 950 pixels in width. It was centered by setting the Left and Right Margins to Auto, and then a background image was inserted that’s also 950 pixels wide. The height of the #container div is determined by its content.

Dreamweaver

5 [LONG BACKGROUNDS FOR EXPANDABLE CONTENT]
If you’ve done much CSS development, you’ve probably learned that it’s best not to specify a height on any div or other tag that will contain text. That’s because most browsers make it possible for users to enlarge or reduce text and you want to ensure that the page layout will adjust to the content and not cut off any text. With that in mind, if you’re using a background image, it’s good practice to make sure the background is longer than your content so that as content expands down the page, the background will still cover the full area.

Dreamweaver

6 [REPEAT BACKGROUND TO FILL PAGE]
Of course you can still have a background that fills an entire page by repeating, or tiling, across and down the page. With CSS, you can use repeating images in sidebars, banners, footers, or any other area of the page, as well. Experiment with the effects of using a small image that repeats. If you smooth or match the edges, you can get rid of the edges you see in this example and create a seamless effect that looks like one big image. Here the repeating image fills the entire page because it’s included in the body tag style.

Dreamweaver

7 [REPEAT BACKGROUNDS IN TARGETED AREAS]
This design example is a bit busy, but it demonstrates how you can repeat a background in a single div, not just the entire page. In this case, you can see that the sidebar on the right has a repeating red tiled background. A different background that looks like a giant sheet of parchment paper has been inserted into the main #container div, which is centered on the page. For this, the body background has been set to white to make it appear that the parchment paper, which has a white background, is floating on the page when displayed on larger monitors.

Dreamweaver

8 [USE LARGE BACKGROUNDS IN TARGETED AREAS]
Here you see the same layout used in the last step, but the backgrounds have been changed: a smaller version of the light parchment image in the background of the sidebar and the darker red image in the background of the #container div. Both background image styles have been set so they won’t repeat, and images have been used that were big enough to fill their respective sections of the page. Now text and other images can easily be added inside the divs so that they’ll appear to be layered on top of the background images.

Dreamweaver

9 [USE BACKGROUNDS IN CSS NAVIGATION BARS]
There are many advantages to using text instead of images for links (including better accessibility and SEO), but that doesn’t mean you can’t make your links look like images. By using CSS to place background images behind your text links, you can create rich effects using gradients, patterns, and anything else you can imagine. In this example, a small image has been repeated with a gradient effect across the x axis of a div to create the background for this site’s main navigation links. For perspective, the same image used in the background has been placed just above the navigation bar.

Dreamweaver

10 [FRAME YOUR IMAGES WITH BACKGROUNDS]
To put a frame around a photo, consider this trick: Create a div with a style that includes a background image, and then insert the photo into the div. The trick is to use margin and padding settings to align the image where you want it within the frame in the background. In this example, you see the red background in the main #container div, and then a second div inside it with the ID #photo-background. That style contains a background image (it looks like a piece cut from a strip of film), as well as margin and padding settings to position the photo over the background.

Dreamweaver

11 [USE CSS TO CREATE FRAMES]
This picture frame was created entirely with CSS. A style was defined with a thick, dark brown border and a light background color, and margins and padding were used to control the space between the photo and border. A thin black frame was also included around the photo itself. If you make a frame like this a class style, it can be applied to any div, and can be used multiple times on the same page. Because the frame is created with CSS, it automatically adjusts to any image size and can be applied to as many images as you want.

Dreamweaver

12 [REPLACE LIST BULLETS WITH IMAGES]
Another great way to use images in CSS is to replace the boring bullets in the list item tag. Although this isn’t a background image, I include this tip because it’s a nice addition to the tool chest of any Web designer who wants to use more design elements. Changing the bullet is as simple as creating an optimized JPEG, GIF, or PNG file in the size you want for the bullets in your design. Then create a new style for the

or list item tag and use the CSS Rule Definition dialog to add the image in the List settings.

Dreamweaver

13 [TESTING YOUR WORK]
To fully test any CSS Layout, you need to preview your page in as many Web browsers as you can. Not all browsers support CSS background, margin, and padding styles equally and the preview features in Dreamweaver can’t replicate all of the ways your page may be displayed. Keep in mind that not all images should be used in the background. Photos, logos, and other graphics that add meaning are best inserted into your pages as inline elements where they can include Alt text. And remember, if you use an image as a background, you can’t turn it into a link.

Dreamweaver

Dreamweaver: Make Your Site Search-Engine Friendly 

Friday, July 1, 2011 10:22:00 AM

Dreamweaver: Make Your Site Search-Engine Friendly

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.

Dreamweaver Tutorial

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.

Dreamweaver Tutorial
©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.

Dreamweaver Tutorial
©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.

Dreamweaver Tutorial

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.

Dreamweaver Tutorial

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.

Dreamweaver Tutorial

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.

Dreamweaver Tutorial

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.

Dreamweaver Tutorial

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.

Dreamweaver Tutorial
©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.

Dreamweaver Tutorial

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.

Dreamweaver Tutorial
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.)

Dreamweaver Tutorial

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.

Dreamweaver Tutorial

Share and Enjoy