《网站规划ppt》由会员分享，可在线阅读，更多相关《网站规划ppt（71页珍藏版）》请在金锄头文库上搜索。
1、网站规划与艺术,计算机系 杨 兵,课程概述,信息(information),已经成为哲学、自然科学、技术科学和社会科学等各个领域所广泛应用的概念。随着信息技术的发展，网络成为人们共享信息的必然。建立网站也就是必然逝在必行。如何建好网站，如何建立有特色的网站将是我们这门课程所要讲述的内容。,课程内容,课程内容包括部分 网站规划 6 网站的设计与艺术 4 Web标准 14 Web的排版 4 全案解析 2 考核 ,通过课堂教学、课后作业使学生达到以下要求： 1.了解网站开发过程，熟练进行网站规划与设计 2.掌握网站开发的技术：Web标准、Html语言、Css 、JavaScript,以及网页排版等核
2、心知识。 3.熟练掌握至少一种网站开发的工具软件和编程语言，能进行整个网站的规划和开发,考核方式及成绩构成考核方式：考试或设计作品。具体考核时间至少提前1周通知学生。成绩评定：平时成绩(作业)占30，期末考核70。 推荐教材：周陟. 网页设计解析.北京:清华大学出版社，2009.3 参考书目：张兵义 于丽娟. 网站规划与网页设计. 北京:电子工业出版社， 2006.4顾正刚,网站规划与建设（新版）21世纪高职高专系列教材, 机械工业出版社,Part1 网站规划,Chapter 1 网站相关概念,1.1 www的基本概念,1.1.1 www是什么WWW是建立在客户机/服务器模型之上的。WWW是以
3、超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。能够提供面向Internet服务的、一致的用户界面的信息浏览系统。实质：分布式超媒体系统world wide web是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分(因特网也包括电子邮件、Usenet以及新闻组)。它实际上是多媒体的集合，是由超级链接连接而成的。我们通常通过网络浏览器上网观看的，就是万维网的内容.,美国国防部高级研究计划署建立了ARPA网，该网络最成功的技术就是TCP/IP 协议。,1945,1965,1
4、967,1969,1.1.2 WWW的起源发展史,Ted Nelson第一次使用“超文本”一词来形容这种管理信息的系统。失败告终。,在IBM资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由Andries Van Dam主持，在美国布朗大学最终完成,Vannevar Bush提出，他在理论上建立了一个超文本文件系统。,1.2 网站(Web Site)的相关概念,网页，网页文件，网站，主页 Http协议，超文本 域名与Ip,域名服务器 URL（统一资源定位器）协议：/主机名或Ip:端口/路径名/文件名 Html语言,网页,网页 是一种网络信息传递的载体。这种媒介的性质和我们日常
5、的“报纸”、“广播”、“电视”等传统媒体是可以相提并论的。在网络上传递相关的信息，比如文字、图片甚至多媒体音影，都是存储在网页中，浏览者只需要通过浏览网页，就可以了解到相关信息了。网页其实就是一个文件，可以称它为网页文件。其正如一个音乐文件，需要播放器收听一样。网页的显示也需要网页浏览器的支持,网站,网站(Website)是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。平常我们所听说的“新浪”、“搜狐”、“网易”等，即是俗称的“网站”。 网站由域名（domain name 俗称网址），网站源程序和网站空间三部分构成。域名（俗称网址）形式比如： (一级域
6、名)， （二级/三级域名）；网站空间由专门的独立服务器或租用的虚拟主机承担；网站源程序则放在网站空间里面，表现为网站前台和网站后台。 当任何人登陆到一个网站时，看到的第一个页面就是该网站的首页(主页)。首页是一个网站的第一页，也是最重要的一页。,域名与Ip,域名服务器,IP地址 域名 域名服务器（DNS）中存放Internet主机的域名与IP地址对照表.,网址 url,用户通过WWW（万维网）访问Internet，是在浏览器（BROWSER）的“地址”处键入所谓“网址”，术语叫“URL”（Uniform Resource Locator,统一资源定位器）。 它一般是由四个部分构成的，即协议、主
7、机名、文件夹名（目录）和文件名。 协议：/主机名或Ip:端口/路径名/文件名 网址有两种形式：IP地址与域名。 桂林电子科技大学网址：域名： http:/IP地址：202.193.64.34,Html语言,Hypertext Markup Language, 中文也就是超文本链接标示语言。HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。 HTML（超文本置标语言，HyperText Markup Language）是为网页创建和其它可在网页浏览器中看到的信息设计的一种置标语言。HTML被用来结构化信息例如标题、段落和列表等等，也可用来在一定程度
8、上描述文档的外观和语义。由蒂姆伯纳斯李给出原始定义，由IETF用简化的SGML（标准通用置标语言）语法进行进一步发展的HTML后来成为国际标准，由万维网联盟（W3C）维护。,什么是网站备案？,国家信息产业部要求刚建立的网站必须在30日内到其官方网站http:/注册备案，以证明网站为合法网站，并不违反国家相关不允许的法律范畴，可以正常对外发布。网站备案是相关部门规定的，网站的备案号就好比人的身份证，不属于虚拟主机的业务范围。如果你的网站不办理信息产业部网站备案，将会被强制关闭，这是信息产业部新颁布的规定。,什么是网站优化,网站优化可以从狭义和广义两个方面来说明，狭义的网站优化，即搜索引擎优化，也
9、就是让网站设计适合搜索引擎检索，满足搜索引擎排名的指标，从而在搜索引擎检索中获得排名靠前，增强搜索引擎营销的效果。广义的网站优化所考虑的因素不仅仅是搜索引擎，也包括充分满足用户的需求特征、清晰的网站导航、完善的在线帮助等，在此基础上使得网站功能和信息发挥发挥的效果。也就是以企业网站为基础，与网络服务商（如搜索引擎等）、合作伙伴、顾客、供应商、销售商等网络营销环境中各方面因素建立良好的关系。 网站优化设计的含义具体表现在三个方面：对用户优化、对网络环境（搜索引擎等）优化，以及对网站运营维护的优化。,什么是站点地图,站点地图又称网站地图是一个网站所有链接通道。浏览者可通过站点地图浏览所有页面，站点
10、地图最起码要包括您的主要的内容链接或者栏目链接。 网站地图的作用，除了为用户快速了解网站结构和内容提供方便之外，更重要的一个作用是，大部分技术型搜索引擎为了收录网站中的内容页面，搜索蜘蛛都会先通过网站地图的链接来进入深层次网页，也就是所，设计规范的网站地图还要给搜索引擎“看”，这对于网站的搜索引擎优化推广策略尤其重要。,1.3 web的结构和工作原理,www服务器 软件,Asp/Jsp等,Html文件,Http协议,浏览器,www服务器,SQL语言,数据库,网页的工作原理,客户端,服务器端,发出请求,发回网页,静态网页的工作原理,接受请求,找到静态网页,发送网页,服务器端,动态网页的工作原理,
11、接受请求,找到动态网页,发送网页,服务器端,执行程序代码， 生成静态网页,1.4 B/S企业应用开发构架,在构建企业级应用的时候，通常需要大量的代码，而且这些代码一般分布在不同的计算机上，划分代码运行在不同计算机上的理论就是多层设计理论。企业级应用系统通常分成两层、三层或者N层架构。,两层架构,传统的两层应用包括用户接口和后台程序，后台程序通常是一个数据库，用户接口直接同数据库进行对话。实现上，通常使用ASP、ASP.NET、JSP或者VB等技术编写这类软件，结构如图1-2所示。,三层架构,两层应用中，应用程序直接同数据库进行对话。三层结构在用户接口代码和数据库中间加入了一个附加的逻辑层，通常
12、这个层叫做“商务逻辑层”，如图1-3所示。,N层架构,如果某个应用超过三个独立的代码层，那么这个应用叫做N应用，就不再叫四层或者五层等名称，而是统称为N层。如图1-4所示。,1.5 常见的网络程序设计,浏览器端编程语言 HTML（Hypertext Markup Language，超文本标记语言）、CSS（Cascading Style Sheets，层叠样式表单）、JavaScript语言和VBScript语言。,服务器端编程语言,1.6 网页制作的工具,虽然HTML语言是功能强且语法简单的网页设计语言。但是，直接用HTML在普通的文本编辑器上编写制作复杂精美的网页是很不方便的。网页设计者不
13、得不花大量的时间去测试所写的文档是否合乎其语法规则，又不能在网页设计的同时就了解文档在浏览器上地显示的确切效果。其次要记忆、掌握大量的HTML语言地语法规则也不是一件容易的事情。而现在可视化网页设计工具可以使得设计者网页设计轻松自如。网页设计的工具很多，当前流行的工具有：,网站开发工具之一：Frontpage,它是建立和管理专业网站的简易工具，用户可以精确地将网页中的每一个元素放置在网页地任意位置上；用户可以自定义主题。它具有方便地数据库管理功能，还能提供灵活的网页发布工具。,网站开发工具之二：Dreamweaver,Dreamweaver是当前最流行的网页设计软件，目前最新版本为CS5 Dr
14、eamweaver与其它同类软件相比主要有以下优点： 不生成冗余代码。 强大的动态页面支持。 方便的代码编辑。 优秀的网站管理功能。,网站开发工具之三EditPlus,1、EditPlus 一套功能强大，可取代记事本的文字编辑器，拥有无限制的Undo/Redo、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能，就是它有监视剪贴簿的功能，能够同步于剪贴簿自动将文字贴进EditPlus的编辑窗口中，让你省去做贴上的步骤。另外它也是一个好用的HTML编辑器，除了可以颜色标记HTML Tag (同时支持C/C+、Perl、Java)外，还内建完整的HT
15、ML和CSS1指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装IE 3.0以上版本，它还会结合IE浏览器于EditPlus窗口中，让你可以直接预览编辑好的网页(若没安装IE，也可指定浏览器路径)。 这是款编写PHP时使用最多的文本编辑器之一，方便使用，很多PHP人士都喜欢用它。,JSP开发工具,现下流行的JSP开发工具主要有IBM VisualAge，JBuilder，NetBeans，JRun，Urledit，dreamweaver，editplus等,Asp,开发工具,Visual Studio .NET 2008 Visual Studio .NE
16、T 2010 Dreamweaver cs5,辅助工具Fireworks,Fireworks是Macromedia公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。,辅助工具Flash,它能制作可任意放大的动画，使用方便，它提供的交互动画文件容量很小，它的使用流技术播放动画。“网页设计三剑客”。 Dreamweaver 是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。 Fireworks是Macromedia公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。 flash是Macromedia公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。,
