How Do I Include One HTML File in Another Using Dreamweaver?

How Do I Include One HTML File in Another Using Dreamweaver?

One of the most popular questions I’m asked about HTML is how to include one bit of HTML code in another Web page, without having to re-write the code every time. Unfortunately, this is not possible with straight HTML. You can do it with other technology, but that usually requires that you have server technology like SSI or PHP or that you learn JavaScript.

Dreamweaver To the Rescue

Luckily, Dreamweaver recognizes that this is a very important part of Web page development. If you’ve ever built a site with more than around 10 pages, you’ll recognize the value in having shared include files that you can edit once and update your entire site.

Dreamweaver calls these include files “library” files and they are stored in the assets of your Web site in the Files tab.

Before you can create a library item, you need to create a Dreamweaver site. The library item will then become an asset available to that entire site.

Create a Dreamweaver Library Include File

  1. Open the library panel by clicking Window > Assets, and then choosing the Library button (looks like an open book).
  2. elect the portion of HTML that you want to convert into a library element. This can be a block of HTML or a section of the page in design view.
  3. Drag that selection to the library pane and drop it there.
  4. Give your library item a name that will help you remember what it is.

 

Once you have a library item, you can use it on any page in your site. Simply drag the library item to the new page, and Dreamweaver will place code there indicating that the code displayed is a library item.

Updating a Library Element

The true power in the library items is not in creating them, but in re-using them. You can place your library items on any page in the Dreamweaver Web site it is defined in. Then when you edit it, Dreamweaver will update every page that is using that library item.

  1. Open your library item for editing by double clicking on the library item in the Assets pane.
  2. Edit your library item and hit save.
  3. Dreamweaver will then ask you if you want to update all the files that use the library item. Click Update.
  4. Close the log window. That is Dreamweaver telling you what it is doing. If you have a large number of files to update, that window will remain open until they are all complete.

Once you’ve updated all the files in your site, you’ll need to upload them all to your server. If you forget to upload them, they won’t be changed for your customers.

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.