DWCS5 Tutorial 06x

Download Report

Transcript DWCS5 Tutorial 06x 

Tutorial 6
Creating Reusable Assets and Forms
Objectives
• Session 6.1
– Explore the head content of a page
– Add keywords to a page
– Add a meta description to a page
– Explore libraries and create a library item
– Add a library item to Web pages
New Perspectives on Adobe Dreamweaver CS5
2
Objectives
• Session 6.2
– Create a template
– Create Web pages from a template
– Edit a template
– Create a nested template
• Session 6.3
– Add a form to a Web page
– Set form attributes
– Add form objects to a form
New Perspectives on Adobe Dreamweaver CS5
3
Session 6.1
Reviewing Head Content
• Head Content
– All Web pages contain head content
– Refers to anything that is placed within the
<head> tags of Web pages
– Two tags commonly inserted into the head are:
• Base
–Enters the desired base URL for the page’s
document relative links
• Link
–Links an external style sheet to a page
New Perspectives on Adobe Dreamweaver CS5
4
Reviewing Head Content
– Meta Tags
• Hold information about a page
• Give information to the Web server
• Add functionality to a page
• Used by search engines to learn about a page
• Used to add keywords and descriptions
New Perspectives on Adobe Dreamweaver CS5
5
Reviewing Head Content
– Use Insert Panel Buttons to add meta tags in
Dreamweaver
• Meta
• Keywords
• Description
• Refresh
New Perspectives on Adobe Dreamweaver CS5
6
Optimizing Web Pages for
Search Engine Placement
• Optimizing Pages
– Important to optimize Web pages for search
engine placement
– Search engines enable people to find the site
– Optimizing means everything possible is done to
ensure that the page is ranked highly in target
search engines
• Add keywords
• Include a meta description to the head
New Perspectives on Adobe Dreamweaver CS5
7
Optimizing Web Pages for
Search Engine Placement
– Optimization does not guarantee inclusion
• Will help the site receive higher listings when it
is listed
– Each search engine has a different set of formulas
that determine page placement
• Formulas are closely guarded secrets and
change frequently
New Perspectives on Adobe Dreamweaver CS5
8
Adding and Editing Keywords
• Many search engines use keywords to index Web
pages
– Descriptive words or phrases (fewer than six) that
are placed in meta tag with the attribute
name=“keywords”
– Use words that most people would type into
search engines to find the page
• Include name of the company and products or
services in the list
– Type in lowercase letters with comma between
New Perspectives on Adobe Dreamweaver CS5
9
Adding and Editing Keywords
– Use as many keywords as desired, but first 10 are
the most important
• Many search engines only use first 10 in the list
to index a site
• Make sure the keywords used in the list are
contained in the Web site many times
–May result in a higher search engine
placement
New Perspectives on Adobe Dreamweaver CS5
10
Adding and Editing Keywords
• Adding Keywords and Examining the HTML Code
– Easiest way to add keywords is to use Insert Panel
• Dreamweaver creates all HTML code
New Perspectives on Adobe Dreamweaver CS5
11
Adding and Editing Keywords
– Keywords can also be typed directly in Code view
• Use all lowercase letters
• Separate each word with a comma
– Meta tags are unpaired tags
• Each tag stands alone
• Not part of a set of opening and closing tags
• Editing Keywords
– Can add and/or delete keywords by editing the
current keywords list
– Use Property Inspector in Code View to edit
New Perspectives on Adobe Dreamweaver CS5
12
Adding and Editing
a Meta Description
• Meta Description
– A short summary of the Web page including site’s
content and goals
• Use no more than six average lines of text
– Placed in the meta tag with the attribute
name=“description”
– Some search engines display the first part of the
description in the search results page
New Perspectives on Adobe Dreamweaver CS5
13
Adding and Editing
a Meta Description
• Adding a Meta Description and Viewing the Code
– Use standard capitalization, spelling, grammar,
and punctuation
– Meta description tag:
<meta name=“description” content=“The description
text goes here.” />
• Editing a Meta Description
– Description can be changed in the Document
window or the Property inspector
New Perspectives on Adobe Dreamweaver CS5
14
Adding and Editing
a Meta Description
• Copying and Pasting Keywords and Descriptions
– Keywords and descriptions should be added to
every page of a Web site
– Rather than retyping previously entered text, use
the Copy and Paste commands to copy text from
one page and add it to another
New Perspectives on Adobe Dreamweaver CS5
15
Using Library Items
• Library Items
– Page elements saved in the .lbi file format that can
be inserted in more than one page of a site
– Can include most elements in the body of a Web
page
• Bits of code
•Images
• Forms
• Text
• Tables
• Formatting
New Perspectives on Adobe Dreamweaver CS5
16
Using Library Items
– Library items are stored in the library
• A folder that Dreamweaver adds to the local
root folder when first library item is created
– These items are Dreamweaver authoring tools,
which means they do not exist outside of
Dreamweaver
– Library folder is not uploaded to the remote
server
New Perspectives on Adobe Dreamweaver CS5
17
Using Library Items
• Creating a Library Item
– Can create as many library items as needed
• Create the element in a page
• Select all the text, formatting elements, and
anything else desired
• Drag selected element(s) to the library
• Name the library item
New Perspectives on Adobe Dreamweaver CS5
18
Using Library Items
– When page element for a library item is created,
CSS styles can be used to format the element
• The style sheet with the rule definitions must
be attached to the page in which the library
item is inserted for the CSS styles to be
displayed
New Perspectives on Adobe Dreamweaver CS5
19
Using Library Items
New Perspectives on Adobe Dreamweaver CS5
20
Using Library Items
• Adding a Library Item to Web Pages
– Library item can be added to any page in a Web
site
– Same library item can be added to a page as many
times as desired
– Many different library items can be added to the
same page
• Examining the Code for a Library Item
– Library items start with a comment tag
New Perspectives on Adobe Dreamweaver CS5
21
Using Library Items
– Comment tags are unpaired tags
• Used to denote library items because they do
not appear in the page
• Do not affect the way HTML is rendered
• Do not cause problems if the page is edited in
another program
<!-- #BeginLibraryItem “/Library/cosmatic_footer.lbi” -->
all code for the page element goes here <!-#EndLibraryItem -->
New Perspectives on Adobe Dreamweaver CS5
22
Using Library Items
• Editing a Library Item
– When a library item is edited, every occurrence of
that item is also updated
– E-mail Link
• A link in a browser window that a user can click
to start his or her default e-mail program
New Perspectives on Adobe Dreamweaver CS5
23
Using Library Items
New Perspectives on Adobe Dreamweaver CS5
24
Using Library Items
New Perspectives on Adobe Dreamweaver CS5
25
Using Library Items
• Deleting a Library Item
– A library item can be deleted from a page or from
the library
• If deleted from a page, it still remains in the
library until it is deleted from that location as
well
• If deleted from the site but still in use on some
pages, the item will remain on those pages, but
it is no longer a library item
New Perspectives on Adobe Dreamweaver CS5
26
Session 6.2
Understanding Templates
• Templates
– Special pages that separate the look and layout of
a page from its content by “locking” the page
layout
• Editable regions
–Areas in the pages that can be changed
• Noneditable regions
–Areas in the pages that cannot be changed
New Perspectives on Adobe Dreamweaver CS5
27
Understanding Templates
– Adding content to pages does not affect the layout
or design
– Page layout is set up in the template just once and
the template can then be used to create new
pages
– If changes are needed, make them only in the
template and connected pages will be
automatically updated
New Perspectives on Adobe Dreamweaver CS5
28
Creating a Template
• Templates can be created in two ways:
– From a new blank page
• All page elements must be added
– From an existing page
• Save the template with a unique name
– Use only alphanumeric characters
– Templates are saved with a .dwt extension in the
Templates folder
New Perspectives on Adobe Dreamweaver CS5
29
Creating a Template
New Perspectives on Adobe Dreamweaver CS5
30
Creating a Template
• Adding Regions to a Template
– A newly created template is locked—one big
noneditable region
– To change page content, at least one editable
region is needed in the template
• Anything outside an editable region can only be
edited within the template itself
New Perspectives on Adobe Dreamweaver CS5
31
Creating a Template
– Several types of regions can be added to a
template
• Editable region
–Area in a template-based page that can be
edited
–An entire table or a single cell can be
designated as editable, but multiple cells
cannot be designated as editable regions
New Perspectives on Adobe Dreamweaver CS5
32
Creating a Template
–AP divs and their content are separate
elements
»When AP divs are set as editable regions,
they can be moved
»Designating the area inside an AP div
allows its content to be changed
• Optional region
–A noneditable region in which conditions for
displaying content in template-based pages
are set by user
New Perspectives on Adobe Dreamweaver CS5
33
Creating a Template
• Repeating region
–Region that can be duplicated within the
pages made from the template
• Editable optional region
–Optional region that is editable
• Editable tag attribute
–Tag attribute that is unlocked in a template
so that the attribute can be edited in the
pages created from the template
New Perspectives on Adobe Dreamweaver CS5
34
Creating a Template
– Most head content of a page created from a
template is locked
• Exceptions are the title and a few other pagespecific elements
• Cannot add navigation bars and other common
elements that place code in the head of the
page to template-based pages
–These items must be added directly in the
template itself
New Perspectives on Adobe Dreamweaver CS5
35
Creating a Template
New Perspectives on Adobe Dreamweaver CS5
36
Creating Web Pages
from a Template
• Creating a New Template-Based Page
– When the page is created, select the template on
which the page will be based
– Once created, add content to the editable regions
– Save the page
New Perspectives on Adobe Dreamweaver CS5
37
Creating Web Pages
from a Template
New Perspectives on Adobe Dreamweaver CS5
38
Creating Web Pages
from a Template
New Perspectives on Adobe Dreamweaver CS5
39
Creating Web Pages
from a Template
• Applying a Template to an Existing Web Page
– Open the page in the Document window, select
the desired template, and apply it
• Layout of the template page will be used
• User will designate into which regions the
existing content will be placed
– Usually easier to create a new template-based
page and move content from the existing page to
the new page
New Perspectives on Adobe Dreamweaver CS5
40
Editing a Template
• All template-based pages in a Web site can be
updated at once by editing the template
– Saves time
– Provides consistency across pages
• Adjusting editable elements of a template affects
only new pages created from the template
– Existing pages are not affected because content in
those pages could possibly be overwritten
New Perspectives on Adobe Dreamweaver CS5
41
Editing a Template
• Regions can also be deleted from a template
– When an editable region is deleted, user must
decide what happens to the content in that region
in existing template-based pages
• Deleting a Template
– Select the template to be deleted in the Assets
panel
• Click Delete button
New Perspectives on Adobe Dreamweaver CS5
42
Editing a Template
– When a template is deleted, pages created from
that template will still contain the markup code
• Detach pages from the attached template to
make them regular Web pages
New Perspectives on Adobe Dreamweaver CS5
43
Creating Nested Templates
• Nested Templates
– Templates created from the main template
– Allow for creation of a more defined structure for
some pages
• Additional editable regions can be added to
nested templates, but only within the editable
regions of the main template
• Any changes made to nested templates affect
only those pages created from the nested
template
New Perspectives on Adobe Dreamweaver CS5
44
Creating Nested Templates
• Any changes made to the main template affect
all the nested templates as well as any pages
created from the main template and the nested
templates
– Nested templates allow for greater control over
the look of the page
• Choices are more limited when individuals
enter content into the page
– Create pages from a nested template the same
way pages are created from the main template
New Perspectives on Adobe Dreamweaver CS5
45
Session 6.3
Understanding Forms
• Form
– A means of collecting information from users
– Users complete the form in a Web page and
submit the form
• Forms do not process the information
• Information is usually sent to a server for
processing
• Information is then sent back to user
New Perspectives on Adobe Dreamweaver CS5
46
Creating a Form
• Adding a Form to a Web Page
– A form can be created in any Web page
– Plan the design of the form ahead of time
– Add the form to a Web page
• Places a container in the page for the form
content
• Dreamweaver inserts <form></form> tags in
the code for the page
New Perspectives on Adobe Dreamweaver CS5
47
Understanding Forms
• Setting Form Attributes
– With the form selected, adjust form attributes in
the Property inspector
Form ID Method Enctype
Action Target
Form Attributes
New Perspectives on Adobe Dreamweaver CS5
48
Adding Form Objects
• Form Object
– Mechanism that allows users to interact with the
form
– Each object has a specific function
• Text fields and text areas
–Text fields are for short-answer input
–Text areas are for long-answer input
New Perspectives on Adobe Dreamweaver CS5
49
Adding Form Objects
• Hidden fields
–Fields that include information sent to the
server for processing and that the user
cannot see
• Checkbox and checkbox group
–Predefined toggle selection object in a form
–Can click to select and/or deselect
New Perspectives on Adobe Dreamweaver CS5
50
Adding Form Objects
• Radio button and radio group
–Group of selection objects that work
together in a form
–User can select just one radio button from a
radio group
• List/Menu
–List of preset input choices in a designated
area; usually has a scroll bar
»User can select multiple items in the list
New Perspectives on Adobe Dreamweaver CS5
51
Adding Form Objects
–Menu offers the user choices in the form of
a drop-down menu
»User can only select one option
• Jump menu
–Special menu that provides a list of active
links to other pages
–When user selects an option, a new page or
document opens
–Can be used inside or outside a form
New Perspectives on Adobe Dreamweaver CS5
52
Adding Form Objects
• Image field
–Graphic used as a Submit or Reset button in
a form
• File field
–File upload field
–Enables user to upload a file from the client
computer to the server
• Button
–Button in the form that performs a behavior
specified by the user
New Perspectives on Adobe Dreamweaver CS5
53
Adding Form Objects
• Creating the Form Structure
– Add form objects to a form in logical groupings
– Include a label with brief instructions or a
description of the information being requested for
each object
• Inserting Text Fields and Areas into a Form
– Most commonly used to collect user’s name,
address, and e-mail information
New Perspectives on Adobe Dreamweaver CS5
54
Adding Form Objects
Char width
Type
Max chars/Num lines Init val.
Text Field and Text Area Attributes
New Perspectives on Adobe Dreamweaver CS5
55
Adding Form Objects
• Using Live View, Live Code and Inspect to Preview
Forms
– Live View previews in the Document window in
Dreamweaver what the active page will look like
• Can test a form in Live View by completing and
submitting the form
• Code view remains available so changes can be
made
• In Live view, click Live Code to display the
source code for the page
New Perspectives on Adobe Dreamweaver CS5
56
Adding Form Objects
• In Live View or Live Code, turn on Inspect
–Helps identify what is affecting various
elements of the form
– These features help users to preview and debug
interactive pages
• Inserting Checkboxes into a Form
– Checkboxes have only two attributes in addition to
name:
• Checked value
 Initial state
