1. Tutorial 2 Planning and Designing a Successful Web Site

2. Objectives Session 2.1 – Determine the site goals – Identify the target audience – Conduct market research – Create end-user scenarios 2New Perspectives on Adobe Dreamweaver CS5

3. Objectives Session 2.2 – Design the information architecture – Create a flowchart and site structure – Create a site concept and metaphor – Design the site navigation system – Develop the aesthetic concept New Perspectives on Adobe Dreamweaver CS53

4. Objectives Session 2.3 – Create a site definition for a new site – Add pages to a site – Review basic HTML tags – Set page properties – Preview a site in a Web browser – Upload a site to a remote server and preview it on the Web New Perspectives on Adobe Dreamweaver CS54

5. Session 2.1 Visual Overview Planning a Web Site Phase I New Perspectives on Adobe Dreamweaver CS55

6. Managing Web Site Projects Project Manager – Oversees the project and coordinates the efforts of various team members – Creates the project plan Planning and analysis Designing Building Testing Implementation/launching New Perspectives on Adobe Dreamweaver CS56

7. Creating a Plan for a New Web Site Determining the Site Goals and Purpose – Brainstorm with the client – Create list of goals you can think of for the site – Place list of goals in order of importance – Review the list – Combine goals where possible – Reprioritize goals list, if necessary – Develop a one-sentence purpose statement New Perspectives on Adobe Dreamweaver CS57

8. Creating a Plan for a New Web Site Identifying the Target Audience – The target audience is the group of people whom you would most like to visit the site – Create a user profile Information gathered from questions answered by the client which include: – Age range of the user (target audience) – Gender New Perspectives on Adobe Dreamweaver CS58

9. Creating a Plan for a New Web Site New Perspectives on Adobe Dreamweaver CS59 Information gathered from questions answered by the client which include: – Education level – Economic situation – Geographic location – Primary language – Ethnic background – Other unifying characteristics – Knowing the target audience helps when choosing colors, fonts, and wording for the site

10. Creating a Plan for a New Web Site Conducting Market Research – Market research = careful investigation/study of the target audience’s preferences for a product or service – Use a search engine to find data about the target audience’s habits, interests, and likes bing, google, yahoo New Perspectives on Adobe Dreamweaver CS510

11. Creating a Plan for a New Web Site – Look at Web sites that the target audience may visit Pay attention to the graphics, colors, symbols, and slang terms used Study the page layouts and the navigation systems Look for anything unique about the sites Creating End-User Scenarios – Imagined scenarios in which the target audience might visit a Web site – Helps to envision actual conditions visitors will experience New Perspectives on Adobe Dreamweaver CS511

12. Session 2.2 Visual Overview Planning a Web Site Phase II New Perspectives on Adobe Dreamweaver CS512

13. Creating Information Architecture Overview – Determine what a site needs to do – Construct a framework that accomplishes the goals Creating Categories for Information – Categories provide structure for a Web site – Used to create the main navigation system – Appears in the same place on every page in the site New Perspectives on Adobe Dreamweaver CS513

14. Creating Information Architecture – Show visitors what types of information appear in the site – Should be based on site goals and information gathered during research – Can be divided into subcategories Subcategories should be arranged in hierarchical order New Perspectives on Adobe Dreamweaver CS514

15. Creating Information Architecture – Best way to present categories and subcategories is in standard outline format New Perspectives on Adobe Dreamweaver CS515

16. Creating Information Architecture Creating a Flowchart – A flowchart is a diagram of geometric shapes connected by lines that show steps in a sequence – Created from the information category outline Main categories become branches Subcategories become sub-branches Shapes can be used to designate different types of pages New Perspectives on Adobe Dreamweaver CS516

17. Creating Information Architecture New Perspectives on Adobe Dreamweaver CS517

18. Creating Information Architecture Gathering and Organizing Information – Next step is to gather and organize all possible sources of information – Better to have more raw material than might be needed The material collected will be used to create content for the Web pages Use brochures, fliers, press releases, reviews, and articles to gather information New Perspectives on Adobe Dreamweaver CS518

19. Designing a Web Site “Look and Feel” – The way all elements of the site design interact to create an experience for the user – Keep aesthetic design of pages and page elements separate from content Creating a Site Concept and Metaphor – Site Concept General underlying theme that unifies the various elements of a site Contributes to the site’s look and feel New Perspectives on Adobe Dreamweaver CS519

20. Designing a Web Site Review artwork and Web sites that appeal to target audience – Look for common underlying themes Make a list of words that describes what the site will be designed to convey Create the concept – Metaphor Comparison in which one object, concept, or idea is represented as another New Perspectives on Adobe Dreamweaver CS520

21. Designing a Web Site – Should be a visual extension of the site concept – Does not have to be concretely represented in site Considering Accessibility Issues – Accessibility Quality and ease of use of a Web site by people with disabilities or by those who use assistive devices New Perspectives on Adobe Dreamweaver CS521

