Chapter 1 Getting Started with Dreamweaver. Chapter 1 Lessons Introduction 1.Explore the Dreamweaver workspace 2.View a web page and use Help 3.Plan and

Chapter 1Chapter 1Getting Started with Getting Started with

DreamweaverDreamweaver

Chapter 1 LessonsChapter 1 Lessons

Introduction1. Explore the Dreamweaver workspace2. View a web page and use Help3. Plan and set up a website4. Add a folder and pages

Getting Started with DreamweaverGetting 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

Introduction

Using Dreamweaver ToolsUsing Dreamweaver Tools

• What does Dreamweaver CS6 offer?– Design tools that can create dynamic and interactive web

page without writing HTML code– Organizational tools– Site management tools– Graphic site maps

Introduction

Dreamweaver CS6 WorkspaceDreamweaver CS6 WorkspaceLesson 1: Explore the Dreamweaver Workspace

Menu bar (Win)

Related files toolbar

Document toolbar

Document window

Tag selector

Property inspector

Workspace switcher Insert panel

Drag the panel border up or down to resize insert panel

Select tool Hand tool Zoom tool

Files panel

Dreamweaver CS6 Workspace – cont.Dreamweaver CS6 Workspace – cont.

• Document Window– Area where you create and

edit web pages

• Menu (or Application) Bar– Above Document Window,

includes menu names, a Workspace switcher, and other application commands

• Panel– A window that displays

information on a particular topic or contains related commands

• Insert Panel– Categories of buttons that

contain popular Dreamweaver Commands (Common, Layout, Forms, Data, Spry, etc.)

Lesson 1: Explore the Dreamweaver Workspace


• Document Toolbar– Contains buttons and drop-down menus you can use to change

the current work mode, preview web pages, view file-management option

• Related Files Toolbar– Files that are linked to a document and are necessary for the

document to display correctly (ex. External CSS style sheet)• Property Inspector

– Located at the bottom of the Dreamweaver window, lets you view and change the properties of the selected object.

– Context sensitive – will change based on you selection



• Live View– Displays an open

document as if you were viewing it in a browser

• Standard Toolbar– Contains buttons you can

use to execute frequently used commands (also available in File and Edit Menus)

• Style Rendering Toolbar– Contains buttons that you

can use to display data for different platforms (ie telephones and televisions)

• Tag Selector– Shows the HTML tag used

at the Insertion Point location


Working with Dreamweaver Working with Dreamweaver ViewsViews

• Design view– Shows a page as it would appear in a browser– Primarily used for designing and creating a web page

• Code view– Shows HTML code for the page

• Code and Design view (Split View)– Combination of Code and Design Views– Best view for correcting errors because you can see how

code changes affect the appearance of pages


Code View for New DocumentCode View for New Document

Show Code view button

Show Code and Design view button Show Design view

button

Switch Design View to Live View button

Coding toolbar

Some options may differ depending on what was last selected

Click to collapse all panels to icons


Opening a Web PageOpening 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

Lesson 2: View a Web Page and Use Help

Basic Web Page ElementsBasic Web Page Elements• Text• Hyperlinks (links)• Graphics (LESS IS MORE)– Banners – Images that display at the top of the screen

• Navigation bars– Bars that contain multiple links that are usually organized in

rows or columns– Image map – Image that has been divided into sections, each

of which containing a link• Rich media content– Engaging images, interactive elements, video, or animations


Using Dreamweaver HelpUsing Dreamweaver Help

• Clicking the Dreamweaver Help command opens the Dreamweaver Help page that contains a list of topics and subtopics by category


Phases of a Website Development ProjectPhases of a Website Development ProjectLesson 3: Plan and Define a Website

Planning a WebsitePlanning a Website• Planning a website is a complex process that requires

careful planning including:– Developing a plan– Creating the basic structure– Creating the content– Testing– Modifying (if necessary)– Publishing

Lesson 3: Plan and Define a Website

Setting Up the Basic StructureSetting Up the Basic Structure• Storyboard (or wireboard) 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– Root folder: stores all the pages or HTML files for the site– Assets: subfolder used to store all of the files that are not

pages


Striped Umbrella Website StoryboardStriped Umbrella Website StoryboardLesson 3: Plan and Define a Website

Creating and Collecting the Page ContentCreating and Collecting the Page Content

• Gather the files that will be used• Some will come from other software• Some will be done in Dreamweaver


Testing the PagesTesting the Pages

• Browsers and browser versions• Screen sizes• Connection download time• Testing is a continuous process


Modifying the PagesModifying the Pages

• Changes are constantly needed• Test page after each change• Modifying and testing is an ongoing process


Publishing the SitePublishing the Site

• Transfer all the files to a web server– Web server: a computer that is connected to the Internet

with an IP address (ie Go Daddy, Fat Cow, blue host)• A website must be published to the web server before it

can be viewed by others



• IP: Internet Protocol– IP address– Example: 207.456.123.2

• ISP: Internet Service Provider– Hosts website

• FTP: File Transfer Protocol– Host, host directory, login, password



• Create a root folder• Define the website• Set up web server access


Creating a Root Folder Using the Files PanelCreating a Root Folder Using the Files Panel

Your drive or folder may differ

Striped_umbrella root folder

If you just see a drive or folder name here you do not currently have a website open

Lesson 4: Add a Folder and Pages

Site Definition Striped_Umbrella Dialog BoxSite Definition Striped_Umbrella Dialog BoxAdvanced tab

Website name

Browse for file icon

Local root folder text box – your drive may

differ


Adding a Folder to a WebsiteAdding 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


The Assets FolderThe 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


Creating the Home PageCreating 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)


Adding Pages to a WebsiteAdding 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


Documents

Chapter 1 Getting Started with Dreamweaver. Chapter 1 Lessons Introduction 1.Explore the Dreamweaver workspace 2.View a web page and use Help 3.Plan and