Posts Tagged

Dreamweaver

Creating An HTML Page Using On A Dreamweaver CSS Layout

Comments Off CSS

CSS is a considerably more complex technology than HTML and using CSS to control the layout of your pages requires experience. Fortunately for us, Dreamweaver contains a wide variety of CSS layouts which can be used for creating both individual pages and also templates which can then be used to generate multiple pages.

To gain access to Dreamweaver’s preset CSS layouts, simply choose New from the File menu. The New Document window gives access to all the different types of web page that Dreamweaver is capable of creating. These page types are arranged in categories and CSS layouts are available both in the Blank Page and Blank Template categories.

If you choose the option « None » in the Layout column, no CSS file will be created; Dreamweaver will simply give you a blank HTML or XHTML page. Clicking on the name of each of the preset layouts displays a preview on the right. This gives you a rough idea of what the layout will look like. There are three column, two column and single column layouts available. These layouts use certain jargon that you may find confusing such as elastic, fixed liquid and hybrid. We will discuss these terms in another tutorial. At the moment, we are just concerned with creating an HTML page which is driven by one of Dreamweaver’s CSS layouts.

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 you’re adding the page to an existing site that already has a CSS file which you want to keep using.

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 don’t 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.

The author is a training consultant with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver training courses in London and throughout the UK.

Creating A Dreamweaver Page Based On A CSS Layout

Comments Off CSS

Cascading style sheets (CSS) is a far more complex technology than HTML and using CSS to control the layout of your pages requires experience. Fortunately, Dreamweaver offers a wide variety of CSS layouts which you can use to create both individual pages and also templates which can then be used to generate multiple pages.

To gain access to Dreamweaver’s preset CSS layouts, simply choose New from the File menu. The New Document window gives access to all the different types of web page that Dreamweaver is capable of creating. These page types are arranged in categories and CSS layouts are available both in the Blank Page and Blank Template categories.

If you choose the option « None » in the Layout column, no CSS file will be created; Dreamweaver will simply give you a blank HTML or XHTML page. Clicking on the name of each of the preset layouts displays a preview on the right. This gives you a rough idea of what the layout will look like. There are three column, two column and single column layouts available. These layouts use certain jargon that you may find confusing such as elastic, fixed liquid and hybrid. We will discuss these terms in another tutorial. At the moment, we are just concerned with creating an HTML page which is driven by one of Dreamweaver’s CSS layouts.

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 you’re adding the page to an existing site that already has a CSS file which you want to keep using.

As a general rule, it is almost always preferable to place the CSS in an external file since this offers you more flexibility in reusing the CSS rules contained in the file. If you don’t have an existing CSS file, simply choose « Create New File » and then click the Create button. Dreamweaver will prompt you to select a location for the CSS file and will suggest a condensed, abbreviated name, such as  » twoColElsLtHdr.css ». Feel free to enter a different name. When you click the Save button, Dreamweaver will then create both your HTML page and external CSS file.

The author is a training consultant with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses in London and throughout the UK.

Find More CSS Articles

Editing CSS Styles With Dreamweaver

Comments Off CSS

Because of its ability to separate design from content, Cascading Style Sheets (CSS) has become an extremely important technology in web development. A single CSS document can contain information regarding the position of elements on all the pages in a web site as well as style information such as font, sizes and colours. In terms of building websites, CSS definitely represents the future.

Adobe Dreamweaver is a very widely used platform for developing web sites and web content and, although used by experienced developers, is also widely used by non-specialists for whom Dreamweaver’s user-friendly visual interface takes the pain out of web site creation. The way in which Dreamweaver implements CSS is very important for the casual user, since it will influence the kind of sites they end up producing.

Previous versions of Dreamweaver assumed that most users would be using tables to control the layout of their web pages. Dreamweaver CS3 is the first version of the program which encourages users to create CSS-based web page layouts. When the users create a new web page, they are offered a series of CSS layouts, on which they can base the new page, consisting of single, double and three column designs.

CSS page layout is based in the DIV element, an HTML container which can be used to hold an arbitrary amount of web content. The CSS rules control the appearance and positioning of DIVs on the page. Dreamweaver CS3’s preset CSS layouts create a series of DIVs containing placeholder text and basic formatting. The placeholder text, as well as the code underlying the page, both contain useful explanations of how the page has been constructed and a few tips on how to personalise them.

The CSS generated by Dreamweaver when creating these preset layouts is embedded within the page itself. Updating a site where every page has embedded CSS code would be extremely inefficient. A far better arrangement is to keep all of the CSS in a single file. Luckily, Dreamweaver has a nifty feature for moving CSS definitions from an HTML page to an external CSS file. You just highlight all of the CSS you wish to export, right click the selection and choose « Move CSS Rules » from the « CSS Styles » context menu.

Moving CSS code into an external file is not something a beginner would be expected to think of doing and is not something that Dreamweaver recommends to new users. So, in spite of the improvements, some familiarity with CSS is still required to get Dreamweaver to handle CSS efficiently.

Another area where Dreamweaver still handles CSS inefficiently is the way in which it generates CSS class styles with names like « style1 », « style2 », etc. whenever the user applies attributes like font, size or colour to highlighted text. This must be really confusing for beginners and can easily be solved by simply removing these « raw » attributes and replacing them with CSS-friendly options.

The writer of this article is a developer and trainer with TrainingCompany.Com, a UK IT training company offering Adobe Dreamweaver Classes at their central London training centre.

Related CSS Articles