1. Chapter 2 Developing a Web Page

2. A web page is composed of two distinct sections: – The head content – The body Creating Head Content and Setting Page Properties

3. The head content includes the page title that appears in the title bar of the browser and meta tags. The body is the part of the page that appears in a browser window. It contains all the page content that is visible to users, such as text, images, and links. Creating Head Content and Setting Page Properties

4. Meta tags are HTML code that include information about the page, such as keywords and descriptions. Keywords are words that relate to the content of the website. A description is a short paragraph that describes the content and features of the website. Creating Head Content and Setting Page Properties

5. The background color is the color that fills the entire page and should complement the colors used for text, links, and images on the page. Creating Head Content and Setting Page Properties

6. A CSS layout block is a 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. Creating Head Content and Setting Page Properties

7. The default font and default link colors are the colors used by the browser to display text, links, and visited links. Creating Head Content and Setting Page Properties

8. The default color for unvisited links, or links that the user has not clicked yet, is blue. Unvisited links are usually called links. The default color for visited links, or links that have been previously clicked, is purple. Creating Head Content and Setting Page Properties

9. You can choose from three color notation schemes for your web pages: –RGBa –HEX –HSLa You select color choices using the color picker. Creating Head Content and Setting Page Properties

10. Selected color is #FFFFFF (white) Available color modes Color picker showing color modes

11. Most information in web pages is presented in the form of text. You can type text directly on a page in Dreamweaver, import, or copy and paste it from another software program. Creating, Importing, and Formatting Text

12. Dreamweaver will preserve formatting and generate clean HTML code. Clean HTML code is code that does what it is supposed to do without using unnecessary instructions, which take up memory. Creating, Importing, and Formatting Text

13. To avoid font compatibility and accessibly issues, you can use TypeKit, a company acquired by Adobe in 2011, that provides access to web fonts through the Adobe Creative Cloud. TypeKit offers fonts called Adobe Edge Web fonts though a subscription-based service that can be read correctly by all browsers and devices. Creating, Importing, and Formatting Text

14. TypeKit is part of your Creative Cloud subscription and Creative Cloud users have access to most of the fonts on TypeKit at no additional charge. Creating, Importing, and Formatting Text

15. The way fonts are rendered (drawn) on the screen differs because Windows and Macintosh computers use different technologies to render them. If you are not using embedded fonts, it is wise to stick to the standard fonts that work well with both systems. Creating, Importing, and Formatting Text

16. Text in your website should be attractive and easy to read. Previously web designers used the Property inspector to apply formatting attributes, such as font type, size, color, alignment, and indents, thus creating HTML tags. Creating, Importing, and Formatting Text

17. Tags are the parts of the code that specify the appearance for all page content when viewed in a browser. Creating, Importing, and Formatting Text

18. Creating Cascading Style Sheets (CSS) is the preferred method to format and place web elements. CSS are sets of formatting attributes that you use to format web pages to provide a consistent presentation for content across the site. Creating, Importing, and Formatting Text

19. Cascading Style Sheets make it easy to separate page content from the page design. They are sets of formatting attributes that you use to format web pages to provide a consistent presentation for content across the site. Creating, Importing, and Formatting Text

20. Separating content from design is preferable because editing content and formatting content are two separate tasks. When you use CSS styles, you can update or change the page content without disturbing the page formatting. Creating, Importing, and Formatting Text

21. A Font-combination is a set of font choices that specify which fonts a browser should use to display the text on your web page. TypeKit has greatly expanded your font choices with the ability to embed new fonts into web pages. Creating, Importing, and Formatting Text

22. There are two ways to change the size of text using the Property inspector: 1.Select a numerical value for the size from 9 to 36 pixels. 2.Use a size expressed in words from xx-small to larger. Creating, Importing, and Formatting Text

23. The HTML Property inspector lets you format blocks of text as paragraphs or as different sizes of headings. You can format paragraphs as headings or align paragraphs using the alignment button. Creating, Importing, and Formatting Text

