第01章-网站设计概论

1、整理ppt1整理ppt2内容提要一、网站基本知识二、网站设计三、网站的开发流程四、网站设计相关软件五、网站设计相关程序语言整理ppt3一、网站基本知识基本概念网站及其组成网站的文件及资源网站的工作机制整理ppt4一、网站基本知识1、基本概念www网页和主页URL超链接整理ppt5一、网站基本知识1、基本概念wwwWorld Wide Web （环球信息网）的缩写，也可以简称为Web，有人译作“万维网”“环球网”“web网”“3w网”。最初是由欧洲核物理研究中心（cern）提出来的。WWW是当前Internet上最受欢迎、最为流行、最新的信息检索服务系统。它把Internet上现有资源统统连接起

2、来，使用户能在Internet上已经建立了WWW服务器的所有站点提供超文本媒体资源文档。 整理ppt6一、网站基本知识1、基本概念网页和主页网页就是我们通过网络浏览器看到的符合HTML的规范的网站页面文件网页组成文本、图片、动画、超链接、其他组件。文本、图片、动画、超链接、其他组件。主页：网站的第一页。网页的英文拼写是网页的英文拼写是“Web PageWeb Page”，泛指，泛指WWWWWW上所有可供浏览的页上所有可供浏览的页面；而主页的英文拼写是面；而主页的英文拼写是“Home PageHome Page”，特指用户进入站点后，特指用户进入站点后所看到的第一个页面。所看到的第一个页面。in

3、dex.htm(l)/jsp/php/asp. index.htm(l)/jsp/php/asp. default.htm(l)/ jsp/php/asp. default.htm(l)/ jsp/php/asp. 整理ppt7一、网站基本知识1、基本概念URL统一资源定位器(Uniform Resource Locator, URL) 是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL地址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的站点。简单地说，URL就是W

4、eb地址，俗称“网址”。 整理ppt8一、网站基本知识1、基本概念超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。整理ppt9一、网站基本知识网站及其组成网站的概念网站就是网页的有机结合 ，由若干个html 文件组成、以及由图象、声音、动画及数据库等各种服务器资源构成的集合体。整理ppt10一、网站基本知识网站及其组成网站的

5、组成部分：硬件组成：连接到网络上的计算机服务器。软件组成：在服务器上运行的网络操作系统、Web服务器、应用程序服务器软件等。信息服务的文件资源，如网页文件、图象文件、声音文件等。对网站进行管理和维护的网站管理人员和开发人员等。整理ppt11一、网站基本知识3、网站文件及资源静态网页：最基本的网站提供内容，由HTML语言描述，包括文本、表格、图象及其它内容，每个用户访问时内容均相同。静态网页只要放在网站服务器的文件夹中授权用户访问即可。整理ppt12一、网站基本知识3、网站文件及资源动态网页：网页内容随不同用户、不同的访问需求而发生变化，网页中不仅包含HTML代码，同时包含在Web服务器端执行的

6、脚本程序代码。通过脚本程序代码进行计算。网页能够访问服务器端的数据资源，并将结果返回给用户。整理ppt13一、网站基本知识3、网站文件及资源图像或图形文件：如gif、jpg、png、svg、bmp、tif类文件等，可以作为网页中的插图、网页的背景图片，极大改善了网页的显示效果。整理ppt14一、网站基本知识3、网站文件及资源数据库：当网站要通过动态网页提供各种 服务时，通常要利用数据库来保存数据并提供数据服务。例如电子商务、BBS等。整理ppt15一、网站基本知识3、网站文件及资源其它文件：声音、动画、流媒体资源等，可嵌入到网页或以超级链接方式下载到用户端执行。如 swf、wma、rm、avi

7、等。整理ppt16一、网站基本知识4、网站的工作机制静态网页的处理机制：网站的Web服务器只是简单地将页面发送到请求的浏览器。整理ppt17一、网站基本知识4、网站的工作机制动态网页的处理机制：Web服务器将控制权转交给应用程序服务器，应用程序服务器解释执行网页中包含的服务器端脚本代码，并根据脚本代码的要求访问数据库等服务器端资源，最后将计算结果 转变为标准的HTML文件代码，由Web服务器将文件发送到浏览器。整理ppt18整理ppt19内容提要一、网站基本知识二、网站设计三、网站的开发流程四、网站设计相关软件五、网站设计相关程序语言整理ppt20二、网站设计网站的定位站点风格网站的CI形象网

8、站的栏目和版块网站目录和链接结构整理ppt21二、网站设计网站的定位一个网站要有明确的目标定位，只有定位准确、目标鲜明，才可能作出切实可行的计划，按部就班地进行设计。网站的目标定位可体现在三个方面：题材和内容：应紧扣主题，并突出个性和特色。定位要准确，内容要精，不能过于宽泛，更不能包罗万象，漫无边际。网站域名（例如：）网站名称：申请好记的域名和命名一个别致的网站名称对网站的形象和宣传推广有很大影响。如：搜狐、新浪、网易、263等。整理ppt22二、网站设计2、网站的风格风格指的是站点的整体形象给浏览者的综合感受，包括版面布局、浏览方式、交互性和文字等诸多因素。网站风格要体现自己的特色，独树一帜

