网页设计与制作

目　录

项目活动一　初识网页　1
任务一　优秀网页赏析　1
一、优秀网页赏析　2
二、网页的版面布局　3
三、网页的色彩搭配　5
四、网页的基本元素　7
成长加油站　9
实践演练　网页赏析　9
任务二　浏览网页　10
一、WWW服务　11
二、认识网页和网站　11
三、静态网页和动态网页　14
四、常用网页设计软件　15
实践演练　淘宝网页面体验　16

项目活动二　Dreamweaver初体验　18
任务一　创建和管理站点　18
一、Dreamweaver的工作环境　19
二、站点的创建与管理　20
三、网页页面属性的设置　26
成长加油站　Dreamweaver的操作界面　27
实践演练　胶南旅游——胶南民间艺术网页　28
任务二　HTML语言　30
HTML标记　30
成长加油站　HTML结构　33
实践演练　珠山秀色掩古刹网页　33
任务三　文本操作　35
一、在网页中输入与编辑文本　36
二、在网页中添加与编辑列表　37
代码解读　HTML的列表标记　40
实践演练　大珠山·小珠山网页　40
任务四　图像操作　41
一、在网页中插入和编辑图像　42
二、设置交换图像　43
三、设置图像导航条　44
成长加油站　图像文件的格式　46
实践演练　美图胶南网页　47

项目活动三　表格布局　49
任务一　表格的基本操作　49
成长加油站　表格的基本操作　51
代码解读　52
任务二　表格属性的设置　52
成长加油站　表格相关成长　54
一、表格的属性　54
二、单元格属性　56
三、表格常用的装饰方法　56
实践演练　青岛西海岸度假胜地　57

项目活动四　布局表格　59
任务　设置跟踪图像　59
成长加油站　跟踪图像相关成长　61
一、什么是跟踪图像　61
二、跟踪图像的优点　61
三、设置跟踪图像的步骤　62
实践演练　青岛西海岸度假胜地　63

项目活动五　层的布局　64
任务一　创建层　64
成长加油站　层属性的设置　65
一、层的创建　65
二、属性的设置　65
任务二　应用层　68
成长加油站　层的应用　70
代码解读　HTML的层标记　70
实践演练　青岛西海岸度假胜地　71

项目活动六　框架页面设计与制作　73
任务　使用框架制作网页　73
成长加油站　框架相关知识　77
代码解读　框架代码和浮动框架代码　78
实践演练　青岛西海岸度假胜地　79

项目活动七　超链接与导航栏　81
任务一　常见的几种超链接　81
成长加油站　超链接的概念和路径　84
代码解读　　84
任务二　导航条超链接的设置　84
成长加油站　超链接的分类　88
一、超链接的分类(按要链接的文件所处的位置分类)　88
二、超链接的创建　88
实践演练　青岛西海岸度假胜地　89

项目活动八　网页中的动感元素　90
任务一　Flash文本　90
成长加油站　插入Flash文本对象　91
任务二　Flash按钮　92
成长加油站　插入Flash按钮　93
任务三　插入Shockwave影片　94
成长加油站　Shockwave影片的插入　96
代码解读　Flash动画标记　97
实践演练　青岛西海岸度假胜地　97

项目活动九　模板和库　99
任务一　模板的创建　99
成长加油站　模板相关成长　101
一、模板简介　101
二、创建模板　101
任务二　应用模板制作网页　103
成长加油站　105
一、用模板创建网页　105
二、利用模板更新页面　105
三、与模板脱离　105
任务三　库在网页制作中的应用　105
成长加油站　库的基础知识　　106
实践演练　青岛西海岸度假胜地　107

项目活动十　表单页面设计与制作　109
任务　表单的制作　109
成长加油站　表单相关成长　　114
一、表单　114
二、设置表单结果的处理方式　115
代码解读　表单标记　115
实践演练　留言板　117

项目活动十一　用CSS美化网页　118
任务一　使用CSS样式美化网页文本　118
成长加油站　CSS其他美化设置　119
任务二　使用CSS样式美化表单　120
一、新建CSS样式　120
二、将CSS样式添加到页面　122
三、修改边框效果　122
四、添加各种不同的边框效果　123
成长加油站　CSS相关成长　125
一、CSS的基本语法　125
二、建立CSS样式　126
三、在网页中插入CSS的方法　126
代码解读　去掉文字超链接的下画线和颜色的HTML代码　126
实践演练　珠山秀色掩古刹　127

项目活动十二　特效页面设计与制作　129
任务一　浮动图片的制作　129
任务二　弹出窗口的制作　132
成长加油站　行为和事件的相关成长　134
代码解读　调用JavaScript代码　135
一、JavaScript代码如何加入html页面中　135
二、外部独立的JS文件，链入html代码中，JS文件名通常是“文件名.js”　135
实践演练　青岛西海岸度假胜地　136

项目活动十三　整站开发案例解析　137
任务一　读书网案例解析　137
一、读书网　138
二、编辑首页页面　139
三、次页面的编辑　143
任务二　尚实教育网案例解析　145
任务三　电子相册案例解析　151
实践演练　美化网页　155

项目活动十四　发布与维护网站　156
任务一　网站的发布　156
一、发布站点前的准备工作　157
二、发布网站　160
成长加油站　虚拟主机　161
任务二　站点的日常维护　163
成长加油站　网站维护的主要内容　163
实践演练　发布“胶南旅游网”网站　164
拓展提高　网页艺术设计的借鉴与模仿　165
一、网页艺术设计　165
二、借鉴和模仿　168
实训参考实例　170
实例一　旅游信息类网站——琅琊台旅游网网站　170
一、制作琅琊台旅游网首页　170
二、制作二级公司介绍页面　177
实例二　网上商城类网站——茶园网站前台制作　179
一、建立“茶园”站点　180
二、“茶园”首页制作　183