Building a Web Site Back to Table of Contents

Building a Web Site Fundamentals of Web Design Creating an Attractive Site 2 Building a Web Site Section 10-1 Section 10-2 Chapter 10

Building a Web Site Section 10-1 Why It’s Important Dynamic Web-page design is no accident. Although Web-page authors must learn the intricacies of design software and coding methods to produce quality sites, Web-site creation is possible today even for those with limited computer expertise. 3Section 10-1

Building a Web Site Section 10-1 Key Terms tags frames tables hyperlinks image map Cascading Style Sheets JavaScript Dynamic HTML Java 4Section 10-1

Building a Web Site Web-Design Basics To do business on the Internet, you need to build a Web site. You can pay someone to create your site for you, or you can design and build your own site. 5Section 10-1

Building a Web Site Specifics of Web Design To build your own Web site, you either need to learn HTML or use software that writes it for you. 6Section 10-1

Building a Web Site Specifics of Web Design Most beginning Web authors prefer to use WYSIWYG (pronounced “wizzy wig”) software. 7Section 10-1 WYSIWYG Whatyouseeiswhatyouget WYSIWYG software allows users to design and create a Web page without having to know HTML coding language.

Building a Web Site Specifics of Web Design WYSIWYG programs such as Adobe PageMaker, Microsoft FrontPage, and Macromedia Dreamweaver allow users to continuously view the page as it will appear to viewers. Even if you’re using WYSIWYG, however, it’s good to have at least a basic knowledge of HTML. 8Section 10-1

Building a Web Site Specifics of Web Design One popular alternative to WYSIWYG software is Macromedia Flash. Flash enables you to create animation and make your site more interactive. 9Section 10-1

Building a Web Site Specifics of Web Design HTML stands for “hypertext markup language.” HTML markup consists of elements, each of which usually has two tags: an opening tag and a closing one. tags formatting bits of code that define Web page elements 10Section 10-1

Specifics of Web Design 11 HTML Tags Section 10-1 HTML markup consists of elements, each of which usually has two tags; an opening tag and a closing one. Opening “paragraph” tag Closing “paragraph” tag

Building a Web Site Specifics of Web Design When you look at a frames- based page, you are actually seeing several Web pages displayed at the same time. frames allow for the display of more than one Web page in a single browser window 12Section 10-1 For ease of viewing, frames allow a site to organize and include many links on one page.

Building a Web Site Specifics of Web Design Frames are Web pages within Web pages. Frames allow a viewer to see more than one page at a time. For ease of viewing, frames allow a site to organize and include many links on one page. 13Section 10-1

Building a Web Site Specifics of Web Design Tables were the first tools used to design Web pages. tables originally developed to display lists of information that have multiple rows and columns of data, tables are now commonly used to create Web-page layouts 14Section 10-1

Building a Web Site Specifics of Web Design You might use a table to display product inventory and pricing information. 15Section 10-1 Product IDProduct NamePrice CD Storage Tower$ CD Replacement Cases$ CD-R 50 Pack$15.95

Building a Web Site Specifics of Web Design When visitors to your site click on a hyperlink, they instantly move to another location. hyperlink also called a hypertext link or simply link. Connects the current Internet document with another location in the same document, another document on the same Web site, or another document somewhere else on the Web; a blue, underlined font usually identifies links 16Section 10-1 Hyperlinks make it easy for your customers to find needed information, to select products, and to complete a purchase.

Building a Web Site Specifics of Web Design Many Web authors use graphical buttons or icons to identify links. For example, you can use a small image of an envelope to identify an link. 17Section 10-1

Building a Web Site Specifics of Web Design Another way to create graphical links on Web pages is with an image map. image map a graphic that has several different hot spots; the hot spots serve as links to more than one location 18Section 10-1 For example, you might use a map of the United States to provide links to state-specific shipping information.

Building a Web Site Advanced Web Design Tools To add style and interactivity to your online venture, you need to use technologies other than HTML. 19Section 10-1

Building a Web Site Technologies for Adding Design and Interactivity Cascading Style Sheets (CSS) allow Web designers to use HTML for page content, while using CSS to apply style, layout, and design. Cascading Style Sheets enables Web authors to define colors, fonts, link colors, layout, and other aspects of Web design; a single style sheet applies a cohesive design to every Web page, allowing authors to change the look of a site by editing only one document; works in conjunction with HTML 20Section 10-1

Technologies for Adding Design and Interactivity 21 Three Types of Cascading Style Sheets Section 10-1 external style sheet embedded style sheet inline style sheet An external style sheet is a separate document that can be linked to a page or to the site. An embedded style sheet is placed in the page itself and controls the style of single page. An inline style sheet adds style rules on a line-by-line basis.

Building a Web Site Technologies for Adding Design and Interactivity Web-site visitors want interactivity. Web designers can use JavaScript to add interactivity to a Web site. JavaScript short bits of code that add functionality to a Web page; a language which must run in connection with a Web page; distinct from Java 22Section 10-1

