网页制作与网站设计实训指导书

《网页制作与网站设计实训指导书》由会员分享，可在线阅读，更多相关《网页制作与网站设计实训指导书（29页珍藏版）》请在装配图网上搜索。

1、 网页制作与网站设计 课程实训指导书 系部：_____________________________ 专业：_____________________________ 班级： ____________________________ 学号： ____________________________ 姓名：_____________________________ 淮安信息职业技术学院 实训号 实训名称 60课时采用 页码 实训1 Photoshop常用工具的使用 ü 4 实训2 Photoshop图层与色彩调整 ü

2、5 实训3 Photoshop蒙版、路径的使用 ü 6 实训4 ImageReady 的网络功能的使用 ü 6 实训5 Dreamweaver使用入门 ü 7 实训6 Dreamweaver中建站与模板的使用 ü 8 实训7 网页布局设计 ü 9 实训8 CCS样式表 ü 10 实训9 Flash Swish动画设计案例 ü 11 实训10 英语素材库备课辅助系统主页制作实例 ü 12 实训11 淮信科技有限公司培训中心网站建设实例 ü 13 实训12 淮安信息职业技术学院网站建设实例 ü 14 实训13 淮安

3、信息职业技术学院网络中心网站 ü 15 实训14 维达制造有限公司主页设计实例 16 实训15 淮安信息职业技术学院教学工作评建网 17 实训16 网页设计中的界面的借鉴与创新实例 18 实训17 IIS的配置与表单技术，动态网页中的参数传递 19 实训18 查询系统实例 20 实训19 管理系统实例 21 实训20 网站项目策划书的书写 ü 22 《网页制作与网站设计》实训目录 实 验 须 知 1． 实训前，应认真阅读本次实训的全部内容，明确实训目的和实训任务，做好必要的实训准备。 2． 实训

4、前，应注意收集平时生活中优秀作品，留作实训中借鉴。 3． 提前五分钟以上进入实训室，不得迟到。 4． 实训中充分利用实训的宝贵时间积极思考、注重细节，争取高标准当堂完成实训。 5． 珍惜实训时间，不开小差、不做与实训无关的事，更不得打游戏、或上网聊天。 6． 保持实训室安静和清洁卫生，不得大声喧哗；不得在实训室吃东西。 7． 实训结束时，整理好台桌和凳子，安排值日同学，打扫实训室卫生。 8． 实训报告以作品文档的形式提交，提交路径为ftp://用户名@210.29.226.59，在该目录下找到本班的目录文件夹，然后创建自己的文件夹（格式为：学号+姓名）；实训的资料以及与本课程相关的

5、资料请在ftp://210.29.226.59站点上下载。 9． ftp服务器上的宝贵资料，仅供大家学习使用，不得作为其他的商业用途，如有违反，自负侵权后果。 实训一 Photoshop常用工具的使用 一、实训目的 1.认识Photoshop软件界面。 2.掌握修改图像大小的方法。 3.掌握选框、套索工具的使用。 4.掌握移动工具、魔术棒工具的使用。 5.掌握画笔工具与橡皮工具的使用。 6.掌握铅笔工具的使用。 7.掌握仿制图章工具与图案图章工具的使用。 8.掌握图案的定义方法。 二、实训准备 1. Photoshop CS软件环境。 三、实训内容与

6、实训步骤 （一）图像修改 1.打开Photoshop 软件，打开“音乐家的摇篮.JPEG”图片。执行“图像” /“画布大小”命令，在弹出的对话框中输入所需的“宽度”和“高度”尺寸（从“宽度”和“高度”框旁边的下拉菜单中可以选择度量单位）。 2. 在“画布大小”对话框中设置好参数后，单击【确定】按钮，完成修改。 （二）套索工具 1.选择磁性套索工具，沿着文化广场的四周建立选区，然后将选区中的内容拷贝下来。 2.新建一个文档，大小为420*340像素，将拷贝下来的图像粘贴到新文档中去并保存。 （三）移动工具和魔术棒工具 1.打开“高贵典雅婚纱.jpg”图片，选择魔术棒工具在背景上单

7、击，然后用“反选”命令选择人物；再打开 “宫殿.jpg”图片，用移动工具将“高贵典雅婚纱.jpg”图片中的人物拖移到“宫殿”图片中去，再将其移到合适的位置。 （四）画笔工具 1.新建一个大小为300*340像素的文档，选择画笔工具，将其直径设置为74，前景色多设置几种色彩，用画笔在画布上点击，画出图案。 （五）仿制图章工具 仿制图章的使用主要是注意不断地更换采样地点（按住Alt键）。 （六）铅笔工具和图案图章工具 1.首先绘制图案。建立一个大小为120*100像素背景色为灰色的文档，然后用铅笔工具，将笔尖形状的间距设置为适当，前景色设为#FFFFFF。在文档中画一条虚线，通过复制/

8、链接、再复制/再链接的方式，将线条均匀地布满画布。 2.将图片拷贝下来，粘贴到新建的背景为透明的文档中，把这个文档定义为图案。打开“图书馆.jpg”图片，建立选区，选择图案图章工具，用刚定义的图案进行填充。 实训二 Photoshop图层与色彩调整 一、实训目的 1.认识图层面板。 2.能够创建新图层。 3.能够复制与删除图层。 4.能够排列、链接、合并图层。 5.能够使用图层的样式。 6.能够使用图层的混合模式。 7.掌握简单的图像的色彩调整。 二 、实训准备 1.Photoshop CS软件环境。 三、实训内容与实训步骤 （一）雕刻文字 1.

