Lesson 2 Setting Up a New Site

Dreamweaver’s strength lies in its powerful site creation and management tools. You can use the software to create everything from individual pages to complete web sites. The pages you create within your site can share similar topics, a cohesive design, or a common purpose. And, once your Dreamweaver site is complete, you can efficiently manage and distribute it from within the program.

• Defining site settings in Dreamweaver CS5 or CS5.5
• Establishing local root and remote folders
• Adding pages using Dreamweaver CS5 or CS5.5
• Selecting, viewing, and organizing files with the Files panel
• Uploading and downloading files to and from your remote server

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” on page 3.

You will work with several files from the dw02lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from the supplied DVD. See “Loading lesson files” on page 3.

• 
  
  See Lesson 2 in Action! Use the accompanying video to gain a better understanding of how to use some of the features shown in this lesson. The video tutorial for this lesson can be found on the included DVD.

Creating a new site using Dreamweaver CS5 or CS5.5

In Dreamweaver, the term site refers to the local and remote storage locations where the files that make up a web site are stored. A site can also include a testing server location for processing dynamic pages. To take full advantage of Dreamweaver’s features, you should always start by creating a site.

The easiest way to create a new site in Dreamweaver is to use the Site Setup dialog box. Choose Site > New Site, and the dialog box appears.

• 
  
  You can also use the Manage Sites dialog box to create a new site. This and other functions of the Manage Sites dialog box are discussed later in this book.

In this lesson, you begin by using the Site Setup dialog box to accomplish the following tasks:

• Define the site
• Name the site
• Define the local root folder
• Set up a remote folder
• Explore advanced settings
• Save the site

By default, the Site Setup dialog box opens with the Site Settings available. The options available here will help guide you through the essentials of defining your site. The Servers, Version Control and Advanced Settings options allow you to set up local, remote, and testing servers directly.

The first screen you see in the Site Setup dialog box allows you to name your site. Avoid using spaces (use underscores instead), periods, slashes, or any other punctuation in your site name, as doing so will likely cause the server to misdirect your files.

1 Launch Dreamweaver CS5 or CS5.5, if it is not already open, then choose Site > New Site. First, you have to name the site. In the Site Name text field, type Organic_Utopia.

Next, you need to set up a local root folder, which is where Dreamweaver stores the files with which you’re currently working. The Local Site Folder field allows you to enter information regarding where you’ll be working with your files during development.

• 
  
  To ensure that the links you set up on your computer will work when you upload the site to a web server, it is essential that you store all the site’s resources in one main folder on your hard drive, then identify it within Dreamweaver. This is because the links will only work properly if all the site’s elements remain in the same relative location on the web server as with your hard drive.

2 Click on the folder icon () to the right of the Local Site Folder text field to navigate to your pre-existing files.

If you did not click on this folder and went on to the next step, Dreamweaver would simply create a new folder on your system where you could begin to create new pages in your site. In this case, you will be pointing to a preexisting folder that already has files within it.

It is important to distinguish between adding a new site (which is what you are doing now) and creating a new site from scratch. In both cases, the important part is that Dreamweaver knows where this folder is on your system. This folder is known as the root folder and will always contain the content that will eventually be your website.

3 Navigate to your desktop and locate the dw02lessons folder you copied to your desktop earlier.

4 Select the dw02lessons folder. On the Windows platform, click Open to open this folder, then press Select (Windows). On the Mac OS platform, press Choose (Mac OS) to choose this as your local root folder. The field now shows the path to your newly defined local root folder.

5 Click on the Servers tab. This section allows you to define the remote server where your website will end up being hosted. Take a moment to read the heading in the dialog box. Note that it says you do not need to fill in this information to begin creating a website. It is only necessary if you are connecting to the Web.

You are not connecting to the web in this lesson, but you should take a look at the screen anyway to understand the information needed.

6 Click on the + button and the Basic site settings window appears. Here there are fields for Server Name, Connect Using, FTP Address, Username and Password, along with other options. These settings allow you to choose both a destination and a method (FTP being the most common) for Dreamweaver to use to transfer files.

