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

Slides:



Advertisements
Similar presentations
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
1 Web Site Design Overview of the Internet Cookie Setton.
Learning the Basics – Lesson 1
Chapter 3 Tables and Page Layout
Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A.
Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.
Getting Started with Dreamweaver
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
@Ms. Masihi.  Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator,
Chapter 3 Working with Text and Cascading Style Sheets.
Getting Started with Expression Web 3
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Using Styles and Style Sheets for Design
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Developing a Web Page. Unit Objectives Plan the page layout Create the head content Set web page properties Create and format text Add links to web pages.
Web Technologies Website Development Trade & Industrial Education
CIS 205—Web Design & Development Dreamweaver Chapter 2.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit C Developing a Web Page.
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.
WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Website Development with Dreamweaver
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Dreamweaver MX Unit B CIS 205—Web Site Design and Development.
Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: – The head content – The body Creating Head Content and Setting Page.
Dreamweaver CS4 Concepts and Techniques Chapter 9 Using Spry to Create Interactive Web Pages.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
Macromedia Dreamweaver 8 Revealed LINKS WORKING WITH.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.
Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
Dreamweaver MX. 2 Tools for Code Editing (p. 366) n An HTML editor like Dreamweaver writes most of the code you need, but at times you will need to perform.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
Positioning Objects with CSS and Tables
DREAMWEAVER CS4  What’s New in Dreamweaver CS4? What’s New in Dreamweaver CS4?  Workspace in Dreamweaver CS4Workspace in Dreamweaver CS4  Opening and.
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.
COMP 143 Web Development with Adobe Dreamweaver CC.
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
Chapter 2 Developing a Web Page.
Learning the Basics – Lesson 1
Chapter A - Getting Started with Dreamweaver MX 2004
Dreamweaver – Project #1
Tutorial 6 Creating Dynamic Pages
Using Cascading Style Sheets (CSS)
Exercise 24 – Software Skills
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Chapter 2 Developing a Web Page

A web page is composed of two distinct sections: –The head content –The body 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 Properties

Viewing the head content Meta icon Head content section Title icon CSS icon Title text box on Document toolbar 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 Properties

Keywords dialog box Keywords 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 Properties

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

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

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

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 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 Properties

Color picker showing color palettes Available color palettes Web-safe palettes Click list arrow to choose a color palette Creating Head Content and Setting Page Properties

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

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

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

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

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

mailto: link on the Property inspector mailto: link 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. Adding Links to Web Pages

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

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

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

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

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

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

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 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 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 Pages

The Desktop preview Phone preview Tablet preview Using the Multiscreen Preview Viewport Sizes button Modifying and Testing Web Pages