B2 Web Site Design

Report Copyright Infringement View in OSM UK

Description

To introduce the group to the process and thought behind building a website. This activity could be run over as many as 6 weeks. Taken from the BB Company Section Discoverer Pro Pack, Skills, Creativity, Media B2
Introduction: Many of your young people will regularly use the internet to view websites but not know how to produce their own pages. A good website is well thought through before any pages are created and the knowledge and interest in subject of the site you are creating is important. They can create a site for your group or create pages for a subject they have interest in, such as their football team.

Resources

Activity 1
• pc or Laptop
• Projector
An internet connection is recommended but not a necessity.

Activity 2
• Whiteboard or Flip Chart
• Pens

Activity 3
• Pens & Paper
• PC with Word Processor
• Digital Camera
• Scanner

Activity 4
• At least 1 Computer

Activity 5
• At least 1 PC with Notepad or program such as Frontpage, Dreamweaver or any free web page building program.

Activity 6
• At least 1 PC with internet connection (Preferably broadband or other high speed connection)

Instructions

Activity 1 - Introduction to Web Design

Aim: To Introduce web design.

Instructions:
• Discuss with the group websites that they have seen, what they think makes a good / bad site in their opinion.
• Split the young people into smaller groups or pairs, give them a large piece of paper and pen and ask them to identify some websites they like and why they like Them, and Those that are not so good and the reasons why.
• Then follow that up by asking them to write down the features they would expect to see on a website. These will vary depending on the websites the young people are thinking about, and this is good as there should end up being a long list.
Next, as a whole group discuss (going through the questions) the following:
— How do you navigate around a website?
— Is the site accessible to all? (Is there a text only version of the site? Are colours appropriate and text easy to read, etc.? Are there any facilities for the blind or deaf?).
— Has anyone created a website before?
— Does anybody know of any programming languages and/or programs used to create websites? (Languages to program/design — HTML (Basic), PHR ASP and programs may include notepad for basic code, Dreamweaver, Frontpage).

Tips / Advice:
If an Internet connection is available browse to some sites and ask members to review the pages for content, aims, visual effect, audience etc.
— www.googIe.co.uk
— www.bbc.co.uk
— www.msn.com

Activity 2 - Web Site Structure

Aim: To produce a site structure for a chosen subject.

Instructions:
• This activity is about considering how the website will look and what will be on it.
• In pairs or small groups the young people should consider what they want to appear on their website, thinking about what pages they want and what these pages will contain.
• Once they have done this, ask the young people to create a site structure using a hierarchal structure, i.e. the top level would be Homepage, and then might go down to a number of key pages such as news’, ‘contact’. The ‘news’ page has sub pages of local’ and ‘national’. This structure shows how the pages will be linked.

With the completed site structure, the final task is to ask the young people to create a description and rough layout for each page. This should indicate what content will go on each page along with what type of pictures. The sketch layout is important to ensure the young people can be more focused in the next activity with researching and collating content, locating images, etc. It is important the young people do not start writing content at this point.

Tips / Advice:
Use mind mapping sessions to develop the subject and content of the website.

Activity 3 - Content

Aim: To collect and create content for the pages of the website.

Instructions:
• In this activity the young people are to write the content, by researching their chosen topic.
• Encourage the young people to put as much effort in as they can, finding images to go along with the text.
• At this point they should be using a word processing program such as Microsoft Word or alternatively writing it out if computers are not available.
• Once this is completed, the next session takes the young people onto learning about creating web pages. The work done in this activity will be used again in activity 5.

Tips / Advice:
If the site is a group activity assign small groups or pairs to work on individual pages.

Activity 4 HTML Tutorial

Aim: To learn how to write In html, to create a webpage.

Instructions:
• Before starting to put together the web pages it is important that the young people learn some basic html by following a set of instructions to create a simple web page It’s not as scary as it sounds.
• To do this the young people will need access to a computer which has Notepad or a similar program. The tutorial can be done as a group with the leader giving the instructions step by step (if only 1
computer available), or alternatively could be done individually/in pairs (if more computers are available).
• Below you will find a tutorial for using html:

Basic Text & Font Tags
Before getting started, it is important to know that HTML code almost always uses beginning and ending tags. These tags surround the text that will be affected by the code. A beginning tag is generally a word
surrounded by brackets. The closure tag is surrounded by the same brackets but with a forward slash right after the opening bracket.

For example, if you want to bold a portion of a sentence, then you would use for the opening tag and for the closing.

Therefore to write the word “Hello!” from the sentence below in bold, your HTML code would look like this:

Hello! The Boys’ Brigade

The output would be: Hello! The Boys’ Brigade.

Only the word "Hello” is in bold because the tags surround that word. If you wanted to make the whole sentence bold, then you would have put the closure tag, , after the word “Brigade”. Be sure to always include your closing tag because if you forget, your entire page will be affected by the tag.

You can apply this same concept to many other HTML codes. Here are several of the basics...

New Paragraph: Starts a new paragraph and creates a blank line between your new paragraph and the one above it. The closing tag is , but is not mandatory.

Line Break: This will break your text to the next line. Two tags is equivalent to one tag. There’s no closing tag needed for this one

Bold: Closing tag is 

Underline: Closing tag is 

Italics: Closing tag is 

CenterIng text: <center> Closing tag is </center>

Left aligning text: Just use tip> for the closing tag

Right aligning text: Just use for the closing tag

Change text color: The ending for any font tag is 

ChangIng font face: 

Change font sIze: (choose a size between 1 to 7)

