《网页设计与制作》课程教学大纲
一、说明
（一）课程定义：
《网页设计与制作》课程是网络与新媒体专业的一门核心课程，也是其他计算机专业的普及型课程。内容主要涵盖了HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标记及属性，、JavaScript脚本编程语言、Dreamweaver、Fireworks、Flash、Photoshop 等相关知识，全面介绍WEB站点设计的基本操作技术和使用技巧。
（二）编写依据：
本课程根据武汉体育学院体育科技学院人文社科系网络与新媒体专业人才培养方案编写。
（三）目的任务：
通过本课程的学习，要求学生掌握静态网页的制作方法、学会HTML语言、熟悉站点的上传和维护并能够独立解决网页编辑中遇到的一般问题，能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；能熟练掌握JAVASCRIPT脚本编程语言的基本语法知识，能实现网页的交互和特殊效果；能维护、管理和设计WEB应用程序；能独立设计小型WEB站点。
（四）学时数与学分数：
本课程教学总学时为72课时,4学分，理论48学时，实践/实验24学时。具体学时分配参照下表。
（五）适用对象：
网络与新媒体专业。
（六）课程编码：
二、教学内容与学时分配
三、教学内容与知识点
第一章初识网站和网页
第一节网站和网页
知识点：网站和网页的概念。
第二节网页中的元素类型
知识点：行元素、块元素。
第三节常用网站管理制作软件
知识点： Dreamweaver、flash。
第四节网站建设流程
知识点：网站建设流程。
第五节 Html与CSS入门
知识点：html概念、css概念。
第二章初识Dreamweaver
第一节熟悉Dreamweaver操作环境
知识点：Dreamweaver操作环境。
第二节网站规划与管理
知识点：网站规划原则、管理方法。
第三章网页布局方法
第一节使用表格布局网页
知识点：表格布局方法。
第二节使用框架布局网页
知识点：框架布局网页方法。
第四章编辑网页元素
第一节文本编辑与输入
知识点：文本编辑与输入方法。
第二节使用图像
知识点：使用图像的方法。
第三节使用Flash动画
知识点：Flash动画的制作。
第四节使用其他元素
知识点：音频、视频元素。
第五章使用超级链接
第一节设置超级链接
知识点：超级链接的概念、设置方法。
第二节管理超级链接
知识点：超级链接管理方法。
第六章 Html样式和CSS样式
第一节编辑HTML代码
知识点：HTML代码书写原则、方法。
第二节创建和使用CSS样式表
知识点：CSS样式表的作用、使用原则、方法。
第七章 Dreamweaver高级应用
第一节使用行为
知识点：使用行为的方法。
第二节时间轴的使用
知识点：时间轴的使用方法。
第三节表单及其应用
知识点：表单使用场合、方法。
第四节模板与库
知识点：模板使用方法、库使用方法。
第五节 CSS样式的应用
知识点：CSS样式应用技巧。
第八章网站的优化
第一节页面的优化
知识点：页面优化技巧。
第二节站点的优化
知识点：站点的优化方法。
第九章站点的发布
第一节发布前的工作
知识点：发布前的工作。
第二节发布站点与更新
知识点：发布站点和更新方法。
四、实践/实验教学
（一）项目名称:期末综合实训
（二）目的要求：
（1）应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏
目页设计、管理员管理登陆页面、管理员登录以后的页面。
（2）显示环境：网页视觉效果应采用Internet Explorer 6.0以上版本浏览器，显示分辨率以1024×768状态为准。
（3）网页规模：网页总量原则上不应超过10M，且必须要是不连接互联网就可以进行展示的作品。
（4）网站结构：要求结构清晰，文件有清晰的分类，比如图片都放在images文件夹下等。
（5）要求页面美观大方、颜色搭配协调；
（6）作品留存，下学期或下一阶段继续完善、开发。
（三）项目性质：
（四）主要仪器设备：
（五）考核及要求：
五、考核
（一）考核形式
本课程考核形式有三种：出勤考核、平时作业考核、期末实训大作业考核。
（二）成绩计算
平时成绩（考勤+作业）占30%，期末实训大作业成绩占70%。
六、教材与参考书
1、《网页制作与网站建设》，何新起主编，人民邮电出版社出版，2013年版
课程所属教研室负责人：执笔人：汪海审批人： 2018年 8 月 18 日
《网页设计与制作》课程标准 课程代码： 502043 参考学时： 90 学分： 4 课程类型：专业课
2015年 1 月编 一、适用专业 计算机应用技术（3年制中职，5年制高职） 二、开课时间 第4学期 三、课程定位 1、课程性质 本课程是计算机应用技术（3年制中职，5年制高职）的专业课程。 2、教学任务 本课程主要以Dreamweaver软件为操作平台，针对职业教育网络技术专业中理论结合实践的特点，以培养高技能应用型人才为目标，重点加强学生的理论基础和训练学生的实际操作能力。在教学知识模块上首先介绍网页的相关知识，学习HTML标记语言，在此基础上深入学习Dreamweaver软件的操作方法以及网页元素在网页中的使用技巧，锻炼学生网页的排版设计能力，最后通过样式表、客户端脚本、服务器行为的学习让学生熟悉并掌握开发简单动态网站的能力。在本课程的实践教学内容中，选取紧密联系实际的项目并进行详细分解，重点培养学生的静态、动态网页制作能力、具备网站的建立和维护能力、独立思考、解决问题以及自主创新的能力。 四、课程培养目标 1、方法能力目标 1)培养学生谦虚、好学的品质； 2)培养学生勤于思考、做事严谨的良好作风； 3)培养学生良好的职业道德； 4)培养学生事物美的观念； 2、社会能力目标 1)培养学生的团队协作精神； 2)培养学生分析问题、解决问题的能力； 3)培养学生勇于创新、敬业乐业的工作作风； 4)培养学生诚实、守信、坚忍不拔的性格。 3、专业能力目标 1)掌握网页设计相关知识、网页元素组成、网页结构、网站开发流程、网页设计 与制作工具；
2)掌握HTML标记语言并能够熟练使用标记元素来书写网页框架； 3)掌握Dreamweaver软件的使用方法；学习文本、图像等多媒体元素在网页中的 使用技巧； 4)熟练掌握表格的弹性控制及表格元素标记的使用方法并能应用单元格的合并拆 分、表格嵌套来完成网页的排版； 5)掌握模板的使用方法；熟练应用模板来制作、修改、批量更新网页； 6)掌握两栏框架的制作方法和使用浮动框架嵌套网页的技巧； 7)熟悉AP元素的浮动和定位并能结合时间轴来实现多个AP元素的动画效果； 8)熟练掌握表单的制作方法、表单元素标记、了解网页通过表单来提交数据的原 理； 9)掌握网页中客户端行为的概念；能够使用常见的客户端行为来制作前台页面的 动态效果； 10)掌握样式表对网页的外观和格式的控制、样式表的冲突与继承并能够熟练 书写样式； 11)熟练掌握服务器行为的概念、连接数据库、插入、修改、更新、删除操作 记录；能够使用服务器行为开发简单的动态网站。 五、课程衔接 在课程设置上，前导课程有《Photoshop高级应用》，后续课程有《网站建设》六、教学内容与学时分配 教学学时数分配见下表所示 表教学内容与学时分配
《网页设计与制作》 实习报告 指导老师： 实习地点： 实习时间： 实习班级： 学生姓名：
一、实习目的 ①学会制作新闻发布系统。 ②学会制作在线调查系统。 ③熟悉购物网站的主要功能和栏目。 ④学会购物网站数据库表的创建和数据库连接的创建。 ⑤学会购物系统前台页面制作和后台管理制作。 二、实训内容 1.创建数据库表 ①启动Microsoft Access ，执行“文件”——“新建”命令，打开“新建文件”面板，在面板中单击“空数据库”。 ②弹出“文件新建数据库”对话框，在对话框中选择数据库保存的路径，“文件名”文本框中输入shop。 ③单击“创建”按钮，在对话框中双击“使用设计器创建表”选项。 ④弹出“表1：表”对话框，在对话框中输入“字段名称”和字段所对应的“数据类型”，将shopID字段设置为主键。 ⑤执行“文件”——“保存”命令，弹出“另存为”对话框，在对话框的“表名称”文本框中输入products。 ⑥单击“确定”按钮，保存表。按以上步骤的方法，创建表fen和admin。 2.创建数据库连接 新建一个网页文件夹，打开IIS信息服务，创建IIS虚拟目录，在文件夹安全性把来宾用户的权限修改为完全控制，并导入数据库。 3.制作购物网系统页面 ①用index.html创建zhanshi.asp商品分类展示页，新建站点，导入shop.mdb数据库文件建立数据库连接。插入表格并插入图片、文字，创建记录集并在表格相应位置绑定数据。在服务器行为里为表格设置重复区域，创建记录集RS2并在左边的商品分类表格里绑定
数据，在服务器行为里为左侧的表格添加重复区域和转到详细页，制作记录集导航条。 ②用index.html创建xiangxi.asp商品详细信息页，首先创建记录集并制作左侧的商品分类表格，之后在中间区域插入表格，在表格中插入图片、文字，创建记录集RS2并将数据绑定在表格相应位置。 ③用index.html创建denglu.asp商品详细信息页,创建记录集并制作左侧的商品分类表格，在中间区域插入表单，在表单里插入表格，在表格里插入文字、文本域、表单按钮，并为表单设置检查表单。创建记录集RS2并在服务器行为里添加登录用户。 ④用index.html创建fenlei.asp添加商品分类页，插入表单，在表单里插入文字、文本域、表单按钮，创建记录集并在服务器行为里添加插入记录和限制对页的访问。再用index.html创建fenleiok.asp,在其中插入表格输入文字，并设置返回链接。 ⑤用index.html创建tianjia.asp添加商品页，创建记录集，用插入记录表单向导创建插入记录表单，在服务器行为里添加限制对页的访问。再用index.html创建tianjiaok.asp,在其中插入表格输入文字，并设置返回链接。 ⑥用index.html创建guanli.asp商品管理页，创建记录集并制作左侧的商品分类表格，在中间区域插入表格并插入文字，创建记录集RS2并在表格相应位置绑定数据，为该表格设置服务器行为的重复区域，制作修改和删除链接，制作记录集导航条。 ⑦用tianjia.asp创建xiugai.asp修改页面，创建记录集在对应的文本域中绑定数据，把服务器行为里的插入记录删除并添加更新记录。在服务器行为里添加限制对页的访问。再用index.html创建xiugaiok.asp,在其中插入表格输入文字，并设置返回链接。 ⑧用index.html创建shanchu.asp删除页面,插入表格并插入文字，建立记录集，在表格相应位置绑定数据，插入表单和表单按钮，创建服务器行为限制对页的访问和删除记录。再用index.html创建shanchuok.asp,在其中插入表格输入文字，并设置返回链接。 三、疑难解惑 ①网页不能正常打开，电脑用户权限没有修改，在文件夹安全性把来宾用户的权限修改为完全控制。 ②创建重复区域时，总显示相同的内容，仔细阅读教材，发现创建重复区域时要选中表格，而不是文字内容。 ③登陆页面不能登陆，把表格放入表单后，重新登录，问题解决。 ④创建添加商品页面时，无法显示商品分类。在插入记录表单时，应将feileiID"显
《网页设计与制作》实践环节（技能）考核大纲 一、考核目标 本课程重点讲授了网页设计与制作的基础知识、基本理论和基本技能，是一门操作性极强的技能型应用课程。本课程通过实践使学生在了解理论和基本技能的基础上，熟练运用网页开发的主要工具软件Dreamweaver，掌握网页设计和制作的知识与能力，并灵活应用。 二、考核方式 本实践环节考核主要包括两部分内容：网站设计制作和编写设计报告。 考生结合个人工作需要或兴趣爱好，自选主题，设计制作一个主题网站，并根据设计过程撰写一篇不少于1500字的设计报告。 按照要求提交资料：网站源程序（电子版）和设计报告（打印版）。 网站源程序（电子版）---------以“姓名准考证号网页设计”命名文件夹与设计报告（打印版）同时递交。 三、考核内容的要求： 1.网站设计与制作要求： ①用工具Dreamweaver设计静态网站(HTML页面)； ②网站不少于2级，页面总数不少于6个； ③站点文件、文件夹的命名与组织要求规范； ④网页要求整合多种媒体（音频、视频、动画、图片、文字等）； ⑤要求有CSS的设计和使用； ⑥要求使用模板或库元素； ⑦要求网站无错误链接； ⑧要求掌握网站上传、发布的方法。 2.设计报告要求： 设计报告应该包括以下几个主要部分： ①网站的主题说明； ②网站的总体规划；
③各级网页风格说明； ④典型网页的设计过程及样例，必要时以代码和截图说明； ⑤网站发布过程说明（如果已发布到Internet网站上，需要提供网站网址）。 四、报告格式要求： 1、纸张字号等要求：A4纸单面打印；字号：四号；行距：1.5倍行距； 页边距上：2.5；下：2.5；左：3.2；右：3.2。 2、封面格式要求：见附件，封面打印时不得有页码。姓名、准考证号等信息应准确无误。 3、装订方式：左侧（三个订书钉）装订，不允许加装塑料封皮。 五、其他说明： 1、对于源程序出现抄袭或下载的情况，判0分。 2、设计报告严格按照封面格式要求（见下页的附件）制作。 3、考生要认真。将自考专业、准考证号等信息一定要填写正确。 4、雷同卷判0分。（情节严重者，视为作弊上报省考试院） 附件：“《网页设计与制作》实践环节（技能）考核”封面
《网页设计与制作》课程标准前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用， 一、课程的说明： 通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。 二、课程内容与基本要求： 该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：
三、教学目标 1、职业关键能力目标 (1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法
(13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法 2、职业专门能力目标 (1) 通过完成相关的项目，掌握网页设计的基本工作流程。 (2) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标 形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。 四、教学内容 第一章网页制作基础知识（4学时） 教学目标： 网页与网站基本概念、网页基本组成元素、常用网页制作软件 主要教学内容： 网页制作基础知识 网页的基本构成元素 网页制作常用软件和技术 第二章 Dreamweaver CS6轻松入门（2学时）
本实训项目的目的与任务是使学生根据问题的要求，构思一个主题，并运用网页制作工具，制作和发布网页，并对此进行更新和维护，掌握网站发布的工作流程，了解域名申请、空间申请的方法，能在校园网及英特网上发布网页。 实训学时数：125（5周） 课外学时数：100 适用方向：办公自动化、电子商务 执笔者：王平露 编写日期：2006年4月 一、实训教学的目的与任务 本实训项目的目的与任务是使学生根据问题的要求，构思一个主题，并运用网页制作工具，制作和发布网页，并对此进行更新和维护，掌握网站发布的工作流程，了解域名申请、空间申请的方法，能在校园网及英特网上发布网页。通过设计、编辑和发布网页全过程的实际训练使学生对网页整体设计流程有一个深刻的认识，并且熟练掌握网页制作工具（Dreamweaver MX）的使用，初步掌握HTML、CSS语法格式，能借助手册看懂代码，能进行简单的代码改写工作，了解客户端脚本和服务端脚本区别，了解在网页上进行简单代码的嵌入与改写，会与其他工具结合使用以便实现更高效高质量的网页效果，进一步提高办公自动化效率和水平。 二、实训项目的基本要求及考核标准 基本要求： （一）网页内容要求： 1、主题内容：创意突出，体现校园园区精神文明建设体现本班级大学生风貌，学习气氛浓厚，作品内容健康。严禁发布反对政府、宣传迷信、传播色情、系统破坏、黑客教程等违法信息。
2、具体内容：标徽、标题、各链接页具体内容，站内搜索、计数器、留言系统、电子邮件地址、弹出窗口、漂浮广告、背景音乐、网页特效、友情链接、版权信息等。 （二）制作基本要求： 1、至少有10个页面，链接结构应有三层，下一层必须有返回上层的按钮或链接。有整体框架结构，导航栏，表格定位，布局合理，色彩搭配协调统一。 2、主页的文件名为：index.htm。文件名一般用英文小写字母。 3、网页中要有文本、图像、表格、交互与链接、层与动画、表单。 4、网页主要建立站内链接，尽量少建立外部链接，至少建立一个E-mail链接至你的邮箱。 5、要有flash控件、Frieworks图像，至少各出现一处,使用CSS样式； 6、为页面元素添加行为(调用Dreamweaver MX内置的脚本程序). 7、相关图片清晰，单张图片大小不超过200K （三）、网页性能要求： 1、每一张网页，显示分辨率以800*600状态为准，网页对不同浏览器兼容性较好； 2、在不考虑兼容性问题时，不出现乱码或错误的表格等内容； 3、结构清楚，便于浏览、查找。没有空链接或错误链接； 4、界面链接方便； （四）测试和网页发布要求： 1、测试链接和兼容性； 2、预览网页； 3、申请免费二级域名和免费空间；
《网页设计与制作》课程说课稿 一、课程定位 《网页设计与制作》课程是我院计算机应用技术专业、计算机网络技术专业及电子商务专业的重要专业基础技能课程，该课程不仅实用性强、应用面广，而且与岗位的联系非常密切，仅仅就这一门课程的学习，学生毕业后就可以从事相关网页设计与制作的工作，考取相关的网页设计与制作员的资格证书，如果将此作为技能基础，继续学好后续基于网络编程的动态网页设计技术，学生还可以从事网络软件的设计与开发，进行商务网站的设计与制作，同时也可以考取网页设计师、网络软件工程师等相关国家职业资格证书。该课程的开设，正好满足我校关于“高素质、技能型人才”培养目标的需求，通过该课程的教学，可以培养出一批优秀的、能够在一线工作岗位上从事网页设计与制作、网站规划、管理与维护的工作人才。基于该课程的主要工作岗位有：网站管理与维护人员、网页设计与编辑人员、网站策划人员及网页美工人员等。 二、课程教学设计的过程与思路 在教学过程中，结合职业岗位对人才的需求（一线工作岗位上从事网页设计、制作、编辑，网站规划、维护和管理的人员）、我校对人才培养的目标（培养高素质、技能型、应用型人才）及本课程对人才培养的目标（能够独立完成一个网站的建设，毕业后能够从事企事业单位的网页设计与制作、网站维护与管理等工作的人才），我们将培养学生熟练的网页设计与制作操作技能作为培养重点，在具体课程教学设计中，应用“工学结合”的教育思路、实施“建构主义”的教学方法，采取“小组协作学习”的学习方式完成整个课程的教学与学习。 在“工学结合”的教育思路下，主要以“工作导向——项目导向——任务驱动——知识学习”的一个架构来完成教学。 具体给大家阐述如下： 老师教学之前的教学设计：根据知识点——设计任务——组合项目——达成一项工作 老师教学中的教学设计：给学生布置一项工作（工作导向）——将工作转化为项目（项目导向）——将项目细化为每一个任务（任务驱动）——通过任务引出知识点（知识学习）
网页设计与制作课程试卷(五) 一、单项选择题 (本大题共40小题，每小题2分，共80分) (1) Photoshop中，下列__D_____操作不能提交图像变换。 A. 按Return键 B单击选项栏中的“提交”按钮 C. 在变换选框内双击 D在变换选框外双击 (2) Photoshop 中，利用蒙板制作淡出效果的方法为____C____。 A.添加蒙板后使用橡皮图章工具 B.添加蒙板后使用钢笔工具 C.添加蒙板后使用渐变工具 D.添加蒙板后使用填充工具 (3) 下列情况不属于冷色彩的是______A___。 A.黄色 B.蓝色 C.绿色 D.蓝绿 (4)下列情况不属于色彩联想性的是______D__。 A.蓝色——天空 B.黑色——黑夜 C.红色——喜事 D蓝色— —高科技 ^ (5) 创建浮动广告的路径应使用__C______. A.“窗口”—>“时间轴”—>“添加行为”命令 B. “窗口”—>“时间轴”—>“录制层路径”命令 C. “修改”—>“时间轴”—>“录制层路径”命令 D.“修改”—>“时间轴”—>“添加行为”命令 6）下列关于层的说法，不正确的一项是___D_____。 A.在DreamweaverMX中，层用来控制网页中元素的位置 B.层可以放置在网页的任何位置 C.层以点为单位精确定位页面元素 D.层中可以包含任何HTML文件中的元素 (7)要打开网页时弹出一个信息框，可以使用新建行为中的___B____。 A.打开测览器窗口 B.弹出信息 C.调用JavaScript D.播放声音 (8)要上传整个站点，要选定整个站点文件可以按的键是___A_____。 A.Ctrl+A B.Ctrl C.Shift D.Shift+A (9)检查测览器的兼容性应选的选项是_____D__。 A.搜索 B.验证 C.链接检查器 D.目标测览器检 查 (10)下列属于合法IP的是_____A__。 A.202.96.1.2 B.257.33. 21.5 C .33.23.99 D.10001111 (11)在模板中，由DreamWeaverMX自动建立的是____D___。 A.可编辑区域 B.可选区域 C.重复区域 D.锁定 区域 (12)在DreamWeaverMX中有___B____种方法可以建立基于模板的网页。 A.2 B.3 C.4 D.5 (13)模板文件的扩展名为______C_。 A.lbi B.htm C.dwt D.asp (14)下列不是FlashMX的选取工具的是___D____。 A.箭头工具 B.图标是空心箭头的工具 C.套索工具 D.手形工具
学生姓名：实习班级：指导老师：实习地点：实习时间：
一、实习目的 1．掌握企业网站主要功能栏目 2．掌握企业网站色彩搭配和风格创意 3．掌握网站设计的首页 4．掌握模板的创建 5．熟悉系统设计分析 6．掌握创建数据表 7．掌握创建数据库连接 8．掌握制作购物系统前台页面 9．掌握制作购物系统后台页面 二、实习内容 首先，修改计算机的设置，使之能正常浏览。修改默认网站的目录安全性，允许ISS控制密码，建立虚拟目录。安装横向区域重复。 其次，开始创建模板。新建moban.html，然后在里面插入表格，依次插入相应的图片及文字。然后利用模板做出相应的页面，最后在连接数据库做出新闻发布、新闻详细显示及添加页面。那么，要制作的就完成了。 再次，打开dreamwever，建立站点，打开Index.html，另存为Index.asp，插入4行1列的表格，将光标置入第1行，插入图像，在后面的表格输入相应的文字，在绑定面板添加记录
集Rs1。选中图像，展开Rs1，选中Image字段，绑定图像。在后几行绑定相应的文字，选中表格，选中服务器行为，创建横向区域重复。选中Rs1.shpname，单击服务器行为，选择转到详细页面。再添加记录集Rs2，将光标置入相应位置，绑定fenlei字段，单击服务器行为，选择重复区域。选中Rs2.fenlei，选择服务器行为的转到详细页面。再插入1行4列的表格，输入相应的文字，选中首页，选择记录集分页--移至第一条记录，后面的以此类推。商品分类展示页面至此做好。用同样的方法制作商品详细页面。 下面制作购物系统后台管理页面，打开Index.html，另存为denglu.asp，按照相应的方法将商品分类页面做好，将光标置入相应的位置，插入表单，在表单中再插入4行2列的表格，选中第1行单元格，合并单元格，在合并单元格中输入相应的文字。将光标置入第2行第1列单元格，输入相应的文字，在第2列插入表单—文本域，在文本框输入name，字符宽度设置为25，类型为单行。将光标置入第3行第1列，输入相应的文字，在第2列插入表单—文本域，在文本框输入password，字符宽度设置为25，类型为密码。将光标置入第4行第2列，插入表单按钮，改为登录，在插入一个表单按钮，改为重置。 选中表单，单击行为面板中的检查表单，将文本域name和password的值都勾选为必须的，创建记录集，单击服务器行为的用户身份验证—登录用户，如果登录成功，转到guanli.asp，
网页设计与制作实训报告 本人页教学实验设计与制作实训报告 本人制部门：计算机科学与技术同系 班级：计算机应用技术10-1组号：15组姓名：杨江郑传胜 胡登杰田鹏鹏 贵州师范大学商业高等专科学校九千科系CommercialCollegeOfGuiZhou 项目实训单 项目本人号3-2项目名称本人页模板设计实训学时2学时 【项目名称】：本人页模板设计实训其二【项目类型】：□认知 与验证型□综合与仿真型□设计与创新型三【实训目的】：文字 学使学生了解模板的基础知识，掌握模板设计制作的基本技能，具备 企业本人站模板设计制作战斗能力的能力，完成各本人组真实企业本 人站模板模块化东站四【实训环境】：windowsxp；dreamweaver8；fireworks8五【实训内容】：1 本人页模板设计：2 利用fireworks切割源图片；3 将从fireworks片区切割的区域依次放 置到示例的各单元格中；4 dreamweaver中所添加可本人本人区域； 5 利用模板件快速生成本人站页面；六【讨论本人录】站点： 忆梦站点组长：杨江组员：胡登杰郑传胜田鹏鹏分工：杨江 负责客运站定义超级连接表格胡登杰负责讨论本人录郑传胜 负责图片处理和切图田鹏鹏负责页面生成七【实训步骤】：本人 页模板设计：步骤，打开设计制作出的表格及实设计出的本人站样图 步骤二，利用fireworks切割源图片，使用按钮，选取被切割的地区，并选择菜单栏的件选项选择“导出”图像，保存为相应的五件名。步 骤三，将从fireworks片区切割的区域依次放置到示例的各单元格中，完成各图片的插入后，将件另存为本人页模板（“件”“另存为模板”）件，取名为moban.dwt。步骤四，在模板中“当前位置”及“正”
网页设计与制作课程标 准 公司内部编号：（GOOD-TMMT-MMUT-UUPTY-UUYY-DTTI-
《网页设计与制作》课程标准前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用， 一、课程的说明： 通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。 二、课程内容与基本要求： 该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：
三、教学目标 1、职业关键能力目标 (1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法 (13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法
《网页设计与制作实训》指导书 --以“五岳独尊泰山”为例 一、规划网站 1．策划网站主题 在着手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。本次所创建的网站是一个名山宣传类网站，主要以五岳独尊泰山为主题，包括泰山简介、泰山文化、泰山名吃、泰山地质、环境和神话传说等内容。 2．确定网站风格 确定好站点主题后，就要根据该主题选择站点的风格。由于本次所创建的网站是一个名山宣传类网站，要求结构清晰，能够展现出泰山的魅力所在。本网站的主要特点如下： （1）设计风格要大众化，为了提高浏览速度，精选图片，同时尽量减少图片的使用，更多地使用层、表格实现效果。 （2）背景颜色以灰色和白色为主，文字颜色以黑色为主、蓝色和红色为辅。 （3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为14像素。 （4）首页的版式结构采用典型的“三”字型结构，首页如图1-1所示。 图1-1 首页设计浏览效果
二级页面采用与首页统一的风格设计。 该网站名称为“五岳独尊泰山”，所有网页的标题为“五岳独尊—泰山”，个人根据所定主题确定。英文名称为“MountTai”。 3．构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。“五岳独尊泰山”的栏目结构如表1-1所示。 表1-1“五岳独尊泰山”的栏目结构 为了简化对网站的浏览过程，大部分网页通过栏目就能浏览内容页面，首页的主菜单包括9个菜单项：泰山简介、泰山文化、泰山名吃、泰山自然、泰山地质、神话传说、泰山景点、泰山美图、寄语泰山。 4．规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。“五岳独尊泰山”的目录结构，各文件夹的所存放文件类型如表1-2所示。 ※注意※ 文件夹和文件的名称建议不要使用中文名，因为中文名在HTML 文档中容易生成乱码，导致链接产生错误。 表1-2网站的目录结构及其存放的文件类型
《网页设计与制作》课程简介 课程名称：网页设计与制作 课程代码：02038 适用专业：初等教育（计算机与信息技术方向） 课程性质：专业核心课程、必修课、专业技能课 学分：3 学分 计划学时：72学时（理论36学时，实训36学时） 一、前言 1. 课程性质 本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。 本课程的先修课程是《计算机应用基础》，后续课程是《https://www.doczj.com/doc/8810183345.html,程序设计》。在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。在以后学生还将学习《https://www.doczj.com/doc/8810183345.html,程序设计》课程，能设计和制作动态网页。 2. 课程基本理念 初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。 3. 课程设计思路 根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。课程以工作任务来组织内容，以案例驱动贯穿教学过程。由浅入深，最后完成主题网站的开发项目。课程教学中以Dreamweaver的使用为主线，要重视HTML
《Dreamweaver网页设计与制作案例教程》 实训报告 专业：计算机网络技术 年级： 2013级 姓名： 学号： 辅导老师： 制作电子商务类网站首页 一、网站建设的前期准备工作 1、网站整体需求分析 网站整体需求主要包括以下几个方面： 1)网站建设背景及目标 2)网站建设现状分析 3)网站建设目标分解 4)网站建设资金及人员投入情况分析 2、确定网站风格 根据电子商务网站的特点，确定网站的整体风格，即网站的色彩和版式。网站风格是在网站整体需求分析的基础上，通过明确网站设计的目的和用户需求、访问者的特点等得出的结论。本实例是针对一个工业产品交易平台的网站，网站与用户交互性强，因此确定其主色调为暖色系的橘黄色给人以轻松愉快的浏览环境。如图是电子商务网站的LOGO。
3、网站素材搜集 明确网站主题和划分板块后，接着要为后续的网站建设搜集素材。若想让网站有声有色，能够吸引客户注意，就要尽量搜集文字、图片、音频、视频、动画等多媒体素材。对于一些通用素材，可以从网上搜集得到，也可以根据需求自行制作素材，比如，通过Photoshop图像处理软件对图像进行优化处理，使用Flash制作动画等。如图所示。 二、创建站点 1、网站建设的第一步是创建本地站点。 2、创建的站点信息将显示在“文件”面板中。如果需要对站点参数进行修改，可以单击“站点→管理站点”对站点进行重新设置。 三、网站主页制作 1.使用Div+CSS布局页面 使用Div+CSS实现页面布局，具体操作如下： 4）为AP Div元素设置CSS样式。由于网站首页和子页面采取相同的布局风格，因此样式表采用外部链接样式表。 5）选中创建的AP元素“container”，在右侧的“CSS样式”面板中单击鼠标右键，选择“新建”命令，打开“新建CSS规则”对话框，并作相应设置，如图所示。 6）单击确定按钮，弹出“#container的CSS规则定义”对话框，选
《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。 （一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 （二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览 者接受和喜爱；
3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 （三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够 不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求： 可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接
《网页设计与制作》综合实训指导书 网站开发的参考案例 1.1 规划网站 1．策划网站主题 我们网站是德阳嘉兴别墅设计公司．公司遵循“奉献精湛技艺、铸造温馨家园、炼就英雄团队、创建百年老店”的发展理念，坚持“客户至上、重信守约、质优价平、热忱服务”的经营宗旨，追求“简约明快、美观时尚、突出个性、实用环保”的装饰风格，以新颖时尚的设计、规范精致的施工和热情人性的服务，为业主构筑温馨、舒适、精美、典雅的家园。 2．确定网站风格 确定好站点主题后，根据该主题选择站点的风格。所以本案例所建立的网站是别墅设计类网站。本网站的主要特点如下：
（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格或层实现效果。 （2）背景颜色以淡绿色为主、白色为辅，文字颜色以绿色为主、黑色和淡绿色为辅。 （3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。 3．构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。本案例的“别墅设计网”的栏目结构如表17-1所示。 表17-1 “别墅设计网”的栏目结构 为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括4个菜单项：设计风格，经典案例，作品展示，公司简介。 4．规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。“别墅设计网”的目录结构，各文件夹的所存放文件类型如表17-3所示。 表17-3 网站的目录结构及其存放的文件类型
实验一网页的认识 实验目的 1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件； 2、利用记事本来编辑HTML文档并浏览； 3、熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统，内部组成局域网，外连Internet互联网。 实验重点及难点 ◆熟悉HTML的结构、语法。 ◆熟悉HTML基本标记的使用。 实验内容 1、从网上（如网页制作大宝库https://www.doczj.com/doc/8810183345.html,等）下载网页制作时需要的小图片、 动画及flash等网页制作素材。 2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析 网页。 3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设 为主页。 4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”， 内容为司空曙的《江村即事》，如下图所示。 5、通过附录1的练习熟悉HTML基本标记的使用。（可参考第二章内容）
实验二 Dreamweaver基本操作（一） 实验目的 1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理； 2、熟悉网页文件的基本操作； 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验环境 WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。实验重点及难点 ◆文字的插入及设置。 ◆图像的插入及设置。 ◆各种超链接的创建。 实验内容 1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几 个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。 2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网 页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。 3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为 sy2-2.html，效果如图所示。 ●标题文字大小用
标记； ●作者信息文字大小为24像素，字体为幼圆，颜色为红色； ●古诗文字大小为24像素，字体为隶书，颜色为蓝色； ●在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20 个像素，颜色为棕色；广西玉林高级技工学校 《网页制作与设计》课程标准 一、课程基本信息 二、课程性质 本课程是中职计算机术专业的一门主干专业课程。通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。 三、设计思路 本课程标准的总体设计思路：以计算机专业学生的就业为导向，根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。 四、课程目标 1.职业知识目标 1．熟悉HTML 语言的作用和开发环境，能够编写HTML 代码； 2．掌握常用的HTML 标签，能够实现基本的图文信息显示； 3．理解HTML 页面框架的作用，能够针对需求进行框架的设计； 4．掌握各类HTML 表单元素标签，能够进行表单设计；
5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计； 6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局； 8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。 2.职业技能目标 1．能独立进行资料收集与整理、具备用户需求的理解能力； 2．能根据项目需求，具备项目页面的设计与实现能力； 3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力； 5．能根据DOM 树形结构，进行页面DOM 的控制； 6．具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。 3.职业素质目标 1．养成善于思考、深入研究的良好自主学习的习惯； 2．通过项目与案例教学，培养学习者的分析问题、解决问题的能力； 3．具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力； 4．通过课外拓展训练，培养学习者的创新意识； 5．具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。 五、课程主要内容与要求
一、实训目的： 通过实训，掌握网页制作系列软件Dreamweaver、Fireworks、Flash和Photoshop的使用方法。达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握理论的基础上再加以实践，进一步提高、加强设计、制作网站的综合能力。 二、实训过程 1.资料的搜集： 收集的资料主要是汽车图片，以及运用做页面局部框架背景的图片。 2.熟悉制作软件软件： 软件：Dreamweaver \ Firework \ Photoshop CS \ Flash 硬件：PC机 技术：HTML＼CSS \ javascript\特效代码 项目设计及运行平台：Windows XP
3.构建站点框架：网站结构图如下： 4．设计制作页面： ◆网页名称:关于我们 ◆网页的色彩：最主要是以白色背景为主导色，字体的主要色彩是黑色。链接字体颜色链接前设为蓝灰色，鼠标覆盖后为深红色。 ◆网页富有动感，通过GIF动画来展示，页面的色彩好与首页和栏目页统一主要采取白色。 ◆页面的大小，在1024X768像素下显示效果最佳。 ◆颜色调配设计，网页的色彩是树立网站形象的关键之一，各版块采用与网站首页同一色系的颜色，整个版块内部也尽量保持风格一致。 ◆网页内容的安排相互链接关系如下概述 最上面先放了一个724*100px的logo. 右边放了一个1024*100广告如下图：
再下来的表格中里放了一个我们用GIF的轮换效果展示知名品牌汽车，效果如图： 右侧是世界/中国地图及天气实况查询图。属特效代码。当鼠标覆盖时显示链接提示，点击即可查询各地当日天气情况，帮助驾车人员快速掌握天气情况。效果如下： 然后再表格里面分别放的是各种小版块。
《网页设计与制作》课程教学大纲 适用专业：计算机网络技术 学时：64学时 一、编写说明 （一）本课程的性质、目的和任务 《网页设计与制作》是计算机网络技术专业的一门专业基础课。通过本课程的学习，使学生能够掌握网页设计制作的基本知识和技巧，同时熟悉网站建设的基本知识，达到能独立构建简单网站或通过协作构建较复杂网站并设计相关网页的水平。 在完成基本知识教学的同时，还要通过实践环节，强化对学生动手能力的培养与训练。 （二）课程教学的基本要求 通过本课程的学习，要求学生掌握HTML语言的文档结构和基本标签使用，能综合应用Dreamweaver CS6软件、HTML和CSS技术制作网页；掌握规划、开发、发布和管理静态网站的专业知识和技能；能独立构建简单网站或通过协作方式完成较复杂网站的建设，培养学生将理论知识应用于实践并解决实际问题的能力，为今后的进一步学习打下坚实基础。 （三）实践环节
（四）本课程与其它课程的关系 先修课程：计算机应用基础、图像处理软件PhotoShop 后续课程：https://www.doczj.com/doc/8810183345.html,动态网站开发、中小型网站设计与开发等 （五）教学时数分配表 （六）考核方式与要求 1.该课程是考查课 2.考核形式：上机操作 3.成绩的计算方法： ①平时成绩：40％（主要评估学生的现实表现） ②试卷成绩：60％ （七）教材与主要参考书 1.教材： 《ADOBE DREAMWEAVER CS6标准培训教材》,ACAA专家委员会 DDC传媒编著,人民邮电出版社，2013年1月 2.主要参考书： 《中文版Dreamweaver CS6基础培训教程》,数字艺术教育研究室编著,人民邮电出版社，2014年6月