《网页制作与网站设计》实训指导书电子版下载.doc
《《网页制作与网站设计》实训指导书电子版下载.doc》由会员分享，可在线阅读，更多相关《《网页制作与网站设计》实训指导书电子版下载.doc（28页珍藏版）》请在冰点文库上搜索。
网页制作与网站设计
课程实训指导书
刘万辉张维中编著
系部：
_____________________________
专业：
_____________________________
班级：
____________________________
学号：
____________________________
姓名：
_____________________________
淮安信息职业技术学院
实训号
实训名称
60课时采用
页码
实训1
Photoshop常用工具的使用
ü
4
实训2
Photoshop图层与色彩调整
ü
5
实训3
Photoshop蒙版、路径的使用
ü
6
实训4
ImageReady的网络功能的使用
ü
6
实训5
Dreamweaver使用入门
ü
7
实训6
Dreamweaver中建站与模板的使用
ü
8
实训7
网页布局设计
ü
9
实训8
CCS样式表
ü
10
实训9
FlashSwish动画设计案例
ü
11
实训10
英语素材库备课辅助系统主页制作实例
ü
12
实训11
淮信科技有限公司培训中心网站建设实例
ü
13
实训12
淮安信息职业技术学院网站建设实例
ü
14
实训13
淮安信息职业技术学院网络中心网站
ü
15
实训14
维达制造有限公司主页设计实例
16
实训15
淮安信息职业技术学院教学工作评建网
17
实训16
网页设计中的界面的借鉴与创新实例
18
实训17
IIS的配置与表单技术，动态网页中的参数传递
19
实训18
查询系统实例
20
实训19
管理系统实例
21
实训20
网站项目策划书的书写
ü
22
《网页制作与网站设计》实训目录
实验须知
1．实训前，应认真阅读本次实训的全部内容，明确实训目的和实训任务，做好必要的实训准备。
2．实训前，应注意收集平时生活中优秀作品，留作实训中借鉴。
3．提前五分钟以上进入实训室，不得迟到。
4．实训中充分利用实训的宝贵时间积极思考、注重细节，争取高标准当堂完成实训。
5．珍惜实训时间，不开小差、不做与实训无关的事，更不得打游戏、或上网聊天。
6．保持实训室安静和清洁卫生，不得大声喧哗；不得在实训室吃东西。
7．实训结束时，整理好台桌和凳子，安排值日同学，打扫实训室卫生。
8．实训报告以作品文档的形式提交，提交路径为ftp:
//用户名@210.29.226.59，在该目录下找到本班的目录文件夹，然后创建自己的文件夹（格式为：
学号+姓名）；实训的资料以及与本课程相关的资料请在ftp:
//210.29.226.59站点上下载。
9．ftp服务器上的宝贵资料，仅供大家学习使用，不得作为其他的商业用途，如有违反，自负侵权后果。
实训一Photoshop常用工具的使用
一、实训目的
1.认识Photoshop软件界面。
2.掌握修改图像大小的方法。
3.掌握选框、套索工具的使用。
4.掌握移动工具、魔术棒工具的使用。
5.掌握画笔工具与橡皮工具的使用。
6.掌握铅笔工具的使用。
7.掌握仿制图章工具与图案图章工具的使用。
8.掌握图案的定义方法。
二、实训准备
1.PhotoshopCS软件环境。
三、实训内容与实训步骤
（一）图像修改
1.打开Photoshop软件，打开“音乐家的摇篮.JPEG”图片。
执行“图像”/“画布大小”命令，在弹出的对话框中输入所需的“宽度”和“高度”尺寸（从“宽度”和“高度”框旁边的下拉菜单中可以选择度量单位）。
2.在“画布大小”对话框中设置好参数后，单击【确定】按钮，完成修改。
（二）套索工具
1.选择磁性套索工具，沿着文化广场的四周建立选区，然后将选区中的内容拷贝下来。
2.新建一个文档，大小为420*340像素，将拷贝下来的图像粘贴到新文档中去并保存。
（三）移动工具和魔术棒工具
1.打开“高贵典雅婚纱.jpg”图片，选择魔术棒工具在背景上单击，然后用“反选”命令选择人物；再打开“宫殿.jpg”图片，用移动工具将“高贵典雅婚纱.jpg”图片中的人物拖移到“宫殿”图片中去，再将其移到合适的位置。
（四）画笔工具
1.新建一个大小为300*340像素的文档，选择画笔工具，将其直径设置为74，前景色多设置几种色彩，用画笔在画布上点击，画出图案。
（五）仿制图章工具仿制图章的使用主要是注意不断地更换采样地点（按住Alt键）。
（六）铅笔工具和图案图章工具
1.首先绘制图案。
建立一个大小为120*100像素背景色为灰色的文档，然后用铅笔工具，将笔尖形状的间距设置为适当，前景色设为#FFFFFF。
在文档中画一条虚线，通过复制/链接、再复制/再链接的方式，将线条均匀地布满画布。
2.将图片拷贝下来，粘贴到新建的背景为透明的文档中，把这个文档定义为图案。
打开“图书馆.jpg”图片，建立选区，选择图案图章工具，用刚定义的图案进行填充。
实训二Photoshop图层与色彩调整
一、实训目的
1.认识图层面板。
2.能够创建新图层。
3.能够复制与删除图层。
4.能够排列、链接、合并图层。
5.能够使用图层的样式。
6.能够使用图层的混合模式。
7.掌握简单的图像的色彩调整。
二、实训准备
1.PhotoshopCS软件环境。
三、实训内容与实训步骤
（一）雕刻文字
1.打开PS软件，新建一个大小为350*100像素文档，输入文字“中华网”。
2.设置投影样式。
正片叠底、不透明度75%、距离、大小各5像素。
3.设置斜面和浮雕样式。
搭边浮雕、雕刻柔和、大小5像素。
4.设置渐变叠加样式。
样式：
线性。
5.设置描边样式。
大小：
2像素；位置：
外部；模式：
正常。
（二）图片的色阶和色相与饱和度调整
1.点击菜单“图像”/“调整”/“色阶”，打开色阶对话框，在输入色阶框中分别输入42、1.00、228，单击【好】按钮。
2.调整完后发现图像出现了瑕疵，将图层复制为背景副本，改变图层的混合模式为“滤色”。
3.在“图层”面板中选中“背景”层，打开“色阶”对话框，调整色阶为0、0.5、255。
通过调整，使图片的明暗对比度适当了。
实训三Photoshop蒙版、路径的使用
一、实训目的
1.了解通道的用途。
2.了解蒙板的用途。
3.了解路径的用途。
4.能够使用蒙版。
5.能够使用路径。
6.掌握路径的使用方法。
二、实训准备
1.PhotoshopCS软件环境。
三、实训内容与实训步骤
（一）蒙版的实例应用
1.首先执行“文件”/“打开”命令，打开“学院全景.jpg”和“学院亭子.jpg”两幅素材图像。
2.拷贝“学院亭子.jpg”，切换到“学院全景.jpg”，将“学院亭子.jpg”粘贴到“学院全景.jpg”中，然后调整大小至适中。
3.单击“图层面板”上的【添加图层蒙版】按钮，为上面图层创建图层蒙版。
4.在工具箱中将“前景色”设置为“黑色”，然后选择“画笔工具”，用柔角类的画笔在蒙版上绘制，将当前图层中要隐藏起来，显示下面图层的地方用蒙版蒙住。
这样底下的图像就显露出来了。
（二）路径使用实例-制作网站顶部效果图
1.打开PhotoShop软件新建一个空白文档大小为776*216像素，背景色为“#E99707”。
2.添加一个新图层（命名“前景”），然后用钢笔工具绘制路径。
3.选择“前景”层以及刚刚绘制的路径，设置前景色为“#0859AD”，然后在“路径”调板左下角处点击【用前景色填充路径】按钮。
4.选择“图层”调板，在左下角处用鼠标点击【添加图层样式】按钮，选择“斜面和浮雕效果”后，点击【好】按钮。
5.打开素材图片“实训楼.jpg”，用移动工具将其拖入当前文档中，并调整图层顺序，将其放置在“前景层”下面，执行“图像”/“调整”/“去色”命令（快捷键〈Ctrl+Shift+U〉）将其去色，调整适当的位置。
6.选择“图层”调板，选中图层1（教学楼），点击左下角的【添加图层蒙版】按钮增加蒙板效果，然后使用“渐变工具”使其从左到右线性渐变，最后调整该层的“混合模式”为“亮度”使其达到最佳效果。
7.使用文字工具，添加文字层“校风：
团结勤奋求实创新”，打开“院标.psd”文件将其调入，调整大小及适当位置。
实训四ImageReady的网络功能的使用
一、实训目的
1.认识AdobeImageReadyCS软件的界面。
2.掌握GIF动画的制作方法。
3.掌握切片的制作、编辑与导出。
4.掌握翻转状态的制作。
5.掌握远程切片的制作。
6.掌握网页图像的优化和Web页面的输出方法。
二、实训准备
1.PhotoshopCS软件环境。
2.ImageReadyCS软件环境。
三、实训内容与实训步骤
（一）GIF动画的制作
1.先在Photoshop中创建所需要呈现动画效果的图像。
但需要注意的是，静态元素不能与动态元素放置在同一层中，而必须单独创建一个图层。
2.存储文件，然后执行“文件”/“在ImageReady中编辑”命令，ImageReady应用程序将打开显示该图像。
接着在ImageReady中进行下面的操作。
3.单击“动画”选项卡使“动画”调板出现在前面。
如果该调板未打开，可以通过执行“窗口”/“动画”命令将其打开。
4.单击“图层”选项卡使“图层”调板出现在前面。
如果该调板未打开，可以通过执行“窗口”/“图层”命令将其打开。
调整“图层”调板和“动画”调板的位置，以便看到文档窗口的一部分以及这两个调板。
5.单击“动画”调板底部的“复制当前帧”按钮添加下一帧。
在“图层”调板中，根据这一帧的需要调整各个图层的可见性。
继续添加新的帧，并根据需要隐藏或显示各个图层。
6.创建完所有的动画帧后，单击“动画”调板底部的【播放】按钮预览动画。
单击【停止】按钮可停止播放。
设定帧延时。
7.GIF动画的保存。
点击菜单“文件／将优化结果存储为”命令，打开优化结果存储为对话框，按照以下设置，然后点击保存按钮就可以得到GIF动画。
（二）ImageReady网络切片与导出实例
1.在Photoshopcs中将图片做好，导入ImageReadycs中。
2.选择“切片工具”对图片进行切片。
3.选择“切掉选择工具”点击图片，选中切片，给切片做翻转状态和远程切片。
4.执行“文件”/“存储为Web所有格式”命令，打开优化对话框，进行优化。
5.保存文件。
单击“存储为Web所有格式”对话框中的“存储”按钮，打开“将优化结果存储为”对话框，在“保存类型”下拉列表中选择“HTML和图像”选项，在“切片”下拉列表中选择“所有切片”，“设置”用“默认设置”，在“文件名”文本框中给HTML取个名称（index.html）,然后单击【保存】按钮。
实训五DreamWeaver入门
一、实训目的
1.了解DreamWeaver8.0软件的用途。
2.掌握DreamWeaver8.0插入文字。
3.掌握DreamWeaver8.0设置文字的超级链接。
4.掌握DreamWeaver8.0插入图片。
5.掌握DreamWeaver8.0设置图片的热区。
6.掌握DreamWeaver8.0掌握图片的交换效果。
7.掌握DreamWeaver8.0插入表格。
8.掌握DreamWeaver8.0插入Flash。
9.掌握DreamWeaver8.0图片混排的方法。
10.掌握DreamWeaver8.0表格的属性设置。
11.掌握DreamWeaver8.0页面属性设置的方法。
二、实训准备
1.DreamWeaver8.0软件环境。
三、实训内容与实训步骤
1.DreamWeaver8.0的基本用法。
2.DreamWeaver8.0中网页背景图片与背景颜色与标题的设置。
3.DreamWeaver8.0中网页页面边距的设置。
注意：
边距都设置为0，为了界面更加美观。
4.使用DreamWeaver8.0插入文字。
设置字体的大小，对齐方式等属性。
5.使用DreamWeaver8.0制作文字的超级链接。
6.使用DreamWeaver8.0插入图片。
7.使用DreamWeaver8.0制作图片的超级链接。
8.使用DreamWeaver8.0制作图片的热区链接。
9.使用DreamWeaver8.0制作图片的交换效果。
10.使用DreamWeaver8.0插入表格。
设置表格的宽度、高度、行数、列数、背景颜色与背景图片。
设置表格的bordercolordark与bordercolorlight属性。
注意：
设置宽度和高度时的百分制表示方式。
11.使用表格进行图片混排。
12.举例演示DreamWeaver8.0页面设置的方法。
13.使用DreamWeaver8.0插入Flash动画。
14.通过实例使用Flash动画的透明属性。
15.摸仿制作实例，交作业。
实训六DreamWeaver建站与模板的使用
一、实训目的
1.掌握DreamWeaver8.0建站的基本方法。
2.模版的创建。
3.模版的调用方法。
4.简单使用模板。
二、实训准备
DreamWeaver8.0软件环境。
三、实训内容与实训步骤
（一）新建站点
1.选择“管理站点”/“新建”命令，此时将显示“站点定义”对话框。
2.在“站点对话框”中输入站点名称“lyw”，然后单击【下一步】按钮。
3.选择“否，我不想使用服务器技术”，然后单击【下一步】按钮。
4.选择“编辑我的计算机上的本地副本，完成后再上传到服务器”。
5.单击“您将把文件储存在计算机上的什么位置”文本字段旁的文件夹图标，选择存储网页的本地文件夹。
6.在“选择站点lyw的本地根文件夹：
”对话框中，单击“选择”栏的下三角按钮，然后选择文件夹“lyw”，单击【选择】按钮完成根文件夹的设置。
单击【下一步】按钮。
7.在“你如何连到远程服务器？
”选项中，从下拉列表框中选择“无”后单击【下一步】按钮。
8.单击【下一步】按钮时，将显示一份总结，简要描述了选定的选项。
如果对选定的选项满意，则继续执行下一步骤，否则请单击【上一步】按钮进行修改。
单击【完成】按钮。
此时，在屏幕右边的“文件”面板中将创建一个名称为“lyw”的站点。
（二）创建模板
1.执行“文件”/“打开”命令，即出现“打开”对话框。
2.在“打开”对话框中，选择要创建为模板的现有文档（例如选择test.htm）。
3.单击【确定】按钮，该文档将出现在“文档”窗口中。
4.执行“文件”/“另存为模板”命令，将出现“另存为模板”对话框。
5.在此对话框中，从“站点”下拉列表种选择要保存的模板的站点。
在“另存为”框中，输入模板的名称“mb”，单击【保存】按钮。
此文档将以.dwt为扩展名保存在“Templates”文件夹下。
6.执行“插入”/“模板对象”/“可编辑区域”命令。
7.此时，将出现“新建可编辑区域”对话框。
在“名称”框中，为该区域输入一个唯一的名称。
单击【确定】按钮，完成模板的创建。
（三）使用模板
1.打开要应用模板的文档。
在“资源”面板中单击“模板”图标，找到要应用的模板。
将模板从面板拖到“文档”窗口中。
或者选中模板，单击【应用】按钮。
2.编辑网页。
实训七网页布局设计
一、实训目的
1.掌握DreamWeaver8.0软件页面属性设置的方法。
2.掌握DreamWeaver8.0软件表格布局。
3.掌握DreamWeaver8.0软件表格属性的设置。
4.掌握DreamWeaver8.0软件层布局。
5.掌握DreamWeaver8.0软件框架布局。
二、实训准备
DreamWeaver8.0软件环境。
三、实训内容与实训步骤
（一）表格布局
1.创建“计算机系迎评网”文件夹，然后在该文件夹中创建images、css文件夹，并且准备相关的素材。
2.打开Dreamweaver软件，新建网页，并将网页保存到新建的“计算机系迎评网”文件夹中，网页命名为default.htm,设置网页标题为“欢迎访问计算机系迎评网”。
3.在网页中插入一个5行1列宽度为778像素其余为0的表格。
插入后设置表格居中对齐。
4.分别设置第1行行高13像素，第2行行高139像素，第3行行高30像素，第4行行高500像素，第5行行高100像素，设置每1行垂直对齐方式为顶端对齐。
5.第1个单元格中插入“top1.gif”图片，在第2个单元格中插入“top2.gif”图片。
在第3个单元格中插入1行7列的表格，具体的参数设置为宽778像素，高28像素，填充为0像素，间距为1像素，边框为0像素，背景颜色为白色。
6.选中插入的7个单元格，设置为居中对齐，宽度为110像素，设置背景颜色为#D2D2D2。
分别在7个单元各种中插入“首页”、“系部介绍”、“专业介绍”、“师资队伍”、“教学管理”、“实训室训”、“教研科研”等文字，并设置这7组文字的超级链接为“index.html”，按〈F12键〉进行浏览。
7.在第4行中插入1行4列的表格，参数设置为宽778像素，高500像素，背景色为白色，然后分别设置4列的垂直方向为顶端对齐，其宽依次为163像素，25像素，565像素，25像素，设置第1列的背景颜色为“#A9CEFD”。
8.在第1列中插入表格8行2列宽163像素，新表格的第1列宽为44像素，居中对齐，行高28像素，第2列宽为119像素。
设置完成后，在新表格的第1列中的2至8行中插入文件夹images中的left.gif图片，在新表格的第2列中的2至8行中依次插入“首页”、“系部介绍”、“专业介绍”、“师资队伍”、“教学管理”、“实训实训”、“教研科研”等文字，并设置这7组文字的超级链接为“index.html”。
9.在第3列中插入系部介绍的一段文字，在最下面的一行中插入版权相关信息，设置居中，背景色为白色。
保存网页，按〈F12〉键预览效果。
（二）层布局
1.创建“淮安旅行社登录窗口”文件夹，然后在该文件夹中创建images、css文件夹，并且准备相关的素材。
2.打开Dreamweaver软件，新建网页，并将网页保存到新建的“淮安旅行社登录窗口”文件夹中，网页命名为“default.htm”,设置网页标题为“欢迎淮安旅行社网站”，设置背景颜色为“#F2FFCA”。
3.执行“插入”/“布局对象”/“层”命令。
4.选中所添加的新层，设置左边距为222像素，上边距为69像素，宽为560像素，高为347像素，设置背景图像为“images”文件夹中的“login.gif”。
5.采用步骤三的方式插入新的层，将其拖放到适当的位置。
6.将素材文件夹中的dltest.htm网页的表格复制插入到层2中，采用步骤3的方式插入新的层，将其拖放到层2的下方，并在其中输入“Copyright@2003-2008版权所有淮安游行社”，将网页保存，预览网页效果。
（三）框架布局
1.设定这个主页是上下结构，下面又分为左右结构，上方框架显示网站主体信息，左方框架显示导航页面，右侧框架显示主内容。
2.首先利用Dreamweaver软件创建新的网页，创建“上方固定，左侧嵌套”的框架集。
3.创建完成后，保存框架在所提供的素材文件夹中，命名为“index.htm”，标题为“图形图像处理专题学习网站”，执行“窗口”/“框架”命令。
4.单击“框架”面板中的上侧框架，在属性中“源文件”后点击【浏览文件】按钮,在弹出的“选择HTML文件”对话框中选择“top.htm”页面。
5.同理，点击框架面板的左侧框架，在属性面板中“源文件”后单击【浏览文件】按钮，在弹出的“选择HTML文件”对话框中选择页面“left.htm”,点击“框架”面板的右侧主框架，在“属性”面板中“源文件”后点击【浏览文件】按钮，在弹出的“选择HTML文件”对话框中选择页面“right.htm”。
6.用鼠标调整框架集中间的边框使其合理，然后保存此框架网页。
实训八CSS样式表
一、实训目的
1.掌握DreamWeaver8.0建站的基本方法。
2.了解CSS的创建方法。
3.掌握css的使用方法。
二、实训准备
DreamWeaver8.0软件环境。
三、实训内容与实训步骤
（一）创建新样式表
1.启动Dreamweaver8.0，新建一张空白网页。
2.选择“窗口”/“CSS样式”命令，或者通过显示导航栏，选择“设计”面板中的CSS样式表来启动CSS样式面板。
3.单击CSS样式表面板右下角的【新建CSS样式】按钮。
4.在弹出的“新建CSS样式”对话框中进行如下设置：
l名称：
输入mycss1。
l选择器类型：
选择类（可用于任何标签）。
l定义在：
选中仅对于该文档。
5.单击【确定】按钮在弹出的“CSS样式定义”对话框中将分类选定为第一项“类型”，选定后右边将显示类型的属性参数。
然后进行如下设置。
字体：
黑体，大小：
24px，样式：
斜体，颜色：
#FF0000
6.单击【确定】按钮，在CSS样式面板中会出现一个新的项mycss1，这就是刚才新建的CSS样式。
（二）链接外部样式表
1.在DreamWeaver8.0打开实训七所做的“计算机系迎评网”网页。
2.打开“CSS样式面板”。
单击“CSS样式面板”底部的【附加样式表】功能按钮（或者右键单击“CSS样式面板”，在弹出的快捷菜单中选择“附加样式表”命令），打开“链接外部样式表”对话框。
3.在“链接外部样式表”对话框上的“文件/URL”域中输入所需的文件，或者单击后面的【浏览】按钮，在弹出的对话框中查找并选择CSS.css样式表文件。
4.在“添加为”域中选择“链接”或“导入”指定和创建用于将CSS.css样式附加到文档的标签。
5.完成后单击【确定】按钮即可将所选择的CSS样式表附加到当前文档，在CSS样式面板中显示该CSS样式表，完成对该网页的美化。
实训九FlashSwish动画设计案例
一、实训目的
1.认识FlashSwishMX软件的界面。
2.了解术语影片、场景、时间线、影格、脚本、精灵等。
3.掌握选择工具的使用方法。
4.掌握铅笔工具的使用方法。
5.掌握曲线工具的使用方法。
6.掌握文本工具的使用方法。
7.掌握适合场景于窗口按钮的使用。
8.掌握插入图像、按钮的方法。
9.掌握添加脚本的方法。
10.掌握插入内容的方法。
11.掌握对各种属性的设置。
二、实训准备
FlashSwishMX软件环境。
三、实训内容与实训步骤
（一）文本动画
1.打开Swish软件，点击【开始新建一个空电影】按钮，在场景中创建一个电影，在影片属性中输入宽为776像素，高为149像素。
2.点击工具栏中的按钮，执行“插入”/“文本”命令，然后在文本输入区中输入“用户至上服务第一”等字，调整文字的位置。
3.在场景中选中“用户至上服务第一”文字对象，执行“添加脚本”/“核心效果”/“变形”命令。
4.在控制
升级会员 