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

Slides:



Advertisements
Similar presentations
DREAMWEAVER Welcome to our website!
Advertisements

Learning the Basics – Lesson 1
Creating and Editing a Web Page Using Inline Styles
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
1 Excel Lesson 3 Organizing the Worksheet Microsoft Office 2010 Introductory Pasewark & Pasewark.
Creating a Web Page HTML, FrontPage, Word, Composer.
@Ms. Masihi.  Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator,
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
Web Technologies Website Development Trade & Industrial Education
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit C Developing a Web Page.
Project 1: Creating a Dreamweaver Web Page and Local Site 1 Project Objectives Add a background image Open and close panels Display and describe the Property.
1 Macromedia Dreamweaver Outline Introduction Macromedia Dreamweaver Text Styles Images and Links Symbols and Lines Tables Forms Scripting in Dreamweaver.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Website Development with Dreamweaver
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
Dreamweaver CS4 Concepts and Techniques Chapter 9 Using Spry to Create Interactive Web Pages.
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
© 2012 The McGraw-Hill Companies, Inc. All rights reserved. word 2010 Chapter 3 Formatting Documents.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
A STUDENT’S GUIDE TO ADDING IMAGES TO NEW OR EXISTING BLOG POSTS Adding Images to Your Blog Post Presented by Michelle Krummel.
Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera.
HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.
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.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Creating and Editing a Web Page
Using CSS to Create Some Style Module 5: Beyond the Basics with Expression Web LESSON 5.
Web Site Development - Process of planning and creating a website.
Creating and Editing a Web Page Using Inline Styles
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
1 Word Processing Intermediate Using Microsoft Office 2000.
Key Applications Module Lesson 12 — Word Essentials Computer Literacy BASICS.
Project 1 Creating a Dreamweaver Web Page and Local Site.
With Microsoft FrontPage 2000
Intro to Dreamweaver Web Design Section 8-1
Learning the Basics – Lesson 1
Chapter A - Getting Started with Dreamweaver MX 2004
USING DREAMWEAVER Contents: Assigning a Root Folder
Dreamweaver – Project #1
Tutorial 1 – Creating a Document
DreamWeaver CS4.
© Paradigm Publishing, Inc.
Unit I: Collecting Data with Forms
Dreamweaver CS4 Skills PLAN – PLAN – PLAN first
Cheat Sheet CSCI 100 JW Ryder
Exercise 8 – Software skills
Key Applications Module Lesson 12 — Word Essentials
Benchmark Series Microsoft Word 2016 Level 2
Cheat Sheet CSCI 100 JW Ryder
Starting from Scratch: MLA Format
Using Cascading Style Sheets (CSS)
Using Templates and Library Items
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.
Creating and Editing a Web Page
Key Applications Module Lesson 12 — Word Essentials
Welcome To Microsoft Word 2016
Presentation transcript:

© 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 Create New > HTML. © Ms. Masihi

 If Dreamweaver is already open, click File > New.  In the New Document Dialog Box click Blank Page and then HTML for Page Type. © Ms. Masihi

 When you click Create, a new page opens in Dreamweaver’s Document Window. © Ms. Masihi

 Web pages are primarily a text-based medium, so Dreamweaver opens in a text entry mode by default.  To add text, click in the workspace and start typing. © Ms. Masihi

 Text entered in the workspace wraps automatically to the next line when space runs out on the current line.  Each time you press Enter (Return key), a blank line is inserted into the text. © Ms. Masihi

 Each document (page) should be given a Title which appears in the blue bar across the Browser window (and is also used when bookmarking a web page).  Click in the Title textbox at the top of the Document Window and type in the title. © Ms. Masihi

 Another way to enter a page title is to click Page Properties in the Properties Inspector. © Ms. Masihi

 In the Dialog Box, click Title/Encoding category and enter a title for the page. © Ms. Masihi

 The Page Title shows in the Title Box above the workspace.  Note that the file does not yet have a name (Untitled-1). © Ms. Masihi

 A Horizontal Rule can be used to delineate parts of a page - such as below a page title, above a footer or copyright notice on the bottom of a page. © Ms. Masihi

 To insert a Horizontal Rule, first position the cursor where you wish to insert the line.  Click Insert > HTML > Horizontal Rule.  The default setting for the Horizontal rule is the total width of the page in a gray color. © Ms. Masihi

 The width of the Horizontal Rule will adjust automatically as the Browser window is resized. © Ms. Masihi

 A web page defaults to Times Roman, 14 point font.  All text entered begins with the default settings unless changed by the page developer.  Text entered in long, continuing paragraphs tend to be overlooked (ignored) by casual readers. © Ms. Masihi

 Headings break up the page into more interesting blocks, encouraging readers to read each section.  Break up text with Headings larger than the normal text.  Compare Heading Sizes (H1, H2, H3, and Bolded Text).  Notice that H1, H2, etc is more than just bolding the text. © Ms. Masihi

 For your first assignment use 3 different heading sizes in your document. ( you choose where )  Label which heading you use next to the heading text as shown. © Ms. Masihi

 To format text as a heading, enter the text.  Drag the mouse over the text to select it.  In the Properties Inspector, HTML Tab, click the arrow beside Format.  Select the desired Format. © Ms. Masihi

 The selected text now displays using the Heading Format selected. © Ms. Masihi

 Click Split View and remain on this view and pay special attention to the codes  This shows you the page in Design View and the HTML Code in the Code View side by side.  Notice the title is now enclosed in tags. © Ms. Masihi **

 Dreamweaver has Special Symbols that can be easily inserted into your web page - copyright, trademark, and more.  To insert one of these symbols, first click on the page where you want to insert the symbol. © Ms. Masihi

 To insert a Copyright Symbol, click Insert > HTML > Special Characters > Copyright.  The copyright symbol is added to your page. © Ms. Masihi

 Highlight the Copyright Symbol in Design View..  In Split View notice that © was automatically inserted by Dreamweaver to display the copyright symbol. © Ms. Masihi

 Instead of using the menu items to insert the copyright symbol, you can also go into the HTML code and manually type in © © Ms. Masihi

 The final element you will insert onto the page is the date.  While you can type in the date, Dreamweaver also can insert the current date for you.  Click the Common Tab on the Insert Panel. © Ms. Masihi

 Click the Date Icon.  Dreamweaver will automatically insert the current date into your document.  This date will be today’s date (and will not be updated if you open the page on a different date). © Ms. Masihi

 Now that the page is finished, save the file, test it in a Browser, upload it to your Internet Provider and send the link to your instructor. © Ms. Masihi

 Save your work frequently as you develop each web page.  Click File > Save As to save a file the first time. © Ms. Masihi

 When you save a file, it must be given a name.  A filename must begin with a letter and may contain numbers and letters. A filename may NOT contain spaces or special symbols ( # $ * etc.)  It is best to use lowercase letters. © Ms. Masihi

 Basic Dreamweaver files are saved with an extension.  Most web page files are saved with.html extension. © Ms. Masihi

 Save your first page (containing just text) as MyFirstWebPage.html. © Ms. Masihi

 Before uploading a file to a Web Hosting Service, be sure to take a look at the page in at least one Browser.  First, save the file.  Click the Preview in Browser Icon (Globe) above the workspace. © Ms. Masihi

 Take a careful look at the page contents and the page title in the Title Bar.  After everything looks good, you are ready to upload the file to your ISP (server) so others can see the web page. © Ms. Masihi