tutorial 9 creating reusable assets and forms. xp objectives explore the head content of a page add...

Tutorial 9

Creating Reusable Assets and Forms

XPXPObjectives• 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• Create a template• Create Web pages from a template

Dreamweaver CS3 Tutorial 9 2

XPXPObjectives• Edit a template• Create a nested template• Add a form to a Web page• Set form attributes• Add form objects to a form• Add the Validate Form behavior to a form


XPXPReviewing Head Content• All Web pages contain head content (anything

within the <head> tags).• Head content is usually invisible to the user, but

either adds functionality to the page, or holds information for the search engines.

• There are two commonly used tags that add functionality to a page:– Base – base URL for the page’s document relative links– Link – link tag, often a link to an external style sheet


XPXPReviewing Head Content• Link and Base are two buttons in the Head

category on the Insert bar.• Search engines use meta tags included in the

head content.• Meta tags hold information about the page, add

functionality or give information to a server.• You can also use meta tags to add keywords,

author names, or a copyright statement.


XPXPReviewing Head Content• The most important meta tags are:

– Meta – generic meta tag allows you to set attributes, values, and content for the meta tag

– Keywords – allows you to enter keywords for the site– Description – allows you to enter a description for

the site– Refresh – allows you to enter the amount of delay

before a page is refreshed and choose whether to refresh the current page or open a new URL


XPXPOptimizing Web Pages for Search Engine Placement • Search engines enable people to find the site,

and pages should be optimized for search engine placement.

• Optimizing a page helps it rank highly in target search engines.

• Every search engine has a different set of secret formulas used to rank a page for placement.

• The top three or four search engines route 90% of the traffic.


XPXPOptimizing Web Pages for Search Engine Placement • Some search engines send out robots which

search the Web and send back information to the search engine.

• In order to get your site listed in the first page of search results, you must list the page yourself or pay a service to do it for you.

• You also need to relist the pages in the site periodically to maintain a favorable position.


XPXPAdding and Editing Keywords• Keywords are used by many search engines to

index Web pages.• A keyword is a descriptive word or phrase that is

put in a meta tag with the attribute:– name=“keywords”

• You add one keywords meta tag to each page and then list all of the site keywords in that tag.


XPXPAdding and Editing Keywords• Keywords should include the name of your

company and products or services and any words you think people might use to find your site.

• Keywords should be single words and short phrases (less than 6 words).

• Each word in a phrase is indexed individually as well as the entire phrase.

• You can list any number of keywords, but many search engines only use the first 10.


XPXPAdding Keywords and Examining the HTML Code• You can add keywords by:

– Typing the keywords meta tag in Code view.– Using a dialog box and letting Dreamweaver add the

code.• You add keywords to a page with the Keywords

button in the Head list of the Insert bar.• Keywords should be added in lowercase letters

because they will be seen as both upper and lowercase while uppercase is seen as case specific.


XPXPAdding Keywords and Examining the HTML Code• Every word or phrase should also be separated

by a comma.• When adding a keyword, Dreamweaver adds:

<meta name=“keywords” content=“keyword1, keyword2, keyword3” />

• Meta tags are unpaired tags.• The two attributes are:– Name – in this case keywords– Content – the actual list of keywords


XPXPAdding Keywords and Examining the HTML Code


XPXPEditing Keywords


XPXPAdding and Editing a Meta Description• A meta description is a short summary of the

Web page and is identified in a meta tag with the attribute:– name=“description”

• This should contain a clear description of the sites content and goals and be no longer than six average text lines.

• Some search engines display part of this description on their results page.


XPXPAdding a Meta Description and Viewing the Code• You add the meta description with the

Description button in the Head list of the Insert bar.

• The description should be written in proper English with appropriate capitalization, grammar, spelling, and punctuation.

• When adding a description, Dreamweaver adds:– <meta name=“description” content=“The description

text goes here.”>


XPXPAdding a Meta Description and Viewing the Code


XPXPUnderstanding Library Items• Dreamweaver has features that allow you to

decrease redundant work.• Library items are page elements that can be

saved as .lbi files and inserted into other pages of a Web site.

• Library items can include most of the elements in the body of the Web page, but cannot include head content.


XPXPUnderstanding Library Items• When a library item is included in a page, the

code is inserted in the page along with a hidden link to the library item.

• When a library item is edited, Dreamweaver updates each page that is linked to it.

• Library items are included in the Library folder in the local root directory for the site.

• You can view the library in the Assets panel.


XPXPCreating and Using a Library Item• To create a library item, you create the element

in a page, select it, drag it to the library in the Assets panel, and assign a name to it.

• It is important that you select exactly the features you want copied before dragging them to the library.

• When you create a library item from a page that uses CSS styles, the library item will include the code that references the CSS style.


XPXPCreating and Using a Library Item


XPXPCreating and Using a Library Item• To add a library item to a Web page, open the page and

then drag the library item from the library to the desired location.

• The code is added to the page along with a hidden link to the library item:

<p align=”center”> </p><p class=”cosmatic_footer”> © Cosmatic, Inc. 2010</a></p>

