《网页制作与网站设计》实训指导书电子版下载.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.掌握Drea
升级会员 