1. Chapter 2 Developing a Web Page

2. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add links to web pages 4.Use the History panel and edit code 5.Modify and test web pages

3. Introduction Steps in developing a Web page: 1.Craft head content (important for search engines) 2.Choose colors for page background and text 3.Add page content, format, and link to other pages 4.Test links regularly Introduction

4. Understanding Page Layout Use white space effectively – Area on a page that contains no text or graphics Limit multimedia elements – Too much time to load page Keep it simple Use an intuitive navigation structure – Users should know were they are and how to get back to home page Apply a consistent theme – Give unified look and promotes greater ease-of-use and accessibility Introduction

5. Head Content Section Viewing the Head Content Lesson 1 – Create Head Content and Set Page Properties Document Title Text Box Title Icon Keyword Icon Description Icon

6. Create Head Content A web page is composed of two sections: 1.Head content includes  page title displayed in title bar of browser  Meta Tags, which are not visible to the web browser, includes information about the page  keywords for web searches  descriptions for web search results 2.Body  Part of the page that appears in a browser window  Contains text, graphics, and links Lesson 1 – Create Head Content and Set Page Properties

7. Create Head Content – cont. Accessing Head Content – Select View  Head Content from Menu Bar – CTRL + Shift + H Entering Keywords & Descriptions – Anticipate search terms – Keep them short and concise – List the most important keywords first – Consider the use of focus groups Lesson 1 – Create Head Content and Set Page Properties

8. Setting Web Page Properties Background color Font color Link colors (unvisited, visited) – Default:  Unvisited  blue  Visited  purple Accessing Page Properties Modify  Page Properties from Application Bar Page Properties button from Page Inspector CTRL + J Lesson 1 – Create Head Content and Set Page Properties

9. Setting Web Page Properties – Cont. CSS Layout blocks section of a web page that is defined and formatted using a Cascading Style Sheet a set of formatting characteristics you can apply to text, links, and other page objects Lesson 1 – Create Head Content and Set Page Properties

10. Choosing Colors Dreamweaver has two web-safe color palettes which appear consistent in all browsers and platforms Color Cubes (default palette) and Continuous Tone Contains 216 web-safe colors Color Cubes Continuous Tone Lesson 1 – Create Head Content and Set Page Properties

11. Choosing Colors – cont. Default Color button White Background color box Hexadecimal shorthand for white (number code is preceded with a # sign) Lesson 1 – Create Head Content and Set Page Properties

12. Making Pages Accessible to All Techniques you can use to ensure that your website is accessible to individuals with disabilities – Alternate text with images – Avoid certain colors – Supply text as an alternate source for information that is presented in an audio file Lesson 1 – Create Head Content and Set Page Properties

13. Using Appropriate Content Who is your audience? What is the age group of your audience? What is the reading level? Formal vs. informal tone Consider font sizes, amount of text and images, and amount of technical expertise needed to navigate Use consistency Lesson 1 – Create Head Content and Set Page Properties

14. Create, Import, and Format Text To add text to a Dreamweaver page – Type in Dreamweaver – Copy/paste [Ctrl][C] and [Ctrl][V] (Windows) – Import Word Document File  Import  Word Document or Excel Document Select file to be imported, then click Formatting list arrow Always use Clean Up Word HTML command Lesson 2 – Create, Import, and Format Test

15. Create, Import, and Format Text If text does not have a font specified, the default font on the user’s computer will be used to display the text. Keep in mind that some fonts might not appear the same on both a Windows and a Macintosh computer. Lesson 2 – Create, Import, and Format Test

16. Formatting Text with Property Inspector Make text attractive and easy to read Change font, size, and color Use Property Inspector to apply formatting attributes Lesson 2 – Create, Import, and Format Test

17. Using HTML Tags or Using CSS The standard practice today is to use Cascading Style Sheets (CSS) to handle the formatting and placement of web page elements. Default preference in Dreamweaver is to use CSS rather than HTML tags. Lesson 2 – Create, Import, and Format Test

18. Changing Fonts You can format your text with different fonts by choosing a font combination from the Font list in the Property inspector. A font combination is a set of three fonts that specify which fonts a browser should use to display the text of your web page. Font combinations are used so that if one font is not available, the browser will use the next one specified in the font combination. Lesson 2 – Create, Import, and Format Test

19. Changing Font Sizes There are two ways to change the size of text using the Property inspector – When the CSS option is selected, you can select a numerical value for the size from 9 to 36 pixels. – You can use a size expressed in words from xx-small to larger. Lesson 2 – Create, Import, and Format Test

20. Formatting Paragraphs Format – As text – As different sizes of headings Headings – Heading 1 is the largest – Heading 6 is the smallest – Browsers display text formatted as headings in bold, setting them off from paragraphs of text Lesson 2 – Create, Import, and Format Test

21. Formatting Text using Property Inspector Lesson 2 – Create, Import, and Format Test HTML Button CSS Button CSS Rule Font Combination Font Color Font Size

22. Web Filenames Do not use: 1.Spaces 2.Special characters 3.Punctuation 4.Uppercase letters 5.Number for the first character 6.Assume case-sensitive Lesson 2 – Create, Import, and Format Test

23. Add Links to Web Pages Creating a Link in Dreamweaver: 1.Select the text or image that you want to serve as a link. 2.Specify a path to the page to which you want to link in the Link text box in the Property inspector. Avoid broken links Provide point of contact – mailto: link – Insert Panel  Email Link Lesson 3 – Add Links to Web Pages

24. E-mail Link Dialog Box Lesson 3 – Add Links to Web Pages Text for email link on the page (this could also be a person’s name or position or the actual email link) Link information

25. Assets Panel URL Category URLs button Lesson 3 – Add Links to Web Pages Email link on home page Preview of email link

26. Navigation Bars Contain links to the main pages Usually located at top or side of page Backbone of the site’s navigation structure Can be created with text, images, or both Lesson 3 – Add Links to Web Pages

27. Selecting Text for the Home Link Lesson 3 – Add Links to Web Pages Link text box Browse for File icon Selected text Navigation Bar

28. Use the History panel History panel properties: – Records each editing and formatting task performed – Each task is called a step – 50 steps – Preferences adds more steps – Increasing steps uses memory Lesson 4 – Use the History Panel and Edit Code

29. View HTML Code in Code Inspector View Code – Code View – Code and Design View – Code Inspector Add advanced features – JavaScript - adds dynamic content such as rollovers or interactive forms to a web page – Rollover function - special effect that changes the appearance of an object when the mouse moves over it Lesson 4 – Use the History Panel and Edit Code Code displayed in the Code Inspector Page displayed in Design view behind the Code Inspector

30. Modify and Test Web Pages Things to test: – Preview in a browser window – Test links – Proofread Lesson 5 – Modify and Test Web Pages

31. Testing Pages Monitors – Size and resolution – Most screen resolutions are set to 1024x768 or higher – More content can be displayed at one time on a computer screen Platforms – UNIX, Mac, PC, Mobile devices Browsers – Explorer, Netscape, Firefox, Safari, Chrome Lesson 5 – Modify and Test Web Pages

32. Multiscreen Preview Mobile Devices – Multiscreen Preview button is located on the document toolbar – view a page in three device sizes in one window Lesson 5 – Modify and Test Web Pages Phone preview Tablet preview Viewport Sizes button The Desktop preview

33. Adobe BrowserLab Checks pages by simulating multiple browsers and platforms You can use it to test your pages in browsers that are not installed on your computer Need an Adobe ID to utilize Lesson 5 – Modify and Test Web Pages