1. Half Moon Bay Townsite Website Page 1

2. Half Moon Bay Townsite Website Gathering site information If we did our own town as the subject for our website, you should gather information about your area. Page 2 Activity 1: Planning the Website Information you collect could include the following: Demographic data, such as population, area, county, and principal industries Local government offices and officials, including telephone numbers, e-mail addresses, and URLs for available websites Community and religious organizations, and info. Local history Cultural events, including dates Local maps Other pertinent e-mail addresses and URLs for relevant websites see West Kelowna websiteWest Kelowna website 1

3. Half Moon Bay Townsite Website Planning the home page The home page is the entrance to your website and is a very important starting point: It introduces the site, with information and navigation links to the other pages in the site. Think carefully about: The Title of the site Content links for navigation Information and images you want Overall look and feel of the website. You should Storyboard the layout of the page Page 3 Activity 1: Planning the Website 1

4. Half Moon Bay Townsite Website Planning the home page Storyboard the layout of your page: Page 4 Activity 1: Planning the Website 1

5. Half Moon Bay Townsite Website Planning the other pages The other pages of Half Moon Bay should include: 1. Paragraphs of text, bulleted lists, and images on a History page. 2. A table of information on a Directory page. 3. A bulleted list under each heading on an Events page. 4. Image and paragraphs of text on a Map page. 5. You need to decide the best way to organize your content – think about Storyboarding it first. Page 5 Activity 1: Planning the Website 1

6. Half Moon Bay Townsite Website Planning the site Navigation layout Simple flowchart of the Half Moon Bay website: Page 6 Activity 1: Planning the Website 1

7. Activity 2: Getting Acquainted with Dreamweaver Half Moon Bay Townsite Website Page 7 The Insert bar contains buttons for creating and inserting objects such as images, tables, and links you might want to add to your web page. The Document window displays the current document as you create and edit it. This is where you make the pages for your site. The Property inspector displays properties for the selected object or text and lets you modify those properties. On the right side of the Dreamweaver Designer workspace are panels you can expand or collapse as you need them. The Document toolbar, found at the top of the Document window, contains an area for you to enter the title of your document. Design view shows what the page will look like in a web browser. Code view shows the HTML code for the page. 2

8. Half Moon Bay Townsite Website Planning the local site file structure: Create a “halfmoon-bay” folder Under this folder: Download the “halfmoon-bay-assets from the website (also available under I: Muir- WebDesign) Unzip the file and store them under the “halfmoon-bay” folder. You will now have a folder of images, content (to copy & paste) and this PowerPoint. Page 8 Activity 3: Setting Up Folders, and Local & Remote Sites 3

9. Half Moon Bay Townsite Website Setting up the local site and root folder: Page 9 Activity 3: Setting Up the Folders, Local & Remote Sites 3

10. Half Moon Bay Townsite Website Setting up the remote or server site: Page 10 Activity 3: Setting Up the Folders, Local & Remote Sites 3

11. Half Moon Bay Townsite Website Sample of a Half Moon Bay home page Page 11 Activity 4: Creating the Home Page 4

12. Half Moon Bay Townsite Website In Dreamweaver create a new HTML document Save as “index.html” under “halfmoon-bay” Add a Title: Page 12 Activity 4: Creating the Home Page 4

13. Half Moon Bay Townsite Website Insert Table – 2 rows 2 columns, Table width: 900pixels, Border thickness: 0 Cell padding & spacing: 0 Page 13 Activity 4: Creating the Home Page 4

14. Half Moon Bay Townsite Website Select top row and merge cells Page 14 Activity 4: Creating the Home Page 4

15. Half Moon Bay Townsite Website Properties Toolbar Format: Heading 1 (HTML) Alignment: (HTML – Horz) Page Properties: Size: (Heading CSS) Color: (Headings - CSS) Font: (Headings - CSS) Page 15 Activity 4: Creating the Home Page 4

16. Half Moon Bay Townsite Website Insert hyperlinks Go to the City of Half Moon Bay website http://www.half-moon-bay.ca.us/ http://www.half-moon-bay.ca.us/ Go to the Cabrillo Unified School District website http://www.cabrillo.k12.ca.us/ http://www.cabrillo.k12.ca.us/ Page 16 Activity 4: Creating the Home Page 4

17. Half Moon Bay Townsite Website Insert e-mail link On the Insert (Common)panel, select Email Link In the Text text box, type a direction, such as Send e-mail to the Half Moon Bay City Council. In the E-Mail text box put your email address Page 17 Activity 4: Creating the Home Page 4

18. Half Moon Bay Townsite Website Insert image Provide accessibility for web users with disabilities Alternate: Photograph of the Pacific coastline off Half Moon Bay Good also for SEO (Search Engine Optimization) Under the image add a caption: The Pacific coastline looking north from Half Moon Bay. Page 18 Activity 4: Creating the Home Page 4 Note: To keep the text tight to the bottom of the image you need to: Select the image then arrow over to the right. Then hit “Shift”+”Enter” to create a break (in html ). If you just hit “Enter” you will create a new paragraph (in html ).

