Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St...
-
Upload
calvin-allen -
Category
Documents
-
view
218 -
download
1
Transcript of Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St...
St Andrew’s High School-Revised January 2013 Slide 1
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
St Andrew’s High School
Web Sites (J Walsh - Chapter 8)
National 4 / National 5
St Andrew’s High School-Revised January 2013 Slide 2
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
What is the WWW?
• It is a huge collection of multimedia information on the Internet
• Information is stored in web sites as web pages
• A web page is a single document (might need to scroll down to see it all!)
• Web sites are a great way of distributing information
St Andrew’s High School-Revised January 2013 Slide 3
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Software needed to View WWW?
• A browser (eg internet explorer/netscape navigator) allows you to browse or surf the www
• The browser loads and displays web pages from other computers on the internet
• To access a web page you can enter the URL (Uniform Resource Locator) into the address line of your browser:
St Andrew’s High School-Revised January 2013 Slide 4
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Software needed to View WWW?
• A web site is a collection of web pages on a particular subject
• A home page provides a starting point to explore a web site
• Hyperlinks provide links to other pages, files or web sites
• The ‘back’ and ‘forward’ buttons provide a quick way to navigate through a list of web pages recently visited
St Andrew’s High School-Revised January 2013 Slide 5
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Question Time
• Now answer the questions from Exercise 1 in the Web Sites notes.
• Complete any outstanding questions for homework for next day.
St Andrew’s High School-Revised January 2013 Slide 6
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Software needed to Create Web Pages
• HTML (HyperText Mark-up Language) is the language used to create web pages
• HTML is made up of a series of tags eg <B> Hello </B>
• These HTML commands would make Hello appear in bold.
• There must be an opening tag and a closing tag <B> Hello </B>
St Andrew’s High School-Revised January 2013 Slide 7
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Software needed to Create Web Pages
• A text editor like Notepad/Simple Text can be used to create HTML documents.
• Documents are then saved with a .html extension.
• The good thing about text editors is that they are free
• Disadvantage of text editors – it is difficult to see how the final web page looks if you use a text editor as it is not WYSIWYG
St Andrew’s High School-Revised January 2013 Slide 8
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Web Page Software to create Web pages
• It’s a WYSIWYG editor!• What You See Is What You Get!• Don’t need to know/create any HTML
code for these packages, it automatically creates the code for you
• Examples are Claris Home Page, MS Front Page, Macromedia Dreamweaver. Web page software is sometimes called Web Authoring Packages.
• Some web browsers let you create pages too
St Andrew’s High School-Revised January 2013 Slide 9
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Wizards and Templates
• Using a Wizard allows you to step through the process of web page creation.
• Wizard - best for beginners.• A wizard will offer a choice of Templates. • Templates are ready made pages with
placeholders for text and graphics. • Templates speed up the web page
creation process as a standardised format and structure are already in place.
St Andrew’s High School-Revised January 2013 Slide 10
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Question Time
• Now answer the questions from Exercise 2 in the Web Sites notes.
• Complete any outstanding questions for homework for next day.
St Andrew’s High School-Revised January 2013 Slide 11
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Other Software to create pages
• You can create web pages in Word, Publisher etc. Again you can usually load a template
• Once it is created choose ‘Save as’ then ‘web page’
St Andrew’s High School-Revised January 2013 Slide 12
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Adding Graphics
• Graphics can be scanned, inserted from clipart, browsed for on the web, or created using a charting wizard (in SS or DB package)
• Graphics packages allows graphics to be saved as ‘web graphic’. This creates a low resolution graphic file suitable for the web, it has a small file size so it loads quickly
• Copyright – check this out! No problem for personal use, but if they’re going to be sold/used for advertising you must obtain permission from copyright holder
St Andrew’s High School-Revised January 2013 Slide 13
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Adding Audio
• From a sound library, taken from an audio CD, recorded directly into the presentation using a microphone
• Add audio using a hyperlink or embedding the file into the web page
• Hyperlink audio – this loads the audio file• Embed audio – this becomes part of the web
page and gives you more control over the sound
• If you embed audio users must have the correct ‘plug-in’ to play the sound
• Embedded sound can be slow to load
St Andrew’s High School-Revised January 2013 Slide 14
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Adding Video
• Video can be either embedded or hyperlinked to a web page
• Hyperlink video – this loads the video file• Embed video – can increase the file size,
slower to download and viewers need the ‘plug-in’
• Video can be created using a webcam, digital video camera, or downloaded from the web
St Andrew’s High School-Revised January 2013 Slide 15
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Hyperlinks
• Hyperlinks – links to other web pages, another place in the current web page, or a file stored on a local disk
• Activated by clicking a piece of text• Text colour changes once the hyperlink
has been clicked on
St Andrew’s High School-Revised January 2013 Slide 16
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Question Time
• Now answer the questions from Exercise 3 in the Web Sites notes.
• Finish all these questions for homework for next day.
St Andrew’s High School-Revised January 2013 Slide 17
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Adding Tables
• Information is displayed in tables to allow the user to quickly see the overall picture
• Data is arranged in columns and rows, like in a SS
Our School – Click a link to visit a dept
Computing Geography
English Art
Business Education
Music
St Andrew’s High School-Revised January 2013 Slide 18
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Adding Hotspots
• Hotspots are special areas on web page, normally invisible, but changes to a hand when the mouse is floated over it – that’s because it is a hyperlink
• Graphics and picture hotspots are called Image Maps
• Eg if you had a map of the British Isles and hovered over Scotland the hotspot link could take you to the Scottish Tourist Board web site (to Irish one, etc)
• Can be used to reveal a hidden picture/text
St Andrew’s High School-Revised January 2013 Slide 19
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Frames and Animations
• Some web pages are organised in frames• Some include animations downloaded
from the web• To view animations special plug-in
software may need to be installed• Real audio plug-in may be needed to use
a radio station’s web site
St Andrew’s High School-Revised January 2013 Slide 20
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Frame Based Website
• Some web sites have their web pages organised in frames.
• Each frame holds a particular type of content which may, or may not, change from one web page to the next. Eg:• Menu area• Title or Logo area• Data area
St Andrew’s High School-Revised January 2013 Slide 21
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Frame Based Websites
• In the previous example, the web page consisted of 3 frames:
– The Logo area, which does not change and allows the company name or logo to be permanently on view
– The menu area, a list of menu options dependant on the page on view
– The data area, where the main content for each web page is displayed, and thus changes from page to page
St Andrew’s High School-Revised January 2013 Slide 22
Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5
Question Time
• Now answer the questions from Exercise 4 in the Web Sites notes.
• Finish all these questions for homework for next day.
• Copy out the key points from Chapter 8 of the J Walsh textbook.