Dream weaver ppt

Getting Started with
Dreamweaver

Chapter 1 Lessons
Introduction
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

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

cont.• 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

cont.
• 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 Views
• 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

Opening 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 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 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
Project
Lesson 3: Plan and Define a Website

Planning 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

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

Creating 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 Pages
 Browsers and browser versions
 Screen sizes
 Connection download time
 Testing is a continuous process

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

Publishing 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

Publishing the Site
• 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

Dream weaver ppt

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Dream weaver ppt

Similaire à Dream weaver ppt (20)

Dernier

Dernier (20)

Dream weaver ppt