Web Design Notes


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design Notes

  1. 1. Web Design 1. Introduction The World Wide Web (or simply Web) is the most popular service on the Internet. The development of the web was partly responsible for the rapid increase in the number of people who used the Internet in the late 1990s. The World Wide Web consists of millions of different sites, each of which contains information. Each site is identified by a unique address called a Uniform Resource Locator or URL. The information at a site is stored in the form of pages which can contain text, pictures, sound and video. Because web pages can contain so many different types of information they can be designed to be attractive, informative and interesting. The different pages at a site can be linked together so that the user can move easily between them. A hyperlink is placed on a page to create a link to another page. Clicking on a hyperlink will move you to the page that the link joins to. Links can be made between pages at the same site and pages at different sites. To view the information at a web site you must use a browser package. Web pages are stored in a special code called Hypertext Markup Language or HTML. To create a page you must either : 1. Write the HTML code yourself. This can be very complicated. You need to know all of the valid codes that can be used and type them exactly. 2. Use a web design package. The package will work like a desktop publisher. You will be able to use a range of tools to design the page on screen. The package will produce the HTML code required for the page from your design. For must users the best option is to use a web design package. This will do most of the technical work for you. You simply design your page on the screen and the web design package creates the HTML code for the page you have made. Whilst you are developing a web site you will probably store it on the hard disk of your computer. When it is complete you will need to upload it onto a web server so that other people can access it. 2. Site Structure A web site is usually made up of many pages. The first steps in designing a web site are to decide : 1. What the purpose of the web site is. 2. What individual pages will be needed to build the site. 3. What information will appear on each page.
  2. 2. You will then need to decide how the pages will be linked together. You can use hyperlinks so that a person viewing the web site can move between the individual pages. You can also link your web site to other sites. One way to show how your web site will be organised is to draw a diagram showing what will be on each page and how the pages will be linked. The diagram below shows how a web site for a football club could be organised. The main page that the user starts at is the home page. The web site has been divided into five different sections which are club history, player statistics, team news, chat area and fixtures. In each section there are a number of pages. The arrows indicate links between the pages. The club will also make links to the web sites of other clubs that it will be playing. It hopes that in return these other clubs will create links to its web site. Once the structure of the web site has been decided, you can start to create the individual pages. If there are a lot of pages to make then different people could work on each one. It is a good idea to make all of the pages on a site look similar. You can do this by using a standard page layout for each page. 3. Page Layout Most web sites are made up of many pages. It is a good idea to make all of the pages at a site look similar. This means that a person viewing the pages can tell that they are part of the same site. You can make a page look consistent by using the same colours and styles for the text and the same background on each page. This diagram shows an example layout for a web page :
  3. 3. The designer of the web page has made these decisions about its layout : • The background colour will be pale blue. • Headings will be green and in the middle of the line. • Normal text will be black. • Pictures will be displayed with a thick black border around them. • Options available to the user will be displayed at the bottom of the page. • All options will be displayed as pink icons with labels on. The basic layout of each web page on the site will be the same as this. Some pages will have more or less pictures. Some may have more options and some will have several headings, but they will all conform to the design points listed above. Every time you create a web page you can specify what the background will be like, what the title will be and what normal text and hyperlinks will look like. Background You can choose a background colour for a page or you can put an image in the background. If you choose to use an image in the background then it should be a small one. If the background image is too large it will take a long time to load the page. Many web users will not be prepared to wait. The image should also be simple so that it does not interfere with the text that appears in front of it. The background image is repeated up and down the page to fill up the whole screen. This is called tiling.
  4. 4. Page Title A web page needs a title. This does not appear on the page itself. Instead it is displayed in the title bar of the web browser when the page is viewed. Default Colours You can set the default colours that should be used on a page. As well as the colour of the background you can also specify : • The default colour for normal text. • The default colour for a visited hyperlink. • The default colour for an unvisited hyperlink. 4. Text Style When you produce a word processed document you can choose what fonts and sizes to use from a list of fonts that are installed on your computer. You can get your document to look exactly how you want it to. Designing a web page is more difficult. This is because different computers have different fonts installed. If you use a particular font on a page you can not be sure that a person reading the page will have the same font. Web design packages use two different approaches to overcome this problem. A range of pre-defined styles which each have a name can be selected. As well as normal text there are six types of heading and several other styles. When you design a web page you use these styles. You do not know exactly how the text will appear when it is looked at but you know that Styles heading style one will stand out more than heading style two and so on. Using font matching you can pick the font and font size that you want to use for your text from the fonts that are installed on your computer. If a person who looks at your web page does not have the same font his web browser will use the most similar font that is available. To increase the Font probability that another person has the same font as you it is a good idea Matching to only use common fonts such as Times New Roman or Arial. Font matching only works with newer web browsers. Font Style Each font can have a range of extra styles applied to it. The three common styles that can be used on a web page are : • Normal : No special style is applied to the font.
  5. 5. • Italic : The font will be displayed as if it is leaning slightly to the right. • Bold : The lines used to draw the font will be drawn extra thick to make the text stand out. Underline style can also be used on web pages but this is not normally done. This is because hyperlinks are underlined so underlined text could easily be mistaken for a hyperlink. Alignment Alignment describes the position at which text appears on a line on the page. On a web page, text can be aligned to the left, center or right of the page. Font Colour The colour of text can be specified. Most web pages make use of lots of colour because they are displayed on monitors which can easily show colour. If it is likely that your page will be printed out then you should check how the colours you have chosen look on a black and white printout as some colours do not show up very well. 5. Graphics Web design packages do not usually include a facility to let you create images. Instead you must obtain an image from another piece of software and bring this into the web design package. This is known as importing. The three most likely sources of images are : • Images can be created from scratch in a graphics package. • Images can selected from a clipart library. • Photographs can be taken with a digital camera or scanned using a scanner. Images take up a lot more storage space than text does. When a person looks at a web page the files that make up the page must be transferred over the Internet to his computer. If a web page contains an image it will take a lot longer to access than a text only page. To speed up page loading, images on a web page must be stored in one of two special formats. These formats are GIF and JPEG. Both formats compress the image data so that it can be loaded more quickly. A GIF file is a compressed graphics file. GIF files store information about sequences of pixels. An image saved as a GIF file will look exactly the same GIF as the original image. GIF files usually take up more space than JPEG files. GIF files are often used for banners and icons. JPEG JPEG files are highly compressed graphics files. JPEG files can store an image in a very small space. However some detail can be lost from an image when it
  6. 6. is stored as a JPEG file. For this reason photographs are usually stored as image files but icons and banners can not be stored in this format. Images in other formats such as bitmaps must be converted to one of these formats before they are put on a web page. A web design package will probably do this automatically. 6. Hyperlinks A hyperlink is a connection between two web pages. If you select a hyperlink on a page then you will be taken to the page that the hyperlink joins to. Hyperlinks can be represented as either text or a small image known as an icon. A Text Hyperlink An Icon Hyperlink This diagram shows three web pages which are part of a site about the North West of England. Clicking on the Manchester hyperlink on the main North West page would take you to the page about Manchester. Clicking on the cotton hyperlink would tke you to the page about cotton. Most web browsers display links that you have visited in a different colour to links that you have not visited. Unvisited links are normally blue. To create a hyperlink on a web page you normally type the text that you want the user to click on or import the image for the icon. Then you select the text or icon and identify which page the link goes to.
  7. 7. Sometimes when you click on a hyperlink it does not work because the page that it should link to does not exist. Most web design packages will automatically test the web site that you create to make sure that all of the links work. 7. Hot Spots A hot spot is an area of an image which acts as a hyperlink. When a person clicks on a hot spot a hyperlink is followed to another page. The person viewing the web page can not see where the hot spots are but when the mouse pointer moves over a hot spot it will change shape. This image of a computer could be used on a web site about computers. It contains five hot spots but they are invisible. This is the same image but with the hot spots highlighted in colour. They would not normally be visible. If the user clicked on the image over the light blue hot spot he would be taken to a page about monitors. Clicking over the yellow hot spot would take the user to a page about keyboards. Hot spots are either rectangular or elliptical in shape. To create a hot spot on an image you simply need to select the area that the hot spot should cover and then specify what page should be loaded when the mouse is clicked in this area. You can create any number of hot spots on an image but they should not overlap with each other. 8. Tables Tables can be used to set data out neatly like this : Model Processor Speed RAM Capacity HDD Capacity
  8. 8. Fasta 1000Mhz 256Mb 18Gb Moderata 500Mhz 64Mb 6Gb Slowa 66Mhz 8Mb 2Gb When you create a table you specify : • How many rows and columns the table should have. • How wide each column should be. • What colour the cells in the table should be. • What style of border should be drawn around each cell (or if no border is required). The height of each cell will automatically adjust so that the information that you type into it will fit. It is also possible to merge adjacent cells in a table together to form merged cells which cover more than one row or column. Merged Cells Merged Cells Using Tables For Page Layout Tables can also be used for a second purpose. When you create a web page you can not simply position text and pictures wherever you want on the page as you could with a desktop publisher. If you want to create complicated page layouts with multiple columns of text then you can use tables to achieve this effect. Suppose that you wanted to create a page like this : This can be achieved by creating a table and merging the cells in the table together to form the shapes required for the different sections of the page.
  9. 9. The information that is to appear on the page can be typed into the cells of the table. You can place any type of information, including pictures and other tables in a cell. 9. Frames Frames are used to create web pages where one section of the page can be changed independently of another section. This is often done when web sites have a navigation panel at the side or bottom of the page. The panel contains icons which can be used to switch between the pages on the site. Selecting one of the icons will change the page that is displayed on the main part of the screen, but the navigation panel will remain the same. Each frame is identified by a name. When a hyperlink is created the web designer can specify which of the frames to load the link page into when it is selected. 10. Forms A form is used to obtain feedback from the people who use a website. Forms can be used to gather people's opinions about a site or to gather information that a company or organisation might want. Forms can be built up from several different types of controls. Some of the most important ones are shown in this table.
  10. 10. A short text entry box lets the user type in Short information. The web designer can specify What is your surname ? Text the maximum number of characters that can Entry be typed. Long A long text entry box lets the user type in Please enter your comments Text information. The text input area can be on this site : Entry scrolled to allow a lot of text to be entered. Radio buttons let the user select one or more Are you male or female ? Radio options from a list. The web designer Button chooses how many options can be picked at Male once. Female Please select your age A list box lets the user choose one option List Box group : from a list. Buttons are used to start actions such as Push sending the contents of the form or clearing Buttons the form. When a form has been completed the data that the user has entered must be sent to the person who runs the website. This can be done by transmission by email or by saving the form contents to a file on a web server. 11. Advanced Design Tools There are many different technologies which can be used to enhanced a web page. Some of these will only work with newer web browsers. Others require an extra piece of software called a plug-in to be installed in addition to the browser. Some of these additional technologies are listed below. Javascript is a simple programming language. Programs (or scripts) Javascript written in this language are often used to validate data entered onto a form before it is sent. Java is a complete programming language. Programs written in Java can Java be used in a web browser on any type of computer. An animated GIF is a sequence of images which are displayed one after Animated the other in rapid succession. This has the effect of displaying an GIFs animation. Sound can be added to web pages. This can be in the form of music Sound playing in the background whilst a page is displayed or noises which are made when options are selected. Video There are many different systems which can be used to display video
  11. 11. over the Internet. Videos require a lot of storage space and take a long time to transmit. Therefore video over the Internet is usually poor quality with a small image size and just a few frames per second. 12. Uploading Whilst you are developing a web site you will probably store it on the hard disk of your computer. When it is complete you will need to upload it onto a web server so that other people can access it. A web server is a computer which stores web pages. It responds to requests to view pages from other computers by sending the required pages to them. Many web servers are connected to the Internet. Some web servers are not connected to the Internet but are connected to a private network that is owned by a company. If this is the case then only people within the company will be able to view the pages on the server. This is known as an Intranet. The process of transferring your web site onto a web server is known as uploading. A service called File Transfer Protocol (FTP) is used for this purpose.