第一篇：网页设计与制作实训计划和考核.
网页设计实训方案
一、实训的和要求:(1掌握一般网站设计的基本思路和流程。(2培养学生独立创作网页、建设网站的能力。
(3要求学生独立制作网页,在网页中要融入 Flash 动画和用 PS 处理的图形,制作出具有一定思想和创意的网页。
二、实训组织形式及进行方式:(1网页体裁、形式、风格不限。
(2每组设立一个组长,负责组织分配该组成员的具体工作。
(3教师负责整个网页制作过程的体裁和内容的审核、系统指导 和监督工作。
三、实训内容和任务和要求: 内容:各组自主选题,设计主题网站,要有一定的实用价值。要求:学生使用 Dreamweaver cs3编辑网页、Flash cs3设计动画、PS 处理图形,三个软件结合使用,制作出别具风格,图文并茂的网 页。网站的网页数目要求包含一个主页和四个以上二级页面和 1个以 上三级页面,这些网页中至少要插入两个 Flash 动画。
四、实训进度及进度计划: 根据一般网站设计的流程安排实训进度。(1网站规划: 确定所要制作的网站的类型、主题、规模。写出书面性材料,画 出站点规划层次图,并做主要说明。(4学时
(2搜集、整理材料: 根据网站规划,上网浏览他人优秀网站,搜集相关材料并整理, 要有层次观念,养成归纳的好习惯。(4学时
(3网页设计与制作: ● 主页及内容设计
这一阶段是实训的核心部分, 首先总体规划一下整个网站内容的 结构,总体上把握网站的内容特点, 开始制作主页。主页的内容、结 构和链接设计应醒目、让人一目了然。(8学时
● 页面设计
主页制作完成后,学生们根据自己的设计思想来创作其他页面, 在页面设计时, 主要考虑整体布局、视觉平衡、页面尺寸和页面框架 等四个方面的因素。保持网站的整体设计风格统一一致, 避免凌乱的 思维方式,要做到有步骤、有计划的设计和制作。(6学时
● 文本、图片、动画等多媒体素材处理
网页是否生动、别具特色,还需强调文本、图片、flash 小动画 或 gif 动画的编辑以及声音和视频等的处理和加工是否保持相对的一 致性。这个方面主要考验学生的图形处理能力、艺术思维、美学技能 等几个方面的基本功。(4学时
(4网站调试: 网站的各个页面完成后, 就要进行站点的调试, 要做到网页三要 素的要求,力求准确、简洁、明快、结构简单。(2学时
(5网站发布展示: 网站基本建设好了, 就要发布到网站服务器上, 形成一个完整站 点。(2学时
五、考核方案
本实训总体上包括五个部分, 因此我们采取过程考核方式, 这样 的好处是:
1、能将任务细化,有根据性做到公平公正。
2、过程考核 制可以督促学生按时、认真的完成每一个环节。
3、能表现出学生的 优势与不足之处。
具体的考核方案为四个方面进行评价;
1、总体规划和资料收集:(20分 考核点及要求:(1规划书:规划书格式规范,思路清晰,主题鲜明,总体设 计合理,按时完成(15分(2素材:素材的收集能满足网页的需求,按时完成(5分
2、网业设计与制作:(50分
考核点及要求: 页面制作:有布局图,布局合理,排版整齐,主题鲜明,颜色搭 配合理,视觉良好,有商业价值,导航清晰,页面数量达标,按时完 成。
3、调试与发布:(15分 考核点及要求: 页面无错位,链接无误,无明显的文字错误, 图片都能显示,能 发布成功。
4、平时考勤:(15分
每天点名全勤者满分一次不到扣 5分直到为 0分。
第二篇：《网页设计与制作》综合实训
《网页制作》期末大作业
一、概述：
要求设计并制作一个表达某个主题的网站，通过网站的制作，综合运用本课程各单元所学的知识。网站的内容不能是一些素材如图片、音乐等的堆积，必须有鲜明的主题。可以从网上下载部分资料，但不能超过整个内容的30%，更不要指望从网上下一个完整的网站应付老师。总的页数应超过10页（一个包含主题内容的htm文件算一页）。请同学们注意不要下载相同的资料，如果出现网页内容雷同，双方都要扣分，严重的必须重做。
二、网站内容：
自行选择如下内容：科普、科幻知识；公益形象宣传；大、中、小学教学用动画形象；奥林匹克体育；环境保护；战争与和平；求职；校园生活；诚信、传统美德；交通安全；卫生与健康；爱心；教育；新青年；管理；实用工具等。自己确定一个主题，整个网站要突出主题，信息分类合理，导航清晰。要求必须有自己创作的内容，这些原创内容可以是文字、图片、动画等。
三、版面及格式：
l、要求图文并茂，颜色搭配合理，但是图片及声音文件不要太大。如果能加入自己创作的动态元素(如Flash，Gif动画等)将获得加分。希望充分发挥自己的创作能力。
2、要求每个网页都使用表格布局。
3、要求网页中插入有Web组件，包括悬停按钮、滚动字幕、横幅广告管理器等。
4、导航设计简洁明了，不能有“死链接”，要保证能够在网络上浏览。
5、自创内容越多越好，得分越高。
四、递交方式：
1、每个同学以自己的学号姓名建一个文件夹，上交时间为18周2、所做网页的首页文件名必须为index.htm3、所有文件名和目录名全部使用英文字母和数字，不得使用汉字或全角符号，否则，网络将出现死链接。
4、递交时必须把网页中所有用到的图片、声音、动画等都一起上传到服务器。网页的总容量一般不要大于3MB5、建议将网页中的素材分类，建立不同的子目录存放。
五、网页评分标准:
整个网页的评分强调“自己的创意”，不管主题是什么，也不论是哪一个栏目的内容，如果创意独特，有自己鲜明的个性、观点，得分较高。
1、主题鲜明，有关主题的内容丰富（30分）
2、原创内容丰富，能体现自己的想法，文字流利通顺（30分）
3、版面布局合理，整理效果美观（20分）
4、其他内容如友情链接、相关资料等（5分）
5、插入的图片等素材恰当、美观（5分）
6、技术含量（使用了各种效果、技术等）（10分）
六、网页制作特别注意事项：
1、网页文件名最好全部用英文字母或数字（不能包含汉字）；
2、整理图片和其他素材；
3、在与网页主文件（index.htm)同级的目录中建立子目录image(图片）、wave(声音）、„等，将取得的素材按类保存好，在制作网页（即编辑HTM文件）时，必须从这些目录中插入素材，以保证显示正确，不能从其他目录插入，提示另外保存图片时，不要改变保存目录，直接按[确定]即可。同学们要改变那种在编辑网页时到处找图片，找到了就往HTML文件中插的坏习惯(也不管这个文件在哪里）；
4、作好笔记将对后期调试非常有利，从开始规划起就记录目录名、文件名的分配，以便调试时节省时间。
第三篇：网页设计与制作实训报告[范文]
《网页设计与制作》
实习报告
指导老师：
实习地点：
实习时间：
实习班级：
学生姓名：
一、实习目的① 学会制作新闻发布系统。
② 学会制作在线调查系统。
③ 熟悉购物网站的主要功能和栏目。
④ 学会购物网站数据库表的创建和数据库连接的创建。
⑤ 学会购物系统前台页面制作和后台管理制作。
二、实训内容
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“显
示为”下拉列表中选择“菜单”，并在“菜单属性”里的“域”列表中选择fenlei。
⑤ 修改页面点进去初始内容都一样，“唯一键列”下拉列表中应选择shpID。
⑥ 商品分类点进去每个种类都一样，查找原因，发现记录集中筛选是shpID，把记录集中的筛选改为fenleiID解决。
四、实训心得
经过一周动态网页的实训，使我们对本学期的这门课进行了整体的汇总。在这汇总期间，也算是对自己本学期的一个考核，此次实训暴露出了许多我自身存在的问题，同时也对自身有了很大的提高。
在这次实训中，我也有许多收获。首先，我体会到了作为一个计算机专业的人，不会用DW的痛苦和尴尬。在制作的过程中遇到问题，可以说得是困难重重，这毕竟是第一次独自制作动态网页，难免会遇到过各种各样的问题，同时在制作的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固。在此过程当中弥补了我许多知识上的缺陷，弄清的以前没有搞懂的知识点。经过多番的努力和辛酸，我成功地完成了这次过程艰辛的实训，而且我从中体会到了一种叫做‘成功的喜悦’的感觉，那种小有成就的兴奋是只有置身其中的人才能体会的。
在实训过程中，我更体会到了基础知识的重要性，也许我们正在迷惘，我们是否学到了东西，但事实说明零零散散的知识，在项目开发当中起到了非常关键的作用，我们不缺少时间和工具，我们只是缺少经验和动手能力，如果我们以后能更好的在各方面增长自己的经验，相信我们能在长长的就业队伍中脱颖而出的！相信自己，相信未来。今后我将会更加努力的学习，不断提高自身素质，为我将来的就业打下良好的基础
第四篇：网页设计与制作实训报告
《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规则定义”对话框，选择分类列表框下的“背景”选项卡，设置文档的“背景颜色”为#FFF；在分类列表框中，切换到“区块”选项卡，设置“文本对齐”属性为左对齐；在分类列表框中，切换到“方框”选项卡，设置Ap Div的“宽”为960 px，“上边界”为1 px，“下边界”为0 px；“边框”和“列表”选项卡的属性保持默认设置；切换到“定位”选项卡，单击确定按钮，完成对“#container”元素样式的定义。设置后的“CSS样式”面板如图所示。
/* ==整体布局定义开始== */ #Container { width:960px;/*定义页面宽度*/ visibility:visible;/*设置可见度*/ margin:1px auto 0;/*设置外边距*/ background-color: #FFF;/*定义背景颜色*/ } 2.设置页面属性
在style.css样式表文件内部设置网页的页面属性。页面属性是对
标签属性的设置。代码如下所示： body{ font-size:12px;/*定义字号*/ color:#666;/*定义字体颜色*/ background:#FFF;/*定义背景颜色*/ text-align:center;/*定义文本位置*/ margin:0;/*定义外边距*/ padding:0;/*定义外边距*/ border:0;/*定义边框粗细*/ background: transparent;/*定义背景透明*/ } 也可以打开index.html，选择“修改→页面属性”菜单命令，在打开的“页面属性”对话框中进行相应设置。3.插入图片
在顶部的“top”元素中插入一幅图像。如图所示。
4.添加导航条
网页导航条是非常重要的网页元素，网页间的跳转，需要通过导航条来完成。
1）将光标定位在“nav” Div元素中，在其内部输入列表项，并为列表项的各个单元设置超链接。设置情况如图所示。
2）添加CSS样式，需要在style.css文件中输入相关代码。#nav { height:30px;/*定义高度*/ width:100%;/*定义宽度*/ background-color:#c00;/*定义背景颜色*/ overflow: hidden;/*定义溢出效果*/ } #nav ul { font-size:12px;/*定义字号*/ color:#FFF;/*定义字体颜色*/ line-height:30px;/*定义字体行高*/ white-space:nowrap;/*定义区块空格*/ margin:0 0 0 30px;/*定义外边距*/ padding:0;/*定义内边距*/ } #nav li { list-style-type:none;/*定义列表类型*/ display:inline;/*定义区块显示效果*/ } #nav li a { text-decoration:none;/*定义字体修饰*/ font-family:Arial, Helvetica, sans-serif;/*定义字体*/ color:#FFF;/*定义字体颜色*/ padding:7px 10px;/*定义内边距*/ } #nav li a:hover { color:#ff0;/*定义字体颜色*/ background-color:red;/*定义背景颜色*/ 该样式表使用列表项实现导航菜单功能。效果如图所示。
5.推荐厂家
1）把光标置于DIV元素“left”中，创建新的DIV元素 sideBarLefta1，并定义相关样式
2）在DIV元素“sideBarLefta1”的内部插入推荐厂家标志及说明文字等信息，定义相关样式如图所示。
3）在style.css样式表中插入下面的代码，#left { float:left;/*定义浮动位置 */ width:640px;/*定义宽度 */ height:832px;/*定义高度 */ }.sideBarLeftb1 { width:238px;/*定义宽度 */ height:240px;/*定义高度*/ border:#ebcbb4 solid 1px;/*定义边框的颜色、粗细、样式*/ } 6.网页广告设计制作
1）将光标置于div元素“#left”中，插入一个嵌套的div元素#sideBarLefta2，2）将光标置于DIV元素“banner”中，插入一个已经准备好的SWF元素。
3）选中“banner”下面DIV元素，并定义类为“hot”，在4个小DIV元素中分别插入准备好的广告图，效果如图所示
style.css样式表中插入的代码如下： #sideBarLefta2 {
float:left;/*定义浮动位置 */ width:390px;/*定义宽度 */ height:268px;/*定义高度*/ overflow: hidden;/*定义溢出效果*/ } #banner { margin-top:5px;/*定义顶端外边距*/ border:#999 solid 1px;/*定义边框的颜色、粗细、样式*/ width:390px;/*定义宽度 */ }.hot{ display:inline;/*定义区块显示效果*/ border:#999 1px solid;/*定义边框的颜色、粗细、样式*/ width:91px;/*定义宽度 */ height:70px;/*定义高度*/ float:left;/*定义浮动位置 */ margin:2px;/*定义外边距*/ } 7.页面右侧栏目设计
1）将光标置于DIV元素“right”中，插入已经准备好的图片service.jpg。如图所示。
2）在service.jpg下面插入两个div，分别定义为.sideBarRightb3和.sideBarRightb4，在新建的div中插入准备好的广告图像ad1.jpg和ad2.jpg并在属性面板中定义超链接，效果如图所示。
在style.css中添加的代码如下： #right { float:left;/*定义浮动位置 */ width:320px;/*定义宽度 */ height:832px;/*定义高度 */ }.sideBarRightb3 { height:60px;/*定义高度*/ margin-top:5px;/*定义顶端外边距*/ border:#ebcbb4 1px solid;/*定义边框的颜色、粗细、样式*/ }.sideBarRightb4 { height:93px;/*定义高度*/ margin-top:5px;/*定义顶端外边距*/
border:#ebcbb4 1px solid;/*定义边框的颜色、粗细、样式*/ margin-bottom:5px;/*定义底端外边距*/ }.sideBarRightb3,.sideBarRightb4 img { text-align:center;/*定义文本位置 */ padding:5px;/*定义内边距*/ } 8.行业栏目设计
1）将光标置于DIV元素“left”中，在其下侧插入一个嵌套的DIV元素“sideBarLeftb2”。
2）选中Div元素“sideBarLeftb2”，将光标定位在其内部，创建多个新Div，为了方便日后的维护我们将新建Div单独定义为.sideBarLeftb3。
3）选中DIV元素“sideBarLeftb3”，在style.css中添加的代码如下：
sideBarLeftb3 { text-align:left;/*定义文本位置 */ float:left;/*定义浮动位置 */ height:150px;/*定义高度*/ width:280px;/*定义宽度 */ padding:4px;/*定义内边距*/ } 4）将光标移到sideBarLeftb3的DIV元素中，插入两行列表并对列表设置相关CSS参数。在style.css中添加的代码如下：.sideBarLeftb3 ul { font-size:12px;/*定义字号*/ line-height:6px;/*定义字体行高*/ float:left;/*定义浮动位置 */ width:270px;/*定义宽度 */ margin:0 0 0 5px;/*定义外边距*/ padding:0;/*定义内边距*/ } 5）在列表中添加列表内容，代码如下：
- 密封件
- 粉碎机
- 压缩机
- 减速机
- 机械加工
- 焊机
- 风机
- 机床
- 弹簧
- 齿轮
- 锅炉
- 更多
第五篇：网页设计与制作实训十二
《网页设计与制作》实训
表单设计
实训内容：用户注册界面设计
操作提示：
第一步：制作“用户注册”界面
1）在Dreamweaver CS4中新建一个网页文件，将网页标题设置为“用户注册”。2）选择“插入→表单→表单”命令在文档中插入一个表单，如图12-1所示。
图12-1 插入表单
3）将光标置于创建的表单内，插入一个12行2列的表格，并设置表格的宽度为530像素、间距为0像素、边框为0像素。
4）选中第一行的两个单元格，单击“修改→表格→合并单元格”命令，将它们合并为一个单元格。用同样的方法将最后一行的单元格合并为一个单元格，如图12-2所示。
图12-2
插入的表格 5）将光标置于第一行的单元格中，输入“用户注册”，在单元格“属性”面板中设置文本居中对齐。
6）根据图12-3提供的界面内容，分别在表格第1列的其它单元格中输入昵称、真实姓名、密码等文本。选中输入的文本，并将它们设置为粗体、右对齐方式。
图12-3
输入文本
7）选中表格中所有的单元格，在单元格“属性”面板中设置单元格的高为30。第二步：插入文本域
1）在图12-2所显示的表格中，将光标置于“昵称：”后面的单元格中，单击“表单”标签中的“文本字段”按钮，或者选择“插入→表单→文本域”命令，均将打开“输入标签辅助功能属性”对话框，如图12-4所示。
图12-4
“输入标签辅助功能属性”对话框
2）单击【确定】按钮，在光标处插入了一个单行的文本域。3）选中插入的文本域，其对应的“属性”面板如图12-5所示。
图12-5
文本域“属性”面板
文本域“属性”面板中各选项含义如下：
文本域：用于标志该文本域的名称。每个文本域的名称都不能相同，它相当于表单中的一个变量名，服务器通过这个变量名来处理用户在该文本域中输入的值。
字符宽度：设置文本域中最多可显示的字符数。当设置该选项后，若是多行文本域，标签中增加cols属性，否则标签增加size属性。如果用户的输入超过字符宽度，则超出的字条将不被表单指定的处理程序接收。
最多字符数：设置单行、密码文本域中最多可输入的字符数。当设置该项后，标签增加maxlength属性，如果用户的输入超过最大字符数，则表单产生警告声。
类型：设置文本域的类型，可在单行、多行或密码3个类型中任选一个。“单行”类型将产生一个标签，它的type属性为text，这表示此文本域为单行文本域。“多行”类型将产生一个