本教材以项目为主线,通过项目对网页设计与制作的相关知识进行讲解,鼓励读者在实践中加深对网页设计相关内容的理解与掌握。本教材主要包括HTML、Dreamweaver、CSS和综合案例四部分,介绍了HTML标记及网页相关的基础知识,主要包括列表、图片、超链接、表格、表单、框架等; Dreamweaver的基本操作; CSS语法、Dreamweaver中CSS的应用、框模型、CSS布局方法和DIV+CSS等;以及网站综合设计等。
本教材适合初级和中级读者,在实例选择、实现方法及内容编排等方面都融入了作者多年的教学与实践经验,并结合CDIO工程教育教学思想,使读者能够在较短的时间内完成基本的网页设计与制作的学习。
本教材内容丰富,循序渐进,深入浅出,易学易懂。读者通过对本教材的学习,不仅能够掌握网页设计的基础和本质,而且能够掌握基于Web标准的高级网页设计方法;为网页设计师、专业网站开发者、动态网页开发者奠定良好的网页代码基础,也便于读者进一步提升自己。本教材可作为本科、高职高专的计算机、电子商务、信息管理等专业网页设计与制作相关课程的教材使用,也可作为网页设计初学者及爱好者的参考用书。
第1章网页设计知识概述1
1.1基础知识2
1.1.1WWW2
1.1.2URL2
1.1.3HTTP2
1.1.4HTML2
1.1.5浏览器3
1.1.6B/S3
1.1.7静态网页与动态网页4
1.2常用网页设计技术4
1.3常用网页设计工具5
1.4课程内容安排5
1.4.1课程内容5
1.4.2选择理由5
1.5小结7
1.6教学效果测评7
第2章HTML基础8
2.1HTML 元素9
2.2第一个HTML页面9
2.3标准HTML文件的结构13
2.4基本HTML标记13
2.4.1正文标题标记 从<h1>到<h6>13
2.4.2分段标记<p>和换行标记<br />14
2.4.3常用文本格式标记15
2.4.4注释语句标记<! >16
2.5列表标记17
2.5.1有序列表17
2.5.2无序列表18
2.5.3定义列表19
2.6HTML的属性20
2.6.1align属性20
2.6.2style属性21
2.7HTML颜色22
2.8<div>和<span>23
2.9*滚动字幕<marquee>24
2.10*字符实体26
2.11*文件路径27
2.11.1绝对路径27
2.11.2相对路径28
2.12插入图片30
2.12.1图像格式30
2.12.2在网页中使用图片30
2.13制作超链接32
2.13.1外部链接与内部链接32
2.13.2title属性和target属性33
2.13.3图片超链接34
2.13.4文件的链接35
2.13.5*锚点链接37
2.14小结38
2.15教学效果测评39
第3章HTML进阶42
3.1表格43
3.1.1表格的应用43
3.1.2表格的基本标记44
目录3.2表单46
3.2.1表单的应用46
3.2.2表单标记<form>46
3.2.3表单中常用的控件和属性47
3.2.4文本域和按钮48
3.2.5单选按钮和复选框49
3.2.6多行文本框和下拉菜单50
3.2.7综合项目51
3.3*框架53
3.3.1框架集53
3.3.2创建框架和框架集54
3.3.3用<frameset>生成框架集结构55
3.3.4用<frame>定义单个框架55
3.3.5框架页面中链接的打开方式56
3.3.6用<iframe>定义嵌入式框架56
3.4教学效果测评59
第4章Dreamweaver基础61
4.1Dreamweaver工作界面62
4.2建立站点63
4.3创建基本网页65
4.4Dreamweaver的操作70
4.4.1创建超链接70
4.4.2*创建图像地图71
4.4.3表格操作72
4.4.4*框架操作74
4.4.5表单操作77
4.4.6插入Flash84
4.5教学效果测评87
第5章CSS88
5.1CSS简介89
5.2CSS的优点89
5.3第一个CSS90
5.4常用属性92
5.5CSS选择器96
5.5.1标签选择器96
5.5.2ID选择器98
5.5.3CLASS选择器99
5.5.4CSS选择器小结103
5.6CSS的位置106
5.6.1内嵌样式(Inline Style)106
5.6.2内部样式表107
5.6.3外部样式表107
5.7CSS伪类109
5.8层叠(Cascading)111
5.9在Dreamweaver中使用CSS114
5.9.1编写CSS样式115
5.9.2应用CSS样式118
5.10综合项目120
5.10.1列表120
5.10.2导航条123
5.10.3圆角矩形126
5.11教学效果测评129
第6章框模型133
6.1第一个盒子134
6.2框模型135
6.3盒子的宽度和高度140
6.4Dreamweaver可视化助理142
6.5综合项目143
6.6教学效果测评151
第7章CSS布局152
7.1网页布局方法概述153
7.2display显示153
7.3float浮动158
7.4绝对定位171
7.5相对定位175
7.6教学效果测评178
第8章Web标准180
8.1Web标准的发展与意义181
8.2Web标准概述181
8.3XHTML182
8.3.1选择合适的DOCTYPE182
8.3.2头文件183
8.3.3代码规范184
8.4DIV+CSS设计185
8.5*Web Developer223
8.5.1Web Developer的安装223
8.5.2Web Developer主要功能224
8.6Firebug226
8.7教学效果测评230
第9章网站综合设计235
9.1网站设计概述236
9.2网站综合设计流程237
9.3网站的发布239
9.3.1WWW服务器240
9.3.2FTP 240
9.4课程网站241
9.5三级项目244
9.5.1区域的实现245
9.5.2从psd图片中获取图片素材246
9.5.3切片248
9.5.4站点的建立和公用CSS251
9.5.5典型部分的实现253
9.5.6布局的实现254
9.6教学效果测评260
附录教学建议262
(1)以能力培养为主线,培养学生专业知识能力和工程实践能力。
(2)以案例为驱动,在做案例的过程中学习新知识,充分体现了“做中学”。
(3)以项目为载体,基于工程化教育理念,按照分析、设计、实施、运行展开项目及知识点的讲解。
(4)围绕学科知识构建教材体系,并与能力和项目交叉,实现同一专业下不同教材紧密的关联性。
(5)内容编排循序渐进,符合人的认知规律。
(6)数字化配套资源完备,如PPT课件、案例代码、实验报告等。