Dreamweaver CSS Designer Tutorials

What is Dreamweaver

Adobe Dreamweaver is a software program for designing websites, basically a much more completely featured HTML internet as well as a programming editor. The program gives a what-you-see-is-what-you-get (WYSIWYG) interface for individuals to produce as well as modify web pages in a much more easy-to-use atmosphere. Dreamweaver sustains many markup languages, consisting of HTML, XML, CSS, and also JavaScript. As for human languages, it sustains English, Spanish, French, German, Japanese, Chinese (both Streamlined as well as Conventional), Italian, Russian, and much more.

Dreamweaver was originally developed and published by Macromedia in 1997. Adobe purchased Macromedia (which included the legal rights to Dreamweaver) in 2005 as well as proceeded with the development of the program. The several features of Dreamweaver make it a functional web editing tool, whether it be for creating complicated or very simple sites.

What is CSS Designer

The CSS Designer panel enables you to set up style sheets (internal and external) and assign styles to them. The CSS designer panel can be both handy and, at the same time, somewhat fiddly to use. It is a useful addition to coding styles by hand as it presents a multitude of CSS properties in a convenient package and helps with managing CSS. To use the CSS Designer panel effectively you will need to understand the basic principles of style sheets and style selectors first.

css designer palette

Expanded and Compact view

Expanded and Compact view

For ease of use when using the CSS Designer panel it is probably best to work in Expanded view rather than Compact (provided there is enough screen space). This will arrange the sections of the panel in two columns. The view can be changed from the button at the top right of the screen.

Set up a stylesheet

Set up a style sheet A style sheet needs to be defined (internal or external) before any styles can be created. In order to set up a style sheet, a saved HTML document needs to be opened as the active document in the workspace.

In the Sources section, click on the + sign and choose the appropriate option:

Sources

Creating a New CSS File enables the creation of an external style sheet. Attach an Existing CSS File for linking to an existing style sheet. Define in Page is for creating an internal style sheet.

Creating selectors (styles)

To create a selector the source style sheet needs to be selected in the Sources section.

Creating selectors (styles)

If the style is to go within a media query then this will need to be selected in the @Media section. If the style is to go into the base CSS or if no MQ are defined then leave items unselected or select GLOBAL.

Creating selectors (styles)

In the Selector section click on the + sign and enter the name of the style to be created.

Creating selectors

The style name auto-completes if elements are selected in the Design or Code views. This can be edited as required. When naming class and ID selectors the appropriate prefix ( . or # ) will need to be included. Having defined the style name hit the Enter key on the keyboard (once or twice) or click in the Properties section. The Properties section will now reveal options for defining properties for the style.

Properties

The Properties section is ordered into five groupings:

Properties

To create properties for the style click on a grouping button to reveal the content for that group and choose the desired options. Also, scrolling down through the Properties section reveals each grouping in turn.

How To edit a style?

Select the style sheet in the Sources section and the media type in the @Media section (if necessary) and select the style name in the Selectors section. Change or add properties in the Properties section as required. To display only the current properties for the selected style, click on the Show Set button at the top of the Properties section.

edit a style

CSS Designer Video Tutorial

Design Task 1

Design Task 1

Design Task 2

Design Task 2

Design Task 3

Design Task 3

Take Your Free Live Demo Class Now

We Will Call Back You Shortly

Enter Your DETAILS BELOW

We Will Send You the Course Fees Details In Below Number

Enter Your DETAILS BELOW

We Will Call Back You Shortly

Enter Your DETAILS BELOW

We Will Call Back You Shortly

Enter Your DETAILS BELOW

Enter Your DETAILS BELOW TO take

free demo class