Building a Web Site Technologies for Adding Design and Interactivity Standard HTML is static; it can only be used to structure and display documents. Dynamic HTML (DHTML) allows Web authors to create stunning visual effects for their Web sites. Dynamic HTML (DHTML) a hybrid technology that combines HTML, CSS, and JavaScript to add dramatic effects and animation to Web pages 23Section 10-1

Building a Web Site Technologies for Adding Design and Interactivity You can use Java to create dynamic animations, menus, slideshows, and games. Java a programming language; distinct from JavaScript 24Section 10-1 Java programs for use on Web pages are called applets. applets a mini program that can carry out a specific function on a Web page

Building a Web Site Technologies for Adding Design and Interactivity Users must have Java installed or enabled on their browsers for the Java programming to function. For this reason, you should always include a set of text-based links on your site so customers without Java can still navigate your site. 25Section 10-1

Building a Web Site Section 10-1 Review What are frames? Why can they be an asset to a Web page’s appearance? Why is WYSIWYG software so helpful to novice Web-page creators? How are tables useful in Web-page design? Section 10-1

Building a Web Site Section 10-1 Review What is an image map? What are the three types of cascading style sheets? What are the major differences among them? Section 10-1

Building a Web Site Section 10-2 Why It’s Important When creating a Web page, every component must be considered. Particular attention should be paid to seemingly ordinary elements, such as fonts and graphics, so each part of the page flows together and is user- friendly. Section

Building a Web Site Section 10-2 Key Terms JPEG GIF button MP3 streaming video 29Section 10-2

Building a Web Site Visual Elements in Web Design Following basic Web-design principles will help you plan a pleasing site. 30Section 10-2

Building a Web Site Color Consistency A consistent color theme is an important part of Web-site design. Drastic changes in page color and imagery cause users to become confused, making it harder for them to find your products and services. 31Section 10-2

Building a Web Site Color Consistency Background is perhaps the most important use of color on your Web page. Most designers recommend white or off-white due to its high readability level. 32Section 10-2

Building a Web Site Visual Balance Make sure there is a proper balance of text, graphics, and blank space (called white space) on your Web page. Minimize your graphics and text, and use white space as areas for the eye to rest. 33Section 10-2

Building a Web Site Graphics Web-page graphics are any images used in Web-site design. Proper use of graphics can make a Web site look and feel like a magazine, offering colorful illustrations and powerful images instead of just plain text. 34Section 10-2

Building a Web Site Graphics Web pages with many graphics are slower to load than those with few graphics, so they may frustrate viewers and cause them to abandon a site. Generally, it’s best not overload a page with graphics that may take more than a few seconds to load. 35Section 10-2

Building a Web Site Graphics The most important thing to consider in creating Web graphics is file size. Large graphics files download slowly, so you need to save your graphics in a file type that can be compressed, or compacted to save space. 36Section 10-2

Building a Web Site Graphics The JPEG file format allows images to be saved with millions of colors. Joint Photographic Experts Group (JPEG) format that provides designers with high-quality images that can be saved in very small files; best suited for photographs 37Section 10-2

Building a Web Site Graphics The GIF file format allows images to be saved with 216 colors, but the images can be compressed with no loss of quality. graphic interchange format (GIF) format that allows images to be compressed with no loss of quality; commonly used for animations, cartoons, and logos 38Section 10-2 The GIF file format is ideal for graphics that don’t suffer from a limited color palette.

Building a Web Site Graphics Font is a typography term that categorizes a typeface or family of typefaces. Different fonts convey different moods to the reader. 39Section 10-2

Building a Web Site Graphics Fonts that are too large or too small may frustrate viewers. Some font styles are not available to all viewers, so using common typefaces helps ensure all viewers can read the text. 40Section 10-2

Building a Web Site Graphics Categories of Fonts 41Section 10-2 old style transitional modern slab sans serif cursive text letter decorative

Building a Web Site Graphics Web designers use buttons to help visitors navigate quickly and easily from one area to another. button graphic feature, usually a GIF file, that helps visitors navigate quickly and easily from one area to another 42Section 10-2 Buttons on a Web site help users find what they are seeking.

Building a Web Site Multimedia Multimedia can transform a boring Web site into a vibrant Internet destination. 43Section 10-2

Building a Web Site Multimedia You can use audio in various ways on a Web site. To use audio on your Web site, you must use software to convert it to a format that can be stored on the Internet. 44Section 10-2

Building a Web Site Multimedia There are many different audio formats that work on the Web. However, because of their small size and high quality, MP3 files have quickly become the most popular format. MP3 high quality audio format that works on the Web 45Section 10-2

Building a Web Site Multimedia If you plan to use long audio clips (more than a few minutes), consider using a software application to format the files for streaming audio. streaming audio format that enables audio files to play in real time rather than requiring a complete download 46Section 10-2

Building a Web Site Multimedia The potential uses of video on the Web are countless. However, because video files can be quite large, using streaming video is almost a must. 47Section 10-2

Building a Web Site Section 10-2 Review Why are font size and type significant in Web-page design? Are Web pages with lots of graphics generally preferable to those with very few? Why or why not? What are MP3 files? What makes them so popular? Section 10-2

Building a Web Site 49

Building a Web Site End of Building a Web Site Back to Table of Contents