小型网站实训报告.docx

小型网站实训报告.docx

《小型网站实训报告.docx》由会员分享，可在线阅读，更多相关《小型网站实训报告.docx（11页珍藏版）》请在冰豆网上搜索。

小型网站实训报告

Web501实训总结报告

1.需求分析

随着电子信息技术的发展，越来越多的人选择网上购物这一购物方式，这给电子商务的发展带来了一个良好的契机。

“宅客一族”更是理所当然的接受了这一方式。

面对如此庞大的消费群体，面对多种多样的消费需求，建立一个属于“我的书城”的网上购书网站已是时之所趋。

根据网上调查，75%的网名认为传统的书店模式已经无法满足日益增长的消费需求。

小小的书店时无法承载所有的书籍的，与此相反的是网上书店不仅可以罗列所有的书本，更能够提供目录章节以供读者阅览。

与此同时，在本网站中读者还可以根据专题来选择读本，音像，这样的搜索方式更加快捷方便。

更为方便的是读者可以不出门就购买到称心如意的商品，省去了找书，排队付钱的时间，并且网上购物通常是根据网银来结账的，本书店与支付宝有合作关系，注册为本书城的会员在享受会员价的基础上，还可以享受9.5折的支付宝折扣。

如此方便，快捷的购物方式又怎么会不引起消费者的亲睐呢？

2.目的

建立本网站（，首先是为了营造一大浩大的宣传声势，扩大本店在网上的影响力，让更多的人接受并了解本店；其次是为了方便新老顾客在挑选物品时能够在网上“货比三家”以得到真正的实惠；再次，网上购物对于拥有支付宝的顾客可以享受双重优惠，在这个基础上可以巩固我们的固定顾客群；最后，本网站提供一些考证考试信息，读者可以在浏览网页是了解到考试动态以方便他们提前做好准备购买相关资料复习，这一来又吸引了一批新顾客。

3.功能叙述

3.1搜索

本网站拥有良好的数据库支持，每个网页头部都有详细的标签以方便搜索引擎根据标记快速识别，这一来网页浏览的速度将大大提高；在网站内部，本店分设了很多专栏以方便用户在搜索商品或者相关信息的时候可以尽量的效率化。

3.2链接

不管是内部链接还是外部链接都拥有详细的URL地址，用户在每一页都可以顺利的与首页链接。

对于友情链接，则更为方便，只需点击图标页面即可跳转到所需的网站页面。

3.3登陆注册

在登陆注册面，用户可以放心使用，所有的资料都是加密的是不会泄露出去的，用户一旦注册则可以实时享受会员待遇，拥有绝对的实惠。

3.4帮助中心

对于不熟悉本站操作的用户，本站提供帮助中心以指导用户操作。

同时对于付款的巨细也是一一报道。

用户不用担心出了什么问题，我们会提供在线帮助以方便用户与管理员联系。

3.4建议意见

用户可以根据自己在浏览网页时所碰到的问题以及时的对我们进行反馈，本站也随时欢迎用户对我们的不足之处加以指正。

4.开发工具与开发环境

4.1开发工具---Dreamweaver软件

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

它具有以下特点：

1．最佳的制作效率　

　Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。

使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。

对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。

Dremweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。

除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

2．网站管理　　

使用网站地图可以快速制作网站雏形、设计、更新和重组网页。

改变网页位置或档案名称，Dreamweaver会自动更新所有连结。

使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

3．无可比拟的控制能力　　

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。

它包含HomeSite和BBEdit等主流文字编辑器。

帧（frames）和表格的制作速度快的令您无法想像。

进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。

所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。

当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。

梦幻样版和XMLDreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。

建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。

您也可以使用样版正确地输入或输出XML内容。

　　Dreamweaver还集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。

4.2开发环境---WindowsXP，java语言环境

5.网络构建

5.1网站描述

本网站是一个电子商务网站，主要以销售图书，影像为主要内容，兼提供其他功能，例如网页间的链接，图书的简要阅览，会员的登录注册，帮助中心等等。

网站分设三种模式，分别是B2B,B2C,B2G三种模式，以方便不同身份的用户选择适合自己的模式。

5.2目录结构

图1

如图1所示：

本站的目录结构是在站点的前提下，除了有_notes,CSS,flash,image,library,Templates,webpage,这些文件夹，还另放一个主页。

在image文件夹下分设了关于图书图片的文件夹，页面设计图片的文件夹以及VCD图片的文件夹以方便设计中应用不同的图片。

同时所有的命名都是由英文命名便于识别。

5.3逻辑结构

图2

如图2所示：

每一页都是与主页相连接的，可以很方便的从任意一个页面跳转到主页。

5.4设计流程

本网站在设计阶段首先我们找寻了很多的图片，Flash，多媒体，以及相关的文本信息。

在制作完主页后，把比较好的导航栏和页尾还有一些特别的图片做入库，以方便制作其他页面的时候套用。

在制作图书介绍页面时我们用了模版以方便所有的图书介绍页面用同一种模式以保持页面的一致性。

最后我们制作了一个框架以方便用户跳转不同的页面。

6网页制作说明

6.1简介

在制作所有网页我们都应用了表格和div标签来进行排版，在帮助正文页的本页跳转中我们应用了锚标记，不同网页间应用了超链接，在帮助中心框架中应用了框架技术，主页中我们在导航条中应用了marquee标签以实现字体滚动，所有的大标题都是应用flash文本制作而成，主页还插入了flash媒体。

