1. CIS 205—Web Design & Development Dreamweaver Chapter 2

2. Chapter 2: Developing a Web Page Introduction – Developing a Web page requires several steps Head content—information used by search engines Colors—for background and text Content—text and graphics Format—fonts and page layout Links—to other pages in your Web site or other sites Testing—ensure that all page elements work as intended

3. Chapter 2: Developing a Web Page Understanding Page Layout – Use white space effectively Too much content on a page can be distracting ‘White space’ is an area with no text or graphics – Limit multimedia elements Too many images, videos, sounds take a long time to load – Keep it simple Simplicity that works well is better than complexity w/ errors – Use an intuitive navigation structure Users should always know where they are in a Web site – Apply a consistent theme Be consistent so your site has a unified look and feel

4. Lesson 1: Create Head Content Creating the Head Content – A Web page has two distinct sections Head content – Page title (appears in the browser title bar) – Meta tags (HTML elements that contain information about the page) Body – Page content (text, images) that appears to the user in the browser Setting Web Page Properties – Background color – Should be light w/ dark text, or dark w/ light text (white is good) – Default font – Default link colors (unvisited links and visited links)

5. Lesson 1: Create Head Content (2) Edit a page title 1.Start Dreamweaver, click the Site list arrow in the Files panel, click The Striped Umbrella (if necessary) 2.Double-click index.html in the Files panel 3.Click View, Head Content in the menu bar (the Meta and Title icons appear above the page) 4.Click the Title icon (the page title appears in the Property inspector (PI), which can be modified as desired) The page title also appears in the Document toolbar above the page More descriptive words in the page title can assist search engines 5.Save the page if changes have been made

6. Lesson 1: Create Head Content (3) Enter keywords 1.Click the Common tab on the Insert bar (below the menu bar) 2.Click the Head list arrow (you’ll have to search for this one) and click Keywords 3.In the dialog box, type beach resort, spa, Ft. Eugene, Florida, Gulf of Mexico, fishing, dolphin cruises The Keywords icon appears in the Head content section Clicking the Keywords icon causes the keywords to appear in the PI Keywords are important in assisting search engines to find your web pages List the most important keywords first

7. Lesson 1: Create Head Content (4) Enter a description 1.Click the Head list arrow on the Insert bar and click Description 2.In the dialog box, type The Striped Umbrella is a full- service resort and spa just steps from the Gulf of Mexico in Ft. Eugene, Florida 3.Click OK 4.Click the Code button in the Document bar The title, keywords, and description appear in meta tags in the HTML code 5.Click the Design button to return to Design view 6.Click View on the menu bar, then click Head Content

8. Lesson 1: Create Head Content (5) Set the page background color 1.In the menu bar, click Modify, Page Properties 2.Click the Background color box and then click the square in the lower right-hand corner (white) 3.Click Apply, then click OK Clicking Apply lets you see the changes before clicking OK

9. Lesson 2: Create, Import, and Format Text Creating and Importing Text – You can create text on a Web page or import text from another source, such as a Word document – The fonts you choose for a Web page may not display correctly on the user’s computer if those fonts are not supported on the user’s computer Formatting Text Using the Property Inspector – Text on a Web page should be very easy to read – Format text by selecting it and then using the PI to change the font type, size, color, etc.

10. Lesson 2: Create, Import, and Format Text (2) Changing Fonts – A font combination is a set of three fonts – If the first font listed is not available on the user’s computer, the second font will be used, and so on Example: Arial, Helvetica, sans serif Changing Font Sizes – In the PI, you can select a font size from 1 (smallest) to 7 (largest) – You can also select a size relative to the default base font of 3 (+1 being one size larger, -2 being two sizes smaller, etc.)

11. Lesson 2: Create, Import, and Format Text (3) Formatting Paragraphs – Click on a paragraph to select it – Select a format from the Format list arrow in the PI – Heading 1 is largest, Heading 6 is smallest – A Heading is bold followed by a blank line – Paragraphs can be aligned by clicking an Align button in the PI Using HTML Tags Compared to Using CSS – So far, you are using HTML tags to format text – Later, you will use CSS to format Web pages (preferred)

