1 / 38

Getting Started with DreamWeaver

Getting Started with DreamWeaver. Chapter 1. Objectives. Students will be able to: Explore the DreamWeaver workspace View a web page and use Help Plan and set up a website Add a folder and pages. Introduction.

elvina
Download Presentation

Getting Started with DreamWeaver

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Getting Started with DreamWeaver Chapter 1

  2. Objectives • Students will be able to: • Explore the DreamWeaver workspace • View a web page and use Help • Plan and set up a website • Add a folder and pages

  3. Introduction • Adobe DreamWeaver CS6 is a web development tool that lets you create dynamic web pages • Contains • Text • Images • Hyperlinks • Animation • Sounds • video • Interactive elements • Create individual web pages or complex websites

  4. Introduction • Website • A group of related web pages that are linked together and share a common interface and design • Web Browser • Program which displays web pages • Internet Explorer • Google Chrome • Apple Safari • Mozilla Firefox

  5. Using DreamWeaver Tools • Create dynamic and interactive web pages • Easy to enter and edit the code directly • See the visual results of the code instantly • Organization tools • Help you work with a team to create a website • Management tools • Help manage the site • Files panel • Create folders to organize and store the various files for your website • Add pages to your website

  6. Explore The DreamWeaver Workspace • Workspace • The screen that includes all the menus, panels, buttons, inspectors, and panes that you use to create and maintain websites. • Designed to give you easy access to all the tools you need to create web pages See page DreamWeaver 1-5 of the book

  7. Explore The DreamWeaver Workspace • Document Window • Large area in the DreamWeaver program where you create and edit web pages. • Menu Bar (Application Bar) • Located above the Document Window • Includes: • Menu names • Workspace switcher • Other application commands • Appears as one or two bars depending on screen size and resolution

  8. Explore The DreamWeaver Workspace • Insert Panel (Insert Bar) • Includes nine categories of buttons displayed through a drop-down menu • Common • Layout • Forms • Data • Spry • jQuery Mobile • InContext Editing • Text • Favorites • Displays the buttons and menus for inserting objects associated with that object

  9. Explore The DreamWeaver Workspace • Document Toolbar • Contains buttons and drop-down menus • Change current work mode • Check browser compatibility • Preview web pages • Debug web pages • Choose visual aids • View file-management options • Live View • Displays an open document as if you were viewing it in a browser, interactive elements active and functioning • Navigation buttons are added to the Document toolbar

  10. Explore The DreamWeaver Workspace • Standard Toolbar • Contains buttons you can use to execute frequently used commands that are also available on the File and Edit menus • Style Rendering Toolbar • Contains buttons that you can use to display data for different platforms, such as a cell phone or television • Related Files Toolbar • Located below an open document’s filename tab and displays the names of any related files • Related files • Files linked to a document and are necessary for the document to display and function correctly • Coding Toolbar • Contains buttons you can use when working directly in the code and is not visible unless you are in Code view

  11. Explore The DreamWeaver Workspace • Property Inspector (Properties Pane) • Located at the bottom of the DreamWeaver window • Lets you view and change the properties (characteristics) or a selected object. • Context sensitive • Changes according to what is selected in the Document window • Status Bar • Located below the Document window • Left side displays the tag selector • Shows the HTML tags used at the insertion point location • Right side displays the Select Tool • Used for page editing • Hand Tool (panning) • Zoom Tool (magnifying) • Set Magnification Menu (change percentage of magnification)

  12. Explore The DreamWeaver Workspace • Panel • Tabbed window that displays information on a particular topic or contains related commands • Panels Groups • Sets of related panels that are grouped together • Dock • Collection of panels or panel groups

  13. Working With DreamWeaver Views • View • Particular way of displaying page content • Three working views • Design View • Shows the page as it would appear in a browser • Primarily used for designing and creating a web page • Code View • Shows the underlying HTML code for the page • Used for reading or editing the underlying code • Show Code and Design Views (Split View) • Combination of Code View and Design View • Best for debugging (correcting) errors • Immediately see how code modifications change the appearance of the page • View buttons are located on Document toolbar

  14. Lesson 1 Practice • Complete exercise on pages Dreamweaver 1-7 thru 1-11 of book

  15. View a Web Page and Use Help • Opening a Web Page • After starting DreamWeaver you can create • New web page/website • Open an existing web page/website • Home Page • First page to appear when users go to a website • Sets the look and feel of the website and directs users to the rest of the pages in the site.

  16. View a Web Page and Use Help • Viewing Basic Web Page Elements • Text • Type directly onto a web page • Import from other programs • Use Property Inspector to format • Should be short and to the point to engage users and prevent them from losing interest

  17. View a Web Page and Use Help • Viewing Basic Web Page Elements • Hyperlinks (links) • Images or text elements on a web page that users click to display another location on the page, another web page on the same website, or a web page on a different website • Images • Add visual interest to a web page • Banners • Images that appear across the top or down the side of the screen that can incorporate a company’s logo, contact information, and links to the other pages in the site

  18. View a Web Page and Use Help • Viewing Basic Web Page Elements • Menu Bars (Navigation Bars) • Bars that contain multiple links that are usually organized in rows or columns • Image maps • An image that has been divided into sections, each which serves as a link • Navigational Structure • The way that menu bars and other internal links are used on your pages

  19. View a Web Page and Use Help • Viewing Basic Web Page Elements • Rich Media Content • Refers to the attractive and engaging images, interactive elements, video or animations • Most created using Adobe Flash, Fireworks, Photoshop, or Illustrator

  20. View a Web Page and Use Help • Getting Help • When questions or problems arise, use the commands on the Help menu to find the answers you need. • DreamWeaver Help page contains a list of topics and subtopics by category • Based on Adobe Air technology • Adobe product used for developing content that can be delivered with a browser or as a desktop application • Use the Search text box to enter a keyword to search for a specific topic

  21. Lesson 2 Practice • Complete exercise on pages DreamWeaver 1-14 thru 1-17

  22. Plan And Set Up A Website • Understanding the Website Development Process Develop A Plan Create The Basic Structure Create the Content Test Modify Publish

  23. Plan And Set Up A Website • Planning a Website • Create a checklist of questions and answers about the site • What are your goals for the site? • Who is the audience you want to target? • How can you design the site to appeal to the target audience? • What content is appropriate for the target audience? • What content is relevant to the purpose of the website? • From the checklist, create • Statement of purpose and scope • Timeline for all due dates • Budget • Task list with work assignments • List of resources needed

  24. Plan And Set Up A Website • Website Planning Checklist

  25. Plan And Set Up A Website • Planning the Basic Structure • Create a wireframe (storyboard) • An illustration that represents every page in a website • Shows the relationship of each page in the site to all other pages • Show how each page element is to be placed on each page

  26. Plan And Set Up A Website Wire Frame Example

  27. Plan And Set Up A Website • Planning the Basic Structure • Parent Page • Higher level in the web hierarchy and has pages linked to it • Child Pages • Pages linked below the parent page • Use wireframe as a guide to develop the site to make sure you follow the planned site structure

  28. Plan And Set Up A Website • Planning the Basic Structure • Create a folder hierarchy on your computer for all of the files that will be used in the site • Local Site Folder • Store all the pages or HTML files for the site • Root folder • Create subfolders called assets or images to store all of the files that are not pages, such as images and sound files

  29. Plan And Set Up A Website • Planning the Basic Structure • Set up • Use DreamWeaver Site Setup dialog box to assign your site a name and specify the local site folder • Site name then appears in the Files Panel • Files Panel • Panel used to manage your website’s files and folders • Ensures that the site links work correctly when the website is published • Used to add or delete pages

  30. Plan And Set Up A Website • Creating the Web Pages and Collecting the Page Content • Gather the files you’ll need to create the pages • Text • Images • Buttons • Video • Animations

  31. Plan And Set Up A Website • Testing The Pages • Test the site to make sure all the links work and that everything looks good • Use different browser software • Use different screen sizes • Modify The Pages • Each time you make a change you should test the site again • Modifying and testing pages in a website is an ongoing process

  32. Plan And Set Up A Website • Publishing The Site • Publishing • Refers to the process of transferring all the files for the site to a web server • Web Server • A computer that is connected to the Internet with an IP address, so that it is available for viewing on the Internet • Internet Service Providers (ISPs) • Provide space on their servers for customers to publish websites • File Transfer Protocol (FTP) • Process of uploading and downloading files to and from a remote site

  33. Lesson 3 Practice • Complete exercise on pages DreamWeaver 1-22 thru 1-25

  34. Add a Folder and Pages • Adding a folder to a website • 1st create a folder called assets (images) • Store all non-HTML files • Images • Sound files • Set as default location to store the website images • Saves a step when you import new images into the website

  35. Add a Folder and Pages • Creating the Home page • Home page • The first page that users see when they visit your site • Adding Pages to a Website • One method is to add as many blank pages as you think you will use in the beginning • Enables you to set up the navigation structure of the website at the beginning of the development process • View how each page is linked to others • Then add content to each page

  36. Lesson 4 Practice • Complete exercise on pages DreamWeaver 1-28 thru 1-33

  37. Skills Review • Complete Skills Review on pages DreamWeaver 1-34 thru 1-35

  38. Test • Study for test on Chapter 1

More Related