购物网站课题.pdf

《购物网站课题.pdf》由会员分享，可在线阅读，更多相关《购物网站课题.pdf（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、目目 录录前沿2第一章概述3 1.1 万维网的简介31.1.1 万维网的起源31.1.2 客户机与服务器4第二章 Dreamweaver MX2004 简介5 2.1Dreamweaver MX2004的功能简介52.1.1Dreamweaver MX 2004 窗口布局52.1.2Dreamweaver MX 2004 栏目72.1.3Dreamweaver MX 2004 工具栏82.2 在制作网页时，此次的电脑配置如下9第三章网站的总体规划10 3.1Html 语言简介 10 3.2 网站的主题10 3.2.1 搜集相关的资料10 3.2.2 借助各种软件策划与编辑网页10第四章网站的形

2、象设计11 4.1 网站的标准字体11 4.2 首页的设计11 4.2.1 购物网站的标志114.2.2 页的总体结构、 风格及制作过程114.3 静态页面的设计124.4 特效的源码代码14第五章 网站的功能测试16总结总结17致谢致谢181前前 言言随着计算机和网络技术的飞速发展，信息的处理、传递和发布突破了时间和地域的限制， 计算机网络化和经济全球化成为不可抗拒的历史潮流。由于网络的慢慢普及， 其也正扮演着越来越重要的产业地位。 网络正飞快地进入人们的日常生活中， 渐渐成为人们生活中不可缺少的一部份，它为人们提供了难以言论的方便与快捷，让你足不出户也晓天下事。什么是网站呢？网站就是网页的

3、集合，网页是网络文件的组成部分。在构成网站主要内容的单个页面中， 制作者可以按照一定的方式将信息分门别类地放置在一个个页面上，包括文字、表格、图形、图像、视频、声音、和动画等内容。我们通常所说的网页都是由文本、多媒体及超链接 3 部分组成。网站设计大体分两个方面： 1纯网站本身的设计比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等。 2网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互，制作策划，形象包装，宣传营销等等。网站设计与网站制作。网站“设计”网站“制作”的区别在于设计是一个思考的过程，而制作只是将思考的结果表现出来。一个成功的网站首先需要一个优秀的

4、设计，然后辅之优秀的制作。 设计是网站的核心和灵魂， 一个相同的设计可以有多种制作表现的方式。通常所说的“网站”是指有确定主题和明确目的的实用性站点，不包括纯表现类或者纯文字类等网站。2第一章第一章 概概 述述1 11 1万维网的简介万维网的简介随着科学技术的迅猛发展，人们拥有一个世界性的信息库。在这个数据库中数据不仅能被全球的人们存取，而且应该能轻松地链接其它地方的信息，以便用户可以方便快捷地获得重要的信息。目前正在使用的最流行的系统叫“环球信息网 WWW”(World Wide Web) 。它的正式定义是“WWW is a wide-area hypermediainformation r

5、etrieval initiative to give universal access to largeuniverse of documents.”换言之，WWW 是一个以 Internet 为基础的计算机网络，它允许用户在一台计算机通过 Internet 存取另一台计算机上的信息。从技术角度上说，环球信息网是 Internet 上那些支持 WWW 协议和超文本传输协议HTTP(Hyper Text Transport Protocol)的客户机与服务器的集合，通过它可以存取世界各地的超媒体文件，内容包括文字、图形、声音、动画、资料库、以及各式各样的软件。1.1.11.1.1万维网的起源万

6、维网的起源1945 年 8 月份 Vannevar Bush 在 Atlantic Monthly 杂志上发表了一篇题为“正如我们所想到的”的文章，从那时起，关于文档信息的电子化链接的念头就一直萦绕在计算机工作者、信息科学家们的脑海中。Bush 把此种想法与电子技术联系在一起。Bush 预见到因战争需要发展起来的新技术将会被广泛应用，并会改变我们的思维方式。总之，Bush 关于我们如何组织和使用信息的基本思想已经成为今天我们所看到的 WWW 和超文本。超文本(Hypertext)这个术语是 Ted Nelson 于 1965 年首创的，它通常是指不局限于线性方式的文本。也就是说， 超文本文档的

7、部分甚至全部也许都是线性的， 但也可能都是非线性的。超文本通过链接或引用其它文本的方式突破了线性方式的局限性。超文本是超媒体的一个子集。超媒体是指这样一种媒体(文本、图片、声音、视频录象等)，它与其它媒体以非线性方式链接而成。超文本最早是由鼠标器的发明者 Douglas Engelbart 和 Ted Nelson 付诸实现的。他们俩的超文本实现工作受到 60 年代的技术和复杂的设计基础的极大限制。两个人的项目想象成分多于可行的成分。1967 年 Nelson 他把实现分布式超3文本的计划命名为 Xanadu。Xanadu 这个项目是用于处理所有的版权和帐务问题的，按他的说法，Xanadu 有

