dreamweaver cs4

DREAMWEAVER CS4

What’s New in Dreamweaver CS4? Workspace in Dreamweaver CS4 Opening and Creating Sites

What’s New in Dreamweaver CS4?

Gray interface: when you launch Dr.CS4 is that it’s all shades of gray. When you roll your cursor over the icons, the colorful designs reappear, making it easier to recognize and select them.

Customizable interface: Layout in CS4 have eight preset layout options, each optimized for a specific profile, including Designer, Coder, and Programmer


Enhanced CSS support: CSS in Dr.CS4 better support for creating styles and CSS layouts, especially in the Property inspector.

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 in the Property inspector


Better integration with Photoshop, Flash, and other design programs: Some of the coolest improvements to Dreamweaver CS4 include greater integration among Adobe’s suite of programs

What’s New in Dreamweaver CS4? Spry features

for AJAX create drop-down menus, collapsible panels, and other interactive AJAX features


Live View possible to render a page as it’d be displayed in a browser so you can see AJAX and other interactive features in action without leaving Dreamweaver


Code Navigator is a handy way to keep an eye on the CSS code for your pages


Related Files bar: find a handy list of associated files and scripts for any open document external CSS files, JavaScript files and other programming files

Workspace in Dreamweaver CS4 Started in the Dreamweaver interface: the

Welcome screen appears in the main area of the program

Workspace in Dreamweaver CS4

Dreamweaver creates a new blank HTML page in the main workspace


Changing workspace layouts choosing Window➪Workspace Layout and then choosing from any of the listed layouts such as Designer, App Developer,…


The menu bar: the menu at the top of the screen provides easy access to most program features, including the options you find in the Insert bar


The Document toolbar you find the Code, Split, and Design view

buttons, which make it easy to change from displaying only the code or design in the workspace, or both the code and the design

the page title

preview of the page

Visual Aids

button


The Document window: The big, open section in the main area of the workspace is the Document window where you work on new and existing pages. The Document window is displayed in split view, showing the code at the top of the window and the design at the bottom


The Document windowDocument window is displayed in split view

the code at the top of the window

the design at the bottom


The docking panels located to the right of the work area when you choose any of the designer layouts or on the left when you choose any of the developer layouts

The Insert panel includes seven sub-categories, each with a different set of icons representing common features


Common Insert panel Displays icons for many of the most common features, including links, tables, and images


Layout Insert panel: Displays div, table, and frame options essential for creating page layouts.


Forms Insert panel: Features the most common form elements, such as radio buttons and boxes


Data Insert panel: Displays options for building dynamic Web pages powered by database material.


Spry Insert panel: Features a collection of widgets that combines HTML, CSS, and JavaScript to create interactive page elements, such as drop-down lists and collapsible panels


InContext Editing Insert panel: Displays features that are handy for cre-ating Repeating and Editable Regions, as well as managing CSS classes, when working with dynamic content.


Text Insert panel: Displays common text-formatting features, including paragraphs, breaks, and lists.


Favorites Insert panel: Enables you to right-click (Windows) or Control-click (Mac) to add any of the icons from any of the other Insert bar options to create your own collection of favorite features.


The Property inspector displays the properties, or options, for any selected element on a page, and it changes based on what’s selected. The Property inspector into two sections or many elements, one for HTML features and the other for CSS.


The status bar includes access to a number of features that control the display of a page in Dreamweaver’s workspace, such as the magnifying glass, which enlarges the view of the open page

Status bar

Property inspector


Changing preference settings you can easily alter Dreamweaver’s preference settings using the Preferences dialog box.

To open the Preferences dialog box, choose Edit➪Preferences

Opening and Creating Sites Setting Up a New or Existing Site

The first thing to understand about the site definition process need to store all your site’s resources in one local root folder on your hard drive and identify the folder in Dreamweaver because all the elements of your site must remain in the same relative location on your hard drive as they are on your Web server in order for your links, images, and other elements to work properly


Defining a Web site in Dreamweaver: the site definition process seems a little confusing at first, you’re creating a new site or working on an existing site

The process of defining a root site folder:1. Choose Site➪New Site ➪ The SiteDefinition

dialog box appears.2. Click the Advanced tab3. In the Category box on the left, make sure that

the Local Info category is selected.4. In the Site Name text box, type a name for

your site


The process of defining a root site folder:5. Click the Browse icon (hint: it looks like a file

folder) next to the Local Root Folder text box and browse your hard drive to locate the folder you want to serve as the main folder for all the files in your Web site

