平面广告项目设计与制作综合实训

第一篇：平面广告项目设计与制作综合实训

平面广告项目设计与制作综合实训 项目1 标志设计

1.1 标志设计简介

1.2 教学活动 旅行社标志设计

1.3 体验活动 企业标志设计 项目2 UI设计

2.1 UI设计简介

2.2 教学活动 手机操作界面设计

2.3 体验活动 手机音乐界面设计 项目3 卡片设计

3.1 卡片设计简介

3.2 教学活动 普通会员卡设计

3.3 体验活动 VIP会员卡设计 项目4 名片设计

4.1 名片设计简介

4.2 教学活动 企业名片设计

4.3 体验活动 个人名片设计 项目5 信封设计

5.1 信封设计简介

5.2 教学活动 企业信封/信纸设计

5.3 体验活动 商业信封的设计 项目6 盘面设计 6.1 盘面设计简介

6.2 教学活动 演出光盘及封套设计

6.3 体验活动 房地产企业宣传光盘盘面设计 项目7 DM广告设计

7.1 DM设计简介

7.2 教学活动 产品宣传DM设计

7.3 体验活动 护肤品宣传DM设计 项目8 海报设计

8.1 海报简介

8.2 教学活动 促销海报设计

8.3 体验活动 高尔夫球场宣传海报设计 项目9 包装设计

9.1 包装设计简介

9.2 教学活动 食品包装设计

9.3 体验活动 茶品包装设计 项目10 书籍装帧设计

10.1 书籍装帧设计简介

10.2 教学活动 书籍封面设计

10.3 体验活动 杂志封面设计 项目11 字体设计

11.1 字体设计简介

11.2 教学活动 火焰文字设计 11.3 体验活动 制作变形文字 项目12 宣传画册设计

12.1 宣传画册设计简介

12.2 教学活动 产品宣传画册设计

12.3 体验活动 旅游画册设计 项目13 展板设计

13.1 展板设计简介

13.2 教学活动 医疗展板设计

13.3 体验活动 人物宣传展板设计 项目14 数码照片处理

14.1 数码照片处理简介

14.2 教学活动 将照片处理为个性电影海报

14.3 体验活动 调整照片梦幻紫色调 项目15 易拉宝设计

15.1 易拉宝设计简介

15.2 教学活动 易拉宝的设计

15.3 体验活动 打印机宣传展架设计 项目16 折页设计

16.1 折页设计简介

16.2 教学活动 产品宣传三折页设计

16.3 体验活动 活动三折页设计 项目17 招贴广告设计 17.1 招贴广告设计简介

17.2 教学活动 戒指招贴广告设计

17.3 体验活动 皮鞋招贴广告设计

第二篇：《网页设计与制作》综合实训

《网页制作》期末大作业

一、概述：

要求设计并制作一个表达某个主题的网站，通过网站的制作，综合运用本课程各单元所学的知识。网站的内容不能是一些素材如图片、音乐等的堆积，必须有鲜明的主题。可以从网上下载部分资料，但不能超过整个内容的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、作好笔记将对后期调试非常有利，从开始规划起就记录目录名、文件名的分配，以便调试时节省时间。

第三篇：《网页设计与制作综合实训》实训指导书

武汉商贸职业学院 信息工程学院

《网页设计与制作综合实训》实训指导书

软件教研室 2013年9月 《网页设计与制作综合实训》实训指导书

目录

实训目的...........................................................................................................................................1 实训内容及要求...............................................................................................................................1 实训性质、实训地点、实习时间安排，适用专业班级...............................................................2 实训一 站点的规划设计..................................................................................................................3 实训二 设计案例网站LOGO.........................................................................................................4 实训三 设计案例网站BANNER...................................................................................................5 实训四 设计案例网站导航条.........................................................................................................6 实训五 设计案例网站网页内容和网页版权声明.........................................................................7 实训六 对案例网站版面切图.........................................................................................................8 实训七 制作完成案例网站首页.....................................................................................................9 实训八 案例网站模板的制作.......................................................................................................10 实训九 案例网页超级链接的添加...............................................................................................11 实训十 案例网站加入动态元素...................................................................................................12

第2页 《网页设计与制作综合实训》实训指导书

实训目的

在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。

本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。

通过本次实训希望达到以下目的：

