/
Chapter 1: Introduction Contents Chapter 1: Introduction Contents

Chapter 1: Introduction Contents - PowerPoint Presentation

sherrill-nordquist
sherrill-nordquist . @sherrill-nordquist
Follow
357 views
Uploaded On 2018-02-25

Chapter 1: Introduction Contents - PPT Presentation

Whats New in Dreamweaver CS4 The Dreamweaver CS4 Interface Setting Up a Site Creating a Web Page Adding Text to Your Web Pages Format text The Property inspector has been split in two to better separate HTML options from CSS You can also create and edit styles as you speci ID: 636151

text site web dreamweaver site text dreamweaver web list cs4 formatting format choose paragraph panel interface click select pages

Share:

Link:

Embed:

Download Presentation from below link

Download Presentation The PPT/PDF document "Chapter 1: Introduction Contents" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.


Presentation Transcript

Slide1

Chapter 1: IntroductionSlide2

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 textSlide3

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

?Slide4

What’s New in Dreamweaver CS4?Slide5

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

What’s New in Dreamweaver CS4?

Greater Photoshop integration:

CS4 adds support for Adobe “Smart Objects” so you can maintain a connection between a high-quality Photoshop file and the smaller, lower quality Web version of the image.Slide7

The Dreamweaver CS4 InterfaceSlide8

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

The Dreamweaver CS4 Interface

The Insert panel

offers seven sets of objects:

Common objectsLayout objectsForm objects.DataSpry.

InContext EditingText objects and Favorites.Slide10

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

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

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 viewsSlide13

The Dreamweaver CS4 Interface

Code/Design

View

menuSwitch between the visual Design view and the raw HTMLThe Sites menu

lets you “define” a new site or “manage” the sites.Slide14

The Dreamweaver CS4 Interface

The Workspace switcher

lets you re-organize the program’s layout of windows.Slide15

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 siteSlide16

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

Setting Up a Site

The Site Definition Wizard

Choose Site->New Site to open the Site Definition window, and then select

the SiteThe “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.Slide18

Setting Up a SiteSlide19

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 folderSlide20

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

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 HTMLIn the Layout: select NoneClick Create button.Slide22

Creating a Web PageSlide23

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 insertSlide24

Adding Text to Your Web PagesSlide25

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 orInsert ➝ DateSlide26

Text Formatting

Paragraph

:

When you press Enter  you create a new paragraph, complete with opening and closing <p> tags.Paragraph formatting: Click anywhere inside the block of text, In the Property inspector choose Paragraph, or Choose Format  Paragraph Format

Paragraph or Press Ctrl + Shift + PSlide27

Text Formatting

Properties Inspector:

used

for format TextSlide28

Text Formatting

Headlines

:

To turn a paragraph into a headline, click anywhere inside the line, or block, of text and then do one of the following:In the Property inspector, from the Format menu, select one of the heading levels (Heading 1 ->6) Or Choose Format  Paragraph Format

Heading1… Heading6Slide29

Text Formatting

Heading function equivalent tag <Hn>

Example: Heading 1

 <H1>Slide30

Text Formatting

Paragraph Alignment:

Choose Format ➝ Align ➝ Left, Center, Right, or Justify

Indented Paragraphs:On the Property inspector, click the Blockquote button or Choose Format -> Indent, or Press Ctrl + Alt +]This function  <Blockquote>Slide31

Text Formatting

Creating a new bulleted or

numbered

list: In the document window, click where you wish to start a list.In the Property inspector, click the Ordered/Unordered List button.Or Format -> List -> Unordered List or Ordered List.

Type the first list item-> Enter. Repeat until you’ve added all items in the list

.Slide32

Text Formatting

Use menu Format

 List

Use List button in properties InspectorSlide33

Text Formatting

Formatting bullets and numbers

Click once inside any list item.

Format ➝ List ➝ Properties to Open the List Properties dialog boxChoose a bullet or numbering styleSlide34

Text Formatting

Nested

:

Using the Property inspector’s indent button lists:Slide35

Text Formatting

Definition List

:

can be used to display items in a dictionary or glossary, or whenever you need to present a term and its definition. Each a list of definitions and terms: Each term and definition should be in its own Paragraph,Highlight the paragraphs that contain the terms and definitions, and then choose Format

➝ List ➝ Definition List.Slide36

Text FormattingSlide37

Text Formatting

Example: Slide38

Text Formatting

Text Styles:

To use these styles, select the text, and then apply a format from the Format

➝ Style menu