VCE IT Theory Slideshows

By Mark KellyMcKinnon Secondary College

Vceit.com

Power Websites

CMS and CSS

Contents

• Static websites• CMS – Content Management System• CSS – Cascading Style Sheets

Static Websites

• Each page is produced by hand, using GUI web editor (e.g. Dreamweaver) or raw HTML code

• Pages never change without being edited• Can be dull and unresponsive to current

conditions• Imagine a static eBay site where the finishing

time of all auctions had to be entered by hand every second.

Dynamic Websites

• Constantly changing – e.g. eBay• Can respond to events and the profile of the

user• Can be achieved to a degree with Javascript

(e.g. a countdown timer on a static page)

Content Management Systems

• CMS• Examples – Wordpress, Joomla, Drupal• Database-driven software that creates pages

when needed and tailor-makes them for the time, the circumstances, the user

CMS

• The CMS fetches content (e.g. text, data, pictures) from the database and creates a webpage with pre-defined formatting chosen by the webmaster.

• The same pages might look different for each person viewing it (e.g. their ‘My eBay’ pages, or their Facebook pages.)

Pros and consPros Cons

Site maintenance is far easier and quicker Must install CMS software onto your webserver – some are expensive

Sites become dynamic and pages change automatically

Must learn how to use the CMS

Easier to manage assets (pictures etc) Can be expensive/slow to convert an existing static site to CMS

Better looking sites

Site has a consistent appearance across all pages

Far less chance of 404 errors or bad links

Webmaster creates content (e.g. body text)

Media (pix, videos etc) are stored in the database

The CMS combines content, media, formatting to create web pages which are sent to the visitor’s browser

Cascading Style Sheets• CSS• Instead of repetitively

formatting lots of types of text in the same way, define the formatting in a CSS file and just mark text with the style it needs

CSS

• To change the look of main headings, change the definition of HEADING1 once in the CSS file.

• Don’t have to find and change every piece of HEADING1 text across the site

• Far quicker, easier• Creates consistently formatted

sites

CSS

• E.g. CSS file contains “Heading 1 = Bold, TNR, size 20”

• In a webpage, some text is tagged as being “Heading 1” style.

By Mark KellyMcKinnon Secondary Collegevceit.com

These slideshows may be freely used, modified or distributed by teachers and students anywhere on the planet (but not elsewhere).

They may NOT be sold. They must NOT be redistributed if you modify them.

VCE IT THEORY SLIDESHOWS