XPXPExamining the Code for a Library Item• The library item starts with a comment tag. • Everything between the two dashes of the

comment tag is assumed to be a comment and ignored by the browser.

• The #BeginLibraryItem and path to the library item give Dreamweaver information about the library item.

• Every library item ends with the #EndLibraryItem comment tag.


XPXPExamining the Code for a Library Item


XPXPEditing a Library Item• When you edit a library item, all of the uses of

the item are also updated at the same time.• To edit a library item, open it and make the

changes.• You can open and edit a library item from any

instance of its use. • Dreamweaver will prompt you, show you all of

the instances the library element is used, and apply the changes to all uses.


XPXPEditing a Library Item


XPXPUnderstanding Templates• A template is a special page that allows the

designer to separate style from content by “locking” the page layout.

• As the page is designed, the designer creates editable and noneditable regions.

• Information in the noneditable regions can only be changed in the template itself.

• The template should contain all of the elements that are used on every page.


XPXPUnderstanding Templates• Elements such as the navigation bar, logo, CSS

styles, and footer should be noneditable.• Elements such as content and page headings

should be editable. • Setting up a template that assists in the design

and update of a Web site without adding problems or restrictions takes careful planning.

• Sites that have different looks on different pages can have more than one template.


XPXPCreating a Template• You create a template from a new blank page or

an existing page.• With a blank page, you must add all of the

elements you want included in each page of the site.

• If you create a template from an existing page, the elements are already in place.

• It is a good idea to create a new template for each site and not copy from another site.


XPXPCreating a Template• You create a template by:

– Opening a page on which you want to base the template.

– Clicking the Make Template button on the Templates list in the Common category of the Insert Bar

– Naming the template– Saving the template in a Templates folder in the local

root folder of your site• Templates can be viewed in the Assets panel

when the Templates button is selected.Dreamweaver CS3 Tutorial 9 33

XPXPAdding Regions to a Template• When a template is created, it is one large

noneditable region.• You must add editable regions so that content

can be changed on the pages.• You can add several types of regions:

– Editable region – an area on the page that can be edited

– Optional region – a noneditable area where you can set parameters for when the content displays


XPXPAdding Regions to a Template• You can add several types of regions (cont.):– Repeating region – a region that can be duplicated

within the pages, such as an expanding table– Editable optional region – an optional region that is

editable– Editable tag attribute – a tag attribute that you

unlock in a template so that the attribute can be edited in the pages created from the template


XPXPAdding Regions to a Template• Regions in templates are invisible elements.• When you use the option to show Invisible

Elements, Dreamweaver displays a border around the regions in the template and template-based pages.

• A tab also appears at the top of each region.• To view the pages without this border and tab,

you must view the page in a browser or hide Invisible Elements.


XPXPAdding Regions to a Template


XPXPCreating Web Pages from a Template• To create a Web page from a template, you can:

– Create a new page based on the template and then add content to the editable regions or

– Apply the template to an existing page that already contains content

• To create a page from a template, select the New command from the File menu on the menu bar.

• Click Page from Template in the New Document dialog box, and then select the template to be used.


XPXPCreating Web Pages from a Template


XPXPApplying a Template to an Existing Web Page• You can also add a template to an existing page

by opening the page, selecting the template in the Assets window, and clicking the Apply button.

• A dialog box will open so you can designate where the existing content will be placed.

• This can be very confusing when a page contains a lot of content.

• It is usually preferable to create a new page from a template and copy the content into it.


XPXPEditing a Template• When you change a template, all of the

template-based pages are changed at once.• This saves time and maintains a consistent

design across the site.• You can add, change or delete regions as well as

move them about.• You can also add, delete, or change content in

noneditable regions.


XPXPCreating Nested Templates• Nested templates are created from the main

template to allow more defined structures on some pages of a site.

• A nested template contains all of the features of the main template with the addition of new features added within the editable regions.

• When a nested template is changed, only the pages created from that template are changed.


XPXPCreating Nested Templates


XPXPUnderstanding Forms• A form is a way of collecting information from

users.• Several steps occur for a form to work:

– The designer creates a form– The designer installs a script or application to process

the information– The user fills out the form and submits it– The application processes the information– The application sends information back to the user


XPXPCreating a Form• A form can be added to any Web page and

should be designed to best collect the desired information.

• The general process for adding forms to a Web site is:– Add the form to the Web page– Set the attributes for the form– Add any form objects– Validate the form data


XPXPAdding a Form to a Web Page• Adding a form to a page places a container on

the page where content can be added.• When you add a form to a page, Dreamweaver

inserts <form></form> tags in the code for the page.

• A red dotted line will appear in the Document window in Design view.

• The red line designates the form area and is invisible in the browser window.


XPXPSetting Form Attributes• Form attributes include:

– Form Name – the unique name for the form– Action – the path to the location of the script that

will process the user data– Method – the way data will be sent to the site

specified in the Action box• POST – embeds in a HTTP request• GET – appends the form data to the end of the path• DEFAULT – uses the user’s browser default


XPXPSetting Form Attributes• Form attributes include (cont.):

– Target – the target destination for any response from the form. Options are:

