Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Lecture Outline
Document related concepts
no text concepts found
Transcript
Designing for the World Wide Web 14 8/3/2017 Chapter 14 Designing for the World Wide Web Lecture Outline The World Wide Web has become a place where designers can publish all kinds of media. This lesson shows the students some of the media types that they can use and introduces ways for working with that media. I. Working on the Web A. The workspace. 1. Consider that some users will still be using a monitor with 640 by 480 screen resolution. 2. Also, remember that the browser’s display window is smaller than the screen. B. Nibbling 1. Designers must constantly “nibble” content down for bandwidth. 2. Nibbling may involve the following: a) Reducing the size of images. b) Trimming bit depth of pictures and sound. c) Reducing playback window sizes. d) Choosing file formats for best compression. C. HTML and Multimedia. 1. Some HTML knowledge is required if you plan to place multimedia online. 2. Various HTML tags allow the use of multimedia elements in Web pages, including the following. a) <IMG> b) <OBJECT> 000-2 14-1 Designing for the World Wide Web c) 14 8/3/2017 <EMBED> d) <APPLET> II. Text for the Web A. Displaying text. 1. Fonts can be difficult to control. a) Fonts can be specified with the <FONT> tag, but only fonts available on a user’s system will be used. Other fonts on the user system will be substituted if required. b) Designers often use common fonts, such as Times, Courier, and Arial. c) Downloadable fonts are likely to become more common in the future. d) Some designers retain control over text appearance by converting text into a graphic. (1) This method consumes bandwidth and makes the HTML document less accessible to visually challenged users. 2. Other text attributes can be controlled using attributes in the <Font> tag. a) Color can be specified using markup such as: <FONT COLOR=”#FFFFFF”> (1) Color is usually expressed in hexadecimal values in HTML. b) Text size can be specified using markup such as: <FONT SIZE=”+2”> (1) Text generally must be larger on a computer screen than on paper. 3. Cascading style sheets (CSS) offer greater control over text appearance. a) Styles can be defined and then assigned to blocks of text. b) Styles can be defined in two ways. 000-2 14-2 Designing for the World Wide Web 14 8/3/2017 (1) In the <HEAD> of the HTML document. (2) HTML documents can also link to external style sheets. B. Making columns of text. 1. Newspaper columns can be produced using invisible tables. 2. Ensure that the text is readable and fits on screen on target platforms. C. Flowing text around images. 1. Text can flow around pictures by controlling the picture’s alignment. 2. Markup for flowing text around images may look like this: <IMG SRC=”gbsky.gif” ALIGN=”left” HSPACE=”X” AND VSPACE=”Y"> III. Images for the Web A. GIF images. 1. GIFs are limited to 8 bits (256 colors) of color depth. 2. GIFs can contain a series of pictures used for animation. 3. Unisys owns a patent on the compression format used in GIF images. a) Programs that produce GIFs are subject to licensing fees. B. PNG images. 1. PNG is an improvement on GIF, and does not require licensing fees. 2. PNG support is growing and includes Internet Explorer and Netscape. C. JPEG images. 1. JPEGs support 24-bit color. 2. JPEG is well suited to photo-realistic images. 3. JPEG compression is lossy, meaning that some quality is lost when the file is saved. 000-2 14-3 Designing for the World Wide Web a) 14 8/3/2017 Don’t save and resave an image; always work from an unaltered original saved in a lossless format such as PSD (native Photoshop), PICT (without compression), BMP, or TIFF. b) The compression ratio is variable, and depends on the software you use. D. Using Photoshop. 1. Always work with native PSD format files. a) Keep PSD files at full resolution. b) PSD files can have layers. c) Edit in RGB mode if the image is intended for online consumption. (1) The CMYK color mode is meant for print images. d) Edit the image and save the changes in a lossless native format. Then convert to your intended format (JPEG or GIF) and save that converted file. 2. Saving as JPEG files. a) Maintain the RGB mode. b) Flatten the layers. c) Use the Save As command. (1) You will be given a choice of quality settings on a scale. (2) You may be required to experiment before you obtain acceptable quality. 3. Saving as GIF files. a) Convert the file to an 8-bit (256 color) color palette. b) Photoshop also offers a Web-safe (216 color) color palette, which you may want to use. (1) The Web-safe palette includes the 216 colors that are shared by the 8-bit display modes on both the Macintosh and in Windows. 000-2 14-4 Designing for the World Wide Web c) 14 8/3/2017 Transparency (1) GIF89a export allows transparency. (2) Transparency can be especially useful for logos and navigation buttons. 4. Interlaced and progressive scans. a) GIFs and JPEGs can be saved in one of three ways. (1) Baseline: the image data is stored as a single top-to-bottom scan. (2) Interlaced: the image data is stored in four scan passes. (3) Progressive: the image data is organized in a different sequence within a file and progressively scanned in finer resolution. E. Backgrounds 1. Browsers allow you to place background images or color behind page content. 2. Background coloring. a) The background can be colored by adding an attribute to the <BODY> tag, as in: <BODY BGCOLOR=”#FF9933”> b) Choose colors carefully. (1) Provide adequate contrast and remember that a number of users are color-blind. 3. Background images. a) Background images are automatically tiled. b) Be extremely careful when choosing background images. (1) Make sure that the background doesn’t create readability problems. 4. 000-2 Sidebars 14-5 Designing for the World Wide Web a) 14 8/3/2017 Some designers use a background graphic to create a colored bar on the side of a page. F. Clickable buttons. 1. Graphic buttons can be made clickable by placing them in the <IMG> tag with a link that points to the document’s URL. 2. Use the BORDER=”0” attribute in the <IMG> tag to hide the blue border around the linked image. G. Image maps. 1. Clickable regions on a graphic can be defined with image maps. 2. The <IMG> tag should contain the USEMAP attribute. 3. Map coordinates (in pixels) are defined at the end of the document. 4. Image maps are often easier to produce with image map software. a) Without special software, you must figure out the coordinates on your own, which is often an arduous task. IV. Sound for the Web A. Background sounds. 1. Internet Explorer allows background sounds with the <BGSOUND> tag. 2. Formats allowed include the following. a) AU b) WAV c) MIDI B. Plug-ins and sound. 1. Browser plug-ins can be used to play sound. 2. Audio capable plug-ins include the following. a) 000-2 Apple QuickTime 14-6 Designing for the World Wide Web 14 8/3/2017 b) Windows Media Player 3. Audio can be embedded in a page using the <EMBED> and the <OBJECT> tags. V. Animation for the Web A. GIF89a 1. GIFs can be programmed to display a series of frames. 2. The display interval is expressed in 1/100th of a second. 3. Special software is required to produce an animated GIF. B. Plug-ins and players. 1. Various plug-ins can also be used for animation, such as the following. a) Macromedia Shockwave b) Apple QuickTime 000-2 14-7
