Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Defining Your Site and StructurePackin' Up and Heading Out

Getting dropped off at basic can be hard on mom, but let's get going. If you're going to make it through boot camp, there are certain things you've gotta bring with you, and web design is no different. While coffee is always a great start, there are a few other things you need to prep and packnamely, you need to define a Dreamweaver site and organize your structure.

Before we start, Dreamweaver should be running, with no open files. With nothing open, you should be looking at Dreamweaver's Start Page. Ready? Okay, let's get started.

Defining the Site

If you recall from Chapter 4, the first thing you have to do before anything else happens is define a site in Dreamweaver. When we looked at this topic before, it was pre-basic training. Now you're actually in the field with your boots on the ground, so you'll see how site definition works with a real site.

Before anything else happens, you have to define a site in Dreamweaver.

Stowin' gear starts right here:

Creating Site Folders

Once your site is defined, Dreamweaver's Files panel loads your site (choose Window > Files if you don't have the Files panel open). However, because your site is empty, there isn't a whole lot to look atso we'll create a basic site structure directly in the Files panel. In fact, this site structure will be the same one suggested back in Chapter 3.

You can create a site's structure directly in the Files panel.

If defining a site is like packing up your gear, then creating the site structure is like getting your footlocker, duffle bag, and backpack readyyou're getting containers ready to hold your site's content. Leave the suede designer suitcases at homethey don't cut it in the army, son!

In addition to defining your site structure in Dreamweaver's Files panel, you can define it in Windows Explorer (Windows) or the Finder (Mac). Just make sure to refresh the Files panel when you come back to Dreamweaver.

Here's how to create a site structure:

1.

In the Files panel, right-click (Windows) or Control+click (Mac) and choose New Folder from the menu that appears. Name the folder htm and press Enter (Windows) or Return (Mac). Noteworthy You can use the Files panel to open files, too. Just make sure you're looking at the correct site (use the Show menu at the top right of the panel); then double-click the file you want to open. You'll use this folder to store all your web pages. Next, you'll create another folder for images.

2.

Click the topmost folder in the Files panel (here, it's Site My First Site); then right-click (Windows) or Control+click (Mac) and choose New Folder again. This time, name the folder img.

Designing Your Site Using Dreamweaver Design Files

The moment has arrived: It's finally time to create your first page. To get started, you'll use Design Files, which are prebuilt pages that come with Dreamweaver. Each Design File provides a layout, plus sample graphics and text, all ready for you to work withthey're the perfect place to start if you're new to the web design world. There are lots of Design Files to choose from, but we'll keep things simple here by sticking with a straightforward example.

Chapter 13.

So are you ready to go? Saddle up your gear and fasten that chin strap!

Check out dreamweaver-templates.org, where you'll find tons of prebuilt Dreamweaver pages to help you get started.

To use a Design File, follow these steps:

1.	From the Start Page, click Page Designs (CSS) in the Create from Samples column. The New Document dialog box appears with the General tab displayed and the Page Designs (CSS) category selected in the Category list. If you're not using Dreamweaver's Start Page, just choose File > New and then click Page Designs (CSS) in the Category list in the New Document dialog box. Start Your Mission With Dreamweaver's Start Page By default, whenever you start Dreamweaver (or whenever you don't have any files open), the Start Page appears. If you find this window vying a little too much for your attention, you can disable it. To turn it off, click the Don't Show Again check box at the bottom left. The next time Dreamweaver launches, the Start Page won't appear. If you've turned the Start Page off and want to get it back, you can do so through Dreamweaver's preferences. 1. Choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac). 2. Make sure the General category is highlighted on the left and click Show Start Page in the Document Options section at the top.
2.	In the Page Designs (CSS) column, choose Halo Left Nav. Noteworthy Dreamweaver offers many other Design Files besides those in the Page Designs (CSS) category. In the New Document dialog box, you can explore the CSS Style Sheets, Framesets, Starter Pages, and Page Designs samples, which are all available from the Category list in the New Document dialog box. Dreamweaver displays a preview of the page at the right, with a description of the page below. [View full size image] Imminent Doom If you navigate outside your site's local root folder when you're saving, links to dependent files (such as graphics and style sheets) will be lost when you upload your site to your web server. It's very important to save all your files within a Dreamweaver-defined site.
3.	Click Create. Saving Savvy When you work with Dreamweaver's Design Files, usually you'll be prompted to save as soon as you create them. However, when you're building a page from scratch, it'll be up to you to save on your own. Saving in Dreamweaver is no different than saving in any other programjust choose File > Save. When you're saving your files, steer clear of special characters, punctuation, and spaces. Most web servers don't understand them, and they may prevent your pages from being displayed correctly. Here's a neat feature in Dreamweaver: If you've made a change to your page and have not yet saved it, an asterisk appears on the document tab and in the title bar beside the file name. This is just a friendly reminder letting you know that the document has been changed and hasn't yet been saved. Once you save the file, the asterisk disappears. Chapter 3 that will work just as well. If you like, you can switch Dreamweaver to use , but be carefulbuilding a site can get frustrating if you have a mix of pages, some using l and others using , especially when you start working with hyperlinks. Make things easier on yourself by sticking with either l or . Use the New Document category of Dreamweaver's preferences to set the default extension that you want to use.

