Project 4: Yosemite CSS Layout

Project 4: Yosemite CSS Layout
Creating layouts with style sheets Working with a template Using CSS to control content If you completed the first three projects in this book, you have already gotten a brief introduction to the concept of cascading style sheets (CSS). In this project, we dig into the real nuts and bolts of CSS — everything from creating a new file to defining selectors to formatting an entire page with only CSS. The skills you learn in this project will be vitally important in virtually every project you build in Dreamweaver, allowing you to create responsible pages that meet current standards. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Tracing Images View>Tracing Image>Load
Reset to move to document edges Change view percentage if necessary In many workflows, the look of a site is designed in an application such as Adobe Photoshop. You can import the final image file into Dreamweaver as a tracing image, which you can use as a project map. By analyzing the tracing image, you can more easily determine what you need to do to recreate the page — what sections are required, how text should be formatted, and so on. The tracing image appears in the page background in Design view — even behind actual background images. In the page code, the tracing image is added as a tracingsrc attribute of the <body> tag. You can define a tracing image by choosing View>Tracing Image>Load. After selecting an image file, the Page Properties dialog box automatically appears. You can also open the Page Properties dialog box directly, and use the Tracing Image options to define the page’s tracing image. To show or hide the tracing image, use the Show/Hide toggle control in the View>Tracing Image menu. You can remove the tracing image by opening the Page Properties dialog box and clearing the Tracing Image field. The tracing image is aligned by default at the insertion point, which is slightly inset from the document edges. Choosing View>Tracing Image>Reset Position moves the tracing image to the actual document edges. You can’t scroll to see different parts of the tracing image. If you have a small screen, you might need to reduce the page view percentage to show the entire tracing image. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Style Basics Inline styles Embedded styles External styles
Dreamweaver supports three basic types of styles: inline, embedded, and external. An inline style applies directly and instantly to an individual element within a tag, affecting only that single element of the HTML page. An embedded style is added directly in the <head> tag of an HTML page, using the <style> tag. Embedded styles affect only the HTML page in which they are placed. An external style sheet is saved as a separate CSS file (with the extension “.css”), which is uploaded to the Web server along with the Web site pages. A link to the external CSS file is placed in the HTML file’s <head> tag, using the <link> tag. When a browser reads the HTML, it identifies the link, reads the rules in the attached CSS file, and presents the HTML content according to the defined rules. External styles Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Style Basics (cont’d) Apply one set of rules to multiple pages
Separate content from presentation Edit styles to change page appearance There are a number of benefits to using external CSS files: • Structural content is truly separated from the presentational attributes. All of the code that determines a page’s appearance is stored in the CSS file; the HTML code contains only the actual page content. • Changing style definitions automatically changes the appearance of page elements — without changing the page content. It isn’t even necessary to open an HTML page before you change the styles in a CSS file. • You can attach the same CSS file to multiple pages, which helps to maintain a consistent look and feel across the entire site. • You can define different style sheets to use for different media, so (for example) a page appears one way on screen but differently if the user prints the page. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Creating a CSS File Adobe Dreamweaver CC: The Professional Portfolio
A CSS file includes formatting instructions in rules. A rule consists of two parts: • A selector, which basically names the element to be formatted, and • Attributes or properties (such as font, color, height, etc.) that control the appearance of the selected element. You can create a new CSS file using the same File>New command that you use to create an HTML page; simply choose CSS in the Page Type column. You can save a CSS file anywhere in the site where it is applied, but CSS files are conventionally saved at the site root level, or in a “css” folder at the root level. A CSS file is a code file, which means the Design and Split views are not available when a CSS file is active. You can write CSS rules yourself in the Code pane, or you can use the CSS Designer panel to create, edit, and manage rules. Anything you do in the panel is automatically reflected in the code, and vice versa. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Attaching a CSS File Attach (link) to an HTML file
Use different files for different media When an HTML page is open, you can use the CSS Designer panel to attach a CSS file. The Add As options determine how the styles will be managed: • The Link method maintains the external CSS file. • The Import method copies styles from the selected file into the HTML page’s head. This results in embedded styles, which negates many of the advantages of using an external style sheet. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Viewing CSS Code Adobe Dreamweaver CC: The Professional Portfolio
After attaching a CSS file to an HTML file, the CSS file name appears in the Related Files bar at the top of the document window. If you make changes to the CSS file while the HTML page is active, the CSS file name shows an asterisk to indicate that changes need to be saved. If the attached CSS file is open, you can activate it using the document tab, and then save the changes in the CSS file. Keep in mind that the attached CSS file does not need to be directly open to make changes using the CSS Styles panel. If the attached CSS file is not open, you can activate it in the Code pane using the buttons in the HTML file’s Related Files bar. When the CSS code is showing in the Code pane, choosing File>Save saves changes in the related CSS file. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

