Week 13 Summary

Understanding cascading style sheets – Another summary of how CSS works.

Making the Most of a Meta Description
Meta descriptions embed keywords and a short description in your html document. The text from the meta description displays as the description for your site when search engines display their search results. Google says that the meta content does not affect how a site ranks in a search, it only affects how it displays. The meta description is important however, because having a good concise description will affect the likeliness that people will click on your link when they see your site in the search listing. The search engine only displays the first 160 words of a meta description, so it 150 words is a good length to target when writing one. Quotations will cause the description to be abruptly cut off, so either avoid using quotes in a meta description, or change regal quotes to be only single quotes so your description does not lose content. If a site is so multifaceted, that it cannot be summed up in a 150 word summary, then it might be better to not write a meta description. The search engine will pull text from around a keyword to display if there is no meta description. This might be more affective for drawing a reader in than a description that is not relevant to the keyword they were searching for.

Save Time with Templates in Dreamweaver
-Step by step walk through of how to create custom templates in Dreamweaver.


When you create a new document in Dreamweaver, you can attach an existing CSS style sheet to your html document, or you can create a new CSS sheet at the same time, or embed the CSS into the head of the html document (you can also add CSS directly into the html on an inline level, but this is not recommended.) If you place the CSS in the head and later decide you wanted it as an external style sheet instead, you can easily move it by selecting it in the CSS rules panel and right clicking to select “move CSS rule” (likewise you can easily move rules from an external sheet into your document.)

CSS can be written to have either Absolute (an exact fixed size which will not changed based on variant conditions such as different browser window size, etc) or relative (measurements are related to other elements on a page and can change proportionally) measurements.

The most common relative measurement to use are ems. (This measurement comes from the size of a capital ‘M’ in any given font you are using.)

If you want to make a font stack which is different from the default ones which come preloaded with Dreamweaver, you can select ‘edit font stack’ from the last option from the drown-down menu next to ‘font’ in the properties inspector. Make sure to end a font stack with a generic font-type such as ‘serif’ or ‘sans serif’.

Build Better CSS Font Stacks (A helpful site for font stacks.)

From an html-only standpoint the tag for em will italicize (emphasize) text and the tag for strong bold (strongly emphasize)text. These are known as phrase element.

In CSS by default headlines will be bold. To make them not bold use the code ‘font-weight: normal’. You can also control the font weight by setting a numeric value between 100-800. 100 is the lightest possible value, and 800 is the boldest. 400 would equal normal weight.

When setting font style with CSS: Italic equals the italic version of the font. Oblique is the regular version of the font, but it has been skewed to a slant. In general it is better to use the italic option, but oblique is useful if a certain font does not have an italic version available.

Line-height In general font on a screen needs more white-space between lines in print, so do not make web line-height decisions based on print conventions. Generally 140% of your font size is a good online line-height value. You can set line height in all of the same values that you can use for font, but it also has an additional option of “multiple” (where the line height value is determined by multiplying a certain value times the font value.)

If you want a heading to be broken into two lines, use a span tag to move down the second half.

When setting margins you can use shorthand to set the value for each side in one rule. margin: Top value, Right value, Bottom value, Left value. “trouble” (TRBL) to remember.

Using padding for spacing
You can create an indent by adding padding to only one side.

Aligning Text
text-align: (left, center, right, justify)
Alignment is inherited from a parent element.
Most browsers default alignment to left, so if you do not set a text align value it is usually the same s setting ‘left’ for your value.

You can use vertical-align to create subscript and superscript text. setting vertical-align to a negative value will cause the element to get pushed below the text baseline/

Vertical align may only be used with inline elements.

Inserting links in Dreamweaver

Insert a link through the menu bar:
Insert–> hyperlink
or Common–> (hyperlink symbol)
This method is a good way to do it because the inserting dialog box prompts you to provide the most information, such as alternate text, etc. You must remember to add link names on your own if you add links with other methods.

<bAdding a link to pre-existing text
highlight txt you wish to convert into a link.
Add link (you can browse for it) in the ‘link’ field in the properties inspector (under HTML tab)

Use ‘Point to File’ icon:
The ‘point to file’ icon is next to the link drop-down field (between the box and the folder-shaped browse button, it looks like a target.) Click the icon and hold down your mouse. Drag the mouse over to the files panel. Find the file you want to link to in the files panel and select by holding your mouse over it and releasing. Dreamweaver will add it to the link box in the properties inspector.

Create a link to a file which has not been made yet
Highlight text you wish to turn into the link, in the link box in the properties inspector type in (the name off the folder you intend the linked file to be placed in when it is ready)/(name of the file to be created later). The link will be ready and will work once the future file is placed in its designated folder.

If you are linking to the same file more than once on a page, the link will be stored in the link drop-down in the properties inspector, so you have a shortcut to add it. (But you will have to re-title it each time, only the link itself is stored).

Absolute Links
When linking to an external site, it is important that you type out the entire address; you cannot leave off the ‘http’ part like you can when typing an address into a browser.
Adding target: _blank will open the link in a separate window.

Email Links
To make a link to an email address:
In the common objects menu bar there is an envelope shaped icon you can click to add an email link.
Or you can add “mailto:” in front of the email address in the link box in the properties inspector.

To force a subject line to the email when the link is clicked:
Same as above for adding email link, but after the address place a ‘?’ followed by the desired subject line.
Example: mailto:email@address.com?Subject Line Goes Here (you can have spaces in the subject line but not in the ‘mailto’ part).

Article on why it is preferred to use unordered lists when creating navigation: Unordered Lists: More than Just Bullets

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