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

网页制作与网站设计课程实训指导书系部：_专业：_班级： _学号： _姓名：_淮安信息职业技术学院实训号实训名称60课时采用页码实训1Photoshop常用工具的使用4实训2Photoshop图层与色彩调整5实训3Photoshop蒙版、路径的使用6实训4ImageReady 的网络功能的使用6实训5Dreamweaver使用入门7实训6Dreamweaver中建站与模板的使用8实训7网页布局设计9实训8CCS样式表10实训9Flash Swish动画设计案例11实训10英语素材库备课辅助系统主页制作实例12实训11淮信科技有限公司培训中心网站建设实例13实训12淮安信息职业技术学院网站建设实例14实训13淮安信息职业技术学院网络中心网站15实训14维达制造有限公司主页设计实例16实训15淮安信息职业技术学院教学工作评建网17实训16网页设计中的界面的借鉴与创新实例18实训17IIS的配置与表单技术，动态网页中的参数传递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. Photoshop CS软件环境。三、实训内容与实训步骤（一）图像修改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.Photoshop CS软件环境。三、实训内容与实训步骤（一）雕刻文字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.Photoshop CS软件环境。三、实训内容与实训步骤（一） 蒙版的实例应用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.认识Adobe ImageReady CS软件的界面。2.掌握GIF动画的制作方法。3.掌握切片的制作、编辑与导出。4.掌握翻转状态的制作。5.掌握远程切片的制作。6.掌握网页图像的优化和Web页面的输出方法。二 、实训准备1.Photoshop CS软件环境。2.ImageReady CS软件环境。三、实训内容与实训步骤（一）GIF动画的制作1.先在Photoshop中创建所需要呈现动画效果的图像。但需要注意的是，静态元素不能与动态元素放置在同一层中，而必须单独创建一个图层。2.存储文件，然后执行“文件”/“在ImageReady中编辑”命令，ImageReady应用程序将打开显示该图像。接着在ImageReady中进行下面的操作。3.单击“动画”选项卡使“动画”调板出现在前面。如果该调板未打开，可以通过执行“窗口”/“动画”命令将其打开。4.单击“图层”选项卡使“图层”调板出现在前面。如果该调板未打开，可以通过执行“窗口”/“图层”命令将其打开。调整“图层”调板和“动画”调板的位置，以便看到文档窗口的一部分以及这两个调板。5.单击“动画”调板底部的“复制当前帧”按钮添加下一帧。在“图层”调板中，根据这一帧的需要调整各个图层的可见性。继续添加新的帧，并根据需要隐藏或显示各个图层。6.创建完所有的动画帧后，单击“动画”调板底部的【播放】按钮预览动画。单击【停止】按钮可停止播放。设定帧延时。7.GIF动画的保存。点击菜单“文件将优化结果存储为”命令，打开优化结果存储为对话框，按照以下设置，然后点击保存按钮就可以得到GIF动画。（二）ImageReady网络切片与导出实例1.在Photoshop cs中将图片做好，导入ImageReady cs中。2.选择“切片工具”对图片进行切片。3.选择“切掉选择工具”点击图片，选中切片，给切片做翻转状态和远程切片。4.执行“文件”/“存储为Web所有格式”命令，打开优化对话框，进行优化。5.保存文件。单击“存储为Web所有格式”对话框中的“存储”按钮，打开“将优化结果存储为”对话框，在“保存类型”下拉列表中选择“HTML和图像”选项，在“切片”下拉列表中选择“所有切片”，“设置”用“默认设置”，在“文件名”文本框中给HTML取个名称（index.html）,然后单击【保存】按钮。实训五 DreamWeaver入门一、实训目的1.了解DreamWeaver 8.0软件的用途。2.掌握DreamWeaver 8.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软件环境。三、实训内容与实训步骤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.使用DreamWeaver 8.0制作图片的交换效果。10.使用DreamWeaver 8.0插入表格。设置表格的宽度、高度、行数、列数、背景颜色与背景图片。设置表格的bordercolordark与bordercolorlight属性。注意：设置宽度和高度时的百分制表示方式。11.使用表格进行图片混排。12.举例演示DreamWeaver 8.0页面设置的方法。13.使用DreamWeaver 8.0插入Flash动画。14.通过实例使用Flash动画的透明属性。15.摸仿制作实例，交作业。实训六 DreamWeaver建站与模板的使用一、实训目的1.掌握DreamWeaver 8.0建站的基本方法。2.模版的创建。3.模版的调用方法。4.简单使用模板。二、实训准备DreamWeaver 8.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.掌握DreamWeaver 8.0 软件页面属性设置的方法。2.掌握DreamWeaver 8.0 软件表格布局。3.掌握DreamWeaver 8.0 软件表格属性的设置。4.掌握DreamWeaver 8.0 软件层布局。5.掌握DreamWeaver 8.0 软件框架布局。二 、实训准备DreamWeaver 8.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.掌握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 选择器类型：选择类（可用于任何标签）。l 定义在：选中仅对于该文档。5.单击【确定】按钮在弹出的“CSS样式定义”对话框中将分类选定为第一项“类型”，选定后右边将显示类型的属性参数。然后进行如下设置。字体：黑体，大小：24px，样式：斜体，颜色：#FF00006.单击【确定】按钮，在CSS样式面板中会出现一个新的项mycss1，这就是刚才新建的CSS样式。(二)链接外部样式表1.在DreamWeaver 8.0打开实训七所做的“计算机系迎评网”网页。2.打开“CSS样式面板”。单击“CSS样式面板”底部的【附加样式表】功能按钮（或者右键单击“CSS样式面板”，在弹出的快捷菜单中选择“附加样式表”命令），打开“链接外部样式表”对话框。3.在“链接外部样式表”对话框上的“文件/URL”域中输入所需的文件，或者单击后面的【浏览】按钮，在弹出的对话框中查找并选择CSS.css样式表文件。4.在“添加为”域中选择“链接”或“导入”指定和创建用于将CSS.css样式附加到文档的标签。5.完成后单击【确定】按钮即可将所选择的CSS样式表附加到当前文档，在CSS样式面板中显示该CSS样式表，完成对该网页的美化。实训九 Flash Swish动画设计案例一、实训目的1.认识Flash Swish MX软件的界面。2.了解术语影片、场景、时间线、影格、脚本、精灵等。3.掌握选择工具的使用方法。4.掌握铅笔工具的使用方法。5.掌握曲线工具的使用方法。6.掌握文本工具的使用方法。7.掌握适合场景于窗口按钮的使用。8.掌握插入图像、按钮的方法。9.掌握添加脚本的方法。10.掌握插入内容的方法。11.掌握对各种属性的设置。二、实训准备Flash Swish MX 软件环境。三、实训内容与实训步骤（一）文本动画1.打开Swish软件，点击【开始新建一个空电影】按钮，在场景中创建一个电影，在影片属性中输入宽为776像素，高为149像素。2.点击工具栏中的按钮，执行“插入”/“文本”命令，然后在文本输入区中输入“用户至上 服务第一”等字，调整文字的位置。3.在场景中选中“用户至上 服务第一”文字对象，执行“添加脚本”/“核心效果”/“变形”命令。4.在控制栏中点击【播放】按钮测试一下动画效果，发现文字动画消失时过于突然，所以，点击【停止】按钮停止动画，用鼠标在“时间线”调板上的第50帧上点击右键执行“渐近”/“淡出”命令。5.执行“文件”/“导出”/“swf”命令，即可弹出“导出为swf”对话框，选择路径，输入文件名即可保存。(二)网页应用1.启动Dreamweaver8.0软件，创建一个空网页并与刚制作的动画保存在同一目录中命名为“test.htm”，设置页面属性设置标题为“透明动画测试”，上下左右边距为0。2.在网页中插入一行一列的表格，设置表格的宽为776像素、高为149像素；填充、间距和边框都为0、背景图像qj.jpg、居中对齐。3.将光标插入表格中，然后执行“插入”/“媒体”/“Flash”命令，在弹出的“选择文件”对话框中选择“dhbj.swf”（刚制作的动画）动画。4.选择动画在“属性”面板中点击【参数】按钮，设置“参数”选项为wmode，值为transparent。5.保存网页。执行“文件”/“保存”命令，执行“文件”/“在浏览器中预览”/“iexplore”命令（快捷键F12）预览网页。(三)贺卡的制作1.启动Swishmax，在“电影”标签中设置宽度为540像素，高度为400像素，背景颜色为白色，帧率为12；然后点击点击版面左下角的“适合场景于窗口”按钮，使场景布满窗口。2.单击工具栏上的“插入/图像”命令，将“back.gif”图片插入到场景中，用鼠标将它拖至场景的右下角。选中该图片，用鼠标单击时间轴的0帧处，选择“添加效果模糊”。3.接着单击“插入/图像”命令，将“hb10.jpg”插入到场景中，调整顺序，将它放到“back.gif”的下方，用鼠标选中图片后适当向下拖动。在时间轴的第10帧处选择“添加效果”/”淡入”即可。4.单击“插入”/”文本”，新增一个文本物件“生日快乐”，在右侧的文本设置中，设置字体为“华文细黑”，大小为100，粗体，黑色，并将它拖到场景的顶部。 5.选中场景1中的“生日快乐”，在第20帧处“添加效果”/”3D旋转”，在“3D旋转”标签中，修改“持续”为“20帧”，在第40帧处“添加效果”/”波浪”。6.单击工具栏上的“插入/图像”命令，插入“gift.jpg”，然后在第30帧处“插入效果”/”滑入”/”从左”。 7.选中场景1中的“生日快乐”文本，选择工具栏上的“复制粘贴”，在右侧的文本设置中，设置字体颜色为“灰色”，再将此物件移到第一个“生日快乐”之下，并适当向右下方拖曳，使第一个“生日快乐”在移动过程中产生阴影的效果。8.插入图片“bg.gif”，并做适当调整，在时间轴第70帧处选择“添加效果”/“移动”，在效果的最后一帧右击，点击弹出菜单中的属性，设置Alpha值为到透明。9.新插入一个文本物件，写上你祝福的话，设置字体颜色为红色。10.在时间轴第70帧处“添加效果”/“漩涡”，设定漩涡的方向为“向内旋转”，重心和中点都为“左下”，这样，祝福的话语就像是从左下方的礼品盒中跑出来一样。11.选取场景1，在时间轴的0帧处，“插入”/“内容”，导入“birthday.mp3”音乐。至此这个生日贺卡就做好了，把它导出成SWF文件。实训十 英语素材库备课辅助系统主页制作实例一、实训目的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，同时打开素材文件夹中的“楼.jpg”，将该图片拖到当前的图中去并且放到适当的位置。2.用钢笔工具沿着楼体的走势绘制弧形路径。3.新建图层“弧形”，选前景色为与楼体类似的蓝色，回到路径面板中点击描边按钮，即可得到一条清晰而平滑的曲线。4.双击“弧线”图层，给弧线增加投影效果。5.打开素材文件夹中的“1-6.jpg”，将这些图片拖到当前的图中去并且放到适当的位置。6.将以上六个小图连接起来后，合并这些图层，再给他们增加阴影效果。7.用文字工具添加“英语素材库辅助备课平台”文字，颜色设置为：F6530B，字体大小为24pixel。8.用文字工具添加“E-Prepare”文字，颜色设置为：F6530B，字体大小为60pixel，点击编辑菜单后选择“自由变换”工具将“E-Prepare”调整。9.将“E-Prepare”文字复制一层，底层颜色设置为：897DA3，再通过向下和向右箭头分别移动2pixel，而上层文字增加图层样式。10.用文字工具增加“图像资源”等，字12pixel，颜色白色，设置外发光效果。11.通过抓屏到其他网页中抓取一个含有“按钮”和“文本框”的图片，然后再添加“用户名”和“密码”字样。12.打开ImageReady软件，制作 “图像资源”层的翻转效果。13.点击“文件”菜单对效果图进行输出保存，命名为“index.html”。14.用DreamWeaver 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.通过实例掌握网页满屏效果的制作。二、实训准备1.DreamWeaver软件环境。三、实训内容与实训步骤1.创建“淮信科技有限公司培训中心网站”文件夹，在文件夹中创建“images”、“flash”等文件夹，根据需要，处理相关的图片并保存到“images”文件夹中。2.打开Dreamweaver软件创建新网页，并将其保存到“淮信科技有限公司培训中心网站”文件夹中，命名为“index.htm”，然后设置“页面属性”中“网页标题”为“欢迎访问淮信科技有限公司培训中心网站”，背景色为白色，上、下、左、右边距为0像素。3.在网页中插入表格，具体参数为1行3列，宽为100%，高为65像素，填充、间距、边框都为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个单元格设置和第一个相同，设置第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行中的两列宽分别为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%。依次在四个单元格中插入“全部文档”、“组织管理”、“规章制度”、“流程管理”，并设置他们的超级链接为“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行中插入“淮信科技有限公司培训中心，是多.”，第四行中插入“.more”等内容。采用同样的方法设置第3、5、7列。14.最后，在网页中插入表格，具体参数为2行1列，宽为100%。采用第7步制作横线的方法制作背景色为“#233468”的横线，第2行行高为60像素，插入相关的版权信息，在“设计”调板中附加css文件夹中的“css.css”样式表，然后保存网页，执行“文件” /“在浏览器中预览”/“iexplore”（快捷键F12）命令预览网页。实训十二 淮安信息职业技术学院网站建设实例一、实训目的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.打开素材文件夹，找到“实训楼”图片，用椭圆工具将主楼选中,用“多边形套索工具”减去局部。4.将所选择的楼主体复制并粘贴到新图中，然后执行“编辑/自由变换”命令，调整图像的大小（注意要保持图像的等比例变化）。5.给楼图层增加投影样式效果。6.用椭圆工具，绘制椭圆路径，执行“编辑/自由变换”命令，对其进行大小调整与旋转转换。同理绘制第二个椭圆。新建一个图层，设置前景色为浅蓝色，回到路径面板选择路径后点击描边按钮。注意：路径必须先调整大小和旋转后再进行描边，否则会出现明显得锯齿。7.新建图层，使用“椭圆选框工具”在图层中画一个适中的小圆圈，前景色设置为#0859AD，用“渐变工具”填充这个小圆。复制该图层，复制同样的小圆图层4次，再将这几层相连接起来，对这几层进行排列。注意：为了精确定位，辅助线，标尺，排列等手段经常用到。8.将5个圆圈图层合并，对以此图层增加投影效果。9.打开院标与院名文件，将院名和院标拖到效果图中，放到适当的位置。10.增加“Huaian College of Information”的文字层，增加一单横线层。11.用文字工具在左起第一个小球下写入“新区建设”等。12.用矩形工具绘制一个大矩形，填充为蓝色，再在其中减去一个小矩形，减去右上的一小部分，就可得到一个新闻框图，对该框图层增加阴影效果。13.用ImageReady 打开“淮安信息职业技术学院”效果图，用切刀工具对效果图进行切片，第一刀以蓝白交界线为界。14.对对院标、院名以及导航部分都进行分割，对有超级链接的部分进行切割。15.选择“文件”菜单下的“最优化保存”，将文件输出为index.html。16.在Dreamweaver 8.0中插入一个表格2行1列，宽与高位100%，水平对齐方式为居中。17.将生成网页的蓝色部分放到表格的第一行中。18.将生成网页的白色部分放到表格的第二行中。实训十三 淮安信息职业技术学院网络中心网站一、实训目的1.通过实例掌握DreamWeaver 8.0软件的使用技巧。2.通过实例掌握DreamWeaver 8.0网站的开发过程。3.通过“淮安信息职业技术学院网络中心网站”的制作掌握事业性单位网站的基本风格。4.掌握DreamWeaver 8.0中网站站点的定义。5.掌握网站模板的制作。二、实训准备1.DreamWeaver软件环境。三、实训内容与实训步骤1.创建文件夹“淮安信息职业技术学院网络中心网站”，新建一个网页文件并保存为“default.htm”。设置页面属性，标题为“欢迎访问淮安信息职业技术学院网络中心网站！”，背景颜色为白色，同时将左、右、上、下边距都设置为0像素。2.在网页中插入表格，具体参数不1行2列，宽为100%，高为70像素。选中所插入的表格，然后设置背景颜色为“#891619”，设置左列宽度为：70%，右列宽度为30%。3.在“CSS”样式面板中单击“附加样式表”，选择images文件夹下的“style.css”文件，单击“确定”按钮。4.将“logo.gif”插入左表格、“right.gif”图片插入右表格中，右表格设为右对齐。5.制作横向滚动效果，对表格中插入“表单”。6.在插入“表格”设置背景颜色为“#666666”，设置bordercolordark=#000000 bordercolorlight=#FFFFFF，插入内容，设置超级链接。7.选中“主页”所在的单元格，进入代码视图，然后在“主页”所在的标签中添加行为onmouseover、onmouseout增加导航栏的效果，将同样的效果添加到其他的导航中。8.插入“表格”3行1列，设置第一行背景色为：#ffe9e8，设置第二行的背景色为：#ae002c，第三行的背景色为白色，然后分别将图片名为：space.gif插入第1、2、3行中，最后设置第一行的高度为5pixel，第二行的高度为1pixel，第三行的高度为16pixel。9.插入“表格”1行5列，设置各列的宽度与背景颜色。10.对每一表格中插入相关的内容。11.新建站点“webcenter”。12.将主页另存为“模板”，命名为“content”。13.在右侧表格插入“模板对象”的“可编辑区域”，名称“xwbt”。14.在模板中插入4行3列的表格，输入相应的内容后保存。15.新建一个网页，另存为“test.htm”,点击“修改”下的“模板”中的“套用模板到页”，选中“xwbt”模板。16.采用普通方式制作淮安信息职业技术学院网络中心内容页面。17.制作完成后，提交保存作业。实训十四 维达制造有限公司主页设计实例一、实训目的1.通过实例掌握Photoshop CS软件滤镜的使用技巧。2.通过实例掌握Photoshop CS软件自由变换的使用技巧。3.通过实例掌握DreamWeaver 8.0软件的使用技巧。4.通过实例掌握网站的开发过程。二、实训准备1.Photoshop CS软件环境。2.DreamWeaver8.0软件环境。三、实训内容与实训步骤1.新建一个RGB文件，宽度为778像素，高度为450像素，分辨率为72dpi。2.填充背景色为蓝色，新建一图层，并在画面的左侧做出从大到小的小圆。3.填充白色操作，然后设置不透明度50%左右，复制上面这个有小圆圈的图层，然后在“编辑/变换/水平翻转”，调整位置到画面的右侧。4.导入素材图片logo.jpg，调整图片大小，增加样式。5.新建图层，利用“图形工具”做出圆角矩形的区域，并用深蓝色填充。6.制作单点图章，使用图章工具，排列到刚填充的深蓝色区域。7.复制矩形图形，进行 “选择/修改/收缩”，然后在弹出一个对话框中设置收缩量为5像素。8.用文字工具，输入“维达制造”9.用“编辑/变换/斜切”对文字进行倾斜。10.复制文字层，对齐图形化，“选择/载入选区/扩展”，在弹出的对话框中输入“3”，填充为白色。11.给这个层做一个被风吹动的效果：“滤镜/风格化/风”。12.首先在白色区域的左上角，用宋体打字“”13.在右上角做导航条，栏目设定就根据企业所需而建。14.新建图层，画一个矩形框。选择一种灰色，作为边框，执行“编辑/描边”。15.选择两幅图片放入虚框中（蓝天.jpg和世界地图.jpg）。16.选择企业相关的图片数幅，大小为32*32像素，对其进行排列。注意：背景图案制作的过程最好采用图案图章工具进行制作，重点是图案的定义与运用，同时也可以用到小点背景的制作过程中。虚线的制作，可以通过省略号制作，也可以通过定义画笔工具来制作。注意图层样式的使用，图层样式是用的不同。17.制作“维达制造”中的Gif动画效果。18.对“维达制造”效果图进行输出切片。19.对“维达制造”输出的网页进行后期加工。20.制作完成后，提交保存作业。实训十五 淮安信息职业技术学院教学工作评建网一、实训目的1.通过实例掌握Photoshop CS软件图层的层叠模式使用技巧。2.通过实例掌握Photoshop CS软件色彩调节的使用技巧。3.通过实例掌握DreamWeaver 8.0软件的使用技巧。4.通过实例掌握DreamWeaver 8.0网站的开发过程。二、实训准备1.DreamWeaver8.0软件环境。2.Photoshop CS软件环境。三、实训内容与实训步骤1.创建文件夹“淮安信息职业技术学院教学工作评建网”，创建“images”文件夹，并将制作的相关图片保存到“images”文件夹中，然后用Dreamweaver新建一个网页文件并保存为“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.鼠标点击左侧的空格， 在工具栏中点击【插入图片】按钮，选中“top1.jpg”图片，然后再将“top2.jpg”插入到右边的表格中，最后再将右边的表格的水平对其方式设置为“右对齐”，依次在又上角插入“top11.jpg”、“top12.jpg”、“top13.jpg”三张小图片与对应的“学院主页”、“教务在线”、“联系我们”文字并设置超级链接。6.继续插入表格，参数设置为：宽776像素，高30像素，1行8列，居中对齐，设置表格的背景图像为“dhbg.jpg”。依次在前7个表格中插入“网站首页”、“组织机构”、“评估文件”、“评建动态”、“迎评简报”、“评建知识”、“他山之石”等模块名称，在第8个单元格中插入“离教学工作评估还有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.鼠标电击左边的单元格，然后再表格中插入新的表格，具体参数设置为：宽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像素，设置第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个单元格中插入“评估文件”，第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软件的使用技