The CSS Designer panel The CSS Designer panel is divided into four sections: Sources lists all CSS files and other sources of CSS rules related to the active site. @Media lists any media queries that are defined in the active file. Selectors lists all CSS selectors that relate to the active selection. If you select a specific file in the Sources section, this area lists all selectors in the file. If you click a specific object in an HTML page, this area lists “Computed” selectors, or those that relate to the active selection on the page. Properties lists properties that can be defined for the active selector. If you check the Show Set option, only properties with defined values will appear in this section. Because there are so many possible properties, you can use the buttons at the top of the Properties section to quickly jump to specific categories of properties. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Creating CSS Rules Adobe Dreamweaver CC: The Professional Portfolio
Clicking the Add Selector button in the CSS Designer panel creates a new item in the Selector section of the panel. By default, the new selector name matches whatever is selected in the HTML page. The new selector is automatically added to the file that is selected in the Source section of the panel. After adding a new selector, you can type to change the name of the selector. Remember: Tag selectors match the name of the related HTML tag. Class selectors always begin with a period (.). ID selectors always begin with a # character. Descendant or compound selectors include the “path of tags” to the specific elements that you want to affect. Once you have defined a selector name, you can use the Properties section of the CSS Designer panel to define specific property values for that selector. Many of the options in this section include pop-up menus that prompt you to select a valid value. Some properties even offer icons or buttons that suggest the result of those selections. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

The “Undo” Warning CSS file active in Code pane
When you use the CSS Designer panel to define new rules or edit existing ones, you need to understand that you are simply using a panel/dialog box-based interface to edit the CSS code. You should also understand that the Undo command (Command/Control-Z) does not directly apply to changes made through the CSS Designer panel. However, because you are effectively changing code in one file or another, you can use a bit of a workaround to be able to apply the Undo command. • If styles are in an attached CSS file, use the page’s Related Files bar to show the CSS file in the Code pane. Make the code pane active, then use the Undo command to affect your last changes to the CSS styles. • If styles are embedded, make sure you are in Code or Split view and the Code pane is in focus. Then use the Undo command to affect your last changes to the CSS styles. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

The CSS Box Model Margin Border Padding Content
When you design layouts using CSS, think of any specific element as a box made up of four parts: margin, border, padding, and content. An object’s overall size is the sum of the four values. • The margin is outside the box edges; it is invisible and has no background color. Margin does not affect content within the element. • The border is the edge of the element, based on the specified dimensions. When working with block-type elements such as paragraphs, the border is implied by the amount of content in the element (rather than specified with actual width and height values). • The padding lies inside the edge of the element, forming a cushion between the box edge and the box content.  (If you are familiar with print-design applications such as Adobe InDesign, think of padding as text inset.) • The content lies inside the padding. When you define the width and height for an element, you are defining the content area. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

