Creating Reusable Assets and Forms

Creating Reusable Assets and Forms
Tutorial 9 Creating Reusable Assets and Forms Dreamweaver 8.0 Tutorial 9

In this tutorial, you will: 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 Dreamweaver 8.0 Tutorial 9

In this tutorial, you will (Cont.): Create a template Create Web pages from a template 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 Dreamweaver 8.0 Tutorial 9

Reviewing 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 Dreamweaver 8.0 Tutorial 9

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. Dreamweaver 8.0 Tutorial 9

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 Dreamweaver 8.0 Tutorial 9

Optimizing 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 10 or 12 search engines route 90% of the traffic. Dreamweaver 8.0 Tutorial 9

Optimizing 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. Dreamweaver 8.0 Tutorial 9

Adding 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. Dreamweaver 8.0 Tutorial 9

Adding 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. Dreamweaver 8.0 Tutorial 9

Adding Keywords and Examining the 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. Dreamweaver 8.0 Tutorial 9

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 Dreamweaver 8.0 Tutorial 9

Keywords Dialog Box Dreamweaver 8.0 Tutorial 9

Keywords Meta Tag in Code View Dreamweaver 8.0 Tutorial 9

Editing Keywords Edited Keywords List Dreamweaver 8.0 Tutorial 9

Adding 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. Dreamweaver 8.0 Tutorial 9

Adding 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 grammar, spelling, and punctuation. When adding a description, Dreamweaver adds: <meta name=“description” content=“The description text goes here.”> Dreamweaver 8.0 Tutorial 9

Description Dialog Box Dreamweaver 8.0 Tutorial 9

Description Meta Tag in Code View Dreamweaver 8.0 Tutorial 9

Understanding Library Items
Dreamweaver has features that allow you to eliminate 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. Dreamweaver 8.0 Tutorial 9

Understanding Library Items
When a library item is included in a page, the code is inserted in the page along with a 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. Dreamweaver 8.0 Tutorial 9

Creating 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. Dreamweaver 8.0 Tutorial 9

Library Item Created from Footer Dreamweaver 8.0 Tutorial 9

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. 2008</a></p>  Dreamweaver 8.0 Tutorial 9

Examining 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. Dreamweaver 8.0 Tutorial 9

Examining the Code for a Library Item
cosmatic_footer Library Item in Split View Dreamweaver 8.0 Tutorial 9

Editing 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 cue you, show you all of the instances the library element is used, and apply the changes to all uses. Dreamweaver 8.0 Tutorial 9

Update Library Items Dialog Box
Editing a Library Item Update Library Items Dialog Box Dreamweaver 8.0 Tutorial 9

Update Pages Dialog Box
Editing a Library Item Update Pages Dialog Box Dreamweaver 8.0 Tutorial 9

Understanding 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. Dreamweaver 8.0 Tutorial 9

Understanding 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. Dreamweaver 8.0 Tutorial 9

Creating 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. Dreamweaver 8.0 Tutorial 9

Creating 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 8.0 Tutorial 9

Adding 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 Dreamweaver 8.0 Tutorial 9

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 Dreamweaver 8.0 Tutorial 9

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. Dreamweaver 8.0 Tutorial 9

Editable Region Added to the Template Page Dreamweaver 8.0 Tutorial 9

Insert Repeating Table Dialog Box Dreamweaver 8.0 Tutorial 9

Repeating Table with an Editable Region Dreamweaver 8.0 Tutorial 9

Template with Modified Navigation Bar Dreamweaver 8.0 Tutorial 9

Creating 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. On the Templates tab of the New Document dialog box, you can select the current site and the template to be used. Dreamweaver 8.0 Tutorial 9

New from Template Dialog Box Dreamweaver 8.0 Tutorial 9

Template Test Page with New Content Dreamweaver 8.0 Tutorial 9

Applying 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. Dreamweaver 8.0 Tutorial 9

Editing 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 Dreamweaver 8.0 Tutorial 9

Creating 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. Dreamweaver 8.0 Tutorial 9

Nested Template Page Dreamweaver 8.0 Tutorial 9

Inconsistent Region Names Dialog Box Dreamweaver 8.0 Tutorial 9

Understanding 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 Dreamweaver 8.0 Tutorial 9

Creating 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 Dreamweaver 8.0 Tutorial 9

Adding 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. Dreamweaver 8.0 Tutorial 9

Setting 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 Dreamweaver 8.0 Tutorial 9

Setting 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 Dreamweaver 8.0 Tutorial 9

Adding 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. Dreamweaver 8.0 Tutorial 9

Adding 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. Dreamweaver 8.0 Tutorial 9

Adding 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 Dreamweaver 8.0 Tutorial 9

Adding 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. Dreamweaver 8.0 Tutorial 9

Creating 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. Dreamweaver 8.0 Tutorial 9

Creating the Form Structure
Contact Form with Inserted Table Dreamweaver 8.0 Tutorial 9

Inserting 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 Dreamweaver 8.0 Tutorial 9

Text Field Added to the Form Dreamweaver 8.0 Tutorial 9

Form with Text Fields Dreamweaver 8.0 Tutorial 9

Inserting 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. Dreamweaver 8.0 Tutorial 9

Inserting Checkboxes into a Form
Form with Checkboxes Dreamweaver 8.0 Tutorial 9

Adding Radio Buttons to a Form
Radio buttons are a group of form 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. Dreamweaver 8.0 Tutorial 9

Radio Group Dialog Box Dreamweaver 8.0 Tutorial 9

Form with Radio Group Dreamweaver 8.0 Tutorial 9

Adding 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 Dreamweaver 8.0 Tutorial 9

Adding Lists to a Form List Values Dialog Box Dreamweaver 8.0
Tutorial 9

Completed List/Menu Box
Adding Lists to a Form Completed List/Menu Box Dreamweaver 8.0 Tutorial 9

Adding 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 the Button 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. Dreamweaver 8.0 Tutorial 9

Form with One Button Dreamweaver 8.0 Tutorial 9

Form with Two Buttons Dreamweaver 8.0 Tutorial 9

Validating 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 address – allows only addresses Number from – sets a range of acceptable values Dreamweaver 8.0 Tutorial 9

Validate Form Dialog Box
Validating Form Data Validate Form Dialog Box Dreamweaver 8.0 Tutorial 9

Testing 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. Dreamweaver 8.0 Tutorial 9

Contacted Page with the Completed Form
Testing a Form Contacted Page with the Completed Form Dreamweaver 8.0 Tutorial 9

Testing a Form Form Data Dreamweaver 8.0 Tutorial 9

Updating 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. Dreamweaver 8.0 Tutorial 9

Tutorial Summary You should now be able to:
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 Dreamweaver 8.0 Tutorial 9

Creating Reusable Assets and Forms

Similar presentations

Presentation on theme: "Creating Reusable Assets and Forms"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Creating Reusable Assets and Forms

Similar presentations

Presentation on theme: "Creating Reusable Assets and Forms"— Presentation transcript:

Similar presentations

About project

Feedback