12. Lesson 2: Create, Import, and Format Text (4) Enter text 1.In index.html, position the insertion point directly at the end of the paragraph (after “You won’t want to go home.”) 2.Press [Enter] and type The Striped Umbrella This creates a new paragraph following a blank line 3.Hold [Shift] and press [Enter], then type 25 Beachside Drive This creates a line break without creating a new paragraph 4.Add this text using line breaks after each line: Ft. Eugene, Florida 33775 555.594.9458

13. Lesson 2: Create, Import, and Format Text (5) Format Text 1.Select the entire address and phone number just entered 2.Click the Italic button in the PI 3.With the text still selected, click the Size list arrow and click 2 4.Save you work and close the document

14. Lesson 2: Create, Import, and Format Text (6) Save an image file in the assets folder 1.Open dw2_1.html from your Data Files and save it as spa.html in the striped_umbrella folder, overwriting the existing file. 2.Click the Spa image broken link placeholder 3.Click the Browse for File icon next to the Src textbox in the PI, navigate to the chapter_2 assets folder in your Data Files 4.Click the_spa.jpg, click OK, then click on the page A copy of the_spa.jpg is now in the assets folder in the Files panel

15. Lesson 2: Create, Import, and Format Text (7) Import text 1.Click Edit on the menu bar, click Preferences, then click General in the Category list 2.Verify that the Use CSS instead of HTML tags check box is NOT selected, click OK 3.Click to the right of the spa graphic on the spa.html page and press [Enter] 4.On the menu bar, click File, point to Import, click Word Document 5.Navigate to the chapter_2 folder in your Data Files and double-click spa.doc 6.Click Commands on the menu bar, click Clean Up Word HTML (make sure all check boxes are checked) 7.Click OK, then click OK again

