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 byMakenzie Babb
Modified over 2 years ago
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver
© 2011 Delmar Cengage Learning 1.Explore the Dreamweaver workspace 2.View a web page and use Help 3.Plan and set up a website 4.Add a folder and pages Chapter 1 Lessons
© 2011 Delmar Cengage Learning What is Adobe Dreamweaver CS5? –A web development tool that lets you create dynamic websites What is a website? –A group of related web pages that are linked together and share a common interface and design Getting Started with Dreamweaver
© 2011 Delmar Cengage Learning What does Dreamweaver CS5 offer? –Design tools that can create dynamic and interactive web pages without writing HTML code –Organizational tools –Site management tools Getting Started with Dreamweaver
© 2011 Delmar Cengage Learning Getting Started with Dreamweaver Tools Youll Use
© 2011 Delmar Cengage Learning The Dreamweaver workspace includes: –Menus –Panels –Buttons –Inspectors –Panes Explore the Dreamweaver Workspace
© 2011 Delmar Cengage Learning Explore the Dreamweaver Workspace Dreamweaver CS5 workspace Select tool Document toolbar Browser Navigation toolbar Menu names Document window Status bar Property inspector Tag selector Application bar (Win) shown as one bar Hand toolZoom tool Workspace switcher Insert panel Drag the panel border up or down to resize Insert pane; Files panel
© 2011 Delmar Cengage Learning The Insert panel (Insert bar) includes eight categories: –Common –Layout –Forms –Data –Spry –InContext Editing –Text –Favorites Explore the Dreamweaver Workspace
© 2011 Delmar Cengage Learning The Browser Navigation toolbar contains navigation buttons you use when you are on your Live view. Live view displays an open document as if you were viewing it in your browser. Explore the Dreamweaver Workspace
© 2011 Delmar Cengage Learning The Standard tool contains buttons you can use to execute frequently used commands. The Style Rendering toolbar contains buttons you can use to display data for different platforms. Explore the Dreamweaver Workspace
© 2011 Delmar Cengage Learning The Related toolbar displays the names of any related files. Related files are files that are linked to a document and are necessary for the document to display and function correctly. The Coding toolbar contains buttons you use when working directly in the code. Explore the Dreamweaver Workspace
© 2011 Delmar Cengage Learning Panel groups are sets of related panels that are grouped together. Explore the Dreamweaver Workspace Panels in panel group Collapse to Icons button Double-click to collapse or expand panel group Active panel tab Your drive may differ
© 2011 Delmar Cengage Learning A panel is a tabbed window that displays information on a particular topic or contains related commands. A dock is a collection of panels or panel groups. In Dreamweaver CS5, Business Catalyst, Files, and Assets panel appear by default. Explore the Dreamweaver Workspace
© 2011 Delmar Cengage Learning The Property inspector (Properties pane) lets you view and change the properties of a selected object. The status bar: –The left side displays the tag selector, which shows HTML tags –The right side displays the Select tool, used for page editing Explore the Dreamweaver Workspace
© 2011 Delmar Cengage Learning The home page is the first page that appears when you go to a website. Web pages can be primarily text or media-rich with images, sound, and movies. View a Web Page and Use Help
© 2011 Delmar Cengage Learning View a Web Page and Use Help Common web page elements Banner Image Search Feature Image Links to main pages in the website Contact information
© 2011 Delmar Cengage Learning View a Web Page and Use Help Basic Web Page Elements: –Hyperlinks (links) are images or text elements on a web page that users click to display another location on the page –Images can add visual interest to a web page –Banners are images that display logos, contact information, or links to other sites
© 2011 Delmar Cengage Learning Basic Web Page Elements (continued): –Menu bars (navigation bars) are bars that contain multiple links that are usually organized in rows or columns –An image map is an image that has been divided into sections, each of which serves as a link View a Web Page and Use Help
© 2011 Delmar Cengage Learning Basic Web Page Elements (continued): –The navigation structure of the site refers to the way the menu bars and other internal links are used on web pages –Rich media content is a comprehensive term that refers to attractive and engaging images, interactive elements, video, or animations View a Web Page and Use Help
© 2011 Delmar Cengage Learning View a Web Page and Use Help Viewing web page elements Banner Links to the main pages in the website Text Image
© 2011 Delmar Cengage Learning Plan and Set Up a Website Phases of a website development project
© 2011 Delmar Cengage Learning Plan and Set Up a Website A checklist of questions for a website: –Who is the target audience? –How can I tailor the site to reach that audience? –What are the goals for the website? –How will I gather the information? –What is my budget?
© 2011 Delmar Cengage Learning A checklist of questions (continued): –What is the timeline? –Who is on my project team? –How often should the site be updated? –Who will update the site? Plan and Set Up a Website
© 2011 Delmar Cengage Learning Wireframes –Also referred to as a storyboard, is an illustration that represents every page in a website –Shows the relationship of each page in the site to all other pages –Allows you to visualize how each page in the site links to others Plan and Set Up a Website
© 2011 Delmar Cengage Learning Wireframes (continued): –They help the client see how the pages will look and work together –Range from very simple to interactive and multidimensional Plan and Set Up a Website
© 2011 Delmar Cengage Learning Plan and Set Up a Website The Striped Umbrella website wireframe The parent page The child pages
© 2011 Delmar Cengage Learning Once you create a wireframe for your site, you should create a folder hierarchy on your computer for all the files you use in the site. The local site folder (root folder) should contain assets or images. Plan and Set Up a Website
© 2011 Delmar Cengage Learning You can set up a website using the Dreamweaver Site Setup dialog box and assign a name and specify the local site folder. After the site is setup, the folders will appear in the Files panel. Plan and Set Up a Website
© 2011 Delmar Cengage Learning Plan and Set Up a Website Site category Site name Local Site Folder text box-your drive may differ Browse for folder icon
© 2011 Delmar Cengage Learning When you create a web page, images, colors, tables, and horizontal rules all contribute to making a page attractive and interesting. You should consider the size of each web page; if it takes too long to load, visitors may leave your site. Plan and Set Up a Website
© 2011 Delmar Cengage Learning Test the site to make sure all the links work and that everything looks good. Test your web page on several different browsers. –Internet Explorer –Mozilla Firefox –Google chrome –Safari Plan and Set Up a Website
© 2011 Delmar Cengage Learning A web server is a computer that is connected to the Internet with an IP (Internet Protocol) address. Publishing a website: –Internet service Providers (ISPs) provide space on their servers for customers to publish websites –The Files panel can be used to transfer files using the Dreamweaver FTP (File Transfer Protocol) capability Plan and Set Up a Website
© 2011 Delmar Cengage Learning You can use asset folders to store all non-HTML files, such as images or sound files. You should set this as the default location to store the website images. Add a Folder and Pages
© 2011 Delmar Cengage Learning Add a Folder and Pages The Striped Umbrella site in Files panel with assets folder created Local site folder for The Striped Umbrella website New assets folder
© 2011 Delmar Cengage Learning The home page of a website is the first page that a viewer sees when they visit your site. Websites can be as simple as one page or contain hundreds of pages. Add a Folder and Pages
© 2011 Delmar Cengage Learning Adding web pages to a website: –You can add several blank pages when the site is first created and then add content as you go –You can add and link pages as you create them Add a Folder and Pages
© 2011 Delmar Cengage Learning Add a Folder and Pages New pages added to The Striped Umbrella website New pages added in the striped_umbrella local site folder su_banner.gif in the assets folder
Macromedia Dreamweaver MX 2004 – Design Professional Dreamweaver GETTING STARTED WITH.
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.
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.
PowerPoint 2007 © : The Power of Presentations How can Microsoft PowerPoint 2007 help you share information?
® Microsoft Office 2010 Browser and Basics.
Dreamweaver MX 2004 “Viewing the Workspace” Mrs. Wilson.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Slide STARTING OUT WITH Visual Basic 2008 FOURTH EDITION Tony Gaddis.
Business Objects Web Intelligence Business Objects Web Intelligence.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Chapter 10, Slide 1Starting Out with Visual Basic 3 rd Edition Chapter 11 Developing Web Applications.
Section Goals Understand Tables Know how to create, edit, and use Tables Investigate ‘nesting’ Tables Be able to format Tables.
New Mexico Broadband Program Introduction to the Internet Module 1 Understanding the Internet Key Features of Websites Navigating within a website.
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.
Interaction Design: Visio. About MS Visio MS Visio is a tool that allows you map user workflows, website sitemaps, website pages, software screens, forms,
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
B.Applications Software 7.00 Utilize multimedia/presentation graphics software. Unit Objectives
Creating an Electronic Portfolio Saundra Selness, MS Information Technology Services.
Lori Neff Senior Consultant, Inetium 6/14/2008. Topics Considerations for Architecture Navigation Reusable Content Master pages Styling Login Pages Page.
HTML Basics Customizing your site using the basics of HTML.
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
Managing References : Mendeley. Table of Contents Why use a reference management software and what is reference management software? Mendeley features.
Introducing Windows 7. Start Windows and view the desktop Use pointing devices Use the Start button Use the taskbar Work with windows Microsoft Windows.
Microsoft Office 2007-Illustrated Introductory, Windows Vista Edition Windows XP Unit B.
Key Applications Module Lesson 11 Using Microsoft Office 2003 Computer Literacy BASICS.
Step-by-Step: Add a Graphical Hyperlink USE the Special Events Final presentation that is still open from the previous exercise. 1.Go to slide 4, and click.
Previous Interactive tutorial for updating staff profiles in Percussion Rhythmyx Pippa Goldenberg|Version 2.0 | 29th Jan 2013 Click to continue Next.
Microsoft Office 2007-Illustrated Introductory, Windows Vista Edition Windows XP Unit A.
Managing References Using the free reference management tool Zotero.
© 2016 SlidePlayer.com Inc. All rights reserved.