9、打开PS软件，新建一个大小为350*100像素文档，输入文字“中华网”。 2.设置投影样式。正片叠底、不透明度75%、距离、大小各5像素。 3.设置斜面和浮雕样式。搭边浮雕、雕刻柔和、大小5像素。 4.设置渐变叠加样式。样式：线性。 5.设置描边样式。大小：2像素；位置：外部；模式：正常。 （二）图片的色阶和色相与饱和度调整 1.点击菜单“图像”/“调整”/“色阶”，打开色阶对话框，在输入色阶框中分别输入42、1.00、228，单击【好】按钮。 2.调整完后发现图像出现了瑕疵，将图层复制为背景副本，改变图层的混合模式为“滤色”。 3.在“图层”面板中选中“背景”层，打开“色阶”

10、对话框，调整色阶为0、0.5、255。通过调整，使图片的明暗对比度适当了。 实训三 Photoshop蒙版、路径的使用 一、实训目的 1.了解通道的用途。 2.了解蒙板的用途。 3.了解路径的用途。 4.能够使用蒙版。 5.能够使用路径。 6.掌握路径的使用方法。 二 、实训准备 1.Photoshop CS软件环境。 三、实训内容与实训步骤 （一） 蒙版的实例应用 1.首先执行“文件”/“打开”命令，打开“学院全景.jpg”和“学院亭子.jpg”两幅素材图像。 2.拷贝“学院亭子.jpg”，切换到“学院全景.j

11、pg”，将“学院亭子.jpg”粘贴到“学院全景.jpg”中，然后调整大小至适中。 3.单击“图层面板”上的【添加图层蒙版】按钮，为上面图层创建图层蒙版。 4.在工具箱中将“前景色”设置为“黑色”，然后选择“画笔工具”，用柔角类的画笔在蒙版上绘制，将当前图层中要隐藏起来，显示下面图层的地方用蒙版蒙住。这样底下的图像就显露出来了。 （二）路径使用实例-制作网站顶部效果图 1.打开PhotoShop软件新建一个空白文档大小为776*216像素，背景色为“#E99707”。 2.添加一个新图层（命名“前景”），然后用钢笔工具绘制路径。 3.选择“前景”层以及刚刚绘制的路径，设置前景色为“#

12、0859AD”，然后在“路径”调板左下角处点击【用前景色填充路径】按钮。 4.选择“图层”调板，在左下角处用鼠标点击【添加图层样式】按钮，选择“斜面和浮雕效果”后，点击【好】按钮。 5.打开素材图片“实训楼.jpg”，用移动工具将其拖入当前文档中，并调整图层顺序，将其放置在“前景层”下面，执行“图像”/“调整”/“去色”命令（快捷键〈Ctrl+Shift+U〉）将其去色，调整适当的位置。 6.选择“图层”调板，选中图层1（教学楼），点击左下角的【添加图层蒙版】按钮增加蒙板效果，然后使用“渐变工具”使其从左到右线性渐变，最后调整该层的“混合模式”为“亮度”使其达到最佳效果。 7.使用文字

13、工具，添加文字层“校风：团结 勤奋 求实 创新”，打开“院标.psd”文件将其调入，调整大小及适当位置。 实训四 ImageReady 的网络功能的使用 一、实训目的 1.认识Adobe ImageReady CS软件的界面。 2.掌握GIF动画的制作方法。 3.掌握切片的制作、编辑与导出。 4.掌握翻转状态的制作。 5.掌握远程切片的制作。 6.掌握网页图像的优化和Web页面的输出方法。 二 、实训准备 1.Photoshop CS软件环境。 2.ImageReady CS软件环境。 三、实训内容与实训步骤 （一）GIF动画的制作 1.先在P

14、hotoshop中创建所需要呈现动画效果的图像。但需要注意的是，静态元素不能与动态元素放置在同一层中，而必须单独创建一个图层。 2.存储文件，然后执行“文件”/“在ImageReady中编辑”命令，ImageReady应用程序将打开显示该图像。接着在ImageReady中进行下面的操作。 3.单击“动画”选项卡使“动画”调板出现在前面。如果该调板未打开，可以通过执行“窗口”/“动画”命令将其打开。 4.单击“图层”选项卡使“图层”调板出现在前面。如果该调板未打开，可以通过执行“窗口”/“图层”命令将其打开。调整“图层”调板和“动画”调板的位置，以便看到文档窗口的一部分以及这两个调板。

15、5.单击“动画”调板底部的“复制当前帧”按钮添加下一帧。在“图层”调板中，根据这一帧的需要调整各个图层的可见性。继续添加新的帧，并根据需要隐藏或显示各个图层。 6.创建完所有的动画帧后，单击“动画”调板底部的【播放】按钮预览动画。单击【停止】按钮可停止播放。设定帧延时。 7.GIF动画的保存。点击菜单“文件／将优化结果存储为”命令，打开优化结果存储为对话框，按照以下设置，然后点击保存按钮就可以得到GIF动画。 （二）ImageReady网络切片与导出实例 1.在Photoshop cs中将图片做好，导入ImageReady cs中。 2.选择“切片工具”对图片进行切片。 3.选择“

16、切掉选择工具”点击图片，选中切片，给切片做翻转状态和远程切片。 4.执行“文件”/“存储为Web所有格式”命令，打开优化对话框，进行优化。 5.保存文件。单击“存储为Web所有格式”对话框中的“存储”按钮，打开“将优化结果存储为”对话框，在“保存类型”下拉列表中选择“HTML和图像”选项，在“切片”下拉列表中选择“所有切片”，“设置”用“默认设置”，在“文件名”文本框中给HTML取个名称（index.html）,然后单击【保存】按钮。 实训五 DreamWeaver入门 一、实训目的 1.了解DreamWeaver 8.0软件的用途。 2.掌握DreamWeaver 8.

