《计算机导论》-第07章 网站建设基础（16版）_第1页
《计算机导论》-第07章 网站建设基础（16版）_第2页
《计算机导论》-第07章 网站建设基础（16版）_第3页
《计算机导论》-第07章 网站建设基础（16版）_第4页
《计算机导论》-第07章 网站建设基础（16版）_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

学习目标：（1）理解网站建设概念和设计流程；（2）了解网站建设的主要技术；（3）熟悉网站建设的常用工具。10:10:481第7章网站建设基础7.1网站建设概述7.2网页设计的常用技术7.3网页设计的常用工具5/21/20262参考网站我校“网页设计与制作”精品课程网站：/wy/index.htm课程负责人：孙俊国教授10:10:483引导案例：

互联网知识的宝库、信息的海洋当前网页已成为信息的主要载体，网站是网页的仓库，也是知识的仓库。截至2015年12月底：中国网页数量为2123亿个，年增11.8%；中国网站数量为423万个，年增26.3%；说进入“知识爆炸”时代，一点不为过。那么网站是如何设计的？使用什么技术与工具？这就是本章需要回答的问题。

10:10:4847.1网站设计概述1、网站设计的概念网站设计就是根据用户要求在互联网上传递的信息（包括产品、服务、理念、文化等）进行网站功能策划，然后进行页面设计与美化的工作。网站由若干网页组成！2、网站设计为三种大的类型：功能型网页设计（服务网站&B/S软件用户端）；形象型网页设计（品牌形象网站）；信息型网页设计（门户网站）。设计网站的目的不同，应选择不同的网站策划与设计方案。

10:10:4857.1网站设计概述3、网站设计流程（1）需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。（2）以业务目标为中心进行功能策划，制作出栏目结构关系图。（3）以满足用户体验设计为目标，使用快速原型设计工具或同类软件进行页面策划，制作出交互用例。（4）以页面精美化设计为目标，使用PS、AI、FW等软件，使用更合理的颜色、字体、图片、样式进行页面设计美化。（5）根据用户的反馈进一步调整页面设计，以达到最优效果。

10:10:486案例10:10:48710:10:4887.1网站设计概述4、设计目标（1）业务逻辑清晰，能清楚的向浏览者传递信息，浏览者能方便的寻找到自己想要查看的信息。（2）用户体验良好，用户在视觉上，操作上都能感到很舒适。（3）页面设计精美，用户能享受到美好的视觉体验，不会因为一些糟糕的设计细节而感到不爽。（4）建站目标明晰，网页能很好的实现企业的建站目标，向用户展示产品、服务、理念、文化等信息。10:10:4897.1网站设计概述5、设计说明（1）主题明确（2）设计思路清晰简洁实用；使用方便；整体性好；技术运用合理（3）版式设计合理（4）配色合理（5）形式内容充实（6）视觉效果好（7）虚拟现实运用（8）多媒体运用（10）导向清晰（11）下载快速10:10:48107.1网站设计概述6、发展趋势近年来，网页设计主要流行响应式设计、扁平化设计、无限滚动、单页、固定标头、大胆的颜色、更少的按钮和更大的网页宽度等。10:10:48117.2网页设计的常用技术