8、足够的健壮性，可用于把全世界的出版物统统联网。虽然其结果是失败的，但它为超文本和 WWW 的发展奠定了坚实的基础。1.1.21.1.2客户机与服务器客户机与服务器客户机、 服务器和协议虽然都是很简单的概念，但描述它们比理解它们更难。图 1-1 为简单示例图。图 1-1 客户机和服务器客户机是一个需要某些东西的程序， 而服务器则是提供某些东西的程序。一个客户机可以向许多不同的服务器请求。 一个服务器也可以向多个不同的客户机提供服务。 客户机通常是作为某个用户请求或类似于用户的每个程序提出的请求而运行的。协议是客户机请求服务器和服务器如何应答请求的各种方法的定义。WWW 客户机又可称为浏览器。通常

9、的环球信息网上的客户机主要包括：Lynx、Mosaic、Netscape 等。通常的服务器来自于 CERN、NCSA、Netscape。Web 拥有一个被称为“无状态”的协议。这是因为服务器在发送给客户机应答信息后便遗忘了此次交互。在“有状态”的协议中客户机与服务器要记住许多关于彼此和它们的各种请求与应答信息。Web 是一个易于实现的协议。因为无状态的协议是很轻松的，它没有多少必需的核心代码和资源。 此种协议的另一吸引人的特性是可以方便地从一个服务器转向另一个服务器(在客户机端)或者从一个客户机转到另一客户机(服务器端)，而无需过多的清理和跟踪。这种快速转移的能力对于超文本而言是非常理想的。I

10、nternet 和伴随它产生的一切是一个分布极为广泛的网络。它们支持的标准的或者至少是具有互操作性的协议，允许这种互操作性跨越学术界、 商业界乃至于国界。也就是说，Internet、TCP/IP 协议、HTTP 协议以及 WWW 不属于任何人所有。不同国家的学校和公司可独立地建立客户机和服务器，而它们在Web上一起协同工作。这种实现方法有一个极大的好处，那就是其拓展的空间即便不是完全开放的，也是相当开放的。4第二章第二章 Dreamweaver MX2004 Dreamweaver MX2004 简介简介 Macromedia Dreamweaver MX 2004 （简称 DW MX 200

11、4） ，是 Macromedia 最新开发的的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。2.12.1Dreamweaver MX2004Dreamweaver MX2004的功能简介的功能简介 1简洁高效的设计和开发界面：界面更易于使用，可使您的工作效率和工作质量均得到提高。 2表格编辑可视化：在表格中进行列调整操作时能看到实际效果。 3用户界面改进：可得到最大的可用工作区，更清晰地显示上下文和焦点，更易于使用和更具逻辑性。 4起始页：使您能够访问最近使用过的文件，创建新文件和访问 DW MX 2004资源。起始页会在您启动 DW MX 20

12、04 或尚未打开文档时显示。 5保存桌面选项：使您可以选择当您重新启动 DW MX 2004 时重新打开您上一次使用的文档。 6完全支持 Unicode：DW MX 2004 支持 Internet Explorer 所支持的所有文本编码方式。您可以使用几乎所有您的系统中安装的语言字体，DW MX 2004 会正确地显示和保存这些字体。 7安全 FTP：使您能够完全加密所有文件传输。 8动态跨浏览器验证：在您保存文档时自动检查当前文档的跨浏览器兼容性问题。2.1.1 Dreamweaver MX 20042.1.1 Dreamweaver MX 2004 窗口布局窗口布局Dreamweaver

13、 MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。首次启动Dreamweaver 时，会出现一个工作区设置对话框（如图 2-1）：图 21 工作区设置界面5可以选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的 工 作 区 。 编 辑 菜 单 “ 首 选 参 数 ” 对 话 框 如 图6图 22 首选参数界面和主界面图2.1.2 Dreamweaver MX 20042.1.2 Dreamweaver MX 2004 栏目栏目“插入”栏（如图

14、 2-3） ：包含用于将各种类型的“对象” （如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。图 23 常用工具栏“文档”窗口 显示当前创建和编辑的文档。“插入”栏按以下的类别进行组织：常用类别常用类别使您可以创建和插入最常用的对象，例如图像和表格。布局类别布局类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamwea

