Week 12 Summary

Killer Web Content Examples of headlines and summaries that were both successful and unsuccessful at grabbing readers’ attention. Content written for the web is generally more successful when it is concise and quickly reveals how it relates to the reader’s interests.

CSS Cheat Sheets -Gives downloadable pdfs of basic CSS code in an easy to reference list.

Whats New in Dreamweaver CS5 CSS Layouts
An overview of changes made to the CSS layouts that come with Adobe Dreamweaver, and explanations for the best ways to code so that your layout will work in all browsers. For example, when making lists for navigation links, it is best to set the margins and padding to zero. You can add the spacing in the .content selector. Lot of code examples to illustrate various basic functions you’d want to include. How to add widgets for making drop-down navigation links. Explanations to why it’s important to include focus as well as hover state in your link code, etc.

Dreamweaver CSS Starter Pages

When you create a new document in Dreamweaver you have the option of choosing a starter CSS layout with the structure already in place for various types of pages (such as a one or two column fixed or liquid layout with options of a header and footer, etc.) You can attach the CSS code either from linking to an external style sheet, embedding the CSS in the head of the HTML document, or adding it as an inline style.

Edit–>Preferences–>CSS Styles here you can set whether or not Dreamweaver recognizes shorthand notation. (Checkboxes under ‘use shorthand for’.

The CSS panel: You can add properties to the CSS rules by highlighting them in the CSS panel and selecting ‘add property’. You can choose a property from the drop down or type one in.
In the bottom of the CSS panel is a button that looks like a sheet of paper with a corner folded down and a plus sign to one side. Click this button to add a new CSS rule.

Using the code navigator. If you click inside any element a symbol like a steering wheel will appear. clicking on this symbol will bring up a window that lists all the styles affecting the element. This is an easy way to edit the styles applied to the element.

Class selectors are an HTML attribute. Add a class by selecting it from the pull-down menu in the HTML tab of the properties inspector.

ID selectors are more specific than class selectors and will override a class selector when the two are in conflict.

In Dreamweaver, dotted lines will appear to differentiate a DIV. DIV tags divide your page into specific regions. Most pages have a wrapper containing all of the DIVs. The wrapper establishes the size of the page’s content.

It’s best to keep your CSS simple.

The Box Model all of the components of your webpage are contained in boxes. The boxes have 5 properties: width, height, padding, border, and margins. Adjusting these properties will keep the content from getting too close together and give you options in controlling the site’s appearance.

You provide 2 values to set a margin: The first value affects the top and bottom of an element and the second value determines the element’s right and left. Browsers automatically add default vertical margins, so setting the top and bottom margin value to 0 will prevent you from having extra margins.

This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s