22. Designing a Web Site Section 508, Federal Rehabilitation Act – All governmental agencies and public colleges and universities must make their electronic and information technology accessible to individuals with disabilities Information to help develop accessible Web sites – www.adobe.com www.adobe.com – www.w3.org/WAI www.w3.org/WAI New Perspectives on Adobe Dreamweaver CS522

23. Designing a Web Site Selecting Colors – Colors set the tone of the Web site – Subtractive color system Cyan, yellow, and magenta are primary colors Other colors created by adding pigment and removing light – Additive color system Red, green, and blue are primary colors Also called the RGB system New colors created by adding varying amounts of light New Perspectives on Adobe Dreamweaver CS523

24. Designing a Web Site Monitors work with light to create colors—the additive RGB color system When creating/saving graphics the Web, use RGB color – Hexadecimal color codes Six digit numbers - #RRGGBB – RR represents the red value – GG represents the green value – BB represents the blue value – Uses digits 0-9 to represent values 0-9 and letters A-F to represent decimal values 10-15 New Perspectives on Adobe Dreamweaver CS524

25. Designing a Web Site – Color Concepts and Guidelines Keep it simple Include three to six colors per site Consider the mood you want to create Keep the target audience in mind Look to other works of art for inspiration Remember accessibility when choosing colors New Perspectives on Adobe Dreamweaver CS525

26. Designing a Web Site Selecting Fonts – Font Set of letters, number, and symbols in a unified typeface Conveys subtle information Creates an impression about the content before it is read New Perspectives on Adobe Dreamweaver CS526

27. Designing a Web Site Three typefaces – Serif » Delicate, horizontal line finishes the main stroke of each character— serif font – Sans serif » Serifs are absent— sans serif font – Mono (short for monospaced) » Each letter takes up exactly the same width in the line— monospaced font New Perspectives on Adobe Dreamweaver CS527 generic font families

28. Designing a Web Site New Perspectives on Adobe Dreamweaver CS528

29. Designing a Web Site Font color – Color that is applied to the font Font size – Relative – xx-small to xx-large – Specific – font sizes are fixed Font style – Italic – Bold – Underline New Perspectives on Adobe Dreamweaver CS529

30. Designing a Web Site Choosing a Graphic Style and Graphics – Graphic style The look of the graphic elements in the site – Using a consistent design for all graphics is key to developing a cohesive, well-made site New Perspectives on Adobe Dreamweaver CS530

31. Designing a Web Site Determining the Layout – Layout is the position of elements Page structure and content--fixed or flexible size Location of navigation system, text, logo, artwork, etc. Layout should support site goals and metaphor Layout should be easy for the user to follow Layout should fit the target audience New Perspectives on Adobe Dreamweaver CS531

32. Designing a Web Site Layout should be consistent across all pages Layout should conform to basic tenets of sound artistic design – Balance – Unity – Rhythm – Balance and Space Balance is the feeling of equilibrium when looking at a page as a whole New Perspectives on Adobe Dreamweaver CS532

33. Designing a Web Site – Symmetrical Balance » Distributes visual weight in a page evenly around the central horizontal and vertical axes of the page – Asymmetrical (Informal) Balance » Visually disproportionate objects are distributed so that the visual weights of the objects achieve balance with each other instead of with the page axes New Perspectives on Adobe Dreamweaver CS533

34. Designing a Web Site » It is more visually appealing because it better incorporates white space—the empty space on a page Rule of Thirds – Most interesting compositions are those in which the strongest element is off center » Divide page into thirds horizontally and vertically » Place objects in the page on the lines New Perspectives on Adobe Dreamweaver CS534

35. Designing a Web Site » No object should take up more than 2/3 of a page, horizontally and vertically – Rhythm and Unity Rhythm is achieved by repetition or alternation of elements in a page – Color repeated in different places in the page New Perspectives on Adobe Dreamweaver CS535

36. Designing a Web Site Unity – Relationship of individual objects as they relate to composition of the whole page – Using one graphic style and repeating color throughout the site, as well as creating balance and symmetry between objects, help foster unity within the site New Perspectives on Adobe Dreamweaver CS536

37. Designing a Web Site – Wireframes » Barebones page mockups created with graphic software » Contain only rough placeholder images – Comps and Storyboards » Fully developed, detailed drawings that provide a preview of the final design New Perspectives on Adobe Dreamweaver CS537

38. Designing a Web Site Checking the Design for Logic – User should be able to navigate through site easily – Look at all elements of the design plan Is the navigation system easy to follow? Does the graphic style support the site metaphor? Do the individual elements flow together to create a consistent look? New Perspectives on Adobe Dreamweaver CS538

39. Session 2.3 Visual Overview New Perspectives on Adobe Dreamweaver CS539

40. Creating a New Site Creating the Local Site Files – Need a site name and a local site folder Use all lowercase letters when naming files and folders Set up additional folders before work begins on the new site As new files are created, save them in the appropriate folders New Perspectives on Adobe Dreamweaver CS540