1.熟悉和掌握Dreamweaver软件的使用方法； 2.熟悉和掌握PS软件的使用方法； 3.熟悉FLASH软件应用的方法； 4.学会使用CSS+DIV做网页布局； 5.熟练掌握站点的规划与设计

实训内容及要求

本实训的内容简述： 1.网站首页（1）专业概况（2）专业建设规划

（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2.专业概况

点击项目概况，显示相关文本 3.专业建设规划

点击项目申报书菜单，显示flashpaper格式的申报书内容 4.专业建设特色

显示专业建设特色的文章标题列表，点击标题进入内容 5.专业建设动态

显示专业建设动态的标题列表，点击标题进入成果详细展示 6.专业建设成效

显示专业建设成效的标题列表，点击标题进入成果详细展示。本实训的要求：

1.应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。2.显示环境：网页视觉效果应采用Internet Explorer 6.0以上版本浏览器，显示分辨率以1024×768状态为准。

第1页 《网页设计与制作综合实训》实训指导书

3.网页规模：网页总量原则上不应超过10M，且必须要是不连接互联网就可以进行展示的作品。

4.网站结构：要求结构清晰，文件有清晰的分类，比如图片都放在images文件夹下等。

5.要求页面美观大方、颜色搭配协调；

6.作品留存，下学期或下一阶段继续完善、开发。

实训性质、实训地点、实习时间安排，适用专业班级

该实训为校内模拟实训。根据高等教育教学大纲规定和学院教学计划安排及培养学生职业技能的要求，软微班的学生于第一学期进行为期4周的校内实训，项目名称为《网页设计与制作综合实训》。

实训时间：2013-2014学年第一学期第15-18周 实训班级：软件1301班、软件1302班 实训地点： 学校机房

第2页 《网页设计与制作综合实训》实训指导书

实训一 站点的规划设计

1、学时分配：6学时

2、实训目的

（1）熟悉Dreamweaver软件的界面布局和工作环境。（2）熟练掌握本地站点创建和管理的方法。

3、实训任务

（1）创建一个静态网站站点。（2）从网络上收集网页素材。

（3）根据提供的网站策划方案范本，结合自己要制作完成的网站，开始着手书写网站策划方案。

4、实训内容

（1）打开Dreamweaver 软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Dreamweaver 软件。

（2）在本机D盘上创建文件夹“home”，在“home”文件夹下根据网站的规划设计，创建相关的文件夹，用来放置不同的文件。

（3）在Dreamweaver 软件中，将D盘 “home” 文件夹定义成静态网站站点，站点名称任意。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第3页 《网页设计与制作综合实训》实训指导书

实训二 设计案例网站LOGO

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的界面布局和工作环境。（2）熟练掌握网站LOGO的设计方法。（3）创建项目案例网站的LOGO。

3、实训任务

（1）掌握Photoshop软件文字工具工具的使用方法。（2）查看网络上相关网站LOGO。

（3）根据小组讨论结果，实际动手完成网站的LOGO。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Photoshop软件。

（2）新建Photoshop文件，大小为980*600像素，分辨率为72像素/英寸，颜色模式为RGB颜色8位，背景颜色为白色或者透明都可以。（3）使用文字工具，输入MZD三个字母，设置文字属性。

（4）栅格化文字图层，将栅格化后的图层上的3个字母分别移动到不同的3个图层上。

（5）分别对3个字母进行艺术化处理。（6）输入其他的文字。

（7）为输入的文字图层设置“混合选项”。（8）保存文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第4页 《网页设计与制作综合实训》实训指导书

实训三 设计案例网站BANNER

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的使用方法。（2）熟练掌握网站BANNER的设计方法。（3）创建项目案例网站的BANNER。

3、实训任务

（1）掌握Photoshop软件渐变工具的使用方法。（2）查看网络上相关网站BANNER。

（3）根据小组讨论结果，实际动手完成网站的BANNER。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。

（2）打开上次保存好的Photoshop源文件，在上次完成的LOGO基础上，准备开始制作本次的BANNER。

（3）根据网站策划方案里的主色调和主题的要求，开始设计网站的BANNER，首先去选择一张适合的图片。

