Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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). • 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. • 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. 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 Title Menu Content (Editable) Footer 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 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Footer First.html Title Menu Content (Editable) Footer My Portfolio Title Menu Template.dwt Menu Text Text Title Menu Text Text My info Second.html Footer 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 My Portfolio Menu One Two Three Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text My info First.html Template.dwt My Portfolio Menu One Two Three My info My Portfolio Menu One Two Three Text Text Text Text My info Second.html Gibberish Text (Editable) My Portfolio Menu One Two Three My info Third.html 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 CSS Regions for a “typical” page Body (white) Container (thick line and blue) header sidebar1 mainContent footer 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) My Portfolio Menu One Two Three Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text My info First.html Template.dwt My Portfolio Menu Some Text (Editable) One Two Three My info My Portfolio Menu One Two Three Text Text Text Text My info Second.html My Portfolio Menu One Two Three My info Third.html 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! Appendix – Changing the Width of Your Pages 780 pixels Container (thick line and blue) 200 pixels Body (white) header 580 pixels sidebar1 mainContent footer 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!