17、0插入文字。 3.掌握DreamWeaver 8.0设置文字的超级链接。 4.掌握DreamWeaver 8.0插入图片。 5.掌握DreamWeaver 8.0设置图片的热区。 6.掌握DreamWeaver 8.0掌握图片的交换效果。 7.掌握DreamWeaver 8.0插入表格。 8.掌握DreamWeaver 8.0插入Flash。 9.掌握DreamWeaver 8.0图片混排的方法。 10.掌握DreamWeaver 8.0表格的属性设置。 11.掌握DreamWeaver 8.0页面属性设置的方法。 二、实训准备 1.DreamWeaver 8.0软件环境

18、。 三、实训内容与实训步骤 1.DreamWeaver 8.0的基本用法。 2.DreamWeaver 8.0中网页背景图片与背景颜色与标题的设置。 3.DreamWeaver 8.0中网页页面边距的设置。 注意：边距都设置为0，为了界面更加美观。 4.使用DreamWeaver 8.0插入文字。 设置字体的大小，对齐方式等属性。 5.使用DreamWeaver 8.0制作文字的超级链接。 6.使用DreamWeaver 8.0插入图片。 7.使用DreamWeaver 8.0制作图片的超级链接。 8.使用DreamWeaver 8.0制作图片的热区链接。 9.使用Dr

19、eamWeaver 8.0制作图片的交换效果。 10.使用DreamWeaver 8.0插入表格。 设置表格的宽度、高度、行数、列数、背景颜色与背景图片。 设置表格的bordercolordark与bordercolorlight属性。 注意：设置宽度和高度时的百分制表示方式。 11.使用表格进行图片混排。 12.举例演示DreamWeaver 8.0页面设置的方法。 13.使用DreamWeaver 8.0插入Flash动画。 14.通过实例使用Flash动画的透明属性。 15.摸仿制作实例，交作业。 实训六 DreamWeaver建站与模板的使用 一、实训目

20、的 1.掌握DreamWeaver 8.0建站的基本方法。 2.模版的创建。 3.模版的调用方法。 4.简单使用模板。 二、实训准备 DreamWeaver 8.0 软件环境。 三、 实训内容与实训步骤 （一）新建站点 1.选择“管理站点”/“新建”命令，此时将显示“站点定义”对话框。 2.在“站点对话框”中输入站点名称“lyw”，然后单击【下一步】按钮。 3.选择“否，我不想使用服务器技术”，然后单击【下一步】按钮。 4.选择“编辑我的计算机上的本地副本，完成后再上传到服务器”。 5.单击“您将把文件储存在计算机上的什么位置”文本字段旁的文件夹图标，选择存储网页的本

21、地文件夹。 6.在“选择站点lyw的本地根文件夹：”对话框中，单击“选择”栏的下三角按钮，然后选择文件夹“lyw”，单击【选择】按钮完成根文件夹的设置。单击【下一步】按钮。 7.在“你如何连到远程服务器？”选项中，从下拉列表框中选择“无”后单击【下一步】按钮。 8.单击【下一步】按钮时，将显示一份总结，简要描述了选定的选项。如果对选定的选项满意，则继续执行下一步骤，否则请单击【上一步】按钮进行修改。单击【完成】按钮。 此时，在屏幕右边的“文件”面板中将创建一个名称为“lyw”的站点。 （二）创建模板 1.执行“文件”/“打开”命令，即出现“打开”对话框。 2.在“打开”对话框中，

22、选择要创建为模板的现有文档（例如选择test.htm）。 3.单击【确定】按钮，该文档将出现在“文档”窗口中。 4.执行“文件”/“另存为模板”命令，将出现“另存为模板”对话框。 5.在此对话框中，从“站点”下拉列表种选择要保存的模板的站点。在“另存为”框中，输入模板的名称“mb”，单击【保存】按钮。此文档将以.dwt为扩展名保存在“Templates”文件夹下。 6.执行“插入”/“模板对象”/“可编辑区域”命令。 7.此时，将出现“新建可编辑区域”对话框。在“名称”框中，为该区域输入一个唯一的名称。单击【确定】按钮，完成模板的创建。 (三)使用模板 1.打开要应用模板的文档。

23、在“资源”面板中单击“模板”图标，找到要应用的模板。将模板从面板拖到“文档”窗口中。或者选中模板，单击【应用】按钮。 2.编辑网页。 实训七 网页布局设计 一、实训目的 1.掌握DreamWeaver 8.0 软件页面属性设置的方法。 2.掌握DreamWeaver 8.0 软件表格布局。 3.掌握DreamWeaver 8.0 软件表格属性的设置。 4.掌握DreamWeaver 8.0 软件层布局。 5.掌握DreamWeaver 8.0 软件框架布局。 二 、实训准备 DreamWeaver 8.0 软件环境。 三、实训内容与实训步骤 （一）表格布局 1.

24、创建“计算机系迎评网”文件夹，然后在该文件夹中创建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.

25、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像素，2

26、5像素，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〉

27、键预览效果。 （二）层布局 1.创建“淮安旅行社登录窗口”文件夹，然后在该文件夹中创建images、css文件夹，并且准备相关的素材。 2.打开Dreamweaver软件，新建网页，并将网页保存到新建的“淮安旅行社登录窗口”文件夹中，网页命名为“default.htm”,设置网页标题为“欢迎淮安旅行社网站”，设置背景颜色为“#F2FFCA”。 3.执行“插入”/“布局对象”/“层”命令。 4.选中所添加的新层，设置左边距为222像素，上边距为69像素，宽为560像素，高为347像素，设置背景图像为“images”文件夹中的“login.gif”。 5.采用步骤三的方式插入新的层

