web text, lists and css...web text, lists and css rev 07/03/10 review: dreamweaver work space menu...
TRANSCRIPT
Web Text, lists and CSS rev 07/03/10
Review:
Dreamweaver Work Space
Menu bar
Insert Bar Document bar
Objectives:
Utilize the Property Panel to specify text formatting
Choose between HTML and styles
When to use serif and sans serif fonts
Create ordered and unordered lists Utilize Cascading Style Sheets
Open your Classwork site
Start a new blank HTML page and save as text.htm
Adding a background color to a page
Modify>Page Properties>Background Color
Make the page Background attribute be a light blue
Look at the HTML: Dreamweaver created a style and
embedded it in the page
When possible, use styles to specify formatting
Type the following:
This is a practice page to show how to format text (Press Enter after each line)
It also has a list of my favorite TV shows
Add a show title here
Add a 2nd show here
Add a third show here
Basic Text Editing Use the Properties panel Select the first line
Click the HTML button
Try bold, italic, undo Select your shows and make them into an unordered
list
Can specify a link….do it
You can take advantage of some built‐in formatting…click
the drop down list:
Select the first line and make it a heading 1
Headings
Headings use what are called relative sizes. All <h1> means is it’s
larger then< h2>, and< h2> is larger than <h3> etc.
Many visitors modify their browsers so all the type is larger, so
relative sizes scale well for them. If you specified the exact pixel
size, the user’s browser wouldn’t scale the text
Here is how you resize text in Internet Explorer
Look at the HTML code (Split button)
Browser will use default fonts, formatting of built‐in
tags
Web fonts
We generally use serif fonts for headings and sans serif for body text Commonly used Serif Fonts:
Georgia Times (New Roman)
Commonly Used Sans Serif Web Fonts:
Arial Verdana
Styles: Introduction
Assume a site has 150 pages, each having a section that is highlighted with red text, Georgia font, 16 px, with a thin solid border.
Now the client wants the highlight to be yellow text, Arial font, 18 px, with a thick grooved border. Not only do you have to change 150 pages, but now you have to remember all 5 changes on every page. What a mess!
Or, on every pageyou used the BgColor attribute of the <body> tag as you did previously
Or, you embedded the style as we just did
The solution: Cascading Style Sheets
Click the CSS button
Now, because we can, let’s redefine H1 using CSS
Delete the current style information:
CSS locations
Three Ways to Insert CSS
(http://www.w3schools.com/CSS/css_howto.asp)
External style sheet (.css file) Internal style sheet embedded in <head> section…use if have
unique need in a single page Inline style…embedded in the tag..don’t use
Selecting the Target
Can apply styles to existing tag Can define and apply to anything (called Classes) Can apply to only one item on the page (Called an ID)
Properties Panel: Targeted Rule Dropdown
Select the CSS button Look at the Targeted Rule drop down Choose <New In‐line Style>
Because it’s easiest to use
Click the CSS Panel button
to open the CSS panel
Click the New CSS Rule tool
Here are the selector options:
Applying rules to tags
Choose Tag>H1
Say to apply to this document only:
Click OK Now, make your changes
Maybe make <h1> bold, 110% larger than the default size, and
you want a Red color:
Click Apply Click OK
Now, click the CSS button, and look at the properties:
Applying Styles to Anything: Classes
Let’s use the Properties Panel to create a new style that can be applied
to anything, and who’s definition is saved in an external style sheet file
Click CSS button In Targeted Rule, choose <New CSS Rule>
Click New CSS Rule button
Name the rule .MyFont (Note the dot)
Choose to save the definition in a new style sheet:
Note: The selector name says the style associated with .MyFont will be applied to
every tag that specifies to use the class name of .MyFont… will come back to
this
Name the new style sheet MyCSS.css
Now, we need to define the class
On the Type category, choose:
Choose Background, and add a color:
Click OK Select your second line of text and apply the new class
Fonts If user doesn’t have it, browser will try to substitute one There are 3 fonts/line..tries first one, if not found, tries second
one and so on
Can add a font to the list, but remember that visitor must have
that font on their computer
Choose serif for heading (Georgia, maybe)
Sans serif for body (Verdana, perhaps…read to avoid Arial; because there is no standard definition (are 7 variations)
Text Size
Change the text size of your first TV show to be 36 points (on your own)
There are many units to choose among:
o Many designers use ems (relative to the size of small letter
m)
o That way, if the viewer has selected a large text size inside
their browser, your text will scale to the size viewer’s font’s
letter m
Selecting the Font Family
You can’t without creating a new class: Let’s add the new style to MyCss.css
The new style is automatically created…click Edit icon to
customize
Go ahead and create the style
Here’s what I specified:
Lists
Specify an unordered list (<ul>) to your 3‐shows text lines (the easy way…you don’t have to type in the HTML; let Dreamweaver
do it for us!!)
Select the three and make them an unordered (bullets) list
Now, make them an ordered list
The HTML (looks familiar!)
Seems to have overwritten our classes; just reapply them
Note: People tend to view an ordered list as implying importance
(show 1 is most important). This isn’t true with unordered lists
Cascading Style Sheets (CSS) Why are they important?
o Let’s say we have 100 pages in a site. All have a <H1> tag. Boss says, I want all H1 heading’s to be Times New Roman, 36 pixels, bold red.
o You say “**&*&***”!!! If you use CSS, no problem!!
CSS is a separate file with .css extension, which you have to FTP to your site (Dreamweaver should do this automatically, if you choose to FTP dependent files.
Can define a new format for existing tags
You can even define your own styles (BigBlue, for example)
that can be applied to anything.
On your own now: change the way paragraphs display
Change p tag definition to be 16 pixels, Dark Gray, Verdana
Click Apply, then OK File>Save All
Let’s apply the new style to an existing page
Open an existing page (picture.htm) o Type Here is a cat picture o Make it a <h1>
Must tell Dreamweaver to use the MyCSS.css file
Text>CSS Styles>Attach Style Sheet
Chose MyCss.css
Click apply
o You would need to go through (Attach style sheet..) this for every
page you wanted to apply the style to
o Unless you use that’s called a template
THE END