Adobe Dreamweaver CS3 Unleashed- P2 ppsx

Advanced options for every panel are also available from the panel Options menu,easily accessed by selecting the icon located on the far right of the blue menu bar and shown selected inF

used as way of embedding the content of a secondary page within your page within a small scrollablewindow It's important to note, however, that the IFrame is deprecated and it should be replacedwhenever possible with the much more flexible <div> tag.

Frames Menu— Opens the Frameset submenu, which enables you to pick from various options for

splitting the Document window into frames Frames are covered in more detail in Chapter 8, "Workingwith Frames and Framesets."

Form Objects

Covered in much more detail in Chapter 9, "Working with HTML Forms," form objects facilitate interactivitybetween your users and your dynamic web applications Aside from adding form objects by using the Insert,Form menu, you can visually add form objects from this category

The list of available objects includes Form, Text Field, Hidden Field, Textarea, Checkbox, Radio Button,Radio Group, List/Menu, Jump Menu, Image Field, File Field, Button, Label, Fieldset, and various Spryvalidation elements including Spry Validation Text Field, Spring Validation Textarea, Spry Validation

Checkbox, and Spry Validation Select

Data Objects

Throughout the second half of this book, you will become increasingly familiar with data objects Depending

on what server technology you're using, the Data category of the Insert bar will tailor itself to accommodatefeatures and functionality of a specific technology To prove this point I'll briefly create a sample ASP.NETpage As you can see from Figure 1.22 (before) and Figure 1.23 (ASP.NET site), the Application categorylooks slightly different before I created the ASP.NET site than afterwards

Figure 1.22 The categories of the Insert bar when you're working with a normal HTML file.

[View full size image]

Figure 1.23 The categories of the Insert bar when you're working with an ASP.NET file Also

notice the new ASP.NET category.

[View full size image]

It's also important to notice that depending on the server technology you decide to use, a new category willappear to support development for that particular technology In my case, because I created a new ASP.NETpage, an ASP.NET tab appears, complete with elements that I can use for that technology Again, servertechnologies will be covered in much more detail in the second half of the book

Although we'll cover the Spry framework in much more detail in Chapter 30, "Introducing the Spry

Framework for Ajax," for now, note that the Spry category in the Insert bar outlines various Spry elements,also shown in Figure 1.24, that you may decide to use within your web pages

Figure 1.24 The new Spry objects make it easy to insert and work with XML data visually and

interactively.

Text Objects

As you can see from Figure 1.25, text objects provide a section from the Insert bar from which text can beeasily formatted

Figure 1.25 Use text objects when manipulating the look of text within the Document window.

[View full size image]

Text objects can be broken into the following categories (moving from left to right):

Font Weights and Styles— Allows you to add a bold (<b>) or strong (<strong>) tag as well as anitalic (<i>) or emphasis (<em>) tag

Paragraph, Blockquote, & Preformatted— Allows you to format blocks of text with the paragraph

(<p>) tag, indent text with the blockquote (<blockquote>) tag, or preserve the formatting of contentwith the preformatted (<pre>) tag

Headings— Provides three heading options (H1, H2, H3) for your text.

Lists— Allows you to pick from three types of lists: ordered list (numbered) and unordered list

(bulleted) and the required tags within these two types of lists: li (list item) Also shown is the

definition list (dl) including tags contained within the definition list including dt (definition title) and dd(dictionary definition)

Abbreviations and Acronyms— Assign the abbreviation or acronym tag to text within your page.

Characters (BR sub menu)— Select from a group of predefined special characters from this menu.