15、ver 布局工具：“绘制布局单元格”和“绘制布局表格”。表单类别表单类别包含用于创建表单和插入表单元素的按钮。文本类别文本类别使您可以插入各种文本格式设置标签和列表格式设置标签。 HTML HTML 类别类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。服务器代码类别服务器代码类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。应用程序类别应用程序类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。 Flash Flash 元素类别元素类别使您可以插入 Flash 元素。收藏类别收藏类别使您

16、可以将 “插入” 栏中最常用的按钮分组和组织到某一常用位置。属性检查器属性检查器（如图 2-4）： 用于查看和更改所选对象或文本的各种属性。7图 24 属性检查器界面“属性检查器” （如图 2-5） ： 用于查看和更改所选对象或文本的各种属性。图 25 对象面板Dreamweaver MX 2004 提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。2 21 13 3Dreamweaver MX 2004Dreamweaver MX 2004 工具栏工具栏文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代

17、码”和“设计”视图的拆分视图。工具栏中还包含一些与查看文档、 在本地和远程站点间传输文档有关的常用命令和选项。图 26 工具栏命令选项图以下对选项进行说明：显示代码视图：仅在“文档”窗口中显示“代码”视图。8显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时， “视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。显示设计视图：仅在“文档”窗口中显示“设计”视图。标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。

18、没有浏览器/检查错误：使您可以检查跨浏览器兼容性。文件管理：显示“文件管理”弹出菜单。在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。刷新设计视图：当您在“代码”视图中进行更改后刷新文档的“设计”视图。视图选项：允许您为“代码”视图和“设计”视图设置选项。2 22 2在制作网页时，此次的电脑配置如下在制作网页时，此次的电脑配置如下 CORE 2 的 CPU 2G 内存 Windows XP 操作系统 ATI HD3470，VRAM 256MB 显卡 15.4WXGA 显示器 250GB 的硬盘本网站设计系统由本人策划负责网页总框架的设计、校验、链接和修改、各种资料的

19、搜集，采编，排版；美术采样；网页框架的策划等，务求通过充分的准备、构思、编排，使该网站做到画面精美、静态，使顾客更好的了解本公司所经营的范围。第三章第三章网站的总体规划网站的总体规划3.13.1HtmlHtml 语言简介语言简介9HTML（Hyper Text Markup Language 超文本标记语言）是一种用来制作超文本文档的简单标记语言。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台（如 UNIX，WINDOWS 等）。HTML 文档（即 Homepage 的源文件）是一个放置了标记的 ASCII 文本文件，通常它带有.html 或.htm 的文件扩展

20、名。生成一个 HTML 文档主要有以下三种途径： 1.手工直接编写； 2.通过某些格式转换工具将现有的其它格式文档 （如 WORD文档） 转换成HTML文档；3.由 Web 服务器（或称 HTTP 服务器）一方实时动态地生成。3.23.2网站的主题网站的主题本网站的构建主要从顾客的角度入手，以实用、美观、新颖、方便为主而构思的用户型商业性网站。3.2.13.2.1搜集相关的资料搜集相关的资料确定了网站主题后，就要开始搜集相关的资料，包括文字信息、各种关装饰的资料，包括自己公司的制作材料和图片等。首先，对于文字信息来说，很多顾客都想在最短的时间内关注的物品的资料，价格， 所以我对这部份的取材主要

21、是从新、快这个角度去考虑，并且尽量以简短、明了的文字来概述，为此，我用了网站的搜索功能， 从各公司的网站找出最新， 最流行的物品， 包括它们的材料、样式、风格、用途、价格及图片。3.2.23.2.2借助各种软件策划与编辑网页借助各种软件策划与编辑网页利用 Photoshop 对片的简单分割设计， 图片与文字的排列， 背景、 颜色设定；Dreamweaver MX 创建层面网页，连接数据库。ProntPage 2000 导入文件、编辑布景主题，文字编辑与排版，Firewords MX 创建网页按钮，除利用上诉软件，还可以利用其他软件来进行配合制作图片、文字、动画效果等，本网站也采用下载方式收集材

22、料。第四章第四章网站的形象设计网站的形象设计4.14.1网站的标准字体网站的标准字体10和网站色彩的设计一样，设计网站合适的字体会让人感觉到美观、亲切。一般的网页默认的字体是宋体。想要特有风格，可以做一些特效文字，但考虑到很可能浏览者的电脑中没有安装采用的特别字体，使用特效字体只能用图片的形式。4.24.2首页的设计首页的设计在全面考虑好网站的栏目，链接结构和整体风格之后，就可以正式制作首页了。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页的设计。所以，首页的设计和制作是绝对要重视和花心思。4.2.14.2.1购物网

