Tutorials

Setting up a new website in Dreamweaver CS6 Part 2/2

In our last article we took a look at setting up a new html Dreamweaver file to begin building your website. Now that you've linked your document to the appropriate root folder and saved your file, it's time to give a title to your page to help search engines index your site once it's online. You do this by placing a title in the Title: field in Dreamweaver (shown in the screenshot below)  Make your title short and to the point such as “Moe's Autobody – Toronto Muffler Shop”.

2d

Most sites nowadays also use an external CSS stylesheet that holds all of the styles for a given website. Using an external stylesheet ensures that all of your pages will carry the same style data and can be easily updated on the fly by accessing one stylesheet. Some smaller sites use the stylesheet directly in the head of the html document. For the purpose of our article though we'll setup an external stylesheet as we plan on having a multi-page website.

To begin setting up your new CSS style sheet, go to the FILE>NEW option at the top of Dreamweaver. This should open up a page like this one:

2dd

On this screen select the CSS option under the Page type menu and then click Create in the bottom right-hand corner. Doing so will give you a screen that looks like this:

2ddd

This document will be where you'll define all of the styles that make up your website. It's a good idea to save this file now under FILE>SAVE in your root folder. Be sure to save it in the CSS folder (if you made one) and call it “styles” – the most common name given to stylesheets for the web.

2dddd

Now it's time to link this CSS document to your html document. To do this return to the original html document you used before (it should still be open on your screen, if not reopen it from where you saved it) and click the “Attach Style Sheet” link icon at the bottom of the CSS Styles panel.

2ddddd

This will open up a screen prompting you to attach your stylesheet. Click the Browse button and find the CSS styles document you saved a minute ago (we found ours under the CSS folder in our site's root folder). Once this is selected click the OK button to finish.

2dddddd

You'll now be able to see the stylesheet in the Rules panel on the far right-hand side of Dreamweaver. Adding any styles to your document will  show them here automatically. (We added an h1 tag as an example).

2ddddddd

In the head portion of your Dreamweaver document you'll also be able to see the new external stylesheet being linked to your html document.

In these two articles we touched upon setting up the basics of a Dreamweaver file. In future articles we'll take a look at starting to build your website using Dreamweaver CS6.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image