（4）使用矩形选框工具选择要使用的图片部分，图片的其他部分删除。（5）根据设计要求，在BANNER上添加其他元素，比如文字或者其他能够表达网站主题的图片。

（6）使用魔术棒工具将要放置到BANNER上的图片的某一部分扣出来，然后设置适合的大小，旋转好方向后放好。

（7）设置图层的样式，以及文字的混合选项等。（8）保存文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第5页 《网页设计与制作综合实训》实训指导书

实训四 设计案例网站导航条

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的使用方法。（2）熟练掌握网站导航条的设计方法。（3）创建项目案例网站的导航条。

3、实训任务

（1）掌握Photoshop软件圆角矩形工具的使用方法。（2）查看网络上相关网站导航条。

（3）根据小组讨论结果，实际动手完成网站的导航条。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。

（2）查看网上其它网站的导航条，了解导航条的基本情况。

（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的导航条。

（4）根据网站策划方案里的主色调和主题的要求，开始设计网站的导航条，首先去选择一张适合的图片。

（5）使用圆角矩形工具绘制一个圆角矩形，颜色与大小要与整个网站的风格与主题相一致。

（6）选中绘制好的圆角矩形，使用渐变工具，绘制立体感导航条背景。（7）输入导航条文字，输入导航条文字间的竖线间隔。（8）设置文字和竖线的混合选项，增加立体感。（9）保存文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第6页 《网页设计与制作综合实训》实训指导书

实训五 设计案例网站网页内容和网页版权声明

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的使用方法。

（2）熟练掌握网站网页内容和网页版权声明的设计方法。（3）创建项目案例网站的网页内容和网页版权声明。

3、实训任务

（1）掌握Photoshop软件多种工具结合的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手完成网站的网页内容和网页版权声明。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。

（2）查看网上其它网站的网页，了解网页对象分布的基本情况。

（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的网页内容和网页版权声明。

（4）根据网站策划方案里的主色调和主题的要求，选择灰色与深蓝色作为边框颜色，网页内容标题文字颜色为黑色。

（5）以制作通知公告为例，使用文字工具输入文字“通知公告”，文字大小为14号，文字颜色为黑色，文字字体为“宋体或者黑体”，根据自己的理解，可以为文字增加“混合选项”，设置文字效果。（6）新建图层，选择“线条工具”，线条粗细为1 像素，颜色为黑色或者深蓝色都可以，绘制一条直线。

（7）新建图层，选择“圆角矩形工具”，半径为50 像素，颜色为黑色或者深蓝色。

（8）新建图层，选择“文字工具”，在刚才绘制好的圆角矩形上输入“More”，文字大小是12，颜色为白色，字体为“Arial”。

（9）使用同样的办法可以制作完成其他网页内容部分的标题。（10）保存文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第7页 《网页设计与制作综合实训》实训指导书

实训六 对案例网站版面切图

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的使用方法。（2）掌握网站版面设计的方法。（3）对案例网站版面进行切图。

3、实训任务

（1）掌握Photoshop软件切片工具的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手对网站版面进行切图。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。

（2）查看网上其它网站的网页，了解网页对象分布的基本情况。

（3）打开制作好的网站版面源文件，使用切片工具准备对版面进行切图。（4）使用参考线将网站版面部分之间进行分割。（5）使用切片工具对网站版面进行切割。

（6）切图完成后，选择“文件”——“存储为WEB所用格式”，存储文件类型可以选择“JPEG”或者“GIF”。（7）整理保存好的文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第8页 《网页设计与制作综合实训》实训指导书

实训七 制作完成案例网站首页

1、学时分配：6学时

2、实训目的

（1）熟悉Dreamweaver软件的使用方法。（2）掌握使用表格布局网页的方法。（3）制作完成案例网站首页。

3、实训任务

（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手完成案例网站首页。

4、实训内容

（1）预览实训网页。

（2）在D盘根目录下新建一个文件夹“home”，在该文件夹中分别新建“css”、“images”，“html”三个文件夹，（3）打开Dreamweaver软件，将“home”文件夹定义为站点。

（4）创建一个命名为“index.html”的网页文档，设置网页的页面属性。（5）根据网页首页效果图，插入表格，进行表格的嵌套，完成网页首页的布局。（6）在网页插入的表格中输入文字、水平线和日期等内容，设置文本的属性。（7）在网页中插入图像，设置图像的属性。

