Từ khóa: Web Design, HTML, CSS

rating

Web Design with HTML and CSS Digital Classroom

Học thiết kế web chỉ bằng HTML và CSS, sách hướng dẫn chi tiết rõ ràng cho người chưa biết gì.

Đặt in tại HoaXanh - Thêm vào giỏ hàng...

  • 100,000đ
  • Mã sản phẩm: WEB175511
  • Tình trạng: 2

Lesson 1: Planning Your Website Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 The goals of web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 The diff erence between print design and web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 The web demands user interaction . . . . . . . . . . . . . . . . . . . . 10 Defi ning the user experience. . . . . . . . . . . . . . . . . . . . . . . . . . 11 User-centered design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 The stages of the planning process . . . . . . . . . . . . . . . . . . . . 11 Defi ning goals and strategy. . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Research. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Scenarios and characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Information architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Defi ning the navigation design of the SmoothieWorld site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Rethinking site navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 The role of usability testing . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Wireframes, prototypes, and mockups . . . . . . . . . . . . . . . . . 20 The evolving fi eld of interactive prototypes . . . . . . . . . . . . 22 Be creative during the planning process . . . . . . . . . . . . . . . 23 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Contents Web Design with HTML and CSS t'VMMDPMPSTUFQCZTUFQ JOTUSVDUJPOBMCPPL t5SBJOJOHGSPN FYQFSJFODFEFYQFSUT A Complete Training Package! +FSFNZ0TCPSO+FOOJGFS4NJUIBOEUIF"(*$SFBUJWF5FBN g Package! 5VUPSJBMTBOEMFTTPOöMFTPO EJHJUBMDMBTTSPPNCPPLTDPN webdesign.indb IX 3/17/11 1:50 PM X Contents Web Design with HTML and CSS Digital Classroom Lesson 2: Fundamentals of the Web Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 How web pages work. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 The Internet and World Wide Web domain names . . . . . . 26 Domain names and hosting. . . . . . . . . . . . . . . . . . . . . . . . . . . 27 The language of the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 The evolution of the web and web standards . . . . . . . . . . 28 Separating structure, style, and interactivity . . . . . . . . . . . 30 Designing for the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Know your audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Know that your site’s viewers are impatient . . . . . . . . . . . . 32 Designing for the screen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Understanding how your audience will read your web content. . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Lesson 3: Web Design Tools Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Web editors versus WYSIWYG tools . . . . . . . . . . . . . . . . . . . . 36 Plain text editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Text editors for web design . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 WYSIWYG editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Defi ning sites in Dreamweaver or Expression Web . . . . . . 45 Obtaining Expression Web or Dreamweaver. . . . . . . . . . . . 45 Creating a new site in Dreamweaver . . . . . . . . . . . . . . . . . . 46 Importing an existing site into Dreamweaver CS5 . . . . . . 48 Creating a new site in Expression Web . . . . . . . . . . . . . . . . . 50 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 webdesign.indb X 3/17/11 1:50 PM Contents Table of Contents XI Lesson 4: Fundamentals of HTML, XHTML, and CSS Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Web languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Web page structure is based on HTML . . . . . . . . . . . . . . . . . 56 The details of XHTML syntax . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Doctype lets the web browser know what to expect . . . . 58 The W3C and page validation . . . . . . . . . . . . . . . . . . . . . . . . . 59 HTML structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Placing images in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 The role of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Styling a heading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Understanding class styles and s. . . . . . . . . . . . . . . 70 Three ways to use styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Internal versus external style sheets . . . . . . . . . . . . . . . . . . . 72 Creating an external style sheet . . . . . . . . . . . . . . . . . . . . . . . 72 What makes styles cascading . . . . . . . . . . . . . . . . . . . . . . . . . 74 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Lesson 5: Graphics, Color, and Transparency Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Optimizing graphics for the web . . . . . . . . . . . . . . . . . . . . . . 78 Resizing the image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Adjusting the image size. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Applying the Unsharp Mask fi lter to an image. . . . . . . . . . 84 Selecting the best image format . . . . . . . . . . . . . . . . . . . . . . 85 Choosing the right fi le format . . . . . . . . . . . . . . . . . . . . . . . . . 86 Choosing the best fi le format for your image . . . . . . . . . . . 86 Saving images as JPEGs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Choosing the quality of a JPEG . . . . . . . . . . . . . . . . . . . . . . . . 87 Previewing your image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Creating a transparency eff ect in a JPEG image. . . . . . . . . 90 Saving your settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Saving images as GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Optimizing the GIF image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Using the color table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 webdesign.indb XI 3/17/11 1:50 PM XII Contents Web Design with HTML and CSS Digital Classroom Adding a matte to a GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Animating a GIF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Saving as a PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Slicing an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Viewing the completed fi le . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Creating slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Changing the attributes of the slices. . . . . . . . . . . . . . . . . . 109 Saving slices out of Photoshop . . . . . . . . . . . . . . . . . . . . . . . 110 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Lesson 6: Formatting Text with CSS Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 The importance of typography on the web . . . . . . . . . . . 114 The challenges of fonts on the web. . . . . . . . . . . . . . . . . . . 114 Setting a font-family . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Sizing text with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Pixels and points are not the best choices. . . . . . . . . . . . . 118 Using a combination of percent and the em measurement . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Using margins to modify the space between your text . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Setting paragraph line-height . . . . . . . . . . . . . . . . . . 127 Transforming text with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Working with HTML lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Styling HTML lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 webdesign.indb XII 3/17/11 1:50 PM Contents Table of Contents XIII Lesson 7: Introduction to CSS Layout Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Working with a CSS reset fi le . . . . . . . . . . . . . . . . . . . . . . . . . 140 A brief history of layout techniques on the web . . . . . . . 142 An overview of page layout options . . . . . . . . . . . . . . . . . . 145 Understanding