7 As noted earlier, you do not have to define your remote folder at this stage. Dreamweaver allows you to define your remote folder at a later time, such as when you’re ready to upload. Click on the Advanced tab. Click on the Server Model menu in the Testing Server section. Here there are choices for different scripting languages such as PHP and Asp pages. If you are an advanced user, this is where you would set up the connections to your testing server.

Again, you won’t be making any changes here, so press Cancel.

8 Click on the Version Control option on the left to access Subversion settings. Subversion, a VCS or version control system, keeps track of changes made to files, enabling users to track changes and return to previous versions of any file. For this exercise, make sure the Access pull-down in this window is set to None, as you won’t be using Subversion.

You’ve now completed the site setup process, using basic settings. Don’t close the Site Setup dialog box yet, though, as you’ll now explore the options found under the Advanced Settings option.

Advanced site-creation options in Dreamweaver CS5 or CS5.5

Chances are if you are new to Dreamweaver or web design you won’t need these advanced settings. If you are in this category, press Save and skip to the Creating Pages section. Other users may be curious what these settings are and should proceed.

1 Click on the arrow next to Advanced Settings in the Site Setup dialog box.

2 From the categories listed below Advanced Settings, choose Local Info.

The information you set in the Local Info window identifies your Default Images folder, what your links are relative to, and a Web URL to be used if you don’t have a remote server defined. One of the more important Local Info settings, though, is case-sensitive link checking.

The case-sensitive link checking feature ensures that your links will work on a Unix server, where links are case-sensitive. If you’re using a Windows or Mac OS server, this doesn’t matter as much, but it is a good idea to follow the strict naming and linking conventions of a Unix system in case you ever move your site to a different server.

The remaining categories to the left of the Advanced tab of the Site Setup dialog box help to define your site’s production, collaboration, and deployment capabilities. They include the following:

Cloaking allows you to specify file types or specific files that you do not want uploaded to the server.

Design Notes is a collaboration tool that keeps notes regarding the development of the page or site.

File View Columns is an organizational tool. If you want to share the custom columns with others, you must enable Design Notes as well.

Contribute is a separate application that enables users with basic word processing and web browser skills and little or no HTML knowledge to create and maintain web pages.

Templates can be automatically updated with rewritten document paths using this option.

Spry is a JavaScript library for web designers. It allows designers to build pages that provide a richer experience for their users.

At this point, you are finished defining your settings, so press Save; Dreamweaver creates a site with the settings you have defined.

You are now ready to build pages for your web site.

Adding pages using Dreamweaver CS5 or CS5.5

Dreamweaver contains many features to assist you in building pages for your site. With these features, you can define properties for those pages, including titles, background colors or images, and default text and link colors.

The first step for creating a new page correctly was taken when you defined the site in the last exercise. By defining the root folder, Dreamweaver will always create new pages in your site automatically. These pages are now visible in the Files Panel in the lower right of your screen.

1 Choose File > New. The New Document dialog box opens.

2 You can create a new page using a predesigned layout, or start with a blank page and build a layout of your own. In this exercise, you’ll start with a blank page. Click on the Blank Page category on the left side of the New Document dialog box.

3 In the Page Type column, you can select the type of page you want to create (for example, HTML, ColdFusion, and so on). Select HTML.

In the Layout column, you can choose to base your page on a prebuilt design (created using Cascading Style Sheets [CSS], which are discussed in detail later in this book ). These predesigned layouts fall into one of two categories:

Fixed columns do not resize based on the user’s browser settings. They are measured in pixels.

Liquid columns resize if the user resizes the browser window, but not if the user changes the text settings.

4 Click on <none> in the Layout column to build the page without using a prebuilt layout.

5 Leave the DocType setting at XHTML 1.0 Transitional. The DocType drop-down menu defines the document type and compliance with different versions of HTML. XHTML 1.0 Transitional is the default setting and is suitable in most cases.

• 
  
  The Layout CSS and Attach CSS settings are irrelevant here, as you didn’t choose a CSS-based layout for this page.

6 Press Create to create a new, blank HTML page. You will learn more about Workspaces a bit later, but to make sure you are working as we are choose Window > Workspace Layout and choose Reset Designer. Your screen should now look like ours.

