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
The Web Design Environment GBA 578 Objectives • Describe the current state of HTML • Understand XML, an open standard for structuring data • Understand XHTML, the future of HTML • Describe how Web browsers display your work • Code for multiple screen resolutions • Understand bandwidth concerns Objectives continued • Understand important web design considerations and practices to prevent bad design • Understand the different parts of the web planning process and web development team • Understand different web page elements and how to create them HTML • Hypertext Markup Language – First proposed by CERN in 1989 – It is non-linear so it allows you to jump from place to place – Markup refers to the structure of the language so you can identify what is going on • Source code example • W3C – new governing body that regulates HTML coding – W3 consortium Special Tags for Special Browsers • The Internet Explorer (IE) fight versus Netscape Navigator (Communicator) – <FONT>, <CENTER> – <MARQUEE> versus <BLINK> • Cascading Style Sheets – A mechanism used to eliminate coding and establishing consistency HTML as a Markup Language • A markup language is a structured language that lets you identify common sections of a document such as headings, paragraphs, and lists • An HTML file includes text and HTML markup elements • The browser interprets the HTML markup elements and displays the results, hiding the actual markup tags from the user HTML as a Markup Language • HTML is an open, non-proprietary, crossplatform compatible language • HTML is not a What You See Is What You Get (WYSIWYG) layout tool • HTML was intended only to express logical document structure, not display characteristics XML: An Open Standard • XML is the Extensible Markup Language • XML is a meta-language; not a language itself, but a language that lets you describe other languages • XML describes data, not presentation • XML allows better access to data • XML lends itself to customized information XML Syntax Rules • • • • • Documents must be well-formed Elements must nest correctly XML is case-sensitive End tags are required Empty elements are signified by a closing slash • Attribute values must be quoted XHTML: The Future of HTML • XHTML is a reformulation of HTML 4.01 in XML • Brings data-handling benefits of XML to HTML • Style sheets are required • Stricter syntax rules Parts of the “WEB” • Web Browsers • Coding and plug-ins • HTML Editors—range from pure text interface to a WYSIWYG – Frontpage – Dreamweaver – Notepad – PICO Web Design Considerations Part I • Screen Resolution • Download times • Visual Structures – – – – Use of white space Guiding the user’s eye Hyperlinks Hierarchy • Transitions • Page length How people read websites. • People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. • As a result, Web pages have to employ scannable text, using – highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others) – meaningful sub-headings (not "clever" ones) – bulleted lists – one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph) – the inverted pyramid style, starting with the conclusion. – half the word count (or less) than conventional writing Continued • Word on web pages need to be credible (ie. good writing, graphics) • Viewers detest “marketese” that is promotion language that they cannot verify if it is true or not. • Three main types of web language – Scanable- where information can be easily found and determined, ie. bulleted lists – Objective- language written in paragraph form (least effective) – Combination- a mix between the two (most effective) Web Design Considerations Part II • • • • • • • Knowing HTML Limitations Design Considerations Understanding Download Times Using very little glitz. Check Out Your Own Web Site Understanding Your Service Provider Final Web Design Considerations HTML Limitations • HTML (HyperText Markup Language) is a very general language designed to place information on web pages. It is not a word processing or desktop publishing tool. The sooner you come to grips with this fact, the faster you will become an effective webdesigner. Here's why: – No two browsers show a page quite the same way. – Even if everyone were to use the same browser, not everyone would have the same resolution as you. – It really never was intended to be as specific as a word processor, and its fundamental structure reflects this. – Nobody owns the web. Therefore, standards are rather difficult to enforce. Design Considerations • Assume everyone has their screen set to 640x480 and 256 colors.. This minor detail is very often overlooked by web authors. – If you want to go "wide", then make sure that what you consider the material of primary importance to your reader is located on the left side of the screen. – Forces the user to use the right-left scroll bar to read the text. – Banner and navigation art can be unrecognizable. Even worse scenarios are possible with background images. – Do use TABLES (now supported by almost all browsers) to create some white-space in your pages. – Use very basic color schemes and avoid noisy background images. – Always use ALT (image descriptions) with your images so that people with text browsers can use and understand your pages. Not doing this prevents a lot of students from enjoying your site. Understanding Download Times • Nobody has their own personal T-1 connection to the web. Okay, so maybe you have one, but most people are using either 28.8K or 56(haha)K modems. As a rule of thumb, do not create pages that take more than 30 to 60 seconds to load at 28.8K. You can accomplish this by: – Using graphics sparingly, and using color reduction when possible. – Use Interlaced GIF images (89a standard) when possible. These provide a nice fade-in effect that allows people a sneak preview of your image as it comes into view. – If you do have a lot of images to present on one page, use thumbnails (small versions) and link the larger images to them. If the reader wants, they can then view the picture in its full glory! – Always indicate the HEIGHT and WIDTH of your images. Many browsers cannot display any part of the page until it knows all of the dimensions of the objects that the page consists of. Avoid Using Glitz in Your Web Page • Avoid Glitz and the Cutting Edge of Web Technology. – Use animation sparingly. An animation is a nice touch and a great way to draw somebody's attention to something you want to feature. There is however, nothing as annoying and distracting than a collection of flashing images all over the screen. – Keeping in mind that no two browsers handle things quite the same, avoid what are called browser specific tags. If the viewer's browser does not support the tag, the item will either be ignored, or displayed as plain text. Check Out Your Own Web Site • View your website in; – Internet Explorer – Netscape Navigator – AOL (if possible) – A 28.8 modem if possible Understanding Your Service Provider • Make sure you put your site where it belongs. If you are placing your site on your personal webspace that came with your Internet service, make sure you are aware of any restrictions. These include: – Maximum number of page accesses per month. – Maximum number of bytes downloaded per month. – Restrictions on commercial messages. Some providers even consider naming your employer a violation that could cause you to be charged commercial rates! – Can you have CGI-BIN and Server Side Includes. If not, you cannot have a nice interactive website. Final Web Design Considerations • SPELLING & GRAMMAR: I cannot stress the importance of proper spelling and grammar strongly enough. • Never include an image in any page that you are calling from somebody else's site! It is very rude in that it steals bandwidth from the owner of the image. This can cause them to incur charges as well as have their site slow down. Actually, the odds are it will be your page that suffers! If you must, just take a copy and put it on your server. Do give credit where credit is due. • But you can get free stuff from http://www.reallybig.com/default.shtml Creating a web site Step One • Planning the web site—what type – Billboard – Publishing – Special/public interest/nonprofit – Virtual gallery – Ecommerce, catalog, online shopping – Product support – Intranet/extranet Step Two Analyze your audience • What is it that users want when they come to your site? • How can you attract and entice them to return for repeat visits? • What type of computer and connection speed does your typical visitor have? More considerations… • • • • Gender Education Level Technical Aptitude What motivation? – Informational – Economic – Social • Do you have a captive audience? Step 3 Building a Web Development Team • • • • • • • Server Administrator Designers HTML coders Writers Software programmers Database administrators Marketing Step 4 File Names and URLs • Names – Front door URL – Page names • Case Sensitivity • Character Exceptions that you CANNOT USE – /,/,&,*, <,>, and blank spaces • File Extensions – – – – – – .htm .html .asp .xls .gif .jpg Complete URLs and Directory Structure • http://isec.sandiego.edu/carl/gba576.asp • Versus gba576.asp • Relative versus absolute paths Diagram the Site • • Plan your site by creating a flowchart that shows the structure and logic behind the content presentation and navigation choices This preliminary step is one of the most important that you take in planning your site • Structures – – – – – – Linear information Tutorial Web Hierarchical Catalog cluster Linear Structure • The linear information structure lets you guide the user along a path. This structure lends itself to book-type presentations or content that requires the user to follow a predefined path. Tutorial Structure • The tutorial structure is perfect for computerbased training content such as lessons, tutorials, or task-oriented procedures Web Structure • Many smaller Web sites follow the Web structure which offers links to and from every page in the site. This allows the user to jump freely to any page from any other page. Hierarchical Structure • The hierarchical structure is probably the most common information design. It lends itself to larger content collections because the section pages break up and organize the content at different levels throughout the site. Cluster Structure • The cluster structure is similar to the hierarchical structure, except that every topic area is an island of information unto itself, with all pages in each cluster linked to each other Catalog Structure • The catalog structure accommodates electronic shopping. The user can browse or search for items and view specific information about each product on the item pages. Structure Summary • Start with pencil and paper. Your ideas will be less restricted and you can easily revise and recast without recoding. • Write a site specification document. You’ll find it invaluable as a reference while building your site. Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions: • • • • Where am I? Where can I go? How do I get there? How do I get back to where I started? Creating Usable Navigation To answer these questions, provide the following information: • Let users know what page they are on, and what type of content they are viewing • Let users know where they are in relation to the rest of the site Creating Usable Navigation • Provide consistent, easy-to-understand links • Provide alternatives to the browser’s Back button that lets users return to their starting point Limit Information Overload • Create manageable information segments • Control page length • Use hypertext to connect facts, relationships, and concepts Using Text-Based Navigation • Text-based linking is often the most effective way to provide navigation on your site • It can work in both text-only and graphical browsers • Always provide a text-based set of links as an alternate means of navigation Sample Text Navigation The following screens demonstrate a variety of text-based navigation options: • To main pages (home, table of contents, index) • To the top of each chapter • Within the table of contents page to chapter descriptions • From table of contents page to specific topics within each chapter Sample Text Navigation The following screens demonstrate a variety of text-based navigation options: • Between the previous and next chapter • Within chapter pages to each topic • To related information by using contextual links Graphics for Navigation • Standardize your navigation graphics • Provide predictable navigation cues for the user • Repeat graphics to minimize download time • Use consistent placement and design of navigation graphics to reassure the user • Use easily understandable graphics Navigation Summary • Work from the user's point of view. Think about where users want to go within your site, and make it easy for them to get there. • Add plenty of links so it's easy to get around your site. Link to fragments as well as whole pages. Make it easy to get back to your navigation options. • In addition to providing links, make sure you provide plenty of location cues to let the user know where they are Navigation Summary continued • Do you have to use graphics for linking? Rethink the objectives of your site and determine whether text will do as well. Every additional graphic adds to download time. • Don't forget to provide ALT values to your <img> tags to provide alternate navigation options for the user Step Six Actual Building the Page • • • • Tables Forms Graphics Typography Using Table Elements • To build effective page templates, you must be familiar with the HTML table elements and attributes • The <table> element contains the table information, which consists of table row elements <tr>, and individual table data cells <td>. These are the three elements you will use most frequently when you are building tables. Basic Table Code <TABLE BORDER> <TR><TD>Stock Number</TD><TD>Description</TD><TD>List Price</TD></TR> <TR><TD>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR> <TR><TD>3478-AB</TD><TD>78mm Socket</TD><TD>47.50</TD></TR> <TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR> </TABLE> Captions and Table Header • <caption> lets you add a caption to the top or bottom of the table. By default, captions display at the top of the table. You can use the align=“bottom” attribute to align the caption at the bottom of the table. • The <th> tag lets you create a table header cell that presents the cell content as bold and centered Defining Table Attributes • Table attributes let you further define a number of table characteristics. You can apply attributes at three levels of table structure: global, row-level, or cell-level. Spanning Columns • The COLSPAN attribute lets you create cells that span multiple columns of a table. Column cells always span to the right. Spanning Rows • The ROWSPAN attribute lets you create cells that span multiple rows of a table. Rows always span down. Relative or Absolute Widths • Set relative table widths as percentages in the table width attribute. If you choose relative table widths, your tables will resize based on the size of the browser window. • Set absolute table widths as pixel values in the table width attribute. Fixed tables remain constant regardless of the browser window size. Calculating Table Widths • The most common width for page template tables is approximately 750 pixels. This width supports the 800 x 600 screen resolution. Default Table Spacing • Default spacing values are included in the table even when you don’t specify values for the table’s border, cellpadding, or cellspacing attributes • Depending on the browser, approximately two pixels are reserved for each of these values • You can remove the default spacing by explicitly stating a zero value for each attribute Table Pointers • Write easy-to-read code - You can simplify your table creation and maintenance tasks by writing clean, commented code • Remove extra spaces - Always remove any leading or trailing spaces in your table cell content • Center tables - Centering a fixed table makes the table independent of resolution changes, because the table is always centered in the browser window Table Pointers • Stack tables - Because of the way browsers display tables, it’s best to build several smaller tables rather than one large one • Nest tables - You can nest tables by placing an entire table within a table cell Creating a Page Template • In this example you’ll see how to take a design sketch for a Web page and build a template for the page layout • Figure 5-19 shows a sketch of the desired layout. This layout is designed for a base screen resolution of 800 x 600, so the table will be fixed at a width of 750 pixels. Creating a Page Template • Notice that the basic structure of the table is 3 rows by 4 columns. Each column uses 25% of the total width of the template. Row spans and column spans break across the layout to provide visual interest. Build the Basic Structure • Start by building the basic table structure, including all the cells and rows of the table • As you customize the table you can remove extraneous cells as necessary • The basic structure is a 3-row by 4-column table Setting a Fixed Width • One of the design characteristics of the template is a fixed width that is not dependent on the user’s browser size or screen resolution • To accomplish this, use a pixel value in the global WIDTH attribute Creating the Page Banner • The page banner cell is R1C1. This cell spans the four columns of the table using the colspan attribute. Creating the Feature Cell • The Feature cell in the layout is R2C2, and spans two columns. This column span requires the removal of one cell in row two to make room for the span. Creating the Link Columns • The New Link and Linked Ads columns in the layout reside in cells R2C1 and R2C3 respectively. These cells span rows 2 and 3 of the table. The row spans require the removal of cells R3C1 and R3C4. Creating the Page Banner • Column widths must be set in only one cell per column • It’s also best to set the column widths in only one row of the table • Setting the column width ensures that the text will wrap properly Testing the Template • To verify that your template works properly, populate it with test content • Test the template in multiple browsers Template Examples • The following templates cover a variety of page layout needs • You may choose to stack different templates on top of each other for more complex layouts Tables Summary • Plan your tables by sketching them out first • Use fixed table widths if you want to determine the size of your page rather than letting the browser determine the width • Use relative widths if you want to build tables that resize with the browser window, wrapping your content to fit Tables Summary continued • Work on your pages with the table borders turned on, which displays the cell boundaries. When you are finished with your layout you can turn the borders off. • Size your tables based on the page size you want to create. Use 800 x 600 as your base screen resolution. In most cases you’ll set the width but not the height of your tables, allowing the content to flow down the page. Type Design Principles • • • • Choose fewer fonts and sizes Choose available fonts Design for legibility Avoid using text as graphics Using the <font> Element • Use <font> to set font size and color and to specify font substitution • With HTML 4.0, the <font> tag has been deprecated in favor of CSS. To ensure forward compatibility, you should consider moving to CSS, and limit or replace the <font> element in your code. Type Summary • Use type to communicate information structure. Be sparing with your type choices, and use fonts consistently. • Remember that HTML text downloads faster than graphics-based text. Use HTML text whenever possible. • Use browser-safe fonts that will display as consistently as possible across operating systems File Format Basics • You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format, SVG, is not yet in common use. • These formats all compress images to create smaller files. Knowing which file format to use for which type of image is important. • If you choose the wrong file type, your image won’t compress or display properly GIF Format • GIF uses a lossless compression technique, meaning that no color information is discarded when the image is compressed • The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors • GIF excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics GIF Transparency • With GIF files, you can choose any one color in an image to appear as transparent in the browser • The background color or pattern will show through the areas that you have designated as transparent • Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than being bounded by a rectangle GIF Animation • The GIF format lets you store multiple images and timing information about the images in a single file • This means that you can build animations consisting of multiple static images that play continuously, creating the illusion of motion JPG Format • JPG is best for photographs or continuous tone images • JPGs are 24-bit RGB images that allow millions of colors • JPGs use a “lossy” compression routine especially designed for photographic images. When the image is compressed, some color information is discarded, resulting in a loss of quality from the original image. JPG Format • When you create the JPG file, you can also manually balance the amount of compression versus the resulting image quality • The higher the compression, the lower the image quality. You can play with this setting to create files that are as small as possible but still look good. • Many photos can sustain quite a bit of compression while still maintaining image integrity PNG Format • A royalty-free file format that is intended to replace GIF • This lossless format compresses 8-bit images to smaller file sizes than GIF • PNG supports transparency and interlacing but not animation SVG Format • A new standard from the W3C • A language for describing two-dimensional graphics using XML • SVG graphics are scalable to different display resolutions and are printable • Not yet supported by most browsers Interlacing & Progressive Display • Most Web-capable graphics editors let you save images in an interlaced or progressive format • You can choose this display option when creating GIF, PNG, and JPG files • GIF and PNG files use interlacing, while JPGs use progression Interlacing & Progressive Display • Interlacing and progressive display are generally the same thing—the gradual display of a graphic in a series of passes as the data arrives in the browser Where You Can Find Images • • • • • • • Stock photo collections Digital cameras Scanner Public-domain Web sites Clip art Create your own Remember to respect copyright laws! Which format? • GIF: The everyday file format for all types of simple colored graphics and line art. Use GIF sparingly for its animation capabilities to add visual interest to your pages. GIF’s transparency feature lets you seamlessly integrate graphics into your Web site. • JPG: Use JPG for all 24-bit full color photographic images, as well as more complicated graphics that contain color gradients, shadows, and feathering Which format? • PNG: If the browsers are supporting it, use PNG as a substitute for GIF. Because PNG doesn’t compress your 24-bit images as well as JPG, don’t use it for photos. Color Depth • The amount of data used to create color on a display is called the color depth • If your users have a 24-bit color display, they can appreciate the full-color depth of your images. But many monitors cannot display 24-bit images. • If your monitor doesn’t support the full color depth of an image, the browser must resort to mixing colors that attempt to match the original colors in the image Using the <img> element • By definition, <img> is a replaced element, meaning that the browser replaces the <img> element with the image file referenced in the SRC attribute • <img> is an empty element, so never use a closing tag with it Using the <img> element • The browser treats the image as it treats a character: normal image alignment is to the baseline of the text. Images that are within a line of text must have spaces on both sides, or the text will touch the image. Specifying alt and title Text • The alt text is displayed if the image does not appear, providing a description of the image • The title text appears as a pop-up when the user places the cursor over the image Specifying width and height • Every <img> element on your site should contain width and height attributes • These attributes provide important information to the browser by specifying the amount of space to reserve for the image • This information dramatically affects the way your pages download to the user, especially at slower connection speeds Sizing Graphics for the Page • One of the easiest ways to make your graphics download quickly is to keep their dimensions small and appropriate to the size of the page Removing the Hypertext Border • When you create a hypertext image, the browser’s default behavior is to display the hypertext border around the image • This border is often unnecessary as users often use their mouse to point to each image to see if the hypertext cursor displays • To remove the hypertext border, add the border=“0” attribute to your <img> tag Aligning Text and Images • You can align text along an image border using the align attribute • Text and image alignment defaults to bottom alignment, which means the bottom of the text aligns with the bottom edge of the image • Valid values are: top, middle, bottom, left, right Adding White Space • Add white space around your images to reduce clutter and improve readability • To increase the white space around an image, you can add the vspace and hspace attributes to the <img> element, and set the values to a pixel amount Using Single-Pixel Rules • Single-pixel lines or rules work exactly like transparent pixel GIFs, except they are a single color rather than transparent • You can change a single-pixel rule to any size by using the width and height attributes • This creates reusable graphics of horizontal or vertical lines of varying thickness that you can use in many ways in your Web pages to enhance your layout Using Background Images • You can use the background attribute to the <body> element to tile images across the background of a Web page • You can use any image as a background graphic, though many are not appropriate for the task. In too many Web sites, complicated background graphics distract the user. • If your site includes a lot of text, avoid dark or overly complex backgrounds CSS Background Properties • Cascading Style Sheets allow you more control over background image tiling than standard HTML • To apply a background image, use the <body> element as the selector with the background property • The CSS background-repeat property allows you to create a single column or row of the image, rather than tiling completely across the page Hexadecimal Colors • HTML uses hexadecimal numbers to express RGB color values • Hexadecimal numbers are a base-16 numbering system, so the numbers run from 0 through 9 and then A through F • Hexadecimal color values are six-digit numbers; the first two define the red value, the second two define the green, and the third two define the blue Hexadecimal Colors • Browser safe hexadecimal colors are always made up of the following 2-digit color values: 00, 33, 66, 99, CC, and FF Using Background Colors • One of the simplest ways to work with hexadecimal color is to specify a background color for your pages • Use the bgcolor attribute in the <body> element, or with Cascading Style Sheets, use the background-color property with body as the selector Using Background Colors • You can use background color in tables for different purposes, and all by using the bgcolor attribute • The table <table>, table row <tr>, table header <th>, and table data <td> elements all accept the bgcolor attribute Graphics Summary • Remember that the final destination is the monitor, not the printed page, so design accordingly • Most monitors have a resolution of 72 dpi. If you are creating or scanning images, or when you import images from a CD-ROM, always change the final resolution to 72 dpi. Graphics Summary Continued • Reduce image size to the appropriate dimensions for a Web page. If you must use a larger image, let the user view a thumbnail first, and provide the file size information. • Use the cache by reusing graphics as much as possible Graphics Summary continued • Work with a limited Web-safe palette when creating graphics • Test your work! Browsers and computing platforms render colors differently. Test at different color depths also.