web-design-with-html-and-css-digital-classroom

A A List Apart, 16 About Us page, 187–188 Absolute positioning, 190–193 Absolute-size , 118 Add Layer Mask button, 105 Adobe BrowserLab, 202–203 Adobe Dreamweaver Automated settings, 63 Coding environment, 44 Creating websites in, 46–48 Defi ning websites in, 45 Description of, 42 Design and Layout tools, 43 Downloading, 45 File transfer protocol, 43 Importing existing website into, 48–49 Site management, 43 Sources, 45 Templates, 45 Adobe Fireworks, 22 Adobe Flash Adding to pre-existing design, 232–235 Adding to web page, 229–231 Considerations when using, 229 Description of, 212–213 Development of, 228 Looping, 235 Parameters, 235 Adobe Flash Player, 229 Adobe Photoshop Opening images, 79, 101 Slicing an image, 107–111 Adobe Photoshop Extended, 83 a:hover property, 184 AIGA, 16 Alpha transparency, 206 Alt Tag text box, 109 Analytic software, 13–14 Animation CSS, 264, 266 GIF image, 93, 101–104 HTML5, 260–261 Anti-aliasing, 86 Apple Bootcamp, 201 Apple iPhone, 244–245, 249 Apple Safari, 51, 208, 244, 253 <article> element, 258 ASP, 41, 44 ASP.NET, 45 Attributes, 58, 64 Audience, 31–33 B Background color, 174–177 Background images Adding to footer, 167–170 CSS, 177–180 Background-position , 179 BBedit, 41 Berners-Lee, Tim, 26–27 Best practices, 65 Borders, 265 Browsers Compatibility, 202–203, 206–209 CSS fi xes for incompatibilities, 204 CSS3 support, 266 Defi nition of, 196 Development tools in, 51–52 Font size changes, 119 Geolocation, 263 History of, 27 HTML code and, 28, 57 HTML5 support, 266, 268 Incompatibilities, 204 Level of support, 197 Menu bar, 30 Mobile device, 245 Problems in, tools to identify, 200–209 Resizing text on, 118–119, 122 Statistics, 199 Testing of, 196–199 Web pages in, 196–197 Website identifi cation of, 245 Window size, 80 Zoom feature, 122 Bullet lists, 136 C <canvas> element, 260–261, 264 Chartbeat.com, 14 Class selectors, 70 Class styles, 70–71 Clear property, 155 Client-side languages, 44 Coda, 40–41 Code Coloring of, 39 Completion of, 40 Index 277CSS. See CSS Editing, 42 HTML. See HTML ColdFusion, 44 Color, background, 174–177 Color Libraries button, 98 Color Picker window, 98 Columns CSS fl oat property, 153–154 Two-column fi xed-width layouts, 147–151 Commands, 3 Competitive research, 12 Conditional comment operators, 204–205 Conferences, 5 Contact page, 187 Contextual selector, 156 Copying lesson fi les to hard drive, 3 Creating website in Dreamweaver, 46–48 in Expression Web, 50 Criticism, 23 Crop, 83 CSS Absolute positioning, 190–193 Animations, 264, 266 Background images, 177–180 Border property, 125 Browser incompatibilities, 204 Class styles, 70–71 Clear property, 155 Description of, 66 External style sheets. See External style sheets Fixed positioning, 193 Float property Columns created with, 153–154 Description of, 151–153 List-based navigation created using, 155–158 Font stack, 115 Formatting text with. See Formatting text Future of, 206–207 Goals, 145 Heading styles, 67–69 Hexadecimal colors, 69 HTML lists for. See HTML lists Inline styles, 71–72 Inspecting properties of, 51 Internal style sheets, 71–72, 158 Layouts Text styles, 158–159 Two-column fi xed-width, 147–151 278 Web Design with HTML and CSS Digital Classroom Letter-spacing property, 129–130 Limitations, 212 Margin property, 124 Navigation bar, 183–186 Reading, 3 Relative positioning, 190, 193 Reset fi le, 140–142 Rules, 70–75, 140 Sliced images exported to, 111 Syntax, 66 2D transformations, 265 Transitions, 265 2D transformations, 265 User interactions, 212 CSS3 Backgrounds, 265 Borders, 265 Browser support of, 266 Description of, 209 Drop shadows, 265 Gradients, 265 HTML5 integration with, 264–266 Media queries, 246–253 RGBA colors, 265 Rounded corners, 265 Current Slice button, 109 D Deep navigation, 17 Defi nition lists, 130, 133 Descendant selector, 134 DigitalClassroomBooks.com, 5 Displays, 32 Dithering, 96 Doctype, 58 Document Object Model, 221–222 Domain name servers, 27 Domain names Description of, 26–27 Purpose of, 27 Drop shadows, 265 .dwt, 45 E E Text Editor, 41 Educators, 5 EightShapes Unify, 22 Embedding media fi les in HTML5, 258–260 Ems Description, 119–122 Pixel conversions, 123, 126 Emulators, 249Eraser tool, 94 Events, JavaScript Description of, 215, 218–220 Show eff ect triggered by adding, 225–228 Existing website Importing into Dreamweaver, 48–49 Integrating Flash into, 232–235 Export button, 49 External style sheets Creating, 72–74 Defi nition of, 71 Internal style sheets versus, 72 Managing of, 176 Moving internal styles to, 187 When to use, 176 Eyedropper tool, 97 F Failure, 23 <fi gure> element, 262 <fi gurecaption> element, 262 File transfer protocol, 43 Fireworks (Adobe), 22 Fixed positioning, 193 Fixed-width layouts Description of, 145–146 Margins eff ect on, 160–167 Mobile devices, 241–243 Padding eff ect on, 160–167 Two-column, 147–151 FLA authoring fi le, 230 Flexible layouts, 145–146 Float property Columns created with, 153–154 Description of, 151–153 List-based navigation created using, 155– 158 Folder icon, 46 Font(s) Challenges associated with, 114–115 Defi nition of, 114 @font-face , 266 Font-family, 116–117 Sources of, 117 Typeface versus, 114 Web-safe types of, 115 Font size em measurements, 119–122 Percent measurements, 119–122 Pixels, 118–119 Points, 118 Unit of measurement for, 118 Font stack, 115 Footer, 167–170 Formatting text Fonts. See Font(s) Margins used to modify space between text, 124–127 Paragraph line-height , 127–128 Sizing text, 118–123 G Geolocation, 263 GIF image Animating, 93, 101–104 Color table, 97–99 Description of, 93 Dithering, 96 Matte added to, 100–101 Optimizing, 95–96 Previewing, 97 Saving, 93–95 Tweening, 103–104 Google Analytics, 13–14 Google Chrome, 51, 208 Gradient tool, 105–106 Gradients, 265 Graphic Artists Guild, 16 Graphics, 78 H Hacks Defi nition of, 29 Layout problems corrected using, 180–182 Hard drive, copying lesson fi les to, 3 HaveaMint.com, 14 Headings Font-family setting, 116–117 HTML5, 261 Styling of, 67–69 Hexadecimal colors, 69 Home page, 18 Hosting, 4, 27–28 HTML Background images, 177 Default margins, 140 Defi nition of, 28 Editing, 52 External style sheets, 72–73 Future of, 206–207 Hexadecimal colors, 69 Image placement in, 64–65 Inspecting, 51 Index 279JavaScript and, 213–218 Limitations of, 256 Nested structure, 61–63 Notepad for creating, 38 Optional attributes, 65 Reading, 3 Self-closing tags, 64 Sliced images saved to, 110–111 Structure, 61–63 Text editors. See Text editors TextEdit for creating, 38 Validation of, 59 in Web browser, 57 Web page structure based on, 56 .html, 56 HTML 4.0, 58 HTML lists Defi nition, 130, 133 Ordered, 130, 136 Styling, 133–137 Unordered, 130 Website uses of, 130 Working with, 130–133 HTML table, 142 HTML5 Animation features, 260–261 <article> element, 258 Browser support of, 266, 268 <canvas> element, 260–261, 264 Captions, 262 CSS3 integration with, 264–266 Defi nition of, 255–256 Documentation, 260 Drawing features, 260–261 Embedding media fi les, 258–260 <fi gure> element, 262 <fi gurecaption> element, 262 Figures, 262 Foundational use of, 267 Geolocation, 263 Grouping headings and images, 261 <hgroup> element, 261 Markup, 256–262 Reasons for developing, 256 <section> element, 258 <video> element, 258–260 Web forms, 262 Web Storage, 264 Web Workers, 264 Hyperlinks, 28, 63, 184–185 Hypertext Markup Language. See HTML 280 Web Design with HTML and CSS Digital Classroom I statement, 217 Image(s) Background, 167–170, 177–180 Browser window size and, 80 Cropping, 83 HTML placement of, 64–65 Inline, 177 Resizing, 78–81 Sharpening, 84–85 Sidebar, 189 Size of Adjusting, 81–83 Determining, 80–81 Slicing, 107–111 Unsharp Mask fi lter applied to, 84–85 Image formats GIF. See GIF image JPEG. See JPEG image PNG, 86, 104–107 Selecting, 85–86 Image Size dialog box, 82 Image Tag Accessibility Attributes, 48 <img> tag, 64 Importing websites, 48–49 Information architecture, 11, 15–19 Inline images, 177 Inline styles, 71–72 Innerwrap rule, 178 Interactive prototypes, 22 Interactivity Description, 30 JavaScript. See JavaScript Web, 212 Internal style sheets, 71–72, 158, 176, 187 Internet, 26–27 Invisible characters, 39 IP address, 26–27 if J JavaScript Basics of, 213–218 Description of, 44 Document Object Model, 221–222 Events Description of, 215, 218–220 Show eff ect triggered by adding, 225–228 External fi le, 220–221 Frameworks, 222 HTML and, 213–218Operators, 217 Placing into an external document, 220– 221 References, 213 JPEG image Description, 86 Previewing, 89–90 Quality of, 87–89 Saving settings, 92 Transparency eff ect in, 90–91 jQuery Description of, 212, 222 Frequency of use, 228 Hiding elements with, 223–225 K Kerning, 129 Keyword, 120 L Layouts CSS. See CSS, Layouts Fixed-width. See Fixed-width layouts Flexible, 145–146 Hacks used to solve problems with, 180– 182 History of techniques, 142–145 Mobile devices, 251–252 Options, 145–146 Table method, 142–144 Leading, 127 Lesson fi les, 3 Line numbers, 39 Line-height settings for paragraphs, 127–128 List-based navigation, 155–158 Lists Defi nition, 130, 133 Ordered, 130, 136 Padding, 135–137 Styling, 133–137 Unordered, 130 Website uses of, 130 Working with, 130–133 Local Site Folder, 46 Looping, 235 M Mac OS Description of, 2 Text editors, 2, 37–38 TextEdit, 37–38 Virtualization solutions for, 200–201 Magic Eraser tool, 94 Margins Fixed-width layouts, 160–167 Space between text modifi ed using, 124–127 Markup tags, 56 Matte added to GIF image, 100–101 Media queries, CSS3, 246–253 Menu bar, 30 Menus, 3 Microsoft Dreamspark, 42 Microsoft Expression Web Coding environment, 44 Creating website in, 50 Defi ning websites in, 45 Description of, 42 Design and Layout tools, 43 Downloading, 45 File transfer protocol, 43 Site management, 43 Sources, 45 Templates, 45 Microsoft Internet Explorer, 51, 111, 182 Microsoft Internet Explorer 6, 197–199, 203–204 Microsoft Internet Explorer 7, 204 Microsoft .NET framework, 235 Microsoft Silverlight, 212, 235–237 Microsoft SketchFlow, 22 Microsoft SuperPreview, 203 Microsoft Visual Web Developer Express, 41 Mobile devices Browsers, 245 CSS3 media queries, 246–253 Fixed-width layouts, 241–243 Limitations, 241 Navigation, 251 Page layouts, 251–252 Screen resolutions, 240 Targeting, 241–245 Web design testing on, 249 Websites optimized for, 240 Mockups, 20–21 Index 281Monitor resolutions, 32, 80, 119 Mouseover event, 219 Mozilla Firefox 3, 207–208 Mozilla Firefox Firebug, 51 .mp4, 259 N Navigation Considerations for, 16–18 List-based, 155–158 Mobile devices, 251 Usability testing, 18–19 Navigation bar, 183–186 Nesting tables, 142 New website in Dreamweaver, 46–48 in Expression Web, 50 O Omniture, 13–14 Operators Conditional comment, 204–205 JavaScript, 217 Ordered lists, 130, 136 P Padding, 135–137, 141, 160–167 Page layouts Building, 174–177 CSS. See CSS, Layouts Fixed-width. See Fixed-width layouts Flexible, 145–146 History of techniques, 142–145 Mobile devices, 251–252 Options, 145–146 Table method, 142–144 Pantone Color Matching System, 97 Paragraph line-height , 127–128 Parallels, 201 Percent measurements, 119–122 PHP, 41, 44 Pixels Defi nition of, 119 Ems conversion of, 123, 126 Sizing text using, 118–119 Plain text editors, 37 Planning Creativity during, 23 Defi ning goals and strategy, 12 Information architecture, 15–19 282 Web Design with HTML and CSS Digital Classroom Mockups, 20–21 Overview, 11 Prototypes, 21–22 Research, 12–14 Wireframes, 20 PNG image format, 86, 104–107, 205–206 Points, 118 Previewing GIF image, 97 JPEG image, 89–90 Print design, 8–10 Prototypes, 21–22 Pseudoclass, 184 R Radius property, 209 Relative positioning, 190, 193 Relative-size, 118 Research, 12–14 Reset fi le, 140–142 Resizing Images, 78–81 Text, 118–119, 122 Resolution of monitors, 32, 80, 119 Resources, 5 RGBA colors, 265 Rounded corners, 265 Ruby on Rails, 41 S Save for Web & Devices window, 87, 89–90, 100 Screen resolutions Desktops, 32, 80, 119 Mobile devices, 240 Web design considerations, 32–33 Scripting languages, 44 Search engine optimization, 61 <section> element, 258 Select Download Speed button, 88 Seminars, 5 Serifs, 115 Server log, 12–13 Server-side languages, 44 Sidebar Images added to, 189 Padding added to, 160 Site management, 43 SketchFlow (Microsoft), 22 Slice Select tool, 108–109 Slices, 107–111Slicing an image, 107–111 Slide Toggle eff ect, 227 Software virtualization Defi nition, 200 Mac OS, 200–201 Windows, 201–202 Style sheets External. See External style sheets Internal, 71–72, 158, 176 Issues associated with, 245–246 Managing of, 176 Reset, 142 Styles Active page, 187–189 Cascading, 74 Class, 70–71 Heading, 67–69 Internal, moving to external style sheets, 187 Text, 158–159 Ways to use, 71–72 SWFObject, 229 T TCP/IP address, 26–27 Templates, 45 Text CSS properties, 128–130 Margins used to modify space between, 124–127 Paragraph line-height settings, 127–128 Resizing, 118–119, 122 Sizing, 118–123 Text editors Automation features, 40 Code coloring, 39 Code completion, 40 Downloading, 36 Finding and replacing code, 41 Invisible characters, 39 Line numbers, 39 Mac OS, 2, 37 Plain, 37 Types of, 41 Text styles, 158–159 TextEdit, 37–38 TextMate, 40–41 TextWrangler, 41 then statement, 217 Timing of animation, 102 Tolerance text box, 94 Tools Layout, 43 Overview of, 35–36 Tracking, 129 Training, 5 Transparency eff ect, 90–91 Tweening, 103–104 Two-column fi xed-width CSS layout, 147–151 Type selectors, 69–70 Typeface, 114 U Unordered lists, 130 Unsharp Mask dialog box, 84–85 Unsharp Mask fi lter, 84–85 URL text box, 109 Usability testing, 18–19 User agent detectors, 245 User agent string, 245 User experience, 11 User interaction, 10, 212 Users Description of, 10 Web design considerations, 11 V Validation, 59 Vendor-specifi c property, 207 <video> element, 258–260 Video tutorials, 4 Virtualization Defi nition, 200 Mac OS, 200–201 Windows, 201–202 VmWare Fusion, 201 W Web Domain names, 26–27 Evolution of, 28–29 Typography on, 114 Web analytics, 13–14 Web design Audience, 31–33 Challenges associated with, 8 Defi nition of, 8 Goals of, 7–8 Mobile device testing of, 249 Planning. See Planning Print design versus, 8–10 Index 283Screen considerations, 32–33 Tools for. See Tools User-centered, 11 Web Design Digital Classroom Overview, 1 Prerequisites, 1–2 System requirements, 2 Web designers Description of, 10–11 Resources for, 16 Web editors, 37–38. See also Text editors Web languages CSS. See CSS Description of, 28, 56 HTML. See HTML Web pages Flash added to, 229–231 HTML, 56 Silverlight content inserted into, 235–237 Validation, 59–61 World Wide Web Consortium validation, 59–61 Web server, 4, 28 Web Storage, 264 Web Workers, 264 WebKit, 208 Websites Audience for, 31–33 Defi ning goals and strategy for, 12 Dreamweaver creation of, 46–48 Flash added to, 229–231 Hosting, 4 Interactivity of, 30 Mobile-optimized, 240 Navigation design of, 16–18 Scope of, 15 Structure and style of, 30 User interaction, 10 Viewers of, 32 Wide navigation, 17 Windows Notepad, 37–38 Windows OS Description of, 2 Virtualization solutions for, 201–202 Windows Phone 7, 249 Windows Virtual PC, 202 Wireframes, 20 World Wide Web. See Web World Wide Web Consortium Description of, 29, 58 Web page validation, 59–61 WYSIWYG editors 284 Web Design with HTML and CSS Digital Classroom Description of, 36, 42 Dreamweaver. See Adobe Dreamweaver Expression Web. See Microsoft Expression Web Popularity of, 42 X .xap, 235 XHTML, 30, 58–59, 256 Z Zoom, 122