Transcript fourth lec(1)

Chapter 3
Working with Text and Cascading
Style Sheets
Chapter 3 Lessons
Introduction
1. Create unordered and ordered lists.
2. Create, apply, and edit Cascading Style Sheets.
3. Add rules and attach Cascading Style Sheets.
4. Use coding tools to view and edit rules
Introduction
Formatting Text as Lists
• Breaks up text
• Increases readability
• Three types of lists:
– Unordered
– Ordered
– Definitions
Introduction
Cascading Style Sheets
• Formatting instructions
that control the
appearance of content on
a web page
• Benefits:
– Saves you time
– Ensures consistency
– Can apply formatting
attributes to an entire site
Lesson 1: Create Unordered and Ordered List
Creating and Formatting Lists
• Unordered or bulleted lists
– Preceded by bullet or small
dot or similar icon (Click List
Item in Property Inspector to
modify)
– Select paragraphs of text to
be included in list  Click the
Unordered List button in
HTML Property inspector
– Default bullet style is a round
dot
• Ordered or numbered lists
– Preceded by numbers or
letters in a sequence (Click
List Item in Property
Inspector to modify)
– Select paragraphs of text to
be included in list  Click the
Ordered List button in HTML
Property inspector
– You can apply numbers,
Roman numerals, lowercase
letters, or uppercase letters
to an ordered list.
Lesson 1: Create Unordered and Ordered List
Expanded Property Inspector
Ordered (numbered) list button
Property
Inspector
expanded to
full size
Unordered (bulleted) list button
List item (Properties) button
Click arrow to collapse
Property inspector
Lesson 1: Create Unordered and Ordered List
Formatting a List Style
List type list box
Ordered/Unordered
list styles
Lesson 1: Create Unordered and Ordered List
Creating Definition Lists
•
•
•
Definition lists do not
have bullets
Select paragraphs of
text to be included in
list
Click Format  List 
Definition List
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
Cascading Style Sheets (CSS)
• CSS made up of rules
– Define the formatting
attributes for individual styles
– Are classified by where the
code is stored
• CSS also classified by type
1. Class – used to format any
page element
2. ID & Tag – used to redefine
an HTML tag
3. Compound – used to
format a selection
• CSS saving options
1. External style sheet –
saved as a separate file
• saved as .css and
stored in directory
structure of website
2. Internal or embedded –
part of head content of
individual page
3. Inline style – part of the
body of HTML code
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
New CSS Rule Dialog Box
Class option for Selector
Type
New style name
Rule Definition list
arrow
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
Cascading Style Sheet File
New Cascading Style Sheet file
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
Using the CSS Styles Panel
• To create, edit, and link a
CSS style
• Apply CSS styles to a
single page or all pages in
a website
• Used for managing your
styles
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
Advantages of Style Sheets
1.
2.
3.
4.
5.
Save an enormous amount of time
Uniform look
Cleaner code
Separates development of content from presentation
Compliant with current accessibility standards
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
Understanding CSS Style Sheet Code
• The selector is the name
of the tag to which the
style declarations have
been assigned.
• The declaration consists
of the property and the
value.
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
Applying a CSS Rule
1. Select Text
3. Click Targeted
Link to apply rule
to selected text
2. Change Properties
Inspector to View CSS
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
Editing a Rule
• A Rule Can be edited
either in:
– CSS Style Panel
– Code View
1.Select Rule
from CSS Styles
Panel
2. Select
Property to
Edit
3. Choose
Modification
from list arrow
Lesson 3: Add Rules and Attach Cascading Style Sheets
External and Embedded Style Sheets
• External .css files are stored outside of the web page
• Embedded style sheets created automatically by
Dreamweaver and are stored within web page
• To embed a style sheet:
– Access the New CSS Rule Dialog Box
– Under Rule Definition, select This Document Only
• Code stored in Head content of file
• Named style1, style2, etc. (can be renamed)
Lesson 3: Add Rules and Attach Cascading Style Sheets
Attaching a Style Sheet to a Page
• Created to ensure a consistent appearance to your site
• To attach a style sheet:
1.
2.
3.
4.
Click Style Sheet button on CSS Styles panel (opens Attach External
Style Sheet dialog box)
Check to verify Add as Link option is selected
Browse to locate the file you want to attach
Click OK
• New rules will appear in CSS Styles panel to be applied to text on
page
• If you make change to rule it affects every objected formatted by it
Lesson 3: Add Rules and Attach Cascading Style Sheets
Attaching a Style Sheet to a Page – cont.
su_styles.css style sheet selected
Link option button
Lesson 3: Add Rules and Attach Cascading Style Sheets
Related Files
• When an HTML file is linked to other files necessary to
display the page content, these files are called related
files.
• It takes both the HTML file and the CSS file working
together to display the content properly.
HTML File
CSS File
Lesson 4: Using Coding Tools to View and Edit Styles
Coding Tools in Dreamweaver
• Coding toolbar is displayed on the left side of the
Document window
– Designed to remain stationary
– Cannot move it, but you can hide it
• Remember that you have several View options you
can also use while viewing your code.
– Word Wrap, Line Numbers, Hidden Characters, Highlight Invalid
Code, Syntax Coloring, and Auto Indent
Lesson 4: Using Coding Tools to View and Edit Styles
Using Coding Tools to Navigate Code
• Collapse sections of code as your page gets longer and
code more complex.
• Using the Collapse Full Tag or Collapse Selection buttons
on the Coding toolbar will allow you to look at two
different sections of code that are not adjacent to each
other in the code
• Apply comments to add documentation to your code
• Code containing errors can be identified and fixed by
using the Highlight Invalid Code command
Lesson 4: Using Coding Tools to View and Edit Styles
Using Code Hints to Streamline Coding
• As you are typing code, Dreamweaver will recognize the tag
name and offer you choices to complete the tag simply by
clicking a tag choice in the menu
Lesson 4: Using Coding Tools to View and Edit Styles
Converting Styles
• To convert one type of style to
another you can:
1. In Code View  select style 
right click  point to CSS Styles
and then Move CSS Rules
2. In CSS Styles Panel  select style
 right click  Move CSS Rules