主页中间应用了鼠标经过图像，层和时间轴的应用是十分普遍的，特殊的图片中我们还做了热区，在按钮中我们应用了一些行为方式，尤其是感谢浏览页面做了很多行为方式---层的显示与隐藏，图的交换。

为了提高制作效率我们还应用了模板与库以保持所有页面的统一性。

在首页还额外添加了加入收藏夹与设为首页的javascript语言。

在首页末端我们加了电子邮件链接。

在登录页面所有的交互动作都是通过表单来实现的。

6.2表格排版

本站在网页排版中主要是根据表格进行排版的为了让版式更加好看，我们在一个表格里嵌套了多个表格几乎每个区块都有独立的一个表格。

操作很简单：

6.3锚记

要实现一个页面中文本间的跳转则只需在所需跳转的地方设置锚记。

在本站中我们一共在两个页面上做了锚记---帮助导航页，帮助正文页。

如图4可视：

6.4超链接

在每个页面上都拥有一定的超链接以实现信息的共享，本站不仅有站内链接还有外部链接。

使得每个页面跳转自如。

操作如下：

6.5框架

为了在一个页面实现多个页内的链接使得mainframe里可以显示不同的网页信息只需制作框架即可。

如图可视：

框架

6.6导航

为了方便用户在一个指导性的东西进行操作，本站特地在主要网页中制作了导航栏。

使得用户更好的浏览网页。

6.7表单

为了实现用户与我们的交互所有的登录界面，注册页面，评价页面都是用表单做的，里面有常用的一些操作。

表单

6.8图形，多媒体

为了让网页看起来更好看我们都用了一些图片，多媒体来进行页面的填充。

如图所示：

6.9库

在网页设计中常常有很多有用的信息是可以在不同的网页同时显现的，为了提高网页的设计我们在网页中制作了很多的库

如图：

6.10模板

与库的作用相同，一个页面中如果只有少数的地方与其他地方不同则只需要用模板这个技术。

本站对于图书介绍页面打算用同样的版式故需要用上模板。

如图：

6.10flash制作

在本站中比较显眼的标题都是套用flash中的flash文本。

还特意制作了文本的变色。

操作如下：

6.11层和时间轴

本站在首页和其他分页制作了很多图片变换的技术，这是根据层与时间轴制作出来的。

操作如下：

6.12CSS

本站运用了很多的层叠样式，几乎所有的字体都是用了层叠样式。

尤其是页尾我们运用了文档中的bottom.css和gateway.css两种层叠样式，没有运用的话排版会显得很难看。

在一个层叠样式的文档中如果要有多个版式只需在每段用#***命名即可。

如图所示：

6.13行为

在本站中我们用了很多的行为方式，尤其是在感谢浏览页面，我们不仅加了隐藏图片，交换图片的行为方式还用了显示-隐藏层的行为。

此外我们在登录界面中目前是用行为（打开另一个浏览页）来替代了后台的交互。

如图所示：

6.14图像热区：

在书本图片中我们做了一些图像热区使得能够更好的链接到其他页面。

如图世界杯：

热区

6.15鼠标经过图像

在首页，我们制做了鼠标经过图像以显现多个不同的专题。

如图：

6.16滚动字幕与图片

为了让用户能够马上找到我们的联系方式，本站特别把联系方式这一字段用了marqueen标记，使得字幕能够滚动起来。

如图：

字幕：

代码：

个人购书、书店批发、单位团购三位一体的综合电子商务平台总部网购、话购服务热线：

8（全国范围市话拨打）

图片：

（代码雷同）

6.17添加到收藏夹

这个技术主要是运用到行为方式，在首页我们首先制做了这几个字段，再在字段中添加了addfavorite这个方法名。

代码如下：

onclick=",'我的书城网'）;"

href="javascript:

void（0）;">加为收藏

如图：

6.18设为首页

这个技术也是运用到行为方式，在onclick事件中用了如下代码：

onclick=";this.setHomePage（'/'）;return（false）;"

href="/">设为首页

效果如图：

6.19电子邮件链接

在首页页尾处是用了电子邮件链接方便用户与我们联系。

代码如下：

">联系我们

如图：

6.20头部标记

方便搜索引擎查找。

7.问题与解决方法

在网页制作中我们遇到了很多问题，首先是排版问题，一开始我们是直接在一个大表格里排版，结果导致格子间不对齐，弄到后面显得很乱。

还有就是屏幕分辨率的设计，由于不同的电脑分辨率不同导致结果排版很容易混乱掉。

对于文件的应用必须确保路径是正确的不然的话图片就不会显现出来。

在做模板时我忘了在目标上选择是mainframe还是其他的，结果显示的时候还是很有问题。

而且锚点是只能在本页中应用的，不能跨页应用。

与此同时，在在网页制作中，遇到一些后台技术问题，这也是无法避免的，在软件的使用中刚开始对日软件的不熟悉，找不到要用的信息技术，但在多次的联系中慢慢的深度学习了Dreamweaver的相关技术，体会到该软件所见即所得的快速想过，不过对已一些更深层的技术我们还尚未能开发使用，等待在后期学习中获得更多的网页设计和网站开发技术。