• _blank • _parent• _self• _top

– Enctype (Encoding Type) – the file type based on the MIME encoding system


XPXPAdding Form Objects• To make a form useful, you need to generate form

objects that enable users to input data into a form.• Available form objects:

– Text Fields and Text Areas – a text box is where a user can type a response. Text fields are for short answers; text areas are multiple line boxes.

– Hidden Fields – fields that contain data that is sent back with the user’s response, but is invisible to the user.

– Checkbox – a box that works like an on/off switch for the user to check.


XPXPAdding Form Objects• Available form objects (cont.):

– Radio Button and Radio Group – the user can select only one radio button from a radio button group.

– List/Menu – preset input choices for an item. A list of choices includes a scroll bar if needed, while a menu includes a drop-down menu.

– Jump Menu – a menu that contains a list of links to other pages, objects, etc.


XPXPAdding Form Objects• Available form objects (cont.):– Image Field – a graphic used as a submit button or

for other tasks– File Field – enables the user to upload a file to the

server. It contains a Browse button and a text box.– Button – a button that performs the specified

behavior.• Submit Button – sends the form data• Reset Button – clears all form content


XPXPAdding Form Objects• Form objects also have attributes that can be set

in the Property inspector.• Every type of form object has its own attributes.• It is important to name all of the form objects

because the scripting language uses the name to identify the object.

• Objects on a form should be grouped logically with labels that make it easy for the user to understand what is desired.


XPXPCreating the Form Structure• You can use many ways to organize your form,

but a table is usually the simplest and clearest.• For instance, a two column table could be used

to insert labels and instructions on the left and the responses on the right.

• This type of form is also fairly stable across browsers, keeping the objects in the same place regardless of how the browser displays the form.


XPXPCreating the Form Structure


XPXPInserting Text Fields and Areas into a Form• Text fields gather typed information from the user and

have attributes beyond Name:– Char width (Character Width) – the max number of characters

that can be displayed in the field.– Max chars (Maximum Characters)/Num Lines (Number of

Lines) – the max number of characters that a user can input.– Type – the appearance of the text field- single line, multi line

or password– Init val (Initial Value) – text displayed in the field until the

user types new input


XPXPInserting Text Fields and Areas into a Form


XPXPInserting Checkboxes into a Form• Checkboxes have three attributes:

– Name – it is often convenient to use a code, instead of a name, in the script that processes them.

– Checked Value – this is where a value or a numeric code can be assigned to the checkbox. When the box is checked, this value is sent to the server. Nothing is sent if the box is not checked.

– Initial State – sets the box to checked or blank initially.


XPXPInserting Checkboxes into a Form


XPXPAdding Radio Buttons to a Form• Radio buttons are a group of selection objects

that work together.• Only one of the radio buttons can be selected

and selecting a second one unselects the first.• You must enter a unique value for each radio

button to distinguish which radio button was selected.

• You can also select an initial state of checked or unchecked.


XPXPAdding Radio Buttons to a Form


XPXPAdding Lists to a Form• Lists have a few attributes beyond name:

– Height – sets how many rows are visible in the box. A scroll bar will be added if there are more items than can be displayed at one time.

– Selections – sets the option of the user selecting one or more than one item from the list.

– List Values button – opens the dialog box where the actual list and any associated value is typed.

– Initially Selected – selects one or more values initially.


XPXPAdding Lists to a Form


XPXPAdding Buttons to a Form• A form must have a Submit button so that the user can

send the form data.• It is also useful to add a Reset button so that users can

clear the form and restart if they need to.• When you click “Button” in the Forms category on the

Insert bar, it creates a Submit button by default.• You can also choose the Reset Form action and create a

Reset button.• You should name and label each button created.


XPXPAdding Buttons to a Form


XPXPValidating Form Data• You can check the data the user types for

correctness or completeness before the form is sent using the Validate Form behavior

• The Validate Form dialog box allows you to set:– Whether the field is required or optional– Limits on the data field:

• Anything – allows anything• Number – allows only numbers• Email address – allows only email addresses• Number from – sets a range of acceptable values


XPXPValidating Form Data


XPXPTesting a Form• Once completed, you should test your form to be

sure that it looks and functions properly.• You can view the form locally, but need to

upload it to test the functionality over the Web.• You should enter data in each field to test their

functionality and then submit the form and make sure the submitted data is accurate.


XPXPTesting a Form


XPXPUpdating the Web Site on the Remote Server• To update changed pages:

– Connect to the remote server using the Connects to Remote Host button on the Files panel toolbar.

– Click the View list arrow, and then click Local View.– Select the updated files and then click the Put File(s)

button.– Click the Yes button to include dependent files.– Disconnect using the Disconnects from Remote Host

button.– Click the View list arrow, and then click Local View.


XPXPTutorial Summary• Review the head content of a page• Add keywords and a meta description to a page• Understand libraries and be able to create a

library item and add it to a Web page• Create a template and use it in Web design• Add a form to a Web page• Add form objects to a Web page and validate

user data when the form is submitted


tutorial 9 creating reusable assets and forms. xp objectives explore the head content of a page add...

Documents