We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byJazmyne Shroll
Modified about 1 year ago
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver
© 2010 Delmar Cengage Learning Chapter 1 Lessons 1.Explore the Dreamweaver workspace 2.View a web page and use Help 3.Plan and define a website 4.Add a folder and pages
© 2010 Delmar Cengage Learning Getting Started with Dreamweaver What is Dreamweaver? –Web design software for creating a web page or a complex website What is a website? –A group of related web pages that are linked together and share a common interface and design
© 2010 Delmar Cengage Learning Using Dreamweaver Tools What does Dreamweaver CS4 offer? –Design tools that can create dynamic and interactive web page without writing HTML code –Organizational tools –Site management tools –Graphic site maps
© 2010 Delmar Cengage Learning Fig 1: Dreamweaver CS4 Workspace Property inspector Tag selector Document window Document border Related files toolbar Application bar (Win) or Menu bar (Mac) Workspace switcher Insert panel Files panel Zoom toolHand tool Select tool Drag the panel border up or down to resize insert panel
© 2010 Delmar Cengage Learning Working with Dreamweaver Views Design view Code view Code and Design view
© 2010 Delmar Cengage Learning Starting Dreamweaver: Windows Click the Start button on the taskbar Point to All Programs, click Adobe Web Premium CS4, then click Adobe Dreamweaver CS4
© 2010 Delmar Cengage Learning Figure 3: Starting Dreamweaver CS4 Click Adobe Dreamweaver CS4
© 2010 Delmar Cengage Learning Starting Dreamweaver: (Macintosh) Click Finder in the Dock, then click Applications Click the Adobe Dreamweaver CS4 folder, then double-click the Dreamweaver CS4 application
© 2010 Delmar Cengage Learning Changing Views Click the Show Code View button Click the Show Code and Design Views button Click the Show Design View button
© 2010 Delmar Cengage Learning Figure 5: Code View for New Document Coding toolbar Show Code view button Show Code and Design view button Show Design view button Switch Design View to Live View button Some options may differ depending on what was last selected Click to collapse all panels to icons
© 2010 Delmar Cengage Learning Opening a Web Page Create new or open existing –Website –Web page Homepage –First web page that appears when viewers go to a website –Sets the look and feel of the website and directs viewers to the rest of the pages in the website
© 2010 Delmar Cengage Learning Basic Web Page Elements Text Hyperlinks (links) Graphics –Banners Navigation bars –Image map Flash button objects
© 2010 Delmar Cengage Learning Fig. 8: Common Web Page Elements Banner with logo Image Contact information Search feature Link to main pages in the website Links to support pages National Endowment for the Arts website –
© 2010 Delmar Cengage Learning Using Dreamweaver Help Clicking the Dreamweaver Help command opens the Dreamweaver Help page that contains a list of topics and subtopics by category
© 2010 Delmar Cengage Learning Fig. 10: Dreamweaver Help and Support Web Page Dreamweaver help (web) link
© 2010 Delmar Cengage Learning Fig. 11: Displaying Help Content Selected subtopic content opens on right side of Help window Click plus sign to expand menu of Help topics
© 2010 Delmar Cengage Learning Fig. 13: Phases of a Website Development Project
© 2010 Delmar Cengage Learning Planning a Website Audience needs Site goals Gathering content Budget Schedule Team Updates
© 2010 Delmar Cengage Learning Setting Up the Basic Structure Storyboard is a small sketch that represents each page Allow you to visualize how each page is linked to one another –Parent pages: home page –Child pages: pages linked below it Contains root folders and assets
© 2010 Delmar Cengage Learning Fig. 14: Striped Umbrella Website Storyboard
© 2010 Delmar Cengage Learning Creating the Web Pages and Collecting the Page Content Gather the files that will be used Some will come from other software Some will be done in Dreamweaver
© 2010 Delmar Cengage Learning Testing the Pages Browsers and browser versions Screen sizes Connection download time Testing is a continuous process
© 2010 Delmar Cengage Learning Modifying the Pages Changes are constantly needed Test page after each change Modifying and testing is an ongoing process
© 2010 Delmar Cengage Learning Publishing the Site Transfer all the files to a web server –Web server: a computer that is connected to the Internet with an IP address A website must be published to the web server before it can be viewed by others
© 2010 Delmar Cengage Learning Publishing the Site IP: Internet Protocol –IP address –Example: ISP: Internet Service Provider –Hosts website FTP: File Transfer Protocol –Host, host directory, login, password
© 2010 Delmar Cengage Learning Publishing the Site Create a root folder Define the website Set up web server access
© 2010 Delmar Cengage Learning Fig. 16: Creating a Root Folder Using the Files Panel If you just see a drive or folder name here you do not currently have a website open Striped_umbrella root folder Your drive or folder may differ
© 2010 Delmar Cengage Learning Fig. 18: Site Definition Striped Umbrella Dialog Box Advanced tab Website name Browse for file icon Local root folder text box – your drive may differ Links relative to: option Enable cache check box
© 2010 Delmar Cengage Learning Fig. 19: Setting the Remote Access Remote Info category Access pop-up menu
© 2010 Delmar Cengage Learning Adding a Folder to a Website After defining a website, you need to create folders to organize the files that will make up the site You can use the assets folder to store all non-HTML files, such as images or sound files
© 2010 Delmar Cengage Learning The Assets Folder Stores all non-HTML (media) files: –Image files –Sound files –Video files Set it as the default location to store the website images You might want to create subfolders for each type of file
© 2010 Delmar Cengage Learning Creating the Home Page Starting point for a site map Tells Dreamweaver which page you have designated to be your home page Usually index.html (.htm), or default.html (.htm)
© 2010 Delmar Cengage Learning Adding Pages to a Website Once you add and name pages to your website, you can add content to each page (text and graphics) You have a choice of several default document types you can generate when you create new HTML pages XHTML 1.0 Transitional is the default document type when you install Dreamweaver The default document type is designated in the Preferences dialog box
© 2010 Delmar Cengage Learning Fig. 22: Site Definition with Assets Folder Set as Default Images Folder Default images folder text box Browse for file icon
© 2010 Delmar Cengage Learning Fig. 23: Index.html Placed in Striped_Umbrella Root Folder Windows users see the path; Mac users see only the file name and document type Index.html Root folder Broken link icon Link to banner is broken because the banner is not yet inside the website
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Macromedia Dreamweaver MX 2004 – Design Professional Dreamweaver GETTING STARTED WITH.
Learning the Basics – Lesson 11 Learning the Basics Lesson 1.
Managing Your Site – Lesson 61 Managing Your Site Lesson 6.
Adobe Dreamweaver CS5 - Illustrated Unit B: Creating a Web Site.
1 Microsoft Office 2010 Basics and the Internet Microsoft Office 2010 Introductory Pasewark & Pasewark.
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.
® Microsoft Office 2010 Browser and Basics.
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
Introducing Windows 7. Start Windows and view the desktop Use pointing devices Use the Start button Use the taskbar Work with windows Microsoft Windows.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Dreamweaver MX 2004 “Viewing the Workspace” Mrs. Wilson.
Microsoft Office 2007-Illustrated Introductory, Windows Vista Edition Windows XP Unit B.
Creating an Electronic Portfolio Saundra Selness, MS Information Technology Services.
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
Chapter 4 Adding Images. Inserting and Aligning Images Graphics refer to the appearance of most non- text items on a web page, such as: – Photographs.
1. XP 2 * The Web is a collection of files that reside on computers, called Web servers. * Web servers are connected to each other through the Internet.
Create a Web Site with Publisher 2000 for Marilyn Seguins Class.
Previous Interactive tutorial for updating staff profiles in Percussion Rhythmyx Pippa Goldenberg|Version 2.0 | 29th Jan 2013 Click to continue Next.
Key Applications Module Lesson 11 Using Microsoft Office 2003 Computer Literacy BASICS.
Dreamweaver CS4 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site.
COMPREHENSIVE Getting Started with Microsoft Office 2007.
PowerPoint 2007 © : The Power of Presentations How can Microsoft PowerPoint 2007 help you share information?
1 FrontPage 2000 Online Tutorial The following tutorial aims to help you get started with FrontPage 2000 for the creation of basic web pages. The different.
Interaction Design: Visio. About MS Visio MS Visio is a tool that allows you map user workflows, website sitemaps, website pages, software screens, forms,
How To Make Your Own Web Page: Basic Web Design. Step One: Creating a Home Page Through this PowerPoint, you will learn how to create a webpage using.
Microsoft Office 2007-Illustrated Introductory, Windows Vista Edition Windows XP Unit A.
Windows 2008 Active Directory Configuration – Week 4 of 6 Microsoft Test: Mark McCoy MCSE, CNE, CISSP.
Internet Basics Instructors : Connie Hutchison & Christopher McCoy.
Section Goals Understand Tables Know how to create, edit, and use Tables Investigate ‘nesting’ Tables Be able to format Tables.
© 2016 SlidePlayer.com Inc. All rights reserved.