28、，将其拖放到适当的位置。 6.将素材文件夹中的dltest.htm网页的表格复制插入到层2中，采用步骤3的方式插入新的层，将其拖放到层2的下方，并在其中输入“Copyright @ 2003-2008 版权所有 淮安游行社”，将网页保存，预览网页效果。 （三）框架布局 1.设定这个主页是上下结构，下面又分为左右结构，上方框架显示网站主体信息，左方框架显示导航页面，右侧框架显示主内容。 2.首先利用Dreamweaver软件创建新的网页，创建“上方固定，左侧嵌套”的框架集。 3.创建完成后，保存框架在所提供的素材文件夹中，命名为“index.htm”，标题为“图形图像处理专题学习网站”

29、，执行“窗口”/“框架”命令。 4.单击“框架”面板中的上侧框架，在属性中“源文件”后点击【浏览文件】按钮,在弹出的“选择HTML文件”对话框中选择“top.htm”页面。 5.同理，点击框架面板的左侧框架，在属性面板中“源文件”后单击【浏览文件】按钮，在弹出的“选择HTML文件”对话框中选择页面“left.htm”, 点击“框架”面板的右侧主框架，在“属性”面板中“源文件”后点击【浏览文件】按钮，在弹出的“选择HTML文件”对话框中选择页面“right.htm”。 6.用鼠标调整框架集中间的边框使其合理，然后保存此框架网页。 实训八 CSS样式表

30、 一、实训目的 1.掌握DreamWeaver 8.0建站的基本方法。 2.了解CSS的创建方法。 3.掌握css的使用方法。 二、实训准备 DreamWeaver 8.0软件环境。 三、实训内容与实训步骤 （一）创建新样式表 1.启动Dreamweaver 8.0，新建一张空白网页。 2.选择“窗口”/“CSS样式”命令，或者通过显示导航栏，选择“设计”面板中的CSS样式表来启动CSS样式面板。 3.单击CSS样式表面板右下角的【新建CSS样式】按钮。 4.在弹出的“新建CSS样式”对话框中进行如下设置： l 名称：输入mycss1。 l 选择器类型：选择类（可用

31、于任何标签）。 l 定义在：选中仅对于该文档。 5.单击【确定】按钮在弹出的“CSS样式定义”对话框中将分类选定为第一项“类型”，选定后右边将显示类型的属性参数。然后进行如下设置。 字体：黑体，大小：24px，样式：斜体，颜色：#FF0000 6.单击【确定】按钮，在CSS样式面板中会出现一个新的项mycss1，这就是刚才新建的CSS样式。 (二)链接外部样式表 1.在DreamWeaver 8.0打开实训七所做的“计算机系迎评网”网页。 2.打开“CSS样式面板”。单击“CSS样式面板”底部的【附加样式表】功能按钮（或者右键单击“CSS样式面板”，在弹出的快捷菜单中选择“附加样

32、式表”命令），打开“链接外部样式表”对话框。 3.在“链接外部样式表”对话框上的“文件/URL”域中输入所需的文件，或者单击后面的【浏览】按钮，在弹出的对话框中查找并选择CSS.css样式表文件。 4.在“添加为”域中选择“链接”或“导入”指定和创建用于将CSS.css样式附加到文档的标签。 5.完成后单击【确定】按钮即可将所选择的CSS样式表附加到当前文档，在CSS样式面板中显示该CSS样式表，完成对该网页的美化。 实训九 Flash Swish动画设计案例 一、实训目的 1.认识Flash Swish MX软件的界面。 2.了解术语影片、场景、时间线、影格、

33、脚本、精灵等。 3.掌握选择工具的使用方法。 4.掌握铅笔工具的使用方法。 5.掌握曲线工具的使用方法。 6.掌握文本工具的使用方法。 7.掌握适合场景于窗口按钮的使用。 8.掌握插入图像、按钮的方法。 9.掌握添加脚本的方法。 10.掌握插入内容的方法。 11.掌握对各种属性的设置。 二、实训准备 Flash Swish MX 软件环境。 三、实训内容与实训步骤 （一）文本动画 1.打开Swish软件，点击【开始新建一个空电影】按钮，在场景中创建一个电影，在影片属性中输入宽为776像素，高为149像素。 2.点击工具栏中的按钮，执行“插入”/“文本”命令，然后在

34、文本输入区中输入“用户至上 服务第一”等字，调整文字的位置。 3.在场景中选中“用户至上 服务第一”文字对象，执行“添加脚本”/“核心效果”/“变形”命令。 4.在控制栏中点击【播放】按钮测试一下动画效果，发现文字动画消失时过于突然，所以，点击【停止】按钮停止动画，用鼠标在“时间线”调板上的第50帧上点击右键执行“渐近”/“淡出”命令。 5.执行“文件”/“导出”/“swf”命令，即可弹出“导出为swf”对话框，选择路径，输入文件名即可保存。 (二)网页应用 1.启动Dreamweaver8.0软件，创建一个空网页并与刚制作的动画保存在同一目录中命名为“test.htm”，设置页

35、面属性设置标题为“透明动画测试”，上下左右边距为0。 2.在网页中插入一行一列的表格，设置表格的宽为776像素、高为149像素；填充、间距和边框都为0、背景图像qj.jpg、居中对齐。 3.将光标插入表格中，然后执行“插入”/“媒体”/“Flash”命令，在弹出的“选择文件”对话框中选择“dhbj.swf”（刚制作的动画）动画。 4.选择动画在“属性”面板中点击【参数】按钮，设置“参数”选项为wmode，值为transparent。 5.保存网页。执行“文件”/“保存”命令，执行“文件”/“在浏览器中预览”/“iexplore”命令（快捷键〈F12〉）预览网页。 (三)贺卡的制作

