1. Tutorial 6 Creating Reusable Assets and Forms

2. 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 2New Perspectives on Adobe Dreamweaver CS5

3. 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 CS53

4. Session 6.1 Reviewing Head Content Head Content – All Web pages contain head content – Refers to anything that is placed within the 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 CS54

5. 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 CS55

6. Reviewing Head Content – Use Insert Panel Buttons to add meta tags in Dreamweaver Meta Keywords Description Refresh New Perspectives on Adobe Dreamweaver CS56

7. 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 CS57

8. 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 CS58

9. 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 CS59

10. 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 CS510

11. 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 CS511

12. 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 CS512

13. 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 CS513

14. Adding and Editing a Meta Description Adding a Meta Description and Viewing the Code – Use standard capitalization, spelling, grammar, and punctuation – Meta description tag: Editing a Meta Description – Description can be changed in the Document window or the Property inspector New Perspectives on Adobe Dreamweaver CS514

15. 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 CS515

16. 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 CS516

17. 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 CS517

18. 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 CS518

19. 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 CS519

20. Using Library Items New Perspectives on Adobe Dreamweaver CS520

21. 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 CS521

22. 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 all code for the page element goes here New Perspectives on Adobe Dreamweaver CS522

23. 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 CS523

24. Using Library Items New Perspectives on Adobe Dreamweaver CS524

25. Using Library Items New Perspectives on Adobe Dreamweaver CS525

26. 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 CS526

27. 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 CS527

28. 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 CS528

29. 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 CS529

30. Creating a Template New Perspectives on Adobe Dreamweaver CS530

31. 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 CS531

32. 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 CS532

33. 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 CS533

34. 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 CS534

35. Creating a Template – Most head content of a page created from a template is locked Exceptions are the title and a few other page- specific 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 CS535

36. Creating a Template New Perspectives on Adobe Dreamweaver CS536

37. 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 CS537

38. Creating Web Pages from a Template New Perspectives on Adobe Dreamweaver CS538

39. Creating Web Pages from a Template New Perspectives on Adobe Dreamweaver CS539

40. 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 CS540

41. 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 CS541

42. 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 CS542

43. 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 CS543

44. 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 CS544

45. 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 CS545

46. 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 CS546

47. 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 tags in the code for the page New Perspectives on Adobe Dreamweaver CS547

48. Understanding Forms Setting Form Attributes – With the form selected, adjust form attributes in the Property inspector New Perspectives on Adobe Dreamweaver CS548 Form IDMethodEnctype ActionTarget Form Attributes

49. 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 CS549

50. 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 CS550

51. 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 CS551

52. 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 CS552

53. 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 CS553

54. 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 CS554

55. Adding Form Objects Char widthType Max chars/Num linesInit val. New Perspectives on Adobe Dreamweaver CS555 Text Field and Text Area Attributes

56. 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 CS556

57. 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 CS557

58. 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 CS558

59. 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 CS559

60. 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 CS560

61. 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 CS561

62. 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 CS562