HTML and CSS design and build websites

Recommendations

Info

Visual hierarchy Most web users do not read entire pages. Rather, they skim to find information. You can use contrast to create a visual hierarchy that gets across your key message and helps users find what they are looking for. SIZE Larger elements will grab users' attention first. For this reason it is a good idea to make headings and key points relatively large. COLOR Foreground and background color can draw attention to key messages. Brighter sections tend to draw users' attention first. Style An element may be the same size and color as surrounding content but have a different style applied to it to make it stand out. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipscing elit. 467 PROCESS
Visual hierarchy refers to the order in which your eyes perceive what they see. It is created by adding visual contrast between the items being displayed. Items with higher contrast are recognized and processed first. Images Images create a high visual contrast and often attract the eye first. They can be used to draw attention to a specific message within the page. In some cases, the right image can succinctly reveal more than an entire page of text. The effect of a well-designed visual hierarchy is largely subliminal. Achieving a good hierarchy requires balance; if nothing stands out a site can be rather uninteresting, and if too many aspects are competing for your attention it can be hard to find the key messages. This example has a clear hierarchy which addresses the needs of visitors to the site. PROCESS 468
Page 3 and 4:
HTML & CSS Design and Build Website
Page 5 and 6:
Credits For John Wiley & Sons, Inc.
Page 7:
Contents Introduction Chapter 1: St
Page 10 and 11:
Firstly, thank you for picking up t
Page 12 and 13:
Is it hard to Learn? Many books tha
Page 14 and 15:
How People Access the Web Before we
Page 16 and 17:
How the Web Works When you visit a
Page 19 and 20:
1 Structure XX XX XX Understanding
Page 21 and 22:
STRUCTURE 14
Page 23 and 24:
STRUCTURE 16
Page 25 and 26:
STRUCTURE 18
Page 27 and 28:
HTML Describes the Structure of Pag
Page 29 and 30:
Tags act like containers. They tell
Page 31 and 32:
Character left-angle bracket (less
Page 33 and 34:
HTML5 allows you to use uppercase a
Page 35 and 36:
Anything written between the tags
Page 37 and 38:
Article 3 Go to the File menu and s
Page 39 and 40:
Article 3 Now go to the File menu a
Page 41 and 42:
altering one template is a lot easi
Page 43:
STRUCTURE 36
Page 47 and 48:
2 Text XX XX XX Headings and paragr
Page 49 and 50:
TEXT 42
Page 51 and 52:
Paragraphs Article HTML chapter-02/
Page 53 and 54:
Superscript Article & Subscript HTM
Page 55 and 56:
Line Breaks Article & Horizontal Ru
Page 57 and 58:
Semantic Markup There are some text
Page 59 and 60:
Quotations Article HTML chapter-02/
Page 61 and 62:
Citations Article & Definitions HTM
Page 63 and 64:
Changes to Content Article HTML cha
Page 65:
Example TEXT This is a very simple
Page 69 and 70:
3 Lists XX XX XX Numbered lists Bul
Page 71 and 72:
LISTS 64
Page 73 and 74:
Unordered Article Lists HTML chapte
Page 75 and 76:
Nested Article Lists HTML chapter-0
Page 77:
Example LISTS Here you can see a ma
Page 81 and 82:
4 Links XX XX XX Creating links bet
Page 83 and 84:
LINKS 76
Page 85 and 86:
The text between the opening tag a
Page 87 and 88:
Linking to Other Article Pages on t
Page 89 and 90:
Parent The examplearts folder is a
Page 91 and 92:
Relative Link Type example (from di
Page 93 and 94:
Opening Article Links in a New Wind
Page 95 and 96:
Linking to a Specific Article Part
Page 97:
Example LINKS This example is of a
Page 101 and 102:
5 Images XX XX XX How to add images
Page 103 and 104:
IMAGES 96
Page 105 and 106:
Storing Images on Your Site If you
Page 107 and 108:
Height & Article Width of Images HT
Page 109 and 110:
Article Result Where you place the
Page 111 and 112:
Article Result This looks a lot nea
Page 113 and 114:
Article Result The value of top pla
Page 115 and 116:
Tools to Edit & Save Images There a
Page 118 and 119:
DESIGN RESEARCH Image Formats: GIF
Page 120 and 121:
Image Dimensions The images you use
Page 122 and 123:
Image Resolution Images created for
Page 124 and 125:
Animated GIFs Animated GIFs show se
Page 126 and 127:
Examining Images on the Web Checkin
Page 128 and 129:
In this example, the logo is a GIF
Page 131:
Summary IMAGES X X XX XX XX The el
Page 134 and 135:
There are several types of informat
Page 136 and 137:
129 TABLES
Page 138 and 139:
Basic Table Structure The element
Page 140 and 141:
Spanning ColumnS Sometimes you may
Page 142 and 143:
Long Tables There are three element
Page 144 and 145:
Old Code: Width & Spacing There are
Page 146 and 147:
This example shows a table for cust
Page 149:
Summary TABLES X X XX XX XX The el
Page 152 and 153:
Traditionally, the term 'form' has
Page 154 and 155:
Why Forms? The best known form on t
Page 156 and 157:
How Forms Work A user fills in a fo
Page 158 and 159:
Form Structure Form controls live
Page 160 and 161:
Password Input type="password" Whe
Page 162 and 163:
Radio Button type="radio" Radio bu
Page 164 and 165:
Drop Down List Box A drop down lis
Page 166 and 167:
File Input Box If you want to allo
Page 168 and 169:
Image Button type="image" If you w
Page 170 and 171:
Labelling Form Controls When intro
Page 172 and 173:
HTML5: Form Validation You have pro
Page 174 and 175:
HTML5: Email & URL Input HTML5 has
Page 176 and 177:
169 FORMS
Page 178 and 179:
Example FORMS Forms Your Det
Page 181:
Summary FORMS XX XX XX XX Whenever
Page 184 and 185:
At this point, we have covered the
Page 186 and 187:
The Evolution of HTML Since the web
Page 188 and 189:
DOCTYPEs Because there have been se
Page 190 and 191:
ID Attribute Every HTML element can
Page 192 and 193:
Block Elements Some elements will a
Page 194 and 195:
Grouping Text & Elements In a Block
Page 196 and 197:
IFrames An iframe is like a little
Page 198 and 199:
Information About Your Pages The
Page 200 and 201:
Escape Characters There are some ch
Page 202 and 203:
This example starts by using a DOCT
Page 205:
Summary EXTRA MARKUP X X DOCTYPES t
Page 208 and 209:
Flash is a very popular technology
Page 210 and 211:
How Flash Works Since the late 1990
Page 212 and 213:
Timeline: Flash, VidEo & Audio Web
Page 214 and 215:
Adding a Flash Movie to Your Web Pa
Page 216 and 217:
Understanding Video Formats and Pla
Page 218 and 219:
Preparing a Flash Video for Your Si
Page 220 and 221:
HTML5: Preparing Video for Your Pag
Page 222 and 223:
HTML5: Multiple Video Sources To s
Page 224 and 225:
Adding Audio to Web Pages By far th
Page 226 and 227:
HTML5: Adding HTML5 Audio to Your P
Page 228 and 229:
221 FLASH, VIDEO & AUDIO
Page 231:
Summary FLASH, VIDEO & AUDIO XX XX
Page 234 and 235:
In this section, we will look at ho
Page 236 and 237:
Understanding CSS: Thinking Inside
Page 238 and 239:
CSS Associates Style rules with HTM
Page 240 and 241:
233 INTRODUCING CSS
Page 242 and 243:
Using External CSS The element ca
Page 244 and 245:
CSS Selectors There are many differ
Page 246 and 247:
How Css Rules Cascade If there are
Page 248 and 249:
Why use External Style Sheets? When
Page 251:
Summary INTRODUCING CSS XX XX XX XX
Page 254 and 255:
Color can really bring your pages t
Page 256 and 257:
Foreground Color color The color pr
Page 258 and 259:
Understanding Color Every color on
Page 260 and 261:
Contrast When picking foreground an
Page 262 and 263:
CSS3: HSL Colors CSS3 introduces an
Page 264 and 265:
257 COLOR
Page 266 and 267:
Example COLOR Color body { back
Page 269:
Summary COLOR XX XX XX XX XX XX Col
Page 272 and 273:
The properties that allow you to co
Page 274 and 275:
Typeface Terminology Serif Serif fo
Page 276 and 277:
Choosing a Typeface for your Websit
Page 278 and 279:
Techniques That Offer a Wider Choic
Page 280 and 281:
Specifying Typefaces font-family Th
Page 282 and 283:
Type Scales You may have noticed th
Page 284 and 285:
More Font Choice @font-face @font-f
Page 286 and 287:
Bold font-weight The font-weight pr
Page 288 and 289:
UpperCase & LowerCase text-transfor
Page 290 and 291:
Leading line-height Leading (pronou
Page 292 and 293:
Alignment text-align The text-align
Page 294 and 295:
Indenting Text text-indent The text
Page 296 and 297:
First Letter or Line :first-letter,
Page 298 and 299:
Responding to Users :hover, :active
Page 300 and 301:
293 TEXT
Page 302 and 303:
Example TEXT Text body { paddin
Page 305:
Summary TEXT XX XX XX XX XX There a
Page 308 and 309:
At the beginning of this section on
Page 310 and 311:
Article Box Dimensions width, heigh
Page 312 and 313:
Article Limiting Height min-height,
Page 314 and 315:
Border, Margin & Padding Every box
Page 316 and 317:
Article Border Width border-width T
Page 318 and 319:
Article Border Color border-color Y
Page 320 and 321:
Article Padding padding The padding
Page 322 and 323:
Article Centering Content If you wa
Page 324 and 325:
Article Change Inline/Block display
Page 326 and 327:
Article CSS3: Border Images border-
Page 328 and 329:
Article CSS3: Rounded Corners borde
Page 330 and 331:
323 BOXES
Page 332 and 333:
Example BOXES Boxes body { font
Page 335:
Summary BOXES XX XX XX XX XX XX XX
Page 338 and 339:
There are several CSS properties th
Page 340 and 341:
Article Bullet Point Styles list-st
Page 342 and 343:
Article Positioning the Marker list
Page 344 and 345:
Article Table Properties You have a
Page 346 and 347:
Article Border on Empty Cells empty
Page 348 and 349:
Styling Forms Nobody I know enjoys
Page 350 and 351:
Article Styling Submit Buttons Here
Page 352 and 353:
Article Aligning Form Controls: Pro
Page 354 and 355:
Article Cursor Styles cursor The cu
Page 356 and 357:
349 LISTS, TABLES AND FORMS
Page 358 and 359:
Example LISTS, TABLES AND FORMS
Page 360 and 361:
Example LISTS, TABLES AND FORMS bac
Page 363:
Summary LISTS, TABLES AND FORMS XX
Page 366 and 367:
In this chapter we are going to loo
Page 368 and 369:
Key Concepts in Positioning Element
Page 370 and 371:
Controlling the Position of Element
Page 372 and 373:
Article Normal Flow position:static
Page 374 and 375:
Article Absolute Positioning positi
Page 376 and 377:
Article Overlapping Elements z-inde
Page 378 and 379:
Article Using Float to Place Elemen
Page 380 and 381:
Article Parents of Floated Elements
Page 382 and 383:
Article Creating Multi-Column Layou
Page 384 and 385:
Screen Sizes Different visitors to
Page 386 and 387:
Page Sizes Because screen sizes and
Page 388 and 389:
Fixed Width Layouts Fixed width lay
Page 390 and 391:
Article Fixed Width Layout To creat
Page 392 and 393:
Article Liquid Layout The liquid la
Page 394 and 395:
Layout Grids Composition in any vis
Page 396 and 397:
Possible Layouts: 960 Pixel wide 12
Page 398 and 399:
CSS Frameworks CSS frameworks aim t
Page 400 and 401:
Article Grid-Based Layout Using 960
Page 402 and 403:
Article Multiple Style Sheets @impo
Page 404 and 405:
397 LAYOUT
Page 406 and 407:
Example LAYOUT
Page 408 and 409:
Example LAYOUT .more-articles p:las
Page 411:
Summary LAYOUT X X elements are of
Page 414 and 415:
Controlling the size and alignment
Page 416 and 417:
Article Controlling sizes of images
Page 418 and 419:
Article AligNing images Using CSS I
Page 420 and 421:
Background Images background-image
Page 422 and 423:
Background Position background-posi
Page 424 and 425: Article Image Rollovers & Sprites U
Page 426 and 427: Article CSS3: Gradients background-
Page 428 and 429: 421 IMAGES
Page 430 and 431: Example IMAGES Images body { co
Page 433: Summary IMAGES XX XX XX XX XX XX Yo
Page 436 and 437: HTML5 is introducing a new set of e
Page 438 and 439: Traditional HTML Layouts For a long
Page 440 and 441: Headers & Footers The and eleme
Page 442 and 443: Articles The element acts as a co
Page 444 and 445: Sections The element groups relat
Page 446 and 447: Figures You already met the elem
Page 448 and 449: Linking Around Block-Level Elements
Page 450 and 451: 443 HTML5 LAYOUT
Page 452 and 453: Example HTML5 LAYOUT HTML5 Layou
Page 454 and 455: Example HTML5 LAYOUT margin: 10px 0
Page 457: Summary HTML5 LAYOUT XX XX XX XX Th
Page 460 and 461: This section discusses a process th
Page 462 and 463: Who is the Site For? Every website
Page 464 and 465: Why People Visit YOUR Website Now t
Page 466 and 467: What Information Your Visitors Need
Page 468 and 469: Site Maps Now that you know what ne
Page 470 and 471: WireFrames A wireframe is a simple
Page 472 and 473: Getting your message across using d
Page 476 and 477: grouping and Similarity When making
Page 478 and 479: Designing Navigation Site navigatio
Page 481: Summary PROCESS & Design XX XX XX X
Page 484 and 485: To wrap up the book we are going to
Page 486 and 487: Search Engine Optimization (SEO) SE
Page 488 and 489: How to Identify Keywords and Phrase
Page 490 and 491: Analytics: Learning about your Visi
Page 492 and 493: What Are Your Visitors Looking At?
Page 494 and 495: Domain Names & Hosting In order to
Page 496 and 497: FTP & Third Party Tools To transfer
Page 499: Summary PRACTICAL INFORMATION XX XX
Page 502 and 503: # symbol (links) 87, 88 _blank 86
Page 504 and 505: E e-commerce 33 editing content 56
Page 506 and 507: J JavaScript 208, 212, 218 JPEG 109
Page 508 and 509: send to back 369 serif typefaces 26
Page 510 and 511: TroubleShooting Here are a few prob
Page 512 and 513: HTML Elements 77, 79, 85, 441 53
Page 514: CSS Properties background-attachmen
show all

HTML and CSS design and build websites

Create successful ePaper yourself

Delete template?

Save as template?