ID selectors Apply to <div> tags # sign in name
A <div> tag marks a division or section of a page. Each div on a page has a different identity, defined using the ID attribute. (Keep in mind that a specific ID can apply to only one element on the page.) An ID selector applies to a specific <div> tag on the page, effectively defining the appearance of that part of the page. Put simply, it works like this: • Define an ID selector, then • Assign the appropriate ID to a specific div element. The result: • Defined properties in the ID selector format the appearance of the div. The name of an ID selector must begin with the # sign. If you forget to type the # sign when you define the selector, Dreamweaver automatically adds it for you. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Inserting Div Tags Structure Insert panel
Insert>Layout Objects> Div Tag Creating a new ID selector does not directly affect the active HTML file; the new rule appears only in the CSS Styles panel. You have to first add a <div> tag to the HTML page, or assign the ID to an existing <div> tag on the page. In the Insert Div Tag dialog box, you define which div you want to add and where you want to add it. • The default option, At Insertion Point, places the new div element at the current location of the insertion point. • If something is selected in the document window, you can choose Wrap Around Selection instead of At Insertion Point. This option is useful if you need to add a new div element around existing content. Using the other options, you can determine which existing tag to use the basis for inserting the new tag. The Before Tag and After Tag options are useful for placing multiple divs at the same nesting level in a specific order. The After Start of Tag and Before Start of Tag options are useful for creating new levels of nested divs. The ID menu lists all divs that currently exist in the CSS file, but have not yet been placed in the active HTML file. (Remember: Each ID can exist only once in a page.) Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Inserting Div Tags (cont’d)
Click edge to show box model HTML code is minimal, purely structural Clicking the edge of a div element in the Design pane selects the div. The corresponding text is also highlighted in the Code pane; this allows you to easily identify the code for the placed div element. (If you don’t see the margin area, make sure CSS Layout Box Model is toggled on in the View>Visual Aids menu.) Adding a div adds a structural element to the page’s HTML code. Those elements, however, simply identify each div element and its content. There is no mention of sizes, margins, colors, or other attributes that define the page layout. These presentational attributes are controlled solely by editing the ID selectors in the CSS file. New divs automatically include placeholder text. If you remove that content, the div collapses to the smallest possible height unless you define a specific height in the ID selector rules. Note: Even if you define a specific height, a div will expand as necessary to accommodate whatever you place in the container. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Nesting Divs Adobe Dreamweaver CC: The Professional Portfolio
Nested divs are div elements that exist entirely within other div elements. Note: Nested divs should appear before other content in the container div. If you place the nested div after other content in the containing div, the nested div will not align properly. Nested div elements automatically align based on the horizontal alignment properties of the containing element. If no specific alignment is defined, the nested div aligns to the left side of its container. The float property allows you to attach a div to the left or right edge of the containing element, which gives you greater flexibility when creating complex layouts with nested divs. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Templates File>Save as Template .dwt extension Templates folder
Templates make it easier to create common page elements once, and share them across multiple pages. Templates also make it easier to edit common page elements; by editing the template, those changes ripple across all pages that are based on the template. To create a template, you can modify an existing HTML document, or you can create a template from scratch (i.e., start with a blank HTML document). When you choose File>Save as Template, you can name the template and write a brief description. The description is internal only, and will not appear in any pages that are based on the template. Dreamweaver automatically saves template files (with the “.dwt” extension) in a Templates folder in your site’s local root folder. If the Templates folder does not already exist, Dreamweaver creates the folder for you. When you save a template, Dreamweaver recognizes that links to images and other pages need to point from the Templates folder instead of the file’s previous location. You are automatically asked to update the links in the saved template file. Important note: Don’t move templates out of the Templates folder, and don’t move the Templates folder out of your local root folder. This would cause errors in paths in the templates. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Editable Regions Adobe Dreamweaver CC: The Professional Portfolio
When you create a template, you have to indicate which elements of a page should remain constant (non-editable; locked) in pages based on that template, and which elements can be changed. After converting a document into a template, all parts of the page become non-editable. Until you define at least one editable region, you won’t be able to add page-specific content to any pages based on this template. The terms “editable” and “locked” refer to whether a region is editable in a page based on a template — not to whether the region is editable in the template file itself. Clicking the Editable Region button in the Templates Insert panel (or choosing Insert>Template Objects>Editable Region) opens the New Editable Region dialog box. After you define a name for the region, it is added to the template at the location of the insertion point. Important note: Unlike other applications, you do not have to use the Save As command to rewrite a Dreamweaver template. You can simply choose File>Save or press Command/Control-S. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Paths in Templates Site Setup: Advanced Settings
Document-relative paths When you save a template file, it is placed in a folder named Templates. Links from this template file to images or other pages must first go up from the Templates folder to the root folder (e.g., ../images/sidebar_logo.jpg). When this template is attached to a page in the root level of the site, the same link would not be accurate. For example, the path from models.html in the root folder to the same image would simply be images/sidebar_logo.jpg. The Advanced Settings:Templates option in the Site Setup dialog box includes a check box to prevent rewriting document-relative paths when you update template files. If the check box is not active, the links on pages where the template is attached might not work properly. (Remember: You can choose Manage Site from the Files panel directory to edit the options for an existing site.) Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

