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

1.

Open the Files panel (Window > Files).

2.

Do one of the following:

To create your dummy file at the top level (the root level) of your site, right-click (Windows) or Control+click (Mac) a blank part of the panel and choose New File.

To place your dummy page in a particular folder, right-click (Windows) or Control+click (Mac) directly on the folder's icon and choose New File.

Dreamweaver creates an empty dummy page for you in your site.

Remember that you can always drag documents around in the Files panel to reorganize them, so if you created your dummy file in the wrong location, just drag it into the right folder.

Imminent Doom

Absolutely avoid special characters in file and folder names. There's a very high chance that they won't be interpreted properly online. Also avoid using spaces in file and folder names. Even though they're replaced by %20, it's better to err on the side of caution.

3.

In the Files panel, name your page in accordance with a page needed in your site structure.

For example, if you know you'll need a page in your htm folder called services, then name your new file accordingly. Also, make sure to set the extension to either or l, and remember to be consistent!

You've now created a blank page that will hold the place of your real services page, which hasn't been created yet. If you open your dummy page (by double-clicking in the Files panel), it will be empty. You'll be using this empty page as a placeholder when you create your hyperlinks.

4.

Continue creating new files and naming them accordingly until you've created your entire site structure.

When you're done, you'll have an entire web site made up of empty, dummy pages. Well, it's not really a web site yet, because none of the pages connect to each other. That's up next.

5.

Open the page that contains the layout design that you want to use throughout your site.

This is the page that you've been working on all along, which contains your graphics, text, and layout that you plan to use as the basis for other pages in your site. You'll now set hyperlinks on your page to the dummy pages in your site.

6.

Select the first image or piece of text on your page that you want to set a hyperlink for.

Typically, you'll select the first button on your main navigation bar, but you could select any text or graphical element that will link to another page in your site. Really, it doesn't matter where you begin, as eventually you'll be getting to all the hyperlinks on your page.

Noteworthy

Of course, if you know the path to the file you're linking to, you could type it into the Link field by hand. Be careful though. One missed character or a typo, and your link won't work.

7.

In the Property Inspector, click the Browse for File icon beside the Link field.

8.

In the Select File dialog box that appears, navigate to and select the web page that you want the text or button to link to; then click OK (Windows) or Choose (Mac).

Dreamweaver creates a link to the dummy web page. Of course, right now the page is empty. What's important here is the file name of the pageyou're building hyperlink paths to the pages in your site.

9.

Continue setting the hyperlinks in your page that will connect to other pages in your site. When you're done, save your file.

For example, set the links for your main navigation bar and other page elements, so that all links from your page have been set.

10.

Test your design in various browsers and platforms to make sure it works.

It's better to catch a design flaw at this stage, where it appears in only one file, than at the end, when the design's been used throughout countless pages of your site.

Imminent Doom

If you begin overwriting dummy files in your site before building your initial page design exactly as you want itthis includes inserting text, placing graphics, and setting all the necessary hyperlinksthen you'll have to open each page in your site one at a time and manually make any adjustments. Depending on the size of your site, this could be anywhere from an afternoon's worth of work to several days'. Be sure that your initial page design is exactly what you want before rolling it out across your site.

1.

From your original design page, choose File > Save As.

2.

In the Save As dialog box that appears, select the first dummy file in your site's structure; then click Save.

You're overwriting the first dummy file with your design page. The empty page will be replaced with your design page, but the file name (which was used to establish hyperlinks) remains.

3.

Dreamweaver will ask you to confirm that you want to overwrite the file. Click Yes to continue.

The empty dummy file is replaced with the layout design page.

4.

Choose File > Save As again and select the next file in your site's structure. Click Save and, when prompted, click OK to overwrite the dummy file.

5.

Continue overwriting the dummy files in your site structure until they've all been replaced with your design page.

When you're done, you'll have a fully working web site. Congratulations!

6.

Preview your site in your browser to see how it looks. Click your navigation buttons to go to the various pages in your site to make sure your links are working.

Once your site's humming, you're ready to insert each page's unique content.

7.

Open each page and insert the appropriate content on each.

For example, on your home page, you'll probably want some kind of welcome message. On your products page, you can insert the appropriate graphics and text for your products, and so on.

Just the Gist

Understanding Hyperlink Paths

Absolute paths point to their destination by using a full URL, such as [http://www.tentonbooks.com/dw/paths].

Document-relative paths exclude the part of the URL that is common to the link's starting point and destination.

Root-relative paths always begin by returning to the site's root folder; then the path leads down through the structure to the link's destination.

Creating Hyperlinks

To link to another page in your site, use the Browse button beside the Link field in the Property Inspector.

When linking to another web site, be sure to enter the site's full URL (including http://) in the Property Inspector's Link field.

To create a hyperlink to an e-mail address, enter mailto: and then the e-mail address that you want to link to.

Insert and link to anchors to provide navigation to different locations within a page.

Formatting Hyperlinks

To begin formatting the look of your hyperlinks, use Dreamweaver's Page Properties dialog box.

Because hyperlink formatting uses Cascading Style Sheets, you can make further edits to your link formatting through the CSS Styles panel.

Use rollover images on your page, replacing one graphic with another, to add interactivity to your pages.

Adding Hyperlink Navigation Features

To create navigation bars quickly, use Dreamweaver's Navigation Bar command, which allows you to set rollovers and hyperlinks for each button you include. To use your nav bar on other pages, make sure to save it as a library item.

Use an image map to place multiple hyperlinks, called hotspots, on a single image. This saves you from having to slice an image into smaller pieces when more than one link is needed.

Building a Linked Site Structure

To build a site that has both a solid structure and a consistent design, begin with a single, well-designed page. Then create dummy pages in your structure as placeholders for the real pages that will replace them once they've been designed.

From your page that contains the initial layout, create hyperlinks to the dummy pages in your site.

Replace all the dummy pages in your site by overwriting them with the page that contains your design. Then add your actual content to your pages.