（8）创建CSS样式表文件，分别定义需要添加效果的不同CSS样式。（9）在网页上分别应用不同的CSS样式。（10）保存网页文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第9页 《网页设计与制作综合实训》实训指导书

实训八 案例网站模板的制作

1、学时分配：6学时

2、实训目的

（1）熟悉Dreamweaver软件的使用方法。（2）掌握网页模板的制作方法。

（3）掌握使用网页模板创建网页的方法。

3、实训任务

（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手制作网页模板。

4、实训内容（1）根据下发的“二级网页.jpg”，在Photoshop软件中设计完成二级网页版面，并且切图制作网页。

（2）查看网上其它网站的网页，了解网页对象分布的基本情况。

（3）在Dreamweaver软件中打开制作好的二级网页，选择“文件”—“另存为模板”，将制作好的网页转化为模板文件。（4）在创建好的模板网页上插入“可编辑区域”，根据需要可以插入多个可编辑区域。

（5）也可以选择“文件”—“新建”—“模板文件”，重新创建一个新的模板文件，跟制作网页的方法一样，制作完成模板网页后，一定要在模板网页中插入可编辑区域。

（6）选择“文件”—“模板”，选择创建好的网页模板，选择“由模板创建”，利用制作好的模板来生成网页。

（7）在生成的网页中的可编辑区域中添加相应的网页内容。（8）对创建好的网页模板进行编辑，并且进行更新。（9）整理保存好的文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第10页 《网页设计与制作综合实训》实训指导书

实训九 案例网页超级链接的添加

1、学时分配：6学时

2、实训目的

（1）熟悉Dreamweaver软件的使用方法；（2）掌握网页超连接的添加和设置方法；（3）创建完成案例网页的超连接。

3、实训任务

（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手创建网页超链接。

4、实训内容

（1）根据设计好的二级网页版面，制作网页模板。（2）打开Dreamweaver软件使用创建的二级网页模板来创建主页的新闻网页。（3）根据首页新闻链接标题内容，选择新闻网页内容，并将新闻内容添加到使用网页模板生成的新闻网页中。

（4）为首页新闻文字添加文字超链接。

（5）在创建新闻网页的模板文件中添加返回首页的链接。（6）更新网页。

（7）根据首页导航条内容，选择合适的网页内容，使用二级网页模板生成相应网页。

（8）为首页导航条添加图片超链接，链接到相应的二级网页。

（9）在创建二级网页的模板文件中创建返回首页，以及二级网页之间互相链接的超链接。

（10）更新网页。（11）为首页添加邮件链接、锚点链接、跳转菜单链接、下载链接等其他超链接。（12）测试网页超链接，保存相关文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第11页 《网页设计与制作综合实训》实训指导书

实训十 案例网站加入动态元素

1、学时分配：6学时

2、实训目的

（1）熟悉Flash软件的使用方法；（2）掌握创建滚动效果的方法；（3）为案例网站加入动态效果。

3、实训任务

（1）掌握Dreamweaver软件和Flash软件的使用方法。（2）实际动手为网站首页制作一个Flash动画。

（3）为首页增加新闻动态滚动效果，以及图片动态滚动效果。

4、实训内容

（1）打开Flash软件，熟悉Flash软件的使用方法。

（2）使用Flash软件创建一个简单动画，比如图片之间的简单切换。（3）打开Dreamweaver软件，将Flash中生成的SWF格式动画文件插入到网页中，设置动画属性。

（4）熟悉链接网页源代码的编写方法，掌握基本的网页代码标签。（5）在“通知公告”中给网页新闻添加由下向上的动态滚动效果。（6）在“专业展板”中给图片添加由右向左的动态滚动效果。（7）测试网页效果，整理保存好的文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第12页

第四篇：网页设计与制作实训报告[范文]

《网页设计与制作》

实习报告

指导老师：

实习地点：

实习时间：

实习班级：

学生姓名：

一、实习目的① 学会制作新闻发布系统。

② 学会制作在线调查系统。

③ 熟悉购物网站的主要功能和栏目。

④ 学会购物网站数据库表的创建和数据库连接的创建。

⑤ 学会购物系统前台页面制作和后台管理制作。

二、实训内容

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）在列表中添加列表内容，代码如下：