[互联网]网站开发与网页设计.ppt

《[互联网]网站开发与网页设计.ppt》由会员分享，可在线阅读，更多相关《[互联网]网站开发与网页设计.ppt（65页珍藏版）》请在三一办公上搜索。

1、网站开发与网页设计,考核方式：,平时出勤率占30%平时成绩占30%最后一次大作业占40%公共邮箱：密码：gxyjsjx2012,本章简介：网站开发与网页设计是一个涉及面广且较为复杂的工程，因此在开发网站之前，网站开发者首先要对网站开发有个全面的认识和规划。本章将从网站的基本概念、网站的开发流程、撰写网站策划书、网站开发相关软件等方面介绍网站开发相关概念、整体流程及前期规划等内容。,第一篇 基础知识篇 第一章 网站概述,目 录,1.1 网站与网页的基本概念1.2 网站的开发流程1.3 撰写网站策划书1.4 网站开发相关软件介绍1.5 本章小结1.6 习题,1.1 网站与网页的基本概念,1.1.1

2、 网页 网页是网站的基本信息单元，是WWW（World Wide Web，万维网或环球信息网）的基本文档。它是一种可以在WWW网上传输，并能被浏览器识别的文本文件。它由文字、图片、动画、声音等多媒体信息以及超链接所组成，基于HTML（Hyper Text Mark-up Language，超文本标记语言）语言编写，通过超链接实现与其他网页或网站的关联和跳转。,1.1.2 网页的分类根据网页的位置分类 根据网页的位置，网页可分为主页和内页两类。根据网页的表现形式分类 根据网页的表现形式，网页可分为静态网页和动态网页两类。,静态网页的基本工作原理,优点：下载速度快，因为它不需要程序运算和数据库连接

3、。缺点：不易维护，若网站维护者要更新网页的内容，就要通过FTP软件把相关的网页文件下载下来，必须手动来更新其所有的HTML文档。,动态网页的基本工作原理,优点：效率高、更新快、移植性强，从而快速地达到所见即所得的目的。缺点：频繁地读取数据库会导致服务器要花费大量的时间来进行相应的处理，当访问者达到一定的数量后，会导致效率成倍地下降。,1.1.3 网站 网站是由多个网页组成的，但不是网页的简单罗列组合，而是用超链接方式组成的既有鲜明风格又有完善内容的有机整体。简单地说，网站是一种通讯工具，就像布告栏一样，用户可以通过网站来发布自己想要公开的资讯信息，或者利用网站来提供相关的网络服务。人们可以通过

4、浏览器来访问网站，获取自己需要的信息或者享受其网络服务。,1.1.4 网站的分类根据网站提供的服务分类（1）资讯类网站：以提供信息为主要目的。（2）交易类网站：以实现交易为目的。（3）互动游戏类网站：为用户提供在线的免费或收费游戏服务。（4）有偿资讯类网站：提供资讯为目的。（5）功能型网站：广泛需求的功能扩展。（6）综合类网站：功能强大和内容丰富。,根据网站的性质分类,1.2 网站的开发流程,1.2.1 确定网站主题原则：主题要小而精题材应结合本身的特点和优势题材不要太滥，目标不要太高,1.2.2 网站整体规划 整体规划主要包括：网站的目标、网站的名称、网站的功能、网站的内容、网站的风格、网站

5、的结构以及网站的技术实现等等。,1、网站的目标 建设一个网站从一开始就应该有一个明确的发展目标，可以从以下几点来考虑：（1）明确网站将来的访问对象，即明确网站的服务对象。（2）明确网站提供的服务项目。（3）明确网站的发展定位，确定网站的发展方向。网站的目标定位要冷静、认真去思考，不要好高骛远，这样才能够实实在在确定网站的位置和发展目标。,2、网站的名称 确定网站的主题之后，就可以确定网站的名称。名称至关重要，它对网站的形象和宣传推广具有很大的影响。因此，网站的名称应该正气、易记、有特色。3、网站的功能 网站的功能设计在网站的建设当中起着相当重要的作用，是整个网站规划中最为核心的一步，设计出新颖

6、强大的功能，对于网站的建设和推广营销来说是一个关键的环节。设计网站功能时，设计者应以网站的目标、内容为基础，以此考虑如何实现网站目标，体现网站内容。,4.网站的内容 网站的内容是网站规划的一项重点，它直接影响到一个网站的受欢迎程度。因此，网站的内容结构必须清晰，注意突出网站的形象和特色。网站内的网页应由多种成分组成，但图像和多媒体信息的使用要适中。网站的内容结构应使用户方便浏览，尽量选择突出网站特色的内容。总之，对网站内容的设计，应尽量周密细致，做好创意。,5.网站的风格 网站的风格是个抽象的概念，它是指网站的整体形象给浏览者的综合感觉。它是通过网页元素来体现的，网页色彩、平面构成、文字、图像

