Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Building a Web Site Back to Table of Contents Chapter 10 Building a Web Site Section Section 10-1 10-2 Fundamentals of Web Design Building a Creating an Attractive Web Site Site 2 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. Section 10-1 3 Building a Web Site Section 10-1 Key Terms tags frames tables hyperlinks image map Section 10-1 Cascading Style Sheets JavaScript Dynamic HTML Java 4 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. Section 10-1 5 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. Section 10-1 6 Building a Web Site Specifics of Web Design Most beginning Web authors prefer to use WYSIWYG (pronounced “wizzy wig”) software. WYSIWYG What you see is what you get WYSIWYG software allows users to design and create a Web page without having to know HTML coding language. Section 10-1 7 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. Section 10-1 8 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. Section 10-1 9 Building a Web Site Specifics of Web Design HTML stands for “hypertext markup language.” tags formatting bits of code that define Web page elements HTML markup consists of elements, each of which usually has two tags: an opening tag and a closing one. Section 10-1 10 Specifics of Web Design HTML Tags Opening “paragraph” tag <p> HTML markup consists of elements, each of which usually has two tags; an opening tag and a closing one. </p> Closing “paragraph” tag Section 10-1 11 Building a Web Site Specifics of Web Design When you look at a framesbased 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 For ease of viewing, frames allow a site to organize and include many links on one page. Section 10-1 12 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. Section 10-1 13 Building a Web Site Specifics of Web Design Tables were the first tools used to design Web pages. Section 10-1 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 14 Building a Web Site Specifics of Web Design You might use a table to display product inventory and pricing information. Section 10-1 Product ID Product Name Price 22334554 CD Storage Tower $24.59 22334555 CD Replacement Cases $9.95 22334556 CD-R 50 Pack $15.95 15 Building a Web Site Specifics of Web Design When visitors to your site click on a hyperlink, they instantly move to another location. Hyperlinks make it easy for your customers to find needed information, to select products, and to complete a purchase. Section 10-1 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 16 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 e-mail link. Section 10-1 17 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 For example, you might use a map of the United States to provide links to state-specific shipping information. Section 10-1 18 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. Section 10-1 19 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. Section 10-1 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 20 Technologies for Adding Design and Interactivity Three Types of Cascading Style Sheets An external style sheet is a separate document that can be linked to a page or to the site. external style sheet An embedded style sheet is placed in the page itself and style sheet controls theembedded style of single page. An inline style sheet addsstyle style rules on a line-by-line basis. inline sheet Section 10-1 21 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. Section 10-1 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 22 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) a hybrid technology that combines HTML, CSS, and JavaScript to add dramatic effects and animation to Web pages Dynamic HTML (DHTML) allows Web authors to create stunning visual effects for their Web sites. Section 10-1 23 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 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 Section 10-1 24 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. Section 10-1 25 Building a Web Site Section 10-1 Review 1. What are frames? Why can they be an asset to a Web page’s appearance? 2. Why is WYSIWYG software so helpful to novice Web-page creators? 3. How are tables useful in Web-page design? Section 10-1 26 Building a Web Site Section 10-1 Review 4. What is an image map? 5. What are the three types of cascading style sheets? What are the major differences among them? Section 10-1 27 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 userfriendly. Section 10-2 28 Building a Web Site Section 10-2 Key Terms JPEG GIF button Section 10-2 MP3 streaming video 29 Building a Web Site Visual Elements in Web Design Following basic Web-design principles will help you plan a pleasing site. Section 10-2 30 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. Section 10-2 31 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. Section 10-2 32 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. Section 10-2 33 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. Section 10-2 34 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. Section 10-2 35 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. Section 10-2 36 Building a Web Site Graphics The JPEG file format allows images to be saved with millions of colors. Section 10-2 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 37 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 The GIF file format is ideal for graphics that don’t suffer from a limited color palette. Section 10-2 38 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. Section 10-2 39 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. Section 10-2 40 Building a Web Site Graphics Categories of Fonts old style transitional modern slab Section 10-2 sans serif cursive text letter decorative 41 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 Buttons on a Web site help users find what they are seeking. Section 10-2 42 Building a Web Site Multimedia Multimedia can transform a boring Web site into a vibrant Internet destination. Section 10-2 43 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. Section 10-2 44 Building a Web Site Multimedia There are many different audio formats that work on the Web. MP3 high quality audio format that works on the Web However, because of their small size and high quality, MP3 files have quickly become the most popular format. Section 10-2 45 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. Section 10-2 streaming audio format that enables audio files to play in real time rather than requiring a complete download 46 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. Section 10-2 47 Building a Web Site Section 10-2 Review 1. Why are font size and type significant in Web-page design? 2. Are Web pages with lots of graphics generally preferable to those with very few? Why or why not? 3. What are MP3 files? What makes them so popular? Section 10-2 48 Building a Web Site 49 End of Building a Web Site Back to Table of Contents