Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 1: Introdution

Chapter 1: Introduction


Contents
 What’s New in Dreamweaver CS4?
 The Dreamweaver CS4 Interface
 Setting Up a Site
 Creating a Web Page
 Adding Text to Your Web Pages
 Format text


What’s New in Dreamweaver CS4?
 The Property inspector: has been split in two to

better separate HTML options from CSS. You can
also create and edit styles as you specify settings.

 Coding Improvements: Dr.CS4 offers many new

features to make working in Code view better.
JavaScript Programming benefits


What’s New in Dreamweaver CS4?


What’s New in Dreamweaver CS4?
 More Spry goodies: These new features made it

easy to add pop-up navigational menus, validate

HTML forms, include complex, animated visual
effects
 You’ll find new form validation tools for making
sure a visitor registering on a Web site.


What’s New in Dreamweaver CS4?
 Greater

Photoshop integration:
support for Adobe “Smart Objects”
maintain a connection between a
Photoshop file and the smaller, lower
version of the image.

CS4 adds
so you can
high-quality
quality Web


The Dreamweaver CS4 Interface


The Dreamweaver CS4 Interface
 The Insert Panel:

– When you first start
Dreamweaver,
the

Insert panel is open.
– If you ever close it by
mistake, you can open
it by choosing
• Window ➝ Insert
or pressing Ctrl+F2.


The Dreamweaver CS4 Interface
 The Insert panel offers seven sets of objects:

– Common objects
– Layout objects
– Form objects.
– Data
– Spry.
– InContext Editing
– Text objects and Favorites.


The Dreamweaver CS4 Interface
 The Files Panel: The Files panel is another panel

you’ll turn to. It lists all the Web files—Web pages,
graphics, Flash movies, that make up your Web
site.


The Dreamweaver CS4 Interface
 The Property Inspector: is a chameleon. It’s

aware of what you’re working on in the document
window: a table, an image, some text, and displays
the appropriate set of properties.


The Dreamweaver CS4 Interface
 The Application Bar: is new in Dr.CS4. Its main

purpose in life is to let you switch between
different document views


The Dreamweaver CS4 Interface
 Code/Design View menu

– Switch between the visual Design view and the
raw HTML

 The Sites menu lets you “define” a new site or

“manage” the sites.


The Dreamweaver CS4 Interface
 The Workspace switcher lets you re-organize the

program’s layout of windows.

Setting Up a Site
 When you build a new Web site, you must define a

site. This is the most important first step when you
start using Dreamweaver.
 Defining a site lets Dreamweaver know where you
store your Web pages on your computer, makes
sure Dreamweaver correctly inserts images and
adds links to the pages of your site


Setting Up a Site
 Dreamweaver gives you two methods for

defining a site:
 The hold-you-by-the-hand site Definition
wizard.
 The advanced “Get out of my way I know what
I’m doing” approach.


Setting Up a Site
 The Site Definition Wizard

‒ Choose Site->New Site to open the Site
Definition window, and then select the Site
 The “Site name” , type a name for your site.
 Local Site folder: where you can choose a
folder on your hard drive that will serve as
your local site’s root folder.

Setting Up a Site


Setting Up a Site
– Choose Advanced Settings:
• Default Images Folder: Select a folder where
store images of the website, this folder must
be inside the Local site folder


Setting Up a Site
 Web URL: Type the Web address of your site.
This step is also optional.
 Click OK to finish the process.
 Your site’s files appear in the Files panel. Now
you’re ready to create Web pages and take
advantage of Dreamweaver’s powerful site
building tools.


Creating a Web Page
 Create a web page:

– After defining a site, Just choose File->New or
press Ctrl+N to open the New Document
window.
– Select Blank Page
– In the Page type: select HTML

– In the Layout: select None
– Click Create button.


Creating a Web Page


Adding Text to Your Web Pages
 Adding Special Characters:

 On the Insert panel, choose the Text category.
 At the end of the Insert panel, select the symbol
you wish to insert


Adding Text to Your Web Pages


Adding Text to Your Web Pages
 Multiple Spaces:

 Choose InsertHTMLSpecial Characters
Non-Breaking Space.
 Press Ctrl + Shift + Space bar ( )
 Adding a Date to Your Page
 Click on Date icon or
 Insert ➝ Date