Chapter 2 Developing a Web Page

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Modify and Test Web Pages Things to test: – Preview in a browser window – Test links – Proofread 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 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 Lesson 5 – Modify and Test Web Pages Phone preview Tablet preview Viewport Sizes button The Desktop preview

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