5.

In the Copy Dependent Files dialog box, click Copy to bring all the dependent files into your site.

The Files panel will now list your 83 file, but it may not list the dependent files you just copied. That's because the panel needs to be refreshed.

6.

Click the Refresh button at the top of the Files panel to have the dependent files appear.

Next, you'll give your page a title, which will appear in your visitor's browser title bar.

7.

On the Document toolbar, highlight the Untitled Document text in the Title field, type a new title, and then press Enter (Windows) or Return (Mac).

Keep in mind that the page title is also used when a visitor bookmarks your site, so you may want to make your title descriptive, to make it easy for surfers to find your site again in their list of Favorites.

Starting From Scratch: Creating a Blank Page

Often, you won't be starting your work with a Dreamweaver Design File, but creating your pages from scratch instead. Creating a page from scratch may seem a bit daunting at first, because it's hard to know where to start, especially if you're new to web site design. At least with a Design File, you have something to work with. Now you're staring down a page that looks like the Winnipeg frontier in July.

But fear not. In the next chapter, you'll find out how to build your own layouts from scratch using Dreamweaver's CSS layers. In the meantime, though, you may want to know how to create a brand-new, blank document.

To create a blank page, follow these steps:

Dreamweaver allows you to work with many document types and technologies, but nine times out of ten, you can stick with the Basic Page category and choos89 for the pages you create.

1.

Ctrl+click (Windows) or Command+click (Mac) each of your GIF and JPG files.

2.

Drag the files into your img folder.

The Update Files dialog box appears. Because the images you're moving are referenced from both the emx _ nav _ left.css file and the 83 file, Dreamweaver asks if you want to update the links.

3.

In the Update Files Dialog box, click Update.

1.

To preview your page, choose File > Preview in Browser; then select your browser.

It's a good idea to have several current browsers set in Dreamweaver and to preview your work often in all of them.

Periodically view your pages in a variety of browsers to see how they'll look to your visitors.

2.

You may be prompted to save. Make sure you do so.

Dreamweaver opens the page in your browser, giving you a much clearer idea of what your visitors will see when they view your page. You'll also see the title that you added to your page earlier in the web browser's title bar.

I like to keep the page I'm working on open in my browser as I go. I also sometimes run several browsers simultaneously, all with the same page open, so I can see how the page is being treated by each browser.

Previewing your work is an absolute must. Remember: Users don't blame their browsers when a web page doesn't workthey blame the web page.

Adding Browsers to Dreamweaver

Popular Web Browsers" in Chapter 3). Then follow these steps to add more browsers to Dreamweaver:

[View full size image]

The browser is added to the list of browsers.

If you set the browser to be the primary browser, you'll see the F12 (Windows) or Option+F12 (Mac) shortcut beside the browser's name. Use this shortcut to automatically launch the browser and preview your page. Similarly, for any browser set as the secondary browser, you can use the Ctrl+F12 (Windows) or Command+F12 (Mac) shortcut.