s: creating a two-column fi xed-width CSS layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Understanding the CSS fl oat property . . . . . . . . . . . . . . 151 Creating columns with the fl oat property . . . . . . . . . . . 153 Working with the clear property. . . . . . . . . . . . . . . . . . . 155 Creating a list-based navigation using fl oats . . . . . . . . 155 Adding text styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 The eff ect of margins and padding on your fi xed-width layout. . . . . . . . . . . . . . . . . . . . . . . . . . . 160 A review of using margins and padding for layout . . . . 167 Styling your footer with a background image . . . . . . . . . 167 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Lesson 8: Advanced CSS Layout Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Building your page layout . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Removing the background color . . . . . . . . . . . . . . . . . . . . . 174 Working with CSS background images. . . . . . . . . . . . . . . . 177 Using hacks to solve layout problems. . . . . . . . . . . . . . . . . 180 Enhancing your CSS navigation bar. . . . . . . . . . . . . . . . . . . 183 Moving your internal styles to the external style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Creating a style for the active page . . . . . . . . . . . . . . . . . . . 187 Adding images to your sidebar. . . . . . . . . . . . . . . . . . . . . . . 189 Working with absolute positioning . . . . . . . . . . . . . . . . . . . 190 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Lesson 8: Advanced CSS La webdesign.indb XIII 3/17/11 1:50 PM XIV Contents Web Design with HTML and CSS Digital Classroom Lesson 9: Browser Compatibility Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Why browser testing is important . . . . . . . . . . . . . . . . . . . . 196 Are web pages required to look the same in all browsers? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Choose the level of browser support you want . . . . . . . . 197 The special case of IE6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Tools to identify browser problems . . . . . . . . . . . . . . . . . . . 200 Virtualization solutions for the Mac OS. . . . . . . . . . . . . . . . 200 Virtualization solutions for Windows. . . . . . . . . . . . . . . . . . 201 Browser compatibility applications . . . . . . . . . . . . . . . . . . . 202 Addressing browser incompatibilities with CSS fi xes . . . 204 Addressing Internet Explorer 6 issues with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Browser incompatibilities in the future . . . . . . . . . . . . . . . 206 Future browser compatibility issues . . . . . . . . . . . . . . . . . . 206 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Lesson 10: Introduction to Interactivity Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Interactivity on the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Adobe Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 JavaScript basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 JavaScript events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Placing your JavaScript into an external document . . . . 220 The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . 221 JavaScript frameworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Hiding an element with jQuery. . . . . . . . . . . . . . . . . . . . . . . 223 Adding an event to trigger the show eff ect . . . . . . . . . . . 225 Adobe Flash overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Generating code to add Flash movies to a page . . . . . . . 229 Integrating Flash into a pre-existing design . . . . . . . . . . . 232 Inserting Silverlight content into a web page . . . . . . . . . 235 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 webdesign.indb XIV 3/17/11 1:50 PM Contents Table of Contents XV Lesson 11: Mobile Design Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 The need for mobile-optimized websites . . . . . . . . . . . . . 240 How is the mobile experience of the web diff erent than the desktop? . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Deciding which type of mobile device to target . . . . . . . 241 The trouble with style sheets. . . . . . . . . . . . . . . . . . . . . . . . . 245 Using CSS3 media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Lesson 12: HTML5 Essentials Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Defi ning HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 The motivation behind HTML5 . . . . . . . . . . . . . . . . . . . . . . . 256 HTML5 markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 The 

Không có đánh giá nào cho sản phẩm này.

Viết đánh giá

Vui lòng đăng nhập hoặc đăng ký trước khi đánh giá