Saving a page to your site in Dreamweaver CS5 or CS5.5

You should get accustomed to saving pages to your local root folder early and often. It is very important that you store all your site’s resources in one main folder on your hard drive so that the links you set on your computer will work when your site is uploaded to a server.

1 Choose File > Save.

2 In the Save As dialog box, you should be saving within your dw02lessons folder which was defined earlier in the Site Settings.

Note that if this is not the case, navigate to your desktop and locate the dw02lessons folder.

3 In the Name text field, name your file about_us.html.

4 Click Save to save the page in your local root folder. In the Files panel note that the file about_us.html has now been added. Again, this is why site settings are so important in Dreamweaver.

Defining page properties using Dreamweaver CS5 or CS5.5

Now that you’ve created a page in Dreamweaver, you’ll use the Page Properties dialog box to specify its layout and formatting properties. You use this dialog box to define page properties for each new page you create, and to modify the settings for pages you’ve already created.

1 Use the Page Properties dialog box to set page titles, background colors and images, text and link colors, and other basic properties of every web page. To access the Page Properties dialog box, choose Modify > Page Properties, or use the keyboard shortcut Ctrl+J (Windows) or Command+J (Mac OS). The Page Properties dialog box appears, with the Appearance (CSS) category selected by default.

Settings found in the Appearance (CSS) category will automatically create a Cascading Style Sheet that defines the appearance of your page. Using a CSS to define these page properties adds flexibility to your design, as styling can be changed more easily, and more universally, than if your defaults are defined using HTML code.

2 The Page font and Size fields define the default appearance of text on your page. For now, leave these settings at their defaults. You’ll be styling type with CSS in later lessons in this book.

3 The Text color option allows you to set a default color in which to render type. To set a text color, click on the color swatch next to Text; the Swatches panel appears. You can choose your default text color by clicking on the appropriate swatch from the Swatches panel. Try this by clicking on any color swatch, and press Apply to apply your desired default text color.

You can also type the hexadecimal notation for your desired color into the text field. Type the hex code 666666 in the text field to specify a dark gray as the default text color.

• 
  
  You’ll see the effects of this change later in this lesson, when you add text to your page using the Files panel.

4 Use the Background color option to choose a background color for your page. Click on the color swatch next to the Background text field; the Swatches panel appears. You can choose your background color by clicking on the appropriate swatch from the Swatches panel. Try this by clicking on any color swatch, then press Apply to see the results.

You can also choose the background color by typing the hexadecimal notation for your desired color into the Background text field. Type the hex code 739112 in the Background text field, then press Apply to specify a green as the background color.

5 The Background image field allows you to set a background image for your page. Dreamweaver mimics a browser’s behavior by repeating, or tiling, the background image to fill the window. To choose a background image, click the Browse button next to the Background image text field. The Select Image Source dialog box appears.

6 Navigate to the images folder within dw02lessons and select bg_gradient.gif for your page background; then press Apply. You will see the background image which is a gradient appear on the page. It stops partway, however, so you will fix this with the Repeat property.

7 From the Repeat drop-down menu, choose repeat-x. Click Apply to see the change.

• 
  
  You can also type the path to your background image into the Background image text field.

8 By default, Dreamweaver places your text and images in close proximity to the top and left edges of the page. To build in some extra room between your page edges and the content on them, use the Margin settings in the Page Properties dialog box. In the Left margin text field, type 25 to place your content 25 pixels from the left edge of the page. In the Top margin text field, type 25 to place your content 25 pixels from the top edge of the page.

The Appearance (HTML) category in the Page Properties dialog box contains many of the same settings you just defined. Setting default page attributes with HTML code, however, does not automatically create a Cascading Style Sheet, and is therefore less flexible than using CSS. For more information on this difference, see Lesson 15, “Using Legacy Tools: Frames and Tables.”

The Links (CSS) category allows you to define the appearance of linked text within your document. For more information on creating hyperlinks, see Lesson 3, “Adding Text and Images.”

9 Click on the Links category on the left-hand side and leave the Link font and Size settings at their defaults (same as Page font). This ensures that your hyperlinks will display in the same typeface and size as the rest of the text on your page.

