Chapter 1 The process of making web pages and websites

1. 1 Understanding Webpage 2

1. 1. 1 webpage and website 2

1. 1.2 basic components of a web page 2

1.2 what is web design 3

Overview of web design 4

1.2.2 web design and web production 4

1.2.3 characteristics of web design 5

1.2.4 terms related to web design 7

1.3 content covered by web design 1 1

1.3. 1 audio-visual elements 1 1

1.3.2 layout design 1 1

1.4 How to design a web page 12

1.4. 1 basic principles of web design 12

1.4.2 elements of successful website design 13

1.4.3 Design Style and Color Matching of Web Pages

1.5 web design principles 14

1.5. 1 the principle of considering users 15.

1.5.2 the principle of highlighting the theme

. 1.5.3 general principles 16

1.5.4 principle of unity of content and form 17

1.5.5 Update maintenance principles 18

1.6 quality of web designers 18

1.6. 1 artistic quality 18

Skill quality 19

1.6.3 comprehensive quality 19

1.7 website production process 20

1.7. 1 Pre-planning 20

1.7.2 page optimization and implementation 2 1

1.7.3 After maintenance 22

1.8 static page 22 production process

1.8. 1 Observation Design Draft 22

1.8.2 Split design draft 23

1.8.3 Implementation of Web Design 23

Chapter 2 css style introduction 25

2. The basic concept of1CSS 26

2. Characteristics of1.1CSS 26

2. 1.2css type CSS 27

2. Basic Syntax of1.3csss28

2. 1.4css conflict 29

2.2 css30 in web design

2.2. 1 how to use css30

2.2.2css What can CSS do 32

2.2.3css things that CSS can't do 32

2.3 basic usage of CSS style sheet 33

2.3. 1 how to insert style sheet 33 into html

2.3.2css style sheet rules 33

2.4 Applying css to Web Page 34

2.4. 1 embedded style 34

Embedded style sheet 34

External style sheet 35

2.5 units and values 35

2.5. 1 defines a color value of 36.

Define font 37

2.5.3 Group Selector 38

2.5.4 Derivation Selector 38

2.5.5id selector 39

Category selector 39

2.6 application example-add css style 4 1

Design analysis 4 1

Manufacturing step 4 1

2.6.3 Case Summary 47

2.7 Draw inferences from one example to another-making a product introduction website 48

2.7. 1 case study 48

Video operation 49

Chapter 3 uses div+css to lay out the page 5 1

3. 1 defines div52.

3. What is1.1div 52?

3. 1.2 Insert div52.

3. Nesting and Fixed Format of1.3div54

3.2css layout positioning 54

3.2. 1 floating positioning 55

Location 58

3.3 Visual box model 60

3.3. 1 box model 60

3.3.2 Visualization Model 62

3.3.3 Blank edge coverage 62

3.4 Common Layout Methods 63

3.4. 1 center layout design 63

Floating layout design 65

Highly adaptable design 68

3.5 New Properties of Box Model 3.5 CSS 3.0 69

Overflow 69

Overflow -x70

Overflow -y7 1

3.6 Application Example-Layout Page 72 with div+css

Design analysis 73

3.6.2 Production Steps 73

3.6.3 Case Summary 78

3.7 Draw inferences from others-Create a healthy website 78

3.7. 1 case study 78

Video operation 79

Chapter 4 uses css to control the background of Web page 8 1

4. 1 background color 82

4. 1. 1 Set the page background color 82

4. 1.2 Set the block background color 83

4.2 Background picture 84

4.2. 1 Set the background picture on page 84.

4.2.2 Repetition of Background Pictures 85

4.2.3 Setting the position of the background picture 86

4.2.4 Setting Background Scroll 87

4.2.5 Abbreviation of Background Style 88

4.3 New Properties of Background 4.3 CSS 3.0 89

Background-country of origin 89

Background clip 90

Background size 92

4. 3. 4 Multiple backgrounds 93

4.4 Application Example-Making 94 pages of financial website

Design analysis 94

4.4.2 Production Step 95

4.4.3 Case summary 10 1

4.5 Draw inferences from one example to another-Making a website for health care products 102

4.5. 1 case study 102

4.5.2 video operation 103

Chapter 5 Using css to Control Text Style 105

5. 1 control text style 106

5. 1. 1 font and font size 106

5. 1.2 Text color and thickness 1 10

5. 1.3 Italic11/