7、等元素都会直接影响网站风格。,如何树立网站风格呢？（1）确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。因此，保证内容的质量和价值性，这是最基本的，无须置疑的关键。（2）需要彻底弄明白希望网站给人的第一印象是什么。（3）在明确自己的网站印象后，开始努力建立和加强这种印象。风格的形成不是一次定位的，而是在实践中需要不断强化、调整和修饰。,6.网站的结构 网站的结构就是对网站的内容、功能进行一个层次化的组织方式，它包括网站的目录结构和链接结构。清晰的目录结构有利于站点的维护，而优秀的链接结构有利于使用最少的链接，达到最大的链接效果

8、。,（1）网站的目录结构 目录结构，即网站的物理结构，是指建立网站时创建的目录。要根据网站的主题和内容来分类规划目录，不同的栏目要对应不同的目录，在各个栏目目录下也要根据内容的不同建立子目录。,（2）网站的链接结构 链接结构，即网站的逻辑结构，是指页面之间相互链接的拓扑结构。每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接，这些点并不是分布在一个平面上，而是存在于一个立体空间中。树状链接结构 星型链接结构,两者总是结合在一起使用,首页和一级页面之间,一级和二级页面之间,7.网站的技术实现（1）Web服务器的选择，选择采用自建服务器还是租用服务器

9、或虚拟主机。（2）选择操作系统，用Unix、Linux还是Window Server。（3）采用系统性的解决方案（如IBM、HP等公司提供的企业上网方案、电子商务解决方案等），还是自己开发方案。（4）网站安全性措施，开发网站时应考虑安全措施并且制定出相应的防黑、防病毒方案。（5）相关页面及程序开发方案：设计页面的软件、网页程序开发语言、网站后台数据库方案。,1.2.3 收集整理网站素材 收集整理网站素材包括搜集、整理加工、制作和存储等环节。搜集的素材包括文本、图片、动画、背景音乐等，这些素材要进行适当加工，如图片扫描、文字录入、图片剪辑。同时要注意保存原始素材，加工后的素材要分门别类保存。,1

10、.2.4 开发与测试网站,测试网站,网站页面设计,网站程序设计,1.网站页面设计（1）首页的设计尽量不要放置太多的图片或者大图片，从而增加网页的下载显示时间。画面不要设计得杂乱无章，使浏览者不易找到所需要的东西。重视标记(Logo)设计，一旦进入网页，最引人注目的当数标记，它是一个网页的画龙点睛之笔，它的好坏直接影响网页的整体效果。,27,网站标志（Logo）,（2）其它内页的设计保持与首页相同的风格。其它网页一般情况下要有返回首页的链接。目录结构不要太多太深。,2.网站程序设计（1）数据库设计 设计数据库时，程序员需要根据网站的功能规划、内容规划建立用户、表、索引、存储过程等，同时根据构造的

11、查询语句的需要，建立相应的视图，最终完成数据库的设计。（2）后台脚本设计 后台脚本设计主要是使用合适的脚本语言编写实现数据库的读、写、显示等操作的等程序以及一些过程控制及特效程序。,3.测试网站 测试的目的是为了找出网站的错误和问题，从而更改错误，解决问题。测试网站主要内容是功能测试、浏览器兼容性测试和超链接测试。,1.2.5 域名空间的申请与备案域名的申请 域名(Domain Name)是网站在互联网上的名字，每一个域名只能对应一个IP地址，但是一个IP地址可以对应多个域名。域名在互联网上是国际通行的，全世界都可以通过域名访问某一个网站。域名也是唯一的，谁先注册，谁就拥有使用权。在选取域名的

12、时候，应该以简明、易记、便于输入和具有一定的内涵为原则进行命名。域名的命名多以企业名称的汉语拼音、英文名称、名称的缩写、汉语拼音的谐音以及中英文结合等形式进行命名。,中国互联网络信息中心（CNNIC）（http:/），是国内域名注册的权威机构，注册域名的具体步骤如下：（1）确定域名注册代理商（2）搜索域名（3）注册域名（4）注册用户（5）填写注册申请表（6）确认付款方式（7）域名管理,2.空间的申请 网站空间就是用来存放网站内容的计算机空间，网站空间根据规模大小可以分为：虚拟主机、自架设服务器两种。如果是大型企业、政府、学术单位等,能够负担得起高额设备(高等级的电脑主机与宽带专线月租费用)与人