10 Set the colors for your different link types in the following fields:

Link Color: Type #fc3 for the default link color applied to linked text on your web page.

Visited links: Type #ccc for the color applied to linked text after a user has clicked on it.

Rollover links: Type #f03 for the color applied to linked text when a user rolls over it.

Active links: Type #ff6 for the color applied when the user clicks on linked text.

11 Because you’re using CSS formatting, you can choose whether or not (and/or when) you want your links to be underlined. This is not possible with HTML formatting. Choose the default setting of Always Underline in the Underline style drop-down menu.

The Headings (CSS) category allows you to define the font, style, size, and color of heading text within your document.

12 Leave the settings in the Headings category at their defaults for now. You’ll be using CSS to style your heading text later in this book.

13 Click on the Title/Encoding category to the left of the Page Properties dialog box to expose more settings:

• Type Organic Utopia: About Us in the Title text field. This sets the title that appears in the title bar of most browser windows. It’s also the default title used when a user bookmarks your page.

• Leave the Document Type (DTD) set to XHTML 1.0 Transitional. This makes the HTML document XHTML-compliant.

• Choose Unicode (UTF-8) (Windows) or Unicode 5.1 UTF-8 (Mac OS) from the Encoding drop-down menu. This specifies the encoding used for characters in your page.

• Make sure the Unicode Normalization Form is set to None and that Include Unicode Signature (BOM) is unchecked. Both settings are unnecessary for this lesson.

14 Click on the Tracing Image category in the left part of the Page Properties dialog box. A tracing image is a JPEG, GIF, or PNG image that you create in a separate graphics application, such as Adobe Photoshop or Fireworks. It is placed in the background of your page for you to use as a guide to recreate a desired page design.

15 Press the Browse button next to the Tracing image text field. You can also type the path to your image directly into this text field.

16 In the Select Image Source dialog box, navigate to your dw02lessons folder, select the file named tracing.gif; then press OK (Windows) or Choose (Mac OS).

17 Set the transparency of the tracing image to 50 percent by sliding the Transparency slider to the left.

18 Press Apply to see the results. Tracing Images can be useful tools for building layout. Oftentimes, you can import a page mockup created originally in Photoshop or another application and use it as a visual guideline.

19 When activated, the tracing image replaces any background image you’ve added to your page, but only in Dreamweaver. Tracing images are never visible when you view your page in a browser. Now that you have a sense how the tracing feature works, you’ll remove it. Select the path within the Tracing Image field and press Delete to remove it.

20 Press OK to close the Page Properties dialog box.

21 Choose File > Save. Now that you’ve finished setting up your page properties, you’ll examine your page in Dreamweaver’s three different work view modes.

Work views in Dreamweaver CS5 or CS5.5

In this book’s lessons, you’ll do most of your work in the Design view, as you’re taking advantage of Dreamweaver’s visual page layout features. You can, however, easily access the HTML code being written as you work in the Design view, and use it to edit your pages through Dreamweaver’s other work views. You’ll switch views, using the Document toolbar.

1 In the Document toolbar, press the Design View button, if it is not currently selected. Design View is a fully editable, visual representation of your page, similar to what the viewer would see in a browser.

2 Click on the Code View button to switch to the Code view. Your page is now displayed in a hand-coding environment used for writing and editing HTML and other types of code, including JavaScript, PHP, and ColdFusion.

3 Click on the Split View button to split the document window between the Code and Design views. This view is a great learning tool, as it displays and highlights the HTML code generated when you make a change visually in Design mode, and vice versa.

4 Switch back to the Design view to continue this lesson.

A deeper look into the Files panel

You have already seen how Dreamweaver populates the Files panel when you define a new site. The Files panel is more than just a window into your root folder however, it also allows you to manage files locally and transfer them to and from a remote server. The Files panel maintains a parallel structure between local and remote sites, copying and removing files when needed to ensure synchronicity between the two.

The default workspace in Dreamweaver displays the Files panel in the panel grouping to the right of the document window.

