29 March 2024

Slvrdlphn.com

Living loving learning

Creating a web template on Adobe Dreamweaver CC

5 min read

dreamweaver logoOne of the advantages of using Adobe Dreamweaver is its template creation.  While it is true that web templates could be made from scratch on notepad (on Windows), textedit (on Mac), notepad++, sublime text (which happens to be my favorite open source code editor. :D) etc. it does not offer the same ease of use that Dreamweaver does.

How are they different?

clone

  • On other applications you create the code for the web template on one page then you copy and paste the code on all the pages you want the code to appear, in effect creating clones.
  • In Dreamweaver you create a web template file and then apply the template to all the pages you want the code to appear.
  • When you need to make any changes to a code that needs to appear in all pages you need to make the change on all the documents you want the code to appear in.
  • In Dreamweaver you make the change on the template file (*.dwt) and once you save the file it will ask you if you want to update all affected pages.  You simply say YES or OK and the change is applied to all the affected pages.

But this can only happen if you edit the web template in Dreamweaver.  While the dwt file is editable outside of dreamweaver any changes you make then will not affect the connected files because, well, they were not connected when you made the update.

How to create a web template on Adobe Dreamweaver CC

To be quite honest, creating a web template on Dreamweaver is simplicity itself.  In my experience, the main reason why people mess it up is because:

  • they don’t pay attention and just click, click, click.
  • they’re in a hurry to get to the code, they forget about setting up the template first.

Truly, there is no need to rush because creating the template is actually a very fast process in itself.  Let’s go through it now.

  1. Set up your website first.  This is a VERY IMPORTANT STEP.  Not setting up your site first means compromising the integrity of your links.  Once you have done so your screen will look like this.  Note how the files tab now displays your website (web) in the dropdown and the local files also displays site – web.  Note:  On your file explorer/finder you will locate this in the my documents/documents folder
    site-defined
  2. file-newGo to File > New.  This will open the New Document window.  Again, allow me to reiterate that while my screencaps are those of a MacOS and the interface looks slightly different, I promise you the functions are basically the same.
  3. Here is where there might be some difference in appearance between Mac and Windows.
    1. On a MacOS it is as simple as making sure you are at NEW DOCUMENT then selecting HTML template then clicking CREATE.
      web-template
    2. On Windows there are more choices on the left, which could get confusing.  Nevertheless, just make sure to select HTML template, also, then click on CREATE.
    3. Note that in both cases you chose an HTML TEMPLATE.  That is completely different from a regular HTML file.  And you will see why and how in the succeeding screens.
  4. Once you’ve clicked on CREATE Dreamweaver will now look something like this.  If the window looks different, like it is a different color, for example, not to worry.  You can change the appearance in preferences.
    web-templatecode
  5. The next step will be to define the basic layout elements of your site in the body tag.  We don’t need to put any content in, just define the elements – header, logo, nav, container, and footer.
    basic-layout
  6. containerNext we put in the editable region.  This is what makes the HTML template a template.  Make sure your cursor (that blinking thing that happens on the screen when you point your mouse to a specific spot) is located between the open and close div of the container.  Then go to your menu bar and go to INSERT > TEMPLATES > EDITABLE REGION.
    editable-region
  7. In the next dialogue box replace EDITREGION3 with the word content.
    new-editable-region
  8. When you look at your code now it will look like this.  Hey, look!  You now have an editable region! 😀
    content
  9. Now press CTRL+S (on Windows) or COMMAND+S (on a MacOS) to save.  This will open the SAVE AS TEMPLATE window.  Change UNTITLED to the name of the template you want.  For this exercise I will call mine template (all lowercase, please) then click on SAVE or simply press ENTER or RETURN.
    saveas-template
  10. In the Files tab you will notice that Dreamweaver created a Templates folder (yes, with a capital T … DO NOT RENAME IT!) and inside it is the file you just saved.
    files-template

To all intents and purposes your template is complete!  You just need to attach your CSS and customize it. 🙂

Facebook Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Protected by CleanTalk Anti-Spam