Html and css in dreamweaver

Create a CSS rule

In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer.

You can create a CSS rule to automate the formatting of HTML tags or a range of text identified by class or ID attributes.

Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box:

• In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side of the panel.

• Select text in the Document window, select New CSS Rule from the Targeted Rule pop-up menu in the CSS Property inspector (Window > Properties); then click the Edit Rule button or select an option from the Property inspector (for example, click the Bold button), to initiate a new rule.

• To create a custom style that can be applied as a class attribute to any HTML element, select the Class option from the Selector Type pop-up menu and then enter a name for the style in the Selector Name text box.

Class names must begin with a period and can contain any combination of letters and numbers (for example, .myhead1). If you don’t enter a beginning period, Dreamweaver automatically enters it for you.

• To define the formatting for a tag that contains a specific ID attribute, select the ID option from the Selector Type pop-up menu and then enter the unique ID (for example, containerDIV) in the Selector Name text box.

IDs must begin with a pound (#) sign and can contain any combination of letters and numbers (for example, #myID1). If you don’t enter a beginning pound sign, Dreamweaver automatically enters it for you.

• To redefine the default formatting of a specific HTML tag, select the Tag option from the Selector Type pop-up menu; then enter an HTML tag in the Selector Name text box or select one from the pop‑up menu.

• To define a compound rule that affects two or more tags, classes, or IDs simultaneously, select the Compound option and enter the selectors for your compound rule. For example if you enter div p, all p elements within div tags will be affected by the rule. A description text area explains exactly which elements the rule will affect as you add or delete selectors.

• To place the rule in a style sheet that is already attached to the document, select the style sheet.

In the CSS Rule Definition dialog box, select the style options you want to set for the new CSS rule. For more information, see the next section.

Источник

Practice CSS coding

Learn the basics of Cascading Style Sheets (CSS) and about the tools available in Dreamweaver for applying CSS to add style to web pages.

Dreamweaver simplifies working with CSS, but web designers still need a good understanding of CSS to use Dreamweaver effectively. In this tutorial, you’ll review the fundamentals of CSS and learn how to use styling capabilities of the CSS Designer tool in Dreamweaver to produce valid CSS.

Getting started with a sample project

If you’d like to follow along, this tutorial references a prebuilt page from Intializr. Initializr is a site that enables you to generate an initial web design project including starter HTML, CSS, and JavaScript files with content, styling, and navigation elements.

1. Go to initializr.com in a web browser to start an HTML5 Initializr project.
2. Click the Responsive button, select Mobile-first Responsive and Modernizr, and deselect all of the other options (see Figure 1).

Note: The responsive project includes a default layout, CSS files, and other files that help illustrate the concepts of designing with CSS.

1. Download the ZIP file and expand it to a folder on your computer.
2. Launch Dreamweaver.
3. Open index.html in Dreamweaver.

Note: Make sure you have the latest version of Dreamweaver. To do this, check the Apps tab of your Creative Cloud desktop application and verify that the status indicates Dreamweaver is up to date (see Figure 2).

1. Select Split View and enable Live View to preview the output and view the source code simultaneously.

Note: Throughout this tutorial, view the pages in Split View with Live View enabled and select main.css in the Document Toolbar (see Figure 3) so you can see how the settings in CSS Designer translate directly to valid CSS in Code View.

CSS fundamentals

In the early days of the web, HTML defined the page structure and styling was defined in attributes of the HTML tag. Web designers had to repeat styling rules within and across pages, making sites difficult to update and maintain.

CSS was created to help solve these issues by moving styling information to rules defined separately from the HTML. Designers and developers were then able organize and update styles in a single location and reuse them easily. Much of the actual layout was still done with HTML, while the CSS focused on defining size, color, or other basic visual attributes.

Today, CSS handles everything from the appearance of items to their placement on the page and even basic 2D and 3D animation. For the most part, HTML is used to indicate what an item is (for example, a paragraph, a heading, or a container, referred to as a DIV). Using just CSS, you can rearrange the look and feel of your page, regardless of the order in which elements appear in the HTML markup. You can even adjust styles or appearance based on factors such as the size or orientation of the screen.

Using CSS Designer in Dreamweaver

The CSS Designer tool in Dreamweaver provides a visual interface to add, modify, and remove styles in your page or in or external CSS files linked to it. Watch Style with CSS for a good demonstration of CSS Designer.

Note: You can define your styles directly in your page, known as internal style sheets, inside of a block in your header, or on individual tags with inline styles. However, the recommended approach is to link to an external style sheet to get the benefits of reuse.

Follow these steps to customize the layout and position of CSS Designer and explore some of its basic functionality.

1. To see the full CSS Designer panel, click the drop down in the upper-right corner and change the view from Compact to Expanded (see Figure 4).

Note: Collapse or close the File panel to increase the space available for CSS Designer.

1. CSS Designer enables you to easily create a new CSS file or link an existing one. Click the plus symbol in the Sources pane to see the options for associating a style sheet with a web page. Then, press the Escape button to hide the options.

The sample document includes two external CSS files: normalize.min.css and main.css (see Figure 5).

Cascading in CSS

Cascading in CSS refers to the way web browsers select the style to apply to an element when the CSS has multiple properties defined for that element, or when styles are applied to the same element from multiple locations. Cascading – What Does it Mean? provides a good overview of how cascading works.

Specify default font properties

To illustrate one example of cascading, start by setting a default font, font size, and font color to the entire document. It is possible to create rules that apply to each HTML element that contains text; however that approach would be repetitive and error-prone. Cascading in CSS enables you to apply default text styles to the entire HTML page or body and let everything within the page inherit this style unless you override it.

1. Click main.css in the Sources pane of CSS Designer.
2. Click html, button, input, select, textarea in the Selectors list.
3. Click the text icon (T) in the Properties pane. Note that the text color is set to #222, or close to black.

The color property is defined on a high level element ( html in this case), and it affects, or cascades to, most elements inside of it.

Notice that the paragraph and header elements change color as well because the color property cascades from the html element to the elements it contains. Also, notice that the white text in the header does not change because these elements define their own text color, thereby overriding the inherited color from the HTML tag.

Источник

Set page properties

Learn how to set HTML page properties and CSS properties, such as font, background color, and background image properties, for your Dreamweaver page.

For each page you create in Dreamweaver, you can specify layout and formatting properties using the Page Properties dialog box (File > Page Properties). The Page Properties dialog box lets you specify the default font family and font size, background color, margins, link styles, and many other aspects of page design. You can assign new page properties for each new page you create, and modify those for existing pages. Changes you make in the Page Properties dialog box apply to the entire page.

Dreamweaver gives you two methods for modifying page properties: CSS or HTML. Adobe recommends using CSS to set backgrounds and modify page properties.

The page properties you choose apply only to the active document. If a page uses an external CSS style sheet, Dreamweaver does not overwrite the tags set in the style sheet, as this affects all other pages using that style sheet.

Set CSS page font, background color, and background image properties

Use the Page Properties dialog box to specify several basic page layout options for your web pages, including the font, background color, and background image.

Specifies the default font family to use in your web pages. Dreamweaver uses the font family you specify unless another font is specifically set for a text element.

Specifies the default font size to use in your web pages. Dreamweaver uses the font size you specify unless another font size is specifically set for a text element.

Sets a background color for your page. Click the Background color box and select a color from the Color Picker.

Sets a background image. Click the Browse button, then browse to and select the image. Alternatively, enter the path to the background image in the Background Image box. Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To prevent the background image from tiling, use Cascading Style Sheets to disable image tiling.)

• Select the No-repeat option to display the background image only once.
• Select the Repeat option to repeat, or tile, the image both horizontally and vertically.
• Select the Repeat‑x option to tile the image horizontally.
• Select the Repeat‑y option to tile the image vertically.

Left Margin and Right Margin

Specify the size of the left and right page margins.

Top Margin and Bottom Margin

Specify the size of the top and bottom page margins.

Set HTML page properties

Setting properties in this category of the Page Properties dialog box results in HTML rather than CSS formatting of your page.

Sets a background image. Click the Browse button, then browse to and select the image. Alternatively, enter the path to the background image in the Background Image box. Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To prevent the background image from tiling, use Cascading Style Sheets to disable image tiling.)

Sets a background color for your page. Click the Background color box and select a color from the Color Picker.

Источник