BTT_Chapter_10 3/8/07 10:46 PM Page 283 REVIEW IT! AND DO IT! 1. What does hierarchical mean in web design? 2. What is a breadcrumb trail? Why is it important? 3. In addition to the three principles of graphic design, there are two concepts of web design. Explain these two concepts. 4. What is one of the best ways to organize and display information on web pages? 5. Discuss your favourite websites with a partner. Now, pick just one of these sites for the following activity: (a) Make a list of the type of information on the site’s home page. (b) Explain how the site uses or does not use each of the principles of graphic design and the concepts of web design. (c) Create a usability rating scale from one to five. Make a legend that explains what each of the five ratings means. For example, a rating of five out of five could mean all information is easily accessible and navigation structure is easy to use, whereas a rating of one out of five could mean this website is very confusing, and I could not find anything. Once you have created your rating system, rate the site’s usability out of five, and then write a short review justifying your rating. How to Make a Website Implementation is the part of the website-design process that most people associate with making websites. This stage involves everything from preparing graphic elements such as buttons and pictures, to putting text and images into pages, and adding hyperlinks. Figure 10.12 Creating graphic elements, such as buttons, is part of the website design process. NEL A P P L I C A T I O N S T H A T G E T Y O U N O T I C E D—W E B D E S I G N 283 BTT_Chapter_10 3/8/07 10:46 PM Page 284 File Management Before starting to create a website, you should always create a folder that will hold all of your website’s files or assets. These assets will include all of your site’s HTML files, images, animations, and so on. This is important because if your files are not all held in an appropriate, central place, you may run into problems when inserting images and links. If your viewers experience missing images and broken links, this will damage your credibility. The first web page that you create will be your home page. It should usually be named index.htm or index.html because if a user types in your URL without a file name specified, the web server automatically looks for a default file. This default file name is set by the web server’s administrator, and is usually index, although it could also be default or something else. If the web server looks for a page but cannot find one with the default name, you risk an error message being displayed on your user’s screen or, more worrisome, the entire contents of your website being displayed as a list of files that can be downloaded and taken by the website’s user. Remember that web servers often enforce case sensitivity, which means that Index.htm is not the same as INDEX.htm, which is not the same as index.htm. As a rule, you should always name your pages in lowercase letters without spaces. If you are tempted to put a space in a file name, use an underscore or hyphen instead. Figure 10.13 WYSIWYG web-editing software allows you to create a web page quickly and easily. WYSIWYG GET ON IT! PROJECT UPDATE Using your hierarchy diagram, go through each of the pages and decide on an appropriate file name for each. Start with your home page. This should be called index.htm, as discussed above. All your other pages should be given names that are relevant to their content. For example, a page about motivation could be called motivation.htm. Add these file names to your hierarchy diagram. Creating Pages Websites are most often created using a coding language called HyperText Markup Language (HTML). This code determines how a page of text will look when it is displayed in a web browser. The good news is that with today’s powerful What You See Is What You Get (WYSIWYG) web editors such as Macromedia Dreamweaver and Microsoft FrontPage, you may never have to see HTML, let 284 B U S I N E S S T E C H N O L O G Y TO D AY NEL BTT_Chapter_10 3/8/07 10:46 PM Page 285 alone understand it. WYSIWYG web-editing software allows you to create a web page while it does the more complicated work of generating HTML behind the scenes. However, you no longer even have to have a web editor to make web pages. In fact, you can now create web pages from just about any software by using the Save As command on the File menu. For example, when you have created a document in most versions of Microsoft Word, you can go to Save As, and then select HTML from Save As Type, as shown in Figure 10.14 below. Figure 10.14 Using the Save As command, you can create web pages without a web editor. When using Corel WordPerfect, use the Publish to HTML command on the File menu. Another option is to use one of the website wizards in a desktop-publishing program like Microsoft Publisher. These will create your full website, including navigation, so that all you have to do is edit the content. Figure 10.15 A typical HTML page created in Macromedia Dreamweaver NEL A P P L I C A T I O N S T H A T G E T Y O U N O T I C E D—W E B D E S I G N 285 BTT_Chapter_10 3/8/07 10:46 PM QUICK BYTE CLOSING TAGS—HTML AND XHTML In HTML, closing tags are not required for the <br>, <hr>, and <img> tags. However, in Extensible Hypertext Markup Language (XHTML), they are. XHTML is a stricter and cleaner version of HTML, and it is emerging as the new standard for writing web pages. This does not mean that you would use <br></br> to create an opening and closing tag for a line break. In fact, both opening and closing are combined into one tag. Therefore, the correct tags for those without a closing tag in HTML are as follows: HTML <br> <hr> <img> XHMTL <br /> <hr /> <img /> In addition to requiring closing tags, XHTML requires that all tags be typed using lowercase letters. To learn more about the differences between HTML and XHTML, and about writing HTML files, go to www.nelson.com/btt. Page 286 HTML files are just text files with special instructions, called tags, within them. These tags can be identified by their angle brackets (< and >). They tell a web browser what to do with the information that they hold. The HTML in Figure 10.15 on the previous page would be translated by the browser as follows: Line Tag What the HTML Tag Tells the Browser 1 <html> The following text should be interpreted as HTML. 2 <head> The following text should not be shown in the browser. 3 <title> The text between <title> and </title> should be interpreted as the title of the page and displayed in the browser’s title bar. 4 </head> The head of this document is ending. 5 <body> The text that follows should be considered the body of the page. The body contains the page’s content and should be displayed to users. 6 <p> The text between <p> and </p> should be interpreted as a paragraph. 7 </body> The page’s content ends here. 8 </html> Stop interpreting text as HTML. Figure 10.16 What the HTML tag tells the browser The three tags that all HTML documents must have are <html>, <head>, and <body>. Beyond that, you are free to use whatever you would like. Figure 10.17 below shows a summary of basic tags. Tag What It Does Closing Tag <p> Defines a paragraph </p> <br> Forces a line break Not required <h1> Creates a level-one heading </h1> <h2> Creates a level-two heading </h2> <hr> Creates a horizontal rule or line across the page Not required <a> Anchor used to define a hyperlink </a> <ul> Creates an unordered or bulleted list </ul> <ol> Creates an ordered or numbered list </ol> <li> Defines an item in an unordered or ordered list </li> <table> Creates a table </table> <tr> Defines a table row </tr> <td> Defines table data or a table cell </td> <img> Inserts an image Not required Figure 10.17 What HTML tags do 286 B U S I N E S S T E C H N O L O G Y TO D AY NEL BTT_Chapter_10 3/8/07 10:46 PM Page 287 REVIEW IT! AND DO IT! QUICK BYTE 1. Why should all of a website’s files be in one folder? 2. What should the file name of a website’s home page be? Why? 3. Explain what case sensitivity means. 4. Explain what HTML tags do. 5. What three tags must be included in all HTML pages? 6. Open a text editor like Notepad. Key in the HTML-page text shown in Figure 10.15. When you have finished, select the Save command from the File menu. Enter test.htm as the file name. Change Save As Type: to All Files. Click Save. Now go to the place on your computer where you saved test.htm using Windows Explorer. Double-click the file, and it should open in your computer’s default web browser. Take a look at the browser’s title bar. Does it say My First Web Page? Go back to your Notepad file and change what the paragraph text says (text after the <body> tag). Save your file in Notepad again, and then refresh your browser. Did the text change? Try out some of the other tags. 7. Go to www.nelson.com/btt. Work through some of the examples provided. You will get to try out all kinds of tags, including those for creating tables. GET ON IT! PROJECT UPDATE CASCADING STYLE SHEETS (CSS) Chances are that you will want to change the appearance of the default heading and paragraph text in your web editor. You can always do this using the associated properties; however, this is not the best way to make things look good and consistent. The most efficient and professional way to achieve consistent formatting is through the use of Cascading Style Sheets (CSS). CSS define how to display HTML elements. You can set everything from fonts and colours to line spacing and alignment. To learn how to use styles, go to www.nelson.com/btt. Earlier in this chapter, you created sketches for your website’s pages. If you used a table structure as was suggested, it will be easy to create your home page’s structure using a web editor. Open a new file, and save it immediately as index.htm. Now use your web editor’s tools to create tables that are the same as in your design. You can now add text to the appropriate table cells. You will add images as you work through the next section of the text. Preparing Images As you will recall from Chapter 9, there are certain types of files that can be used on the Web and others that cannot. To use images on the Web, you need to resize them and export them in JPEG, GIF, or—in cases where image quality is very important—PNG format. NEL A P P L I C A T I O N S T H A T G E T Y O U N O T I C E D—W E B D E S I G N 287 BTT_Chapter_10 12/2/07 5:22 PM Page 288 Other image formats are not compatible with web-browser software. Note that PNG files are much larger than JPEG or GIF files, and, therefore, they will take longer to download. Remember, anything that increases the loading time of your web page reduces its usability, and so reduces the likelihood that people will read it. When resizing images, you should do so in a graphics editor instead of a web editor. This is because if you resize an image in a web editor, it retains its original file size, which is often very large. In addition, image quality suffers. However, if you resize in a graphics editor, the file size is dramatically reduced, and the image retains its quality. Often, you can perform two tasks at once by using the Export Preview or Save for Web command in your graphics editor. You will then be able to resize your image and export it as a websupported format. When saving images for your website, it is a good idea to keep them organized in a folder. This folder can be called whatever you like, but images is probably the most obvious and appropriate name. Ensure that you keep your images folder inside your website folder, and that you save in it only images that are for use on your web pages. It should not contain any HTML pages or original graphic files in native bitmap or vector formats from programs such as Adobe Photoshop or Macromedia Freehand. These original files should be kept safe elsewhere in case you need to go back to them later. GIF JPEG Figure 10.18 Images on websites are usually one of two different formats: GIF or JPEG. 288 B U S I N E S S T E C H N O L O G Y TO D AY NEL BTT_Chapter_10 3/8/07 10:46 PM Page 289 GET ON IT! PROJECT UPDATE Get out your hierarchy diagram for your Chapter Project website. Look at Figure 10.19 below. This table has Page File Name Images Required Exercise home index.htm • banner • site logo • buttons Weight training weight-training.htm • • • • banner site logo buttons photograph of teen lifting weights Figure 10.19 Keeping track of assets for website pages been created to keep track of all of the resources needed for each of the pages in the exercise site for teenage boys. You can see that the page’s subject is placed in the first column, the file name (also found on your hierarchy diagram) is in the second column, and the images that will be required for the page are placed in the third column. Now, use your own hierarchy diagram to create a similar table for your own website. Ensure that you include all of the pages in your site. Once you have completed your table, collect all of the images that you require for your home page, and use your web editor to place them onto your page. Adding Hyperlinks As you learned in Chapter 3, the wonderful thing about the Internet is that you can move from document to document easily using hyperlinks. These are very simple to create, whether you are using a web editor, word-processing software, or desktoppublishing software: • Macromedia Dreamweaver—Select the text or image that you want to convert to a link. Then key or paste the URL into the Link property box on the Properties panel or browse for a file in your web folder on your computer. • Microsoft FrontPage, Word, Publisher—Select the text or image that you want to convert to a link, and then select the Hyperlink command from the Insert menu. Select a document in your web folder on your computer, or type or paste a URL. • Corel WordPerfect—Select the text or image that you want to convert to a link, and then select the Hyperlink command from the Tools menu. Select a document in your web folder on your computer, or key or paste a URL. When you are entering a URL for your hyperlink, you must ensure that it starts with http://, which tells the browser to use HyperText Transfer Protocol to access the web page. Figure 10.20 You can use many different kinds of application software to create hyperlinks. NEL A P P L I C A T I O N S T H A T G E T Y O U N O T I C E D—W E B D E S I G N 289 BTT_Chapter_10 3/8/07 10:46 PM Page 290 GET ON IT! PROJECT UPDATE So far, you have saved your home page, created the structure using HTML tables, entered text, and added images. Now you must put some text-based hyperlinks into your page. Ensure that you use the instructions from this chapter to incorporate at least five different hyperlinks to sites that are related to the content on your home page. Getting It Online In order to get your website online, you need two things: a domain name and space on a web server. If you want to register a dot-ca domain name, you must find a registrar that is certified by the Canadian Internet Registration Authority (CIRA). A registrar is a company that specializes in registering domain names. Most of the CIRA-certified registrars also offer dot-com, dot-net, and dot-org addresses. However, be aware that prices range dramatically from company to company. It is a good idea to shop around for the best deal. Figure 10.21 All dot-ca domain names must be registered with a CIRA-certified registrar. BIZTEK DVD E-Commerce Shopping on the Internet is the latest trend for retailers, but is the high cost of startup worth the investment? After viewing the clip, make a list of things a web designer should consider and/or do in order to make an e-commerce site more effective. Explore the world of Internet shopping, and discuss how it reflects the design of websites. 290 B U S I N E S S T E C H N O L O G Y TO D AY Once you have secured your domain name, you will require a host that will supply space on a web server. Although you can find various hosts that cost money, there are also many free hosting services out there. Some allow you to have open File Transfer Protocol (FTP) access so that you can upload your pages using an application like GlobalSCAPE’s CuteFTP, SmartFTP, or Fetch (for Mac users). Others will restrict your FTP usage by making you employ their web-based applications to upload your files. It is the hosting service’s responsibility to administer the web servers and ensure that your website is online. NEL