36、1.启动Swishmax，在“电影”标签中设置宽度为540像素，高度为400像素，背景颜色为白色，帧率为12；然后点击点击版面左下角的“适合场景于窗口”按钮，使场景布满窗口。 2.单击工具栏上的“插入/图像”命令，将“back.gif”图片插入到场景中，用鼠标将它拖至场景的右下角。选中该图片，用鼠标单击时间轴的0帧处，选择“添加效果→模糊”。 3.接着单击“插入/图像”命令，将“hb10.jpg”插入到场景中，调整顺序，将它放到“back.gif”的下方，用鼠标选中图片后适当向下拖动。在时间轴的第10帧处选择“添加效果”/”淡入”即可。 4.单击“插入”/”文本”，新增一个文本物件“生日

37、快乐”，在右侧的文本设置中，设置字体为“华文细黑”，大小为100，粗体，黑色，并将它拖到场景的顶部。 5.选中场景1中的“生日快乐”，在第20帧处“添加效果”/”3D旋转”，在“3D旋转”标签中，修改“持续”为“20帧”，在第40帧处“添加效果”/”波浪”。 6.单击工具栏上的“插入/图像”命令，插入“gift.jpg”，然后在第30帧处“插入效果”/”滑入”/”从左”。 7.选中场景1中的“生日快乐”文本，选择工具栏上的“复制→粘贴”，在右侧的文本设置中，设置字体颜色为“灰色”，再将此物件移到第一个“生日快乐”之下，并适当向右下方拖曳，使第一个“生日快乐”在移动过程中产生阴影的效果

38、。 8.插入图片“bg.gif”，并做适当调整，在时间轴第70帧处选择“添加效果”/“移动”，在效果的最后一帧右击，点击弹出菜单中的属性，设置Alpha值为到透明。 9.新插入一个文本物件，写上你祝福的话，设置字体颜色为红色。 10.在时间轴第70帧处“添加效果”/“漩涡”，设定漩涡的方向为“向内旋转”，重心和中点都为“左下”，这样，祝福的话语就像是从左下方的礼品盒中跑出来一样。 11.选取场景1，在时间轴的0帧处，“插入”/“内容”，导入“birthday.mp3”音乐。至此这个生日贺卡就做好了，把它导出成SWF文件。 实训十 英语素材库备课辅助系统主页制作实例 一

39、、实训目的 1.通过实例掌握DreamWeaver 8.0软件的使用技巧。 2.通过实例掌握Photoshop CS软件路径的使用技巧。 3.通过实例掌握ImageReady CS软件翻转效果的使用技巧。 4.通过实例掌握Photoshop CS软件图层样式的深入使用。 5.通过实例掌握DreamWeaver 8.0网站的开发过程。 二、实训准备 1.DreamWeaver软件环境。 2.Photoshop 软件环境。 三、实训内容与实训步骤 1.打开Photoshop软件，新建文件命名为“英语素材库备课辅助平台”，大小为：770*430Pixel，同时打开素材文件夹中的“

40、楼.jpg”，将该图片拖到当前的图中去并且放到适当的位置。 2.用钢笔工具沿着楼体的走势绘制弧形路径。 3.新建图层“弧形”，选前景色为与楼体类似的蓝色，回到路径面板中点击描边按钮，即可得到一条清晰而平滑的曲线。 4.双击“弧线”图层，给弧线增加投影效果。 5.打开素材文件夹中的“1-6.jpg”，将这些图片拖到当前的图中去并且放到适当的位置。 6.将以上六个小图连接起来后，合并这些图层，再给他们增加阴影效果。 7.用文字工具添加“英语素材库辅助备课平台”文字，颜色设置为：F6530B，字体大小为24pixel。 8.用文字工具添加“E-Prepare”文字，颜色设置为：F653

41、0B，字体大小为60pixel，点击编辑菜单后选择“自由变换”工具将“E-Prepare”调整。 9.将“E-Prepare”文字复制一层，底层颜色设置为：897DA3，再通过向下和向右箭头分别移动2pixel，而上层文字增加图层样式。 10.用文字工具增加“图像资源”等，字12pixel，颜色白色，设置外发光效果。 11.通过抓屏到其他网页中抓取一个含有“按钮”和“文本框”的图片，然后再添加“用户名”和“密码”字样。 12.打开ImageReady软件，制作 “图像资源”层的翻转效果。 13.点击“文件”菜单对效果图进行输出保存，命名为“index.html”。 14.用Drea

42、mWeaver 8.0打开上图后，插入表格为1行1列，宽度为100%，高度为100%。 15.设置表格为垂直的居中对齐，水平的居中对齐。 16.用DreamWeaver 8.0制作图片的翻转效果。 17.制作完成后，提交保存作业。 实训十一 淮信科技有限公司培训中心网站建设实例 一、实训目的 1.通过实例掌握DreamWeaver 8.0软件的使用技巧。 2.通过实例掌握DreamWeaver 8.0软件表格布局的使用技巧。 3.通过实例掌握Flash透明动画的制作技巧。 4.通过实例掌握DreamWeaver 8.0网站的开发过程。 5.通过实例掌握网页满屏效果