It is not necessary to go through all of the above, but pick a selection and if possible let the young people create their own basic page, writing their name, age and 3 facts about themselves. Encourage the young
people to use different fonts, colours and font style (such as bold, underline, italics).

Inserting Hyperlinks
Hyperlinks are links that take you to another page or web site. You create them by using the code below: <a href= “http://www.thepage.com”>Name of link</a>

The link would appear as, Name of link

Inserting Images
in HTML, images are defined with the <img> tag. To insert an image use the code below:

<img src=”imgname”> e.g. if the image is named uanchor.gif the code would be:
<img src=”anchor.gif”>

Next is the basic structure of an HTML page. A basic html page would look like this:

----------------------------------------------------------------------------
<html>

<head>

<title>Title that is displayed at the top of your web browser</title>

</head>

<body>


The Boys Brigade, <a href=”http://wv.2createawebsite.com”>www.boys-bhgade.org.uk</a>.


</body>

</html>

--------------------------------------------------------------------------------

The <html> tag just tells the browser where the HTML starts. It is not necessary to include this tag to get your page to show.

The <title> tells your browser the title of the page and you9l see this text at the very top of your web browser. This is also used by most search engines when indexing your page. Whatever text you have here
will be the title of your site when displayed in the search engines.

The <head> tag is used for information about the document which will not be displayed. The body of your site should be included inside the <body> tags.

After doing the above it is then necessary to save the page, go to save’ and in the filename box name the page index.html’. it is important that the ‘.html’ extension is used (although there are other extensions such as .htm which will also work). Once saved the document can be opened in an Internet Browser window such as Microsoft Internet Explorer. You should then see the results of your html, you could then go back into the file (opening in Notepad) and make a change and re-save to show how the changes are displayed.

Now this has been completed, the young people can now go on to creating their web pages using the skills learnt and based upon the content and structures that have been put together in the previous activities.

Tips / Advice:
If you have an experienced leader or young person to lead the session this would be ideal, otherwise it would be advisable for the leader running this activity to familiarise themselves with the above tutorial.

Activity 5 - Site Construction

Aim: To create pages and build the website.

Instructions:
• To create your website there are a number of different programs that you could use, dependent on the skills and knowledge of leaders and young people and the time to be spent on this activity.
• It is important that the young people have completed the HTML Tutorial activity so they are aware of basic html coding.
• You could use a program such as Notepad (which can be found on all Microsoft Operating Systems), although This will require some knowledge.
• If an HMTL Editor was used such as Microsoft FrontPage or Macromedia Dream weaver (Note: Microsoft Word and some other Desktop PubIishing/Word Processing programs now also have html features) they provide a user friendly interface. Therefore using ones of these programs requires much less knowledge before starting to put the web pages together. If an HTML Editor is going to be used there should be a quick overview given to the young people of the key features they will need to use.
• The young people should be reminded that they should now be using the content and structures put together in the previous activities when creating their web pages.

Tips / Advice:
Work together to design a template for the pages that each section can then be based on.

Activity 6 - Publishing a Website

Aim: To publish pages created to a live server.

Instructions:
• To upload the web pages to the internet, web space is required on a server to which FTP access is available. Free web space is available from many ISP’s (Internet Service Providers) as well as other companies, these will include domain names related to that company e.g. http://Bb183.btopenworld.co.uk
• If the project is being used to set up a Company website then it may be more appropriate to set up web space through an ISP and obtain a domain name for the company; alternatively The Boys’ Brigade provides discounted hosting services to companies with domain name using boys brigade.org.uk, for example http://yourcompany.boys-brigade.org.uk. More information on The Boys Brigade hosting services is available online at www.boys-brigade.org.uk
• FTP (Ale Transfer Protocol) is used to upload web pages to a web server. FTP’ access is the standard way of uploading files and the ISP will provide details of how to connect using FTP These details would include a ‘hostname’ or ‘domain name’, ‘username, ‘password’. With these details a connection can be made by using a browser such as Internet Explorer or an FTP client (software).
• Internet Explorer — Using Internet explorer type ‘ftp://yourhostnameordomain’ in the address bar e.g. ftp://www.boys-brigade.org.uk. A new windows requesting username and password should then appear, enter these details. The browser should now display any files or folders in the web space; you can upload by dragging and dropping or copy and paste.
• FTP Client — This is a piece of software, there are many freely downloadable off the internet, although some will need to be brought. A free FTP client which can be downloaded is Smart FTP (http://.smartftp.com/). The ‘hostname’ or ‘domain name’, ‘username, ‘password’ will need to be set up.
• Note: If there are problems connecting, the Security / Firewall settings should be checked to ensure they allow FTP (which uses port ‘21’).
• Once connected using one of the above methods you can upload and download files as necessary to update the web pages.

Tips / Advice:
• Use a free program such as Smart FTP to upload pages (‘mw.smartftp.com).
• Email the BBUK Web Support Team for help and advice on using FTP and setting up webspace (websupportteam@boys.brigade.org.uk).

Safety Issues / Risk Assessment:
• Ensure any electrical equipment is correctly set up.
• Keep drinks and food away from equipment.
• Check the BB regulations and your church’s child protection policy regarding taking or using photos of children. Check members’ consent forms before proceeding with photography.
• When working on the internet make sure that the content viewed is appropriate for the young people viewing the website.

For full details see the BB Company Section Discoverer Pro Pack, Skills, Creativity, Media B2

Badge Links

This activity doesn't complete any badge requirements