13、事费用则需要考虑自行架设服务器。对一般中小企业、工作室、个人而言最省钱而又有效率的方式,就是向 ISP(Internet Service Provider，网络服务提供者)申请虚拟主机，也就是在 ISP 所架设的 Web 服务器上租一块空间,放置你的网站。,3.域名空间的备案 根据国家工信部的相关规定，在国内开办网站，应当履行域名和空间的备案手续。未经备案，不得在中华人民共和国境内开办网站。从2005年7月1日起，新注册域名和空间开办的网站，应在开通时一并提交备案表格，由空间服务商免费代办备案，当然也可以通过访问工信部网站(http:/)自行办理域名和空间的备案手续。,1.2.6 发布网站 当

14、完成了网站的设计、制作、测试等工作后，就需要把设计好的网站的全部文件上传到服务器来完成整个网站的发布。Dreamweaver内置了强大的FTP功能，可以帮助用户实现对站点文档的上传和下载。当然，用户也可以选择其它FTP工具上传和下载网站，如CuteFTP、FlashFXP、LeapFTP等。,1.2.7 更新和维护网站 网站上传完毕之后，还需要经过一系列的网站更新和维护操作，才能够正常的营运。通常，需要每隔一段时间对网站的某些页面进行更新，保持网站内容的新鲜感以吸引更多的浏览者。同时，由于病毒感染、黑客入侵等各方面的安全原因，用户还应该定期检查页面元素和各种超链接是否正常，并且定期对网站进行备

15、份，以便网站遭到破坏后能够及时恢复，从而保障网站的正常运行。,1.2.8 宣传与推广网站 网站开通后，就像注册了公司一样，必须进行有效的宣传推广，才能变得知名，并带来经济效益，网站的宣传推广主要有如下几种方式：1注册到搜索引擎2交换广告条3Meta标签的使用4直接跟客户宣传,38,宣传标语是网站的精神和目标，可用一句话甚至一个词加以高度概括，类似生活中的广告金句。例如，Intel的“给你一颗奔腾的心”。,1.3 撰写网站策划书,一个网站的成功与否与建站前的网站策划有着极为重要的关系。在建立网站前应明确建设网站的目的、确定网站的功能、确定网站规模、投入费用，进行必要的市场分析等等，只有做到详细的

16、策划，才能避免在网站建设中出现的诸多问题，使网站建设得以顺利进行。网站策划是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。,1.3.1 网站策划书撰写要点 撰写网站策划书应该尽可能涵盖网站规划中的各个方面，网站策划书的写作要科学、认真、实事求是。1.前期调研分析（1）相关行业的市场是怎样的，市场有什么样的特点，是否能够在互联网上开展公司业务。（2）市场主要竞争者分析，竞争对手上网情况及其网站策划、功能作用。（3）公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力（费用、技术、人力等）。,2.网站

17、主题定位和功能定位（1）确定网站的主题及目的，是为了树立企业形象，宣传产品，进行电子商务，还是建立行业性网站。（2）根据需要和计划，确定网站的功能类型：企业型网站、应用型网站、商业型网站、电子商务型网站。企业网站又分为企业形象型、产品宣传型、网上营销型、客户服务型、电子商务型等。（3）根据网站功能，确定网站应达到的目的。（4）企业内部网（Intranet）的建设情况和网站的可扩展性。,3.网站内容规划（1）根据网站的目的确定网站的结构导航。（2）根据网站的目的及内容确定网站整合功能。（3）确定网站的结构导航中的每个频道的子栏目。（4）确定网站内容的实现方式。,4.网站技术解决方案（1）确定建站

18、是采用自建服务器，还是租用虚拟主机。（2）选择操作系统。分析投入成本、功能、开发、稳定性和安全性等。（3）确定是采用现成的企业上网方案，电子商务解决方案，还是自己开发。（4）网站安全性措施，防入侵、防病毒方案等。（5）选择什么样的动态程序及相应的数据库。,5.网页设计（1）网页美术设计要求。网页美术设计一般要与企业整体形象一致，要符合企业规范，要注意网页色彩、图片的应用及版面策划，保持网页的整体一致性。（2）在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。（3）制定网页改版计划，如半年到一年时间进行较大规模改版等。,6.网站测试（1）文字、图片是否有错误。（2

19、）程序及数据库测试。（3）链接是否有错误。（4）服务器稳定性、安全性。（5）网页兼容性测试，如浏览器、显示器等。,7.网站维护（1）网站内容的更新、调整等。（2）服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间。（3）数据库维护。有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视。8.网站发布与推广（1）网站测试后进行发布的公关，广告活动。（2）搜索引掣登记等。,9.网站设计日程表 网站设计日程表包括各项规划任务的开始时间、完成时间、负责人等内容。10.费用明细 需要详细列出所需各项费用的清单，估算出总的投资额度。在建设网站之初，一定要进行细致的策划，才能达到预期建

