Chapter 1 OUTLINE,
CSS
Style Sheet
Markup languages
Render
Element
Tag
Start tag
End tag
Web page
is displayed in browser as it is created
Parts of Expression Studio
Expression blend: video, vector art, animation, 3D content
Expression Design: graphic art, illustration
Expression Media: manages media files
Expression web: Web development
Task panes---àReset
Workspace Layout
View-àToolbarsàCommon
Components of work space
Menu bar
Common toolbar
Status bar
Editing window
Task panes
Aspects of the common toolbar: Combines the most common features of the
Formatting and Standard toolbars.
Operation: Create a new web page:
FileàClose
Then
New Document on Common Toolbaràopens
a new web page
Document tab: Shows the name of the web page (if not specified,
Untitled_1.htm)
Design view
Code view
View button
Code tab (see pix p 8)
Body tab: a container for all the
HTML code on the page
Resize window bar: pix p 9
World Wide Web Consortium: Controls the HTML and CSS standards
DOCTYPE
1. Start <HTML>tag: follows DOCTYPE
and contains all the rest of the document, whether visible to browsers or not.
The whole document is contained between Start<HTML> and end </HTML tags
2. Start <head> and end </head>
contains title of web page, some CSS code and some HTML code to indentify
document to browser
3. Start <title> and end </title> contains everything in the title bar
4. Start <body> and end </body> tags contain all the content of the web page
that appears in the browser
Vocabulary:
Task panes
Tag properties task pane: shows all the ways you can modify a HTML tag at the
current location of the insertion point. Has two sub tabs: Tag properties
specifies HTML changes, CSS properties specifies CSS changes.
Toolbox task panes: groups the commonly used HTML tags
Apply styles task pane: to create and modify styles
Manage styles task pane: to organize and move CSS styles.
Operation: To position and close a task pane:
Task pane can be clicked and dragged anywhere in the editing window
Using the Status Bar
Status bar is located at the bottom of the workspace
Elements of the status bar
1.
Visual aids – used to display white space and padding which are usually not
seen
2.
style application – usually in Auto
3.
Download statistics – indicates the size of the page in bytes
4.
Rendering mode – usually in Standard – indicates that standard HTML/CSS code is
in use
5.
Page size – the page size in pixels. This has no effect on how the page appears
in the browser. Page size can be set to any value
6.
Schema indicator – notes that EW is using XHTML currently
7.
CSS indicator – notes that EW is using CSS 2.1
Creating a web site
1.
The home page for most web sites is named
default.htm or index.htm
2.
File names should be lowercase, have no punctuation except the underscore
character and should begin with a letter, not a number
3.
File names should be not more than 8 characters, with no spaces
4.
Always close all other pages before starting a new page, otherwise open
pages will be added to the new web page.
5.
Pick a storage location for the new web site
6.
Click Open. A text box opens
7.
In the text box, type the name of the new web site
8.
close text box
1.
In design view, right click anywhere in the page. A
dialog box appears
2.
pick Page Properties
3.
click General
4.
Enter a title in the title box
5.
in the Page Description box, enter a description and/or your name and date
6.
close the dialog box
2.
To save, as usual for Window, or press Ctrl+S
3.
In file menu, specify save as
4.
type
nameoffile.htm
5.
Note icon of pencil writing on paper before the open file in folders list;
indicates that the file is open
6.
Once file has been saved, it can be viewed in browser
7.
Use F12 key or preview from file menu
CHAPTER 2 OUTLINE
FORMATTING TEXT; learning how HTML
formats text.
A.
Working with Page Properties
Page properties are used to provide information to search engines
1.
Page title is scanned by browser, should be brief and descriptive, less than 70
characters long
2.
Page properties also include: formatting characteristics, page description,
keywords and background color
3.
Neither the page description nor the keywords appear in the browser web page
4.
To change the text color or background color,
use
Formatting
tab of Page Properties dialog box (see p 40). Colors can also be changed
from the menu bar.
B.
Using the Quick Tag selector bar
1.
The quick tag selector bar is fixed at the top of the editing window
2.
QTSB can be used to remove the tag and contents, or only contents of tab, modify
contents, open the quick tag dialog box or open the properties dialog box for a
particular item
3.
The quick tag selector bar is also known as the
breadcrumb bar….
C.
Viewing the page in the browser
Save the page and then view in the browser by using F12 or the file menu.
D.
Working with the Common Toolbar
1.
Changing the size of text
HTML has six heading elements (h1 through h6). These do the following: Change
the size of text, change it to BOLD, and also insert a line before and
after the heading. The point size of the
heading can be changed independently (see p 47) and are not completely linked to
h size. A POINT is 1/72 of an inch.
A keyword in CSS is different from a keyword in a web page. The CSS
font-property keywords (7) are used only
to change the size of text.
2. Working with Fonts
See vocabulary cards re: fonts, font families, etc
HTML fonts are grouped into five
major categories: serif, sans-serif, monospace, fantasy and cursive.
It is usual to select a font list,
to accommodate Windows and Apple products and browsers of other types
For example: Arial, Helvetica, sans serif
Gives a font used by PCs, a font used by Apple, and one which will be recognized
by most other browsers.
3
Working with Color
Colors can be specified by a. RGB triplet, b.name or c. hexadecimal code. EW
refers to colors by name, although it uses hexadecimal code based on the
intensity of red, green and blue. 00 is the lowest intensity, FF is the highest.
The hexadecimal code is preceded by the Flag Character,
#
which signals that the following numbers are code rather than simple numbers.
Short hex is a shortened form the hexadecimal code.
4. Using Expression Web’s
Editing Tools
The Standard Toolbar has buttons not on the Common toolbar, especially
Spelling, Cut, Copy, Paste and Format Painter and Show Formatting (which
shows nonprinting characters)
To check spelling:
display the standard toolbar and use buttons to spell check, etc.
To use the thesaurus feature (synonyms): click on the word in
question, then Shift+F7 to display synonyms.
Find and replace
can be used for words or HTML code.
Click on binoculars icon on standard toolbar. Find and replace box opens
Copy and Paste
can be used, but material should be copied into EW without formatting,
otherwise EW will insert nonstandard HTML and inline codes with the pasted
document. Before pasting, remove all formatting such as italics and bold. To
undo pasting, press CTRL+Z.
If you want to copy and paste an HTML file, it can be imported
without alteration.
Definition: format painter: (paintbrush icon) moves format from one
part of a document to another.
Working with dialog boxes
Creating lists
Ordered lists
Unordered lists – are created with the bullet button on the common
toolbar
Definition lists – create a hanging indent
<li> precedes every item in a list
<ul> and </ul> indicate an unordered list
<ol> and </ol> indicate an ordered list
Bulleted lists are unordered lists.
Changing the bullet type:
Select the <ul> or <ol> contents
Click Format on the menu bar
Select type of bullet from gallery
The list style type sets the style of the numbers or letters of an ordered list
(Arabic, lowercase Roman, uppercase Roman, lowercase letters, uppercase letters
Understanding Hidden Files and Folders
EW keeps track of all files in two hidden folders which are not in the
Folders List... These will appear in Windows Explorer if WE is set to
display hidden files. Metadata
is information about the web site and is contained in a _vti folder or a _cnf
folder. Never delete these folders from EW.
The paragraph dialog box
is used to add word spacing and to create a
spread heading to add extra white
spacing between the words to spread the words apart. You will not see the
effects of word spacing in design view, only in the browser. Use the paragraph
dialog box to change word spacing.
Use the font dialog box to change
character spacing.
Creating line breaks
To create a new line as a space line, you must enter an HTML
Break Tag. A break tag creates an
empty line, just as pressing the enter bar once.
A break tag looks like this
<br/>
It is an empty
element; it has no content, and no opening and closing tag. The break tag only
performs an instruction. All empty
elements are ended with a space/slash combination:
<br/>
Creating a horizontal line.
In
HTML a horizontal line is called a
horizontal rule. Its tag is
an empty element,
<hr/>
Creating a document footer
Footer is the last line on the page.
Symbols are characters that
cannot be entered from the keyboard, such as registered trademark and copyright
symbols
Inserting HTML code
Example: inserting a HTML comment
In the editing view, click CODE to display code view
Position the insertion point after the start <head> tag, and leave
blank lines before and after.
Press CTRL and /
this enters the code for comment:
<!-- -- >
Type first and last names and date, which will lie between the
characters for the comment
Vocabulary:
What is the term for an indent on both sides of a paragraph?
Block quote
‘What tag ends a line short of the right margin?*
A <br/> tag
*The
break tag stops a line and inserts a blank line wherever used.
Chapter 3 Outline
FORMATTING WITH CSS
Page properties do not appear in the document area of the web page. Page
properties include web page title, page description and keywords
Recognizing the importance of CSS
Chapter 2 employed direct formatting; CSS formatting may apply to many
pages
Advantages of CSS: greater consistency, easily modified, more flexible
formatting, greater functionality (many operations not available in direct
formatting or HTML are available in CSS)
The present version of CSS is 2.1
No browser has complete cross-browser support for CSS, so it is important
to test your web page in the current and prior version of each browser.
Composing CSS Styles and Rules
A CSS style is a collection of one or more rules that declare how an
HTML selector will appear in the browser.
A selector identifies the element to which the style is applied.
A style sheet is a collection of styles, and can be written within the HTML
document or as a separate style
CSS rules have three parts:
A selector, a property and a value
The selector identifies the element to which the style is applied
An example of a selector is
H2
CSS has several types of selector. The three most common are
Element selector
used to format a single HTML element
Class selector
used to format multiple HTML elements
ID selector
used to format a single instance of a HTML element.
The property defines how the selector will be changed
The value indicates the manner or extent to which the selector will be
changed, in words, numbers or percentages.
Understanding CSS syntax
In CSS code, the selector is written first, followed by a brace, then each
property or value pair (separated by a colon), with a semicolon separating each
pair (declaration)
E.g.:
H2 {font-style: italic; font-family: Arial, Helvetica, sans-serif}
Pick a format and stick to it, or to the format selected by your employer.
Determining where to write styles
CSS code is written in external style sheets, internal styles sheets and inline
styles
Each browser has its own styles as well
RULES FOR EXTERNAL STYLE SHEETS
An external style sheet contains only CSS code and is usually preceded by a CSS
comment:
.
/*this is a CSS comment*/
NO HTML CODE OR ANY OTHER TYPED CHARACTERS OR SPACES IN THE CSS EXTERNAL STYLE
SHEET
Saving the CSS file
Name the file with the .css extension
Do not include spaces in the file name
Do not begin the file name with a number
After the file is created, enter code in the HTML documents that will use the
file. The
link tag is used to attach a CSS
style sheet to the HTML file.
The link tag is written in the <head>
section
EW creates the <link> tag code and uses the Folder list task pane to keep track
of the CSS file.
Tips:
A CSS file has a different icon, the letter A, in the folders list
The CSS file must not have any code before its own code; otherwise the style
sheet may not work
Using internal styles p. 111
RULES FOR INTERNAL STYLES
Internal styles are written in the <head> section
of the HTML document. The internal style is also called an EMBEDDED
STYLE.
Internal styles are used only in the document for which they are written. They
use the style element (?); they have a
start <style> tag and an end </style> tag. The
type attribute. With a value of
text/css is always entered within the two style tags. EW writes
most styles as internal styles, and
generates all the code for you.
By developing the pages with internal styles, a. the code is available to be
modified and b. you can use the internal style and the Manage Styles task pane
to create an external style sheet.
RULES FOR INLINE STYLES
Using inline styles p112
The inline style is written in the <body> section and format only a section
of text. Use these sparingly.
An inline style
Is similar to direct formatting
Has to be revised by hand
Is included as part of the start tag for an element
Uses
the style element
Cannot be named
Does not appear in the styles list in the manage styles task pane
Cannot be moved from one document to another
Although the Page Properties dialog box creates an inline style to change
the background color of the document, it is better to make these changes in a
separate style sheet, not from the Page Properties box.
Types of CSS styles
External
in a separate document
affects some of all pages in a web site
Internal
in the <head> section
affects only the page
Inline
in the <body> section
affects only the section of page
The Apply Styles Task pane icons
Bullet color
means
Blue
element
based style rule
blue
Green
class based style rule
ssss
Red
ID based style rule
rids
Yellow
Inline based style rule
yelling
Circle around a bullet means that this style rule has been applied to at least
one HTML element on the page.
Specificity
refers to how conflicts among styles are resolved. In general, the most
specific style, the inline style, prevails. If there is a conflict, the
style farthest down in the list prevails. In a conflict between two styles
at the same level, selectors have different weights
ID selectors weigh 100
Class selectors weigh 10
Element selectors weigh 1
Using the same declaration for multiple selectors
For example
Selector:
h3, h4, h5
Declaration: font-family: arial, Helvetica, sans-serif
Can be grouped as
H3, h4, h5 {font-family: arial, Helvetica, sans-serif}
Using Contextual (descendant) selectors
A contextual selector is a selector within another selector.
Contextual=descendant
You can nest tags to apply multiple formatting to the same feature, e.g.
<strong><em>some
text</em></strong>
Applying Selector Style Inheritance
If a parent element is styled, you do not have to style its child element
Creating a CSS Style
1.
in the Apply Styles or Manage Styles task pane, click New Style (or from
Format on the Menu Bar)
2.
Choose a selector
Class selector:
.class
Element selector:
#class
Inline: choose from list
Define the style in the chosen page
Chose and option in the Category bar, text boxes and list boxes
Close boxes.
Creating a style using an element as a selector
A SELECTOR: AN ELEMENT OR CLASS TO BE STYLED
CLASS SELECTOR: A SELECTOR USED TO FORMAT MULTIPLE HTLM ELEMENTS
E.g., using a HTML element such as h1
Using the font properties to create a style (CSS2.1 font properties)
Font-family
changes font
Font-size
changes size
Font-style
italic or not
Font-variant
small caps
Font-weight
bold or not
Text-transform
changes capitalization
Color
changes text color
Text-decoration
changes under and over lining
Enclose multiple word Fonts in quotations: h3 {
font-family:
“Times New Roman”, times, serif
Using
the font shorthand property in Code View
Shorthand allows you to write the properties without identifying each one. Write
the element title (h2, etc) then each of the values without stating the
property, but separated by spaces:
H3 {
font: italic normal 1.5em
Arial, Helvetica,
sans-serif}
In the above, the program assumes the properties because the values are specific
to a group of properties (see above)
Changing a font family.
EW has only three font families, but you can create your own families. The font
list should still always end with an option for one of the generic fonts, so any
browser will be able to recognize at least one font.
Changing a font size
Each page should have only one or two h1 headings, as they are large and
overwhelm the page. The size can be specified in
A keyword (the sizes displayed in the h1 dropdown list)
As em values, which is the default, usually 12 pt (2 em equals twice the
default)
As percentages; 200% is twice the default value
Changing the font weight
The font weight property makes the text bold (or not) from the drop-down list,
or you can specify bold in values from 100 to 900.
700 are a “normal” bold as it would appear from the drop down list. Not
all browsers support specifics for bold; you should use the drop-down bold only
Making text italic
The font-style property makes the text italic or not. Do not use
oblique as it is generally not
supported.
Working with Text Capitalization
Use the font-variant property to display the text in small caps. Use the
text-transform property to capitalize,
which capitalizes just the first letter, or
none, which capitalizes no letters,
or uppercase which capitalizes all
letters.
Working with color
When you pick a color, EW displays the hex number of the color, but not the name
of the color.
The text decoration property