5. Underline1.4 and underline at the top, and delete 1 12.

5. 1.5 English letter case 1 13

5.2 Control paragraph style 1 13

5.2. 1 Horizontal alignment of segments 1 13

5.2.2 Paragraph vertical alignment 1 14

5.2.3 Line spacing and word spacing 1 15

5.2.4 Initial sinking 1 16.

5.3 Use css to control the characters 1 16 in flash.

5.4 CSS 3.0 added Chinese character attribute 1 18.

5. 4. 1 text-shadow 1 18

5. 4. 2 Text overflow 1 19

5. 4. 3 word wrap 12 1

5.5 Application for Sample Preparation Design Website 122

Design analysis 122

Manufacturing steps 122

5.5.3 Case Summary 129

5.6 Draw inferences from others-Make a community website 129

5.6. 1 case study 129

5.6.2 Video operation 130

Chapter 6 Using css to Control Picture Style 13 1

6. 1 picture style 132

6. 1. 1 picture border setting 132

6. 1.2 image zoom setting 135

6.2 Image Alignment 136

6.2. 1 horizontal alignment setting 136

6.2.2 Vertical alignment setting 137

6.3 Mixed arrangement of pictures and texts 138

6.3. 1 mixed text arrangement 138

6.3.2 Set the mixed line spacing as 139.

6.4 New properties of borders 6.4 CSS 3.0 139

6. 4. 1 border-image 140

6. 4. 2 Boundary radius 14 1

6. 4. 3 Box Shadow 142

6. 4. 4 Border color 143

6.5 Application Example-Making Wedding Website 145

Design analysis 145

Manufacturing steps 146

6.5.3 Case Summary 150

6.6 Draw inferences from others-make a product introduction website 150.

6.6. 1 case study 15 1

6.6.2 Video operation 152

Chapter 7 Using css Control List Style 153

7. 1 list control overview 154

7. 1. 1 list control principle 154

7. 1.2 List Types and Usage 154

7. 1.3 change project style 157

7. 1.4 picture symbol 158

7.2 Making Practical Menu with List 159

7. 2. 1 Menu without form 159

7.2.2 menu vertical and horizontal conversion 16 1

7.3 New Properties of Colors 7.3 CSS 3.0 162

Color 162

7.3.2hslacolors 163

7. 3. 3 Capacity 164

7. 3. 4 Color 166

7.4 Application Example-Making Music Website 167

7.4. 1 design analysis 168

Manufacturing steps 168

7.4.3 Case Summary 172

7.5 Inference-Design Studio Website 172

7.5. 1 case study 173

7.5.2 video operation 173

Chapter 8 Using css to Control Form Style 175

8. 1 Overview of Form Design 176

8. Design principles of1.1table 176

8. 1.2 application classification of forms 177

8.2 Form Design 179

8. 2. 1 forms and form elements 179

8.2.2 Label, field set and legend 183

8.2.3 Using css to Control Text Fields 185

8.2.4 Use css to control check boxes and radio buttons 185.

8.2.5 Use css control list and jump menu 186.

8.3 New Properties of Control Content in CSS 3.0 187

8.4 Application Example-Making User Registration Page 188

Design analysis 189

Manufacturing steps 189

8.4.3 Case Summary 196

8.5 Draw inferences from others-create a user login page 196.

8.5. 1 case study 197

8.5.2 video operation 197

Chapter 9 Beautify browser effect with css 199

9. 1 Use css to control hyperlink 200.

9. 1. 1 Understanding Hyperlink 200

9. 1.2 About Link Path 202

9. 1.3 Hyperlink Property Control 204

9. 1.4 image mapping 206

9. 1.5 link opening method 208

9.2 Hyperlink Special Effects 208

9.2. 1 button hyperlink 208

9.2.2 Relief Hyperlink 2 10

9.3 mouse special effects 2 10

9.3. 1css control mouse arrow 2 1 1

9.3.2 mouse change hyperlink 2 1 1

9.4 New Attribute of User Interface in CSS 3.0 2 12

9. 4. 1 packing specification 2 12

Size 2 14

Outside line 2 15

Navigation index 2 16

9.5 Application for Sample Preparation Product Publicity Website 2 18

9.5. 1 design analysis 2 18

9.5.2 Production Step 2 19

9.5.3 Case Summary 225

9.6 Draw inferences from others —— Making the website of the transportation company 225

