《网页设计与制作》课程实验实训指导书

网页设计与制作课程实验实训指导书课程编码：课程名称： 网页设计与制作课程学分：4计划课时：68，理论：26 实践： 42课程类别：理论课 理论实践一体 实践适用专业：计算机网络技术、计算机应用技术、信息管理、动漫设计与制作先修课程：网页动画设计与制作、图形图像处理后继课程：程序设计制 订 人： 审核人：批准人：负 责 人： 7网页设计与制作课程实验实训指导书一、课程基本信息课程编码：课程名称： 网页设计与制作课程学分：4计划课时：68，理论：26 实践： 42课程类别：理论课 理论实践一体 实践适用专业：计算机网络技术、计算机应用技术、信息管理、动漫设计与制作先修课程：网页动画设计与制作、图形图像处理后继课程：程序设计制 订 人： 审核人：批准人：负 责 人： 二、课程任务和目的该课程是计算机网络技术、计算机应用技术专业的核心课程，也是动漫设计、信息管理专业的必修课程，它的目标是从职业技术教育的特点出发，培养学生实际动手制作网页与管理网站的能力，使学生具备网页设计与制作、网站规划与维护的实践技能，以便形成良好的计算机网页制作与网站管理职业素养。学生毕业后可胜任网站管理员、网页设计师、网页美工师等工作岗位，并可不断提升岗位工作能力。它要以计算机基础、网页动画设计与制作、图形图像处理课程的学习为基础，也是进一步学习程序设计课程的基础。三、实验实训项目内容与学时分配（表格可根据内容调整宽度和增加行数）序号项目名称实验（实训）名称实验（实训）内容学时实验类型实验要求1项目一个人网站的设计与制作实训一 认识与策划个人网站1. 确定网站主题2确定网站风格3规划网站内容2设计型必修实训二 创建站点并制作网页1建立文件夹2建设站点3. 制作子页4. 制作首页5. 制作网页图片素材4综合型必修实训三 创建网站相册、创建超链接1. 创建网站相册2. 创建首页中的文字链接3. 创建电子邮件链接2综合型必修2项目二 电子商务网站设计与制作实训一 认识与策划电子商务类网站策划电子商务类网站1设计型必修实训二 首页的布局设计1. 创建站点2. 绘制布局单元格3. 使用表格进行布局的细化1综合型必修实训三 制作网站Logo与页面图片1. 制作网站Logo2. 制作顶部导航图片3. 制作菜单导航图片4. 制作顶部广告图片5. 制作左边小图标6. 制作书籍图片4综合型必修实训四 制作首页制作首页2综合型必修实训五 添加CSS样式表添加CSS样式表2综合型必修3项目三学校类网站设计与制作实训一 认识与策划学校类网站1. 确定网站风格特色2. 划分网站所要包含的项目3. 绘制网站的结构图4. 绘制首页布局草图2设计型必修实训二 建立站点与布局首页1. 创建站点2. 首页整体布局3. 设置网页的页眉和导航栏4. 设置网页的连接区5. 设置网页的主内容区6. 设置网页的页脚7. 设置网页的CSS样式4综合型必修实训三 使用库元素创建网页1. 库元素的创建2. 库元素的使用3. 库元素的编辑2综合型必修实训四 制作导航栏所连接的网页1. 创建“本系介绍”网页2. 创建其他导航栏所要链接的网页3. 编辑库元素在导航栏部分的超链接2综合型必修实训五 使用模板创建网页1. 模板的创建2. 设置可编辑区域3. 应用模板4. 更新模板内容2综合型必修4项目四 企业类网站设计与制作实训一 认识与策划企业网站策划企业网站1实训二 切割页面效果图1. 创建站点2. 页面布局3. 添加首页的部分元素1实训三 制作网页Banner1. 利用Flash制作网页Banner2. 在页面中插入Banner2实训四 制作留言板1. 调整留言板页面2. 利用表单制作留言板3. 利用表单制作首页部分内容2实训五 使用内嵌框架1. 制作新闻文本页面2. 制作新闻页面2实训六 使用网页特效1. 将新闻制作成滚动字幕2. 以跟随滚动条滚动的对联广告形式显示联系方式3. 状态栏显示滚动欢迎词2实训七 网站的测试与发布1. 申请域名2. 上传网站3. 维护网站4. 添加网页搜索关键字和说明信息5. 推广网站2合计学时42注：1.实验设置要注意内容更新，体系设计科学合理，实验项目名称要准确规范。2.实验要求为：必修、选修。3.实验类型为：验证、综合、设计型。4.学时分配合计数要与实验总学时相同或大于实验总学时数（其中超出的学时数可为选开实验）；若适应两个以上专业的可在表格下分别注明：例如序号1、2、3适应专业；序号1、3、5适应专业等。项目1 个人网站的设计与制作实训一 认识与策划个人网站一、实训目的1. 掌握个人网站的特点2. 掌握制作个人网站的注意事项二、实训内容1. 确定网站主题2确定网站风格3规划网站内容三、实训仪器、设备 装有Dreamweaver CS3软件的电脑，网络畅通。四、实训步骤1. 确定网站主题在本项目中，建设一个名为“竹轩”的个人网站，以竹和绿色做网站的风格，主题为“建设网站的基本技巧”，同时用“美文”为副主题。用竹子的图片以做点缀，体现网站的风格，来构成网站。2确定网站风格“竹轩”个人网站的风格是主要利用了一些漂亮的以竹子为主题的图片，进行适当的修改，依赖绿色和以竹子为素材的图片来体现绿色有生机的风格。3规划网站内容在本项目的个人网站中，要包含的内容有：网页制作知识、美文、图片三类，为了主题清楚分了三个栏目，这样内容就不会杂乱，利于浏览者的访问。可以绘制一个网站结构图来表现网站的组织结构，一般用一棵倒置的树来实现网站的结构图，如图所示。站点首页index.htm图片美文知识图 网站结构图五、实训报告要求 写出本项目报告的摘要和前言部分。六、实训注意事项熟悉了Dreamweaver CS3软件及基本操作后，多根据教师提供的网址上网欣赏优秀网站，研究其特点、布局等。七、思考题个人网站都有哪些特点？实训二 创建站点并制作网页一、实训目的1. 掌握个人网站建设的基本流程和基本方法2. 掌握表格布局的知识3. 掌握图片素材的制作方法和处理方法二、实训内容1建立文件夹2建设站点3. 制作子页4. 制作首页5. 制作网页图片素材三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1建立文件夹2建设站点3. 制作子页（1）新建网页在文件面板中，右击zhishi文件夹，选择“新建文件”（如图），新建了一个名为“untitled.html”的空白网页。右击此文件名，选择“编辑”“重命名”，将网页命名为：“wangzhan.html”。注意：网页和网页中使用的图片的命名必须为拼音、英文或者数字，不可使用中文。（2）设置页面属性打开新建的网页“wangzhan.html”，利用属性面板上的“页面属性”按钮，打开“页面属性”对话框指定布局和格式设置属性。设置字体的大小为12像素、上边距为0像素。（3）简单布局鼠标插入点放到网页“wangzhan.html”的空白区域，点击“常用”工具栏的插入表格的按钮，插入一个四行一列的宽度为760像素的表格。并将表格利用属性面板中的“居中对齐”按钮设置其居中对齐。通过设置表格、单元格背景颜色以美化网页。 选中整张表格，在属性面板中可以利用“背景颜色”按钮设置整张表格的背景颜色； 将插入点放在某一个单元格中，就可以利用“背景颜色”按钮设置单元格的背景颜色，如图所示。图 单元格属性面板在本例中，将第1、4行的单元格背景颜色设置为“#”，第2、3行的单元格背景颜色设置为“#CEFFDD”。（4）添加文字、设置文字格式 标题文本将鼠标位于第一行单元格中，输入“网站规划规范”，选中此文字，在属性面板中设置字体为“华文新魏”，文字大小为24像素，字体颜色为“#FFFFFF”，并利用按钮，设置文字居中对齐，单元格的高度为43像素，如图所示。图 文字属性对话框 正文文本将鼠标位于第三行单元格中，输入正文，设置正文格式：字体为宋体，大小为14像素，利用属性面板的“文本缩进”按钮将文本进行缩进，如图所示。图 控制文字缩进或凸出注意：要使文本每段开头空两个字符，需要将输入法设置为“全角”模式，再利用空格键输入。或者利用Ctrl+Shift+空格键输入空格。 版权信息在本例中，在第四行单元格中输入版权信息，字体大小为12像素，颜色为“#FFFFFF”，假设为“版权所有2008 竹轩 鲁ICP备001号”，其中“”是特殊符号，可以通过插入栏的“文本”类别来进行操作。在本例中，所要插入的“”符号就要展开“文本”类别中的“字符”按钮（），来选择“版权”按钮，将“”输入，如图所示。图 “字符”按钮（5）添加图片通常网站的子页都要有返回首页的链接，在这个网页中将利用素材中的图片“fanhui.gif”放置在网页中，作为返回首页的超链接，位置在表格的第二行，并且使之向右对齐。（6）添加背景音乐将代码插入到网页的之间，当浏览者打开网站时即可听到背景音乐，当网页最小化之后，音乐会消失。代码“”中“src=./image/Bamboo_Dance.wma”表示音频文件，loop=-1表示当网页最小化之后，音乐会消失，如果loop=3指音乐播放三次。4. 制作首页（1）首页布局在本例中首页的布局采用了“匡”字形的布局，首先插入了一个三行一列的宽度为760像素的表格，作为整个网页的大框架，第一行设置高度为160像素，用来放置页眉；第二行作为主内容区；第三行作为页脚。（2）页眉的美化单元格背景的使用、flash动画的插入（3）页脚的设置将第三行单元格的高度设置为30像素，背景颜色和页眉颜色相匹配设置为“#2B4216”，输入版权信息，假设为“版权所有2008 竹轩 鲁ICP备001号”。将文字设置为白色，居中对齐。（4）编辑主内容区的内容 编辑主内容区的布局 编辑导航栏、个人档 编辑主内容区5. 制作网页图片素材（1）页眉处用到的图片“banner.jpg”（2）导航处使用的图片“1.jpg” （3）分栏边框的制作 左侧分栏边框的制作 右侧主内容区边框五、实训报告要求 参照模板，按照要求，写出本项目报告正文中的“创建站点并制作网页”部分。六、实训注意事项使用Fireworks软件制作网页图片前，一定要确定好大小，不要到Dreamweaver中缩放。七、思考题本网站还可以怎样布局？实训三 创建网站相册、创建超链接一、实训目的1. 掌握网站相册的创建方法2. 掌握超链接的类型和各类型的创建方法二、实训内容1. 创建网站相册2. 创建首页中的文字链接3. 创建电子邮件链接三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 创建网站相册（1）在Dreamweaver CS3中，选择“命令”菜单中的“创建网站相册”命令。跳出如图所示的“创建网站相册”对话框。图 创建网站相册对话框（2）在“相册标题”文本域中，输入标题。该标题将显示在包含缩略图的页面顶部的灰色矩形中。（3）点击“源图象文件夹”文本域旁边的“浏览”按钮，选择包含有源图象的文件夹。然后点击“目的文件夹”文本域旁边的“浏览”按钮，选择（或创建）一个放置导出图象和HTML文件的目的文件夹。（4）为缩略图图象指定显示选项：（5）从“缩略图格式”弹出式菜单中选择一种缩略图图象格式：（6）从“相片格式”弹出式菜单中选择大尺寸图象的格式。会为每一幅原始图象创建一幅指定格式的大尺寸图象。可以为大尺寸图象指定不同于缩略图的格式。注意：“创建网站相册”命令不允许你使用原始的图象文件作为大尺寸文件，这是因为非GIF和JPEG格式的原始文件可能不能在所有浏览器中正确显示。注意，如果原始文件是JPEG文件，则产生的大尺寸图象与原始图象相比，可能有较大的文件尺寸或较低的质量。（7）为大尺寸图象选择“缩放”百分数。（8）选择“为每张相片建立导览页面”，为每个源文件创建一个单独的网页页面，其中包含“返回”、“首页”和“下一页”的导航链接。（9）点击“确定”按钮，为网页相册创建HTML和图象文件。（10）当出现“相册已经键立”的对话框时，点击“确定”按钮。可能需要等几秒钟，才会出现相册页面。缩略图按文件的字母顺序显示。效果如图所示。图 网站相册效果图注意：当处理过程开始后，点击Dreamweaver CS3对话框中的“取消”按钮不会停止创建相册的过程，而只是不让Dreamweaver CS3显示相册的首页面。创建完网站相册后，站点文件夹中会自动添加上创建相册时用到的图片和网页，如图所示。图 网站相册文件夹2. 创建首页中的文字链接依次选中首页中每个文件的标题，在“属性”面板的“链接”项输入链接地址。在本项目中，可以设置连接属性为_parent或者_self，保存网页后浏览，会发现制作了链接的文字加了下划线，并且字体的颜色也有了改变，可以通过调节页属性来进行修改。如图，选择页面属性中的“链接”，将“链接颜色”、“已访问链接”的颜色均设置为黑色（#），“下划线样式”为仅在变换图像时显示下划线，点击“确定”按钮，保存网页，浏览会发现，仅当鼠标移动到链接的文字上时才显示下划线。图 设置链接字体的颜色3. 创建电子邮件链接选中首页中的XXXXXX.XXX，执行“插入”菜单中的“电子邮件链接”命令，或单击插入栏“常用”类别中的按钮，在弹出的“电子邮件链接”对话框中进行设置，如图所示。图 “电子邮件链接”对话框五、实训报告要求 参照模板，按照要求，写出本项目报告正文中的“创建网站相册、创建超链接”部分。六、实训注意事项创建网站相册时，所有的相册图片的格式应该一致，并且不能用中文命名。七、思考题有的同学创建的网站相册中的图片不显示，为什么？项目2 电子商务网站设计与制作实训一 认识与策划电子商务类网站一、实训目的1. 掌握电子商务网站的特点2. 能策划电子商务网站二、实训内容策划电子商务类网站三、实训仪器、设备 装有Dreamweaver CS3软件的电脑，网络畅通。四、实训步骤策划电子商务类网站五、实训报告要求 写出本项目报告的摘要和前言部分。六、实训注意事项根据教师提供的网址，多上网欣赏优秀电子商务网站，研究其特点，设计出具有独特风格的电子商务网站。七、思考题电子商务网站有哪几种风格？实训二 首页的布局设计一、实训目的1. 掌握布局表格和单元格的使用和注意事项2掌握使用表格进行布局的细化方法二、实训内容1. 创建站点2. 绘制布局表格和单元格3. 使用表格进行布局的细化三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 创建站点2. 绘制布局表格和单元格（1）使用布局视图 绘制布局表格 绘制布局单元格 使用标准视图3. 使用表格进行布局的细化五、实训报告要求 写出本项目报告中正文的“首页的布局设计”部分。六、实训注意事项有时候，表格和布局表格一起使用，一定要掌握这两种方式之间的切换和联系。七、思考题怎样设定布局单元格的宽度？实训三 制作网站Logo与页面图片一、实训目的1. 掌握利用Photoshop处理图像的一般流程2. 掌握利用Photoshop处理图像的方法二、实训内容1. 制作网站Logo2. 制作顶部导航图片3. 制作菜单导航图片4. 制作顶部广告图片5. 制作左边小图标6. 制作书籍图片三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 制作网站Logo2. 制作顶部导航图片3. 制作菜单导航图片4. 制作顶部广告图片5. 制作左边小图标6. 制作书籍图片五、实训报告要求 写出本项目报告中正文的“制作网站Logo与页面图片”部分。六、实训注意事项注意图片的色彩、样式要跟网站页面的色彩、布局一致。七、思考题常见的Logo有哪些尺寸和样式？实训四 制作首页一、实训目的1. 掌握网页中插入图片的方法2. 掌握插入“ 图像占位符” 的方法3. 掌握插入“鼠标经过图像” 的方法4. 掌握插入导航条的方法二、实训内容制作首页三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤制作首页（1）插入处理好的图片（2）设置单元格的背景图片（3）设置表格的背景色等（4）输入文本（5）添加特效欢迎来到“书城在线”，这里有丰富的图书资源！敬请选购！” 这段文本就会从右向左滚动。 在放置宣传图片的表格中插入如下代码：var NowFrame = 1;var MaxFrame = 3;var bStart = 0;function fnToggle() var next = NowFrame + 1; if(next = MaxFrame+1) NowFrame = MaxFrame; next = 1; if(bStart = 0) bStart = 1; setTimeout(fnToggle(), 3000); return; else oTransContainer.filters0.Apply(); document.imagesoDIV+next.style.display = ; document.imagesoDIV+NowFrame.style.display = none; oTransContainer.filters0.Play(duration=2); if(NowFrame = MaxFrame) NowFrame = 1; else NowFrame+; setTimeout(fnToggle(), 2000);fnToggle(); 其中的“images/g1.gif”为图片的链接地址，效果为g1.gif、g2.gif、g2.gif三幅图片交替出现，如图所示，像用Flash制作出来的一样。（6）插入表单（7）最终效果五、实训报告要求 写出本项目报告正文中测试影片部分。六、实训注意事项测试后出现问题查找原因，及时修改。实训五 添加CSS样式表一、实训目的掌握添加CSS样式表的方法二、实训内容添加CSS样式表三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤添加CSS样式表五、实训报告要求 写出本项目报告中正文的“添加CSS样式表”部分。六、实训注意事项预览后出现问题查找原因，及时修改。项目3 学校类网站设计与制作实训一 认识与策划学校类网站一、实训目的1. 了解学校类网站的特点2. 能规划学校类网站二、实训内容1. 确定网站风格特色2. 划分网站所要包含的项目3. 绘制网站的结构图4. 绘制首页布局草图三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 确定网站风格特色在本项目是高校的系部网站，就决定了它的风格是严谨又不失活泼，所以用蓝色作为主色调，因为蓝色是冷色调，可以突出严谨的氛围，适当点缀橘色、红色等亮色来增加活泼的特点，使得整个页面活泼起来。2. 划分网站所要包含的项目根据本项目网站的分析，网站应包含的项目有：系部介绍、师资队伍、党团工作、精品课程、资源课堂、心理咨询、系留言板、校内链接、新闻动态、教学工作、学生工作、招生就业，这么多的项目应该有条理的放置到首页。所以可以作进一步的分类。3. 绘制网站的结构图首 页导 航 栏连 接 区主内容区师资队伍党团工作校内连接新闻动态教学工作学生工作招生就业精品课程资源课堂心理咨询系留言板领导邮箱系部介绍4. 绘制首页布局草图站头（logo）首 页系部介绍师资队伍党团工作精品课程资源课堂心理咨询系留言板系领导邮箱新闻动态校内连接教学工作学院图片学生工作招生就业版权信息部分五、实训报告要求 写出本项目报告的摘要和前言部分。六、实训注意事项多欣赏优秀网站，分析、总结后设计出具有独特风格的网站布局。七、思考题学校类网站有哪些风格？实训二 建立站点与布局首页一、实训目的1. 掌握利用表格布局网页的方法和技巧2. 掌握嵌套表格的使用方法二、实训内容1. 创建站点2. 首页整体布局3. 设置网页的页眉和导航栏4. 设置网页的连接区5. 设置网页的主内容区6. 设置网页的页脚7. 设置网页的CSS样式三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 创建站点在站点中除了image文件夹以外，再创建五个文件夹分别为 “html”、“jiaoxue”、“jiuyezhaosheng”、“xuesheng”、“news”，分别用来存放导航栏所连接的网页，例如教学工作、就业招生、学生工作和新闻动态栏目中的网页，这样网站文件夹便于管理。2. 首页整体布局3. 设置网页的页眉和导航栏4. 设置网页的连接区5. 设置网页的主内容区主内容区的最终效果：“新闻动态”区域：“教学工作”、“学生工作”、“招生就业”区域：“多彩校园”区域：function on_mou(i)eval(pic+i+.src=/images/but00+i+.gif)function out_mou(i)eval(pic+i+.src=/images/but0+i+.gif)function on_mou(i) eval(pic+i+.src=/images/but00+i+.gif)function out_mou(i) eval(pic+i+.src=/images/but0+i+.gif)var bannerAD=new Array();var bannerADlink=new Array();var adNum=0;bannerAD0=images/t_5.jpg; bannerADlink0=; bannerAD1=images/t_2.jpg; bannerADlink1=; bannerAD2=images/t_3.jpg; bannerADlink2=; var preloadedimages=new Array(); for (i=1;i5;i+)preloadedimagesi=new Image(); preloadedimagesi.src=bannerADi; function setTransition() if (document.all) bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23); bannerADrotator.filters.revealTrans.apply(); function playTransition() if (document.all) bannerADrotator.filters.revealTrans.play()function nextAd() if(adNumbannerAD.length-1)adNum+ ; else adNum=0; setTransition(); document.images.bannerADrotator.src=bannerADadNum; playTransition(); theTimer=setTimeout(nextAd(), 6000);function jump2url() jumpUrl=bannerADlinkadNum; jumpTarget=_blank; if (jumpUrl != ) if (jumpTarget != )window.open(jumpUrl,jumpTarget); else location.href=jumpUrl; function displayStatusMsg() status=bannerADlinkadNum; document.returnValue = true; 6. 设置网页的页脚整个页面布局的低端的那个一行一列的表格III，将背景颜色设置为“#307EC3”，输入相应的版权信息，并设置文字居中显示，文字为白色字体。7. 设置网页的CSS样式五、实训报告要求 写出本项目报告中正文的“建立站点并布局首页”部分。六、实训注意事项使用嵌套表格时，最外层表格宽度用像素来表示，内层表格宽度用%百分比来表示。七、思考题高校网站还可以怎样布局？实训三 使用库元素创建网页一、实训目的1. 理解库元素的概念2. 掌握创建库元素的方法二、实训内容1. 库元素的创建2. 库元素的使用3. 库元素的编辑三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 库元素的创建2. 库元素的使用(1) 新建一个网页文档，(2) 打开“库”面板，执行“窗口”菜单中的“资源”命令，以打开“资源”面板，并在左侧的按钮中单击“库”按钮切换到“库”面板。(3) 在“库”资源面板中选中欲插入的库元素“wangyetou”，然后单击左下角的“插入”按钮，此时就在页面中出现了一个刚插入的“库元素”内容。注意：插入到新网页中的库可能与原定义库元素的网页有所不同，如文字变大了，色彩没有了等。这主要是由于原网页中定义了CSS样式所至，此时只须打开“CSS样式”面板，并链接外部样式表文件，然后重新设置即可。3. 库元素的编辑五、实训报告要求 写出本项目报告中正文的“使用库元素创建网页”部分。六、实训注意事项库元素一旦进行了修改，一定要更新使用该元素的网页。七、思考题库元素有哪些？实训四 制作导航栏所连接的网页一、实训目的掌握多个页面导航栏链接的方法与技巧二、实训内容1. 创建“本系介绍”网页2. 创建其他导航栏所要链接的网页3. 编辑库元素在导航栏部分的超链接三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 创建“本系介绍”网页2. 创建其他导航栏所要链接的网页除“本系介绍”网页以外的其他导航栏所链接的网页，与“本系介绍”网页格式基本相同，只是在主内容区的文字不同，所以可以将“本系介绍”网页，即“bxjs.htm”中的主内容删除替换上“师资队伍”、“党团工作”、“精品课程”、“资源课堂”、“心理咨询”、“系留言板”相应的内容，并将网页依次另存为“szdw.html”、“dtgz.html”、“jpkc.html”、“zykt.html”、“xlzx.html”、“xlyb.html”。这些页面都保存在网站文件夹的“html”文件夹中。3. 编辑库元素在导航栏部分的超链接（1）在库面板中选中库元素“wangyetou”，双击打开；（2）依次选中导航图片：“but1.gif”、“but2.gif”、“but3.gif”、“but4.gif”、“but5.gif”、“but6.gif”、“but7.gif”、“but8.gif”，分别设置超链接的网页为“index.htm”、“bxjs.htm”、“szdw.html”、“dtgz.html”、“jpkc.html”、“zykt.html”、“xlzx.html”、“xlyb.html”；（3）保存库元素“wangyetou”，在提示更新的对话框中选择确定，以便更新使用库元素“wangyetou”的网页。五、实训报告要求 写出本项目报告中正文的“制作导航栏所链接的网页”部分。六、实训注意事项将导航栏做成库元素，如果进行了修改，一定要更新相关元素。七、思考题导航栏链接还可以怎样做？实训五 使用模板创建网页一、实训目的 掌握模板的创建、使用和更新二、实训内容1. 模板的创建2. 设置可编辑区域3. 应用模板4. 更新模板内容三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 模板的创建(1)打开“bxjs.htm”，删除主内容区的标题和文字所在的表格，插入一个四行一列，宽度为100%的表格，如图所示；图 删除主内容的“bxjs.htm”(2)执行“文件”菜单中的“另存为模板”命令，打开“另存为模块”对话框，如图所示；图 “另存为模块”对话框(3)输入名称（即在“另存为”文本框中）为“xinwen”，单击“保存”按钮，弹出一个提示对话框，提示是否更新链接，单击“是”按钮，将文档另存为模板；(4)操作成功后，文档编辑窗口标题栏中的名称由原来的“bxjs.htm”变成了“（xinwen.dwt）”，如图所示。图 模板编辑窗口2. 设置可编辑区域3. 应用模板4. 更新模板内容(1)首先应打开“资源”面板（执行“窗口”菜单中的“资源”命令），然后单击“模板”按钮以切换到“模板”面板，如图所示。图 “模板”资源面板(2)双击模板名index，将会在文档编辑窗口打开该模板，此时即可修改模板中的内容；(3)根据需要内容，更改模块内容后，按“Ctrl+S”以保存模块文件，此时将打开“更新模板文件”对话框，其中显示的是包含正在应用的模板对象的网页文件，如图所示；图 “更新模板文件”对话框(4)单击“更新”按钮，系统自动更新这些文档，并显示更新结果，如图所示，此时单击“关闭”按钮，以完成编辑模板。图 更新结果五、实训报告要求 写出本项目报告中正文的“使用模板创建网页”部分。六、实训注意事项模板创建好后再使用。七、思考题使用模板有哪些好处？项目4 企业类网站设计与制作实训一 认识与策划企业网站一、实训目的1. 了解企业网站的基本特点2. 掌握企业网站制作规范3. 能策划企业网站二、实训内容策划企业网站三、实训仪器、设备 装有Dreamweaver CS3软件的电脑，网络畅通。四、实训步骤策划企业网站 网站首页 简 介 产 品 荣 誉 资 质 机 构 工艺设备 文 化 网络营销 留 言网站结构图页面效果图五、实训报告要求 写出本项目报告的摘要和前言部分。六、实训注意事项一定要根据企业需求进行规划，多跟企业沟通。免得做无用功。实训二 切割页面效果图一、实训目的1. 掌握Fireworks CS3网页切片功能2. 掌握Dreamweaver中插入Fireworks HTML的方法3. 能解决用Fireworks切片生成的垃圾代码的方法二、实训内容1. 创建站点2. 页面布局3. 添加首页的部分元素三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 创建站点2. 页面布局制作首页布局图片切割首页布局图片导出图片和页面站点效果图：布局页面：生成的css.css文件内容如下：.3 font-size: 12px;line-height: 3px;margin: 1px;padding: 1px;height: 8px;width: 80px;border: 1px solid #;.unnamed1 font-size: 12px;line-height: 26px;text-decoration: none;.unnamed2 font-size: 12px;line-height: 0px;color: #FF3300;.4 font-size: 12px;line-height: 5px;3. 添加首页的部分元素（1）本站导航（2）润生新闻（3）产品区域（4）论坛新贴五、实训报告要求 写出本项目报告中正文的“使用Fireworks软件切割页面效果图”部分。六、实训注意事项在制作效果图的时候，由于要使用大量的素材，并制作很多的效果，所以一定要使用图层组对所有图层进行统一规划，同时要为每个图层、图层组定义一个有意义的名称，以便于修改和制作，并注意图层中隐藏、显示、合并等操作，以简化图层的复杂性。在制作页面的时候，要注意页面的统一和协调，尽量避免使用过多的字体和颜色，也不要使用种类过多的特效和样式。七、思考题哪些软件还能切割图片？实训三 制作网页Banner一、实训目的1. 掌握网页Banner设计原则2. 掌握动态Banner制作基本知识3. 掌握Flash CS3基本操作二、实训内容1. 利用Flash制作网页Banner2. 在页面中插入Banner三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 利用Flash制作网页Banner2. 在页面中插入Banner 打开Dreamweaver CS3，再打开前面创建的站点“企业网站”，然后打开index.htm文件。 删除导航栏下面的图片n1_r4_c1。 单击“插入”工具栏上的“媒体：Flash”按钮，找到文件index.swf，将该动画插入。 按F12键预览。分别打开页面文件gongyiwenhua.htm、jianjie.htm、jigou.htm、liuyan.htm、product.htm、rongyu.htm、wangluoyingxiao.htm、wenhua.htm和zizhi.htm，均做以下操作。 删除导航栏下面的图像。 单击“常用”工具栏上的“媒体：Flash”按钮，找到文件index.swf，将该动画插入。 在属性面板上，将该动画文件的高设为222。 按F12键预览。五、实训报告要求 写出本项目报告中正文的“使用Flash制作网页Banner”部分。六、实训注意事项在Dreamweaver中插入Flash Banner时，一定要将其背景设置为透明。七、思考题网页Banner还有哪些风格？实训四 制作留言板一、实训目的1. 掌握表单的概念2. 掌握创建表单的方法3. 掌握插入表单对象的方法二、实训内容1. 调整留言板页面2. 利用表单制作留言板3. 利用表单制作首页部分内容三、实训仪器、设备 装有Dreamweaver CS3软件的电脑。四、实训步骤1. 调整留言板页面（1）在Dreamweaver中打开站点“企业网站”，再打开页面文件liuyan.htm，选中主内容区的图像gongyiwenhua_r6_c2.gif，将其删除。设置第一、三单元格中的图像gongyiwenhua_r6_c1.gif和gongyiwenhua_r6_c12.gif的高度均为550px。（2）调整三个单元格的大小，选中第二个单元格，在“属性”面板上设置垂直对齐方式为顶端对齐，选中第三个单元格，设置水平对齐方式为右对齐。2. 利用表单制作留言板3. 利用表单制作首页部分内容（1）打开首页页面文件index.htm，选中“邮箱登陆”区域的图像n1_r9_c3.jpg，将其删除。选中该图像所在单元格，将其背景图像设为pic/5.jpg。（2）将光标定位在该单元格中，单击“表单”面板上的“表单”按钮，插入表单。（3）在该表单中插入一个2行4列的表格，宽度为95%，填充、边框为0，间距为2，居中对齐。（4）在第1列的两个单元格中分别输入文本“用户名”和“密码”，在第2列的两个单元格中分别插入表单元素文本字段。分别选中这两个文本字段，在“属性”面板上设置其字符宽度为10。（5）在表格的第2行第4列单元格中，插入表单元素按钮，在“属性”面板上设置其值为“登陆”。调整表格的行高和列宽。同样的方法制作首页中“论坛登陆”区域的内容。五、实训报告要求 写出本项目报告中正文的“制作留言板”部分。六、实训注意事项 添加表单元素之前先添加表单。七、思考题怎样利用表单实现交互？请搜集。实训五 使用内嵌框架一、实训目的1. 掌握Iframe基本语法2. 掌握Iframe属性设置3. 掌握插入If