23、站的标志购物网站的标志首先需要设计制作一个网站的标志。本网站的标志如图 4-1 所示:图 41 网站标志4.2.24.2.2首页的总体结构、风格及制作过程首页的总体结构、风格及制作过程首页的内容模块需要在首页上实现的主要内容和功能，如：网站名称、主菜单、版权。选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。在具体制作过程中，采用 Dreamweaver MX 2004 简体中文版作为主要的开发工具，Dreamweaver MX 2004中对版式的控制方面，功能很强大，新建一个网页之后，直接进入布局方式，先按设计草图将绘制布局表格，再绘制布局单元格，最后切换到标准模式

24、中，细调一个各单元格的位置关系，使之疏密有致。网站首页界面如图 4-211图 42 狗狗网主页界面整个网站的版式风格采用了基本对称的表格式样， 视觉的重点放在中部的各种服务列表，因为它是此站的重要内容。4.34.3静态页面的设计静态页面的设计经过资料的分类汇总，最终使用几个静态页面来完成对网页各方面静态信息的介绍。本章所述内容均属于一些介绍性、陈述性的内容，主要是想通过大量的文字和图片， 使浏览者对新钢职大有一个全面的了解，为了使页面的效果更吸引人， 我们加入了一些动效和基于客户端的交互元素，例如在每一个板块都设置静止于页左侧的本页导览条，使浏览者可以方便、快捷地在页面中跳转，在最短的时间内找

25、到浏览者所想了解的内容。本章将详细介绍几个子页。模板构成如下图所示：12图 43 特价商品图 44 目录分类13图 45 够物指南图 46 数码相机选购4.44.4特效的源码代码特效的源码代码 14 codeBase=http:/ height=210 width=220 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 15第五章第五章网站的功能测试网站的功能测试网站的功能测试即为在网页文件基本完成后，为保证其功能的完善、超链接的正确及内容的充实等，在上传之前作的全面测试，网站发布或更新，一旦出现重大失误，将会给整个网站带来极大的负面影响。

26、功能测试主要包括：版面是否正常、超链接是否正确、各种交互功能是否能够正常实现等。测试方法：1手动测试，我们在不同的分辨率下，查看各页面的显示情况，并全面检测交互功能，使用各种数据进行实测；2使用工具自动检测，以提高功能测试的效率，例如，在对超链接的测试时，我们使用了 Dreamweaver 提供的站点链接检测功能，收到很好的效果，具体操作为：打开站点管理器，找到并右击网站主文件名 index.html在弹出的快捷菜单中，选择“检查链接全部文件”命令，在检查链接对话框中，可以看到所有断开的链接，修改后，再使用它检查链接，如此反复，直到没有断链的现象为止。16总总结结通过本次的网站制作， 使我认识

27、到，要做好一个网站不是一件很容易做到的事情，首先是选材方面，需要想找到一个人们关注而又喜欢的主题，想出网站的主题后，就要开始查找该主题的相关资料，还有网站框架与模板的设计，颜色的调配，图片的修改，如果框架与图片大小不一致，就会发生变形，扭曲。虽然本人对 Dreamwaver MX、Flash MX、Fireworks MX、 FrontPage 2003、PhotoShop等专业软件甚是不了解，但通过本次制作网站的过程，使我学会了许多基本的操作。最终借助 Dreamwaver MX、Flash MX、Fireworks MX、 FrontPage 2000、PhotoShop 等软件的强大功能

28、来策划与编辑完成基本网页。参考文献参考文献网页设计参考文献网页设计参考文献: : 1 网页设计与制作教程作者: 赵明渊电子科技大学出版社 2 Dreamweaver 网页设计标准教材 作者：顾群业 王晓峰中国电力出版社网页设计参考网站：1. http:/网页制作大宝库2. http:/设计前沿网17致致谢谢首先要特别感谢郝晓青老师，在此次设计中的认真指导和帮助，使得此次课题设计最终完成达到预期目标。郝老师认真负责的工作态度， 严谨的治学精神和深厚的理论水平都使我收益匪浅。他无论在理论上还是在实践中，都给与我很大的帮助，使我得到不少的提高这对于我以后的工作和学习都有一种巨大的帮助，感谢他耐心的辅导。同时在此感谢学院和学校老师给予的这次的锻炼机会以及帮助， 希望在以后的学习中能与老师有更多的联系，加强以后工作的能力和水平。18