网页设计案例教程PDF|Epub|txt|kindle电子书版本网盘下载

网页设计案例教程PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 网站开发入门1

学习目标1

案例一 了解网站开发流程1

案例说明1

案例步骤1

支撑知识点4

一、网页、网站和主页4

二、Internet，IP地址和域名5

三、WWW，URL，HTTP和浏览器5

四、网页文件的制作方法6

案例二 创建Dreamweaver站点6

案例说明6

案例步骤6

支撑知识点9

一、Dreamweaver工作界面介绍9

二、新建和保存网页文档15

三、打开、预览和关闭网页文档17

案例三 制作简单的HTML＋CSS页面18

案例说明18

案例步骤19

一、构建HTML结构19

二、构建CSS样式21

支撑知识点22

一、HTML与CSS简介22

二、HTML的标签构成23

三、HTML网页文件的基本结构25

四、静态页面与动态页面28

五、网页的Web标准28

本章总结29

本章实训29

第2章 HTML标签与CSS样式基础31

学习目标31

案例一 制作鲜花导购网页的结构——HTML标签31

案例说明31

案例步骤32

支撑知识点39

一、HTML标题、水平线、段落和换行40

二、HTML列表42

三、HTML图像43

四、HTML超链接45

案例二 修饰鲜花导购网页——CSS样式基础47

案例说明47

案例步骤48

支撑知识点51

一、在HTML页面中引入CSS样式表的方法51

二、选择器的类型55

三、选择器的集体声明、嵌套与优先级59

四、选择器的继承60

本章总结63

本章实训63

第3章 文字在网页中的应用66

学习目标66

案例一 制作个人博客首页——设置文字样式66

案例说明66

案例步骤66

支撑知识点72

一、CSS文字样式常用属性73

二、网页中元素的长度单位75

三、为网页元素设置颜色的技巧75

案例二 制作个人博客子页——设置段落和其他文字样式76

案例说明76

案例步骤77

支撑知识点80

一、CSS段落和其他文字样式属性80

二、HTML常用符号82

案例三 制作个人博客排行榜——设置列表样式83

案例说明83

案例步骤83

支撑知识点88

一、CSS列表样式常用属性88

二、清除列表的默认边距90

三、〈div〉与〈span〉标签补充讲解90

四、块级元素与行内元素补充讲解91

本章总结91

本章实训91

第4章 图像在网页中的应用94

学习目标94

案例一 制作休闲文章页面——设置图像效果94

案例说明94

案例步骤95

支撑知识点99

一、设置图像和其他元素大小100

二、设置图像和其他元素边框100

三、设置图像的对齐方式101

四、设置图文混排102

案例二 制作童话故事页面——设置网页元素背景103

案例说明103

案例步骤103

支撑知识点106

一、设置背景颜色106

二、设置背景图像106

本章总结109

本章实训109

第5章 制作导航栏111

学习目标111

案例一 制作简单纵向导航栏111

案例说明111

案例步骤111

支撑知识点——使用CSS的一些小技巧116

案例二 制作简单横向导航栏116

案例说明116

案例步骤117

案例三 制作带图像效果的横向导航栏119

案例说明119

案例步骤119

案例四 制作带下拉菜单的横向导航栏122

案例说明122

案例步骤122

支撑知识点——使用CSS的一些小技巧129

本章总结130

本章实训130

第6章 表格在网页中的应用132

学习目标132

案例一 制作2012年世界杯分组表——构建和美化表格132

案例说明132

案例步骤133

支撑知识点139

一、表格的HTML标签139

二、合并和拆分单元格140

三、使用CSS设置表格或单元格颜色141

四、使用CSS设置表格或单元格大小和边框141

案例二 制作月历——使用CSS控制表格进阶142

案例说明142

案例步骤142

支撑知识点149

一、使用CSS设置网页元素的内边距和外边距149

二、使用CSS合并表格边框151

本章总结152

本章实训152

第7章 表单在网页中的应用153

学习目标153

