网页设计与制作实训报告

第一篇：网页设计与制作实训报告

《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.创建数据库表

① 启动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的痛苦和尴尬。在制作的过程中遇到问题，可以说得是困难重重，这毕竟是第一次独自制作动态网页，难免会遇到过各种各样的问题，同时在制作的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固。在此过程当中弥补了我许多知识上的缺陷，弄清的以前没有搞懂的知识点。经过多番的努力和辛酸，我成功地完成了这次过程艰辛的实训，而且我从中体会到了一种叫做‘成功的喜悦’的感觉，那种小有成就的兴奋是只有置身其中的人才能体会的。

在实训过程中，我更体会到了基础知识的重要性，也许我们正在迷惘，我们是否学到了东西，但事实说明零零散散的知识，在项目开发当中起到了非常关键的作用，我们不缺少时间和工具，我们只是缺少经验和动手能力，如果我们以后能更好的在各方面增长自己的经验，相信我们能在长长的就业队伍中脱颖而出的！相信自己，相信未来。今后我将会更加努力的学习，不断提高自身素质，为我将来的就业打下良好的基础

第三篇：网页设计与制作实训报告

《网页设计与制作》课程设计报告书

设计题目：起止日期：工作室或公司网站设计

2013.12.23-2013.12.27

一、关于网站 ···························· 3

1、网站的主题 ·························· 3 2.网站材料 ··························· 4

二、网站的规划设计 ························· 5 1.网站的功能定位 ························2.站点的内容 ··························3.站点的风格 ··························4.网站功能模块图 ························三．网站技术解决方案 ························

1、网站的制作工具 ························

2、所用技术 ···························四．网页介绍 ····························

1、制作网站的网页 ························2.第二层展示 ··························3.动漫排行榜展示 ························4.第三层展示 ··························5.关于短片的插入： ·······················五.关于我们： ···························六．实训总结： ··························· 2 5 5 6 6 7 7 8 9

13 14 14

一、关于网站

1、网站的主题

我的网站的主旨在于从各个方面全面的介绍动漫，展示动漫产品以及漫画，包括有动漫排行榜，小短片，另外，网站里还有漫画，以及周边产品。建立一个展示动漫的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题都是图片加上文字介绍，用以展示自己性格的效果。最重要的是做出自己的风格，给浏览者好的欣赏感受。

动漫，是动画和漫画的合称与缩写，取这两个词的第一个字合二为一称之为“动漫”。

现可考证，该词语出处为1993年创办的动漫出版同业协进会与1998年创刊的动漫资讯类类月刊《动漫时代（Anime Comic Time）》，后经由漫友杂志传开，因概括性强在大陆地区的使用开始普及起来。在中国以外，并没有此种说法。国外习惯性将动画（anime）、漫画（comic）、游戏（game）三者合称作ACG，或加上轻小说（novel）合称为ACGN。

由于漫画本身的发展形成了现代故事漫画的表现形式，将影视艺术融入漫画之中，使得漫画与动画更容易结合，影视艺术独特的地方在于它能通过镜头的推拉摇移和片段剪辑的蒙太奇技巧来表达想法和感受。

漫画正是吸收了影视艺术的这两个特点。当要讲述的故事越发复杂、人物越发丰富的时候，用传统单线式叙事的方法就越行不通，蒙太奇的介入就成为一种需要了；当漫画家在传统表现手段中无法找到更合适的抒发感情的方法的时候；当读者需要作品有更强的冲击力和表现力的时候，各种镜头的灵活运用就成为一种必需了。一部现代故事漫画往往集远、中、近、特四种镜头于一身，漫画家往往能熟练地运用镜头的移动和各种蒙太奇剪接，对故事特定部分的情绪和氛围进行渲染。这就是现代故事漫画容易和动画结合的一个原因，因为它天生就像动画的分镜头剧本，读者在看漫画时仿佛就是在看一部电影。正是有着这样的相似性，所以如今将动画和漫画合称为“动漫”。

动漫领域衍生出的许多术语均已经被广泛应用，例如：正太，萝莉，御姐，百合,BL等。

动漫产业日益与游戏产业结合紧密，在日本已经形成一个成熟的产业链，动漫已经 3 从单单的平面媒体和电视媒体扩展到游戏，书籍，网络，玩具等众多领域。许多动漫游戏应运而生，例如《死神bleach》PSP平台的游戏，也有许多GALGAME被改编成动漫作品。

Manga（まんが，manga）为日语“漫画”的罗马字注音。另外，英文词cartoon的中文音译“卡通”，也是漫画与动画的合称，但被用来特指美国动画。版面有限，相关词条，详见：“动漫概论” 按类型分类：

情感；推理；动作；战争；后宫；宠物；历史；搞笑；机战；少年；冒险；治愈；童话；格斗；

少女；悬疑；科幻；竞技；社会；神魔；热血；校园；耽美；原创；魔法；教育；恐怖；惊悚；

政治；哲理；经典；励志；伦理；恶搞；血腥；言情；暴力。按版本分类：电视动画（TV）：

电视频道上播映的动画作品。

