Set Up a Basic Web Page in Dreamweaver MX 2004
This chapter is from the book
This chapter is from the book
This chapter is from the book
In the first chapter, we got acquainted with the Dreamweaver interface. In the second chapter, we learned how to set up a local site to keep track of all our files. This chapter describes how to use the Document window to create and save Web pages ( Figures 3.1 and 3.2 ).
)
Figure 3.1 The McSweeney's Web site (www.mcsweeneys.net) uses mostly text, but it still looks snappy.
)
Figure 3.2 Gravity7 (www.gravity7.com) is the home of designer Adrian Chan.
To start with, I'll walk you through creating a simple Web page that uses tables, links, images, and text. We'll also learn how to adjust the properties of a page, including the title and the page background.
In this chapter, we'll learn how to:
- Open a page
- Create a new page
- Add content to a page
- Set the page title
- Adjust the page properties
- Save your work
- Save a copy of your page
- Preview the page in a browser
- Print the page from the browser
- Close the file
This chapter also describes how to select and use colors in Dreamweaver. I'll refer to this material throughout the book.
Creating New Files
You create and open files in Dreamweaver the same way you would in any other program; however, Dreamweaver initially pre sents you with more options.
The Standard toolbar
Dreamweaver features a Standard toolbar you can use for performing basic steps like creating new files or copying text.
To display the Standard toolbar
-
From the menu bar, select View > Toolbars > Standard (
Figure 3.3
). The Standard toolbar will appear (
Figure 3.4
). Windows users can also undock this toolbar (
Figure 3.5
).
Figure 3.3 Select View > Toolbars > Standard from the menu bar.
Figure 3.4 The Standard toolbar appears below the Insert bar.
Figure 3.5 The Standard toolbar lets you perform common file and editing functions. Here, I've undocked the toolbar by dragging its handle away from the other toolbars. You can redock it by dragging its handle and re-stacking it with the other toolbars at the top of the window.
)
)
)
Using the Start page
When you start Dreamweaver MX 2004, a screen called the Start page appears in lieu of a blank HTML file ( Figure 3.6 ). This screen offers you a selection of documents you can open or create with a single click: Open a Recent Item; Create New, a list of different file types you can use to create Web documents; and Create From Samples, a variety of starter pages you can save and modify.
)
Figure 3.6 The Start page offers you the option of creating new files, opening recently used pages, or selecting a starter page to work with.
To create a new page from the Start page
-
For a basic Web page, click HTML under the Create New column (
Figure 3.7
).
Figure 3.7 Here's a detail of the Start page, listing the selections of new documents you can create. Click More . . . to list even more file types to work with.
To choose one of the other file types, click on its icon. Those file types include the database default file types of ColdFusion, PHP, ASP JavaScript, ASP VBScript, ASP.NET, and JSP, as well as CSS (for external style sheets that define the CSS over several pages or a whole site).
If you'd like to start with a file whose format isn't on the Create New list, click More. The New Document dialog box will appear; see the next few sections for details about the options there.
)
Creating new pages and using the New Document dialog box
You can create a new file at any time using the New Document dialog box. You can jump straight to the New Document dialog box even if the Start page is open.
To create a new file
- From the Document window menu bar, select File > New, or press Ctrl+N (Command+N). The New Document dialog box will appear (
Figure 3.8
).
Figure 3.8 The New Document dialog box presents a daunting array of choices. For a regular old Web page, select Basic Page, HTML.
- To create a regular HTML file, click on Basic Page in the Category list and HTML in the Basic Page list.
- Click Create. A new, blank document will appear.
)
What are all those other file types?
Besides HTML, you can create and edit many other types of files in Dreamweaver ( Figure 3.9 ). If you're not working with a database, you'll probably stick with HTML. If you need to create another type of file, such as ASP, you can edit the page as you would any other. If you're working on a dynamic site, talk to your database team to find out what other settings to use.
)
Figure 3.9 These other page types are used with databases, dynamic content, CGI scripts, and other server-side technologies.
Aside from basic and dynamic blank pages, you can also choose from a variety of starter designs, as described in the next section. These are listed in the various Page Designs categories, as well as under Framesets and CSS Style Sheets.
Framesets are page designs that incorporate frames. Frames require a bit more file management than regular pages, because they're comprised of several documents displayed in one browser window. These are described in Chapter 13. CSS Style Sheets and Page Designs (CSS) start you off with some type styles, as described in Chapter 11.
If you select Other in the Category list, you can choose other document formats, including plain text and a variety of script file types ( Figure 3.10 ).
)
Figure 3.10 The Other category lists script file types and plain text files, among other things.