Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 2 Building Your First Web.

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

Adobe Dreamweaver CS5 - Illustrated
Learning the Basics – Lesson 1
Creating and Editing a Web Page Using Inline Styles
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Microsoft Office 2007 PowerPoint Web Feature Creating Web Pages Using PowerPoint.
Chapter 3 Tables and Page Layout
Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.
1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
HTML & Dreamweaver 101 Aman Yadav. Definitions HTTP – The Web uses a protocol called HTTP (Hyper Text Transport Protocol) to communicate between the Web.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Word Lesson 1 Understanding Word Fundamentals
FIRST COURSE Creating Web Pages with Microsoft Office 2007.
Getting Started with Dreamweaver
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 1 Taking A Tour Of Dreamweaver.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
Exploring Microsoft Office XP - Microsoft Word 2002 Chapter 61 Exploring Microsoft Word Chapter 6 Creating a Home Page and Web Site By Robert T. Grauer.
Exploring Word Grauer and Barber 1 Committed to Shaping the Next Generation of IT Experts. Chapter 6: Introduction to HTML: Creating a Home Page.
Creating a Website. Unit Objectives Plan a website Create a folder for website management Set up a website Add a folder to a website Save a web page Copy.
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.
Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.
INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Web Technologies Website Development Trade & Industrial Education
Introducing Dreamweaver MX 2004
Tutorial 1 Getting Started with Adobe Dreamweaver CS3
Tutorial 1: Getting Started with Adobe Dreamweaver CS4.
Dreamweaver MX Unit A CIS 205—Web Site Design & Development.
Defining a Website. Review…. Page Title −The text that will be displayed in the title bar of the browser window on a web page File Name −What you “call”
Website Development with Dreamweaver
CIS 205—Web Design & Development Dreamweaver Chapter 1.
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.
Macromedia Dreamweaver 8 Revealed DREAMWEAVER GETTING STARTED WITH.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
Dreamweaver MX. 2 Overview of Templates n Templates represent a web page design or _______ that will be common to multiple pages. n There are two situations.
FILES AND ASSETS PANELS
Chapter 1 Creating a Dreamweaver Web Page and Local Site
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 4 Linking the Site.
Creating an External Style Sheet Module 5: Beyond the Basics with Expression Web LESSON 8.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 7 Frames.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit B Creating a Web Site.
Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.
Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 6 Backgrounds and Colors.
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.
Editing Basics Lesson 8. Skills Matrix SKILL #MATRIX SKILL 2.2.1Cut, copy, and paste text 2.2.2Find and replace text 4.1.1Insert building blocks in documents.
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.
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.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Creating and Editing a Web Page
Web Site Development - Process of planning and creating a website.
Chapter 8 HTML Editors. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2 Text Editors Text editors don't have word processing features.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
XP Creating Web Pages with Microsoft Office
Chapter 11 Enhancing an Online Form and Using Macros Microsoft Word 2013.
Getting Started with Dreamweaver
Chapter A - Getting Started with Dreamweaver MX 2004
Learning the Basics – Lesson 1
Chapter A - Getting Started with Dreamweaver MX 2004
بسم الله الرحمن الرحيم.
Chapter 2 Adding Web Pages, Links, and Images
Starting to develop a website
Getting Started with Dreamweaver
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 2 Building Your First Web Site

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Commercial Web site Plan – outlines, storyboards Define a site and create its folders Build basic Web pages Design and code views Simple text formatting Existing page as a template Create links

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Visual Summary Advanced Tab Basic Tab

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 New Document Dialog Box Category Page type

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Adding Content Document window – split view Property inspector

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Browser Check Preview  Design  Source code

Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Exploring The Folder Structure Of A Web Site Organization Root folder Home page Windows and Mac FFolders Unix/Linux DDirectories

8 Browser Information

Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Folder Structure In Address Window

Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Planning And Organizing A Web Site Organizing the content Outlining the site Creating a couple of pages Adding some graphics and links Practice on scratch paper

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Create A Storyboard Story content Landscape view Outline Navigation system

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Navigation System Exercise Carvers Store Index card exercise HHome page SStore’s categories OOutline of the products CContact form

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Defining The Site And Its Folders Create site root folder Create a site definition Create nested folders

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Site Definition Setup Local folders Manage sites selection

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Select site operation Site Definition Setup (continued)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Site Definition Setup (continued) Server technology Edit and upload choices

Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Site Definition Setup (continued) Navigate to root folder

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Nested Folders  Root folder  Subfolder 1  Subfolder 2  Sub subfolder a  Sub subfolder b  Subfolder 3

Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Creating Nested Folders

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Building Your First Web Page Start by creating and saving a new page

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Create And Save A New Page Type home page of Carver’s Store Choose File>Close Click Yes to save the changes

Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Save As Window Type home.html in the File Name field and click Save

Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Add Text And Graphics Text Graphics

Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Working With Views Code window

Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Views Design window

Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Seeing Changes Windows system  Use Property inspector Mac  Automatic refresh

Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 View Source Code To see source code…

Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Source Code Code in Code view Code in Notepad

Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Apply Simple Text Formatting Headings HH1 through H6 Lists NNumbered BBulleted AAlphabetized Paragraphs HHorizontal lines

Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Methods Property inspector Tag editor

Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Using A Web Page As A Template Maintains look and feel throughout site Reduces repetitive tasks Uses “save as” command from completed page Changes file name

Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Changed Text

Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Creating Links External, to another site  Different domain, pathname includes protocol Internal to site  Same domain, one page to another

Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Link In the Link field of the Property inspector, type ‑ online.com and press Enter/Return.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Summary Plan – outlines, storyboards Define a site and create its folders Build basic Web pages Design and code views Simple text formatting Existing page as a template Create links

Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 End-of-Project Exercises Screen ID Multiple Choice Discussion Questions Skill DDefine a Site with the Advanced Tab CCreate a New Page Using the File>New Menu AAdd Another Web Page to Tropiflora Online UUse Copy/Paste to Create New Pages IImport Content from a Microsoft Word Document

Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 End-of-Project Exercises Challenge DDesign Your Family’s Web Site PPrint a Web Page and Its Source Code LLearn Techniques from the Code of Another Web Page Portfolio Builder RRecognize How Sites are Structured

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