Want to know more about us and our multimedia, animation & web design courses, feel free to Contact Us. We would love to hear from you.
Dreamweaver was originally developed and published by Macromedia in 1997. Adobe purchased Macromedia (that included the legal rights to Dreamweaver) in 2005 as well as proceeded the development of the program. The several features of Dreamweaver make it a functional web editing tool, where it be for creating complicated or very simples sites.
The CSS Designer panel enables you to set up style sheets (internal and external) and to 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.
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 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 open as the active document in the workspace.
In the Sources section, click on the + sign and choose the appropriate option:
Create a New CSS File enables the creation of an external style sheet. Attach an Existing CSS File is for linking to an existing style sheet. Define in Page is for creating an internal style sheet. This enters the
To create a selector the source style sheet needs to be selected in the Sources section.
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.
In the Selector section click on the + sign and enter the name of the style to be created.
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.
The Properties section is ordered into five groupings:
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.
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.
|Monday To Friday||8:00 Am To 8:00Pm|
|Saturday & Sunday||8:00 Am To 5:00Pm|