网站开发案例.docx
- 文档编号:23183791
- 上传时间:2023-05-15
- 格式:DOCX
- 页数:94
- 大小:1.42MB
网站开发案例.docx
《网站开发案例.docx》由会员分享,可在线阅读,更多相关《网站开发案例.docx(94页珍藏版)》请在冰豆网上搜索。
网站开发案例
实训指导书
目 录
第一部分 实训指导书1
实训1页面控制1
实训目的1
实训环境1
素材准备1
实训课时1
实训内容1
实训要求1
实训步骤1
实训过程注意事项2
实训思考2
书写实训报告要求2
页面效果图2
实训2文本操作3
实训目的3
实训环境3
素材准备3
实训课时3
实训内容3
实训要求3
实训步骤3
实训过程注意事项4
实训思考4
书写实训报告要求4
页面效果图4
实训3图像操作5
实训目的5
实训环境5
素材准备5
实训课时5
实训内容5
实训要求5
实训步骤5
实训过程注意事项5
实训思考6
书写实训报告要求6
页面效果图6
实训4表格布局6
实训目的6
实训环境6
素材准备7
实训课时7
实训内容7
实训要求7
实训步骤7
实训思考7
书写实训报告要求7
页面效果图7
实训5布局表格8
实训目的8
实训环境8
素材准备8
实训课时8
实训内容8
实训要求8
实训步骤8
实训过程注意事项9
实训思考9
书写实训报告要求9
页面效果图9
实训6框架网页9
实训目的9
实训环境9
素材准备10
实训课时10
实训内容10
实训要求10
实训步骤10
实训过程注意事项10
实训思考10
书写实训报告要求10
页面效果图11
实训7层的布局11
实训目的11
实训环境11
素材准备11
实训课时11
实训内容12
实训要求12
实训步骤12
实训过程注意事项12
实训思考12
书写实训报告要求12
页面效果图12
实训8模板和库13
实训目的13
实训环境13
素材准备13
实训课时13
实训内容13
实训要求14
实训步骤14
实训过程注意事项14
实训思考14
书写实训报告要求14
页面效果图14
实训9超级链接15
实训目的15
实训环境15
素材准备15
实训课时15
实训内容16
实训要求16
实训步骤16
实训思考16
书写实训报告要求16
页面效果图16
实训10动感网页17
实训目的17
实训环境17
素材准备17
实训课时17
实训内容17
实训要求18
实训步骤18
实训过程注意事项18
实训思考18
书写实训报告要求18
页面效果图18
实训11表单网页19
实训目的19
实训环境19
素材准备19
实训课时19
实训内容19
实训要求20
实训步骤20
实训过程注意事项20
实训思考20
书写实训报告要求20
页面效果图20
实训12HTML语言21
实训目的21
实训环境21
素材准备21
实训课时21
实训内容21
实训要求22
实训步骤22
实训过程注意事项22
实训思考22
书写实训报告要求22
页面效果图22
实训13美化网页23
实训目的23
实训环境23
素材准备23
实训课时23
实训内容23
实训要求23
实训步骤24
实训过程注意事项24
实训思考24
书写实训报告要求24
页面效果图24
实训14JavaScript技术25
实训目的25
实训环境25
素材准备25
实训课时25
实训内容25
实训要求25
实训步骤25
实训过程注意事项26
实训思考26
书写实训报告要求26
页面效果图26
实训15网页设计27
实训目的27
实训环境27
素材准备27
实训课时27
实训内容27
实训要求27
实训步骤27
实训过程注意事项28
实训思考28
书写实训报告要求28
实训16特效制作28
实训目的28
实训环境28
素材准备28
实训课时28
实训内容29
实训要求29
实训步骤29
实训过程注意事项31
实训思考31
书写实训报告要求31
页面效果图:
31
实训17应用行为32
实训目的32
实训环境32
素材准备32
实训课时32
实训内容32
实训要求32
实训步骤33
实训过程注意事项33
实训思考33
书写实训报告要求33
页面效果图33
实训18应用插件34
实训目的34
实训环境34
素材准备34
实训内容34
实训要求34
实训步骤34
实训过程注意事项35
实训思考35
书写实训报告要求35
页面效果图35
实训19 网站开发综合实训35
19.1 实训意义35
19.2 实训目的36
19.3 实训要求36
19.4 实训步骤37
19.5 评分标准37
19.6 实训参考题38
第二部分 网站开发案例39
2.1 规划网站39
2.2 准备素材43
2.3 创建网站44
2.4 网站首页的设计与制作45
2.5 制作二级栏目网页和内容网页53
2.6 设置首页的超级链接59
2.7 制作首页弹出式菜单60
2.8 查看与设置站点地图63
2.9 测试网站65
2.10 发布网站65
第一部分 实训指导书
实训1页面控制
实训目的
为了让学生能熟练掌握创建站点的方法,掌握设置网页的页面属性、如何在网页中添加背景音乐等操作。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
Ø特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø创建站点:
Ø设置外观:
Ø设置标题:
Ø设置标题/编码:
Ø设置跟踪颜色:
Ø设置颜色:
Ø设置窗口大小:
Ø添加背景音乐:
实训要求
要求学生能掌握如何创建站点,新建网页对页面进行外观、标题的设置;设置页面的背景颜色、背景图像或背景音乐等操作。
实训步骤
Ø在E盘中新建本地根文件夹,命名为root,并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
Ø定义站点:
设置"站点名称",命名为"mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置"HTTP地址"为localhost。
Ø创建与设置文档的页面属性:
新建一个页面,设置文档页面属性:
标题设置为"我的班级",背景图像设置为image\0l.jpg图像,左边界、边界宽带、顶部边界以及边界高度分别设置为20
Ø设置页面中文字的字体、字体大小:
选择文字部分,在属性面板设置字体及字体的大小。
Ø添加背景音乐:
为整个页面添加一个背景音乐。
在代码视图下在
和之间如下添加代码:Ø保存文件,预览文件效果。
实训过程注意事项
Ø在创建站点的过程中注意建立本地文件夹,文件夹命名最好为英文;网站中所有的文件最好取名为英文;注意文件的路径;
Ø所有的图片文件单独放在image文件夹内。
Ø背景音乐必须放在站点文件内。
实训思考
如何制作无缝页面?
如何设置背景音乐自动反复播放?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-1
实训2文本操作
实训目的
为了让学生能熟练掌握在Dreamweavermx中如何输入文本,调整设置文本的格式;如何插入特殊字符、文本列表、水平线、时间、注释的方法。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
Ø特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø输入文本:
Ø调整文本:
Ø插入特殊字符:
Ø插入文本列表:
Ø插入水平线:
Ø插入时间:
Ø插入注释:
Ø设置文本格式:
实训要求
要求学生掌握在Dreamweavermx中输入文本、设置文本格式、插入特殊字符、项目符号等操作。
实训步骤
Ø打开上次实训所做的页面文件;
Ø输入文本,调整文本的间距,设置文本的格式;通过“属性”面板中的“格式”和“颜色”等参数,将文字设为标题格式,并改变其颜色;
Ø输入一段不带格式的文字,选择“常用”工具栏上的“文本”单选项目,利用换行按钮对文本进行换行处理,实现分段的效果;
Ø插入特殊字符、项目符号、水平线、时间、注释等内容;
实训过程注意事项
Ø在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去,不能全部选取再添加;
Ø当输入文本时要插入多个连续的空格,必须要“编辑”菜单下的“首选参数”中设置;
Ø换行的几种方式:
自行换行;按ENTER强行换行;按SHIFT+ENTER换行操作;
实训思考
如何插入版权符号?
如何插入特殊字符“¥”?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-2
实训3图像操作
实训目的
为了让学生熟练掌握在Dreamweavermx中插入图像,学会设置图像属性;如何插入鼠标经过图像、插入图像占位符的方法,掌握图文混排的技巧等操作。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
Ø特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø插入图像:
Ø设置图像属性:
Ø插入鼠标经过图像:
Ø插入图像占位符:
Ø图文混排操作:
实训要求
要求学生掌握在Dreamweavermx中如何插入图像、设置图像的格式;如何插入鼠标经过图像、图像占位符;掌握图文混排等操作。
实训步骤
Ø打开上次实训所做的页面文件;
Ø插入图像,在属性面板对图像的格式进行设置;
Ø插入鼠标经过图像、图像占位符;
Ø将图片和文字进行混合排版;
Ø保存文件,预览文件效果;
实训过程注意事项
Ø插入的图像必须放在站点文件夹下的image文件夹内;
Ø设置图片的热点区域可选任意的工具;
实训思考
如何设置图片超链接,链接到指定的页面文件?
如何设置图片的热点区域?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-3
实训4表格布局
实训目的
为了让学生熟练掌握在Dreamweavermx中插入表格,学会设置表格的各项属性;并掌握如何在表格中插入文本、插入图像的操作方法和步骤。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø插入表格,并选择表格和单元格:
Ø设置单元格属性:
Ø调整表格结构、大小:
Ø格式化表格:
Ø表格中插入文本,表格中插入图像:
实训要求
要求学生掌握在Dreamweavermx中如何插入表格、设置表格和单元格的格式;如何调整表格的结构大小;掌握表格中如何插入文字及图像等操作。
实训步骤
Ø新建一个页面,在页面中插入一个6行7列的表格,并在其中输入相应的文字;
Ø选择表格利用“格式化表格”命令来对表格格式进行修改,使其更美观;
Ø根据要求对部分单元格进行拆分或合并操作;
Ø设置文字的对齐方式,通过对边框、填充和间距进行设置;
Ø保存文件,预览文件效果;
Ø实训过程注意事项
Ø插入表格时要注意:
单元格的边距和单元格的间距值的设置;
Ø表格边框线精细为0像素的特殊用途;
Ø插入的图像必须放在站点文件夹下的image文件夹内;
实训思考
如何折分和合并单元格?
如何设置表格的背景?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-4
实训5布局表格
实训目的
为了让学生熟练掌握在Dreamweaver中绘制布局表格和单元格;学会设置布局表格的属性;学会调整布局表格和布局单元格;掌握在布局表格中插入文本和图像的方法。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
Ø特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø绘制布局表格和单元格,清除布局单元格高度:
Ø设置布局表格宽度:
Ø调整布局表格和布局单元格:
Ø布局表格中插入文本和图像:
实训要求
要求学生掌握在Dreamweaver中绘制布局表格和单元格;了解设置布局表格的操作;学会在布局表格中插入文本和图像的技巧等操作。
实训步骤
Ø新建一个页面,切换至布局模式下,使用布局表格和绘制布局单元格来创建表格,制作一个国字型页面版式;
Ø回到标准模式下,观察表格,为每个表格添加背景颜色;
Ø在表格中添加文字,完成整个页面的制作,
Ø保存文件,预览文件效果;
实训过程注意事项
Ø插入的图像必须放在站点文件夹下的image文件夹内;
Ø表格布局和布局表格的区别;
实训思考
如何折分和合并单元格?
如何设置表格的背景?
表格布局和布局表格异同点?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-5
实训6框架网页
实训目的
为了让学生掌握如何创建框架;设定框架的内容和样式;学会制作浮动的框架等操作。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
Ø特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø创建框架
Ø设定框架内容和样式,保存框架
Ø设置无框架内容
Ø制作浮动框架
实训要求
要求学生能利用框架来进行布局网页,设定框架内容和样式;设置框架的内容;制作可以浮动的框架。
实训步骤
Ø在新建文档对话框的“框架集”类型中,选择左侧固定上方嵌套的框架模式,创建一个新的框架页;
Ø插入图片和按钮,以及相关的文字内容;
Ø在属性面板中设置文字和图片的格式属性;
Ø在左侧列出导航链接,制作链接对应的子页面,最终实现点击左侧框架的链接,右面的框架会跳转到相应的子页面;
Ø保存文件,一定要分别保存框架的各个部分,每一部分为一个HTML文件,总的框架是一个HTML文件,预览文件效果;
实训过程注意事项
插入的图像必须放在站点文件夹下的image文件夹内;
框架的保存分几个部分;
实训思考
框架的保存应注意有几个文件要保存?
如何设置框架中的链接?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-6
实训7层的布局
实训目的
为了让学生掌握如何利用层来布局网页,掌握层的插入,设置层的各项属性,利用层与行为的应用来创建层动画等操作。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
Ø特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø使用层排版
Ø设置层文本
Ø显示隐藏层
Ø拖动层
Ø调整层的大小
Ø层的对齐
实训要求
要求学生能利用层来进行布局网页,了解层的属性的设置,掌握在层中插入相关的图片或文字,并掌握层与行为的综合使用。
实训步骤
Ø新建一个页面,在页面中插入三个不同的层;
Ø在各个层中分别插入不同的图片,并设置Layer1显示属性为可见,Layer2、Layer3显示属性为隐藏性;
Ø利用层与行为来制作显示与隐藏层动画:
选择Layer1,添加一个“显示-隐藏层”行为,设置Layer1隐藏,Layer2、Layer3显示,事件改为onmouseover;利用同样的道理,设置当事件为onmouseout时显示Layer2,隐藏Layer1、Layer3的行为。
Ø利用层与行为来制作拖动层动画:
新建一个层,在层中插入一张图片,并调整图片与层的大小。
选择层,添加一个“拖动层”行为,设置层移动的目标处,事件为onmouseover;
Ø调整页面中所有层的大小,选择对齐层命令来调整页面中层的对齐方式。
Ø保存文件,预览文件效果;
实训过程注意事项
插入的图像必须放在站点文件夹下的image文件夹内;
利用层与行为制作动画首先应选中对应层。
实训思考
行为由哪两部分组成?
如何设置行为中的事件更多?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-7
实训8模板和库
实训目的
为了让学生掌握如何利用模板和库来制作网页;掌握模板的创建与编辑;掌握创建可编辑区域、可选区域、重复区域;掌握模板的保存与应用操作;了解如何创建库项目及插入库项目等操作。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
Ø特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø创建模板
Ø定义可编辑区域
Ø定义可选区域
Ø定义重复区域
Ø设置可编辑标签属性
Ø应用模板
Ø调整模板
Ø创建库
Ø插入库
Ø调整库
实训要求
要求学生能利用模板和库来制作网页;设置模板的可编辑区域、可选区域和重复区域;掌握库的应用与编辑修改等操作。
实训步骤
Ø新建一个模板页面,编辑模板页面;
Ø在模板中插入可编辑区域并保存;
Ø新建一个基于模板的页面,修改模板文件,所有基于此模板的页面都会被修改;
Ø新建一个空白页,套用上一实例中的模板;
Ø打开上一实例基于模板的页面,选择插入菜单中的模板对象,选择创建嵌套模板,制作新的嵌套模板,加入第2个可编辑区域并保存,最终生成嵌套模板;
Ø制作一个包含图像的网页,选中图像并拖动到库中;
Ø新建一个空白文档,从库中将图像拖到空白页面中;
Ø打开库项目,对其添加链接,保存库文件,提示更新相关页面,打开包含被修改库项目的页面文档,完成更新;
Ø保存文件,预览文件效果;
实训过程注意事项
插入的图像必须放在站点文件夹下的image文件夹内;
模板的保存注意扩展名。
实训思考
如何套用模板到页面?
如何在模板中添加重复区域?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-8
实训9超级链接
实训目的
为了让学生掌握如何利用超级链接来制作页面;了解主页的创作步骤;掌握链接各种方式的制作方法与步骤。
实训环境
Ø硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
Ø操作系统:
Windows95/98/me/2000/XP
Ø软件环境:
DreamweaverMX2004
Ø特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
Ø插入横向导航条
Ø设置文本链接
Ø插入左置导航栏
Ø创建外部超级链接
Ø创建内部超级链接
Ø创建E-MAIL链接
Ø创建锚点链接
Ø创建下载文件的链接
Ø创建空链接
Ø创建脚本链接
实训要求
要求学生能利用链接来制作网页;掌握链接几种设置的方法和步骤;制作主页的步骤和要求等内容。
实训步骤
Ø创建一个上方固定左侧嵌套的框架页面;
Ø在框架的上部分插入相关的图片或网站的LOGO及BANNER;
Ø左侧插入相关的文字,作为左侧导航栏,右侧框架页面中输入相关文字;
Ø在右侧框架页面中,分别以3段文本段落标题作为锚点,在页面上部设置锚记链接;
Ø在左下部设置“友谊链接”到相关的网站,设置“联系我们”的E-MAIL链接;创建“下载”到下载文件的链接;
Ø保存文件,预览文件效果;
Ø实训过程注意事项
Ø导航栏要注意分类,避免重复出现;
Ø锚点的名称要注意不能重名。
实训思考
锚点在同一个文件中是否可以重名?
如何设置链接到指定的网站?
书写实训报告要求
根据调试结果,写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-9
实训10动感网页
实训目的
为了让学生掌握在网页中如何插入FLASH动画、按钮、文本、视频、音频、JAVAAPPLET及ActiveX控件等内容,以便实现动感网页的制作。
实训环境
Ø硬件环境:
考核用机为奔
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 开发 案例