New From Template option
Assets panel contextual menu New From Template option in File>New dialog box Rather than starting with a blank HTML file for every new page, you can easily create new pages from an existing template file. The Assets panel includes all template files in the site, and can be sorted to show only template files — which makes it easier to find exactly what you’re looking for. Control/right-clicking a template file in the Assets panel gives you the option to create a new file from that template. You can also choose File>New, click the Page from Template option in the left column and then select the template you want to use. Creating a new file from a template results in a new untitled HTML page, just as you would see if you created a new blank HTML page. The difference is that all content in the selected template already exists in the new untitled file. A yellow tag in the top-right corner of the document window identifies the template on which the page is based. Editable regions are identified with a light blue tag. If you move the cursor over areas other than an editable region, an icon indicates that you can’t select or modify that area. You can only modify the editable regions. Note: Even though it is not technically part of an editable region in the document window, the page title can always be modified in a page created from a template. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Apply Template to Page Modify>Templates submenu
Inconsistent Region Names You can also attach a template to an existing page, basically “redesigning” the page with a few clicks. You simply map existing content to editable regions in the template, while adding the non-editable regions to the page design. Choosing Modify>Templates>Apply Template to Page opens the Select Template dialog box, where you choose which template to attach to the active page. Make sure the Update Page option is checked before clicking Select This to maintain a dynamic link between the template and pages where it is attached, so that changes in the template automatically reflect in the regular pages. When you attach a template to existing pages, you have to determine where the page content will be added once the template is applied. If the active file is not already a template, the “editable region” in the active file is simply the Document body, or the content in the file’s <body> tag. If the active file has any user-defined content in the <head> tag, such as style definitions, you also have to determine where the Document head information will fit into the attached template. Choosing head in the Move Content menu creates an editable section within the page’s <head> tag, so that this information is not lost when the template is attached. Note: Although not specifically defined as an editable region in the Design pane, the <title> tag code is always editable when you work with Dreamweaver template files. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Apply Template to Page (cont’d)
These images are simply an example of what happens when you attach a template to an existing HTML page. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Modifying Templates Open from Files panel File>Save
Update linked files You can modify a template even after you have created pages based on it. When you edit a template file, the non- editable regions in pages based on the template automatically update to match the changes to the template. The process for editing a template file is the same as it is for editing a regular HTML page: 1. Double-click in the Files panel (in the Templates folder) to open the template file. 2. Make whatever changes are necessary. 3. Choose File>Save to save the template file. As already explained, you don’t have to use the Save As function to rewrite a Dreamweaver template file. You can simply use the Save command to save template changes. When you save changes in a template, the software asks if you want to update pages that are based on the template. Once the update is complete, another dialog box shows that the update process is Done. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Tag Selectors Format all content with a specific tag “Nested” nature
Tag selectors format specific HTML tags such as paragraphs (<p>), headings (<h1>, <h2>, etc.), unordered lists ( <ul>), and so on. When you define tag selectors, keep in mind the nested nature of HTML tags. As you saw in a previous slide, the divs in this page have the following basic nesting structure: <body> <div id=“header”> <div id=“topNav”> <div id=“image”> <div id=“pageContent”> <div id=“mainText”> <div id=“sidebarNav”> <div id=“footer”> In the example shown here, the <body> tag selector defines 12 px, medium gray type. Because the all of the divs are contained within the <body> tag, the type properties of the body tag selector also affect the type in the divs as well. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Tag Selectors (cont’d)
You can override the trickle-down behavior of tag selectors by defining different properties for specific tags (such as <p>, <h1>, <ul>, and so on). In the example shown here, a variety of tag selectors define different appearances for different structural elements. This makes it easy for both visually oriented users and users with screen-reading software to identify different types of content. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Compound/Descendent Selectors
Only affect elements in specific divs As you just saw, tag selectors control the appearance of all content that is marked up with a specific tag. The <a> tag selector, for example, affects every instance of linked text on the page. In many cases, however, you want links in different areas to appear differently — the links in a navigation list and in the main page content, for example. To solve this problem, you can define compound or descendant selectors to format certain elements only within a specific div tag. When an object is selected in the document and you click the Add Selector button in the CSS Designer panel, the new descendant selector name automatically includes the entire “path of tags” to the active selection. You can edit the default name to make it more or less specific, or leave it at the default. Of course, it is not necessary to first select the object you want to modify; you can simply type the appropriate compound selector name. In the example shown here, the #sidebarNav p selector affects only paragraphs in the sidebarNav div. Paragraphs in other areas of the page are not affected. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Pseudo-Class Selectors
a:link a:visited a:hover a:focus a:active To affect the rollover behavior, you have to define pseudo- classes (or variants) of the <a> tag. The five pseudo-class selectors for the <a> tag are: a:link refers to a hyperlink that has not yet been visited. a:visited refers to a hyperlink that has been visited. a:hover refers to a hyperlink when the mouse pointer is hovering over the link. a:focus refers to a hyperlink that is in focus, such as when a user presses the tab key to navigate through the links on a page. a:active refers to an active hyperlink. To change the pseudo-class of links only within a certain div, you can type the div name in front of the pseudo-class name. For example: a:hover #sidebarNav a:hover This would allow you to define different hover behaviors for links in the overall page and links in the sidebar navigation area. Adobe Dreamweaver CC: The Professional Portfolio Adobe Dreamweaver CC: The Professional Portfolio

Project 4: Yosemite CSS Layout

Similar presentations

Presentation on theme: "Project 4: Yosemite CSS Layout"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Project 4: Yosemite CSS Layout

Similar presentations

Presentation on theme: "Project 4: Yosemite CSS Layout"— Presentation transcript:

Similar presentations

About project

Feedback