Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.

Slides:



Advertisements
Similar presentations
Chapter 1: Introduction. Contents Whats New in Dreamweaver CS4? The Dreamweaver CS4 Interface Setting Up a Site Creating a Web Page Adding Text to Your.
Advertisements

Chapter 2 HTML Basics Key Concepts
Creating and Editing a Web Page Using Inline Styles
Tutorial 2: Formatting Text. Objectives Session 2.1 – Learn the functions of the Common toolbar – Change the size of text – Discern which fonts to use.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown XHTML CODING -- TAGS.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 1 Taking A Tour Of Dreamweaver.
Chapter 3 Working with Text and 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 Properties.
Website Development with Dreamweaver
Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags.
1.  Describe the anatomy of a web page  Format the body of a web page with block-level elements including headings, paragraphs, lists, and blockquotes.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
CSCI 1101 Intro to Computers
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
© Ms. Masihi 1.  A Horizontal Rule is a built-in graphic element that can be used to draw horizontal lines (rules) on your web page.  This is accomplished.
IT204 - Web Scripting and Authoring I Introduction to Dreamweaver Unit 6.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 4 Linking the Site.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 7 Frames.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 6 Backgrounds and Colors.
Suzanne Sultan1 Line Breaks, Paragraphs, lists Lab3.
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
L. Anne Spencer (c) 2001 Basic Web Design Document, text, & layout formatting tags & attributes.
HTML Tags Lesson 2. What are HTML Tags?  Markup tags  Coded instructions that accompany the plain text of an HTML document  Syntax –Left wicket< –Tag.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
Tutorial 3 Adding and Formatting Text with CSS Styles.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
1 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags. Plan an HTML site. Create a table with HTML.
Elements and Attributes. XHTML Elements The element contains special information that does not necessarily show up on the web page. The element determines.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ.
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 2 Building Your First Web.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Chapter 5 pp HTML Elements & Attributes Format Content Or Examples This Text Is A Hyperlink.
Creating and Editing a Web Page. Organization Logo Menu Bar Title Background Text Links Heading Image Links Body of Web Page.
Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
Text Elements. We've already learned about the,,,, and elements. Now let's learn some elements that we'll use to present actual text content on our web.
© Ms. Masihi.  A Web page contains text and images that convey specific information to viewers.  To create a new web page, open Dreamweaver and select.
Copyright © 2006 Prentice-Hall. All rights reserved.1 Computer Literacy for IC 3 Unit 2: Using Productivity Software Project 5: Formatting Paragraphs and.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
Creating a Web Page.
Positioning Objects with CSS and Tables
Display Property.
Dreamweaver – Project #1
AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE By: RC Emily Solis
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Exercise 24 – Software Skills
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Positioning Objects with CSS and Tables
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To Text

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Applying Structure To Text Structure a document with headings Insert line breaks format quotations with HTML tags Horizontal rule Use ordered and unordered lists Change bullet and number styles with CSS Create definition lists

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Visual Summary Text Insert bar Access to HTML tags to structure text

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Visual Summary (continued) Other HTML characters Located at right end of “text insert” bar

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Visual Summary (continued) Property inspector Used very frequently

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Visual Summary (continued) Code hint pop-up list

Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Inserting Headings Deprecated In favor of CSS

Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Insert Headings Using The Insert Bar

Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Insert Headings Using The Insert Bar (Continued)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Inserting Line Breaks Forces new line Addresses Other block text Click in the empty paragraph space between the Heading 3 lines Mailing Address: and Phone Numbers:

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Inserting Line Breaks (continued)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Inserting Line Breaks – Alternate Using Design view

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Formatting A Large Quotation On A Web Page Blockquote  … Default indentation “Cite” tool for quotation source

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Formatting An Inserted Block Quote By using the Property inspector

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 In The Design View

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Using The “Cite” Tool

Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Using The “Cite” Tool (continued)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Inserting A Short Quotation In A Paragraph Quote tag <<q> Double quotes WW3C CSS

Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Tag Chooser

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Tag Editor

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Browser Preview

Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Separating Content Using A Horizontal Rule Horizontal rule tag,  Width  Color  Noshade  Size Block element

Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Insert A Horizontal Rule

Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Creating Ordered And Unordered Lists Ordered  Numbered Unordered  Bulleted 1.One 2.Two 3.Three Two One Three

Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Ordered List Two tags  Ordered list  List item Pair needed for each item

Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Unordered List Two tags  unordered list  List item Pair needed for each item Code view

Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Styling Lists Ordered  Various numbered Unordered  Various bulleted 1.One 2.Two 3.Three a)One b)Two c)Three A.One B.Two C.Three oTwo oOne oThree  Two  One  Three  Two  One  Three

Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 CSS Style Definition

Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Creating Definition Lists Needs three tag sets  … definition list  … definition term  … definition description

Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Definition Lists – Code View

Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Summary Structure a document with headings Insert line breaks format quotations with HTML tags Horizontal rule Use ordered and unordered lists Change bullet and number styles with CSS Create definition lists

Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 End-of-Project Exercises Screen ID Multiple Choice Discussion Questions Skill drill CCreate Heading Using the Property Inspector CCreate Unordered Lists CCreate and Modify the Style of an Ordered List CCreate a Nested List IInsert Special HTML Characters

Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 End-of-Project Exercises (continued) Challenge FFormat Heading in the Drummond Reid Web Pages IInsert a Horizontal Rule Divider above the Footer CCovert a Paragraph Break to a Line Break RReformat Text as Unordered and Ordered Lists CChange the Numbering Style of an Ordered List Portfolio Builder CCreate an Online Resume

Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 What Are Your Questions