41. Creating a New Site New Perspectives on Adobe Dreamweaver CS541

42. Creating a New Site – Setting Up Live Servers Remote Site Definition – Information stored on local computer that tells Dreamweaver where the remote server is located and how to connect to it – Allows the Web site to be put on a Web server so it can be seen on the Web – Access is usually through an FTP site New Perspectives on Adobe Dreamweaver CS542

43. Creating a New Site – FTP Options » Server Name » FTP Address » Port » Root Directory » Username » Password » Use passive FTP New Perspectives on Adobe Dreamweaver CS543

44. Creating a New Site » Use IPv6 transfer mode » Use Proxy, as defined in Preferences » Use FTP performance optimization » Use alternative FTP move method » Maintain synchronization information » Automatically upload files to server on save » Enable file check in and check out New Perspectives on Adobe Dreamweaver CS544

45. Creating a New Site New Perspectives on Adobe Dreamweaver CS545

46. Creating and Saving Pages in a Defined Site Adding a New Page – New pages should be located in the local root folder – Select a page category and type of page to create Saving New Pages – Save As command opens the Save As dialog box to the local root folder for the Web site – Give the page a filename New Perspectives on Adobe Dreamweaver CS546

47. Creating and Saving Pages in a Defined Site New Perspectives on Adobe Dreamweaver CS547

48. Creating and Saving Pages in a Defined Site New Perspectives on Adobe Dreamweaver CS548

49. Creating and Saving Pages in a Defined Site Setting Page Titles – The name that appears in the browser title bar – Use the name of the Web site and a descriptive word or phrase for each page New Perspectives on Adobe Dreamweaver CS549

50. Creating and Saving Pages in a Defined Site Resaving Pages – If you edit a page and have not saved it, Dreamweaver will prompt you to save when you exit the program – If you use an element such as a graphic and it is not part of the site, Dreamweaver saves a copy of the element in the local root folder – Save frequently New Perspectives on Adobe Dreamweaver CS550

51. Reviewing HTML Tags Most common language is Hypertext Markup Language (HTML) – HTML uses a series of tags to tell the browser what to do with information on a Web page and how to display it – Basic understanding of HTML is important Tags almost always appear in sets Each tag is included within angled brackets, New Perspectives on Adobe Dreamweaver CS551

52. Reviewing HTML Tags Opening tags contain any parameters or attributes that are to be applied Closing tags always begin with a forward slash / Required HTML tags – HTML – head – title – body New Perspectives on Adobe Dreamweaver CS552

53. Reviewing HTML Tags New Perspectives on Adobe Dreamweaver CS553

54. Reviewing HTML Tags New Perspectives on Adobe Dreamweaver CS554

55. Setting Page Properties Page Properties – Attributes that apply to a whole page rather than to an element within the page – Six Categories Appearance (CSS)  Headings (CSS) Appearance (HTML)  Title/Encoding Links (CSS)  Tracing Image New Perspectives on Adobe Dreamweaver CS555

56. Setting Page Properties – Appearance (CSS) category General page properties – Default text – Background – Margin attributes Different Appearance properties – Text settings – Background settings – Margin settings New Perspectives on Adobe Dreamweaver CS556

57. Setting Page Properties – Links (CSS) category Contains page properties for hyperlinked text – Heading (CSS) category Sets font, font size, and font color attributes for headings – Title/Encoding category Sets page title and document encoding type – Document encoding controls how digital codes will display characters in Web page New Perspectives on Adobe Dreamweaver CS557

58. Setting Page Properties – Tracing Image category Enables an image to be selected as a guide for re-creating a design or mock up that was originally created in a graphics program New Perspectives on Adobe Dreamweaver CS558

59. Setting Page Properties New Perspectives on Adobe Dreamweaver CS559

60. Setting Page Properties New Perspectives on Adobe Dreamweaver CS560

61. Setting Page Properties New Perspectives on Adobe Dreamweaver CS561

62. Previewing a Site in a Browser Preview a Web site in all browsers that a user might use to view the site on the Web Dreamweaver Preview List – Designate the two browsers considered most important as the primary and secondary browsers – Dreamweaver defaults to the primary browser New Perspectives on Adobe Dreamweaver CS562

63. Previewing a Site in a Browser New Perspectives on Adobe Dreamweaver CS563

64. Uploading a Web Site to a Live Server Upload the site to either a Web server or to a network server – Enables you to view the Web site over the Web as the end users will see it – All files that the remote version of a Web site will use must be located on the Web server Dependent Files – Files that are used in the Web page, e.g., graphic files New Perspectives on Adobe Dreamweaver CS564

65. Uploading a Web Site to a Live Server New Perspectives on Adobe Dreamweaver CS565

66. Uploading a Web Site to a Live Server Previewing a Remote Site on the Web – Open the Web site in the browser – Check all pages – Make any necessary adjustments New Perspectives on Adobe Dreamweaver CS566