New Perspectives on Adobe Dreamweaver CS5
57
Adding Form Objects
– When using a series of related checkboxes, it is
good to use a checkbox group
• Adding checkboxes as a group allows user to
include a group name as well as the names or
codes of the individual checkboxes
New Perspectives on Adobe Dreamweaver CS5
58
Adding Form Objects
• Adding Radio Buttons to a Form
– Radio buttons are a group of selection objects that
work together in a form
– Can select only one radio button from a radio
button group
• Name the radio group
• Provide a label for each radio button
• Enter a value for the Checked value of each
button
New Perspectives on Adobe Dreamweaver CS5
59
Adding Form Objects
• Adding Lists to a Form
– Lists are another way to enable users to choose
several items from a group
– Add as many items to a list as desired
– Attributes
• Height
• Selections check box
• List Values button
• Initially selected
New Perspectives on Adobe Dreamweaver CS5
60
Adding Form Objects
• Adding Buttons to a Form
– Submit button enables users to send form data to
the processing location
– Reset button clears the form
– Button button in the Forms category of the Insert
panel creates the Submit button by default
• Testing a Form
– Test the form in all the browsers that will be
supported
New Perspectives on Adobe Dreamweaver CS5
61
Adding Form Objects
• View form locally to be sure layout is correct
• Uploadsite and test functionality over Web
• Updating the Web Site on the Remote Server
– Upload the site to the remote server
– Preview the site over the Web
New Perspectives on Adobe Dreamweaver CS5
62