1 / 12

Creating a Web Site

Creating a Web Site. Review of Concepts. Templates. Templates are special HTML files that are used to quickly create pages on a web site. They contain the common structural elements of all the pages (titles, footers, links, etc).

sybil-gibbs
Download Presentation

Creating a Web Site

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. Creating a Web Site Review of Concepts

  2. Templates • Templates are special HTML files that are used to quickly create pages on a web site. • They contain the common structural elements of all the pages (titles, footers, links, etc). • When creating a page, you simply make a copy of the template to use as a starting point. • Templates contain: • Editable regions - areas which are different on each web page in the site and can be changed on the page • Non-editable regions – areas which are the same on each web page in the site and can only be changed on the template.

  3. Templates do not contain content (text and media) that you wish to display on the site as they are never seen by the user. • When you make a structural change (ie. change a word, add a link) on a non-editable region of a template, all the connected pages are automatically updated. • Note that the format (the look) of a page is changed using CSS, not a template.

  4. Title Menu Content(Editable) Footer Creating Pages Using a Template in Dreamweaver Step #1 • Create a template file which contains the common structural elements of all pages and save it as a template • Dreamweaver will automatically give the file the extension .dwt and save it a folder called Templates Template.dwt

  5. Title Menu Content(Editable) Footer Title Title My Portfolio Menu Menu Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Menu Text Text Text Text Footer Footer First.html Third.html My info Second.html • Step #2 • Create the pages based on the template • Each page will have a unique name and an html extension • Each page will have common elements in non-editable regions and different content in the editable regions Template.dwt

  6. My Portfolio Menu OneTwoThree Gibberish Text (Editable) My info My Portfolio My Portfolio My Portfolio Menu OneTwoThree Menu OneTwoThree Menu OneTwoThree Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text My info My info My info First.html Third.html • Step #3 • Update all the pages quickly by making changes to the template. • Use the template to create links and change non-editable regions. • Note that only the non-editable regions can be changed using a template Template.dwt Second.html

  7. Cascading Style Sheets (CSS) • CSS is code that is used to format (change the look) of web pages • This code can be stored in the web page document or, preferably, in a separate file with the extension .css • Dreamweaver allows the user to quickly change the format of a region or specific text and media using “styles” which in computerese are called classes

  8. Body (white) header sidebar1 mainContent footer CSS Regions for a “typical” page Container (thick line andblue)

  9. Changing the format using CSS • Update the format of all the pages (including the template) quickly by making changes to the CSS using Dreamweaver. • Note that you can have any page open when making these changes (ie. The template does not have to be open) Template.dwt My Portfolio Menu OneTwoThree Some Text (Editable) My info My Portfolio My Portfolio My Portfolio Menu OneTwoThree Menu OneTwoThree Menu OneTwoThree Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text My info My info My info First.html Second.html Third.html

  10. The Most Important Rules to Follow When Using Dreamweaver • Create (or confirm) your site using the Site command at the beginning of each period. • When creating your site, make sure you use the correct folder - probably ElectronicPortfolio (not Templates, not Images, not anything else!) • Don’t be lazy!

  11. Appendix – Changing the Width of Your Pages Body (white) header sidebar1 mainContent footer 780 pixels 200 pixels 580 pixels Container (thick line andblue)

  12. To change the width of your page (container), open the #container css style and choose the Box Category. Adjust the width (ideally about 1000 px) Remember that all graphics and other media must be sized with Photoshop or Fireworks to fit within your main content area or other sections of your page!

More Related