Adobe Dreamweaver CSS Layouts

March 7, 2009

By system

CSS is a far more complex technology than HTML and using CSS to control the layout of your pages requires experience. Fortunately, a href=http://www.macresource.co.uk/courses/dreamwvr1b.htm target=_blankAdobe Dreamweaver CS4/a contains a wide variety of CSS layouts which can be used to create both individual pages and also templates which can then be used to generate multiple pages.br /
br /
To gain access to Dreamweavers CSS layouts, simply choose New from the File menu. The New Document window displays all the different types of web page that Dreamweaver is capable of creating. These are arranged in categories and CSS layouts are available both in the Blank Page and Blank Template categories.br /
br /
If the option None is chosen in the Layout column, no CSS file will be created; Dreamweaver will simply create a blank HTML or XHTML page. Clicking on the name of each of the layouts displays a preview on the right. This gives you an idea of what the layout will look like. There are single column, two column and three column layouts available. These layouts use terms that you may find confusing such as elastic, fixed liquid and hybrid. We will come back to these terms in another tutorial. At the moment, we are just concerned with creating an HTML page which is driven by a CSS file.br /
br /
Having chosen a CSS layout, before clicking on the Create button you need to specify the way in which the CSS file will be linked to the HTML document. Next to the option labelled Layout CSS is a drop-down menu with three options: Add to Head will place all of the CSS rules inside the HTML document in the head section; Add to New File, as the name suggests, will create a new external CSS file containing all the necessary rules; while Link to Existing File will place the necessary CSS rules in an existing CSS file you designate. This last option is useful if youre adding the page to an existing site that already has a CSS file which you want to keep using.br /
br /
As a general rule, it is normally preferable to place the CSS in an external file since this offers you greater flexibility in reusing the CSS rules contained in the file. If you dont have an existing CSS file then choose Create New File and then click the Create button. Dreamweaver will prompt you to choose a location for the CSS file and will suggest a cryptic name, such as twoColElsLtHdr.css. Feel free to enter a more memorable name. When you click the Save button, Dreamweaver will create both the HTML and CSS pages.br /
br /
Using Dreamwevers CSS Layoutsbr /
br /
When you create an HTML page or template using one of Dreamweavers CSS layouts, the page which is generated contains placeholder text which provides a sample of how the text will appear in the browser window. If you look in the CSS Styles panel, youll notice that you have access to the CSS rules controlling your page. Simply click on plus icon to expand the CSS and you can see all the various rules it contains.br /
br /
You can double-click on any of the CSS rules and modify them to your hearts content. You can also add new rules by choosing New from the CSS Styles panel menu, located in the top right of the CSS panel.br /
br /
If your CSS is contained in an external file, because of the link between the page and the external file, the content of the CSS file can always be viewed whenever the page is open thanks to a feature built into Dreamweaver called related files. Just above the document window, next to the name of the HTML page, youll notice the name of the CSS file. Clicking on this name gives you access to the CSS code either in split view or in its own code window. To go back to normal mode, you simply click on the Design button on the Document toolbar.br /
br /
The fact that the CSS can be viewed in this way whenever the page is open is due purely to the link created by Dreamweaver when the page is generated. Lets finish this tutorial by looking at how this link can be broken and then re-established. To break the link to the external file, we simply open the CSS Styles panel, right-click on the name of the linked CSS file and choose Delete. The layout information disappears and we are simply left with an unstyled DIV element containing the placeholder text.br /
br /
To manually establish a link to an external CSS file, we open the CSS Styles panel and from the panel menu in the top right, choose Attach Style Sheet. Next, we click the Browse button to find a style sheet and navigate to the location of the CSS file. Once you locate and double-click on the file, the rules it contains will be applied to the elements on the HTML page.br /
br /
Author is a web developer and trainer for Macresource Computer Training who run regular a href=http://www.macresource.co.uk/courses/dreamwvr1b.htm target=_blankDreamweaver Training Courses in London/a.br /
br /
Find helpful knowledge about a href=http://www.arabian-affiliate.com target=_blankhome business/a – check out hyperlinked web page.