43、的制作。 二、实训准备 1.DreamWeaver软件环境。 三、实训内容与实训步骤 1.创建“淮信科技有限公司培训中心网站”文件夹，在文件夹中创建“images”、“flash”等文件夹，根据需要，处理相关的图片并保存到“images”文件夹中。 2.打开Dreamweaver软件创建新网页，并将其保存到“淮信科技有限公司培训中心网站”文件夹中，命名为“index.htm”，然后设置“页面属性”中“网页标题”为“欢迎访问淮信科技有限公司培训中心网站”，背景色为白色，上、下、左、右边距为0像素。 3.在网页中插入表格，具体参数为1行3列，宽为100%，高为65像素，填充、间距、边框

44、都为0像素。分别设置三列的宽度为20%，60%，20%。 4.分别将“head.gif”、“topmid.jpg”、“headright.gif”插入到表格的第1个单元格、第2个单元格和第3个单元格中。 5.插入新表格，具体参数为1行1列，宽为100%，高为160像素，填充、间距、边框都为0像素。将光标插入到单元格中，然后设置表格的背景图为“mid.jpg”。 6.继续插入表格，具体参数为3行1列，宽为100%，填充、间距、边框都为0像素。将光标插入到第1个单元格中，设置背景色为“#243569”。高度设为1像素，同时插入“space.gif”到该单元格，第3个单元格设置和第一个相同，设

45、置第2个单元格的背景色为“#E3E3E3”。 7.在第2个单元格中嵌套新表格，具体参数为1行7列，宽为720，高25像素，填充、边框为0像素，间距为1像素，背景色为白色，然后设置表格单元格的背景色为“#E3E3E3”，依次给单元格中输入“首页”、组织架构”、“学习型班组”、“信息交流”、“组织创建”、“图片浏览”、“关爱社会”等文字，并设置他们的超级链接地址为“index.htm”。 8.再次在网页中插入表格，具体参数为1行2列，宽为100%，填充、间距、边框都为0像素。第1列列宽为20%，第2列列宽为80%。 9.在第1列中嵌套一个6行2列的表格，宽为100%。设置1、3、5行中的两列

46、宽分别为30%和70%，高为28像素，背景色为“#E3E3E3”。并在1、3、5行中第1列插入图片“left.jpg”，第2列依次插入“文档搜索”、“分类显示”、“友情链接”。将第2、4、6行合并单元格，单元格的高依次为100像素、80像素、30像素。 10.在第2行中插入表格3行2列，宽100%，高90像素。第1行的第一个单元格中输入“检索内容”，第2个单元格中插入文本字段；第2行的第1个单元格中输入“文件类型”，第2个单元格中插入列表/菜单，第3行的第1个单元格中插入查询按钮，第2个单元格中插入重置按钮。 11.在第4行中插入表格2行2列，宽70%，高80%。依次在四个单元格中插入“全

47、部文档”、“组织管理”、“规章制度”、“流程管理”，并设置他们的超级链接为“index.htm”。将光标插在第6行中，然后插入“淮安电信互动学习网”。 12.在右边的单元格中嵌套新表格，具体参数为1行7列，宽为771像素，填充、间距、边框为0像素，背景色为白色，采用第7步制作横线的方式，将第2、4、6列宽设置为1像素，背景色设置为“#CCCCCC”，并在其中插入“space.gif”图片。设置第1、3、5、7列宽为192像素。 13.在第1列中嵌套新表格，具体参数为4行1列，宽为177像素，在第1行中插入“pix03.jpg”，第2行中插入“pix003.jpg”，第3行中插入“淮信科技有

48、限公司培训中心，是多…….”，第四行中插入“...more”等内容。采用同样的方法设置第3、5、7列。 14.最后，在网页中插入表格，具体参数为2行1列，宽为100%。采用第7步制作横线的方法制作背景色为“#233468”的横线，第2行行高为60像素，插入相关的版权信息，在“设计”调板中附加css文件夹中的“css.css”样式表，然后保存网页，执行“文件” /“在浏览器中预览”/“iexplore”（快捷键〈F12〉）命令预览网页。 实训十二 淮安信息职业技术学院网站建设实例

49、一、实训目的 1.通过实例掌握Photoshop CS软件多边形套索工具的复杂使用技巧。 2.通过实例掌握Photoshop CS软件路径的使用技巧。 3.通过实例掌握Photoshop CS软件精确定位技巧。 4.通过实例掌握DreamWeaver 8.0软件中满屏制作的使用技巧。 二、实训准备 1.DreamWeaver 8.0软件环境。 2.Photoshop CS软件环境。 三、实训内容与实训步骤 1.新建文件命名为“淮安信息职业技术学院”，大小为：770*430Pixel。 2.使用“矩形选框工具”选取矩形选区，填充深蓝色（#0859AD）。 3.打开素材文件夹

50、，找到“实训楼”图片，用椭圆工具将主楼选中,用“多边形套索工具”减去局部。 4.将所选择的楼主体复制并粘贴到新图中，然后执行“编辑/自由变换”命令，调整图像的大小（注意要保持图像的等比例变化）。 5.给楼图层增加投影样式效果。 6.用椭圆工具，绘制椭圆路径，执行“编辑/自由变换”命令，对其进行大小调整与旋转转换。同理绘制第二个椭圆。新建一个图层，设置前景色为浅蓝色，回到路径面板选择路径后点击描边按钮。 注意：路径必须先调整大小和旋转后再进行描边，否则会出现明显得锯齿。 7.新建图层，使用“椭圆选框工具”在图层中画一个适中的小圆圈，前景色设置为#0859AD，用“渐变工具”填充这个小圆

51、。复制该图层，复制同样的小圆图层4次，再将这几层相连接起来，对这几层进行排列。 注意：为了精确定位，辅助线，标尺，排列等手段经常用到。 8.将5个圆圈图层合并，对以此图层增加投影效果。 9.打开院标与院名文件，将院名和院标拖到效果图中，放到适当的位置。 10.增加“Huaian College of Information”的文字层，增加一单横线层。 11.用文字工具在左起第一个小球下写入“新区建设”等。 12.用矩形工具绘制一个大矩形，填充为蓝色，再在其中减去一个小矩形，减去右上的一小部分，就可得到一个新闻框图，对该框图层增加阴影效果。 13.用ImageReady 打开“淮安

