Tutorial 9 Creating Reusable Assets and Forms

XP Objectives 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 92

XP Objectives 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 CS3 Tutorial 93

XP Reviewing Head Content All Web pages contain head content (anything within the 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 CS3 Tutorial 94

XP Reviewing 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. Dreamweaver CS3 Tutorial 95

XP Reviewing 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 Dreamweaver CS3 Tutorial 96

XP 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 three or four search engines route 90% of the traffic. Dreamweaver CS3 Tutorial 97

XP 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 CS3 Tutorial 98

XP 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 CS3 Tutorial 99

XP 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 CS3 Tutorial 910

XP Adding 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. Dreamweaver CS3 Tutorial 911

XP Adding Keywords and Examining the HTML Code Every word or phrase should also be separated by a comma. When adding a keyword, Dreamweaver adds: Meta tags are unpaired tags. The two attributes are: – Name – in this case keywords – Content – the actual list of keywords Dreamweaver CS3 Tutorial 912

XP Adding Keywords and Examining the HTML Code Dreamweaver CS3 Tutorial 913

XP Adding Keywords and Examining the HTML Code Dreamweaver CS3 Tutorial 914

XP Editing Keywords Dreamweaver CS3 Tutorial 915

XP 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 CS3 Tutorial 916

XP 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 capitalization, grammar, spelling, and punctuation. When adding a description, Dreamweaver adds: – Dreamweaver CS3 Tutorial 917

XP Adding a Meta Description and Viewing the Code Dreamweaver CS3 Tutorial 918

XP Adding a Meta Description and Viewing the Code Dreamweaver CS3 Tutorial 919

XP Understanding 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. Dreamweaver CS3 Tutorial 920

XP Understanding 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. Dreamweaver CS3 Tutorial 921

XP 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 CS3 Tutorial 922

XP Creating and Using a Library Item Dreamweaver CS3 Tutorial 923

XP Creating 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: © Cosmatic, Inc Dreamweaver CS3 Tutorial 924

XP 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 CS3 Tutorial 925

XP Examining the Code for a Library Item Dreamweaver CS3 Tutorial 926

XP 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 prompt you, show you all of the instances the library element is used, and apply the changes to all uses. Dreamweaver CS3 Tutorial 927

XP Editing a Library Item Dreamweaver CS3 Tutorial 928

XP Editing a Library Item Dreamweaver CS3 Tutorial 929

XP 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 CS3 Tutorial 930

XP 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 CS3 Tutorial 931

XP 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 CS3 Tutorial 932

XP 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 CS3 Tutorial 933

XP 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 CS3 Tutorial 934

XP Adding 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 Dreamweaver CS3 Tutorial 935

XP Adding 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. Dreamweaver CS3 Tutorial 936

XP Adding Regions to a Template Dreamweaver CS3 Tutorial 937

XP Adding Regions to a Template Dreamweaver CS3 Tutorial 938

XP Adding Regions to a Template Dreamweaver CS3 Tutorial 939

XP Adding Regions to a Template Dreamweaver CS3 Tutorial 940

XP 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. Click Page from Template in the New Document dialog box, and then select the template to be used. Dreamweaver CS3 Tutorial 941

XP Creating Web Pages from a Template Dreamweaver CS3 Tutorial 942

XP Creating Web Pages from a Template Dreamweaver CS3 Tutorial 943

XP 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 CS3 Tutorial 944

XP 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 CS3 Tutorial 945

XP 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 CS3 Tutorial 946

XP Creating Nested Templates Dreamweaver CS3 Tutorial 947

XP Creating Nested Templates Dreamweaver CS3 Tutorial 948

XP 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 CS3 Tutorial 949

XP 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 CS3 Tutorial 950

XP 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 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 CS3 Tutorial 951

XP 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 CS3 Tutorial 952

XP 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 CS3 Tutorial 953

XP 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 CS3 Tutorial 954

XP 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 CS3 Tutorial 955

XP 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 CS3 Tutorial 956

XP 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 CS3 Tutorial 957

XP 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 CS3 Tutorial 958

XP Creating the Form Structure Dreamweaver CS3 Tutorial 959

XP 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 CS3 Tutorial 960

XP Inserting Text Fields and Areas into a Form Dreamweaver CS3 Tutorial 961

XP Inserting Text Fields and Areas into a Form Dreamweaver CS3 Tutorial 962

XP 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 CS3 Tutorial 963

XP Inserting Checkboxes into a Form Dreamweaver CS3 Tutorial 964

XP Adding 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. Dreamweaver CS3 Tutorial 965

XP Adding Radio Buttons to a Form Dreamweaver CS3 Tutorial 966

XP Adding Radio Buttons to a Form Dreamweaver CS3 Tutorial 967

XP 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 CS3 Tutorial 968

XP Adding Lists to a Form Dreamweaver CS3 Tutorial 969

XP Adding Lists to a Form Dreamweaver CS3 Tutorial 970

XP 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 “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 CS3 Tutorial 971

XP Adding Buttons to a Form Dreamweaver CS3 Tutorial 972

XP Adding Buttons to a Form Dreamweaver CS3 Tutorial 973

XP 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 CS3 Tutorial 974

XP Validating Form Data Dreamweaver CS3 Tutorial 975

XP 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 CS3 Tutorial 976

XP Testing a Form Dreamweaver CS3 Tutorial 977

XP Testing a Form Dreamweaver CS3 Tutorial 978

XP 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. –Click the View list arrow, and then click Local View. Dreamweaver CS3 Tutorial 979

XP Tutorial 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 Dreamweaver CS3 Tutorial 980