Building Web Sites All-in-One For Dummies® (39 page)

•
Text:
Another place with options for formatting text. Special types of formatting are available here, such as headings and definition lists.

All the elements available on the Insert bar are available via the Insert menu. You can also add more categories by going to the Dreamweaver Developer Center at
www.adobe.com/devnet/dreamweaver
and finding extensions.

Creating a Web Site with Dreamweaver

Now it's time to set up your first Web site. Although you can work with Dreamweaver without setting up a site, it's really a better idea to set one up. Dreamweaver creates a log of information about your site and the files included in it, called a
site cache.
This enables Dreamweaver to do many things. It can make sure that paths to linked files are correct; synchronize your content on your live server; and perform other, helpful, site management tasks. With that being said, it's time to set up your site.

Before you start working in Dreamweaver, we recommend having a Web host and a URL. Book I has information about choosing hosts and URLs.

1.
Create a folder on your computer and name it after your project.

This will be your local site; all site files will go in this folder. (Dreamweaver uses the term
local root folder
to refer to this.)

2.
Create a folder inside your project folder and call it Production.

This folder is for all the working files you create while working on your site. Don't post this to the server when you publish. Use the cloaking feature to keep it local. (Refer to the earlier “Collapsed view” section for instructions on how to set this up in the Files panel.)

3.
Create a folder inside the Production folder and call it Images.

This is where all your site images go. (Dreamweaver refers to this as your
Default Images Folder.
)

4.
Create folders for the major areas of your Web site.

For the About Us area of your Web site, create an About folder; for the Products area of your Web site, create a Products folder; and so on. Make sure you follow Web-legal naming conventions.

5.
Create a folder for your included files.

These files include CSS, JavaScript, and any other special files that you want to keep organized.

6.
Launch Dreamweaver.

7.
In the Create New menu of the Welcome Screen, select Dreamweaver Site.

The Site Definition dialog box appears.

8.
In the Site Definition dialog box, click Advanced at the top of the screen.

The Advanced view shows options for Local Info, as shown in Figure 5-13.

9.
Enter a name for your site in the Site Name field.

This name appears in the site list (not on your Web site), so make it something that you'll easily recognize.

10.
Select the local root folder.

Use the folder icon to browse to the location on your computer where you'd like to keep your local site folder. You can even create a new folder from the browsing dialog box if you need to.

11.
(Optional) Back in the Site Definition dialog box, select a default images folder.

This is a folder within the local site folder where you will place the site images.

12.
Select either the Document or the Site Root radio button to make your links relative to one or the other.

Links Relative To refers to how Dreamweaver will build links when you use the automatic linking tools. Links that are relative to the site root use the main site folder as the starting point for building the link code. Comparatively, links relative to the document use the document you're linking from as the starting point for building the link.

13.
(Optional) Make your link-checker case-sensitive by selecting the Case-Sensitive Links check box.

Be aware that if you choose to select the “case-sensitive” option that the link-checker could miss broken links due to differences in capitalization. You may find your results to be more accurate if you do not select that option.

14.
Set Dreamweaver to maintain a cache of your site files.

This is important to select for the site maintenance and synchronization tools.

15.
Click Remote Info (under Category on the left) to move to the next step — connecting to your remote host.

Connecting to the host is important. If you do not, you will not be able to publish your site to your live server.

16.
Tell Dreamweaver how to connect to your server by choosing an option from the Access drop-down menu (see Figure 5-14).

Set access to Local/Network or FTP (or one of the others if your server requires it). For the purposes of this chapter, we focus on the FTP settings because FTP is the most common access.

The information you need to input into the fields at this point has to come to you from your Web host, usually via e-mail. When you sign up for hosting services, you will be sent information about how to access your account. Some hosts will give you a user name and password to log onto their site and get the information. Other hosts will send you all the information in an e-mail. In either case, you will be looking for “FTP information.” That information is not the same as your customer login information. Be sure to look for the specific “FTP” information.

Also, be aware that buying a URL is not the same as buying hosting services. You can buy these services from different vendors or from the same vendor. It is often good to find a hosting company that also provides URLs. That way you can get everything you need from one spot. Make sure you buy BOTH a URL (your Web address) and hosting (the Internet server where your site will be located) or your site will not be available on the Internet.

When you have what you need, you can finish filling out the remaining fields in the Remote Info screen.

•
Remote Folder
(for Local/Network connections): If you are using a local/network server, you will need to enter the path to that folder in the dialog box that becomes visible when you select “Local/Network” from the drop-down menu.

•
FTP Host
(visible only if you select FTP as your access): This is the location of their server. It will look like a regular URL except that it starts with
ftp
instead of
http
. (As we mention earlier, FTP stands for File Transfer Protocol, which is how files are published to Web servers. Using the FTP tells the server what sort of communication is coming.)

Note:
Your host might be a local/network server in cases of intranets or when your Internet server is available through your local network.

Make sure you choose a host that has FTP access. Otherwise, uploading and maintaining site files can be a time-consuming nightmare.

•
Host Directory
(optional): Many hosts don't provide a directory name for you to input.

•
Login and Password:
This is the user name and password as given to you by the Web host. You get all the necessary information to log in and FTP files when you sign up for Web hosting.

• The next three check boxes are optional. Your Web host tells you whether you need to use them. If you're having trouble connecting and you're sure all the information you input is correct, ask your host whether you should be using any of these options, too.

17.
Click Test to make sure you can connect.

That's it. You're ready to build a site in the local folder and then publish it to the Internet.

Other options are also available through the Manage Sites dialog box. You can set up a test server and make settings on the types of files you wish to cloak, among other things.

Testing Your Pages and Validating the Code

When you validate your code and check it for browser compatibility or accessibility, you're making sure that it's coded so that it complies with the version of HTML or XHTML you're using, that it works in the browsers you want to target, and that your site is accessible to as many users as possible. (See Book III, Chapter 9 for more about testing usability and accessibility.)

Because of the different versions of HTML, XHTML, and browsers, make sure you decide what works best for your audience before you start coding. You can check the World Wide Web Consortium (W3C) Web site (
www.w3.org
) for more information about the versions of HTML, XHTML, and other Web programming and scripting languages.

Use any of these methods to use the built-in Dreamweaver browser checkers and code validators:

•
The Site and Commands menus:
Click these menus and select the test you want to run.

•
The Validation panel:
This panel (shown in Figure 5-15 with test results) automatically launches when you run tests using other methods, too. The arrow activates the menus of options within each tab. This is where the results of the tests and validators are displayed, along with additional information where appropriate. Double-click a line item, and Dreamweaver takes you to the error in the code; this helps you quickly locate and fix issues.

Also, the Validation panel can give the code line numbers for each error that it finds. Just turn on the code line numbers in the Code View Options by choosing View⇒Code View Options⇒Line Numbers. The line numbers are displayed in the margin of Code view.