52、信息职业技术学院”效果图，用切刀工具对效果图进行切片，第一刀以蓝白交界线为界。 14.对对院标、院名以及导航部分都进行分割，对有超级链接的部分进行切割。 15.选择“文件”菜单下的“最优化保存”，将文件输出为index.html。 16.在Dreamweaver 8.0中插入一个表格2行1列，宽与高位100%，水平对齐方式为居中。 17.将生成网页的蓝色部分放到表格的第一行中。 18.将生成网页的白色部分放到表格的第二行中。 实训十三 淮安信息职业技术学院网络中心网站 一、实训目的 1.通过实例掌握DreamWeaver 8.0软件的使用技巧。 2.通过实例掌握Drea

53、mWeaver 8.0网站的开发过程。 3.通过“淮安信息职业技术学院网络中心网站”的制作掌握事业性单位网站的基本风格。 4.掌握DreamWeaver 8.0中网站站点的定义。 5.掌握网站模板的制作。 二、实训准备 1.DreamWeaver软件环境。 三、实训内容与实训步骤 1.创建文件夹“淮安信息职业技术学院网络中心网站”，新建一个网页文件并保存为“default.htm”。设置页面属性，标题为“欢迎访问淮安信息职业技术学院网络中心网站！”，背景颜色为白色，同时将左、右、上、下边距都设置为0像素。 2.在网页中插入表格，具体参数不1行2列，宽为100%，高为70像素。选

54、中所插入的表格，然后设置背景颜色为“#891619”，设置左列宽度为：70%，右列宽度为30%。 3.在“CSS”样式面板中单击“附加样式表”，选择images文件夹下的“style.css”文件，单击“确定”按钮。 4.将“logo.gif”插入左表格、“right.gif”图片插入右表格中，右表格设为右对齐。 5.制作横向滚动效果，对表格中插入“表单”。 6.在插入“表格”设置背景颜色为“#666666”，设置bordercolordark="#000000" bordercolorlight="#FFFFFF"，插入内容，设置超级链接。 7.选中“主页”所在的单元格，进入代码

55、视图，然后在“主页”所在的标签中添加行为onmouseover、onmouseout增加导航栏的效果，将同样的效果添加到其他的导航中。 8.插入“表格”3行1列，设置第一行背景色为：#ffe9e8，设置第二行的背景色为：#ae002c，第三行的背景色为白色，然后分别将图片名为：space.gif插入第1、2、3行中，最后设置第一行的高度为5pixel，第二行的高度为1pixel，第三行的高度为16pixel。 9.插入“表格”1行5列，设置各列的宽度与背景颜色。 10.对每一表格中插入相关的内容。 11.新建站点“webcenter”。 12.将主页另存为“模板”，命名为“conte

56、nt”。 13.在右侧表格插入“模板对象”的“可编辑区域”，名称“xwbt”。 14.在模板中插入4行3列的表格，输入相应的内容后保存。 15.新建一个网页，另存为“test.htm”,点击“修改”下的“模板”中的“套用模板到页”，选中“xwbt”模板。 16.采用普通方式制作淮安信息职业技术学院网络中心内容页面。 17.制作完成后，提交保存作业。 实训十四 维达制造有限公司主页设计实例 一、实训目的 1.通过实例掌握Photoshop CS软件滤镜的使用技巧。 2.通过实例掌握Photoshop CS软件自由变换的使用技巧。 3.通过实例掌握DreamWea

57、ver 8.0软件的使用技巧。 4.通过实例掌握网站的开发过程。 二、实训准备 1.Photoshop CS软件环境。 2.DreamWeaver8.0软件环境。 三、实训内容与实训步骤 1.新建一个RGB文件，宽度为778像素，高度为450像素，分辨率为72dpi。 2.填充背景色为蓝色，新建一图层，并在画面的左侧做出从大到小的小圆。 3.填充白色操作，然后设置不透明度50%左右，复制上面这个有小圆圈的图层，然后在“编辑/变换/水平翻转”，调整位置到画面的右侧。 4.导入素材图片logo.jpg，调整图片大小，增加样式。 5.新建图层，利用“图形工具”做出圆角矩形的区域，

58、并用深蓝色填充。 6.制作单点图章，使用图章工具，排列到刚填充的深蓝色区域。 7.复制矩形图形，进行 “选择/修改/收缩”，然后在弹出一个对话框中设置收缩量为5像素。 8.用文字工具，输入“维达制造” 9.用“编辑/变换/斜切”对文字进行倾斜。 10.复制文字层，对齐图形化，“选择/载入选区/扩展”，在弹出的对话框中输入“3”，填充为白色。 11.给这个层做一个被风吹动的效果：“滤镜/风格化/风”。 12.首先在白色区域的左上角，用宋体打字“……” 13.在右上角做导航条，栏目设定就根据企业所需而建。 14.新建图层，画一个矩形框。选择一种灰色，作为边框，执行“编辑/描边”。

59、 15.选择两幅图片放入虚框中（蓝天.jpg和世界地图.jpg）。 16.选择企业相关的图片数幅，大小为32*32像素，对其进行排列。 注意：背景图案制作的过程最好采用图案图章工具进行制作，重点是图案的定义与运用，同时也可以用到小点背景的制作过程中。 虚线的制作，可以通过省略号制作，也可以通过定义画笔工具来制作。注意图层样式的使用，图层样式是用的不同。 17.制作“维达制造”中的Gif动画效果。 18.对“维达制造”效果图进行输出切片。 19.对“维达制造”输出的网页进行后期加工。 20.制作完成后，提交保存作业。 实训十五 淮安信息职业技术学院教学工作评建网 一

