1 / 30

Building a WebSite based on a Template

Building a WebSite based on a Template. What we have:. Scenario 1: We already have saved 7 empty pages named: Index Introduction Task Process Credits Conclusion Teacher page We are going to create a template and we’ll apply it to all these 7 pages. Scenario 2:

juliehall
Download Presentation

Building a WebSite based on a Template

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building a WebSite based on a Template

  2. What we have: Scenario 1: • We already have saved 7 empty pages named: • Index • Introduction • Task • Process • Credits • Conclusion • Teacher page • We are going to create a template and we’ll apply it to all these 7 pages. Scenario 2: • The pages are created after the template is done (see the last page of this presentation)

  3. What is a template? • A template is a document you can use as a base for creating other documents. • Each document based on a template uses the same layout and structure as the template • Creating a template involves designating the areas that need to be editable in documents that are based on the template • All other portions of the documents are locked and controlled by the parent template

  4. Advantages and disadvantages of using templates Advantages are best seen in 2 situations: • When you have a section or a set of pages that need to use an identical design and layout • When a designer creates the look of the pages but editors add the content to the pages However, both of these advantages are pale in front of those presented by using external CSS files mainly because in this last case, the information is not carried by all pages, being just referred to (by including the link to the CSS file in each of them).

  5. More about CSS vs. Templates • What is common: • All the elements controlled by the CSS /template are updated automatically in a single doc. or site-wide. • What is different: • CSS gives designers the ability to separate the content from the structure of Web pages. This can be beneficial in terms of increasing accessibility and flexibility, decreasing download time, and decreasing the amount of time that is needed to create and maintain pages.

  6. Why/ When using Templates could be useful? • However, if: • you are not familiar with CSS and don’t know how to write/use the code • the file representing your site is not big ( or your site is not accessed by very many visitors in a second !!) using templates can be a reasonable alternative to CSS.

  7. Building a WebSite based on a Template Steps: • Create a template • Building the web pages based on that Template Scenario 1: Apply the template to your existing pages Scenario 2: Create new pages based on that template

  8. Step 1: Create the template • The template we are going to create will provide the navigation, the site identity and the look and feel of the project site • Before starting, as with any other web-page, we have to develop the page design ( structure, navigation, and layout)

  9. Create the template Getting started: • Create a new page which will be saved as : new template.dwt • The template file should be saved in the “template” folder from the website’s root directory

  10. Insert layer1(header) with the next properties:

  11. Insert layer 2 (content) which will host the navigation bar and create the links:

  12. Create the layer 3 (sidebar):

  13. Insert layer 4(main):

  14. File and layer panels will look:

  15. Place placeholder1 in main layer (insert-image-placeholder):

  16. Adding editable areas to the template • All other areas are locked • Changes can be made only in the template file • One editable region can contain more elements :ex (one placeholder, one layer, etc) if they are selected at once.

  17. How to do it: Insert bar (Common category ), Templates menu ,choose the Editable Region icon: 1. For the sidebar layer:

  18. If you want to remove the editable property:

  19. 2. Make the placeholder editable : You can place an image here-different in each page (ex):

  20. In your attention: • You can select a tag in code view and work in the design view See the next difference:

  21. Working inside the “header” layout: -see the pointer, the layout panel and the header layout itself:

  22. And compare with “the header” selection:

  23. Try in browser: At this stage: • All pages opened by navigation bar (menu) items are blank (apart from the navigation bar)

  24. Insert image in header layout (locked area): This image should be seen ( later ) in all pages built on this template:

  25. Step 2: Building pages based on your template Scenario 1: • The next step makes use of the template we created before and apply it to all the pages in the website ( in our case to all 7 pages created at the beginning)

  26. How to do it (updating all pages): Modify-Template- all pages (for entire site):

  27. Or : Modify- Templates-Apply template to page ( for each page):

  28. In your pages you can insert different pictures in placeholder and write different texts in sidebar ( edit the editable regions) as in the next example:

  29. Verify in browser: • You should have all links working, the banner and the rest of editable elements included

  30. Scenario 2: Create a new page based on the template you have already created:

More Related