9、。通过网站的某一点，如文字、色彩、技术等，能让浏览者明确分辨出此部分就是网站所独有的。注意：风格建立在有价值的内容之上。网站有风格而无内容，是不行的，必须保证内容的质量和价值性；整理ppt23整理ppt24整理ppt25整理ppt26二、网站设计3、网站的CI形象CI ( corporate identity)：通过视觉来统一企业的形象。包括：标志、色彩、字体和标语。网站的CI形象设计包括：设计网站的标志(logo)：logo是一个网站的特色和内涵的集中体现，必须设计并制作网站的标志。标志的设计、创意来自该网站的名称和内容，让浏览者一看到标志就联想到这个网站。整理ppt27二、网站设计3、网站

10、的CI形象网站的CI形象设计包括：设计网站的标准色彩：不同的色彩搭配产生不同的效果，并可能影响到访问者的不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。情绪。标准色彩是指能体现网站形象和延伸内涵的色彩，主要用标准色彩是指能体现网站形象和延伸内涵的色彩，主要用于标志、标题、主菜单和主色块。于标志、标题、主菜单和主色块。适合于网页标准色：蓝色、黄适合于网页标准色：蓝色、黄/ /橙色、黑橙色、黑/ /灰灰/ /白等白等整理ppt28二、网站设计3、网站的CI形象网站的CI形象设计包括：设计网站标准字体：是指用于标志、标题和主菜单的特有字体。是指用于标志、标题和主菜单的特有字体。设计网站宣传标

11、语： 最好用一句话甚至是一个词来高度概括整理ppt29二、网站设计4、网站的栏目和版块制作网页前，一定要先规划好网站，确定合理的栏目和版块。栏目实质上是一个突出显示网站主题的大纲索引。整理ppt30二、网站设计4、网站的栏目和版块设计网站的栏目时应考虑以下内容：（1）紧扣网站的主题一般做法是将网站主题按一定的方法分类并将其作为网站的主栏目，且主题栏目个数在总数上要占绝对优势。整理ppt31二、网站设计4、网站的栏目和版块设计网站的栏目时应考虑以下内容：（2）设计一个最近更新或网站指南栏目若主页未安排版面放置最新更新内容信息，需设置一个“最新更新”栏目，若主页层次较多，又无站内搜索引擎，则应设置

12、一个“站点指南”栏目整理ppt32二、网站设计4、网站的栏目和版块设计网站的栏目时应考虑以下内容：（3）设定一个可以双向交流的栏目（4）设定论坛、留言簿或邮件列表等，让浏览者留下信息或建议等。版块的概念比栏目大，每一个版块都有自己的栏目。设置版块时，注意各版块要相对独立，相互关联，且版块的内容要围绕站点的主题。整理ppt33二、网站设计5、网站的目录和链接结构网站目录是指建立网站时创建的目录，站点上的所有网页及相关资源都分门别类、有序地存放在目录中。目录结构好坏对浏览者没有太大影响，但对站点本身的上传维护，内容扩充和移植有重要影响。整理ppt34二、网站设计建议：不要将所有文件都存放在根目录下

13、，会造成文件管理混乱，上传速度慢等。应尽量减少根目录下的文件数；按栏目内容建立子目录：子目录的建立应基于主菜单栏目；需要经常更新的栏目，可建立独立的子目录，相关性强，不需经常更新的栏目，可合并放在一个统一的子目录下。所有程序文件应放在特定目录下所有需要下载的文件最好放在一个目录下在每个主目录下都建立 images 目录目录的层次不要太深，一般不超过三层；整理ppt35内容提要一、网站基本知识二、网站设计三、网站的开发流程四、网站设计相关软件五、网站设计相关程序语言整理ppt36三、网站的开发流程网站的开发人员（由一个集体来完成）主导网站开发的单位和客户项目负责人美术动画设计人员程序设计师维护人

14、员整理ppt37三、网站的开发流程定义站点建立网站结构设计和制作主页其它页面制作测试页面发布和维护整理ppt38三、网站的开发流程1、定义站点明确建立网站的目的，确定网站提供的内容，及搜集网站资料。建立网站目的很多，如销售产品、树立形象、提供信息或游戏娱乐等。目的一定要明确，否则会影响到以后的设计。确定建立网站的目的：需要参与网站设计的各单位及成员一起构思，讨论，取得共识后确保开发过程不会发生争议，能够有效地进行网站建设。整理ppt39三、网站的开发流程1、定义站点确定网站内容：网站内容必须按照网站目的来选择且不能有内容越多越好的思想。应该有所侧重，与网站主题有关的内容选择相对多一点。进行资料

