Ludzie pragną czasami się rozstawać, żeby móc tęsknić, czekać i cieszyć się z powrotem.
You may want to deselect the Refresh Remote File List Automatically
option for improved speed.
24
Chapter 2: Quick Site Setup
9 After you’ve entered the appropriate information, click Next.
10 Don’t enable file check-in and check-out for the Trio Motors site.
If you and your co-workers are working together on a larger site, the file check-in and check-
out feature helps to prevent you from overwriting each others’ files. Also, if you or your co-
workers use Macromedia Contribute, you must enable file check-in and check-out. For the
Trio Motors sample site, though, you don’t need this feature.
11 Click Next.
12 Click Done to finish setting up the remote site.
13 Click Done again to dismiss the Manage Sites dialog box.
Upload your local files
After setting up your local and remote folders, you can upload your files from your local folder to
the web server. To make your pages publicly accessible, you must upload them even if the web
server is running on your local computer.
To upload your pages to a remote site:
1 In the Files panel (Window > Files), select the site’s local root folder.
2 Click the blue Put Files arrow icon in the Files panel toolbar.
Dreamweaver copies all the files to the remote folder you defined in “Define a remote folder”
on page 23. This operation may take some time, as Dreamweaver must upload all the files in
the site, including multiple versions of some files for use with multiple tutorials.
3 Open your remote site in a browser to make sure everything uploaded correctly.
Define a Dreamweaver site
25
26
Chapter 2: Quick Site Setup
CHAPTER 3
Tutorial: Creating a Static Page
This tutorial explains how to create and save a page in Macromedia Dreamweaver MX 2004,
then add text, images, and colors to the page.
Before you begin this tutorial, set up your site by following the instructions in “Quick Site Setup”
on page 17.
This tutorial contains the following lessons:
• “Open and save a new page” on page 27
• “Add an image placeholder” on page 29
• “Set a page title” on page 31
• “Add styled text” on page 31
• “Add images” on page 35
• “Set background colors” on page 36
• “Further reading” on page 37
Open and save a new page
After setting up a site, you can create web pages to populate it.
If you’re creating your own pages from scratch, you can use the Dreamweaver start page to create a
new page, or you can select File > New to choose from a wider range of predesigned page layouts.
This tutorial, however, assumes that you’re using the layout.html page design provided as part of
the Dreamweaver sample content.
27
To open a page:
1 In the Files panel, expand the 1-Design folder and double-click the layout.html file.
The layout.html page appears in a new Document window. The page is filled with placeholder
“Lorem ipsum” text to show how the page design will look when text is added to it.
2 Save the page with a new filename.
To save your page:
1 Select File > Save As.
2 In the Save As dialog box, browse to and open the 1-Design folder inside the site’s local
root folder.
Reminder: the local root folder is the folder you created when you set up the site in “Define a
local folder using the Site Definition Wizard” on page 19.
3 Enter the filename index.html.
4 Click Save to save the file in the 1-Design folder.
The filename now appears in the title bar of the window, in parentheses, after the words
“Untitled Document.”
28
Chapter 3: Tutorial: Creating a Static Page
Add an image placeholder
Now create a placeholder to stand in for the images that you’ll add later.
To add an image placeholder:
1 Click at the beginning of the main text column, just before the word “Title,” and press Enter
(Windows) or Return (Macintosh) to create a blank line before the title. Then click in the new
blank line.
The insertion point should now be on a line by itself. If it isn’t, place the insertion point on the
blank line.
2 Select Insert > Image Objects > Image Placeholder.
3 In the Image Placeholder dialog box, enter a name for the placeholder (such as SplashImage).
Note: Placeholder names must start with a letter and can contain only letters and numbers.
4 Still in the Image Placeholder dialog box, enter a width and height. If you’re creating the Trio
Motors page, enter 176 for width and 190 for height.
5 Leave the Color and Alternate Text text boxes blank.
Note: It’s important to provide alternative text for some kinds of images, to make the information
supplied by the image accessible to visitors who use screen readers or text-only browsers.
However, for images that don’t provide information, you should use an empty alt attribute. When
you leave the Alternate Text text box blank, Dreamweaver adds an alt="" attribute to the img tag.
Add an image placeholder
29
6 Click OK.
A gray box with the specified dimensions appears. This is a placeholder for an image, often
used to help you lay out pages when the final images aren’t ready yet.
7 Click in the “Lorem Ipsum Dolor” heading at the top of the page. In the tag selector at the
bottom of the Document window, select the <h1> tag, and press Backspace (Windows) or
Delete (Macintosh).
The text and the h1 tag are deleted.
8 Leaving the insertion point where it is, repeat steps 2 through 6 to insert another image
placeholder. This time, name the placeholder Banner, and enter a width of 600 and a height of
41. Later, you’ll replace this placeholder with a banner image across the top of the page.
9 Save your page.
30
Chapter 3: Tutorial: Creating a Static Page
Set a page title
You can set a variety of properties for a page, including its title, background color, text color,
and so on. (To set page properties, select Modify > Page Properties.) But if you just want to
set the page title (the title that appears in the browser’s title bar), you can do that in the
Document toolbar.
To set a page title for your page:
1 If the Document toolbar isn’t already visible, select View > Toolbars > Document.
The Document toolbar appears at the top of the Document window.
Show Code View
No Browser/Check Errors
Show Code and Design Views
File Management
Show Design View
Preview/Debug in Browser
View Options
Server Debug
Document Title