小型网站实训报告.docx

1、小型网站实训报告Web 501 实训总结报告 1. 需求分析随着电子信息技术的发展，越来越多的人选择网上购物这一购物方式，这给电子商务的发展带来了一个良好的契机。“宅客一族”更是理所当然的接受了这一方式。面对如此庞大的消费群体，面对多种多样的消费需求，建立一个属于“我的书城”的网上购书网站已是时之所趋。根据网上调查，75%的网名认为传统的书店模式已经无法满足日益增长的消费需求。小小的书店时无法承载所有的书籍的，与此相反的是网上书店不仅可以罗列所有的书本，更能够提供目录章节以供读者阅览。与此同时，在本网站中读者还可以根据专题来选择读本，音像，这样的搜索方式更加快捷方便。更为方便的是读者可以不出门

2、就购买到称心如意的商品，省去了找书，排队付钱的时间，并且网上购物通常是根据网银来结账的，本书店与支付宝有合作关系，注册为本书城的会员在享受会员价的基础上，还可以享受9.5折的支付宝折扣。如此方便，快捷的购物方式又怎么会不引起消费者的亲睐呢？2.目的建立本网站（，首先是为了营造一大浩大的宣传声势，扩大本店在网上的影响力，让更多的人接受并了解本店；其次是为了方便新老顾客在挑选物品时能够在网上“货比三家”以得到真正的实惠；再次，网上购物对于拥有支付宝的顾客可以享受双重优惠，在这个基础上可以巩固我们的固定顾客群；最后，本网站提供一些考证考试信息，读者可以在浏览网页是了解到考试动态以方便他们提前做好准备

3、购买相关资料复习，这一来又吸引了一批新顾客。3.功能叙述3.1搜索本网站拥有良好的数据库支持，每个网页头部都有详细的标签以方便搜索引擎根据标记快速识别，这一来网页浏览的速度将大大提高；在网站内部，本店分设了很多专栏以方便用户在搜索商品或者相关信息的时候可以尽量的效率化。3.2链接不管是内部链接还是外部链接都拥有详细的URL地址，用户在每一页都可以顺利的与首页链接。对于友情链接，则更为方便，只需点击图标页面即可跳转到所需的网站页面。3.3登陆注册在登陆注册面，用户可以放心使用，所有的资料都是加密的是不会泄露出去的，用户一旦注册则可以实时享受会员待遇，拥有绝对的实惠。3.4帮助中心对于不熟悉本站操

4、作的用户，本站提供帮助中心以指导用户操作。同时对于付款的巨细也是一一报道。用户不用担心出了什么问题，我们会提供在线帮助以方便用户与管理员联系。3.4建议意见用户可以根据自己在浏览网页时所碰到的问题以及时的对我们进行反馈，本站也随时欢迎用户对我们的不足之处加以指正。4.开发工具与开发环境4.1开发工具-Dreamweaver软件Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它具有以下特点：1 最佳的制作效率

5、 Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。 2 网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改

6、变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3 无可比拟的控制能力 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dr

7、eamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 Dreamwe

8、aver还集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。4.2开发环境-Windows XP，java语言环境5.网络构建5.1网站描述本网站是一个电子商务网站，主要以销售图书，影像为主要内容，兼提供其他功能，例如网页间的链接，图书的简要阅览，会员的登录注册，帮助中心等等。网站分设三种模式，分别是B2B,B2C,B2G三种模式，以方便不同身份的用户选择适合自己的模式。5.2目录结构图1如图1所示：本站的目录结构是在站点的前提下，除了有_notes,CSS,flash,image,library,Templates,webpage,这些文件夹，还

9、另放一个主页。在image文件夹下分设了关于图书图片的文件夹，页面设计图片的文件夹以及VCD图片的文件夹以方便设计中应用不同的图片。同时 所有的命名都是由英文命名便于识别。5.3逻辑结构图2如图2所示：每一页都是与主页相连接的，可以很方便的从任意一个页面跳转到主页。5.4设计流程本网站在设计阶段首先我们找寻了很多的图片，Flash，多媒体，以及相关的文本信息。在制作完主页后，把比较好的导航栏和页尾还有一些特别的图片做入库，以方便制作其他页面的时候套用。在制作图书介绍页面时我们用了模版以方便所有的图书介绍页面用同一种模式以保持页面的一致性。最后我们制作了一个框架以方便用户跳转不同的页面。6网页制

10、作说明6.1简介在制作所有网页我们都应用了表格和div标签来进行排版，在帮助正文页的本页跳转中我们应用了锚标记，不同网页间应用了超链接，在帮助中心框架中应用了框架技术，主页中我们在导航条中应用了marquee标签以实现字体滚动，所有的大标题都是应用flash文本制作而成，主页还插入了flash媒体。主页中间应用了鼠标经过图像，层和时间轴的应用是十分普遍的，特殊的图片中我们还做了热区，在按钮中我们应用了一些行为方式，尤其是感谢浏览页面做了很多行为方式-层的显示与隐藏，图的交换。为了提高制作效率我们还应用了模板与库以保持所有页面的统一性。在首页还额外添加了加入收藏夹与设为首页的javascript