案例一 制作注册页面——表单的HTML结构153

案例说明153

案例步骤154

支撑知识点——常用的表单HTML标签168

案例二 美化注册页面——使用CSS控制表单171

案例说明171

案例步骤171

支撑知识点——使用CSS定义表单样式174

本章总结175

本章实训175

第8章 CSS标准流布局——制作企业网站的新闻显示页面177

学习目标178

案例一 对页面进行整体布局——盒子模型178

案例说明178

案例步骤178

支撑知识点——盒子模型的概念182

案例二 制作页头部分——标准流布局概念184

案例说明184

案例步骤184

支撑知识点——标准流的概念190

案例三 制作新闻正文显示部分190

案例说明190

案例步骤191

支撑知识点——margin使用注意事项194

本章总结197

本章实训197

一、制作博客网站日志页面197

二、制作企业简介页面198

第9章 CSS浮动布局——制作企业网站新闻列表页面199

学习目标200

案例一 对页面进行整体布局——浮动布局概念200

案例说明200

案例步骤200

支撑知识点204

一、float和clear属性204

二、浮动布局的原理205

三、常用的浮动布局方法207

四、清除浮动对布局的不良影响209

五、浮动布局应用技巧210

案例二 制作搜索栏目213

案例说明213

案例步骤213

案例三 制作新闻菜单217

案例说明217

案例步骤217

案例四 制作新闻列表220

案例说明220

案例步骤221

本章总结226

本章实训226

一、制作个人文集页面226

二、制作博客网站主页226

第10章 CSS定位布局——制作企业网站首页228

学习目标229

案例一 对页面进行整体布局——CSS定位属性229

案例说明229

案例步骤229

支撑知识点234

一、认识CSS中的定位属性234

二、CSS相对定位237

三、CSS绝对定位237

四、元素的堆叠顺序、溢出和剪裁238

五、网页布局经验总结240

案例二 制作图片新闻栏目241

案例说明241

案例步骤241

案例三 制作集团新闻栏目246

案例说明246

案例步骤246

案例四 制作企业首页的其他栏目251

案例说明251

案例步骤251

一、制作公司简介栏目251

二、制作项目展示栏目252

三、制作站内搜索栏目253

本章总结255

本章实训255

一、制作博客网站日志页面255

二、制作学校网站主页255

第11章 JavaScript的应用257

学习目标257

案例一 使用JavaScript实现关闭窗口功能257

案例说明257

案例步骤258

支撑知识点259

一、JavaScript简介259

二、JavaScript的特点260

三、在页面中添加脚本的方式261

案例二 制作跑马灯效果262

案例说明262

案例步骤262

支撑知识点265

一、数据类型和变量265

二、表达式和运算符266

三、函数267

四、基本语句268

五、事件271

本章总结272

本章实训272

一、制作交换图像效果272

二、屏蔽网页鼠标右键274

第12章 综合应用——制作婚礼策划机构首页275

案例分析276

案例一 搭建页面整体框架276

一、整体布局分析276

二、构建HTML结构277

三、编写CSS代码278

案例二 制作网页头部282

一、模块分析282

二、编写HTML代码283

三、编写CSS代码283

案例三 制作网页导航部分284

一、模块分析284

二、编写HTML代码284

三、编写CSS代码284

案例四 制作主体内容的上面部分285

一、制作左侧登录部分286

1．模块分析286

2．编写HTML代码286

3．编写CSS代码287

二、制作右侧图像显示部分288

案例五 制作主体内容的中间部分292

一、制作左侧婚礼资讯部分293

1．模块分析293

2．编写HTML代码293

3．编写CSS代码294

二、制作右侧视频显示区296

1．模块分析296

2．编写HTML代码296

3．编写CSS代码296

案例六 制作主体内容的下面部分297

一、模块分析297

二、编写HTML代码297

三、编写CSS代码298

案例七 制作友情链接部分299

一、模块分析299

二、编写HTML代码299

三、编写CSS代码300

案例八 制作网页底部301