6. Specify the Default Images folder by entering the location or by using the Browse icon to locate it.

Opening and Creating Sites

Use the Site Definition dialog box to set up a new or existing Web site in Dream-weaver


The process of defining a root site folder:7. For Links Relative To, leave the Document

option selected unless you know that you want your links to be set up relative to the root of your site.

8. In the HTTP Address text box, type the URL of your Web site:The HTTP address is the URL, or Web address, that your site will have when published on a Web server.

9. Select the Use Case-Sensitive Link Checking box.

10. Select the Enable Cache option.11. Click OK to close the Site Definition dialog box

and save your settings

Opening and Creating Sites Editing and managing multiple sites After

you complete the site definition process covered in the preceding exer-cise, you can make changes and additions to a site definition by choosing Site➪Manage Sites, selecting the name of the site in the Manage Sites dialog box, and then clicking the Edit button

Opening and Creating Sites Creating New Pages

Starting from the Welcome screen If you want to create a simple, blank Web

page,choose HTML from the Create New list in the middle column

If you’re creating a dynamic site, choose ColdFusion, PHP, or one of the other dynamic site options


Starting from the Welcome screen

The Welcome screen pro-vides a list of shortcuts for creating new files or opening existing pages in Dream-weaver


Creating a page with the New Document window: create a new page by using the New Document window available from the File menu, as you see in the following the steps1. Choose File➪New ➪ The New Document window

opens2. From the left side of the screen, select Blank Page3. From the Page Type list, select HTML and then

choose Create4. From the Layout section, choose <none>5. Choose File➪Save to save your page and give it a

filename following the guidelines in the upcoming sections, “Naming new page files” and “Naming the first page index.html.”


Naming new page files Include an extension at the end to identify the

file type(such as html for HTML files or .gif for GIF images)

Don’t use spaces or special characters in the filename (such as cat’s page.html.) you can use the underscore (_) or the hyphen (-). For example: cat-page.html

Naming the first page index.html Another confusing rule, and one of the most important, is that the main page (or the front page) of your Web site must be called index.html because most servers are set up to serve the index.html page first.


Bestowing a page title The title won’t appear in the main part of

your Web page, but it does appear at the top of a browser window, usually just to the right or left of the name of the browser


Designing Your First Page Formatting headlines with the heading tags

1. Highlight the text you want to format.2. In the Property inspector, at the bottom of the

workspace, make sure the HTML button on the left side of the inspector is selected.

3. Use the Format drop-down list to select a heading option


Designing Your First Page Formatting headlines with the heading

tags

Adding paragraphs and line breaks

Creating New Pages Inserting and formatting text Adding paragraphs and line breaks working

in design view in Dreamweaver and press the Enter key (Windows) or the Return key (Mac), Dreamweaver inserts a paragraph tag, or <p>, in the code, which creates a line break followed by a blank line. If you want a line break without the extra blank line, hold down the Shift key while you press Enter (or Return) to get Dreamweaver to insert the <br /> tag into the code, creating a single line breakphs and line breaks


Inserting and formatting text Inserting text from another program

o Edit➪Paste /Edit➪Paste Special ➪ four main options Text Only Text with Structure includes paragraphs, lists,

tables, and other structural formatting options. Text with Structure Plus Basic Formatting

includes structural formatting as well as basic formatting, such as bold and italic.

Text with Structure Plus Full Formatting includes formatting created by style sheets in programs, such as Microsoft Word

Retain Line Breaks Line breaks are preserved, even

Clean Up Word Paragraph Spacing


Adding images Note: Before inserting an image into a Web page,

it’s good practice to save the image inside your local root folder

Follow these steps to add an image on your Web page:

1. Place your cursor on the page where you want to add the image.

2. Double-click the Insert panel at the top right of the workspace to open it.

3. Click the Images icon, located in the Common section of the Insert panel or click the small arrow to the right of the icon and then choose Image from the drop-down list.


Adding images Follow these steps to add an image on your Web

page4. Navigate to the folder that has the image

you want to insert and double-click to select the image you want to insert into your page.

5. Enter alternate text in the Image Tag Accessibility Attributes dialog box.

6. Click OK.7. Click to select the image on your Web page8. Use the Property inspector to specify image

attributes, such as align-ment, spacing, and alternate text.


Adding images


Creating New Pages Setting Links To link to a page within your Web site, you

can create a relative link that includes a path describing how to get from the current page to the linked page within your main root folder

Linking pages within your Web site1. In Dreamweaver, open the page where you want

to create a link.2. Select the text or image that you want to serve as

