دانلود کتاب Practical web design for absolute beginners

فهرست مطالب :

Contents at a Glance......Page 5
Contents......Page 8
About the Author......Page 26
About the Technical Reviewer......Page 27
Acknowledgments......Page 28
Introduction......Page 29
Definitions......Page 34
The Advantages of Using Code Rather Than CMS......Page 35
But What About CSS?......Page 37
Install a Free HTML Text Editor......Page 38
The Basic Structure for Every Web Page......Page 39
Enhancing the Structure......Page 40
Create the Structure of Your First Web Page......Page 42
Discussion of the First Six Lines of the HTML Code in Listing 1-1......Page 44
Summary......Page 45
Let’s Add Some Content to Your Web Page......Page 46
Create a Home Page......Page 48
Add Hyperlinks to the Two Pages......Page 49
Summary......Page 51
How Do We Link HTML Pages to a CSS Style Sheet?......Page 52
Create a Folder for the New Chapter......Page 53
Creating a Simple CSS Style Sheet......Page 55
Explanation of the Style Sheet style.css......Page 56
How Much do you Need to Remember?......Page 58
Summary......Page 59
Create the Three-Column Page......Page 60
Explanation of the Code......Page 62
Explanation of the Amended CSS Code......Page 63
Revise the CSS Code......Page 64
Explanation of the Revised CSS Code......Page 65
Summary......Page 66
Chapter 5: Create Web Pages with Four Columns Using CSS......Page 67
Create Web Pages with Four Columns......Page 68
Insert New Styles in the CSS Style Sheet......Page 70
Create Two More Pages......Page 71
The Importance of Forward Planning......Page 72
Summary......Page 73
Chapter 6: Add Pictures to Websites......Page 74
The Problem with Some Older Browsers......Page 75
To Alter the Home Page Using a WYSIWYG Editor......Page 76
To Alter the Home Page Using a Plain Text Editor......Page 77
Alter the CSS File to Style the New Home Page......Page 78
Change the Heading in the Other Three Pages......Page 79
Summary......Page 80
Allowing Internet Explorer 8 to Understand Semantic Tags......Page 81
Add the JavaScript and Some Hyperlink Tags That Can Be Styled......Page 83
Explanation of the Code......Page 84
Make a Minor Change to the CSS Style Sheet......Page 85
Explanation of the CSS Code......Page 86
Summary......Page 87
Improving the Appearance of the Menu Hyperlinks......Page 88
Explanation of the Code......Page 91
Create 3D Buttons with a Rollover Feature......Page 92
Explanation of the Code......Page 94
Summary......Page 97
Choosing Color Schemes......Page 98
How Website Colors Are Produced......Page 99
Understanding the CSS Color Codes......Page 100
Tutorial: Adding More Color to our Website......Page 101
Explanation of the Code......Page 103
Using Color Pickers on WYSIWYG Text Editors......Page 104
Tweaking Colors......Page 106
Summary......Page 107
Screen Sizes and Screen Resolutions......Page 108
Will the Website Work on a Handheld Device?......Page 109
Semi-Liquid Layouts Provide the Best Compromise......Page 110
Create a Template with a 3D Menu for Use in your Future Websites......Page 111
Explanation of the Code......Page 112
Creating Two Templates with Plain Menu Buttons......Page 113
Summary......Page 115
Chapter 11: A Vertical Menu with a Picture Gallery......Page 116
Adapting the Home Page......Page 117
Change page-2.html to Create the About Us Page......Page 118
Left-Align the Text in the About Us Page......Page 120
Create the Location Page Using the File page-4.html......Page 121
Creating the Gallery Page......Page 122
Explanation of the Code......Page 125
Summary......Page 127
Download and Install Four Templates with Horizontal Menus......Page 128
Converting a Vertical Menu into a Horizontal Menu......Page 129
The Modified CSS Style for a Horizontal Menu with 3D Buttons......Page 130
Explanation of the Code......Page 131
The Modified CSS Style for a Horizontal Menu with Plain Buttons......Page 132
Tutorial: Taking Advantage of a Horizontal Menu......Page 133
Tutorial......Page 134
Explanation of the code for Listings 12-6 to 12-10......Page 137
Summary......Page 138
Image File Formats Suitable for Websites......Page 139
Creating a New Appearance Using Background Tiles......Page 142
Tweaking the CSS Style Sheet......Page 143
Explanation of the Code......Page 144
Altering the home page index.html......Page 146
Explanation of the Code Changes......Page 147
Summary......Page 148
Chapter 14: Vertical and Horizontal Menus on the Same Page: Colored Columns......Page 149
Tweak the Home Page index.html......Page 150
Change the Other Three Pages......Page 152
Tweak the Style Sheet......Page 153
Create Four Templates Containing Both Horizontal and Vertical Menus......Page 155
Summary......Page 157
More About Using Tiles in the Background of a Website......Page 158
Semi-seamless tiles......Page 159
Pictorial tiles......Page 160
Create a Different Appearance Using Two New Tiles......Page 161
The Box Model......Page 163
Summary......Page 164
Create a Simple Two-Column Table......Page 165
Explanation of the Code......Page 166
Explore the Default Double Border Style......Page 167
Placing a Four-Column Table within a Web Page......Page 168
Summary......Page 171
Basic Rules for an Attractive Website......Page 172
The Navigation Menu Must Be Prominent......Page 173
The Use and Misuse of Text......Page 174
Avoid Gimmicks......Page 175
Auto-start Audios, Videos, and Slide Shows......Page 176
Create a Web Page with an Encoded Email Address......Page 177
Explanation of the escramble JavaScript......Page 179
Summary......Page 180
Design a Feedback Form......Page 181
Explanation of the Changes......Page 184
Add an Internal Style to Position the Form Elements......Page 185
Explanation of the File’s Internal Style......Page 186
Add the Form Code to the contact.html Page......Page 187
Explanation of the Form Code......Page 189
Summary......Page 191
How Search Engines Work......Page 192
Choosing Keywords and Phrases......Page 193
The Meta Tag/Keywords Controversy......Page 194
External Links......Page 195
Restrictions on Excessive Repetition......Page 196
Things You Should Never Do......Page 197
A Web Page Containing No Search Engine Optimization......Page 198
Explanation of the SEO Faults in Listing 19-1......Page 199
Optimize the Spring Garden Home Page for Search Engines......Page 200
Explanation of the Code......Page 203
Summary......Page 205
Absolute Positioning......Page 206
Relatively Positioning an Image......Page 208
An Experiment Using Relative Positioning......Page 209
Positioning Images Across the Wrapper Boundary......Page 210
Positioning Images Next to Text......Page 212
The Property Applied to Floated Elements......Page 214
Positioning by Using the Margin Property......Page 215
Summary......Page 216
The Time-Saving Code......Page 217
A Note About PHP Code......Page 218
Download and Install XAMPP for Windows......Page 219
Starting XAMPP......Page 221
The XAMPP Security Console......Page 222
The htdocs Folder......Page 224
Testing PHP Files in XAMPP......Page 225
Using the PHP include Command......Page 226
Create the External File for the Header......Page 227
Create the External File for the Vertical Menu......Page 228
Create the External File for the Footer......Page 229
Inserting the PHP include Command to Replace the Code for the Four Included Elements......Page 230
View the File Using the XAMPP Server on Your Computer......Page 231
Summary......Page 233
Chapter 22: More on Using PHP include......Page 234
Change the External Footer File (footer.html)......Page 235
Create a Template and a New Page (spring-bulbs.php)......Page 237
Create the Page spring-seeds.php......Page 238
Create the Page about.php......Page 239
Create the Page Named location.php......Page 240
Modify the Page Named contact.php......Page 241
Summary......Page 243
Chapter 23: Receive Emails from a Contact Us Page......Page 244
Examine the Code of the Downloaded Page form-handler-typical.php......Page 246
Explanation of the Typical Form-Handler Code......Page 248
Validating User Input......Page 254
Create the Thank-You Page......Page 255
Create the Email Error Message Using the Code in Listing 23-5......Page 256
Create the Error Message to Prevent URLs Being Entered......Page 257
Summary......Page 258
Using Other People’s Multimedia Clips......Page 259
What to Avoid......Page 260
The BarelyFitz Designs Slideshow......Page 261
Test the Slideshow......Page 264
Today’s Video Formats......Page 265
Explanation of the Code......Page 266
How to Embed the HTML5 Video Code in a Web Page......Page 267
Signing up for a YouTube Account......Page 269
Summary......Page 270
Chapter 25: Create a Tab Menu......Page 271
Examine the Code for the Home Page......Page 273
Other Items Also Change from Page to Page......Page 274
Examine the Code for the CSS File......Page 275
Explanation of the Code......Page 276
Create Two New Pages......Page 277
Summary......Page 279
Why Drop-Down Menus may not Suit all Types of Websites......Page 280
Planning the Menu......Page 281
Explanation of the Code......Page 284
Showing and Hiding the Drop-Down Submenus......Page 285
Create a New Page to See how the Drop-Down Menu Works......Page 286
Create the Publications Page......Page 287
Summary......Page 288
Chapter 27: Drop Shadows......Page 289
Drop Shadows for Images and Websites with Sharp Corners......Page 290
Explanation of the Code......Page 291
Drop Shadows for a Website with Rounded Corners......Page 292
Add a Drop Shadow and a White Border to an Image......Page 293
Explanation of the Code......Page 294
Add a Drop Shadow to Text......Page 295
Shadows on Four Sides of an HTML Element......Page 296
Create a Four-Sided Drop Shadow......Page 297
Summary......Page 298
Chapter 28: User Name and Password for a Member’s Page......Page 299
Create the Login Page......Page 300
Create a Members’ Page......Page 302
Create a Login-Handler......Page 304
Explanation of the Code......Page 305
Summary......Page 306
Add an Order Form Button to the Vertical Menu......Page 307
View and Modify the Order Form......Page 308
Explanation of the Unfamiliar Code in Listing 29-1......Page 313
Examine the Style Sheet for the Order Form (order.css)......Page 315
Create the Style for the Printed Version of the Form (print-order.css)......Page 316
Summary......Page 318
Chapter 30: Add a Search Field to Your Website......Page 319
Bing Search Field......Page 320
Yahoo! Search Field......Page 321
Google Search Field......Page 322
Testing the Google Search Field on One of My Websites......Page 324
Summary......Page 325
The Problem with Default Bullets......Page 326
Create a Test Page......Page 327
Reduce the Gaps Caused by the Default Bullets......Page 329
Add Bold Headings to the Bulleted Paragraphs......Page 330
More Bullet Styles Using CSS......Page 331
Summary......Page 333
View the Pages in the Downloaded Folder......Page 334
Tweak the Menu So That It Can Be Styled to Indicate the Selected Menu Button......Page 335
Make a Small Change to the Home Page Styling to Match the Revised Menu......Page 336
Add the Indicator Style to the Other Pages......Page 337
Emphasize the Page Indicator......Page 339
Summary......Page 340
View the Pages in the Downloaded Files......Page 341
Make Minor Changes to the Menu to Indicate That a Particular Button Has Been Clicked......Page 344
Change the Menu on the Other Pages......Page 345
Emphasize the Menu’s Page Indicator......Page 346
Summary......Page 347
Chapter 34: Creating Multi-row Menus and Picture Galleries......Page 348
Create a Double Row of Menu Buttons......Page 349
Explanation of the Code......Page 350
The CSS Code......Page 351
To Accommodate an Odd Number of Buttons......Page 352
Create a Gallery with Four Rows of Pictures......Page 353
Explanation of the Code......Page 355
Summary......Page 357
Chapter 35: Building Responsive Websites for Mobile Devices Part 1......Page 358
Definitions......Page 359
Different Websites? Or Different Style Sheets?......Page 360
The Viewport Statement......Page 361
Media Queries and the Responsive CSS Style Sheet......Page 362
Explanation of the Demonstration Media Query CSS Code......Page 363
Using Proportional Dimensions for the Elements on RWD Pages......Page 364
Responsive Images......Page 365
The Responsive Navigation Menu......Page 366
Explanation of the Styles (style.css)......Page 370
Testing Responsive Websites......Page 371
Summary......Page 372
Adding a Drop-Down Feature to the Menu Buttons......Page 373
Explanation of the Code......Page 375
Creating a Two-Column Responsive Web Page......Page 376
Explanation of the Code......Page 379
Creating a Three-Column Responsive Web Page......Page 380
Explanation of the Code......Page 381
Explanation of the Code......Page 382
Creating a Four-Column Responsive Web Page......Page 383
Summary......Page 384
A Collapsible Responsive Menu......Page 385
Explanation of the HTML Code......Page 387
Explanation of the CSS Code......Page 389
Adding a Header......Page 392
Summary......Page 394
Summarizing the Use of Media Queries in CSS Style Sheets......Page 395
View the Responsive Pages in This Chapter’s Website......Page 396
The Supplementary Style Sheet Links......Page 397
The Supplementary Style Sheets......Page 398
Adding New Menu Buttons and Extra Drop-Down Items......Page 400
Bullet Points and the Unordered List Problem......Page 401
Responsive Videos......Page 403
Responsive YouTube/Vimeo Videos......Page 404
Explanation of the Code for fitvids-test.html......Page 406
Fonts......Page 407
Items That Are Not Under the Control of the Designer......Page 408
Summary......Page 409
Pitfalls That Can Be Avoided......Page 410
An Example of an Acceptable CMS Design......Page 411
CMS Pitfalls That Are Very Difficult or Impossible to Avoid......Page 413
Summary......Page 414
Choosing a Domain Name......Page 415
Allow the FTP Client to Connect to a Host......Page 416
Getting to Know Your FTP Client......Page 421
Storing the FTP Details......Page 422
Using the Advanced Tab to Create Automatic Connections......Page 424
Set the Date Format......Page 425
Uploading Folders and Files to the Remote Host......Page 426
Validate your Web Pages......Page 428
Using the W3C Validator......Page 429
A W3C Validation Report Found the Following Three Errors......Page 432
Byte Order Mark Found......Page 433
Rare or Unregistered Character Encoding Detected......Page 434
Some of the Most Common Validation Error Messages......Page 435
Validate the CSS......Page 437
Embed the HTML5 Logo......Page 438
The Solution for a Verifiable HTML5 Logo......Page 439
Summary......Page 440
Web Page Structure......Page 441
HTML Tags......Page 442
The Main Structural Tags......Page 443
Gold......Page 445
Columns......Page 446
Elements within the Content Area......Page 447
Styling the Text with HTML......Page 448
CSS Styles Sheets......Page 449
Precautions when Downloading Free Programs......Page 450
File Minimizer Pictures......Page 451
Summary......Page 454
Which Free WYSIWYG Program Is Best?......Page 455
The WYSIWYG View in Expression Web May Look Odd......Page 456
Download, Install, and Configure MS Expression Web 4 (Free)......Page 457
Configure the Toolbars in Expression Web......Page 458
Selecting Alternative Browsers for the Design View of MS Expression Web 4......Page 459
Avoiding the Dreaded Create an HTML Page or CSS File in MS Expression Web......Page 462
Open an Existing Page or CSS file in MS Expression Web 4......Page 463
Download, Install, and Configure Blue Griffon (Free)......Page 464
Close Down Blue Griffon......Page 466
Creating a New HTML Page or a New CSS File in Blue Griffon......Page 467
When You Are Asked to Modify an HTML or CSS File in Blue Griffon......Page 469
Warning: When Creating or Modifying a CSS File in Blue Griffon......Page 471
Downloading and Installing NoteTab Light (Free)......Page 473
Summary......Page 474
Index......Page 475