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 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

Introduction Website Web Browser 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

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

Explore The DreamWeaver 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

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

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

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

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

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)

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

Working With DreamWeaver Views 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

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

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.

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

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

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

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

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

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

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

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

Plan And Set Up A Website Website Planning Checklist Question Examples 1. Who is the target audience? Seniors, teens, children 2. How can I tailor the site to reach that audience? Specify an appropriate reading level, decide the optimal amount of media content, use formal or casual language 3. What are the goals for the site? Sell a product, provide information 4. How will I gather the information? Recruit other employees, write it myself, use content from in-house documents 5. What are my sources for media content? Internal product department, outside production company, my own photographs 6. What is my budget? Very limited, well financed 7. What is the timeline? Two weeks, one month, six months 8. Who is on my project team? Just me, a complete staff of designers 9. How often should the site be updated? Every 10 mins, once a month 10. Who will update the site? Me, other team members

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

Plan And Set Up A Website Wire Frame Example Home About Us Cafe Spa Activities Cruises Fishing

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

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

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

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

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

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

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

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

Add a Folder and Pages Creating the 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

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

Skills Review Complete Skills Review on pages DreamWeaver 1-34 thru 1-35

Test Study for test on Chapter 1