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â€.
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:
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:
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.
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.
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.
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).
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.