9.6. 1 case study 225

Video operation 226

Chapter 10 Application of filters in css 227

10. 1 Understanding css filter 228

10.1.1alpha filter 228

10. 1.2 blur filter 23 1

10. 1.3 motion blur filter 232

10. 1.4 shadow filter 233

10. 1.5 shadow filter 234

10. 1.6 Flip the filter 234

10. 1.7 Glow filter 235

10. 1.8 Gray filter 236

10. 1.9 inverse filter 236

10.1.10 x-ray filter 237

10. 1. 1 mask filter 237

10. 1. 12 filter 238

New properties of other modules in/kloc-0 10.2css3.0 239

10.2. 1@media239

10. 2. 2 column 240

10.2.3@font-face242

65438+243

10.3 application example-making product website 245

Design analysis of 10.3. 1 2445

10.3.2 manufacturing step 245

10.3.3 case summary 254

10.4 draw inferences from one instance-making online game websites 254

10.4. 1 case analysis 254

10.4.2 video operation 255

Chapter 1 1 Comprehensive application of css and javascript 257

1 1. 1 What is javascript258?

11.1.1Understanding javascript258

Features of11.1.2 JavaScript 260

The application scope of11.1.3 JavaScript 261

1 1. 1.4css style and javascript263

Grammatical basis of11.2 JavaScript 263

The basic framework of11.2.1JavaScript 263

The basic syntax of11.2.2 JavaScript 264

1 1.2.3 data types and variables

1 1.2.4 expressions and operators 268

1 1.2.5 Basic sentence 268

1 1.3 uses spry component 270.

1 1.3. 1 About spry component 27 1

1 1.3.2 Insert the spry menu 27 1.

1 1.3.3 Insert the spry tab 273.

1 1.3.4 Insert the elastic folding member 275.

Insert spry foldable panel 276.

1 1.4 application example-applying spry component 278 in web pages

1 1.4. 1 design analysis 279

1 1.4.2 manufacturing step 279

1 1.4.3 case summary 287

1 1.5 Draw inferences from one another-making a wedding photography website 287

1 1.5. 1 case analysis 288

1 1.5.2 video operation288

Chapter 12 Comprehensive application of css and xml 289

12. 1xml base 290

Characteristics of12.1.1xml290

12. 1.2xml and html29 1

12. 1.3xml Basic Syntax 293

12. 1.4 xml document with correct format 296

12.2 the link between XML and css 297.

12.2. 1 using xml: stylesheet directive 297.

12.2.2 Use @ Import Directive 299

12.3 Application of XML and css 299

Display student information 299

12.3.2 Form 302 for realizing interlaced color change

12.4 Application Example-Calling xml Data in html Page 305

1 design analysis 306

12.4.2 manufacturing steps

12.4.3 Case Summary 3 1 1

12.5 draw inferences from one example to another-making enterprise websites 3 1 1

12. 5. 1 case analysis 3 12

12.5.2 Video Operation 3 13

Chapter 13 Comprehensive application of css and ajax 3 15

13. 1 Understanding ajax3 16

13.1.1Ajax Introduction 3 16

Key elements of13.1.2 Ajax 317

Advantages of13.1.3 Ajax 318

13.10.4 Steps to Implement ajax 3 18

13. 1.5 the necessity of using css 3 19.

13.2ajax basics 320

13. 2. 1 Introduction to Creating xml5.0 323

1html5.0 tag323

13.3.2html5.0 event attribute 327

13.3.3html5.0 Standard Attribute 329

13.4 application example-using ajax to realize page special effects 330

1 design analysis 330

13.4.2 manufacturing steps

13.4.3 Case Summary 338

13.5 draw inferences from one example to another-realize the draggable div block 339 through ajax.

13.5. 1 case analysis 339

13.5.2 video operation 340

Chapter 14 Children's Education Website 34 1

14. 1 Making Children's Education Website with Comprehensive Examples 342

14. 1. 1 design analysis

14. 1.2 manufacturing step 342

14. 1.3 case summary 353

Chapter 15 Design of Health Care Website 355

15. 1 Comprehensive example-making a health care website 356

Design analysis15.1.1.35438

15. 1.2 manufacturing step 356

15. 1.3 case summary 366

Chapter 16 Game website design 367

16. 1 comprehensive example game website 368

16. 1. 1 design analysis 368

16. 1.2 manufacturing step 368

16. 1.3 case summary 378