24. When you create links on a web page, it is important to avoid broken links, or links that cannot find their intended destinations. You should provide a point of contact, or a place on a web page that provides users with a means of contacting the company. Adding Links to Web Pages

25. A common point of contact is a mailto: link, which is an email address that users with questions or problems can use to contact someone at the company’s headquarters. Adding Links to Web Pages

26. mailto: link on the Property inspector mailto: link Adding Links to Web Pages

27. A menu bar, or navigation bar, is an area on a web page that contains links to the main pages of a website. Adding Links to Web Pages

28. A rollover is when a user moves a mouse pointer over each main link, displaying additional links. Adding Links to Web Pages

29. The CIA website Additional links appear when mouse pointer rolls over a main link

30. The WCAG guidelines list ways to ensure that all users can successfully and easily navigate a website. It states: “Provide ways to help users navigate, find content, and determine where they are.” Adding Links to Web Pages

31. Suggestions include: –limiting the number of links on a page –using techniques to allow users to quickly access different sections of a page –making sure that links are readable and easily distinguishable Adding Links to Web Pages

32. The History panel records each editing and formatting task you perform and displays them in a list in the order in which you completed them. Using the History Panel and Editing Code

33. Each task listed in the History panel is called a step. You can drag the slider on the left side of the History panel to undo or redo steps. Using the History Panel and Editing Code

34. The History panel Click in the bar next to a step to undo to that step Drag slider to undo steps Using the History Panel and Editing Code

35. By default, the History panel records 20 steps, but you can change the number of steps in the General category of the Preferences dialog box. However, keep in mind that setting this number too high will require additional memory and could affect Dreamweaver’s performance. Using the History Panel and Editing Code

36. You can view the code in Dreamweaver using Code view, Code and Design views, or the Code Inspector. The Code Inspector is a separate window that displays the current page in Code view. Using the History Panel and Editing Code

37. The advantage of using the Code Inspector is that you can see a full-screen view of your page in Design view while viewing the underlying code in a floating window that you can resize and position wherever you want. Using the History Panel and Editing Code

38. The Code Inspector Code displayed in the Code Inspector Page displayed in Design view behind the Code Inspector Selected text with corresponding code Using the History Panel and Editing Code

39. A JavaScript function is a block of code that adds dynamic content such as rollovers or interactive forms to a web page. A rollover is a special effect that changes the appearance of an object when the mouse moves over it. Using the History Panel and Editing Code

40. As you add and modify pages, test each page as part of the development process. The best way to test a web page is to preview it in Live view or in a browser to make sure that all text and image elements appear the way you expect them to. Modifying and Testing Web Pages

41. You should also test your links to make sure they work properly. Modifying and Testing Web Pages

42. It is important to design your pages so that all browsers and screen sizes can display them well. You should test your pages using different browsers and a wide variety of screen sizes to ensure the best view of your page by the most people possible. Modifying and Testing Web Pages

43. Most websites today are written using responsive design. Responsive design means using style sheets to control how pages look on different devices. Modifying and Testing Web Pages

44. Desktop design Mobile device Comparing a desktop design to a mobile design Banners use different images Modifying and Testing Web Pages

45. With the Dreamweaver Fluid Grid Layouts, you can use percents rather than specific measurements to control how large or small page elements appear, depending on the device it is viewed on. Modifying and Testing Web Pages

46. It is poor design practice not to provide pages that can be viewed and navigated easily whatever size screen is used. Modifying and Testing Web Pages

47. Style sheets are used with Media Queries to identify which device is calling up the page, then apply the appropriate code for optimum viewing. Modifying and Testing Web Pages

48. When Fluid Grid Layouts and Media Queries are used to create pages, the designer can determine the values to use for each layout: –Mobile –Tablet –Desktop Modifying and Testing Web Pages

49. One style sheet controls the styles for all three devices by providing separate sets of styles for each device. Modifying and Testing Web Pages