the link (meaning the text or image that a user licks to trigger the link).


Setting Links Linking pages within your Web

site3. Click the Hyperlink icon in the

Common Insert panel, at the top right of the workspace

4. In the Hyperlink dialog box click the Browse icon to the right of the Link drop-down list.

➪The Select File dialog box opens5. Click the filename to select the

page that you want your image or text to link to, and then click OK (Windows) or Choose (Mac).


Setting Links Setting links to named anchors within a

page(jump link)1. Open the page on which you want to insert the

named anchor2. Place cursor next to the word or image that you

want to link to on the page.3. Choose Insert➪Named Anchor. ➪ The Insert Named

Anchor dialog box appears4. Enter a name for the anchor ➪ Click OK.5. To set a link to the named anchor location, select the text

or image that you want to link from.6. Click the Link icon in the Common Insert panel, at the top

right of the workspace.7. In the Hyperlink dialog box, use the small arrow to the

right of the Link box to select the anchor.


Setting Links Linking to another Web site (external link) To

create an external link, follow these steps:1. In Dreamweaver, open the page from which you

want to link.2. Select the text or image that you want to act as

a link.3. In the Link text box in the Property inspector,

type the URL of the page you want your text or image to link to.


Creating New Pages Setting Links

Linking to another Web site (external link)


Setting Links Setting a link to an e-mail address To create an e-mail link, select the text you

want to link and then click the E-mail Link icon in the Common Insert panel. In the E-mail Link dialog box, enter the e-mail address in the Link field and then click OK

Opening and Creating Sites Changing Page Properties

Change many individual elements on a page in the Property inspector.

Changes that affect the entire page such as changing the background color of the entire page or changing the way links and text are formatted, use the Page Properties dialog box


To change the font settings, the background and text colors, and the page margins for an entire page, follow these steps1. Choose Modify➪Page Properties2. In the Page Font drop-down list, specify the fonts

you want for the text on your page3. If you want all the text on your page to appear

bold or italic, click the B or I, respectively, to the right of the Page Font drop-down list.

4. In the Size drop-down list, specify the font size you want for the text on your page


5. In the Size drop-down list, specify the font size you want for the text on your page

6. Click the Background Color swatch box to reveal the color palette. Choose any color you like.

7. If you want to insert a graphic or photograph into the background of your page, click the Browse button next to the Background Image box and select the image in the Select Image Source dialog box

8. Use the margin options at the bottom of the dialog box to change the left, right, top, or bottom margins of your page.

9. Click the Apply button to see how the colors look on your page

10. Click OK to finish and close the Page Properties dialog box


To change the link color and underline options, follow these steps1. Choose Modify➪Page Properties2. In the Category list, select the Links (CSS)

option


Changing Page Properties To change the link color and underline options

3. Specify the font face and size you want for the links on your pag

4. To the right of the Link Font drop-down list, click the B or I if you want all the links on your page to appear bold or italic, respectively.


To change the link color and underline options5. Specify a color for any or all link states. There are

four link states, and all can be displayed in the same or different colors Link Color the color in which a link appears when it

is first displayed on a page Visited Links the color of links that a visitor has

already clicked (or visited) Rollover Links: A link changes to this color when a

user rolls a cursor over the link Active Links: A link changes to this color briefly

while a user is ctively clicking it.


To change the link color and underline options6. In the Underline Style drop-down list, specify

whether you want your links underlined.7. Click the Apply button to see your changes

automatically applied to any linked text or other elements on your page. ➪ Click OK to finish

Opening and Creating Sites Adding Meta Tags for Search

Engines The Meta description tag is more widely

used and is definitely worth using. This tag is designed to let you include a written description of your Web site and is often used by search engines as the brief description that appears in search results pages


Adding Meta Tags for Search Engines Follow these steps to fill in the Meta

description tag1. Open the page where you want to add a Meta

description2. Choose Insert➪HTML➪Head Tags➪Description

➪ The Description dialog box appears3. In the Description text box, enter the text you

want for your page description

Opening and Creating Sites Adding Meta Tags for Search Engines


Previewing Your Page in a Browser The simplest way to preview your work is to

save the page you’re working on and then click the Preview/Debug in Browser icon located at the top right of the workspace.

You can also choose File➪Preview in a Browser

Opening and Creating Sites Previewing Your Page in a

Browser

dreamweaver cs4

Documents

dreamweaver whats new

dreamweaver interface

dreamweaver cs4dreamweaver

dreamweaver cs4started

dreamweaver cs4the menu

main workspace workspace

pages whats new

programmer whats new