剧场动画（MOV）：影院公映的动画作品，是日本动画按传播方式分类的一种，在中国又被称为剧场版。

OVA（OAD）：原创动画录影带，其中OVA是单独发售，OAD是随书发售的。网络动画（NET）：以网络为播放平台的动画。

动画音乐：一部动漫作品中的音乐，包括主题音乐和背景音乐（BGM）。

动画原创：依漫画改编的动画，由于动画的更新速度比漫画快的关系，当动画的剧集快赶上漫画时，动画的剧情就要脱离漫画剧情，开始动画原创。

同人：也叫二次创作，由漫画、动画、游戏、小说、影视等作品甚至现实里已知的人物、设定衍生出来的文章及其他如图片影音游戏等等，或“自主”的创作。COS：全称COSPLAY，装扮成漫画、动画、游戏、小说等中的人物，也可以是原创。

2.网站材料

主要在网站上搜集所要的网页信息，包括图片、文字、相关的产品。同时，查询相关的动漫、百度等方式收集所需的文字资料,图象资料,网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。

二、网站的规划设计

1.网站的功能定位

我的网站共有5个主页面：首页、动漫之家、动漫排行榜、动漫连载、周边产品。每一个页面用图片来做。

我是用素材拼音命名网站名，用以方便存储和转发。网站主页整体色调为梅红色，配上深沉的背景图，搭配出一种层次感。然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。

2.站点的内容

我们动漫汇主要是要向客户介绍动漫，包括动漫的介绍，动漫的周边产品，动漫的图片及动漫的漫画或是动漫片段。站点里面包括：

首页：第一层网页，画面主要有动漫汇的logo，logo下方是一个横幅，鼠标经过会有光亮，点击仍将是动漫的主页。左边是一个动态动漫图，显得主页可爱又有动漫气息等。下方是会员登录，点击登陆跳转至输入账号及密码界面，如不是会员，点击注册跳转个人用户注册界面。主页的背景图是动漫海报，由两层叠加。主图是6幅动漫图，6种动漫的介绍。鼠标进过动漫图时，会有相应的动漫简介。

跳转页：第二层和第三层，主要的主页的过渡。里面有动漫的详细介绍，有动态图欣赏左侧是关于动漫的周边产品。点击看漫画或动漫，即可欣赏相关动漫。

3.站点的风格

整个网页色彩明显，我们添加了gif图，这样网页稍微有活力，背景都是用动漫海报。其中使用翻看图片的特效，使得看漫画不那么单挑。同时也插入视频，使得网站有活力一些。

首页的标题插入闪光效果，鼠标经过时能出现，不容易产生无趣感。首页的图片不只有图片，鼠标放至图片上会有文字出现，是动漫的简介。使得网页有活力。

4.网站功能模块图

三．网站技术解决方案

1、网站的制作工具

做网页时主要使用的是Dreamweaver CS3另外，为了处理网页中的其他元素，还使用了Photoshop、FLASH等软件。

2、所用技术

动漫汇需要大量的图片及相关的话题。我们需要插入图片，大小要适合，以动漫海报为网页的背景，则设置好页面设置，选好准备好的海报图。插入gif图片，需要时在ps中做gif图。插入视频时需要设置好相关的，视频名称中不能有中文，是flv格式的。图文介绍的需要经过ps的加工，使得首页的图片有生机活力。插入表单，是关于用户的登录，点击跳转至登录或是注册界面。首页标题都有链接，点击进入相应的网站。首页下方是关于动漫汇，为了突出字，用ps进行加工。

四．网页介绍

1、制作网站的网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“web”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了各类动漫的文件夹来存放图片。同时，由于漫画页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css 样式文件也应统一管理，做到有条不紊，我设计的网站的首页如下图：

根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。右下边插入的是表格，表格中添加了浅红色的背景图片。用以体现网站的主题色彩，表格还定位了网页特效、系统时间和flash动画。

2.第二层展示

页面中，中间的页面主要包含动漫介绍，周边产品，但浏览者有了新的认识后，可以点击下方的“点击看漫画”按钮来进入第三层页面（漫画页面）。而背景图必须选择横图，而且两边的位置要有良好的视觉效果，我们的排版虽然精简，但是非常有视觉效果，使页面的整体布局合理，既突出网站的主色调，又给人以凝重的感觉，同时增加页面的可看性。

动漫介绍页面

3.动漫排行榜展示

动漫排行榜是为了让浏览者更方便更快更准确地了解到动漫的最新信息而制作的，红色的为最热门的TOP5，分别有：总排行、日本漫画排行、香港漫画排行、大陆漫画排行等排行榜榜单。我们也会定时更新榜单，为了让广大读者更快更直接地了解最新的动漫信息。

4.第三层展示

看漫画页面，是我们制作的重点，并且为了让大家能看漫画，我们专门找了类似翻页的网页特效，方便读者的翻阅，而且让网站更炫，也不容易觉得无趣及疲劳。第三层部门动漫是漫画欣赏，有的是动漫观看。主要是看我们更新的是什么哦~ 也可以让各位动漫迷提前看到剧情的发展，好看又过瘾啊！亲。定时进入查看最新动漫吧~注册用户账号，方便随时进入看哦送上一幅漫画图：第三层页面的设计代码如下：

