1 / 33

Chapter 2

Chapter 2. Developing a Web Page. Chapter 2 Lessons. Introduction Create head content and set page properties Create, import, and format text Add links to web pages Use the History panel and edit code Modify and test web pages. Introduction. Introduction. Steps in developing a Web page:

pearlie-kyrie
Download Presentation

Chapter 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 2 Developing a Web Page

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

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

  4. Introduction 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

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

  6. Lesson 1 – Create Head Content and Set Page Properties Create Head Content • A web page is composed of two sections: • 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 • Body • Part of the page that appears in a browser window • Contains text, graphics, and links

  7. Lesson 1 – Create Head Content and Set Page Properties 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

  8. Lesson 1 – Create Head Content and Set Page Properties 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

  9. Lesson 1 – Create Head Content and Set Page Properties 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

  10. Lesson 1 – Create Head Content and Set Page Properties 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 Continuous Tone • Color Cubes

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

  12. Lesson 1 – Create Head Content and Set Page Properties 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

  13. Lesson 1 – Create Head Content and Set Page Properties 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

  14. Lesson 2 – Create, Import, and Format Test 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

  15. Lesson 2 – Create, Import, and Format Test 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.

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

  17. Lesson 2 – Create, Import, and Format Test 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.

  18. Lesson 2 – Create, Import, and Format Test 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.

  19. Lesson 2 – Create, Import, and Format Test 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.

  20. Lesson 2 – Create, Import, and Format Test 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

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

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

  23. Lesson 3 – Add Links to Web Pages Add Links to Web Pages • Creating a Link in Dreamweaver: • Select the text or image that you want to serve as a link. • 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

  24. Lesson 3 – Add Links to Web Pages E-mail Link Dialog Box 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. Lesson 3 – Add Links to Web Pages Assets Panel URL Category URLs button Preview of email link Email link on home page

  26. Lesson 3 – Add Links to Web Pages 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

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

  28. Lesson 4 – Use the History Panel and Edit Code 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

  29. Lesson 4 – Use the History Panel and Edit Code View HTML Code in Code Inspector Page displayed in Design view behind the 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 Code displayed in the Code Inspector

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

  31. Lesson 5 – Modify and Test Web Pages 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

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

  33. Lesson 5 – Modify and Test Web Pages 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

More Related