So, to recap to my previous adventure: I had just learned how to make sticky footers that worked with our pages. I maintain many pages (34, plus a home page) for our website, and they are not all the same length. We have boutique pages. We have thumbnail pages. We have boutique pages with a little image vs. big image at the top. We have thumbnail pages that are short vs. ones that are long. We have a page that has secret embedded code so if you know the super-secret key combination, an elephant will appear in a pink tutu and dance a jig. (OK, well, maybe we don’t have that last one… but wouldn’t it be fun?) The thing is, we have a lot of pages that all basically have the same wraparound: the header, the menu, the footer is all the same. It’s the “inside,” and the length of the inside that’s different from page to page.
But let me step back a moment and give you some history. Here is what our pages looked like a few months ago:
You can see we had a vertical header across the top, along with a vertical menu. Then on the left side, we had a horizontal menu, with links that go to our pages within the site. The footer followed below, with social media icons below that and to the right. The primary reason I wanted to move to templates is that updating 34+ pages individually can be overwhelming at times, even if all you’re doing is copying and pasting. I thought knowing how to create templates might make it easier to maintain the pages.
I got my first chance when I was working on re-designing the Special Collections web pages; all their pages are template-centric. I thought it should be pretty easy to figure out. It would be how I usually figure things out: a combination of Firebug and reserve engineering; but digging through code, I had an issue with wrapping my brain around how to write the thing. That was frustrating!
I went back to my old standby of research; studying; reading. Looking at a made template can be quite confusing. It doesn’t seem logical that it could work. And indeed, my first few attempts were ugly. I’m even embarrassed to say that I might have accidentally messed up the main Special Collections’ old template in trying to figure out how to get the templates to create correct layouts.
One Friday afternoon, I was so frustrated, that I decided to leave work early and have some “me” days. My son, Ian, and I just bummed around all afternoon, had take-out chinese food, (my fortune was: “Now is a good time to finish up old business,”) and I just generally acted juvenile all weekend. That made all the difference in the world. When I got to work, I pulled out the fortune, placed it right beside my monitor and wrote the code for my first template. (Just goes to show, “me” days can be worth their weight in gold.) Here are the things I learned with that first template I created:
- Open Dreamweaver, if not open already. I use Dreamweaver CS6.
- Create and design a html page: File—>New…—>Blank Template. Select HTML template. I just selected <none> for Layout style, but the choice is up to you.
Click Create button.
This is what a blank DW template doc looks like.
- There are certain areas that you will want to leave blank in order for you to change for each page you are creating. For example the name: Don’t change that. Keep in mind, that everything “inside” the
<!– TemplateBeginEditable name=”doctitle” –>
<!– TemplateEndEditable –>
will stay editable. Everything outside of that section will be locked into the template. So, everything that you want to stay the same in every document MUST BE OUTSIDE THE GREEN <!— Template…Editable —> sections. I cannot stress this enough. This is a very important point to remember.
- Add additional <!— Template…Editable —> sections as needed. Don’t be shy creating these sections, but don’t go cray cray either. I added one for additional styles and another one for my inside details, and third one for stat counter code at the bottom of the page. (I used the auto generated head section for my Google Analytics stats, but I also keep stats through StatCounter, and that requires different code for each page.) So, I created three additional <!— Template…Editable —> sections. The ones I listed are probably the most you really need to add. Remember, you only need these sections for code/html that you want to be able to change individually on pages, not universally.
When you go to name your template page, use a name that anyone can clearly understand. I named mine boutiquePage. The page will save with a .dwt. This is the page you will open up and edit when you want universal changes across all your template-based pages.
For example, if you have a menu that needs updating, open up this document and make the changes here; once you have saved the document, a dialog box will appear:
Click Update button.
Another dialog box will pop up and give you an update.
Click Done or Close button (which ever one applies,) to dismiss the dialog box. Old documents tied to this template (and new ones created after,) will now contain this update.
If you go into a document connected to the template, you can see (via the greyed out text,) that the information has been updated:
Further, you can check in Preview to see the live view:
Once you have made the change to the template, and saved/updated the other documents, you will need to upload all affected pages again to your server.
We’ll explore making new documents and changing certain elements with those new documents for my next blog, slated for July 21, 2015. Until then, happy coding, and may HTML forever be in your favor.