HTML（HTML5）DIV+CSSJavascriptASPPHPJSP.net技术等10:10:48127.2网页设计的常用技术一、HTML技术HTML（HyperTextMarkuplanguage）即超文本标记语言，也是www的描述语言。通过超级链接可方便跳转到其它网页。1.HTML主要特点如下简易性可扩展性平台无关性通用性10:10:48137.2网页设计的常用技术2.HTML的页面构成HTML文本是由HTML标记命令组成的描述性文本，HTML标记可以说明文字、图形、动画、声音、表格、链接等。HTML文档的结构包括<html>标记,头部<head>标记、主体<body>标记三大部分，头部描述浏览器所需的信息，主体包含所要说明的具体内容。<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;harset=gb2312"/><title>网页标题</title>……</head><body>网页具体内容……</body></html>10:10:48143.HTML5HTML5是为移动媒体设计的HTML语言；引进了video、audio和canvas等支持多媒体的新功能。注意：HTML5绝不是HTML10:10:4815二、JavaScript技术JavaScript技术是Netscape公司的产品，其目的是为了扩展NetscapeNavigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。常用来给HTML网页添加动态功能，比如响应用户的各种操作等。1.基于对象：JavaScript是种脚本语言，它可以用来制作与网络无关的对象。它是一种基于对象（ObjectBased）和事件驱动（EventDriver）的编程语言。2.解释性语言：JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。10:10:4816三、ASP技术ASP是ActiveServerPage(动态服务器页面)的缩写，是Microsoft开发的动态网页技术标准。ASP的原理是：在原来的HTML页面中加入JavaScript或VBScript代码，服务器在送出网页之前首先执行这些代码，完成如查询数据库一类的任务，再将执行结果以HTML的形式返回浏览器。

ASP不需要重新编译成可执行文件就可以直接运行，而且ASP内置的ADO组件，允许用户通过客户端浏览器访问各种各样的数据库。目前大部分的中小型网站是使用ASP技术建站的。你如何理解动态网页？10:10:4817正确理解：静态网页和动态网页发送URL请求给服务器JavaScriptActiveXASPPHPJSP运行处理返回静态HTML页面10:10:4818四、PHP技术PHP(PersonalHomePage)是一种跨平台服务器解释执行的脚本语言，与ASP类似，它也是基于服务器端用于产生动态网页而且可嵌入HTML中的脚本程序语言，PHP用C语言编写，可运行于UNIX/Linux和Windows9x/NT/2000下。随着Linux操作系统的快速发展，已经出现了大量用PHP设计的网站，如RedHat公司网站、搜狐网站的聊天室等都是用PHP制作的。10:10:4819五、JSP技术JSP是JavaserverPages技术的缩写，是由Java语言的创造者Sun公司提出、在传统的HTML网页中加入Java代码和JSP标记，最后生成后缀名为jsp的JSP网页文件。Web服务器在遇到访问JSP页面的请求时，执行过程同ASP。JSP页面中的程序代码在客户端是看不到的，这些内嵌的Java程序可以完成数据库操作、文件上传、网页重定向、发送电子邮件等功能，所有的操作均在服务器端执行，客户端得到的仅仅是运行结果，因此，JSP对客户浏览器的要求较低。10:10:48207.3网页设计的常用工具网页设计常用的工具主要有：Fireworks;Dreamweaver;FLASH;Photoshop;Visualstudio等10:10:48217.3网页设计的常用工具1、Firworks（FW）Fireworks是一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，网页效果图，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。主要功能：（1）创建编辑（2）图像优化（3）高效集成（4）原型构建（5）支持多页（6）组织方式编辑（7）滤镜效果（8）公用库存（9）智能缩放编辑（10）简化集成10:10:48222、Dreamweaver（DW）Dreamweaver是一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,无需编写任何代码就能快速创建web页面。由于Dreamweaver支持多种浏览器，可跨平台开发网页，实现了可视化动态HTML编程，方便地集成了Flash、ShockWave、ActiveX等众多外部媒体，加上使用简便，可扩展性强;全世界范围超过60%的专业网页设计师都在选用它作为网页开发工具。

10:10:48232、Dreamweaver（DW）主要特点：（1）网页制作效率高（2）网站管理强（3）控制能力强（4）自适应网格版面（5）移动支持（6）实时视图10:10:48243、flashFlash又被称之为闪客，是二维矢量动画软件。网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。10:10:48253、flash主要功能：（1）图形操作（2）补间动画（3）遮罩技术新版FlashCS5默认支持iOS项目开发。支持iPad和iPhone4高清app输出。10:10:48264、Photoshop（PS）Adobe

Photoshop，简称“PS”，是由Adobe

Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

功能与特点：1.图像编辑2.图像合成3.校色调色4.特效制作等10:10:4827小结本章主要介绍了网站建设的相关

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论