Free Download PDF Books, Guide To HTML5 And CSS3 Web Design

Guide To HTML5 And CSS3 Web Design

HTML HTML5 ReadOnline Web Designing

Summary of Contents

  • Page 1

    US $34.99Mac/PC compatiblewww. SHELVING CATEGORYWEB DESIGN/HTMLThe Essential Guide to HTML5 and CSS3 Web DesignThe Essential Guide to HTML5 and CSS3 Web Design contains everything you need to design great websites that are standards-compliant, user-friendly, and aesthetically pleas-ing. It has be...

  • Page 2

    For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.freepdf-books.com

  • Page 3

    iv Contents at a Glance About the Authors .................................................................................................... 507,xiii 507, About the Technical Reviewer................................................................................. 508,xiv About the the Cov...

  • Page 4

    xvii Introduction The Web is an ever-changing, evolving entity, and it’s easy to get left behind. As designers and writers, we see a lot of books on web design, and although many are well written, few are truly integrated, modular resources that anyone can find useful in their day-to-day wor...

  • Page 5

    1 Chapter 1 An Introduction to Web Design In this chapter:  Introducing the Internet and web design  Working with web standards  Working with HTML  Understanding and creating CSS rules  Creating web page boilerplates www.freepdf-books.com

  • Page 6

    Chapter 1 2  Organizing web page content A brief history of the Internet Even in the wildest dreams of science-fiction and fantasy writers, few envisioned anything that offers the level of potential that the Internet now provides for sharing information on a worldwide basis. For both busines...

  • Page 7

    An Introduction to Web Design 3 So, from obscure roots as a concept for military communications, the Internet has evolved into an essential tool for millions of people, enabling them to communicate with each other, research and gather information, telecommute, shop, play games, and become invol...

  • Page 8

    Chapter 1 4 efficient means of marketing your company. And even if you just have a hobby, a website can be a great way of finding others who share your passion—while you may be the only person in town who likes a particular movie or type of memorabilia, chances are there are thousands of peopl...

  • Page 9

    An Introduction to Web Design 5 Web as a whole; still, they do provide a useful, sizeable sample that’s often indicative of current browser trends. Although you might be used to checking browser usage and then, based on the results, designing for specific browsers, we’ll be adhering closely...

  • Page 10

    Chapter 1 6 Note: If you’re relatively new to web design, you may be wondering about the best platform and software for creating websites. Ultimately, it matters little which platform you choose, as long as you have access to the most popular browsers for testing purposes (a list that I’d no...

  • Page 11

    An Introduction to Web Design 7 Introducing the concept of HTML tags and elements HTML documents are text files that contain tags, which are used to mark up HTML elements. These documents are usually saved with the .html file extension, although other extensions like .htm can be used. The afore...

  • Page 12

    Chapter 1 8 You might be used to using the bold element to make text bold, but it is a physicalelement that only amends the look of text rather than also conveying semantic meaning. Logical elements, such as strong, convey meaning and add styling to text and are therefore preferred. These will be...

  • Page 13

    An Introduction to Web Design 9 that you do not use such tags and attributes because new implementations of browsers may choose not to support them. Semantic markup In the previous few subsections, you may have noticed specific elements being used for specific things. This is referred to as sema...

  • Page 14

    Chapter 1 10 In this section, we’ll look at separating content from design, CSS rules, CSS selectors and how to use them, and how to add styles to a web page. Separating content from design Do you ever do any of the following?  Use tables for website layout  Hack Photoshop documents to ...

  • Page 15

    An Introduction to Web Design 11 p { color: blue; } As you probably know, p is the HTML tag for a paragraph. Therefore, if we attach this rule to a web page (see the section “Adding styles to a web page” later in this chapter for how to do so), the declaration will be applied to any HTML...

  • Page 16

    Chapter 1 12 } This style is applied to HTML elements in any web page the style sheet is attached to using the class attribute, as follows: <h2 class="warningText">This heading is red.</h2> <p class="warningText">This text is red.</p> <p>This...

  • Page 17

    An Introduction to Web Design 13 h1, h2, h3, h4, h5, h6 { color: green; } In the preceding example, all the website’s headings have been set to be green. Note that you’re not restricted to a single rule for each element—you can use grouped selectors for common definitions and separate...

  • Page 18

    Chapter 1 14 As shown, syntax for contextual selectors (#navigation p ) is simple—you just separate the individual selectors with some whitespace. The two rules shown previously have the following result:  The p rule colors the web page’s paragraphs black.  The #navigation p rule overr...

  • Page 19

    An Introduction to Web Design 15 Adding styles to a web page The most common (and useful) method of applying CSS rules to a web page is by using external style sheets. CSS rules are defined in a text document, which is saved with the file suffix .css. This document is attached to an HTML docume...

  • Page 20

    Chapter 1 16 benefits over the likes of archaic font tags. Inline styles also happen to be deprecated in XHTML 1.1, so they’re eventually destined for the chop. The cascade It’s possible to define the rule for a given element multiple times: you can do so in the same style sheet, and sever...

  • Page 21

    An Introduction to Web Design 17 You can set padding to surround the content and add a border and margins to the box. A background image and background color can also be defined. Any background image or color is visible behind the content and padding but not the margin. The effective space an el...

  • Page 22

    Chapter 1 18 this book such as cross-browser compatibility, mobile browser optimizations, progressive enhancement and graceful degradation, and more. While the HTML5 Boilerplate is a great place to start, it is important to learn how to create your own boilerplates from scratch—starting points ...

  • Page 23

    An Introduction to Web Design 19 As you can see, property/value pairs and the closing curly bracket are indented by two tabs in the document (represented by two spaces on this page), which makes it easier to scan vertically through numerous selectors. (Note that for the bulk of this book, the ru...

  • Page 24

    Chapter 1 20 heading element (<h1></h1>), paragraph element (<p></p>), and block quote element (<blockquote></blockquote>), rather than using styled paragraphs for all of the text-based content. This is semantic markup, as discussed briefly earlier in the chap...

  • Page 25

    An Introduction to Web Design 21 7. Add the blockquote and blockquote p rules as shown. The former adds margins to the sides of the block quote, thereby making the text stand out more, while the latter (a contextual selector) styles paragraphs within block quotes only, making them italic and lar...

  • Page 26

    Chapter 1 22 11. Finally, amend the blockquote p rule as shown: blockquote p { font-weight: bold; font-size: 1.0em; } Refresh the web page in the browser, and you should see it immediately change, looking like that shown in the following image. Effectively, nothing in the web page was chan...

  • Page 27

    An Introduction to Web Design 23 Working with website content Before we explore how to create the various aspects of a web page, we’re going to briefly discuss working with website content and what you need to consider prior to creating your site. Technology and design aren’t the only fact...

  • Page 28

    Chapter 1 24 In this section, we’ll look specifically at information architecture and site maps, page layout, design limitations, and usability. Information architecture and site maps Before you begin designing a website, you need to collate and logically organize the information it’s going...

  • Page 29

    An Introduction to Web Design 25 precious about the design—work quickly and try to get down as many ideas as possible. From there, you can then refine your ideas, combine the most successful elements of each, and then begin working on the computer. Although the Web has no hard-and-fast conven...

  • Page 30

    Chapter 1 26 A website’s navigation should be immediately accessible—you should never have to scroll to get to it. It’s also a good idea to have a masthead area that displays the organization’s corporate brand (or, if it’s a personal site, whatever logo/identity you want to be remembe...

  • Page 31

    An Introduction to Web Design 27 Note: Regarding conventions, it’s important not to go overboard. For example, some web gurus are adamant that default link colors should always be used. I think that’s sweet and quaint but somewhat archaic. As long as links are easy to differentiate from oth...

  • Page 32

    Chapter 1 28 Also, don’t get disheartened by the previous limitations spiel. The Web is a truly magnificent medium, and for every downside there’s something amazing to counter it. So what if the resolution is low? Nowhere else can you so effortlessly combine photography, video, sound, and tex...

  • Page 33

    29 Chapter 2 Web Page Essentials www.freepdf-books.com

  • Page 34

    Chapter 2 30 In this chapter:  Creating HTML5 documents  Understanding document type definitions  Using meta tags  Attaching external documents  Working with the body section  Using CSS for web page backgrounds  Commenting your work Starting with the essentials You might won...

  • Page 35

    Web Page Essentials 31 minor syntax errors will prevent a document labeled as XML from being rendered fully, whereas they would be ignored in the HTML syntax. Essentially, an XHTML5 page is a simple HTML5 document that has the following:  HTML doctype/namespace: The <!DOCTYPE html> def...

  • Page 36

    Chapter 2 32  ISO-8859-3 (Latin3): Southern European, including Esperanto, Galician, Maltese, and Turkish. (See also ISO-8859-9.)  ISO-8859-4 (Latin4): Northern European, including Estonian, Greenlandic, Lappish, Latvian, and Lithuanian. (See also ISO-8859-6.)  ISO-8859-5: Cyrillic, inc...

  • Page 37

    Web Page Essentials 33 Page titles Many designers are so keen to get pages online that they forget to provide a title for each page. Titles are added using the title element, as follows: <title>Pro HTML5 and CSS3 Design</title> The title is usually shown at the top of the browser win...

  • Page 38

    Chapter 2 34 instance, as shown in the following image, the InfoQ title includes the organization’s name, followed by its mission statement. Some designers use the same title throughout their site. This is a bad idea—web page titles are used as visual indicators by visitors trawling bookmar...

  • Page 39

    Web Page Essentials 35 <meta name="keywords" content="keywords, separated, by, commas" /> <meta name="description" content="A short description about the Web site" /> The first of these tags, keywords, should contain a set of comma-separated...

  • Page 40

    Chapter 2 36 Attaching external CSS files: the link method In the previous chapter, you were shown how to attach CSS to a web page (see the section “Adding styles to a web page” in Chapter 1); we’ll briefly recap the process here. There are two methods of attaching an external CSS file: th...

  • Page 41

    Web Page Essentials 37 enough to have to deal with such arcane web browsers. The solution was to hide the CSS from such browsers by using a command that they don’t understand and so would ignore. This was often referred to as the @import method. As shown in the following example, the style ele...

  • Page 42

    Chapter 2 38 This way, designers and developers can create more complex queries that map their specific needs, like this one: @media all and (max-width: 698px) and (min-width: 520px), (min-width: 1150px) { body { background: #ccc; } } There is a long list of media features that includes t...

  • Page 43

    Web Page Essentials 39 Checking paths When working with external files, ensure paths between files are complete and don’t become broken as files are moved around; otherwise, your web page may lose track of the CSS and JavaScript, affecting its display and functionality. If you’re using docum...

  • Page 44

    Chapter 2 40 The equivalent in CSS is the following: body { margin: 0; padding: 0; } If a CSS setting is 0, there’s no need to state a unit such as px or em. The reason both margin and padding are set to 0 is because some browsers define a default padding value. Therefore, even if you set ...

  • Page 45

    Web Page Essentials 41  Two values (margin: 10px 20px;): The first setting (10px) is applied to the top and bottom edges. The second setting (20px) is applied to both the left and right edges (20px each, not in total).  Three values (margin: 10px 20px 30px; ): The first setting (10px) is a...

  • Page 46

    Chapter 2 42 This is straightforward. The font-family property sets a default font (in this case, Verdana) and fallback fonts in case the first choice isn’t available on the user’s system. The list should end with a generic family, such as sans-serif or serif, depending on your other choices...

  • Page 47

    Web Page Essentials 43 Web page backgrounds in CSS Backgrounds are added to web page elements using a number of properties, as described in the sections that follow. background-color This property sets the background color of the element. In the following example, the page’s body background co...

  • Page 48

    Chapter 2 44 If this property is set to repeat-x, the image tiles horizontally only. And if the property is set to repeat-y, the image tiles vertically only. background-attachment This property has two possible values: scroll and fixed. The default is scroll, in which the background works as ...

  • Page 49

    Web Page Essentials 45 background-position This property’s values set the origin of the background by using two values that relate to the horizontal and vertical positions. The default background-position value is 0 0 (the top left of the web page). Along with keywords (center, left, and right...

  • Page 50

    Chapter 2 46 When using shorthand, you can set the values in any order. Here’s an example: body { background: #ffffff url(background_image.gif) no-repeat fixed 50% 10px; } Generally speaking, it’s best to use shorthand over separate background properties—it’s quicker to type and ea...

  • Page 51

    Web Page Essentials 47 radial-gradient(yellow, green); radial-gradient(ellipse at center, yellow 0%, green 100%); In addition to the linear-gradient() and radial-gradient() functions, this spec defines repeating-linear-gradient() and repeating-radial-gradient()functions. Web page background ide...

  • Page 52

    Chapter 2 48 body { background: #ffffff url(background-tile.gif); } The following screenshot shows a page with a diagonal cross pattern, although you could alternatively use diagonal stripes, horizontal stripes, squares, or other simple shapes. Note that if you remove many of the paragraphs fro...

  • Page 53

    Web Page Essentials 49 This effect was achieved by creating the depicted background image and tiling it vertically. In the body rule, the position was set to 50% 0 in order to position the background centrally on the horizontal axis. The background color of the web page is the same as the solid...

  • Page 54

    Chapter 2 50 In terms of markup, add an empty div, as shown in the following code block: ? accumsa'n eu, blandit sed, blandit a, eros.</p> <div class="contentFooter"><!-- x --></div> </div> </body> </html> In CSS, for the drop shadow...

  • Page 55

    Web Page Essentials 51 .contentFooter { height: 20px; background: url(background-drop-shadow-2-footer.gif) 50% 0; margin: 0 -36px; } As you can see, the horizontal value for margin is -36px, the negative of the horizontal padding value assigned to #wrapper. The addition of all these new ru...

  • Page 56

    Chapter 2 52 CSS3 shadows The box-shadow property attaches one or more drop shadows on a box. The property is a comma-separated list of shadows, each specified by two to four length values, an optional color, and an optional insetkeyword. div { width: 150px; height: 150px; border:5p...

  • Page 57

    Web Page Essentials 53 Watermarks Although it’s common for sites to be centered in the browser window, many designers choose left-aligned sites that cling to the left edge of the browser window. Both design styles are perfectly valid, but in an era of rapidly increasing monitor resolutions, y...

  • Page 58

    Chapter 2 54 To achieve this effect, the margin property/value pair in the #wrapper rule has been removed, and the following rule has been added: body { background: #878787 url(background-watermark-large.gif) no-repeat 536px 0; } As mentioned earlier in the chapter, this assumes you’re...

  • Page 59

    Web Page Essentials 55 background: #ffffff url(background-watermark.gif) no-repeat 20px 20px; width: 500px; } This adds the background-watermark.gif image to the background of the content div and positions it 20 pixels from the top and 20 pixels from the left. Again, no-repeat is used to...

  • Page 60

    Chapter 2 56 Closing your document At the start of this chapter, we examined basic HTML and XHTML documents. Regardless of the technology used, the end of the document should look like this: </body> </html> There are no variations or alternatives. A body end tag terminates the doc...

  • Page 61

    Web Page Essentials 57 Naming your files Each designer has their own way of thinking when it comes to naming files and documents. Personally, we like to keep document names succinct but obvious enough that we can find them rapidly via a trawl of the hard drive. Certain conventions, however, are ...

  • Page 62

    Chapter 2 58 comment */ Multiple-line comments in JavaScript are the same as in CSS, but single-line comments are placed after double forward slashes: // This is a single-line JavaScript comment. Don’t use comments incorrectly. CSS comments in an HTML document won’t be problematic from a rend...

  • Page 63

    Web Page Essentials 59 A similar service that focuses more on CSS development is Dabblet actionURI(http://dabblet.com):(http://dabblet.com). www.freepdf-books.com

  • Page 64

    Chapter 2 60 Web page essentials checklist Congratulations—you made it to the end of this chapter! We’re aware that some of this one was about as much fun as trying to work out complex quadratic equations in your head, but as mentioned at the start, you need to know this stuff. Imagine desi...

  • Page 65

    Web Page Essentials 61 3. Add a title tag and some content within it. 4. Add a meta tag to define your character set. 5. If required, add keywords and description meta tags. 6. Attach a CSS file (or files). 7. Attach a JavaScript file (or files). 8. If your web editor adds superfluous body attri...

  • Page 66

    63 Chapter 3 Working With Type In this chapter:  Working with semantic markup  Defining font colors, families, and other styles  Understanding web-safe fonts  Creating drop caps and pull quotes  Rapidly editing styled text  Working to a grid  Creating and styling lists...

  • Page 67

    Chapter 3 64 An introduction to typography Words are important—not just what they say but how they look. To quote Ellen Lupton, from her book Thinking with Type, “Typography is what language looks like.” Language has always been symbolic, although the origins of such symbols (of certain le...

  • Page 68

    Working With Type 65 extremely pleasing vertical rhythm and are regularly used in print publications; they’re infrequently used online but can nonetheless be of use, making a page of text easier to read and navigate.  Columns sometimes make a page easier to read, and this technique is routi...

  • Page 69

    Chapter 3 66 In this chapter, we’ll take a look at the various components available when working on web-based type (including elements and CSS properties) and provide some exercises, the results from which you can use for the basis of your own sites’ type. As a final note in this introductio...

  • Page 70

    Working With Type 67 HTML should be reserved for content and structure, and CSS for design. Web pages should be composed of appropriate elements for each piece of content. This method of working, called semantic markup, is what we’re going to discuss next. A new beginning: semantic markup Es...

  • Page 71

    Chapter 3 68 heading. The adjacent image shows how these headings, along with a paragraph, typically appear by default in a browser. <h1>Level one heading</h1> <h2>Level two heading</h2> <h3>Level three heading</h3> <h4>Level four heading</h4> ...

  • Page 72

    Working With Type 69 Typically, <strong>strong emphasis</strong> emboldens text in a visual web browser, and <em>emphasis</em> italicizes text. Deprecated and nonstandard physical styles Many physical elements are considered obsolete, including the infamous blink (a Nets...

  • Page 73

    Chapter 3 70 Block quotes, quote citations, and definitions The blockquote element is used to define a lengthy quotation and must be set within a block-level element. Its cite attribute can be used to define the online location of quoted material. See the “Creating drop caps and pull quotes u...

  • Page 74

    Working With Type 71 Elements for inserted and deleted text The del and ins elements are used, respectively, to indicate deleted text and inserted text, typically in a manner akin to the tracking features of word-processing packages, although they do not include the tracking functionality. The ...

  • Page 75

    Chapter 3 72 for which many end tags are optional. Omit many others at your peril. For instance, overlook a heading element end tag, and a browser considers subsequent content to be part of the heading and displays it accordingly. As shown in the following image, two paragraphs are displayed as ...

  • Page 76

    Working With Type 73 text (favored by many designers, who think such small text looks neat) becomes tricky to read on-screen, because there aren’t enough pixels to create a coherent image. I’ll note restrictions such as this at appropriate times during this section on styling text with CSS,...

  • Page 77

    Chapter 3 74 Defining fonts The font-family property enables you to specify a list of font face values, starting with your preferred first choice, continuing with alternates (in case your choice isn’t installed on the user’s machine), and terminating in a generic font family, which causes th...

  • Page 78

    Working With Type 75 Embedding web fonts Embedding web fonts allows web designers to use local or remotely hosted fonts in their designs without requiring the user to download the font. Using web-embedded fonts is easy and can be done by using the following CSS syntax: @font-face { font-face: ...

  • Page 79

    Chapter 3 76 Better choices for body copy are Verdana or Trebuchet MS. The former is typically a good choice, because its spacious nature makes it readable at any size. Its bubbly design renders it less useful for headings, though. Trebuchet MS is perhaps less readable, but it has plenty of char...

  • Page 80

    Working With Type 77 The other commonly available serif font, Times New Roman (Times being a rough equivalent on Linux systems), is inferior to Georgia but worth using as a fallback. Like Arial, its popularity is the result of its prevalence as a system font. Elsewhere, Palatino is fairly comm...

  • Page 81

    Chapter 3 78 Fonts for headings and monospace type The remaining “safe” fonts are typically display fonts (for headings) or monospace fonts for when each character needs to be the same width—for example, when adding code examples to a web page. Arial Black and Impact are reasonable cho...

  • Page 82

    Working With Type 79 Mac vs. Windows: anti-aliasing When choosing fonts, it’s worth noting that they look different on Mac and Windows. On Macs all browsers use the system default rendering engine called Core Text to render anti-alias on-screen text. On Windows, Internet Explorer 8 smooths type...

  • Page 83

    Chapter 3 80 Although arguments rage regarding which is the best method of displaying fonts on-screen, this is a moot point for web designers, because you don’t control the end user’s setup and therefore must be aware of each possibility. Using images for text Limitations imposed by how di...

  • Page 84

    Working With Type 81 Image-replacement techniques If you need a greater degree of typographical control over a portion of text, such as the site’s main heading, there is an option that enables you to include an image and also enable the text to remain in place, which is useful for users surfin...

  • Page 85

    Chapter 3 82 Some methods focus on hiding the text by setting display to none in CSS, but that can cause problems for screen readers, so avoid doing this. Others use text-indent to shift the text off of the page, although using absolute positioning with negative top and left coordinates is bett...

  • Page 86

    Working With Type 83 h1 { font-size: 20px; } p { font-size: 12px; } Alternatively, you might go for something like this: h1 { font-size: 150%; } p { font-size: 90%; } Each method of sizing fonts has its advantages and disadvantages, which we’ll briefly explore in this sectio...

  • Page 87

    Chapter 3 84 body { font-size: small; } p { font-size: 93%; (}) Keyword values don’t compound, and most modern browsers set a lower limit, even on xx-small, so text tends never to enter the realm of the illegible. Although Internet Explorer for Windows can resize text set with keywords (as...

  • Page 88

    Working With Type 85 h1 { font-size: 2.0em; /* will be the equivalent of 20px */ } p { font-size: 1.2em; /* will be the equivalent of 12px */ } The system isn’t perfect—relative values defined in ems can be inherited, so if a list item is within another list item, the size of the nested...

  • Page 89

    Chapter 3 86 It is important to consider older browsers that do not support rem units. This can be done by defining a font size in pixel units as well as rem units. h1 { font-size: 14px; font-size: 1.4rem; } p { font-size: 12px; font-size: 1.2rem; } Setting line height Graphic designers will b...

  • Page 90

    Working With Type 87 Defining font-style, font-weight, and font-variant These three properties are straightforward. The first, font-style, enables you to set italic or oblique text. The former is often a defined face within the font, whereas the latter is usually computed. Typically, web brow...

  • Page 91

    Chapter 3 88 CSS shorthand for font properties The CSS properties discussed so far can be written in shorthand, enabling you to cut down on space and manage your CSS font settings with greater ease. Like other shorthand properties, some rules apply:  Some browsers are more forgiving than ot...

  • Page 92

    Working With Type 89 * { margin: 0; padding: 0; } Once you’ve done this, you should primarily control spacing between text elements via the bottom margins: h1, h2 { margin-bottom: 10px; } p { margin-bottom: 1em; } In the previous example, the margins below headings are small, ena...

  • Page 93

    Chapter 3 90 For this effect, two things not previously discussed in this book are required: the text-indent CSS property and an adjacent sibling selector. This type of selector uses the syntax A+B, where B is the subject of the selector. For paragraph indentation, the CSS rule would look somet...

  • Page 94

    Working With Type 91 h1 { letter-spacing: 3px; } h2 { word-spacing: 2px; } Controlling case with text-transform The text-transform property enables you to change the case of letters within an element. Available values are capitalize, uppercase, lowercase, and none (the default). The up...

  • Page 95

    Chapter 3 92 p { font: 1.2em/1.5 Verdana, Arial, sans-serif; margin-bottom: 1em; } #sidebar p { font: 1.2em/1.5 Arial, sans-serif; } The other occasion where alternatives are required is when creating one-off styles to override an existing style. In such cases, you can define a class in th...

  • Page 96

    Working With Type 93 <h1>Article heading</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend ...

  • Page 97

    Chapter 3 94 font-size: 100%; } body { padding: 20px; font-size: 62.5%; } .wrapper { margin: 0 auto; width: 400px; } The first rule, *, removes margins and padding from all elements, as discussed previously. The html and body rules set the default size of the text on the web page to ...

  • Page 98

    Working With Type 95 2. Define common settings for headings. In this example, the top two levels of headings will have the same font-family value. Therefore, it makes sense to use a grouped selector to define this property: h1, h2 { font-family: Arial, Helvetica, sans-serif; } 3. Define specif...

  • Page 99

    Chapter 3 96 The following image shows what your completed page should look like. Required files styling-semantic-text-starting-point.html and styling-semantic-text-starting-point.css from the chapter 3 folder What you’ll learn How to create a contemporary-looking page of text using Lucida f...

  • Page 100

    Working With Type 97 2. Style the main heading. An h1 rule is used to style the main heading. The restrictive value for line-height makes the leading value the height of one character of the heading, meaning there’s no space underneath it. This means you can define an explicit padding-bottom ...

  • Page 101

    Chapter 3 98 5. The final rule—an adjacent sibling selector—styles the paragraph following the main heading, making the intro paragraph bold. It’s colored a dark gray, rather than black, which would be overpowering and wreck the balance of the page. h1+p { font-weight: bold; color: #2...

  • Page 102

    Working With Type 99 1. Define a default font for the page. Using a body rule, a default font is chosen for the web page. This design primarily uses the Georgia font—a serif—to enhance the traditional feel. body { font-family: Georgia, "Times New Roman", Times, serif; } 2. At this...

  • Page 103

    Chapter 3 100 h2 { font-size: 1.4em; line-height: 1.2857142em; margin-top: 1.9285713em; margin-bottom: 0.6428571em; } 8. Style the crossheads and paragraphs. For this example, the crossheads and paragraphs are identical, save for the default styling on the headings that renders them in b...

  • Page 104

    Working With Type 101 9. Add a (temporary) grid. When working on text that adheres to a baseline grid, it can help to create a tiled background image that you can use to check whether your measurements are accurate. The 18-pixel-high image file, styling-semantic-text-baseline.gif, has a single-...

  • Page 105

    Chapter 3 102 The following image shows how this image works behind the text styled in this exercise—as you can see, the vertical rhythm is maintained right down the page. Creating drop caps and pull quotes using CSS The previous exercise showed how something aimed primarily at the world of p...

  • Page 106

    Working With Type 103 What you’ll learn How to create a drop cap for a website and how to use the CSS float property. Any element can be floated left or right in CSS, and this causes subsequent content to wrap around it. Completed files drop-cap.html and drop-cap.css from the chapter 3 fold...

  • Page 107

    Chapter 3 104 Required files styling-semantic-text-2.html, styling-semantic-text-2.css, quote-open.gif, and quote-close.gif from the chapter 3 folder What you’ll learn How to create a magazine-style pull quote, which can draw the user’s attention to a quote or highlight ...

  • Page 108

    Working With Type 105 align the closing quote with the bottom of the leading under the last line of the paragraph text; setting the vertical position value to 90%, however, lines up the closing quote with the bottom of the text itself. blockquote p { color: #555555; font-size: 1.3em; font-...

  • Page 109

    Chapter 3 106 7. In CSS, add the following rule: cite { background: none; display: block; text-align: right; font-size: 1.1em; font-weight: normal; font-style: italic; } 8. Some of the property values in cite are there to override the settings from blockquote p and to ensure that the...

  • Page 110

    Working With Type 107 <blockquote id="fredBloggs"> 2. Position the blockquote. Create a new CSS rule that targets the blockquote from the previous step by using the selector #fredBloggs. Set float and width values to float the pull quote and define its width. #fredBloggs { floa...

  • Page 111

    Chapter 3 108 #fredBloggs:before { content: open-quote; } #fredBloggs:after { content: close-quote; } Adding reference citations The blockquote element can have a cite attribute, and the content from this attribute can be displayed by using the following CSS rule: blockquote[cite]:after { ...

  • Page 112

    Working With Type 109 follows, and the resulting browser display is shown to the right. As you can see, browsers typically render a single-level unordered list with solid black bullet points. <ul> <li>List item one</li> <li>List item two</li> <li>List...

  • Page 113

    Chapter 3 110 <ul> <li>List item one</li> <ul> <li>Nested list item one</li> <li>Nested list item two</li> </ul> <li>List item two</li> <li>List item 'n'</li> </ul> Nested lists must be...

  • Page 114

    Working With Type 111 ul { list-style-image: url(bullet.gif); } Contextual selectors were first mentioned in Chapter 1 (see the section “Types of CSS selectors”). These enable you to style things in context, and this is appropriate when working with lists. You can style list items with...

  • Page 115

    Chapter 3 112 The simple workaround for this is to use a contextual selector—li li—to set an explicit font-size value for list items within list items, as shown in the following rule: li li { font-size: 1em; } With this, all nested lists take on the same font-size value as the parent list,...

  • Page 116

    Working With Type 113 List margins and padding Browsers don’t seem to be able to agree on how much padding and margin to place around lists by default, and also how margin and padding settings affect lists in general. This can be frustrating when developing websites that rely on lists and pix...

  • Page 117

    Chapter 3 114 } Thinking creatively with lists The final part of this chapter looks at creating lists with a little panache. Although most lists are perfectly suited to straightforward bullet points, sometimes some added CSS and imagery can go a long way. Creating better-looking lists Required ...

  • Page 118

    Working With Type 115 For the second level of lists (the first level of nesting), styled via ul ul, a horizontally tiling background image is added, giving the impression that the top-level list is casting a soft shadow. The border-left setting creates a soft boundary to the nested list’s left...

  • Page 119

    Chapter 3 116 Note: When creating lists such as this, don’t overcomplicate things, and try to avoid going to many levels of nesting or combining ordered and unordered lists; otherwise, the selectors required for overrides become extremely complicated. Required files The HTML and CSS documen...

  • Page 120

    Working With Type 117 body { font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif; padding: 20px; } #wrapper { font: 1.2em/1.5em 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Arial, Helvetica, sans-serif; } 3. Style the list. Add the following rule, which adds a solid border arou...

  • Page 121

    Chapter 3 118 .codeList code { background: #eaeaea; display: block; border-bottom: 2px solid #ffffff; border-right: 2px solid #ffffff; font : 1.2em "Courier New", Courier, monospace; padding: 2px 10px; } That just about wraps things up for online type. After all that text...

  • Page 122

    119 Chapter 4 Working With Images In this chapter:  Understanding color theory  Choosing the best image format  Avoiding common mistakes  Working with images in HTML5 www.freepdf-books.com

  • Page 123

    Chapter 4 120  Using alt text to improve accessibility  Using CSS when working with images  Displaying a random image from a selection Introduction Although text makes up the bulk of the Web’s content, it’s inevitable that you’ll end up working with images at some point—that is,...

  • Page 124

    Working With Images 121 screen colors). Mix equal amounts of red, green, and blue light, and you end up with white; mix secondaries from the primaries, and you end up with magenta, yellow, and cyan. In print, a subtractive system is used, similar to that used in the natural world. This works by ...

  • Page 125

    Chapter 4 122 When working on color schemes and creating a palette for a website, various schemes are available for you. The simplest is a monochromatic scheme, which involves variations in the saturation (effectively the intensity or strength) of a single hue. Such schemes can be soothing—n...

  • Page 126

    Working With Images 123 Another scheme that offers impact—and one often favored by artists—is the triadic scheme, which essentially works with primary colors or shifted primaries (that is, colors equally spaced around the color wheel). The scheme provides plenty of visual contrast and, when ...

  • Page 127

    Chapter 4 124 followed by six digits. The six digits are comprised of pairs, representing the red, green, and blue color values, respectively:  #XXxxxx: Red color value  #xxXXxx: Green color value  #xxxxXX: Blue color value Because the hexadecimal system is used, the digits can range in...

  • Page 128

    Working With Images 125 Web-safe colors Modern PCs and Macs come with some reasonable graphics clout, but this wasn’t always the case. In fact, many computers still in common use cannot display millions of colors. Back in the 1990s, palette restrictions were even more ferocious, with many comp...

  • Page 129

    Chapter 4 126 Although it’s tricky to define a cutoff point, it’s safe to say that for photographic work where it’s important to retain quality and detail, 50 to 60% compression (40 to 50% quality) is the highest you should go for. Higher compression is sometimes OK in specific circums...

  • Page 130

    Working With Images 127 GIF is useful for displaying images with large areas of flat color, such as logos, line art, and type. As we mentioned in the previous chapter, you should generally avoid using graphics for text on your web pages, but if you do, PNG is the best choice of format, dependin...

  • Page 131

    Chapter 4 128 GIF89: The transparent GIF The GIF89 file format is identical to GIF, with one important exception: you can remove colors, which provides a very basic means of transparency and enables the background to show through. Because this is not alpha transparency (a type of transparency t...

  • Page 132

    Working With Images 129 PNG For years, PNG (pronounced “ping,” and short for Portable Network Graphics) lurked in the wilderness as a capable yet unloved and unused format for web design. Designed primarily as a replacement for GIF, the format has plenty to offer, including a far more flexibl...

  • Page 133

    Chapter 4 130 account the low resolution of the Web), but it will almost certainly increase download times. Therefore, quite simply, don’t use any formats other than JPEG, GIF, or PNG for your web images (and if you decide to use PNG transparency, be sure that your target audience will be able...

  • Page 134

    Working With Images 131 that in mind, keep any backgrounds behind content subtle—near-transparent single-color watermarks tend to work best. For backgrounds outside of the content area (as per the “Watermarks” section in Chapter 2), you must take care, too. Find a balance in your design an...

  • Page 135

    Chapter 4 132 Note: There are exceptions to this rule, however, although they are rare. For instance, if you work with pixel art saved as a GIF, you can proportionately enlarge an image, making it large on the screen. Despite the image being large, the file size will be tiny. Not balancing qual...

  • Page 136

    Working With Images 133 As for splitting images into several separate files or placing invisible GIFs over images to try to stop people from downloading them, don’t do this—there are simple workarounds in either case, and you just end up making things harder for yourself when updating your ...

  • Page 137

    Chapter 4 134 in HTML are src and alt. The first, src, is the path to the image file to be displayed; and the second, alt, provides some alternative text for when the image is not displayed. Note that this chapter’s section on images largely concerns itself with inline images—the addition of...

  • Page 138

    Working With Images 135 Null alt attributes are unfortunately not interpreted correctly by all screen readers; some, upon discovering a null alt attribute, go on to read the image’s src value. A common workaround is to use empty alt attributes, which just have blank space for the value (alt=&q...

  • Page 139

    Chapter 4 136 In this case, a 1-pixel solid border, colored black (#000000 in hex), would surround every image on the site. Using contextual selectors, this can be further refined. For instance, should you only want the images within a content area (marked up as a div with an id value of content...

  • Page 140

    Working With Images 137 border-color: #ffffff; } The results of this are shown in the image to the right. (Obviously, the white border shows only if you have a contrasting background—you wouldn’t see a white border on a white background!) Should you want to, you can also reduce the declar...

  • Page 141

    Chapter 4 138 } This results in the following effect shown in the following image. See using-css-to-wrap-around-images.html, using-css-to-wrap-around-images.css, and sunset.jpg in the chapter 4 folder for a working example of this page. Displaying random images This section of the chapter look...

  • Page 142

    Working With Images 139 What you’ll learn How to create an image randomizer using JavaScript Completed files The image-randomizer-javascript folder in the chapter 4 folder 1. Edit the HTML. Open randomizer.html. In the body of the web page, add the following imgelement. The src value is for...

  • Page 143

    Chapter 4 140 ('src','assets/random-images/'+chosenImage[getRan]); 7. Add JavaScript to set the alt text. Setting the alt text works in a similar way to step 5, but the line is slightly simpler, because of the lack of a path value for the alt text: document.getElementById('randomImage').setAttr...

  • Page 144

    Working With Images 141 var chosenImage=new Array(); chosenImage[0]="stream.jpg"; chosenImage[1]="river.jpg"; chosenImage[2]="road.jpg"; chosenImage[3]="harbor.jpg"; var chosenAltCopy=new Array(); chosenAltCopy[0]="A stream in Iceland"; chosenAl...

  • Page 145

    Chapter 4 142 a img { border: 0; } #randomImage { border: solid 1px #000000; } p { font: 1.2em/1.5em Verdana, sans-serif; margin-bottom: 1.5em; } 2. Set up the PHP tag. Change the file name of randomizer.html to randomizer.php to make it a PHP document. Then, place the following on the p...

  • Page 146

    Working With Images 143 CSS image sprites An image sprite is a collection of images put into a single image for performance issues. This way, a web page with many images can take a shorter time to load since it won’t have to make multiple server requests. Using image sprites will reduce the nu...

  • Page 147

    Chapter 4 144 <div class="sprite" style="background-position: -0px -0px; width: 100px; height: 200px">&nbsp;</div>• <div class="sprite" style="background-position: -0px -210px; width: 300px; height: 300px">&nbsp;</div>• ...

  • Page 148

    145 Chapter 5 Using Links and Creating Navigation In this chapter:  Introducing web navigation  Creating links  Controlling CSS link states  Mastering the cascade  Looking at links and accessibility  Examining a JavaScript alternative to pop-ups  Creating navigation ba...

  • Page 149

    Chapter 5 146 Introduction to web navigation The primary concern of most websites is the provision of information. The ability to enable nonlinear navigation via the use of links is one of the main things that set the Web apart from other media. But without organized, coherent, and usable naviga...

  • Page 150

    Using Links and Creating Navigation 147 Site navigation Wikipedia showcases navigation types other than inline. To the left, underneath the logo, is a navigation bar that is present on every page of the site, allowing users to quickly access each section. This kind of thing is essential for mo...

  • Page 151

    Chapter 5 148 However, sites sometimes grow very large (typically those that are heavy on information and that have hundreds or thousands of pages, such as technical repositories, review archives, or large online stores like Amazon and eBay). In such cases, it’s often not feasible to use only ...

  • Page 152

    Using Links and Creating Navigation 149 Note: Depending on how the target site’s web server has been set up, you may or may not have to include www prior to the domain name when creating this kind of link. It is a good idea to follow a link and see what the end result is before including it, to...

  • Page 153

    Chapter 5 150 Root-relative links Root-relative links work in a similar way to absolute links but from the root of the website. These links begin with a forward slash, which tells the browser to start the path to the file from the root of the current website. Therefore, regardless of how many d...

  • Page 154

    Using Links and Creating Navigation 151 <p id="answer1">The answer to question 1!</p> <p><a href="#questions">Back to questions</a></p> <p id="answer2">The answer to question 2!</p> <p><a href="#questi...

  • Page 155

    Chapter 5 152 Two potential solutions are on offer. The simplest is to link the top-of-page link to your containing div—the one within which your web page’s content is housed. For sites I create—as you’ll see in Chapter 7—I typically house all content within a div that has an id value ...

  • Page 156

    Using Links and Creating Navigation 153 claim, most web users these days probably don’t even know what the default link colors are, and so hardly miss them. Defining link states with CSS CSS has advantages over the obsolete HTML method of defining link states. You gain control over the hover...

  • Page 157

    Chapter 5 154 the states focus, hover, a link the cursor is hovering over would not change appearance when focused, which from a user standpoint is unhelpful. Tip: A simple way of remembering the basic state order (the five states minus focus) is to think of the words love, hate: link, visited,...

  • Page 158

    Using Links and Creating Navigation 155 a:link { color: #3366cc; font-weight: bold; text-decoration: none; } Removing the standard underline is somewhat controversial, even in these enlightened times, and causes endless (and rather tedious) arguments among web designers. My view is th...

  • Page 159

    Chapter 5 156 visited states are exclusive, the bold value for font-weight is assigned using the grouped selector. It could also be applied to individual rules, but this is neater. a:link, a:visited { font-weight: bold; } a:link { color: #f26522; text-decoration: none; } a:visited { col...

  • Page 160

    Using Links and Creating Navigation 157 A widespread error is applying a class to every link for which you want a style other than the default—you end up with loads of inline junk that can’t be easily amended at a later date. Instead, with the careful use of semantic elements and unique ids ...

  • Page 161

    Chapter 5 158 body { font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif; padding: 30px; } 3. Add some rules to define the main states for links on the web page. The following rules color links orange, change them to red on the hover state, make them gray on the visited state, and make th...

  • Page 162

    Using Links and Creating Navigation 159 You’ll note that the visited state is the same as the standard state in the previous code block. While I don’t recommend doing this for links in a page’s general content area, or for pages that have a lot of navigation links, I feel it’s acceptable ...

  • Page 163

    Chapter 5 160 The title attribute Regular users of Internet Explorer may be familiar with its habit of popping up alt text as a tooltip. This has encouraged web designers to wrongly fill alt text with explanatory copy for those links that require an explanation, rather than using the alt text f...

  • Page 164

    Using Links and Creating Navigation 161 need to go back and reread the earlier advice on information architecture (see Chapter 1). Note that tab orders needn’t be consecutive, so it’s wise to use tabindex in steps of ten, so you can later insert extra ones without renumbering everything. Bef...

  • Page 165

    Chapter 5 162 2. Immediately after the body element start tag, add a nav element with an id value of skipLink, which is a hook to later style the element and its link using CSS. The href value for the anchor is set to #content. As you will remember from earlier in the chapter, this will make th...

  • Page 166

    Using Links and Creating Navigation 163 Styling a skip navigation link Required files skip-navigation-completed.html and skip-navigation-completed.css from the chapter 5 folder as a starting point What you’ll learn How to style skip navigation Complete...

  • Page 167

    Chapter 5 164 2. Make the link invisible—via the use of contextual selectors you can set the link’s color to blend with that of the web page element it’s positioned over. You can also use the :hover and :focus pseudo-classes mentioned earlier in this chapter to make the link visible on t...

  • Page 168

    Using Links and Creating Navigation 165 text-align property values stretch the div to the full width of the browser window and center the text horizontally, respectively. #skipLink { position: absolute; top: 0; left: 0; width: 100%; text-align: center; } 2. Style the skip navigation li...

  • Page 169

    Chapter 5 166 #skipLink a:hover, #skipLink a:focus { color: #000000; background: url(skip-navigation-down-arrow.gif) 50% 100% no-repeat; } Link targeting Although a fairly common practice online, link targeting—using the target attribute (see the following code for an example), typically ...

  • Page 170

    Using Links and Creating Navigation 167 a img { border: 0; } Clearly, this can be overridden for specific links. Alternatively, you could set an “invisible” border (one that matches the site’s background color) on one or more sides and then set its color to that of your standard hover...

  • Page 171

    Chapter 5 168 Adding a pop-up to an image Required files XHTML-basic.html and CSS-default.css from the basic-boilerplates folder as a starting point, along with the two image files add-a-pop-up-image.jpg and add-a-pop-up-pop-up.jpg from the chapter 5 folder What you’ll learn How to create a...

  • Page 172

    Using Links and Creating Navigation 169 body { font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif; padding: 20px; } 5. Give the images a border. Add the following rule to apply a thin gray border to the images on the page. img { border: 1px solid #666666; } 6.Define the pop-up area size....

  • Page 173

    Chapter 5 170 top: 0; width: 360px; color: #000000; font: 1.1em/1.5 Arial, Helvetica, sans-serif; margin-top: -335px; margin-left: 50px; padding: 20px; background-color: #e0e4ef; border: 1px solid #666666; } Note: The selector for step 8’s code block offers three alternat...

  • Page 174

    Using Links and Creating Navigation 171 This can be fixed by adding the following rule (this technique is fully explained in Chapter 7): .clearFix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } www.freepdf-books.com

  • Page 175

    Chapter 5 172 Image maps Image maps enable you to define multiple links within a single image. For example, if you have a weather map, you could use an image map to link to each region’s weather forecast; or if you had a picture of your office, you could use an image map to make each of the o...

  • Page 176

    Using Links and Creating Navigation 173 The value of the usemap attribute must correlate with the name and id values of the associated map element. Note that the name attribute is required for backward compatibility, whereas the id attribute is mandatory. <map id="shapes" name="...

  • Page 177

    Chapter 5 174 “fake” image map is by using an unordered list, placing links within each list item, and using absolute positioning to set the locations of the links. Further CSS trickery can be used to make all hot-spots visible when the mouse cursor is placed over the image and to change the...

  • Page 178

    Using Links and Creating Navigation 175 1. Add the structure for the fake image map. In the body of the HTML document, add the following code, which structures the content for the fake image map. Note how the unordered list has a unique class value and how each of the list items has a class valu...

  • Page 179

    Chapter 5 176 4. Style the links. By setting display to block, the links stretch to fit their container (the list items). The text-indent setting is used to massively offset the indent of the text within the links, effectively making the text invisible by default, but keeping the element itself...

  • Page 180

    Using Links and Creating Navigation 177 6. Add the following rule to style the list items, removing the default bullet point (via the list-style value of none) and defining them to be positioned in an absolute manner and displayed as block elements. .sheepImageMap li { list-style: none; posi...

  • Page 181

    Chapter 5 178 Note that the a selector is used in this exercise rather than a:link. Because the rules are strictly based on context—anchors within the defined areas of the fake image map—this is acceptable, and it saves having to use both :link and :visited selectors. 8. Create the other ho...

  • Page 182

    Using Links and Creating Navigation 179 top: 19px; } .sheepThree a { height: 38px; } .sheepThree a:hover { background: url(fake-image-map-color.jpg) -419px -20px; } 9.Add styles for the captions. In step 4, the text-indent property was set to a huge negative value, which made the text effec...

  • Page 183

    Chapter 5 180 Enhancing links with JavaScript In this section, we’re going to use a little JavaScript, showing some methods of providing enhanced interactivity and functionality to links. Note that in all cases, a non-JavaScript backup (or fallback) to essential content is required for those w...

  • Page 184

    Using Links and Creating Navigation 181 The HTML changes to this: <a href="location-one.html" onclick="newWindow('location-one.html'); return false;">Open location one in a new window!</a> <a href="location-two.html" onclick="newWindow('locat...

  • Page 185

    Chapter 5 182 that; there are, however, counterarguments, such as taking control from the user, the general annoyance factor, a full-screen window suddenly covering everything else, and so on. Ultimately, pop-ups and nonrequested new windows are a very bad thing, and since most browsers block th...

  • Page 186

    Using Links and Creating Navigation 183 alt="sheep" width="100" height="75" /></a> <a href="assets/image-2.jpg" onclick="javascript:swapPhoto ('image-2.jpg'); return false;"><img src="assets/image-2-t.jpg" alt=&q...

  • Page 187

    Chapter 5 184 1. Edit the script. Add the elements shown in bold to your script (in gallery.js). These will enable you to target an element on the page with an id value of caption, loading new text into it when a thumbnail is clicked. function swapPhoto(photoSRC,theCaption) { var displayedCapt...

  • Page 188

    Using Links and Creating Navigation 185 In terms of setup, you attach the various scripts and the CSS file from the download files and check the paths to the included images (which can be replaced, if you don’t like the defaults). You then simply add rel="lightbox" to any link or thu...

  • Page 189

    Chapter 5 186 Note that some may consider the behavior of Lightbox2 at odds with user expectations, because the browser back button returns you to the previous page you visited, rather than closing the lightbox. In my opinion, this is logical—after all, Lightbox2 is internal page content, not...

  • Page 190

    Using Links and Creating Navigation 187 function swap(targetId){ if (document.getElementById) { target = document.getElementById(targetId); if (target.style.display == "block") { target.style.display = "none"; } else { target....

  • Page 191

    Chapter 5 188 Enhancing accessibility for collapsible content Although the old version of the Images from Iceland site looks good, it has a problem in common with the previous exercise: when JavaScript is disabled, the initially hidden content is inaccessible. The Iceland site was quickly knock...

  • Page 192

    Using Links and Creating Navigation 189 See the collapsible-div-accessible folder within the chapter 5 folder for reference files. Modularizing the collapsible content script Although the previous script works perfectly well for a single div, it’s awkward if you want to use several divs over th...

  • Page 193

    Chapter 5 190 The first line of the previous code block sets the target to the next sibling of the parent element of the link. In Internet Explorer this works, but other browsers find only whitespace. Therefore, the second line essentially says, “If you find whitespace (undefined), then set th...

  • Page 194

    Using Links and Creating Navigation 191 <script> alert(document.getElementById("linkToggler").parentNode. •nextSibling.nextSibling.nodeName); </script> When you load the web page in a browser, an alert message will be displayed. This will detail what the target ...

  • Page 195

    Chapter 5 192 tables for navigation bars might be a rapid way of getting them up and running, but it’s not structurally sound. When looked at objectively, navigation bars are essentially a list of links to various pages on the website. It therefore follows that HTML lists are a logical choice ...

  • Page 196

    Using Links and Creating Navigation 193 <li><a href="#">A link to a page</a></li> <li><a href="#">A link to a page</a></li> </ul> </li> <li> <a href="#">Secti...

  • Page 197

    Chapter 5 194 5. Style the buttons. Use a contextual selector to style links within the navigation container (that is, the links within this list). These styles initially affect the entire list, but you’ll later override them for level-two links. Therefore, the styles you’re working on now a...

  • Page 198

    Using Links and Creating Navigation 195 The active state enables you to build on the 3D effect: the padding settings are changed to move the text up and left by 1 pixel, the background and foreground colors are made slightly darker, and the border colors are reversed. nav a:active { padding:...

  • Page 199

    Chapter 5 196 navigation bar even more graphical. However, because you didn’t simply chop up a GIF, you can easily add and remove items from the navigation bar, just by amending the list created in step 1. Any added items will be styled automatically by the style sheet rules. Creating a vert...

  • Page 200

    Using Links and Creating Navigation 197 if(targetElement.className == undefined) { targetElement = toggler.nextSibling.nextSibling; } if (targetElement.style.display == "block") { targetElement.style.display = "none"; } else { targetElement.style.display ...

  • Page 201

    Chapter 5 198 Working with inline lists By default, list items are displayed in a vertical fashion, one under the other. However, this behavior can be overridden in CSS, enabling you to create inline lists. This is handy for website navigation, since many navigation bars are horizontally orient...

  • Page 202

    Using Links and Creating Navigation 199 2. Add some body padding. Add a padding value to the existing body rule. body { font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif; padding: 20px; } 3. Style the list by adding the following rule. The font-size setting specifies the font size for the...

  • Page 203

    Chapter 5 200 Creating a simple horizontal navigation bar Required files The graphical-navigation-starting-point folder from the chapter 5 folder What you’ll learn How to create a good-looking navigation bar, entirely based on HTML text and styled using CSS. Completed files The simple-ho...

  • Page 204

    Using Links and Creating Navigation 201 (Note that there’s plenty of explanation about page layout in Chapter 7.) For the content area, add some horizontal padding by adding the #content rule shown in the following code block. #wrapper { width: 700px; margin: 0 auto; border-right: 1px so...

  • Page 205

    Chapter 5 202 #navigation li { display: inline; padding: 0px 9px; border-right: 1px solid #aaaaaa; } If you test the page at this point, you’ll see that all the links have a right-edge border—not a terrible crime—but from a design standpoint, the one at the far right shouldn’t have...

  • Page 206

    Using Links and Creating Navigation 203 Note: In this example, the color of the navigation links—which have no underline—is the same as the body copy. While this would be a very bad idea for inline links, it’s fine for the navigation links, because they’re obviously distinct from the tex...

  • Page 207

    Chapter 5 204 4. Style the navContainer div. Add the following rule to style the navContainer div. The font settings define a size and family. Avoid setting a line-height value, because that makes it much harder to line up the tabs with the borders later. The padding value applies some padding a...

  • Page 208

    Using Links and Creating Navigation 205 color: #000000; background: #bbbbbb; border: 1px solid #898989; padding: 5px 10px; position: relative; margin-right: 5px; } As per the previous exercise, the unwanted right-hand value for the rightmost tab (in this case, the margin-right settin...

  • Page 209

    Chapter 5 206 The declaration is simple: a white background is applied, and the bottom border color is changed to white. The grouped selector is more complex, so I’ll start by explaining the first contextual selector, which is #homePage #homePageLink a:link. What this means is, “Apply the d...

  • Page 210

    Using Links and Creating Navigation 207 What you’ll learn How to create a graphical navigation bar with four different states, driven by CSS, without using any JavaScript Completed files The graphical-navigation-bar folder in the chapter 5 folder For this exercise, graphical tabs will be...

  • Page 211

    Chapter 5 208 Finally, the #content rule gives that area a background color and some padding. #wrapper { width: 740px; margin: 0 auto; } #masthead { padding-top: 20px; } #navContainer { height: 30px; border-bottom: 5px solid #ad3514; } #content { padding: 10px; background-color: #e...

  • Page 212

    Using Links and Creating Navigation 209 The height setting, combined with the padding top setting of 9px, adds up to the height of the container—30px. Without this, the space underneath the text would not be active. #navigation a:link, #navigation a:visited { font: bold 1.1em Arial, Helveti...

  • Page 213

    Chapter 5 210 Using a grid image for multiple link styles and colors Required filesThe files from the graphical-navigation-bar folder and css-rollover-grid.gif from the navigation-images folder in the chapter 5 folder What you’ll learn How to amend the previous exercise in order to crea...

  • Page 214

    Using Links and Creating Navigation 211 1. Amend the list item style. To apply the new background to the list items, amend the #navigation li rule: #navigation li { float: left; display: inline; width: 185px; height: 30px; background: url(css-rollover-grid.gif) no-repeat 0 0; } ...

  • Page 215

    Chapter 5 212 4. Edit the active-page state for each tab. The correct portion of the image needs to show when a tab is the active page, and this is done by replacing the rule from step 6 of the previous exercise with the following four rules, which should be placed after the rules added in the p...

  • Page 216

    Using Links and Creating Navigation 213 CCreating graphical tabs that expand with resized text Required files The files from the graphical-navigation-bar folder, and the images css-tab-rollover- image-left.gif and css-tab-rollover-image-right.gif from the navigation-images folder from the ch...

  • Page 217

    Chapter 5 214 Note that the increase in flexibility in this method is only horizontal. If you need more flexibility vertically, increase the height of each “state” in the graphical tabs, remove the height values from both #navigation li and #navigation a:link, #navigation a:visited, and add...

  • Page 218

    Using Links and Creating Navigation 215 3. With this technique, the left portion of the tab is no longer an active link. It’s therefore usually recommended to keep the left image as narrow as possible. In this example, the left image is 30 pixels wide, but this was used to show how to convert ...

  • Page 219

    Chapter 5 216 <body id="homePage"> 2. Add some subnavigation. Open the HTML document and add another list for subnavigation, directly after the navigation div. <div id="subNavigation"> <ul> <li><a href="#">Sub-nav one</a><...

  • Page 220

    Using Links and Creating Navigation 217 6. Style the navigation div and its links. Add the following three rules to style the navigation div and the links within. The padding settings work as per the earlier exercises in this chapter: again, the vertical padding must be kept constant between th...

  • Page 221

    Chapter 5 218 0 100% repeat-x; border-top: 1px solid #ca8d5c; } 8. Add the following three rules to style the subnavigation. Here, a background image is tiled horizontally behind the entire subNavigation div, and it works in a similar way to the one used in step 7, blending into a backgro...

  • Page 222

    Using Links and Creating Navigation 219 Caution: The subNavigation div in this technique sometimes suffers from the hasLayout bug in Internet Explorer 6. See Chapter 9 for a method of dealing with hasLayout. Creating a drop-down menu Required files Files from the graphical-navigation-bar folder...

  • Page 223

    Chapter 5 220 1. Edit the web page. For any link you want to have a drop-down menu spawn from, nest an unordered list in its parent list item, as per the example in the following code block. <li id="servicesPageLink"> <a href="#">Services</a> <ul> ...

  • Page 224

    Using Links and Creating Navigation 221 4. Style nested list items and links. Add the following rule to replace the default background for list items with one specifically for the drop-down menus. The border-bottom value visually separates each of the list items. #navigation li li { background...

  • Page 225

    Chapter 5 222 Note: If you decide to create drop-down menu–based navigation, avoid copying an operating system’s menu style, because this may confuse visitors using that operating system and irritate visitors using a rival system. The exception to this rule is if you’re creating a site tha...

  • Page 226

    Using Links and Creating Navigation 223 Creating a multi column drop-down menu 1. Edit the HTML to remove the existing nested lists. Then, for the multicolumn drop-down, decide which link you want it to spawn from and place an unordered link in its parent list item, with a single list item of it...

  • Page 227

    Chapter 5 224 <li><a href="#">Drop-down link 1.4</a></li> </ul> <ul> <li><a href="#">Drop-down link 2.1</a></li> <li><a href="#">Drop-down link 2.2</a>&...

  • Page 228

    Using Links and Creating Navigation 225 height settings. For the other states, the border used for the hover and active effects is replaced by a change in background color. Note that the rule that originally had both the hover and active states in the selector (#navigation li li a :hover, #navig...

  • Page 229

    Chapter 5 226 Note: Although the drop-down examples work in currently shipping browsers, neither works as is in Internet Explorer 6, because that browser doesn’t enable you to do anything with the hover state unless it’s on a link. To cater for that browser, JavaScript must be used as a bac...

  • Page 230

    227 Chapter 6 Tables: How Nature (and the W3C) Intended www.freepdf-books.com

  • Page 231

    Chapter 6 228 In this chapter:  Introducing how tables work  Using borders, padding, and spacing  Creating accessible tables  Enhancing tables with CSS  Designing tables for web page layout The great table debate Tables were initially intended as a means of displaying tabular data...

  • Page 232

    How Nature (and the W3C) Intended 229 to look at tables in the context for which they’re intended: the formatting of tabular data. Web page layout will be looked at in the next chapter, which concentrates on CSS layout. How tables work In this section, we’re going to look at how tables are st...

  • Page 233

    Chapter 6 230 screenshot). As you can see, cellspacing affects not only the spacing between the cells but also the distance between the cells and the table’s edges. The CSS property border-spacing is intended to do the same thing as cellspacing. <table cellpadding="20" cellspacing...

  • Page 234

    How Nature (and the W3C) Intended 231 </tr> </table> Note: In the preceding HTML, the cell elements are indented to make it easier for you to make them out. This wasn’t done earlier in the chapter. Either method of writing markup is fine—it’s up to you. Note, however, that ...

  • Page 235

    Chapter 6 232 Vertical alignment of table cell content If you set your table’s width to a small value or if you have a lot of content in one cell and relatively little in an adjacent one, something else becomes apparent: web browsers vertically align content in the middle of cells. (Generally,...

  • Page 236

    How Nature (and the W3C) Intended 233 Captions and summaries Two seldom-used table additions that enable you to provide explanations of a table’s contents are the caption element and the summary attribute. The former is usually placed directly after the table start tag and enables you to provi...

  • Page 237

    Chapter 6 234 column, row group, or column group that contains it. This can be done with the scope attribute, which is added to the table header start tag and given the relevant value (row, col, rowgroup, or colgroup). It’s also possible to use the headers attribute in conjunction with id valu...

  • Page 238

    How Nature (and the W3C) Intended 235 These are positioned between the caption and thead of the table (see the following code, and see the following section for an overview of the various structural elements of tables combined). <colgroup span="2"></colgroup > <colgroup ...

  • Page 239

    Chapter 6 236 Note that the code blocks in this section are here to highlight the attributes and elements being discussed—they should not be seen as examples of complete tables. Building a table You’re now going to build a table, taking into account all of the information mentioned so far. T...

  • Page 240

    How Nature (and the W3C) Intended 237 1. Structure the table element. To emulate the structure of the iTunes playlist, set the table’s width to a percentage value. This means the table will stretch with the browser window. As explained earlier, you should also use the summary attribute to succ...

  • Page 241

    Chapter 6 238 Note: It’s always best to keep your HTML as simple as possible and do any styling in CSS. This reduces page load times and means that you have a greater degree of control. It also means that people without the ability to view CSS see the browser defaults, which are sensible and c...

  • Page 242

    How Nature (and the W3C) Intended 239 This table is not pretty, but it’s structurally sound, and it includes all the relevant elements to at least help make it accessible. As you can see, the addition of the caption and table header cells also makes a difference. If you’re unsure of this, loo...

  • Page 243

    Chapter 6 240 Styling a table Flip back over the past few pages and you might notice that the table doesn’t exactly bear a striking resemblance to the iTunes playlist as yet. But then, we’re only halfway through building the table. Now it’s time to start styling it using CSS. Adding border...

  • Page 244

    How Nature (and the W3C) Intended 241 1. Set things up. If they still exist, remove the border, cellpadding, and cellspacing attributes within the table start tag. Add the universal selector rule (*) to remove margins and padding, as shown a bunch of times already in this book. Also, set the def...

  • Page 245

    Chapter 6 242 4. Style the header cells. To make the header cells stand out more, apply the CSS rule outlined in the following code block. The url value set in the background property adds a background image to the table headers, which mimics the subtle metallic image shown in the same portion ...

  • Page 246

    How Nature (and the W3C) Intended 243 6. Style the footer. The footer content needs to be easy to differentiate from the other data cells; you can achieve this by setting a background color for the entire row within the tfoot element and by making the color of the text have less contrast. Also,...

  • Page 247

    Chapter 6 244 a row in the middle of the table, you’d need to update every subsequent table row start tag, which is hardly efficient. David Miller’s article “Zebra Tables” on A List Apart (seeactionURI(http://www.alistapart.com/articles/zebratables/): actionURI(http://www.alistapart.com/...

  • Page 248

    How Nature (and the W3C) Intended 245 tbody tr.alt td { background: #e7edf6; } 5. The previous code block styles the background of alternate rows in a light blue. 6. Define a table row hover state. The script also provides a hover state, making it easy for users to highlight entire table rows ...

  • Page 249

    Chapter 6 246 To add stripes to more tables, just assign each one a unique id value and then add another line to the window.onload function in the JavaScript document, as per the instructions in this exercise. For example, if you added a table with an id value of playlist2, the line of JavaScri...

  • Page 250

    How Nature (and the W3C) Intended 247 This is then followed by the markup to close the table. Note that in this example, the alt class value is applied to alternate table rows, so the CSS from the previous exercise should still work fine. Adding separator stripes with the :nth-child selector ...

  • Page 251

    Chapter 6 248 include a significant number of users of very obsolete browsers and also when the layout is paramount to the working of the site (rather than just the content). When working on such a layout, there are a few golden rules:  Avoid nesting tables whenever possible: Although tables ...

  • Page 252

    249 Chapter 7 Page Layouts with CSS In this chapter: Explaining CSS workflow Positioning web page elements with CSS Creating boxouts and sidebars Creating column-based layouts Amending layouts, depending on body class settings www.freepdf-books.com

  • Page 253

    Chapter 7 250  Creating scrollable content areas Layout for the Web Although recent years have seen various institutions offer web-oriented courses, the fact remains that many web designers are not “qualified” per se. What I mean by this is that plenty of them have come from some sort of ...

  • Page 254

    Page Layouts with CSS 251 as masthead, navigation, content, and footer areas), which can then be styled to define their relationship with each other and the page as a whole. Working with columns The vast majority of print media makes heavy use of columns. The main reason for this is that the e...

  • Page 255

    Chapter 7 252 Fixed vs. fluid As already mentioned in this book, the Web is a unique medium in that end users have numerous different systems for viewing the web page. When designing for print, the dimensions of each design are fixed, and although television resolutions are varied (PAL, NTSC, HD...

  • Page 256

    Page Layouts with CSS 253 Logical element placement Besides the ability to rapidly edit CSS-based layouts, the greatest benefit when using CSS is the emphasis on accessibility, partly because it encourages the designer to think about the structure of the document and therefore logically plazce t...

  • Page 257

    Chapter 7 254 In CSS, every element is considered to be within its own box, and you can define the dimensions of the content and then add padding, a border, and a margin to each edge as required, as shown in the following image. © Jon Hicks (actionURI(http://www.hicksdesign.co.uk):www.hicksde...

  • Page 258

    Page Layouts with CSS 255 CSS layouts: a single box In the remainder of this chapter, we’ll walk through a number of common CSS layout techniques, which can be combined to form countless layouts. In Chapter 10, these skeleton layouts will form the basis of various full web page layouts, which ...

  • Page 259

    Chapter 7 256 The width setting defines a width in pixels for the wrapper div. The margin setting provides automatic margins to the left and right of the div, which has the effect of centering the layout in the browser window, as shown in the following screenshot. Adding padding, margins, and b...

  • Page 260

    Page Layouts with CSS 257 no top border is needed. That’s why the border-top pair is added, overriding the previous rule for the top border only. #wrapper { width: 600px; margin: 0 auto; border: 2px solid #777777; border-top: 0; } 4. Add a wrapper background. If you test the page now,...

  • Page 261

    Chapter 7 258 5. Add some padding. Test the page now, and you’ll see two major layout errors commonly seen on the Web. First, the content hugs the edges of the div, which makes it hard to read and also looks cluttered, despite the div being 600 pixels wide. Second, the text at the bottom of t...

  • Page 262

    Page Layouts with CSS 259 Note that because of the padding and borders added to this div, it now takes up 644 pixels of horizontal space, due to the 20-pixel horizontal padding values and the 2-pixel borders. To return the overall width to 600 pixels, subtract the 44 pixels from the width setting...

  • Page 263

    Chapter 7 260 #wrapper { max-width: 800px; margin: 0 auto; border: 2px solid #777777; border-top: 0; background: #ffffff url(wrapper-background.gif) 0 100% repeat-x; padding: 20px 20px 50px; } 7. Amend the body rule. At small browser widths, the design fills the browser window. If yo...

  • Page 264

    Page Layouts with CSS 261 } 3. Position the div. Set the wrapper div’s position value to absolute, and set the top and left values to 50%. This sets the top-left position of the div to the center of the browser window. #wrapper { background: #ffffff; border: 4px solid #000000; padding: ...

  • Page 265

    Chapter 7 262 4. Use negative margins. Clearly, the div is not positioned correctly as yet, and that’s—as mentioned in the previous step—because absolute positioning and the top and left values specify the position of the top left of the element they’re applied to. To place the div cent...

  • Page 266

    Page Layouts with CSS 263 Note that if you use this kind of layout and have too much content for your wrapper, it will spill out of it. See later in the chapter for dealing with this issue by creating scrollable areas for page content. Nesting boxes: boxouts Boxouts are design elements commonly...

  • Page 267

    Chapter 7 264 The float property Mastering the float property is key to creating CSS-based web page layouts. It enables you to position an element to the left or right of other web page content, which then wraps around it. Creating a boxout Required files Files from boxout-starting-point in ...

  • Page 268

    Page Layouts with CSS 265 4 onward shows how to style it. The final boxout will look like that shown in the image to the right: the corners are rounded; the plain background of the content area darkens slightly at its base; and the heading is on a colored background with a gradient (not obvious ...

  • Page 269

    Chapter 7 266 4. Add a background. As shown earlier, the boxout has a background, and this is added by applying a CSS gradient to the boxout that blends into a solid background color. Finally, padding values are added to ensure that the boxout content doesn’t go right up to the edge of the ba...

  • Page 270

    Page Layouts with CSS 267 5. The boxout header now needs styling, which will add the second part of the background. A contextual selector is used for this, ensuring that the style applies only to level-two headings within an element with a class value of boxout. The first three pairs in the rule...

  • Page 271

    Chapter 7 268 Note that because of the way the header’s background is styled, using a CSS gradient that stretches to fill the available space, there’s no chance of the background running out, even if the page’s text is massively zoomed (see the following image). Although the vast majority...

  • Page 272

    Page Layouts with CSS 269 CSS. In all cases, try to think in a modular fashion, because the methods for creating the basic building blocks shown can be combined in many different ways to create all sorts of layouts. One of the main reasons for working with two structural divs is to create columns...

  • Page 273

    Chapter 7 270 2. Add the background colors. When initially working on CSS layouts and hand-coding, it’s often useful to apply background colors to your main structural divs. This enables you to more easily see their edges and how they interact. Therefore, add the following rules to your CSS: ...

  • Page 274

    Page Layouts with CSS 271 Note that for an actual website, you should use id (and class) values relevant and appropriate to the content within them, as evidenced by wrapper and boxout earlier in this chapter. The values of divOne and divTwo are used in this exercise to enable you to easily keep...

  • Page 275

    Chapter 7 272 5. Float the divs to make columns. By adding width values and floating both divs in the same direction, the divs stack horizontally, thereby creating columns. #divOne { background: #dddddd; padding-bottom: 1.5em; float: left; width: 350px; } #divTwo { background: #aaaaa...

  • Page 276

    Page Layouts with CSS 273 Note how each div only stretches to fill its content. Later, you’ll find out how to mimic full-height columns by using a background image (creating what are known as faux columns). 6. Switch the column order. You can switch the stack direction by amending the float ...

  • Page 277

    Chapter 7 274 #divOne { background: #dddddd; padding-bottom: 1.5em; float: right; width: 350px; } #divTwo { background: #aaaaaa; padding-bottom: 1.5em; float: right; width: 250px; } 8. Add padding and margins. Switch the right values for float back to left, and then change the ...

  • Page 278

    Page Layouts with CSS 275 #divOne { background: #dddddd; padding: 10px 10px 1.5em; float: left; width: 350px; margin-right: 10px; } #divTwo { background: #aaaaaa; padding: 10px 10px 1.5em; float: left; width: 250px; } www.freepdf-books.com

  • Page 279

    Chapter 7 276 Manipulating two structural divs for liquid layouts Required files Files from two-divs-starting-point in the chapter 7 folder as a starting point What you’ll learn How to use two structural divs to create various types of liquid layouts, including two-column designs Comple...

  • Page 280

    Page Layouts with CSS 277 #divOne { background: #dddddd; } #divTwo { background: #aaaaaa; } 2. Float the divs and set widths. As explained in the previous exercise, setting a width for the two divs and then floating them both in the same direction enables you to stack them horizontally, ther...

  • Page 281

    Chapter 7 278 3. Add a margin. In the previous exercise, a margin was included to separate the two divs. This can be done here, again by adding a margin-right value to #divOne. However, you need to ensure the overall width of the width and margin values doesn’t exceed 100%. In this example, t...

  • Page 282

    Page Layouts with CSS 279 4.If you want to add padding to the divs, the method changes depending on the required value. If you’re adding padding on a percentage basis, you add it in the same way as the margin in step 3, removing relevant values from the width settings. (For example, if you se...

  • Page 283

    Chapter 7 280 You then apply a padding value to .columnContent in the CSS. Note that, clearly, liquid layouts can have widths lower than 100%; this example showed that percentage because it’s the most common width used for liquid layouts and has the most problems to overcome. Also, rounding er...

  • Page 284

    Page Layouts with CSS 281 3. Add the following rule to center the wrapper, per the “Creating a fixed-width-wrapper” exercise earlier in this chapter: #wrapper { width: 700px; margin: 0 auto; } 4. Finally, add the following two rules to float the columns, set their widths, and then place ...

  • Page 285

    Chapter 7 282 In such cases, the width of each div (and the margin) is a percentage of the parent element—the wrapper div—rather than the browser window. Note: When using percentages to size columns, it makes sense to use them also to size the gutters and margins between them. If you don’t...

  • Page 286

    Page Layouts with CSS 283 Note that Internet Explorer’s behavior is different from other browsers here: the wrapper isn’t being collapsed, so the background extends fully, and the paragraph of text added after the wrapper doesn’t flow around the floated divs, presumably because the wrapp...

  • Page 287

    Chapter 7 284 5. The magic of this method is in the CSS rule. By using the :after pseudo-selector, an empty string is added after the element the class is applied to (in this case, after the wrapper div), and said empty string’s display is set to table. This creates an anonymous table cell th...

  • Page 288

    Page Layouts with CSS 285 alternate option is to apply clearing directly to the element that follows the last piece of floated content. In HTML, this would look as follows: <p class="ClearFloats"> 8. In CSS, this is styled as follows: .clearFloats { clear: both; } Generally, t...

  • Page 289

    Chapter 7 286 Based on what you’ve seen so far, you might think the best way to create such a layout would be to create a two-column layout and then add a border to one of the columns. However, in CSS, borders and backgrounds stop as soon as the content does. Therefore, if you add a border to...

  • Page 290

    Page Layouts with CSS 287 divTwo for a completed website. (They’ve been used for some exercises in this chapter just to make the exercises simpler to work through.) In both the HTML page and the CSS document, change all instances of divOne to mainContent and all incidences of divTwo to sidebar...

  • Page 291

    Chapter 7 288 Note: There is an alternate way to create faux columns; see step 5 of the “Creating flanking sidebars” exercise later in the chapter. Boxouts revisited: creating multiple boxouts within a sidebar Required files Files from multiple-boxouts-starting-point in the chapter 7 folde...

  • Page 292

    Page Layouts with CSS 289 background-image: -moz-linear-gradient(top, #e1e1e1, #b5b5b5); background-image: -ms-linear-gradient(top, #e1e1e1, #b5b5b5); background-image: -o-linear-gradient(top, #e1e1e1, #b5b5b5); } Also, the background from the faux columns exercis...

  • Page 293

    Chapter 7 290 background-image: url(background-icon-chat.gif), -ms-linear-gradient(top, #2a84d7, #4594dc); background-image: url(background-icon-chat.gif), -o-linear-gradient(top, #2a84d7, #4594dc); } .toolsHeader h2 { background-color: #d72ab0; background-image: url(bac...

  • Page 294

    Page Layouts with CSS 291 Creating flanking sidebars Although some sites can be designed around a two-column model, you’ll frequently need more. This can be achieved by adding further columns to the pages created in earlier exercises or by nesting wrappers with two columns. (In other words, t...

  • Page 295

    Chapter 7 292 What you’ll learnHow to create flanking sidebars for a content area, thereby enabling you to set content in one order in the code and another on-screen Completed files-flanking-sidebars-liquid and flanking-sidebars-fixed in the chapter 7 folder 1. Check out the page. Open fl...

  • Page 296

    Page Layouts with CSS 293 4. Position the sidebars. At the moment, the columns are in the order specified in the code. However, via the use of margins, this order can be changed. For the main content div, set a margin-left value equal to the width of the left sidebar. Next, set a margin-left va...

  • Page 297

    Chapter 7 294 Note: Internet Explorer may cause problems with this layout, making the right sidebar sometimes appear beneath the others when the browser window is resized. This is caused by a rounding error (see the “Dealing with rounding errors” section in Chapter 9). Therefore, it’s oft...

  • Page 298

    Page Layouts with CSS 295 The first rule merely adds some padding to the column content wrappers. The next rule applies a large amount of padding to the bottom of each column and a negative margin of the same size, bringing the document flow back to the point where the padding begins. The use of...

  • Page 299

    Chapter 7 296 #wrapper { width: 700px; margin: 0 auto; border: 1px solid #555555; border-top: 0; } 7. Next, update the width and margin-left values for the three rules shown in the following code, being mindful of the relationships mentioned in step 4 and the fact that the width values c...

  • Page 300

    Page Layouts with CSS 297 Automating layout variations The final exercise in this section shows how to automate page layouts in a similar manner to automating navigation, as described in Chapter 5 (namely, in the “Creating a CSS-only tab bar that automates the active page” exercise). By de...

  • Page 301

    Chapter 7 298 2. Create single-column rules. The way this method works is to create overrides for relevant rules. The contextual selectors will begin with a class selector that will be applied to the page’s body start tag, followed by the rules that require overriding. For a single column, th...

  • Page 302

    Page Layouts with CSS 299 Note that when using designs such as this, be sure to empty the contents of nondisplayed elements—any content left within them is just a waste of bandwidth. 4.Create an equal-column-split rule. For an equal column split, the column widths need to be amended to the same...

  • Page 303

    Chapter 7 300 As mentioned, this exercise works in a similar way to some of the navigation ones in Chapter 5. With a little thought, it should be easy enough to see how this automation method can assist when creating websites. As long as the site’s structure has been carefully planned, you ca...

  • Page 304

    Page Layouts with CSS 301 .scrollableContent { width: 200px; height: 200px; overflow: auto; } When overflow is set to auto, scrollbars appear only when the content is too large for the set dimensions of the div. Other available values are hidden (display no scrollbars), scroll (perman...

  • Page 305

    Chapter 7 302 Like other elements, the object element can be styled using CSS, although Internet Explorer adds a border, so you need to overwrite existing border settings using conditional comments (see Chapter 9 for more on those) to prevent a double border. Also, if the content is too large fo...

  • Page 306

    Page Layouts with CSS 303 Examine the files. The fluid grid layout markup takes elements of everything you’ve learned so far to create an advanced layout. The wrapper div is a full width container div that allows layouts to span the full width of the browser. It has 20px padding applied to the...

  • Page 307

    Chapter 7 304 Responsive Web Design Over the years designers have come up with many solutions that use and combine fixed and fluid layouts. In an article entitled “Responsive Web Design” published on A List Apart (actionURI(http://www.alistapart.com/articles/responsive-web-design/):www.ali...

  • Page 308

    Page Layouts with CSS 305 As you can see from the following screenshots, Smashing Magazine actionURI(http://www.smashingmagazine.com):(www.smashingmagazine.com)actionURI(http://www.smashingmagazine.com): and Media Queries actionURI(http://mediaqueri.es):(http://mediaqueri.es) are great examples ...

  • Page 309

    Chapter 7 306 2. Since the media styles will be inherited from 767, we will change the width of the wrapper to auto so that it can scale down with the browser size. Add the following between the brackets of the media query targeting 767 pixels. .wrapper{ width: auto; } 3. As the browser sca...

  • Page 310

    307 Chapter 8 Getting User Feedback In this chapter:  Creating forms and adding fields and controls  Styling forms in CSS  Configuring a mailform CGI script  Sending forms using PHP www.freepdf-books.com

  • Page 311

    Chapter 8 308  Creating a layout for a user feedback page  Creating an online business card using microformats Introducing user feedback One of the main reasons the Web has revolutionized working life and communications is its immediacy. Unlike printed media, websites can be continually up...

  • Page 312

    Getting User Feedback 309 Scrambling addresses In our experience, having an e-mail address online for just a few days is enough to start receiving regular spam. A workaround is to encrypt e-mail addresses using a bulletproof concoction of JavaScript. The Enkoder form from Hivelogic is a neat way...

  • Page 313

    Chapter 8 310 The preceding form start tag includes attributes that point at a CGI script, but alternative methods of sending forms exist, including PHP, ASP, and ColdFusion. Check with your hosting company about the methods available for sending forms, and use the technology supported by your I...

  • Page 314

    Getting User Feedback 311 The bulk of the HTML is pretty straightforward. In each case, the name attribute value labels the control, meaning that you end up with the likes of Telephone: 555 555 555 in your form results, rather than just a bunch of answers. For multiple-option controls (check bo...

  • Page 315

    Chapter 8 312 <input type="reset" name="RESET" value="RESET" /> Note: A full list of controls is available in Appendix A. Improving form accessibility Although there’s an on-screen visual relationship between form label text and the controls, they’re not ...

  • Page 316

    Getting User Feedback 313 As you can see from the previous screenshot, these elements combine to surround the relevant form fields and labels with a border and provide the group with an explanatory title. Note that each browser styles forms and controls differently. Therefore, be sure to test ...

  • Page 317

    Chapter 8 314 Client-side form validation With HTML5, forms can be annotated in such a way that the browser will check the user’s input before the form is submitted. The server still has to verify the input is valid, but this technique allows the user to avoid the wait incurred by having the s...

  • Page 318

    Getting User Feedback 315 errormessage, which enables you to change the text of the error message. The same can be accomplished in Chrome using CSS and the -webkit-validation-bubble-message. Date, time, and number formats The time, date, and number formats used in HTML and in form submissions, a...

  • Page 319

    Chapter 8 316 More HTML5 input formats To make developers’ lives easier, HTML5 offers a set of the most common input field types that should provide validation, although they’re still not common in browsers: type=url: For editing a single absolute URL given in the element’s value type=emai...

  • Page 320

    Getting User Feedback 317 CSS styling and layout for forms Earlier, we covered how to lay out a form using paragraphs and line breaks. In this section, you’ll see how tables and CSS can also be used to produce a more advanced layout. Adding styles to forms Form fields can be styled, enabling...

  • Page 321

    Chapter 8 318 Because the border in the previous code is defined using a class, it can be applied to multiple elements. The reason we don’t use a tag selector and apply this style to all input fields is that radio buttons and check boxes look terrible with rectangular borders around them. Howe...

  • Page 322

    Getting User Feedback 319 legend { padding: 0 10px; font-family: Arial, Helvetica, sans-serif; color: #000000; background: #ffffff; text-transform: uppercase; } A final style point worth bearing in mind is that you can define styles for the form itself. This can be useful for pos...

  • Page 323

    Chapter 8 320 Regardless of the form styles you end up using, be sure to rigorously test across browsers, because the display of form elements is not consistent. Some variations are relatively minor—you’ll find that defining values for font sizes, padding, and borders for input fields doesn...

  • Page 324

    Getting User Feedback 321 Advanced form layout with CSS A common way of laying out forms is to use a table to line up the labels and form controls, although with the output being nontabular in nature, this method is not recommended (CSS should be used for presentation, including positioning e...

  • Page 325

    Chapter 8 322 Because a class value was added to the table, the contextual selector .formTable th can be used as the selector for styling the form labels, defining the text-align property, along with other CSS properties such as font-weight. Applying a padding-right value to these cells also pro...

  • Page 326

    Getting User Feedback 323 </form> Note the use of the clearing device, the clearFix class value, as outlined in Chapter 7’s “Placing columns within wrappers and clearing floated content” section. Various styles are then defined in CSS. The form itself has its width restricted, and l...

  • Page 327

    Chapter 8 324 Example forms for the sections in this chapter are available in the chapter 8 folder of the download files. Sending feedback In this section, you’ll check out how to send form data using a CGI script and PHP. Once users submit information, it needs to go somewhere and have a meth...

  • Page 328

    Getting User Feedback 325 The first line of the script defines the location of Perl on your web host’s server. Your hosting company can provide this, so you can amend the path accordingly. #!/usr/bin/perl -wT Elsewhere, you only need to edit some values in the user configuration section. The...

  • Page 329

    Chapter 8 326 others have a permissions or CHMOD command buried among their menus. Consult your documentation and find out which your client has. If you can, use the CHMOD command to set the octal numbers for the script (thereby altering the file permissions) to 755. If you have to manually set ...

  • Page 330

    Getting User Feedback 327 1. Copy process_mail.inc.php from the download files to the same folder (directory) as the page containing the form. This is the PHP script that does all the hard work. You don’t need to make any changes to it. 2. Save the page containing the form with a PHP extension...

  • Page 331

    Chapter 8 328 Note: PHP is case sensitive. Make sure that you use the same combination of uppercase and lowercase in the PHP script as in the name attributes in the form. Also be careful to copy the script exactly. Missing semicolons, commas, or quotes will cause the script to fail and may resul...

  • Page 332

    Getting User Feedback 329 If you want to send the e-mail to multiple addresses, separate them with commas like this: $to= actionURI(mailto:me@example.com):'me@example.com, him@example.com, actionURI(mailto:him@example.com):her@example.com'; actionURI(mailto:her@example.com): 7.Replace the content...

  • Page 333

    Chapter 8 330 send a message back to the right person. Unfortunately, this is frequently used by spammers to inject malicious code into your script. The code in process_mail.inc.php filters out potential attacks and inserts the sender’s e-mail address only if it’s safe to do so. Consequently...

  • Page 334

    Getting User Feedback 331 If you get error messages or a blank screen, it means you have made a mistake in the script. Check the commas, quotes, and semicolons carefully. If you get a message saying that process_mail.inc.php cannot be read, it probably means that you have forgotten to upload it ...

  • Page 335

    Chapter 8 332 the same page. This makes it easy for them to contact you, because it requires fewer clicks than the fairly common presentation of a form and link to other contact details. The following images show a couple of example layouts. The first is from the Thalamus Publishing website, wh...

  • Page 336

    Getting User Feedback 333 Again, everything is in one place, rather than spread out over several pages, which makes sending feedback to and/or getting in contact with the organization convenient for the end user. The Snub Communications site doesn’t require a map, but if it did, a link to it ...

  • Page 337

    Chapter 8 334 Using microformats to enhance contact information As shown in the previous section, user feedback may come in the form of a telephone call or letter, rather than an e-mail, and therefore you should always add other forms of contact details to a website. Even if the site is an onlin...

  • Page 338

    Getting User Feedback 335 1. Add a surrounding div. Open using-microformats. html, and place a div with a class value of vcard around the contact details content, as shown (truncated) following: <h1>Contact details</h1> <div class="vcard"> <h2>Mail</h...

  • Page 339

    Chapter 8 336 type hidden is used to define the type for each parent property. For tel, various options are available, including work, home, fax, cell, pager, and video. Should duplicate types be required (such as for a work fax), two type spans are added. As for the contact number itself, that...

  • Page 340

    Getting User Feedback 337 This is why the hidden value was also applied to the relevant span elements. By adding the following rule, these spans are made invisible. .hidden { display: none; } 8. Deal with margin issues. Because the telephone details are each in an individual paragraph, each ha...

  • Page 341

    Chapter 8 338 Note that further simplification of some elements of the code shown in the exercise is possible. For example, where you have the Fax line, the type span could be directly wrapped around the relevant label, and the hidden class should be removed. Where before you had the following:...

  • Page 342

    Getting User Feedback 339 Usefully, the site’s system enables you to automate the system via the kind of web page created earlier. If you upload a page like the one created in the previous exercise and then add the following code (amending the URL after contacts/), you’ll have a link on the c...

  • Page 343

    Chapter 8 340 Contact details structure redux In this chapter, and in the microformats exercise, the address and other contact details were styled using paragraphs and line breaks. An alternative structure, which perhaps has greater integrity from a semantic standpoint, is to use a definition l...

  • Page 344

    Getting User Feedback 341 <dl> <dt>Tel:</dt> <dd>+1 (0)0000 555555</dd> <dt>Fax:</dt> <dd>+1 (0)0000 555556</dd> <dt>Mobile/cell:</dt> <dd>+1 (0)7000 555555...

  • Page 345

    Chapter 8 342 font: 1.2em/1.5em Verdana, Arial, sans-serif; } With these styles added, the contact details look virtually identical to those in the exercise. At this point, you can add hooks for the vCard as per steps 2 and 3 of the “Using microformats to enhance contact details” exercis...

  • Page 346

    343 Chapter 9 Dealing with Browser Quirks In this chapter:  Weeding out common web page errors  Creating a browser test suite  Installing multiple versions of Internet Explorer  Catering for unruly web browsers www.freepdf-books.com

  • Page 347

    Chapter 9 344  Common fixes for Internet Explorer bugs  Targeting other browsers with JavaScript The final test One time that web designers envy designers in other fields is when it comes to testing websites. Although we’re a long way from the “design a site for each browser” mentali...

  • Page 348

    Dealing with Broswer Quirks 345 Here are some of the more common errors you might make that are often overlooked:  Spelling errors: Spell a start tag wrong, and an element likely won’t appear; spell an end tag wrong, and it may not be closed properly, wrecking the remaining layout. In CSS,...

  • Page 349

    Chapter 9 346  Not closing elements, attributes, and rules: An unclosed element in HTML may cause the remainder of the web page (or part of it) to not display correctly. Similarly, not closing an HTML attribute makes all of the page’s content until the next double quote part of the attribut...

  • Page 350

    Dealing with Broswer Quirks 347 but vanished. The point, of course, is that you cannot predict how the browser market will change. Each year sees new releases of web browsers, with new features and updated—but usually incomplete—standards support. All of this is a roundabout way of saying th...

  • Page 351

    Chapter 9 348 4. Everything—all over again: When any major changes are made, you need to go back through your browsers and make sure the changes haven’t screwed anything up. There are other browsers out there, but the preceding list will deal with the vast majority of your users. However, a...

  • Page 352

    Dealing with Broswer Quirks 349 a cheap Windows PC to test with or run Windows as a virtual machine (via Parallels Desktop, VMware Fusion, or Virtual Box, which is free) on an Intel Mac or using Virtual PC if you have a PPC-based machine. (You can also use Boot Camp on an Intel Mac, but that requ...

  • Page 353

    Chapter 9 350 What conditional comments enable you to do is target either a specific release of Internet Explorer or a group of releases by way of expressions. An example of a conditional comment is shown in the following code block: <!--[if IE 6]> [specific instructions for Internet Explo...

  • Page 354

    Dealing with Broswer Quirks 351 Note that the preceding code block also includes a link to a print style sheet; print style sheets are covered in Chapter 10. The advanced boilerplates from the download files (in the advanced-boilerplates folder) include the preceding code block. Let’s now exam...

  • Page 355

    Chapter 9 352 As explained in the focus point within the “Creating flanking sidebars” exercise, rounding errors can be dealt with by reducing one of the percentage values of a column by as little as 0.0001%, although sometimes this reduction needs to be increased. Alt text overriding title...

  • Page 356

    Dealing with Broswer Quirks 353 is set to false. Unfortunately, there’s no way to directly set hasLayout for any element, even in an IE- specific style sheet, and yet hasLayout is the cause of many layout problems in Internet Explorer. The hasLayout-trigger.html document within the hasLayout f...

  • Page 357

    Chapter 9 354 It’s probably worth noting that zoom, like some of the other things mentioned in the Internet Explorer fixes, will not validate. However, as far as we’re concerned, there’s no real urgency or reason to make IE-specific style sheets validate. Keep your main style sheet clean a...

  • Page 358

    Dealing with Broswer Quirks 355 Normalize.css Normalize.css actionURI(http://necolas.github.com/normalize.css/):(http://necolas.github.com/normalize.css/) is a customizable CSS library that makes browsers render all elements more consistently and in line with modern standards. It preserves usefu...

  • Page 359

    357 Chapter 10 Putting Everything Together www.freepdf-books.com

  • Page 360

    Chapter 10 358 In this chapter:  Combining methods to create website designs  Creating an online gallery (portfolio)  Creating a storefront layout  Creating a business website  Creating a blog layout  Working with style sheets for print output Putting the pieces together The...

  • Page 361

    Putting Everything Together 359 Essentially, you can use CSS comments for writing notes within a style sheet , and whatever is between CSS comments (which begin with /* and end with */) is ignored by browsers. Comments can be multiline or single-line, and you can therefore use comments to create...

  • Page 362

    Chapter 10 360 About the design and required images As you can see from the previous screenshot, this page has a simple structure. The fixed-width layout has a masthead that contains the name of the portfolio and is bordered on the bottom, creating a visual separator between the site’s name and...

  • Page 363

    Putting Everything Together 361  “Image-replacement techniques” (Chapter 3)  “Switching images using JavaScript” (Chapter 5)  “Adding captions to your image gallery” (Chapter 5) I also took on board various techniques discussed in Chapter 4 regarding working with images. Ope...

  • Page 364

    Chapter 10 362 Styling the gallery The pictures-of-padstow.css document contains the styles for this layout, and these styles are arranged into sections, as explained earlier in the chapter. The defaults section includes two rules. The first is the universal selector (*), used to remove padding ...

  • Page 365

    Putting Everything Together 363 span rules are the image-replacement technique in full swing, as per the “Image-replacement techniques” section in Chapter 3. Note the h1.mainHeading rule’s font-size value, which ensures that the text doesn’t spill out from behind the image in Internet Ex...

  • Page 366

    Chapter 10 364 #thumbnailsContainer li { display: inline; } The final section in the style sheet is for images, and the three rules are as follows: img, which removes borders from linked images; #imgPhoto, which defines the margin under the main image; and #thumbnailsContainer img, which floa...

  • Page 367

    Putting Everything Together 365 About the design and required images Prior to working on this design, I decided that it would be a semi-liquid layout, with a maximum width of around 1000 pixels and a minimum width slightly larger than the width of the four tabs (which total 740 pixels). This ex...

  • Page 368

    Chapter 10 366 Putting the storefront together When working on this layout, I made use of techniques shown in the following exercises:  “Creating a maximum-width layout” (Chapter 7)  “Placing columns within a wrapper” (Chapter 7)  “Manipulating two structural divs for liquid l...

  • Page 369

    Putting Everything Together 367 In the content area, the sidebar div contents are straightforward: level-two headings are twice followed by unordered lists full of links (intended for links to top sellers and items coming soon), and a third heading is followed by a paragraph of text. In the main...

  • Page 370

    Chapter 10 368 #wrapper { max-width: 1000px; min-width: 760px; margin: 0 auto; } The #masthead rule adds a large bottom border of 18 pixels to the masthead. #masthead { border-bottom: 18px solid #eeeeee; } At this point, the reasoning for the #masthead rule won’t be apparent, so I’ll...

  • Page 371

    Putting Everything Together 369 float: left; width: 72%; } Next, the .itemContainer rule defines a border and margin at the bottom of the itemContainer divs. This is overridden for the last of the three containers by the .lastItemContainer rule to avoid a double underline (as explained earli...

  • Page 372

    Chapter 10 370 Fonts and fixes for the storefront layout In the fonts section of the CSS, the default font size is set using the html and body rules, as per the “Setting text using percentages and ems” section in Chapter 3. The h1 rule defines the lead heading, and I’ve done something that ...

  • Page 373

    Putting Everything Together 371 The remaining rules in this section are all straightforward. The .itemName, .itemCost rule emboldens the text in the list items with the class values of itemName and itemCost, thereby making the name and cost stand out more. And p.footer styles the footer paragra...

  • Page 374

    Chapter 10 372 Creating a business website This section will detail how I created the third layout in this chapter, which is suitable for a business website. This makes use of the two-tier navigation system devised in Chapter 5, and although the entire design doesn’t adhere strictly to a base...

  • Page 375

    Putting Everything Together 373 About the design and required images This design is clean and modern. The site is fixed-width, with a dark background color for the overall page; a dark gradient from the top draws the attention toward the top of the page. The masthead contains the company logo, ...

  • Page 376

    Chapter 10 374 Putting the business site together When creating this layout, I made use of methods shown in the following exercises/sections:  “Creating a fixed-width wrapper” (Chapter 7)  “Manipulating two structural divs for fixed-width layouts” (Chapter 7)  “Placing columns...

  • Page 377

    Putting Everything Together 375 Next, a horizontal rule provides a visual break from the introductory content, followed by two divs that have class values of columnLeft and columnRight. As you’ve no doubt guessed, these are the two columns; each contains an image, a level-two heading, and a pa...

  • Page 378

    Chapter 10 376 The next section, links and navigation, is copied wholesale from Chapter 5’s “Creating a two-tier navigation menu” exercise. There are no changes. Nothing to see here . . . move along. Next is the fonts section. This section is all pretty straightforward, assuming you’ve r...

  • Page 379

    Putting Everything Together 377 Creating a blog layout This section will detail how I created the fourth layout in this chapter, which is suitable for a blog layout. The emphasis here will be to create a mobile-first, responsive, adaptive experience. For this to happen, we will see how to struc...

  • Page 380

    Chapter 10 378 relative units. The completed web page (along with associated files) is within the blog-website folder, within the chapter 10 folder. The following image shows the mock-up of the page. About responsive design and semantic markup Responsive web design gives web designers the tools...

  • Page 381

    Putting Everything Together 379 Media Queries Beyond the media attribute, with CSS3 media queries extend the functionality of media types by allowing more precise labeling of style sheets. A media query consists of a media type and zero or more expressions that check for the conditions of parti...

  • Page 382

    Chapter 10 380 height and device-height orientation aspect-ratio and device-aspect-ratio color and color-index monochrome (if not a monochrome device, equals 0) resolution scan (describes the scanning process of tv output devices) grid (specifies whether the output device ...

  • Page 383

    Putting Everything Together 381 Our (mobile-first) strategy will be to define first the mobile-specific styles in style.css and then define media queries in enhanced.css that take care of the desktop. Here’s an example: /* Default (mobile) style in style.css */ #some-id { /* Styles for mobi...

  • Page 384

    Chapter 10 382 @font-face { font-family: "My Epic Font"; src: url("data:font/opentype;base64,[base64-encoded font here]"); } Instead, we’ll be using transitions to create a subtle hover effect for the navigation links. .nav li a { display: block; padding: 1em; ...

  • Page 385

    Putting Everything Together 383 In the old days (and, frankly, in the not-so-old days, since the practice somehow survives), designers often worked on so-called printer-friendly sites, run in parallel with the main site. However, if you’re using CSS layouts, it’s possible to create a style s...

  • Page 386

    Chapter 10 384 in pixels, but in the print CSS, it makes more sense to define these values in percentages. (Note that the 9.99% value is there in case of rounding errors.) .columnLeft, .columnRight { float: left; width: 45%; } .columnLeft { margin-right: 9.99%; } In the links and navigatio...

  • Page 387

    Putting Everything Together 385 Then, in the main style sheet, create a rule that displays this element offscreen when the page is loaded in a browser window. #printLogo { position: absolute; left: -1000px; } The content will then show up in print but not online. Note, however, that you shou...

  • Page 388

    Chapter 10 386 An example of how the print style sheet looks is shown in the following screenshot. Note that you can take things further in terms of layout, but it’s best to keep it simple. Also, ensure that you use the Print Preview functions of your browser test suite to thoroughly test you...

  • Page 389

    387 Appendix A An HTML5 reference This appendix details, in alphabetical order, generally supported elements and associated attributes. This is not intended as an exhaustive guide; rather, its aim is to list those elements important and relevant to current web design. Archaic deprecated elements...

  • Page 390

    Appendix A 388 Core attributes Attribute Description class=classname Specifies a CSS class to define the element’s visual appearance. id=name Defines a unique reference ID for the element. style=style Specifies an inline CSS style for an element. title=string Specifies the element’s title. O...

  • Page 391

    An HTML5 reference 389 Language attributes Attribute Description dir=dir Specifies the text rendering direction: left-to-right (ltr, the default) or right-to-left (rtl). lang Specifies the language for the tag’s contents, using two-letter primary ISO639 codes and optional dialect codes. Includ...

  • Page 392

    Appendix A 390 pressed key while the element’s content area is focused onmousedown=script Specifies a script to be run when the user presses down the mouse button while the cursor is over the element’s content area onmousemove=script Specifies a script to be run when the user moves the mouse ...

  • Page 393

    An HTML5 reference 391 onselect=script Specifies a script to be run when the element is selected onsubmit=script Specifies a script to be run when a form is submitted Window events These events are valid only in the following elements: body and frameset. Attribute Description onload=script Spec...

  • Page 394

    Appendix A 392 onresize=script Specifies a script to be run when the window is resized onstorage=script Specifies a script to be run when a web storage area is updated onundo=script Specifies a script to be run when the document performs an undo onunload=script Specifies a script to be run when ...

  • Page 395

    An HTML5 reference 393 web page links” section. href=URL Defines the link target. hreflang=language_code Specifies the language of the linked document media=media_query Specifies what media/device the linked document is optimized for rel=relationship Specifies the relationship from the c...

  • Page 396

    Appendix A 394 abbreviation. This can be useful for nonvisual web browsers. For example:<abbr title="Doctor">Dr.</abbr> See also Chapter 3’s “Acronyms and abbreviations” section. Core events <address> Used to define addresses, signatures, or document authors. T...

  • Page 397

    An HTML5 reference 395 right corners. For circle, three values are required, with the first two defining the x and y coordinates of the hotspot center and the third defining the circle’s radius. For poly, each pair of x and y values defines a point of the hotspot. href=URL The link target. ...

  • Page 398

    Appendix A 396 <audio> Defines sound content. Core attributes, language attributes Core events autoplay=autoplay Specifies that the audio will start playing as soon as it is ready. controls=controls Specifies that audio controls should be displayed (such as a play/pause button). loop...

  • Page 399

    An HTML5 reference 397 <base /> Specifies a base URL for relative URLs on the web page. href=URL (required) Defines the base URL touse. This attribute is required. target=_blank| _parent|_self| _top|[name] (deprecated) Defines where to open page links. Can be overridden by inline targ...

  • Page 400

    Appendix A 398 sections. cite=URL Defines the online location of quoted material. <body>(required) Defines the document’s body and contains the document’s contents. Core attributes, language attributes Core events, onload, onunload <br /> Inserts a single line break. Core at...

  • Page 401

    An HTML5 reference 399 form=form_id Specifies one or more forms the button belongs to. formaction=URL Specifies where to sendthe form data when a form is submitted. Only for type="submit". formenctype= application/x-www-form-urlencoded| multipart/form-data|text/plain Specifies ho...

  • Page 402

    Appendix A 400 with its contents. Omitting the caption may mean the table’s contents are meaningless out of context. See also Chapter 6’s “Captions and summaries” section. <cite> Defines content as a citation. Usually rendered in italics. See also Chapter 3’s “Block quotes, quo...

  • Page 403

    An HTML5 reference 401 <colgroup> Defines a column group within a table, enabling you to define formatting for the columns within. See the <col /> entry for examples. See also Chapter 6’s “Scope and headers” section. Core attributes, language attributes Core events span=numbe...

  • Page 404

    Appendix A 402 type="radio". type=checkbox| command| radio Specifies the type of command. <datalist> Specifies a list of predefined options for input controls. Core attributes, language attributes Core events <dd> Defines a definition description within a definition lis...

  • Page 405

    An HTML5 reference 403 details that the user can view or hide. Core events open=open Specifies that the details should be visible (open) to the user. <dfn> Defines enclosed content as the defining instance of a term. Usually rendered in italics. See also Chapter 3’s “Block quotes, q...

  • Page 406

    Appendix A 404 and the “Displaying blocks of code online” exercise. <dt> Defines a definition term within a definition list. See the <dl> entry for an example. See also Chapter 3’s “Definition lists” section and the “Displaying blocks of code online” exercise. Core att...

  • Page 407

    An HTML5 reference 405 with the legend element to enhance form accessibility (see the <legend> entry for more information). See also Chapter 8’s “Improving form accessibility” section. disabled=disabled Specifies that a group of related form elements should be disabled. form=form_...

  • Page 408

    Appendix A 406 is required. autocomplete=on| off Specifies whether a form should have autocomplete on or off enctype=encoding The MIME type used to encode the form’s content before it’s sent to the server, so it doesn’t become scrambled. Defaults to application/x-www-form-urlencoded. Ot...

  • Page 409

    An HTML5 reference 407 displayed smaller than body copy by default, they are not a means to create small text; rather, they are a way to enable you to structure your document. This is essential, because headings help with assistive technology, enabling the visually impaired to efficiently surf t...

  • Page 410

    Appendix A 408 <html> (required) Defines the start and end of the HTML document. Language attributes manifest=URL Specifies the address of the document’s cache manifest (for offline browsing). xmlns=namespace Defines the XML namespace (e.g., actionURI(http://www.w3.org/):http://www....

  • Page 411

    An HTML5 reference 409 height=pixels Specifies the height of an iframe. name=name Specifies a name for the iframe. sandbox= ""| allow-forms| allow-same-origin| allow-scripts| allow-top-navigationEnables a set of extra restrictions for the content in the iframe. seamless=seamless...

  • Page 412

    Appendix A 410 content or, if it’s a link, its function. When an image has no visual semantic significance, include it via CSS. If that’s not possible, use alt="". This attribute is required. See also Chapter 4’s “Using alt text for accessibility benefits” section. height=num...

  • Page 413

    An HTML5 reference 411 element. Only used with type="file". alt=text Provides alternate text for nonvisual browsers. Only used with type="image". autocomplete=on| off Specifies whether an <input> element should have autocomplete enabled. autofocus=autofocus Specifi...

  • Page 414

    Appendix A 412 type="image"). formmethod=get| post Defines the HTTP method for sending data to the action URL (for type="submit" and type="image"). formnovalidate=formnovalidate Defines that form elements should not be validated when submitted. formtarget=_blan...

  • Page 415

    An HTML5 reference 413 the following types: button, checkbox, file, hidden, image, password, text, and radio. pattern=regexp Specifies a regular expression that an <input> element’s value is checked against. placeholder=text Specifies a short hint that describes the expected value of ...

  • Page 416

    Appendix A 414 value=string (required when type=checkbox and type=radio) When type="button", type= "reset", or type="submit", it defines button text. When type="checkbox" or type="radio", it defines the result of the input element; the result is...

  • Page 417

    An HTML5 reference 415 amended. Various formats are possible, including YYYY-MM-DD and YYYY-MM-DDThh:mm:ssTZD (where TZD is the time zone designator). See actionURI(http://www.w3.org/):www.w3.org/ TR/1998/NOTE-datetime-19980827 for more date and time formatting information. <keygen> Defin...

  • Page 418

    Appendix A 416 programming-oriented content” section. <label> Assigns a label to a form control, enabling you to define relationships between text labels and form controls. For example: <p><strong><label for="realname">Name</label> </strong><br...

  • Page 419

    An HTML5 reference 417 “The label, fieldset, and legend elements” section. accesskey= character Defines a keyboard shortcut to access an element. <li> Defines a list item. Must be nested within <ol> or <ul> elements (see the separate <ol> and <ul> entries). S...

  • Page 420

    Appendix A 418 modern browsers use the data to provide extra navigation toolbars/options. See also Chapter 2’s, “Attaching external CSS files: The link method” and “Attaching favicons and JavaScript” sections. href=URL The URL of the target. hreflang= language code Defines the lang...

  • Page 421

    An HTML5 reference 419 one or more area elements (see preceding <area /> entry). See also Chapter 5’s “Image maps” section. Core events, onblur, onfocus name=name Defines a unique name for the map. <mark> Defines marked/highlighted text.Core attributes, keyboard attributes,...

  • Page 422

    Appendix A 420 See also Chapter 2’s, “meta tags and search engines” and “What about the XML declaration?” sections. charset=character_set Specifies the character encoding for the HTML document. content=string (required) Defines the value of the meta tag property. http-equiv=string ...

  • Page 423

    An HTML5 reference 421 optimum=number Specifies what value is the optimal value for the gauge. value=number Required. Specifies the current value of the gauge. <nav> Defines navigation links. <noembed>(nonstandard) Nested within embed elements and displayed only when the browse...

  • Page 424

    Appendix A 422 to. height=pixels Specifies the height of the object. name=name Specifies a name for the object. type=mime_type Specifies the MIME type of data specified in the data attribute. usemap=#mapname Specifies the name of a client-side image map to be used with the object. width=...

  • Page 425

    An HTML5 reference 423 varies between browsers. Some italicize optgroup label values to highlight them, while others highlight them by inverting the optgroup label value. Others display t <select name="> <optgroup label="fruits"> <option value="Apple"> ...

  • Page 426

    Appendix A 424 section. disabled=disabled Disables the option. The only value for this attribute is disabled. label=string Defines a label for this option. selected=selected Sets the option as the default. The only value for this attribute is selected. value=string Defines the value of th...

  • Page 427

    An HTML5 reference 425 element. name=name Defines a unique name for the element. value=string Defines the element’s value. <pre> Defines enclosed contents as preformatted text, thereby preserving the formatting from the HTML document. Usually displayed in a monospace font. Cannotcon...

  • Page 428

    Appendix A 426 support Ruby annotations. Core events <rt> Defines an explanation/pronunciation of characters (for East Asian typography). Core attributes, language attributes Core events <ruby> Defines a ruby annotation (for East Asian typography). Core attributes, language attribu...

  • Page 429

    An HTML5 reference 427 Use with care. src=URL Provides the URL of an external script. type=MIME type (required) Defines the MIME type of the scripting language, such as text/javascript or text/vbscript. This attribute is required. async=async Specifies that the script is executed asynchrono...

  • Page 430

    Appendix A 428 name=name Defines a name for the element. size=number Sets the element to a pop-up menu when the value is 1, or a scrolling list when the value is greater than 1. autofocus=autofocus Specifies that the drop-down list should automatically get focus when the page loads. form=...

  • Page 431

    An HTML5 reference 429 span elements to create <span class="styleName">styled inline text</span>.</p>. <strong> Defines enclosed content as strongly emphasized. Generally renders as bold text in browsers and is preferred over <b></b> (see separate ...

  • Page 432

    Appendix A 430 projection, screen, tty, and tv. type=MIME type•(required) Defines the MIME type of the style’s contents. The only currently viable value is text/css, although this may change in the future. The value text/javascript is also allowed. <sub> Defines contents as subscript...

  • Page 433

    An HTML5 reference 431 “Building a table” sections. colspan=number Defines how many columns the cell spans. See also Chapter 6’s “Spanning rows and cells” section. headers=id list A list of cell IDs that provide header information for this cell, thereby enabling nonvisual browsers t...

  • Page 434

    Appendix A 432 between the start and end tags. Although the cols and rows attributes are required, you can override these settings by using CSS. See also Chapter 8’s “Adding controls” section. cols=number•(required) Specifies the visible width in characters of the textarea. This attribu...

  • Page 435

    An HTML5 reference 433 submitted in a form. readonly=readonly Indicates the textarea is read-only and cannot be modified. The only value for this attribute is readonly. rows=number(required) Specifies the visible height (expressed as a number of rows) of the textarea. This attribute is requir...

  • Page 436

    Appendix A 434 <td headers="theTitle">A new book</td> <td headers="price">$29.99</td>. rowspan=number Defines how many rows the cell spans. See also Chapter 7’s “Spanning rows and cells” section. scope=col| colgroup|row| rowgroup States whethe...

  • Page 437

    An HTML5 reference 435 nearest ancestor <article> element). <track> Defines text tracks for media elements (<video> and <audio>).Core attributes, language attributes Core events default=default Specifies that the track is to be enabled if the user's preferences do not i...

  • Page 438

    Appendix A 436 autoplay=autoplay Specifies that the video will start playing as soon as it is ready. controls=controls Specifies that video controls should be displayed (such as a play/pause button). height=pixels Sets the height of the video player. loop=loop Specifies that the video wil...

  • Page 439

    437 Appendix B Web Color Reference This appendix provides an overview of how to write color values for the Web, as well as a full list of supported color names. See the “Color theory” section in Chapter 4 for a discussion of color theory. Color values On the Web, colors are displayed by mixi...

  • Page 440

    Appendix B 438 and the others to null, you get #ff0000, which is the hex color value for red. If you write #00ff00, you get green, and if you write #0000ff, you get blue. If all are set to full, you get white (#ffffff), and if all are null values, you get black (#000000). Hexadecimal can also be...

  • Page 441

    Web Color Reference 439 Yellow #ffff00 #ff0 255,255,0 Although each color name in the preceding table begins with a capital letter (for book style purposes), color names are case-insensitive, and lowercase is most commonly used. However, most designers ignore color names entirely, using hex all...

  • Page 442

    441 Appendix C ENTITIES reference Generally speaking, characters not found in the normal alphanumeric set must be added to a web page by way of character entities. These take the form &#n;, with n being a two- to four-digit number. Many entities also have a name, which tends to be more conve...

  • Page 443

    Appendix C 442 The ampersand character is commonly used in URL query strings (particularly when working with server-side languages), and in such cases, the & must be replaced by the entity name or number (it will still be correctly interpreted by the browser). Character Description Entity N...

  • Page 444

    ENTITIES reference 443 « Double left angle &laquo; &#171; » Double right angle &raquo; &#187; ‚ Single low-9 &sbquo; &#8218; „ Double low-9 &bdquo; &#8222; Spacing and nonprinting characters On Windows, zero-width joiner and zero-width nonjoiner may be disp...

  • Page 445

    Appendix C 444 Punctuation characters Character Description Entity Name Entity Number | Broken vertical bar &brvbar; &#166; • Bullet point &bull; &#8226; † Dagger &dagger; &#8224; ‡ Double dagger &Dagger; &#8225; ″ &Prime; &#8243; … Ellipsis &a...

  • Page 446

    ENTITIES reference 445 Symbols Character Description Entity Name Entity Number ℑ Blackletter capital I, imaginary part &image; &#8465; ← Blackletter capital R, real part &real; &#8476; © Copyright symbol &copy; &#169; ª Feminine ordinal &ordf; &#170; º Mas...

  • Page 447

    Appendix C 446 Characters for European languages For any characters that have accents, circumflexes, or other additions, entities are available. However, many of these entities have their roots in the days when ASCII was the only available encoding method. These days, as long as you use the appr...

  • Page 448

    ENTITIES reference 447 accent Å Uppercase A, ring &Aring; &#197; å Lowercase a, ring &aring; &#229; Ã Uppercase A, tilde &Atilde; &#195; ã Lowercase a, tilde &atilde; &#227; Ä Uppercase A, umlaut &Auml; &#196; ä Lowercase a, umlaut &auml; &#2...

  • Page 449

    Appendix C 448 ë Lowercase e, umlaut &euml; &#235; Uppercase eth &ETH; &#208; Lowercase eth &eth; &#240; Í Uppercase I, acute accent &Iacute; &#205; í Lowercase i, acute accent &iacute; &#237; Î Uppercase I, circumflex accent &Icirc; &#206; ...

  • Page 450

    ENTITIES reference 449 ò Lowercase o, grave accent &ograve; &#242; Ø Uppercase O, slash&Oslash; &#216; ø Lowercase o, slash &oslash; &#248; Õ Uppercase O, tilde &Otilde; &#213; õ Lowercase o, tilde &otilde; &#245; Ö Uppercase O, umlaut &Ouml; &am...

  • Page 451

    Appendix C 450 ù Lowercase u, grave accent &ugrave; &#249; Ü Uppercase U, umlaut &Uuml; &#220; ü Lowercase u, umlaut &uuml; &#252; Uppercase Y, acute accent &Yacute; &#221; Lowercase y, acute accent &yacute; &#253; Ÿ Uppercase Y, umlaut &Yuml; &a...

  • Page 452

    ENTITIES reference 451 mathematical characters (fractions and the most commonly used mathematical symbols), advanced mathematical and technical characters (characters of interest to those marking up technical documents or anything other than basic mathematical text), and Greek characters. Common ...

  • Page 453

    Appendix C 452 ∠ Angle &ang; &#8736; ≅ Approximately equal to &cong; &#8773; ∗ Asterisk operator &lowast; &#8727; ⊕ Circled plus, direct sum &oplus; &#8853; Circled times, vector product &otimes; &#8855; ] Contains as member &ni; &#8...

  • Page 454

    ENTITIES reference 453 Ó Not an element of &notin; &#8713; ˜ Not a subset of &nsub; &#8836; fi Not equal to &ne; &#8800; ∂ Partial differential &part; &#8706; ± Plus-minus sign, plus-or-minus sign &plusmn; &#177; ∝ Proportional to &prop; &...

  • Page 455

    Appendix C 454 α Lowercase alpha &alpha; &#945; Β Uppercase beta &Beta; &#914; β Lowercase beta &beta; &#946; Γ Uppercase gamma &Gamma; &#915; γ Lowercase gamma &gamma; &#947; ∆ Uppercase delta &Delta; &#916; δ Lowercase delta &delta; &...

  • Page 456

    ENTITIES reference 455 ν Lowercase nu &nu; &#957; Ξ Uppercase xi &Xi; &#926; ξ Lowercase xi &xi; &#958; Ο Uppercase omicron &Omicron; &#927; ο Lowercase omicron &omicron; &#959; Π Uppercase pi &Pi; &#928; π Lowercase pi &pi; &#960; ...

  • Page 457

    Appendix C 456 ϑ Small theta symbol &thetasym; &#977; ° Greek upsilon with hook &upsih; &#978; ϖ Greek pi symbol &piv; &#982; Arrows, lozenge, and card suits Character Description Entity Name Entity Number ↵ Carriage return &crarr; &#8629; ↓ Down arrow &...

  • Page 458

    ENTITIES reference 457 Converting the nonstandard Microsoft set The final table in this appendix lists the nonstandard Microsoft set and modern equivalents. Some older HTML editors, such as Dreamweaver 4, insert nonstandard entity values into web pages, causing them to fail validation. Here, we ...

  • Page 459

    Appendix C 458 — Em dash &#151; &mdash; &#8212; ~ Tilde &#152; &tilde; &#732; ™ Trademark symbol &#153; &trade; &#8482; š Lowercase s, caron &#154; &scaron; &#353; > Greater-than sign &#155; &gt; &#62; œ Lowercase oe ligature &...

  • Page 460

    459 Appendix D CSS Reference This appendix lists CSS properties and values. In many cases, properties have specific values, which are listed in full. However, some values are common across many properties. These values are outlined in Table D.1, and in Table D.2 these values are shown in italics...

  • Page 461

    Appendix D 460 The CSS box model In CSS, every element is considered to be within its own box, and you can define the dimensions of the content and then add padding, a border, and a margin to each edge as required, as shown in the following image. Padding, borders, and margins are added to t...

  • Page 462

    CSS Reference 461 Common CSS values In addition to the values listed in Table D.1, a property may have a value of inherit, whereupon it takes the same value as its parent. Some properties are inherited by default—see Table D.2 for more information. Table D.1. Common CSS values Value Formats col...

  • Page 463

    Appendix D 462 When setting element dimensions (width, height, margins, and so on), one em is equal to the font size of that element. However, when setting font sizes for an element, one em is equal to the font size of its parent element. In both cases, this is measured relative to the dimension...

  • Page 464

    CSS Reference 463 for web backgrounds” sections. background-attachment scroll | fixed | local Determines whether a background image is fixed or scrolls with the page. See also Chapter 2’s “background-attachment” section. No background-color transparent | colorDefines an element’s backg...

  • Page 465

    Appendix D 464 border-bottom Shorthand for defining bottom border property values (see border). No border-bottom-color color | transparent Sets the bottom border color. No border-bottom-style (See border-style.) Sets the bottom border style. No border-bottom-width (See border-width.) Sets the b...

  • Page 466

    CSS Reference 465 border-left-style (See border-style.) Sets the left border style. No border-left-width (See border-width.) Sets the left border width. No border-radius length | percentage Defines how rounded border corners are. No border-right Shorthand for defining right border property valu...

  • Page 467

    Appendix D 466 border-top-style (See border-style.) Sets the top border style. No border-top-width (See border-width.) Sets the top border width. No border-width length | medium | thick | thin Sets the width of an element’s borders. Can work as shorthand: border-width: 1px 2px 3px 4px; See a...

  • Page 468

    CSS Reference 467 measurements specify offsets from the left border edge of the box in left-to-right text and from the right border edge of the box in right-to-left text. The defined region clips out any aspect of the element that falls outside the clipping region. The preceding example creates ...

  • Page 469

    Appendix D 468 url | counter(name) | counter(name, list-style-type) | counters(name, string) | counters(name, string, list-style-type) | open-quote | close-quote | no-open-quote | no-close-quote | attr(X) CSS selector, using the :before and :after pseudo-elements. Example: #users h2:before { co...

  • Page 470

    CSS Reference 469 table-row empty-cells hide | show Determines whether empty table cell borders show when using the separated borders model. (See border-collapse.) Yes float left | none | right Defines whether an element floats left or right (allowing other content to wrap around it) or display...

  • Page 471

    Appendix D 470 should take care not to put commas inside the closing quotes. Example: font-family: Georgia, "Times New Roman", serif; See also Chapter 3’s “Defining fonts” section. font-size-adjust none | number Defines the font size should be chosen based on the height of lower...

  • Page 472

    CSS Reference 471 image-rendering auto | inherit | optimizeSpeed | optimizeQuality Provides a hint to the user agent about how to handle its image rendering. Yes ime-mode auto | normal | active | inactive | disabled Controls the state of the input method editor for text fields. No left auto | le...

  • Page 473

    Appendix D 472 type square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | lower-roman | upper-roman | armenian | georgian understand an ordered list value, it defaults to decimal. Generally, none, circle, square, decimal, and the alpha an...

  • Page 474

    CSS Reference 473 max-height none | length | percentage Sets the maximum height of an element. Does not apply to table elements. No max-width none | length | percentage Sets the maximum width of an element. Does not apply to table elements. See also the Chapter 7 exercise “Creating a maximum-...

  • Page 475

    Appendix D 474 scroll | visible too large for the defined dimensions of the element. auto: If content is clipped, the browser displays a scroll bar. hidden: Content is clipped, and content outside the element’s box is not visible. scroll: Content is clipped, but a scroll bar is made availab...

  • Page 476

    CSS Reference 475 properties. fixed: As per absolute, but the element remains stationary when the screen scrolls. Poorly supported by some browsers. relative: Offset from the static position by the values set using top, right, bottom, and left properties. static: The default. The top, right, ...

  • Page 477

    Appendix D 476 underline default depends on the element in question. Note that browsers may ignore blink but still be considered compliant. Examples: text-decoration: underline; text decoration: underline line-through; See also Chapter 5’s “Editing link styles using CSS” section. text-dec...

  • Page 478

    CSS Reference 477 translateY transform-origin left | center | right | top | bottom | center | percentage | length Allows you to you modify the origin for transformations of an element. No unicode-bidi bidi-override | embed | normal Enables overrides for text direction. The embed value forces te...

  • Page 479

    Appendix D 478 word-wrap normal | break-word Defines whether the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit. Yes z-index auto | number Changes an element’s position in the stack. Higher numbers are “clos...

  • Page 480

    CSS Reference 479 Adjacent element1+element2 Matches element2, adjacent to element1. For example, h1+h2 matches any h2 element that directly follows an h1 element within the web page, with no other elements in between. Attribute element[attribute] Matches an element of type element that has an a...

  • Page 481

    Appendix D 480 :hover The state when the pointer is over an element. :lang Applies to elements with the specified language (defined using xml:lang). :link Applies to an unvisited link. :visited Applies to a visited link. :target The target pseudo-class is used in conjunction with IDs and matche...

  • Page 482

    CSS Reference 481 parameter of :not(). :empty Selects elements that contain no text and no child elements. For example: <p></p> Pseudo-elements Pseudo-elements enable generated content that’s not in the document source and the styling of conceptual document components (see Table D....

  • Page 483

    Appendix D 482 7. forms Notes */ An example of a section of a boilerplate is shown next, with empty rules waiting to be filled. Here, a single tab is represented by eight spaces. Note how the property/value pairs and closing curly quotes are indented equally. This makes it easier to sc...

  • Page 484

    CSS Reference 483 #sidebar h3 { } Rule-specific comment: .boxoutProducts {/* used on sales and purchase pages */ } Pair-specific comment: body.advert h2 { font-size: 1.5em; text-transform: uppercase; /* over-ride for ad pages only */ } Note that the inde...

  • Page 485

    485 Index A Absolute 151,links, 148–149 Additive color 123,systems, 120–121 Attribute selectors, 18,14 Attributes, HTML5 event 391,core, 389–390 form 392,element, 390–391 wind 393,ow, 391 389,standard, 387 390,core, 388 390,keyboard, 388 391,language, 389 Automated gallery scrip...

  • Page 486

    Index 486 Business website design, styling procedure (cont.) universal selector rule, 377,375 wrapper 377,rule, 375 techniques, 375, 373–374 C Cascading style sheets (CSS) basic selectors, 479,478–479 boilerplates and management, 482,17–22, 481–483 232,border-spacing, 229–230 box m...

  • Page 487

    Index 487 spacing and nonprinting 444,characters, 443 445,symbols, 444–445 Class selectors, 15,11–12 Collapsible page content enhancing accessibility, 191,188–189 192, 192,modularizing, 189–190 set 189,up, 186–187 193,targets, 190–191 Color theory additive and subtractive color...

  • Page 488

    Index 488 Graphical navigation, with rollover effects (cont.) multicolumn drop-down menu, 226,223–227 multiple link styles and colors, using grid 213,image, 210–213 Graphics Interchange Format (GIF) colors 129,restriction, 126 description, 128, 125 GIF89 file format, 130,127 129,uses, 12...

  • Page 489

    Index 489 description, 123, 120 formats BMP /TIFF 131,file, 128 128,GIF, 125–127 127,JPEG, 124–125 130,PNG, 127–128 HTML accessibility 136,benefits, 133 alt and title text, for tooltips, 137,134 alternate 136,text, 133 img element, 135,132 link-based images, 136,133 null alt attrib...

  • Page 490

    Index 490 Navigation bars, graphical navigation, with rollover effects (cont.) bar creation, using CSS 209,backgrounds, 206–210 CSS 210,sprites, 207 drop-down 222,menu, 219–222 graphical tabs creation, 216,213– 218,215 multicolumn drop-down menu, 226,223–227 multiple link styles and ...

  • Page 491

    Index 491 universal selector, 369,367 wrapper 369,rule, 367 techniques, 368, 366–367 P Page layouts, CSS boxouts description, 266, 263 float property, 267,264–268 equal-column-split rule, 302,299 multiple boxes and columns, 271,268 automate page layout 300,variations, 297–300 clearing...

  • Page 492

    Index 492 Q Quotation 443,marks, 442 R Relative links, 152,149 Responsive web design, 307,304–306 Root-relative 153,links, 150 Rounding 354,errors, 351–352 S Scrolling description, 303, 300 fluid grid 305,layouts, 302–303 responsive web design, 307,304–306 scrollable content areas,...

  • Page 493

    Index 493 vertical 234,alignment, 231 Top-of-page 154,links, 151–152 Two structural divs fixed-width 272,layouts, 269–275 liquid 279,layouts, 276–280 U, V User feedback addresses scrambling, 311,308 contact pages layout description, 333, 330–332 using 335,microformats, 332–337 onl...

  • Page 494

    Index 494 Web design (cont.) web page structure and layout, 28,24–26 WYSIWYG tools, 10,6 Web navigation description, 149, 146 do’s and 230,don’ts, 227 inline 149,navigation, 146 navigation bars graphical navigation, with rollover 209,effects, 206–226 inline 201,lists, 198–206 194...

  • Page 495

    Index 495 description, 169, 166–167 fake images maps, using CSS, 176,173–179 image 175,maps, 172–173 internal page 153,links, 150–151 link 155,states, 152 link targeting, 169,166 multiple link 159,states, 156–159 relative links, 152,149 root-relative 152,links, 149–150 top-of-...

  • Page 496

    The Essential Guide to HTML5 and CSS3 Web Design Craig Grannell Victor Sumner Dionysios Synodinos www.freepdf-books.com

  • Page 497

    ii The Essential Guide to HTML5 and CSS3 Web Design Copyright © 2012 by Craig Grannell, Victor Sumner, Dionysios Synodinos This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation,...

  • Page 498

    iiiDedicated to my grandmother, Ellen, whose passion for life has always inspired me to take on any challenge. —Victor Sumner I dedicate this book to my wonderful family. To my loving mother, Aggeliki. To my beautiful wife, Elisa. To my beloved daughter, Aggeliki. To my precious newborn son....

  • Page 499

    v Contents About the Authors .................................................................................................... 507,xiii 507, About the Technical Reviewer................................................................................. 508,xiv About the the Cover Image Desi...

  • Page 500

    Contents vi DOCTYPE declarations explained ...................................................................................... 36,32 36, The head section ..................................................................................................................... 36,32 Page titles .....

  • Page 501

    Contents vii Styling semantic markup ..................................................................................................... 95,92 95, Creating drop caps and pull quotes using CSS ................................................................ 106,103 106, Working with lists.......

  • Page 502

    Contents viii Descriptive alt text for link-based images......................................................................... 136,133 136, Null alt attributes for interface images .............................................................................. 136,133 136, Using alt and title t...

  • Page 503

    Contents ix Creating navigation bars ....................................................................................................... 194,191 Using lists for navigation bars ........................................................................................... 194,191 194, The nav ...

  • Page 504

    Contents x Advanced layouts with multiple boxes and columns ............................................................. 271,268 271, Working with two structural divs ........................................................................................ 272,269 272, Placing columns within wr...

  • Page 505

    Contents xi Dealing with rounding errors ............................................................................................. 354,351 354, Alt text overriding title text ................................................................................................. 355,352 Fixing ha...

  • Page 506

    Contents xii Window events .................................................................................................................. 393,391 HTML5 elements and attributes ............................................................................................ 394,392 394, Appendix ...

  • Page 507

    xiii About the Authors Craig Grannell is a writer and designer. Originally trained in the fine arts, the mid-1990s saw Craig immersed in the world of digital media, his creative projects encompassing video, installation-based audio work, and strange live performances-sometimes with the aid of ...

  • Page 508

    xiv About the Technical Reviewer “I’ve seen the future. It’s in my browser!” Jeffrey Sambells does what he loves. He is a father, designer, developer, author, and entrepreneur, among many other things. He started dabbling in the Web more than a decade ago and has turned it into a passi...

  • Page 509

    xv About the Cover Image Artist Corné van Dooren designed the front cover image for this book. After taking a break from friends of ED to create a new design for the Foundation series, he worked at combining technological and organic forms, with the results now appearing on the cover of this ...

  • Page 510

Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML5 Books, HTML5 Book Pdf, HTML5 Pdf Books, HTML5 Pdf Books Download, HTML5 Pdf Books Free Download, Free ReadOnline Books, ReadOnline Book Pdf, ReadOnline Pdf Books, ReadOnline Pdf Books Download, ReadOnline Pdf Books Free Download, Free Web Designing Books, Web Designing Book Pdf, Web Designing Pdf Books, Web Designing Pdf Books Download, Web Designing Pdf Books Free Download,