60、、实训目的 1.通过实例掌握Photoshop CS软件图层的层叠模式使用技巧。 2.通过实例掌握Photoshop CS软件色彩调节的使用技巧。 3.通过实例掌握DreamWeaver 8.0软件的使用技巧。 4.通过实例掌握DreamWeaver 8.0网站的开发过程。 二、实训准备 1.DreamWeaver8.0软件环境。 2.Photoshop CS软件环境。 三、实训内容与实训步骤 1.创建文件夹“淮安信息职业技术学院教学工作评建网”，创建“images”文件夹，并将制作的相关图片保存到“images”文件夹中，然后用Dreamweaver新建一个网页文件并保存为

61、“default.htm”。 2.设置“页面属性”中“网页标题”为“欢迎访问淮安信息职业技术学院教学工作评建网！”，背景色为白色，上、下、左、右边距为0像素，设置背景图像为“bg.jpg”。 3.在网页中插入表格，具体参数为2行2列，宽为776像素，高86像素。选中所插入的表格，然后在属性栏中设置背景颜色为“#ffffff”(白色)，通过拆分或合并单元格最终得到一个第1列为1行1列、第2列的第1行为7列第2行为1行1列的表格。 4.在“CSS”样式面板中点击【附加样式表】按钮，选择images文件夹下的“style.css”文件点击【确定】按钮。 5.鼠标点击左侧的空格， 在工具栏中点

62、击【插入图片】按钮，选中“top1.jpg”图片，然后再将“top2.jpg”插入到右边的表格中，最后再将右边的表格的水平对其方式设置为“右对齐”，依次在又上角插入“top11.jpg”、“top12.jpg”、“top13.jpg”三张小图片与对应的“学院主页”、“教务在线”、“联系我们”文字并设置超级链接。 6.继续插入表格，参数设置为：宽776像素，高30像素，1行8列，居中对齐，设置表格的背景图像为“dhbg.jpg”。依次在前7个表格中插入“网站首页”、“组织机构”、“评估文件”、“评建动态”、“迎评简报”、“评建知识”、“他山之石”等模块名称，在第8个单元格中插入“离教学工作评估

63、还有200 天”的文字，。设置“离教学工作评估还有200 天”的样式为：“pg”，然后在单独设置“200”的样式为：“pgred”。 7.继续在网页中插入表格，具体的参数设置为：宽776像素，高149像素，1行1列，居中对齐。鼠标在表格中点击一下，然后执行“插入” →“媒体” →“Flash”命令，然后选中flash文件夹中的“dh.swf”文件，点击【确定】按钮即可。 8.接着插入表格，具体参数设置为：宽776像素，高200像素，1行2列，填充、间距、边框都为0，居中对齐。然后设置两个单元格垂直方向：顶端对齐，第1个单元格宽为590像素，第2个单元格宽为186像素。 9.鼠标电击左边的

64、单元格，然后再表格中插入新的表格，具体参数设置为：宽590像素，2行2列，填充、间距、边框都为0。然后将第1行的两个单元格合并，并设置高为26像素，将“left.jpg”图片插入到其中。依次在设置第2行的左单元格宽242像素，插入相关的图片与文字，有单元格宽348像素，并在其中嵌套新的表格，插入相关的小图片和文本。 10.设置“评建动态”右方的单元格的背景图为“rightbg.jpg”，并在其中嵌套新的表格，具体参数为：3行3列，宽186像素，填充、间距、边框都为0。将第1行的3个单元格合并，设置高为26像素，然后在其中插入“right1.jpg”(评建通知模块图片)，设置第2行的高为150

65、像素，设置第2行第2个单元格的宽为170像素，然后在其中嵌套新的表格，并插入相关的文字，在第3行第2个单元格中插入图片“more.jpg”（表示更多通知的图片）。 11.制作“评估文件”、“评建知识”、“评估简报”模块的制作方式是，继续插入表格，具体参数为：宽776像素， 1行3列，三列的具体宽度为300像素、290像素、186像素，填充、间距、边框都为0，居中对齐。 12.在宽为300像素的表格中，插入2行1列的表格，宽也为300像素，设置第1行行高为29像素，设置该单元格的背景图为“midleft.jpg”，然后在其中插入新的表格1行2列，宽300像素，第1个单元格中插入“评估文件”，

66、第2个单元格中插入图片“morecolor.gif”。在第2行中插入新的表格，并插入“评估文件”相关的文本。 13.“评建知识”模块的制作与“评估文件”模块类似，但要设置所在单元格的背景图为：“midbg.jpg”（用来制作模块的分割虚线）。“评估简报”模块也需要设置其所在单元格的背景图为：“rightbg.jpg”，插入相关的文字后。 14.“组织机构”、“他山之石”、“友情链接”模块与以上的“评估文件”、“评建知识”、“评估简报”模块的制作方式一样，在此不做阐述。 14.最后制作“版权信息”模块，继续插入表格，具体参数设置为：宽776像素，高100像素，2行1列，填充、间距、边框都为0，居中对齐。然后在第1个单元格中插入相关的版权信息。 实训十六 网页设计中的界面的借鉴与创新实例 一、实训目的 1.通过实例掌握Photoshop CS软件图层的使用技巧。 2.通过实例掌握Photoshop CS软件色彩调节的使用技巧。 3.通过实例掌握DreamWeaver 8.0软件的使用技