When you chose to use the dw02lessons folder as your local root folder earlier in this lesson, Dreamweaver set up a connection to those local files through the Files panel.

Viewing local files in Dreamweaver CS5 or CS5.5

You can view local files and folders within the Files panel, whether they’re associated with a Dreamweaver site or not.

1 Click on the drop-down menu in the upper-left part of the Files panel, and choose Desktop (Windows) or Computer > Desktop folder (Mac OS) to view the current contents of your Desktop folder.

2 Choose Local Disk (C:) (Windows) or Macintosh HD (Mac OS) from this menu to access the contents of your hard drive.

3 Choose CD Drive (D:) (Windows) from this menu to view the contents of an inserted CD. On a Mac, the CD icon and the name of the CD appears in the menu.

4 Choose Organic_Utopia to return to your local root folder view.

Selecting and editing files using Dreamweaver CS5 or CS5.5

You can select, open, and drag HTML pages, graphics, text, and other files listed in the Files panel to the document window for placement.

1 Double-click on the index.html file, located in the Files panel. The page opens for editing. Click beneath the heading the lowly beet.

2 Click on the arrow to the left of the images folder to expand it and then click and drag the beets.jpg image file from the Files panel to the index.html document window. If an Image Tag Accessibility Attributes dialog box appears when you release the mouse, press OK to close it. The image is added to the open page.

• 
  
  If you have an image editor such as Photoshop or Fireworks installed on your computer, you can double-click on the space.jpg image file to open for editing and optimizing.

3 Double-click on the lowly_beet.txt file in the Files panel to open it directly in Dreamweaver.

4 Choose Edit > Select All to select all the text in this file. You could also use the keyboard shortcuts, Ctrl+A (Windows) or Command+A (Mac OS)

5 Choose Edit > Copy to copy the text to the clipboard. You could also use the keyboard shortcuts, Ctrl+C (Windows) or Command+C (Mac OS)

6 Click on the index.html tab of the document window to return to the index page. Click on your page to the right of the image to place an insertion cursor.

7 Choose Edit > Paste. You could also use the keyboard shortcuts, Ctrl+V (Windows) or Command+V (Mac OS) The text is added to the open page, beneath the image in the default text color you chose earlier.

8 Choose File > Save and then close this file.

Congratulations! You have finished this lesson. You will get a chance to work much more with text and images in the next lesson.

Self study

Using your new knowledge of site creation techniques in Dreamweaver, try some of the following tasks to build on your experience:

1 Choose Site > New Site to invoke the Site Setup dialog box, and use it to create a new local site called Practice_Site on your desktop. Make sure you understand the difference between creating an empty site from scratch (as you are doing here) and adding a preexisting site (as you did in the opening exercise of this lesson).

2 Use the File > New command to create a new, blank HTML page, and save it to your Practice_Site. Then choose Modify > Page Properties to access the Page Properties dialog box, and experiment with the background, link, margin, and title options available. Finally, switch to the Code and Design view in the document window to view the code generated by your experimentation.

Review

Questions

1 What characters should you avoid using when naming your site, and why?

2 How is the local root folder essential to the creation of your site?

3 What happens if you’ve chosen both a background color and a background image for a page within your site?

4 Where can you view, select, open, and copy files to and from your local root folder, and to and from remote and/or testing servers?

Answers

1 Avoid using spaces (use underscores instead), periods, slashes, or any other unnecessary punctuation in your site name, as doing so will likely cause the server to misdirect your files.

2 It’s essential that you store all your site’s resources in your local root folder to ensure that the links you set on your computer will work when your site is uploaded to a server. This is because all the elements of your site must remain in the same relative location on the web server as they are on your hard drive, for your links to work properly.

3 If you’ve added both a background color and a background image for your page, the color will appear while the image downloads, at which time the image will then cover the color. If there are transparent areas in the background image, the background color will show through.

4 Dreamweaver provides the Files panel to help you not only manage files locally, but also transfer them to and from a remote server. You can view, select, open, and copy files to and from your local root folder and to and from remote and/or testing servers in this panel.

Congratulations! You have finished Lesson 2, “Setting Up a New Site” using Dreamweaver CS5 or CS5.5.