Download to read offline
Applications Software - Web Design. worksheet.
- 1. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com <Type your name in here> APPLICATIONS SOFTWARE Web design Over the past ten years the growth of the Internet has led to a vast expansion in the number of websites available. For example, a web search for the word ‘computer’ using Google showed that there were about 712,000,000 websites registered with Google that contained that word – and the search for the letter ‘a’ threw up about 8,500,000,000 websites. Web design has become big business, and often companies have moved part or all of their operations onto the web. For example, many people buy their car or home insurance via a website. This saves both the customer and the company money because the insurance company does not have to spend money on expensive high street locations where they can sell their products, and they get the customer to do some of the administration tasks such as entering their details into the company’s database online. These savings are passed on to the customer, who in turn gets cheaper insurance. Individuals have also begun to develop their own websites. These usually relate to their hobby or interests. For example, genealogy – researching into one’s own family history – is one of the major non-commercial uses of the Internet, and many genealogists share their research by creating their own websites. APPLICATIONS SOFTWARE - Page 1
- 2. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com The earliest websites were designed using html (Hypertext Mark-up Language). These were a series of commands that had to be typed in exactly in order to work. The following are some examples of html commands: <html> Must ALWAYS go at the beginning of the website program <body> Should ALWAYS go immediately after<html> </body> Should ALWAYS go just immediately before </html> </html> Must ALWAYS go at the end of the website program <font face= > Sets the font for the website <font size= > Sets the font size (The largest size is 7, the smallest is 1) <font color= > Sets the font colour (The choice of colours is limited to black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua) <body bgcolor= > Sets the website’s background colour (The choice of colours is limited to black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua) <b> Makes the font BOLD <i> Makes the font italic <u> Underlines the text <p> Starts a new paragraph <br> Starts a new line <hr> Draws a horizontal line across the website <center> Centre justifies the text <img src=”(name of file)”> Imports the named image file on to the website <body background=”(name of file)”> Imports the named file image as a repeated background image to the website <a href=(name of file).htm”> Links pages within a website to one another <a href=http//:(url of website)> Links one website to another </a> Turns the link ‘off’ A web page could be created using these commands. For example, the following html will create a very simple three page website1: index.htm <html> <head> 1 Each web page (index.htm, navbar.htm, page1.htm, page2.htm, and page3.htm) has to be saved as a separate file for the website to work. APPLICATIONS SOFTWARE - Page 2
- 3. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com <meta name=" " content=" "> <title> Index Page </title> </head> <frameset frameborder="10" cols="25%,*"> <frame src="navbar.htm" name="navbar"> <frame src="page1.htm" name="main"> </frameset> <noframes> <body> </body> </noframes> </frameset> </html> navbar.htm <html> <b> <a href="page1.htm" target=main>Page 1</a><br> <a href="page2.htm" target=main>Page 2</a><br> <a href="page3.htm" target=main>Page 3</a><br> </html> page1.htm <html> Page 1 </html> page2.htm <html> Page 2 </html> page3.htm <html> Page 3 </html> The finished website looks like this: If the hotlinks in the navbar (navigation bar) on the left-hand side of the website are clicked, the main page changes to display the new web page. APPLICATIONS SOFTWARE - Page 3
- 4. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com It is still possible to design websites just using html, but most modern web designers prefer to use a web authoring tool or web page design applications program. They are quicker to use and are very similar to many desk top publishing and word processing programs. Some of the most common web page design applications programs are Microsoft FrontPage and Macromedia Dreamweaver. They use html commands to create web pages but the user does not need to understand html to use the program. The programs automatically convert the web page the user creates into html. When opened, Microsoft FrontPage and Macromedia Dreamweaver look like this: Microsoft FrontPage Macromedia Dreamweaver Even a relatively unskilled user can create a website using either of these programs. APPLICATIONS SOFTWARE - Page 4
- 5. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com The html these programs use to create just a simple, one sentence web page is almost as much as was needed to create the three page website shown earlier. As you can see for the following example, most of the html has been necessary because the user has made use of three different font types, three different font sizes, and three different font colours. This web page required … … this much html. What are the three font styles that are used in this <Type in the name of a font style> example? <Type in the name of a font style> <Type in the name of a font style> APPLICATIONS SOFTWARE - Page 5
- 6. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com The size of the fonts used is shown as a number. What Font size (Number) Font size (pt) size fonts (in pts) can a web designer use? 1 <Type in the font size> 2 <Type in the font size> 3 <Type in the font size> 4 <Type in the font size> 5 <Type in the font size> 6 <Type in the font size> 7 <Type in the font size> The colours are not shown by name but by a Colour Hexadecimal code combination of symbols and letters (e.g. ‘#FF00FF#’). These are hexadecimal codes which allow very precise White <Type in the code> colours to be ‘mixed’ by the web designer. What are the hexadecimal codes for these colours? Black <Type in the code> Red <Type in the code> Green <Type in the code> Blue <Type in the code> Before moving on to look at an example of a web page that shows various design techniques and tools that web designers can use, there is some terminology that you must understand. Using a search engine (like Google) and the Internet, find definitions for the following terms: Dynamic html <Type your definition here> Hotlink <Type your definition here> Hotspot <Type your definition here> Scrolling text <Type your definition here> Marquee effect <Type your definition here> Animated GIF <Type your definition here> APPLICATIONS SOFTWARE - Page 6
- 7. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com Here is an example of a web page from a website that was created using Microsoft FrontPage: This is what the same page looks like in design view: APPLICATIONS SOFTWARE - Page 7
- 8. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com This web page shows some of the most common web design tools in use. The first thing to notice is the use of Tables to position the text and graphics exactly where the designer wants them. This means that when someone views the website, what appears on screen is exactly what the web designer wanted them to see. It will not be distorted by the screen resolution of the viewer’s computer or by the web browser they are using. Site navigation was made possible by the creation of a navigation bar that contained hotlinks to the websites other pages. These were created in separate cells in a table. Each cell contained text that was made into a hotlink. The scrolling text information … … were created by the use of the ‘Marquee’ tool. The ‘Special offers!’ graphic was created in Microsoft Publisher using WordArt and Autoshapes. It was then imported into Microsoft Paint, where it was converted into a GIF image. This was then imported into the web page. In addition, this graphic changes when the mouse is moved over it to display the following graphic: APPLICATIONS SOFTWARE - Page 8
- 9. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com This was also created using WordArt in Microsoft Publisher and then converting it into a GIF image in Microsoft Paint. The change was achieved by the use of dynamic html. The two blocks of text are also animated. The first … The second … … flys out to the bottom right corner when it is clicked on. … drops in word by word. Finally, copyright free animated GIFs have been downloaded from the Internet and inserted into the web page. If you have completed all the work correctly you should now know the following: • That html is used to create web pages. • That web authoring tools can be used to create web pages very quickly. • That text and images can be imported into web pages. • That tables can be used by a web designer to position text and graphics exactly where they want them on a web page. • That hyperlinks can be created from text and graphics • That hotspots can be placed over graphics • That animation can be included on a web page. You may now print this work off and store it in your user area so that you can use it to revise from at a later date. Extension Task: Using a web authoring tool or web page design applications program, create a single web page that includes: • Text. • At least one imported image. • At least one hotlink. APPLICATIONS SOFTWARE - Page 9
- 10. GCSE – SectionA – Tools, Techniques and Systems www.ict-teacher.com • At least one hotspot. • At least one example of graphic animation, text animation, or dynamic html. APPLICATIONS SOFTWARE - Page 10