The most obvious are listed (line break, non-breaking space, left and right quote, dash, pound, euro,yen, copyright, registered trademark, and trademark You can also choose from a character map byselecting the Other Characters option Doing so launches the Insert Other Characters dialog, whichallows you to choose from a map of characters supported on your computer

It's important to note that most text-based formatting features are available from the Property inspector.Like most of the other features within the Insert bar, the Text category provides a simpler, visual methodfor applying text-based formatting

Favorites

As you familiarize yourself with using the various categories of the Insert bar, you'll quickly begin to realizethat you're using some objects more than others When this happens you may want to group some of yourfavorite objects within the Favorites category, making them quicker and easier to reference To add anobject to the Favorites category of the Insert bar, follow these steps:

1. Switch to the Favorites category of the Insert bar A message within the category will instruct you toright-click (Control+click) the bar to customize your favorite objects.

2. Right-click (Control+click) the bar, as the instructions indicate, and select Customize Favorites

3. The Customize Favorite Objects dialog box will appear

4. Select your favorite objects from the Available Objects section on the left and add them to the FavoriteObjects section on the right by clicking the double-arrow button in the center (see Figure 1.26)

Figure 1.26 Add your favorite objects from the Available Objects list to the Favorite

The Property Inspector

If you haven't noticed by now, the Property inspector is the horizontal pane located directly underneath theDocument window shown in Figure 1.27

Figure 1.27 The Property inspector adjusts its editable properties based on the task at hand.

[View full size image]

The Property inspector—unlike any other piece of Dreamweaver's user interface—automatically tailors itself

to the task at hand For instance, up to this point I've demonstrated simple "Hello World" examples usingboth plain text and tables Although we won't begin to cover the concepts until later chapters, this is theperfect opportunity to discuss the adjustments that the Property inspector will make for each element, andsubsequent other elements, that you will work with throughout the book

Tip

If the Property inspector is not visible, you can always make it visible by selecting Window,

Properties

So far you may have noticed that the Property inspector provides options for editing fonts, colors,

indentation, alignments, and so on by placing your cursor within a blank Document window This is known

as a text-based Property inspector Although we'll be using the Property inspector for a lot of the exampleswithin the book, it's important to note the changes that the Property inspector makes when working withother elements To demonstrate this, I'll quickly add a table to the Document window by selecting Insert,Table, modifying some of the options from the Insert Table dialog box, and choosing OK With the Table nowwithin the Document window, try placing your cursor somewhere inside the table As you'll see, the Propertyinspector changes to accommodate editable properties for a cell Now let's try using a feature that you'vealready learned: the Tag Selector This time with your cursor inside the table, select the <table> tag fromthe Tag Selector Again, as you can see from Figure 1.28, the Property inspector changes, this time to theTable Property inspector

Figure 1.28 Selecting the table tag from the Tag Selector causes the Property inspector to

change to the Table Property inspector.

The important concept to remember here is that the Property inspector will change to accommodate anyselected element Because there are so many elements to work with in Dreamweaver, the Property

inspector can be deceptively tough to figure out—especially if you're working with an element that you'reunfamiliar with Just remember—if you're working with the text, the Property inspector will accommodatetext; if you're working with tables, the Property inspector accommodates Tables, and so on

A couple of other elements that are worth mentioning appear within the Property inspector no matter whatelement is selected These four elements are also highlighted in Figure 1.28 and are described with moredetail next:

Element Icon— Every possible HTML element that can be modified within the Property inspector is

represented by its own icon

Quick Help— Opens the Dreamweaver help menu with the element you're working with as the

indexed topic

Quick Tag Editor— Similar to right-clicking (Control+clicking) a tag within the Tag Selector and

choosing Edit Tag, the Quick Tag Editor allows you to quickly format attributes and values for a tagwithout having to switch to Code view

Disclosure Triangle— If you haven't noticed yet, the Property inspector is divided into two sections

by a horizontal line running down the middle The basic properties (located in the top half) and

advanced properties (located in the bottom half) can be collapsed and expanded by selecting this icon

Dreamweaver contains many panels, toolbars, inspectors, and menus to aid in the development of your webpages Although we've talked about a select few options centralized within and around the Documentwindow, this section focuses on the myriad of other panels that are also at your disposal

Interacting with Panels

Dreamweaver includes a library of panels, all organized within panel groups and readily available from theWindow menu Opening a panel and its associated panel group is a matter of choosing the panel you wantfrom the Window menu For instance, because we'll be talking about the CSS Styles panel shortly, I'll select

it from the Window menu As you can see from Figure 1.29, the panel, along with the AP Elements panel,opens as the CSS panel group, docked above the Files panel group

Figure 1.29 The CSS Styles panel can be opened by selecting CSS Styles from the Window menu.

[View full size image]

You can also undock panels by dragging them out of their docked state For instance, if I wanted to makethe Design panel group a free-floating panel, I would simply click, hold, and drag from the icon just to theleft of the text and within the blue menu bar similar to Figure 1.30

Figure 1.30 Panels can be docked and undocked freely.

The reverse is also possible by dragging the panel group back into the list of panels on the right side of thedevelopment area You can also minimize and open panels by selecting the name from the blue menu bar orchoosing the small arrow icon next to the name.

Every panel supports its own unique functionality This is made obvious by the small icons located on thebottom right of the panel Advanced options for every panel are also available from the panel Options menu,easily accessed by selecting the icon located on the far right of the blue menu bar and shown selected inFigure 1.31

Figure 1.31 Every panel features a panel Options menu that includes advanced features related

to the specific panel.

[View full size image]

At the bottom of the panel Options menu, you'll notice six distinct options that are consistent with everypanel menu and are also available from the context menu (right-clicking/Control+clicking on the blue menubar) of the panel These six options are the following:

Help— Opens the Dreamweaver Help index with the selected panel as the selected topic.

Group <Panel Name> with— Choose this option if you want to associate a specific panel with a

different group You can also select the New Panel Group option if you want to disassociate a panelwith its group and make it free standing

Close <Panel Name>— Choose this option when you want to close a specific panel You can always

reopen it within its panel group by selecting the specific option from the Window menu

Rename Panel Group— Opens the Rename Panel Group dialog box Choosing this option allows you

to customize the name of the panel group

Maximize Panel Group— Expands the panel group so that it consumes the entire vertical area of the

panel menu on the right side of the development area Doing this while docked causes other panels toautomatically minimize

Close Panel Group— Closes the panel group After a panel group has been closed, it must be

reopened from the Window menu

The CSS Styles Panel

Part of the CSS panel group, the CSS Styles panel allows you to create and work with styles and stylesheets You can make the CSS Styles panel visible or hide it by selecting CSS Styles from the Window menu

The CSS Styles panel will be covered in greater depth in Chapter 6, "Page Formatting Using Cascading StyleSheets."

The AP Elements Panel

Also part of the CSS panel group, the AP Elements panel allows you to name and change the stacking orderand visibility of AP Elements within the Document window after they've been added You can make the APElements panel visible or hide it by selecting AP Elements from the Window menu or by pressing the F2shortcut key

The AP Elements panel will be covered in greater depth in Chapter 7, "Page Structuring Using CascadingStyle Sheets."

The Application Panel Group

As you begin to build dynamic applications toward the second half of the book, the Application panel groupwill become your best friend The Application panel group, which includes the Databases, Bindings, ServerBehaviors, and Components panels will be covered extensively in the second half of the book

The Files Panel

Part of the Files panel group, and covered with more detail in the next chapter, the Files panel is a

centralized repository for managing sites and files within sites At its most basic level, the Files panel actssimilar to your operating system's file explorer in that it allows you to browse your computer, network, anddesktop It also lists FTP and RDS servers, again, covered in more detail in the next chapter You can makethe Files panel visible or hide it by selecting Files from the Window menu or by pressing the F8 key

The Assets Panel

Also part of the Files panel group, the Assets panel is an integrated image, color, URL, Flash, Shockwave,movie, script, template, and Library Item management window From this panel you have various optionsfor managing and working with the features listed previously as well as adding and customizing favoritesyou use most often You can make the Assets panel visible or hide it by selecting Assets from the Windowmenu or by pressing the F11 (Option+F11) key

The Snippets Panel

The last panel available within the Files panel group is the Snippets panel The Snippets panel allows you tocreate and store scripts, markup, and notes that you use and reuse most frequently while developing webpages Dreamweaver ships with a set of snippets that include text, navigation, meta (which includes metatags), JavaScript, header, form, footer, content table, comment, and accessibility snippets You can makethe Snippets panel visible or hide it by selecting Snippets from the Window menu

There are numerous snippets that you can add to your documents So many, in fact, that I won't attempt tocover them all here Instead, I'll show you how to easily add a snippet to your page, and then show you how

to create your own snippets from code Adding snippets to your page is as easy as finding a snippet that youlike and that relates to the functionality you need, and then simply adding it to the page To add a snippet

to your page, follow these steps:

1. As an example, find the Close Window Button snippet located within the Form Elements category in theSnippets panel.

2. After you've selected it, you should see the snippet code within the panel's Preview pane similar toFigure 1.32

Figure 1.32 The snippet's code will appear within the Snippets panel's Preview pane.

[View full size image]

3. Drag the snippet onto the Document window You can also select the snippet and choose the Insertbutton located near the bottom-left corner of the Snippets panel Furthermore, you could also double-click the snippet to insert it wherever your cursor is positioned within the Document window

4. To preview the functionality, save your work and then select the Preview In Browser option (or pressF12/Option+F12) from the Preview/Debug in Browser menu within the Document toolbar

As you can see from Figure 1.33, selecting the button within the browser causes the browser window toattempt to close itself

Figure 1.33 The Close Window Button snippet is a piece of code that causes the browser window

to close.

This is a small example of using the Snippets panel, but it clearly demonstrates the possibilities I encourageyou to explore the different snippets because they will greatly improve your development efficiency.

You may also want to add to the Snippets panel For instance, if you write lengthy code that you don't want

to replicate every time you need to use it, you can add it as a snippet for easier reference and use Tocreate a new snippet, follow these steps:

1. As an example, switch to Code view, and then add the following code snippet that causes a table row

to change color when the user's mouse rolls over the row:

<table width="125" border="0" cellspacing="0" cellpadding="0">

The code added to the page will resemble lines 9–14 shown in Figure 1.34

Figure 1.34 Add some code to the page within Code view that we can later turn into

a snippet.

[View full size image]

2. Highlight the code, right-click (Control+click) to access the context menu, and choose Create NewSnippet.

3. The Create New Snippet dialog box appears, allowing you to give your snippet a name, description,type, and so on Fill in the blanks so that your dialog box resembles Figure 1.35

Figure 1.35 Give your new snippet a name, description, and associative type.

[View full size image]

4. Click OK The new snippet will be added to the Snippets panel automatically.

Note

Snippets are added to the Snippets panel and are placed into the folder where your cursor was lastpositioned You can reposition your snippet by dragging it into a new folder or creating a new folderaltogether by selecting the New Snippet Folder icon located at the bottom right of the Snippets

panel

You can use your new snippet by selecting it and dragging it over to the Document window as much as youwant To view it in the browser, choose Preview In Browser or press F12 (Option+F12)

The Tag Inspector Panel Group

The Tag Inspector panel group, which includes the Attributes and Behaviors panels, is a handy panel to usefor setting various attributes of selected HTML tags and styles Although the true benefits of this panel setwill become more obvious as the book unfolds, you can see the power of the Attributes panel immediately

by placing your cursor within the code of your page and then expanding the nodes within the Attributespanel As Figure 1.36 illustrates, various attributes and their values associated with a selected tag areoutlined within the panel

Figure 1.36 The Attributes panel outlines attributes and their values for a selected tag.

You can begin to see that the Attributes panel mirrors functionality in the Property inspector The obviousdifference, however, is that the Attributes panel is a more technical and less visual approach to the

attributes of a specific tag You can also switch between a categorized and list view by selecting the

appropriate button located just under the tab itself You can make the Tag Inspector panel group visible orhide it by selecting Tag Inspector from the Window menu or by pressing F9 (Option+Shift+F9)

The Behaviors Panel

Also part of the Tag Inspector panel group, the Behaviors panel allows you to work with a myriad of prebuiltJavaScript behaviors With a single click of the Add (+) button, a list of behaviors are immediately available

to your web pages You can make the Behaviors panel visible or hide it by selecting Behaviors from theWindow menu or by pressing Shift+F4

The Behaviors panel will be covered in greater depth in Chapter 10, "Using Dreamweaver Behaviors."

The Results Panel

As mentioned in an earlier section, the Results panel is a centralized location for performing searches, pagevalidation, browser compatibility checks, checking links, creating site reports, and so on You can interactwith the Results window in one of two ways You can make the Results window visible or hide it by selectingResults from the Window menu or by pressing F7 Furthermore, the Results panel will automatically appearwhen using functionality it exposes, such as the FTP log, Find and Replace, and more

The true power of this panel will become evident as the book unfolds

The Reference Panel

The Reference panel is a handy set of reference books built directly into a panel References ranging from aColdFusion Function, ColdFusion Markup, ASP, ASP.NET, CSS, HTML, JavaScript, JSP, PHP, SQL, XML, XSLT,and Accessibility are all included You can make the Reference panel visible or hide it by selecting Referencefrom the Window menu or by pressing Shift+F1

The History Panel

At its most basic functionality, the History panel provides a visual, historical list of steps performed Thepanel features a slider that you can use to scroll through steps in the history In contrast to selecting Edit,Undo or pressing Ctrl+Z, the History panel also allows you to select a specific point in time to return to.Other features include the capability to create commands by highlighting a set of steps, right-clicking

(Control+clicking), and choosing Save As Command Commands are covered in much more detail in Chapter

13, "Enhancing Workflow." You can make the History panel visible or hide it by selecting History from theWindow menu

The Frames Panel

You can use the Frames panel when working with frames and framesets, covered in more detail in Chapter

8, "Working with Frames and Framesets." You can make the Frames panel visible or hide it by selectingFrames from the Window menu or by pressing Shift+F2

The Code Inspector

As you can see from Figure 1.37, the Code Inspector is a detached code window

Figure 1.37 The Code Inspector is a detached code window that mirrors the functionality and

look of Code view.

[View full size image]

The only real difference between the Code Inspector and Code view is that the Code inspector lets youcontinue working within the Design view, at the same time offering a detached, floating coding

environment—perfect for dual monitor environments You can make the Code Inspector visible or hide it byselecting Code Inspector from the Window menu or by pressing F10 (Option+F10)

The Timelines Panel

As you will see in Chapter 16, "Working with the Timeline," the Timelines panel is a frame-based windowthat facilitates animation and interactivity with objects in the Document window You can make the

Timelines panel visible or hide it by selecting Timelines from the Window menu or by pressing Alt+F9(Option+F9)

Workspace Layouts

Whereas older versions of Dreamweaver allowed Windows users to select from two predefined workspacelayouts (coder and designer), Dreamweaver CS3 affords the opportunity to choose from other, more specificwindow layouts and offers both Windows and Mac users the capability to create your own Available bychoosing one of the three options from the Workspace Layout submenu, you can easily choose from apreconfigured layout style including Coder (Windows only), Designer (Windows only), and Dual (for working

in dual monitor setups) Choosing one of these options configures the panels and windows according to thepredefined layout

Optionally, you can create your own workspace layout To create your own workspace layout, follow thesesteps:

1. Organize windows and panels within Dreamweaver according to how you would like to work

2. Choose Window, Workspace Layout, Save Current The Save Workspace Layout dialog appears

3. Enter a name for your new layout and click OK The new layout will appear within the WorkspaceLayout submenu

If you want to delete a workspace layout, choose Window, Workspace Layout, Manage Select the layoutname you want to remove and click Delete The saved workspace layout will be removed from the list Ofcourse, you can also rename a layout by choosing the layout and then selecting the Rename button Thislaunches the Rename Workspace Layout dialog, in which you can rename your layout and then click OK toapply the changes

The Menu Bar

The last development-related component to be covered is arguably the most obvious, the menu bar

Although Dreamweaver offers an assortment of panels, toolbars, and inspectors, the menu bar alwaysremains consistent and never needs to be hidden or made to be visible Just about every feature we'vecovered thus far can be inserted, modified, or referenced through the menu bar, with few exceptions Ageneric list of menu items is listed next, complete with highlights:

Dreamweaver— This Mac only menu, also referred to as the Application menu, contains the About,

Keyboard Shortcuts, Preferences, and Quit menu options for Mac users

File— Contains common file-based operations such as New, Open, Close, Save, and Revert Highlights

include the capability to preview your page in the browser, check your page against a validator ortarget browser, and maintain Design Notes

Edit— Allows you to perform common editing tasks such as undo, redo, cut, copy, paste, and select

all Highlights include the capability to set user preferences for Windows users

View— Anything associated with Document window viewing preferences can be found here, including

visual aids; rulers; grid; the Code, Split, and Design views, and head content

Insert— Anything that can be inserted into your document can be found within this menu.

Alternatively, you can access these options visually by way of the Insert bar by choosing Window,Insert or pressing Ctrl+F2 (Command+F2)

Modify— After you've inserted objects you'll want to have the capability to manipulate them

somehow Although most properties can be changed through panels or the Property inspector, theModify menu is a much more thorough list of modifiable properties

Text— Manipulate text objects through this menu Highlights include the capability to check your

spelling

Commands— Commands are similar to plug-ins or macros They are prebuilt components that

execute or insert content within the Document window We'll discuss Commands in much more detail

in Chapter 13, "Enhancing Workflow."

Site— After you've defined a site, all site-related options can be found within this menu Highlights

include the capability to scan your site for broken links, change links, and even generate site reports

Window— All panels can be opened through the Window menu Highlights include the capability to

hide all panels or to cascade and tile open Document window instances

Help— Access the Dreamweaver, Spry, ColdFusion, and other help windows from this menu.

Highlights include access to the built-in tutorials, forums, and support center, as well as Activating orDeactivating the program

As you've seen in this chapter, Dreamweaver provides numerous panels, windows, inspectors, toolbars, andmenus for making development easier The challenge is now putting everything together that you've learnedconceptually about the myriad of panels and windows so that they make sense in practice In the nextchapter, we'll begin the transition by creating a simple web page As you'll see, the panels, inspectors, andwindows will make much more sense after you've started putting the concepts you've learned here intoproduction

Chapter 2 Building a Web Page

IN THIS CHAPTER

Creating a New Document

Working with Documents in Design View

Inserting Time and Date

Inserting a Horizontal Rule

Working with Images

Working with Hyperlinks

Working with a Web Page in Code View

In the previous chapter, you learned about the many windows, bars, panels, and menus that Dreamweaverincludes to aid you in the development of your web pages You learned that the Document window is theheart of Dreamweaver and where most of your creative energy will be focused You also learned that theDocument window is surrounded by a myriad of panels contained within user customizable panel groups thatfacilitate the addition of functionality for your pages, a feature-rich inspector to assist you in the addition ofproperties for elements within the Document window, and a complete menu bar that structures everyDreamweaver feature into an easy-to-use grouped list of options

Beyond the simplicities of learning the user interface lies creating an actual web page In this chapter, you'lltake the foundation that you gained in the previous chapter and build on it to create a simple web page.Using the many panels, inspectors, and windows that you explored in the previous chapter, you'll create anew page in Design view, work with text within the Document window, add images to your web page,examine linking using hyperlinks, and finally, learn how to work with your web pages in Code view

You can work with the examples in this chapter by downloading the support files from

www.dreamweaverunleashed.com You'll want to save the files contained within the

Chapter02\Exercises\Beginning\VectaCorp folder in an easy-to-find location I'll place mine in

C:\VectaCorp\Chapter02

Creating a New Document

In the previous chapter, you learned that the Start Page is a handy window used to open new, existing, orrecently accessed documents Although the Start Page will work fine when Dreamweaver has been openedfor the first time, it does little good, if we need to create a new document when document window instancesare already open In such cases, you'll want to use the New Document dialog box Accessible by selectingFile, New, and shown in Figure 2.1, the New Document dialog box enables you to create new documentsbased on an existing predefined skeleton file, create new documents based on a prebuilt template, and soon

Figure 2.1 The New Document dialog box enables you to open new documents, new

preconfigured documents, and ready-made templates.

[View full size image]

Note

You can also create a new document by right-clicking (Control+click) the defined site (covered withgreater depth in the next chapter) in the Files panel and selecting the New File option from theContext menu, by clicking the Files panel options menu and selecting File, New File, by using thekeyboard shortcut Ctrl+N on Windows and +N on a Mac, or by using the New File object on theStandard toolbar

Note

You're probably wondering why there are so many different types of files to choose from in the NewDocument dialog box The reason is simple Because all web pages require a minimum set of tags,

Dreamweaver provides what are known as skeleton files The skeleton files that you see in the New

Document dialog box help get you started by including tags that the developer must add anyway Forinstance, all HTML pages require <html>, <head>, <body>, and <!doctype> tags Because this is thecase, choosing the HTML option from the Blank Page category results in a new Document windowinstance created, complete with the required tags inserted within Code view

As you can see from Figure 2.1, the New Document window exposes the following features:

Category list— This list includes all selectable page categories.

Page Type list— After an option has been selected from the Category list, the Page Type list will

display all selectable skeleton files that coincide with the particular category type

Layout list— Available when most Blank Page types and Blank Template types are selected, the

Layout list outlines numerous CSS-based layouts that you might want to take advantage of for

structuring your web pages These options will be covered with greater depth in Chapter 7, "PageStructuring Using Cascading Style Sheets." When the Page from Sample category is selected, this listdisplays a set of prebuilt Adobe web page layouts instead

Preview pane— When a preview is available, the Preview pane displays a small thumbnail of the

selected page type

Description pane— When necessary, the Description pane outlines the features and benefits of the

selected page type

Document Type (DTD)— This menu allows you to pick from a predefined list of DTDs for your

document A DTD states what tags and attributes are used to describe content within an XML or HTML

document, where each tag is allowed, and which tags can appear within other tags Remember, theserules are outlined by the World Wide Web consortium (W3C) and are outlined within Document TypeDefinition on W3C servers When you run Dreamweaver's built-in page validator, the page is validatedagainst the DTD you select here Options within this list include None, HTML 4.01 Transitional, HTML4.01 Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML 1.1, and XHTML Mobile 1.0

Layout CSS— With this new version of Dreamweaver, the product team made a serious push toward

integrating more CSS-based page structuring features You may have noticed that the new Layoutcategory outlines numerous CSS-based page layouts that you can take advantage of As you will see inChapter 7, the Layout CSS menu allows you to choose options that place the CSS code within the

<head> tag of the page, in an external CSS document, or as a link in your own styles from an existingCSS file

Attach CSS File— Click the Attach Style Sheet icon to launch the Attach Style Sheet dialog box You

can choose this option when you have a prebuilt CSS document that you'd like to link into the newlycreated page

Create Document/Template— This option is accessible when a layout contained within the Starter

Page (Basic) category is selected from the Page from Sample type The option allows you to insert thepage as either a single document or as a sitewide template

Help— The option launches Dreamweaver's Help window with the New Document dialog box as the

indexed selection

Preferences— This option launches the Preferences dialog box with the New Document category

selected Use this option to change preferences for creating new documents These options will becovered in Chapter 4, "Defining Preferences."

Get More Content— This option launches the Dreamweaver Exchange Use this feature to search for

more prebuilt skeleton, page design, and template pages

The focal point of the New Document dialog box lies in the categories and associated page types These areoutlined next:

Blank Page— Includes skeleton files for creating new HTML, HTML Template, Library Item, XSLT,

ActionScript, CSS, JavaScript, XML, ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB,

ColdFusion, ColdFusion Component, JSP, and PHP pages

Blank Template— Includes skeleton files for creating new dynamic template pages for ASP

JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, HTML, JSP, and PHP

Page from Template— Choose this category to browse templates that you build As you'll see in

Chapter 3, "Dreamweaver Site Management" and Chapter 14, "Working with Templates," user-builttemplates are stored within defined sites When this option is selected, the Page Type category

outlines your list of defined sites Choosing a defined site will reveal any templates associated withthat site within the Template for Site "<selected site>" list

Page from Sample— Select this option to reveal a subcategory of prebuilt CSS, Frameset, Themed

Starter Pages, and Basic Starter Pages within the Sample Folder list Choosing a folder from theSample Folder list reveals numerous prebuilt pages within the Sample Page list The four types ofsample folders that you'll see here are outlined in the following list:

CSS Style Sheets— Includes a myriad of prebuilt style sheets that you can use to add style and

flare and even structure to your web pages We'll cover this topic in more depth in Chapter 6,

"Page Formatting Using Cascading Style Sheets."

Framesets— Includes a number of prebuilt frameset pages that you can use We'll cover this

topic in more depth in Chapter 8, "Working with Frames and Framesets."

Starter Page (Theme)— Tastefully designed, the Themed Starter Pages category includes

various web pages that you can use to get your creative juices flowing By default, Dreamweaverships with entertainment, health and nutrition, lodging, personal training, restaurant, spa, andtravel themed starter pages

Starter Page (Basic)— Similar to the CSS Page Designs category, this category features some

basic commerce, data, text, image, and UI page designs As you'll see in Chapter 14, all

selectable page types can be inserted as either a simple page or a template by selecting theTemplate option button just below the description window

Other— Includes skeleton files for creating new ActionScript Communications, ActionScript Remote,

C#, EDML, Java, text, TLD, VB, VBScript, and WML pages

Now that you've gotten a thorough tour of the New Document dialog box, let's use it to create a new HTMLpage that we can use throughout the chapter To create a new HTML page, follow these steps:

1. Choose the Blank Page option from the Category pane.

2. Choose the HTML option from the Page Type list

3. Choose the <none> option from the Layout list, and then click the Create button The New Documentdialog box will close and a new HTML Document window instance will appear, similar to Figure 2.2

Figure 2.2 A new Document window instance can be created from the Blank Page,

HTML category within the New Document dialog box.

[View full size image]

4. If necessary, switch to Design view by clicking the Design button within the Document toolbar, andthen immediately save your document (choose File, Save) to the folder that contains the examples forthis chapter (C:\VectaCorp\Chapter02) I'll call mine index.html

Tip

Most web-hosting providers accept default files named index.html, home.html, and default.html.Naming your starting page with one of these three names guarantees that you won't have to type afully qualified path such as http://www.vectacorp.com/mystartpage.html Instead, becauseI've saved my filename with a standard default page name (index.html), I can limit the URL

reference to www.vectacorp.com Again, because most web-hosting providers use index, home, anddefault as standard start page names, falling in line with this naming convention makes referencingyour domain easier in the long run