3. In CSS Styles Panel  select style
 drag to new location
Chapter 4
Adding Images
Chapter 4 Lessons
Introduction
1. Insert and align images
2. Enhance an image and use alternate text
3. Insert a background image and perform site
maintenance
4. Add graphic enhancements
Introduction
Using Images to Enhance Web Pages
• Graphics refer to the appearance of most non-text items
on a web page, such as:
–
–
–
–
–
–
Photographs
Logos
menu bars
Flash animations
Charts
background images
Introduction
Using Images to Enhance Web Pages
•
•
•
•
Use graphics sparingly
Can complement content of pages
Store images in separate folder (assets)
Three web graphic file formats:
– GIF (graphics interchange format)
• Maintains transparency, can include animations
– JPEG (joint photographic experts group)
• Good for photo images
– PNG (portable network graphics)
• Can display many colors, maintains transparency
Lesson 1: Insert and Align Images
The Assets Panel
• Located in the Files panel
group
• Displays all the assets in a
website
• Has Favorites button
• Contains nine categories
• Buttons:
–
–
–
–
–
–
–
–
–
Images
Colors
URLs
SWF
Shockwave
Movies
Scripts
Templates
Library
Lesson 1: Insert and Align Images
The Assets Panel – cont.
Site option button
Category buttons
Favorites option button
Thumbnail of selected
image
List of images in website
Refresh Site List
Drag any panel border
or corner to resize
Lesson 1: Insert and Align Images
Image Placeholder
• You can insert an image
placeholder to hold the image
position on the page
• An image placeholder is a
graphic the size of an image you
plan to use
• To insert an image placeholder,
use the Image Placeholder
command on the Image Objects
menu
Lesson 1: Insert and Align Images
Aligning Images
• Aligning images means to
position them in relation to
other elements on the page
• Default:
– bottom edge aligns with the
baseline of the first line of
text or any other element in
the same paragraph
• Alignment settings will be
added by using CSS rules
Lesson 2: Enhance an Image and Use Alternate Text
Enhancing Images
• Improving the appearance
of an image
• Changes to image can be
done using image editing
software such as:
– Adobe Fireworks (default)
– Adobe Photoshop
Lesson 2: Enhance an Image and Use Alternate Text
Borders and Horizontal and Vertical Space
• Borders
– Frames that surround an
image
– Added in CSS
• Horizontal and Vertical
space
– Blank space around the
image
– Helps image stand out
– Does not affect size of image
– Added as Margin in CSS
Lesson 2: Enhance an Image and Use Alternate Text
Alternate Text
• Text that appears in place of an
image when the image is
downloading or when the
mouse pointer is placed over it
• Makes your web page viewerfriendly and handicapped
accessible
• The first checkpoint listed in the
Web Content Accessibility
Guidelines (WCAG), Version 2.0,
from the World Wide Web
Consortium (W3C)
• The twelve WCAG guidelines
are grouped together under
four principles:
– Perceivable
– Operable
– Understandable
– Robust
Lesson 3: Insert a Background Image and Perform Site Maintenance
Background Images
• Provides page depth and
visual interest to page
• Used in place of background
colors
• Avoid inserting them on
web pages where they
would not provide the
contrast necessary for
reading page text
• Use either a background
color or a background
image, but not both
• Keep file size small
• Use a tiled image
– Small graphic that repeats
across or down a page
• Or a larger non-tiled image
• Use background images or
colors for sections of pages
Lesson 3: Insert a Background Image and Perform Site Maintenance
Managing Images
• Adding and removing background images
• Delete unused files from assets folder
• Store original unedited copies of website images files in
separate folder outside the assets folder
• If you edit the original files, resave them using a different
name
Lesson 3: Insert a Background Image and Perform Site Maintenance
Managing Colors
• You can use the Assets panel to locate non-web-safe
colors in a website
• Non-web-safe colors are colors that may not be displayed
uniformly across computer platforms
– They still may be used
– Experiment by choosing colors outside the default color palettes
to create a color scheme that complements your website
content
• Use the eyedropper tool FPO to pick up a color from a
page element, such as the background of an image
Lesson 3: Insert a Background Image and Perform Site Maintenance
Managing Colors – cont.
Preview of the color that
will be used if you click
here with the Eyedropper
Color code changes as you move
the Eyedropper over the image
Lesson 4: Add Graphic Enhancements
Thumbnail Images
• A thumbnail image is a small version of a larger
image allows more images to fit on the page
• Why are they used:
– display a small image on a page with an option for the viewer to
click on the image to display a larger image
– It is done both to conserve space and to keep the page size as
small as possible
Lesson 4: Add Graphic Enhancements
Favorite Icons
• Icon that appears with your page title when a page is
bookmarked that is used to represent your site
– Called favicon
• Steps to Create:
1. Create an icon that is 16 pixels by 16 pixels
2. Save the file as an icon file with the .ico file extension in your
site root folder
3. Add HTML code to the head section of your page, above your
<title> code, to link the icon file (example:<link rel="shortcut
icon" href="starfish.ico" type="image/x-icon" />
Lesson 4: Add Graphic Enhancements
Protecting Images
• Prevent Website viewers from saving images from your
site by:
– Adding JavaScript Code to prevent right clicking or appearance
of shortcut menu
– Adding image as a table, cell, or CSS block background and
placing a transparent image on top of it
Assignment 2