Chapter 2
This presentation is the property of its rightful owner.
Sponsored Links
1 / 35

Chapter 2 PowerPoint PPT Presentation


  • 70 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Chapter 2

Chapter 2

Developing a Web Page


Creating head content and setting page properties

Creating Head Content and Setting Page Properties

  • A web page is composed of two distinct sections:

    • The head content

    • The body


Creating head content and setting page properties1

Creating Head Content and Setting Page Properties

  • The head content includes the page title that appears in the title bar of the browser and meta tags.

  • Meta tags are HTML code that include information about the page, such as keywords and descriptions.


Creating head content and setting page properties2

Creating Head Content and Setting Page Properties

Meta icon

CSS icon

Title text box on Document toolbar

Head content section

Title icon

Viewing the head content


Creating head content and setting page properties3

Creating Head Content and Setting Page Properties

  • 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 properties4

Creating Head Content and Setting Page Properties

Keywords

Keywords dialog box


Creating head content and setting page properties5

Creating Head Content and Setting Page Properties

  • The body is the part of the page that appears in a browser window.


Creating head content and setting page properties6

Creating Head Content and Setting Page Properties

  • The background coloris 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 properties7

Creating Head Content and Setting Page Properties

  • 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 properties8

Creating Head Content and Setting Page Properties

  • 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 properties9

Creating Head Content and Setting Page Properties

  • The default color for unvisited links, or links that the user has not clicked yet, is blue. Unvisited links are usually simply called links.

  • The default color for visited links, or links that have been previously clicked, is purple.


Creating head content and setting page properties10

Creating Head Content and Setting Page Properties

  • Dreamweaver has two web-safe color palettes, Color Cubes and Continuous Tone, each of which contains 216 web-safe colors.


Creating head content and setting page properties11

Creating Head Content and Setting Page Properties

Click list arrow to choose a color palette

Web-safe palettes

Available color palettes

Color picker showing color palettes


Creating importing and formatting text

Creating, Importing, and Formatting Text

  • 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 text1

Creating, Importing, and Formatting Text

  • 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 text2

Creating, Importing, and Formatting 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.


Creating importing and formatting text3

Creating, Importing, and Formatting Text

  • The way fonts are rendered (drawn) on the screen differs because Windows and Macintosh computers use different technologies to render them.


Creating importing and formatting text4

Creating, Importing, and Formatting Text

  • Text in your website should be attractive and easy to read.

  • Cascading Style Sheets (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 text5

Creating, Importing, and Formatting Text

  • 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.


Creating importing and formatting text6

Creating, Importing, and Formatting Text

  • To change the size of text using the Property inspector:

    • Select a numerical value for the size from 9 to 36 pixels.

    • Use a size expressed in words from xx-small to larger.


Creating importing and formatting text7

Creating, Importing, and Formatting Text

  • To format a paragraph as a heading, click anywhere in the paragraph, and then select the heading size you want from the Format list in the HTML Property inspector.


Adding links to web pages

Adding Links to Web Pages

  • 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 pages1

Adding Links to Web Pages

  • 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 pages2

Adding Links to Web Pages

mailto: link

mailto: link on the Property inspector


Adding links to web pages3

Adding Links to Web Pages

  • A menu bar, or navigation bar, is an area on a web page that contains links to the main pages of a website.


Using the history panel and editing code

Using the History Panel and Editing Code

  • 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 code1

Using the History Panel and Editing Code

  • 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 code2

Using the History Panel and Editing Code

Drag slider to undo steps

Click in the bar next to a step to undo to that step

The History panel


Using the history panel and editing code3

Using the History Panel and Editing Code

  • 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 code4

Using the History Panel and Editing Code

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 code5

Using the History Panel and Editing Code

  • 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.


Modifying and testing web pages

Modifying and Testing Web Pages

  • As you add and modify pages, test each page as part of the development process.

  • Test a web page in Live view or in a browser window to make sure that all text and image elements appear the way you expect them to.


Modifying and testing web pages1

Modifying and Testing Web Pages

  • Adobe BrowserLab is a tool that 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.


Modifying and testing web pages2

Modifying and Testing Web Pages

  • The Multiscreen Preview button is located on the document toolbar. With the Multiscreen Preview, you can view a page in three device sizes in one window.


Modifying and testing web pages3

Modifying and Testing Web Pages

Viewport Sizes button

Phone preview

Tablet preview

The Desktop preview

Using the Multiscreen Preview


  • Login