15、的搜集：主要指文本、图片、动画及背景音乐等。设计企业网站时，一般由客户提供大部分资料，然后对资料进行整理和筛选。整理ppt40三、网站的开发流程2、建立网站结构规划出网站的外观及工作方式；第一步就是建立网站结构流程图，图中应包括网站的所有关键页面及与其它网页的关系，技术要点和主要的链接也应在其中。建立结构时，可先绘制网站结构的草图，将所希望的网页内容全部加入进去，然后与其它开发人员一起研究讨论，最后确定网站结构图注意事项：网页的浏览线路是否流畅，是否能够引导浏览者正确地浏览等整理ppt41三、网站的开发流程3、设计和制作主页对于一个网站来说，主页是至关重要。主页制作要先绘制一张草图，图中应包括

16、网站标志、广告条、菜单栏、友情链接等基本部件，且根据部件重要性合理布置。主页内容一般是比较概括性文字，只是起一个引导性作用，文字不应太多。制作主页时不要使用太多或容量太大的图片和动画。太大将影响传输速度。整理ppt42三、网站的开发流程4、其它页面制作： 其它页面没有主页复杂，但方法相同。需要注意的问题：和主页保持相同的风格要有返回主页的链接目录结构不要超过三层整理ppt43三、网站的开发流程5、测试页面主要包括网页的测试及网站的验证与调试；测试网页：兼容性测试：检查浏览器版本的兼容性链接测试：检查链接是否有效和正确实地测试：将网页上传到Web服务器，测试链接，下载速度等。整理ppt44三、网

17、站的开发流程5、测试页面主要包括网页的测试及网站的验证与调试；网站的验证与测试：尽最大努力找出网站的所有错误。注意网站的可浏览性，在不同浏览器中浏览的效果有所差异。最好在几个不同的浏览器及不同版本中浏览测试。整理ppt45三、网站的开发流程6、发布和维护网站在服务器上发布-上传网站常用软件：CuteFTPFlash FXPLeap FTPWS_FTP等发布网站以后，还需要对网站做定期维护，如内容更新和版面扩展等。整理ppt46内容提要一、网站基本知识二、网站设计三、网站的开发流程四、网站设计相关软件五、网站设计相关程序语言整理ppt47四、网站设计相关软件FrontPage：Microsoft

18、公司，最新版本2003优点：易学易用，图形化界面，和Word相似缺点：生成代码过大主要功能：主要功能： 允许客户使用图片库组件允许客户使用图片库组件 类似类似PowerPoint的图形工具的图形工具 通过浏览器远程管理一个通过浏览器远程管理一个SharePoint团队站点团队站点 使用分析报告追踪访客如何访问并使用网站使用分析报告追踪访客如何访问并使用网站 增强的发布功能增强的发布功能 改进的查找和替换改进的查找和替换1. 使用数据库向导，用户可在网页上显示数据库使用数据库向导，用户可在网页上显示数据库内容。内容。整理ppt48四、网站设计相关软件Macromedia Dreamweaver

19、MX:特点：最佳的制作效率网站管理控制能力：提供代码视图、设计视图与代码/设计视图切换，并包含HomeSite等HTML代码编辑器梦幻模板和XML浏览器适应性Web应用程序开发能力整理ppt49四、网站设计相关软件FLASHFireworksPhotoShopCorelDRAW 整理ppt50内容提要一、网站基本知识二、网站设计三、网站的开发流程四、常用网站开发工具五、网站设计相关程序语言整理ppt51五、网站设计相关程序语言HTMLXMLCGIASP和ASP.NETPHPJSPJavaScript整理ppt52五、网站设计相关程序语言HTMLHyperTextMark-upLanguage即

20、超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。 整理ppt53五、网站设计相关程序语言CGICGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。绝大多数的CGI程序被用来解释处理来自表单的输入信息，并在服务器产生相应的处理，或将相应的信息反馈给浏览器。CGI程序使网页具有交互功能。 整理ppt54五、网站设计相关程序语言XMLeXtensible Markup Language即可扩展标记语言，它与HTML一样，都是处于SGM

21、L，标准通用语言。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。 整理ppt55五、网站设计相关程序语言ASP和ASP.NETActive Server Page的缩写，意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是.asp，现在常用于各种动态网站中。 ASP.net不仅仅是 Active Server Page (ASP) 的下一个版本,而且是一种建立在通用语言上的程序构架，能被用于一台Web服务器来建立强大的Web应用程序。 整理ppt56五、网站设计相关程序语言PHP一个嵌套的缩写名称，是英文超级文本预处理语言（PHP:Hypertext Preprocessor）的缩写。PHP 是一种 HTML内嵌式的语言，PHP与微软的ASP