Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
•Download as PPTX, PDF•
1 like•1,534 views
This document introduces templates and their uses. Templates allow reusing the same design and code across pages by locking down parts of the template while making other areas editable. Templates are used in content management systems to maintain a consistent look and feel across websites. Dreamweaver allows creating templates from existing pages by tagging editable regions. Templates are stored as .dwt files and applied to pages, linking editable regions to content. Templates update all linked pages when changed.
Report
Share
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
- 2. What is a Template? • A template allows you to reuse the same design and code over and over • Parts of the template are “locked down” to prevent modifications • Other areas become editable and allow for content to be placed in them • Making changes in your template applies those changes to all pages using that template
- 3. What is a Template? Editable area All other areas are “locked”
- 4. Static vs. Dynamic web pages? Static Dynamic • Prebuilt content is the same each time the page is loaded • Content is generated “on-the-fly” and changes regularly • Content only changes when someone updates and publishes the file (sends it to the web server) • Page contains "server-side" code, allows the server to generate unique content when the page is loaded • HTML code • PHP, ASP, and JSP or other • Can pull content from a database • Example: About Us page with corporate background, mission, vision, etc. • Example: upcoming events on a homepage pulling from a calendar and changing each day
- 5. Templates • Web content management systems (WCM) use templates • Called themes in some systems (Wordpress, Drupal) • Templates can be custom built, purchased online (from a vendor such as ThemeForest.com) or downloaded for free
- 6. Dreamweaver Templates • Dreamweaver allows you to build templates in HTML (or other languages) and apply the template to static pages • Creates a .dwt file in your site (in a templates folder) • Parts of the template are tagged as being an “editable area” • When a template is applied to a new or existing page the design of the page will take on the new look/feel • Content (text, images, videos, tables, etc…) can then be inserted into the editable areas • Site must already be using Dreamweaver’s Manage Site features to define a local root folder for your web site on your personal computer
- 7. Creating Dreamweaver Templates • Can create a template from a new html page, or can save an existing page as a template • Once created, templates can be applied to a new page - use “Create from Template” option • Templates can also be applied to existing pages - will need to indicate what editable region content is going to go in • Creates a “Templates” folder where all will be saved…don’t move them!
- 8. Locked vs. editable areas • Pages using a template will have different content • Need to create “editable” areas within the template • Under “Insert” you’ll find these options • Simplest is an “Editable Region” Give it a unique name… Creates code… …that appears as
- 9. Locked vs. editable areas • Editable regions works best within a <div> tag or other structural HTML tag that surrounds all of the text, images, or other elements in the page that you will want to edit • Editable regions can get more complex, e.g: • Repeating elements • Tables that allow rows to be added
- 10. Changing a template • Biggest advantage of templates is that when you want to go back and edit elements you use throughout your site (such as the navigation links) you make that change once to the template and it’s automatically changed on every page using the • …but the files that changed then must be uploaded to the server to be visible online…
- 11. Pros & Cons of Dreamweaver Templates Pros Cons • Useful when many pages look the same and share common elements (eg. banner, menu, footer…) • A different template is required for pages that are organized in different ways • Changes are made once an applied to all pages using the template • Large sites can be time consuming to update in this way • Simple and easy to create and tag • HTML pages must still be uploaded to the website (server) to be visible • Limits “messing up” code on your site, useful if someone else needs access to edit • Requires Dreamweaver software to manage and work with templates • Helpful for small sites that aren’t updated frequently • May not be the best long-term solution for a site (think CMS!)
- 12. Conclusion • Dreamweaver templates can be useful in some situations… • As you learn more about content management systems you’ll see the advantages of using a system for sites
- 13. Module 4 independent study • Please watch the videos and read the articles found in the Online Learning / Independent Study section of Module 4 and complete Quiz 4 before next class