Chapter 1 Getting Started with Dreamweaver Modifications by

Chapter 1 Lessons 1. 2. 3. 4. Explore the Dreamweaver workspace View a web

Getting Started with Dreamweaver • What is Adobe Dreamweaver CS 5? – A web development tool that lets you create websites • What is a website? – A group of related web pages that are linked together and (usually also share a common interface and design) © 2011 Delmar Cengage Learning

Getting Started with Dreamweaver • What does Dreamweaver offer? – Design tools that can create pages without writing HTML, and can create dynamic and interactive web pages without writing programming code – Site management tools © 2011 Delmar Cengage Learning

Getting Started with Dreamweaver Tools You’ll Use © 2011 Delmar Cengage Learning

Explore the Dreamweaver Workspace • The Dreamweaver workspace includes: – Menus – Panels –

Explore the Dreamweaver Workspace Application bar (Win) shown as one bar Workspace switcher Document toolbar Insert panel Browser Navigation toolbar Drag the panel border up or down to resize Insert pane; Menu names Document window Files panel Status bar Property inspector Tag selector Select tool Hand tool Zoom tool Dreamweaver CS 5 workspace © 2011 Delmar Cengage Learning

Explore the Dreamweaver Workspace • The Insert panel (Insert bar) includes eight categories: –

Explore the Dreamweaver Workspace • 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. © 2011 Delmar Cengage Learning

Explore the Dreamweaver Workspace • 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. © 2011 Delmar Cengage Learning

Explore the Dreamweaver Workspace • 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. © 2011 Delmar Cengage Learning

Explore the Dreamweaver Workspace Active panel tab Panel groups are sets of related panels that are grouped together. Your drive may differ Double-click to collapse or expand panel group Collapse to Icons button Panels in panel group © 2011 Delmar Cengage Learning

Explore the Dreamweaver Workspace • 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 CS 5, Business Catalyst, Files, and Assets panel appear by default. © 2011 Delmar Cengage Learning

Explore the Dreamweaver Workspace • The Property inspector (Properties pane) lets you view and change the properties of a selected object; it is context-sensitive, and thus changes according to what is selected in the document window • 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 © 2011 Delmar Cengage Learning

View a Web Page and Use Help • The home page is the first page that appears when you go to a website (except if there is a splash page). • Web pages can be primarily text or media-rich with images, sound, and movies. © 2011 Delmar Cengage Learning

View a Web Page and Use Help Search Feature Banner Image Links to main

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 webpage or location within the current page – Images can add visual interest to a web page – Banners are elements that usually span all or much of the width of the page; they can consist of logos, contact information, or links to other sites © 2011 Delmar Cengage Learning

View a Web Page and Use Help • 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 © 2011 Delmar Cengage Learning

View a Web Page and Use Help • 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 © 2011 Delmar Cengage Learning

View a Web Page and Use Help Banner Text Links to the main pages

Plan and Set Up a Website Phases of a website development project © 2011

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

Plan and Set Up a Website • 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? © 2011 Delmar Cengage Learning

Plan and Set Up a Website • 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 © 2011 Delmar Cengage Learning

Plan and Set Up a Website • Wireframes (continued): – They help the client see how the pages will look and work together – Range from very simple to interactive and multidimensional © 2011 Delmar Cengage Learning

Plan and Set Up a Website The parent page The child pages The Striped

Plan and Set Up a Website • 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) will often contain a folder for assets or images. © 2011 Delmar Cengage Learning

Plan and Set Up a Website • 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 and files will appear in the Files panel. © 2011 Delmar Cengage Learning

Plan and Set Up a Website Site category Site name Local Site Folder text

Plan and Set Up a Website • 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 file size of each web page (including images); if it takes too long to load, visitors may leave your site. © 2011 Delmar Cengage Learning

Plan and Set Up a Website • 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 © 2011 Delmar Cengage Learning

Plan and Set Up a Website • 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 © 2011 Delmar Cengage Learning

Add a Folder and Pages • You can use asset folders to store all non-HTML files, such as images or sound files. • When defining a site in Dreamweaver, you should set this as the default location to store the website images. © 2011 Delmar Cengage Learning

Add a Folder and Pages Local site folder for The Striped Umbrella website New

Add a Folder and Pages • The home page of a website is the first page that a viewer sees when they visit your site (unless there is a splash page). • Websites can be as simple as one page or contain hundreds of pages. © 2011 Delmar Cengage Learning

Add a Folder and Pages • 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 © 2011 Delmar Cengage Learning