16. Lesson 2: Create, Import, and Format Text (8) Set text properties 1.Select all the text imported from spa.doc 2.Click the Font list arrow in the PI and click Arial, Helvetica, sans serif 3.Click the Size list arrow in the PI and click 3 4.Click the Align Center button in the PI, then click anywhere else on the page 5.Click on the text Spa Services, click the Format list arrow in the PI, click Heading 4 Click the Code button to view the HTML, then click Design 6.Select the heading Spa Services, click the Text Color button in the PI, then click dark blue (#000066) 7.Click File on the menu bar, click Save, and close

17. Lesson 3: Add Links to Web Pages Adding Links to a Web Page – Hyperlinks (links) allow the user to download (display) pages in the current Web site or other Web sites – Links are created by selecting text or an image on a page and setting a path to the desired page – A broken link results from an error in setting the path – A page should also contain a point of contact for users to contact the company or web site administrator – A mailto: link is a common point of contact Using Navigation Bars – A navigation bar is a set of links to the main pages of a Web site (usually at the top or side of the main pages) – The navigation bar can be text or images

18. Lesson 3: Add Links to Web Pages (2) Create a navigation bar 1.Open the index.html page and click to the left of the text About Us – Spa – Café 2.Type Home – before this text and – Activities following in order to create a navigation bar Format a navigation bar 1.Select the navigation bar for index.html 2.Click the Format list arrow and click Heading 4

19. Lesson 3: Add Links to Web Pages (3) Add links to Web pages 1.Double-click Home in the navigation bar 2.Click the Browse for File icon next to the Link text box in the PI and navigate to the striped_umbrella root folder Verify that the Relative to: list is set at Document 3.Click index.html in file list of the dialog box, click OK 4.Repeat Steps 1-3 above to create links for the other words in the navigation bar corresponding to the appropriate files in striped_umbrella

20. Lesson 3: Add Links to Web Pages (4) Create an email link 1.Place the insertion point after the phone number in index.html and insert a line break (press [Enter]) 2.In the Common tab section of the Insert bar, click the Email Link button 3.In the Text text box type Club Manager and in the E- Mail text box type manager@stripedumbrella.com, click OKmanager@stripedumbrella.com 4.Select the email link and format it as size 2, italic, Arial, Helvetica, sans serif font 5.Save index.html

21. Lesson 3: Add Links to Web Pages (5) View the linked pages in the site map 1.Click the Expand to show local and remote sites button on the Files panel If a site map doesn’t appear, click the Site Map button list arrow in the tool bar, click Maps and Files 2.Click View on the Files panel menu bar, point to Site Map Options, click Show Page Titles 3.Click the first Untitled Document page in the site map, click the page title, and type About Our Property, then press [Enter] 4.Repeat Step 3 for the other untitled pages using The Sand Crab Café and Activities at the Striped Umbrella 5.Click the Collapse button in the tool bar

22. Lesson 4: Use the History Panel and Edit Code Using the History Panel – The History panel allows you to undo mistakes by displaying your edits in a chronological list Click Window on the menu bar, click History – Each task you perform is called a step – A slider on the left allows you to undo and redo steps Viewing HTML Code in the Code Inspector – The Code Inspector displays HTML code in a separate window – JavaScript code in a Web page adds dynamic content such as rollovers or interactive forms

23. Lesson 4: Use the History Panel and Edit Code (2) Use the History panel 1.Click Window on the menu bar, click History 2.Click the History panel options menu (right side of panel title bar), click Clear History, click Yes 3.Select the horizontal rule (gray line) in index.html 4.In the PI, type 90 in the W text box, click the list arrow next to the W text box, click % Note the most recent steps in the History panel 5.Click the History panel options menu, click Close panel group

24. Lesson 4: Use the History Panel and Edit Code (3) Use the Code Inspector 1.Select the horizontal rule (gray line) in index.html 2.Click Window on the menu bar, click Code Inspector (or press [F10]) 3.Click the View Options list arrow on the Code Inspector toolbar, then click Word Wrap In fact, you may want to have all items in View Options checked (except perhaps Hidden Characters) 4.In the Code Inspector, select 90 and change it to 80 5.Click the Refresh button in the Code Inspector

25. Lesson 4: Use the History Panel and Edit Code (4) Use the Reference panel 1.Select the horizontal rule (gray line) in index.html 2.Click the Reference button in the Code Inspector toolbar 3.The Reference panel opens with information about the horizontal rule 4.Right-click the Results panel group title bar and click Close panel group 5.Close the Code Inspector

26. Lesson 4: Use the History Panel and Edit Code (5) Insert a date object 1.Select the text January 1, 2010 in index.html and press [Delete] 2.Click the Date button on the Insert bar (Common tab) and click March 7, 1974 in the Date format list 3.Click the Update automatically on save checkbox, OK 4.Click the Split button in the document toolbar Today’s date is displayed due to adding a date object 5.Click the Design button in the document toolbar 6.Save index.html

27. Lesson 5: Modify and Test Web Pages Testing and Modifying Web Pages – Whenever you modify a Web page you should test it Test it in a browser, check whether all graphics display properly, proofread all text for errors, test all links Testing Using Different Browsers and Screen Sizes – Test Web sites in Internet Explorer and Mozilla Firefox using the Preview/Debug in Browser button in the document toolbar – Test different screen sizes using the Window Size menu in the document status bar Testing a Web Page as Rendered in a Mobile Device – Test what a page would look like in a Blackberry (for example) using the Preview/Debug in Browser button

28. Lesson 5: Modify and Test Web Pages (2) Modify a Web page 1.Click the Restore Down button (just left of the Close button) on the index.html title bar 2.Click the Window Size list arrow on the status bar and click the 600 x 300 size The majority of screens are 1024 x 768 or higher 3.Click the Window Size list arrow and click the 760 x 420 size 4.Click the Maximize button on the index.html title bar

29. Lesson 5: Modify and Test Web Pages (3) Test Web pages by viewing them in a browser 1.Click the Preview/Debug in browser button on the Document toolbar, then click a browser 2.Check all the links in the navigation bar of index.html 3.Close the browser window and all open pages