19. Half Moon Bay Townsite Website Add body text: Page 19 Activity 4: Creating the Home Page 4

20. Half Moon Bay Townsite Website Add body text: Page 20 Activity 4: Creating the Home Page Save & Preview in browser  F12 4

21. Half Moon Bay Townsite Website Adding Navigation Links The following figure shows the sample Half Moon Bay Navigation bar with Flash buttons inserted Page 21 Activity 5: Connecting the Web Pages 5 Note: Flash buttons are no longer supported in Dreamweaver. In the next steps we will: Insert a table above the original Split it into columns Add a header Add text Link the text so they become the navigation buttons

22. Half Moon Bay Townsite Website Adding Navigation Links The following figure shows the sample Half Moon Bay Navigation bar with text navigation buttons that you will be creating in the next steps. Page 22 Activity 5: Connecting the Web Pages 5

23. Half Moon Bay Townsite Website Adding Navigation Links Page 23 Activity 5: Connecting the Web Pages 5 To create the Navigation bar: Highlight the existing table and then hit enter to push it down 2 spaces. Add a table above the original that is 2 rows, 5 columns & 900px. Adjust the columns so they are equal (900/5= 180px) Merge the top row and create a Masthead to insert (900px by 150px) In the second row, cell 1 type in Home, cell 2 – History, 3 – Directory, 4 – Events, 5 – Map. Highlight second row and select Horz: Center. Highlight Home and link to index.html Highlight History, link to history.html, Directory to directory.html, etc.

24. Half Moon Bay Townsite Website Copying the index page format: 1. Make sure everything on the index page is exactly as you want it. 2. Save the index.html page 3. Saveas the index.html page as history.html 4. Saveas the index.html page as directory.html 5. Saveas the index.html page as events.html 6. Saveas the index.html page as map.html Page 24 Activity 6: Creating the Other Web Pages 6

25. Half Moon Bay Townsite Website Page 25 Activity 6: Creating the Other Web Pages 6 Building the History page The following figure shows the sample Half Moon Bay History page: Open the history.html page Make changes as shown See assets for content Add some links to websites Google for link sites Add images – see assets Be creative

26. Half Moon Bay Townsite Website Page 26 Activity 6: Creating the Other Web Pages 6 Building the Directory page The following figure shows the sample Half Moon Bay Directory page: Open the directory.html page Make changes as shown See assets for content See assets for images Google for other images Add appropriate links to places Be creative

27. Half Moon Bay Townsite Website Page 27 Activity 6: Creating the Other Web Pages 6 Building the Events page The following figure shows the sample Half Moon Bay Events page: Open the events.html page Make changes as shown See assets for content See assets for images Add links to events Google for other images Be creative

28. Half Moon Bay Townsite Website Page 28 Activity 6: Creating the Other Web Pages 6 Building the Map page The following figure shows the sample Half Moon Bay Map page: Open the map.html page Make changes as shown See assets for content See assets for images Try putting in a Google map Be creative

29. Half Moon Bay Townsite Website Test Links F12, save and then test all your links. Check carefully your layout, spelling, grammar etc. Page 29 Activity 7: Testing the Website 7

30. Half Moon Bay Townsite Website Uploading via Dreamweaver Using the Site panel in Dreamweaver view the structure of your site if not already done set up a remote site and then post your “halfmoon-bay” site to the server. Page 30 Activity 8: Managing the Website 8

31. Half Moon Bay Townsite Website Check the following: Typography: Titles, subheadings, and text should be displayed in sizes that reflect the content hierarchy. Avoid excessive scrolling in text blocks; use separate pages instead. Images: All images should be appropriate to the content and have alternative text (ALT tags). Images should be displayed with appropriate sizing and resolution. Layout: The layout should follow a consistent pattern and reflect the purpose of the content. Hyperlinks: Both internal and external hyperlinks should be appropriate for the content and should function correctly. Navigation: The site should be easy to navigate so information can be found easily. Page 31 Project Assessment 9

32. Half Moon Bay Townsite Website Check the following: The purpose, goals, and audience should be clear. When addressing multiple audiences, the purpose and goals for each should be identified and the method for segmenting the information should be addressed. The information presented should be useful. The information should be as factual as necessary or as entertaining, as appropriate. Feedback should be actively sought. The site should express and fit well with the site’s stated purpose and goals. Page 32 Project Assessment 9

33. Half Moon Bay Townsite Website Other Considerations Here are some other areas that can be assessed, although they are not specifically addressed in the project activities: Copyright issues are addressed appropriately. The website displays correctly in various browsers, as required. If the project is part of an academic unit, assess specific content objectives and skills. Page 33 Project Assessment 9

34. Half Moon Bay Townsite Website Congratulations! Page 34