11、 语言。在首页末端我们加了电子邮件链接。在登录页面所有的交互动作都是通过表单来实现的。6.2表格排版本站在网页排版中主要是根据表格进行排版的为了让版式更加好看，我们在一个表格里嵌套了多个表格几乎每个区块都有独立的一个表格。操作很简单：6.3锚记要实现一个页面中文本间的跳转则只需在所需跳转的地方设置锚记。在本站中我们一共在两个页面上做了锚记-帮助导航页，帮助正文页。如图4可视：6.4超链接在每个页面上都拥有一定的超链接以实现信息的共享，本站不仅有站内链接还有外部链接。使得每个页面跳转自如。操作如下：6.5 框架为了在一个页面实现多个页内的链接使得mainframe里可以显示不同的网页信息只需制作

12、框架即可。如图可视：框架6.6 导航为了方便用户在一个指导性的东西进行操作，本站特地在主要网页中制作了导航栏。使得用户更好的浏览网页。6.7表单为了实现用户与我们的交互所有的登录界面，注册页面，评价页面都是用表单做的，里面有常用的一些操作。表单6.8图形，多媒体为了让网页看起来更好看我们都用了一些图片，多媒体来进行页面的填充。如图 所示：6.9库在网页设计中常常有很多有用的信息是可以在不同的网页同时显现的，为了提高网页的设计我们在网页中制作了很多的库如图：6.10模板与库的作用相同，一个页面中如果只有少数的地方与其他地方不同则只需要用模板这个技术。本站对于图书介绍页面打算用同样的版式故需要用上

13、模板。如图：6.10 flash制作在本站中比较显眼的标题都是套用flash中的flash 文本。还特意制作了文本的变色。操作如下：6.11层和时间轴本站在首页和其他分页制作了很多图片变换的技术，这是根据层与时间轴制作出来的。操作如下：6.12 CSS本站运用了很多的层叠样式，几乎所有的字体都是用了层叠样式。尤其是页尾我们运用了文档中的bottom.css和gateway.css两种层叠样式，没有运用的话排版会显得很难看。在一个层叠样式的文档中如果要有多个版式只需在每段用#*命名即可。如图所示：6.13 行为在本站中我们用了很多的行为方式，尤其是在感谢浏览页面，我们不仅加了隐藏图片，交换图片的

14、行为方式 还用了显示-隐藏层的行为。此外我们在登录界面中目前是用行为（打开另一个浏览页）来替代了后台的交互。如图所示：6.14图像热区：在书本图片中我们做了一些图像热区使得能够更好的链接到其他页面。如图世界杯：热区6.15鼠标经过图像在首页，我们制做了鼠标经过图像以显现多个不同的专题。如图：6.16滚动字幕与图片为了让用户能够马上找到我们的联系方式，本站特别把联系方式这一字段用了marqueen标记，使得字幕能够滚动起来。如图：字幕：代码： 个人购书、书店批发、单位团购三位一体的综合电子商务平台 总部网购、话购服务热线：8（全国范围市话拨打） 图片：（代码雷同）6.17添加到收藏夹这个技术主要

15、是运用到行为方式，在首页我们首先制做了这几个字段，再在字段中添加了addfavorite这个方法名。代码如下：加为收藏 如图：6.18设为首页这个技术也是运用到行为方式，在onclick事件中用了如下代码：设为首页效果如图：6.19电子邮件链接在首页页尾处是用了电子邮件链接方便用户与我们联系。代码如下：联系我们如图：6.20头部标记方便搜索引擎查找。7.问题与解决方法在网页制作中我们遇到了很多问题，首先是排版问题，一开始我们是直接在一个大表格里排版，结果导致格子间不对齐，弄到后面显得很乱。还有就是屏幕分辨率的设计，由于不同的电脑分辨率不同导致结果排版很容易混乱掉。对于文件的应用必须确保路径是正确的不然的话图片就不会显现出来。在做模板时我忘了在目标上选择是mainframe还是其他的，结果显示的时候还是很有问题。而且锚点是只能在本页中应用的，不能跨页应用。与此同时，在在网页制作中，遇到一些后台技术问题，这也是无法避免的，在软件的使用中刚开始对日软件的不熟悉，找不到要用的信息技术，但在多次的联系中慢慢的深度学习了Dream weaver 的相关技术，体会到该软件所见即所得的快速想过，不过对已一些更深层的技术我们还尚未能开发使用，等待在后期学习中获得更多的网页设计和网站开发技术。