creating a web site
Download
Skip this Video
Download Presentation
Creating a Web Site

Loading in 2 Seconds...

play fullscreen
1 / 12

Creating a Web Site - PowerPoint PPT Presentation


  • 72 Views
  • Uploaded on

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).

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Creating a Web Site' - sybil-gibbs


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
creating a web site

Creating a Web Site

Review of Concepts

templates
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.
slide3
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

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

slide5

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

slide6

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

cascading style sheets css
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
slide8

Body (white)

header

sidebar1

mainContent

footer

CSS Regions for a “typical” page

Container (thick line andblue)

slide9

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

the most important rules to follow when using dreamweaver
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!
slide11

Appendix – Changing the Width of Your Pages

Body (white)

header

sidebar1

mainContent

footer

780 pixels

200 pixels

580 pixels

Container (thick line andblue)

slide12

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!

ad