秦时明月漫画

第四篇：网页设计与制作实训报告要求

《网页设计与制作》实训报告要求

一、实训报告写作内容

（一）实训题目

（二）实训目的：说明这门课程实训的目的是什么

（三）实训思想：静态网站设计制作中用了哪些所学的知识点

（四）网站设计体会总结

（五）参考文献

二、实训报告书写格式

（一）一级标题为仿宋小三号加黑

（二）正文字体为仿宋小四号，全文行距为固定值25

（三）页面设置：页边距上：2.5厘米下：2厘米左：2.5厘米

三、附：实训报告封面

右：2.5厘米

附：实训报告封面

《网页设计与制作》

训报告专业班级：学号：姓名：实

第五篇：网页设计与制作实训报告

学生姓名：实习班级：指导老师：实习地点：实习时间：

一、实习目的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，如果登录失败，转到denglu.asp。

下面制作添加商品分类页面，打开Index.html，另存为fenlei.asp，将光标置入相应的位置，插入2行2列的表格。将光标置入第1行第1列，输入相应的文字，在第2列插入表单，在文本框中输入 fenlei，字符宽度设为25，类型设为单行。将光标置入第2行第2列，分别插入提交和重置两个表单按钮。添加记录集，单机服务器行为的用户身份验证—限制对页的访问。如果访问被拒绝，则转到denglu.asp。单机服务器行为的插入记录，如果修改成功，则转到guanli.asp。

下面制作商品添加页面，打开Index.html，另存为tianjia.asp。创建记录集，将光标置入相应的位置，插入--插入记录表单向导，修改相应的内容。修改成功则转到guanli.asp。单机服务器行为的用户身份验证—限制对页的访问。如果访问被拒绝，则转到denglu.asp。

下面制作商品管理页面，打开Index.html，另存为guanli.asp。按照相应的方法将商品分类页面做好。将光标置入相应的位置，插入2行6列的表格，在表格中输入相应的文字，添加记录集Rs2, 将光标置入第2行，分别绑定shpID、shpname、shichangjia、huiyuanjia字段。选中第2行的单元格，选择服务器行为的重复区域。选中文字修改，单机服务器行为--转到详细页面，选中文字删除，单机服务器行为—转到详细页面。再插入1行4列的表格，在表格中输入相应的文字，选中首页，单机服务器行为的记录集分页—移至第一条记录。后面的以此类推。单机服务器行为的用户身份验证—限制对页的访问。如果访问被拒绝，则转到denglu.asp。

下面制作商品修改页面，打开tianjia.asp，另存为xiugai.asp，删除服务器行为的插入记录，创建记录集Rs2，分别绑定shpname、shichangjia、huiyuanjia、content、image。单机服务器行为的更新记录，修改成功转到guanli.asp。单机服务器行为的用户身份验证—限制对页的访问。如果访问被拒绝，则转到denglu.asp。后面的删除页面和修改页面大体相同，就不在多说了。

最后，浏览页面，检查问题并修改。那么这个网站就做好了。其实网页的制作过程差不多，大同小异，只要慢慢做就可以了，我用代码做了，可是有问题，一直找不到有效地解决方法，所以就放弃了。

三、疑难解惑

1．对于数据库的创建，不知道怎么添加图片及其他的各方面的问题，不够熟练。

2．对于代码还是不够熟悉，不太会修改代码。

3．代码做的时候，有好多的问题。例如，我做的产品

展示页面，预览效果，所有的产品名字都罗列在一

个位置，不知道怎么回事。

4．对于不能正常浏览的网站，不能很好的解决。

四、实习心得

ASP实训在做了几天后终于是全部做好了！个人感觉通过这次实训，自己在ASP方面有了很多的了解，对ASP也有了更多的兴趣！我们本学期做的实训基本上全面介绍了关于ASP代码的一些内容，对我们以后工作来说很有用。

本次实训中对ASP的学习研究有了新的体会，在数据库的创建以及如何用代码做网页上还存在一定难点和盲区，需要进一步更深入的研究。

经过一周的实训练习让我学到了许多知识,也有了很大的收获。这次实训让我明白了我们实训的主要目的是让我们通过不断的上机实习以及使用它来解决实际的问题，才能更好的掌握所学技能。实践出真理，在这一周的实训中确实很累但是累得有价值。学海无涯，好多好多的东西还在等待我们去努力的开发学习。我坚信，用血泪去做自己认为应该做的事，努力的开拓我们的极限，没有什么是不可能的。希望自己可以真正的化解这些知识为我所用！在以后的工作、生活和学习中，发展自己的优势，弥补自己的不足和缺陷。

网页设计与制作实训报告

第一篇：网页设计与制作实训报告

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

第三篇：网页设计与制作实训报告

第四篇：网页设计与制作实训报告要求

第五篇：网页设计与制作实训报告

相关范文推荐

静态网页设计与制作实训报告

网页制作实训报告

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

网页设计与制作实训十二

网页与制作实训论文范文

电子商务网页制作实训报告

网页设计与制作实训计划和考核.

网页设计实训报告