20、站目的。,1.3.2 实例：撰写“北京奥运吉祥物-福娃”网站策划书,1.福娃简介 福娃是北京2008年第29届奥运会吉祥物，其色彩与灵感来源于奥林匹克五环、来源于中国辽阔的山川大地、江河湖海和人们喜爱的动物形象。他们的造型融入了鱼、大熊猫、藏羚羊、燕子以及奥林匹克圣火的形象。五个娃娃的名字连在一起，你会读出北京对世界的盛情邀请“北京欢迎您”。,2.需求分析 通过本网站，用户可以向全世界人民宣传北京奥运，宣传中国文化，向世界各地的人民传递友谊、和平、积极进取的精神和人与自然和谐相处的美好愿望。,3.网站主题定位和功能定位“北京奥运吉祥物-福娃”网站是一个非盈利性的主题宣传网站，它以北京奥运吉祥物

21、-福娃为形象，讲述了福娃的涵义、灵感、历史以及北京奥运会的相关新闻，旨在推广北京奥运会、推广福娃文化，使全世界人民关注福娃，关注北京奥运会，以此向全世界人民推广中国博大精深的文化。,4.网站内容规划网站名称：北京奥运吉祥物-福娃网站语言：简体中文网站主题：推广福娃文化，宣传北京奥运会网站风格：网站以深红色为主色调，象征着吉祥喜庆。网站中大量使用了奥运会相关图标，使主题鲜明突出，要点明确。网站以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，突出网站的特点。,栏目设置：（1）福娃简介（2）感受福娃：福娃外形、福娃特点（3）产生历程：灵感来源、设计思想、深刻内涵（4）福娃动态：文字新闻、

22、图片新闻（5）福娃运动造型（6）历届奥运吉祥物（7）福娃感言（8）调查问卷（9）流量统计（10）奥运官网,“福娃”网站的结构图,网站功能模块,5.网站技术解决方案,6.“北京奥运吉祥物-福娃”网站的首页草图,7.网站测试,网站测试,功能测试,浏览器兼容性测试,超链接测试,8.网站维护（1）随时更新网页内容及网站栏目。（2）每三个月对服务器进行一次维护。（3）在维护期内，对于系统运行过程中出现的问题尽快解决，尤其是对服务器及相关软硬件的维护,9.网站推广（1）通过搜索引擎推广网站（4）利用传统媒体推广网站（3）利用其它网站推广自己的网站（2）利用自己的网站推广自己的网站,10.网站设计日程表,1

23、.4 本章小结,本章首先介绍了与网站相关的基本知识，了解了什么是网页，什么是网站，网站和网页的几种常见类型，使读者在学习网站开发与网页设计之前能够对网站知识有一个深入的理解和体会。其次，本章详细介绍了网站开发的整个流程。随着网站开发技术的不断更新，网站的设计和开发越来越像一个软件工程，网站的设计和开发已经进入了一个需要强调流程和分工的时代，因此只有建立规范的、有效的、健全的开发机制，才能适应用户不断变化的需求，达到预期的开发目标。最后，本章以“北京奥运会吉祥物-福娃”网站为实例，讲述了网站策划书的设计与撰写，根据不同的需求和建站目的，内容可以随之增加或者减少。,1.5 习题,一、填空题1._是

24、网站的基本信息单元。2.网页是用_语言编写的。3.根据网页的表现形式，网页可分为_和_两类。4.静态网页文件一般都是以_、_、_等形式作为文件名的后缀。5.动态网页是指_的网页。,二、简答及实训题1.网页的基本元素有哪些？3.结合本书上网查询常用的网站开发语言或技术，并了解其发展趋势。4.上网查询关于网站项目开发方面的资料，概括企业网站项目开发的流程。5.上网查看著名网络公司的网站项目开发方案书，根据自己的兴趣爱好，确定一个主题，学习编写自己的网站策划书。,习题参考答案,一、填空题1.网页2.HTML（Hyper Text Markup Language或超文本标记语言）3.静态网页、动态网页4.html、.htm、.shtml5.可以进行交互（用户通过网页可以进行交互或用户可以进行读写操作）,二、简答及实训题1.文字、图片、动画、声音、视频等3.asp、php、jsp等4.一般情况下，网站开发流程包括前期的确定网站的主题、网站的整体规划、收集整理网站素材；中期的开发与测试网站、域名空间的申请与备案、发布网站；后期的更新维护网站和宣传与推广网站。5.略。,