《计算机导论》教学讲义 第7章 网站建设基础.docVIP

青岛滨海学院教师教案 PAGE PAGE 9 PAGE 1 课题 第7章 网站建设基础 需 2 课时 教学 目的 要求 学习、理解网站建设的概念、设计流程,了解网站建设的主要技术和常用工具。 教学 重点 网站建设的概念、设计流程,了解网站建设的主要技术和常用工具。 教学 难点 网站建设的主要技术和常用工具。 教案编写日期 2016年7月20日 教学内容及教学过程 提示与补充 第7章 网站建设基础 7.1 网站建设概述 7.2 网页设计的常用技术 7.3 网页设计的常用工具 本章小结 练习题 第7章 网站建设基础 学习目标： （1）理解网站建设概念和设计流程； （2）了解网站建设的主要技术； （3）熟悉网站建设的常用工具。 引导知识： 互联网知识的宝库、信息的海洋 当前网页已成为信息的主要载体，网站是网页的仓库，也是知识的仓库。 截至2015年12月，中国网页数量为2123亿个； 截至15年12月底中国网站数量为 423 万个； 说进入“知识爆炸”时代，一点不为过。 那么网页是如何设计的？使用什么技术与工具？这就是本章需要回答的问题。 7.1 网站建设概述 1、网页设计的概念 网站建设就是根据用户要求在互联网上传递的信息（包括产品、服务、理念、文化等）进行网站功能策划，然后进行页面设计与美化的工作 。 2、网站类型： 功能型网页设计（服务网站、B/S软件用户端）； 形象型网页设计（品牌形象网站）； 信息型网页设计（门户网站）。 设计网站的目的不同，应选择不同的网页策划与设计方案。 3、网站设计流程 （1）需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。 （2）以业务目标为中心进行功能策划，制作出栏目结构关系图。 （3）以满足用户体验设计为目标，使用快速原型设计工具axure rp或同类软件进行页面策划，制作出交互用例。 【注：Axure RP是美国Axure Software Solution公司旗舰产品，是一个界面 专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。】 （4）以页面精美化设计为目标，使用PS、AI、FW等软件，使用更合理的颜色、字体、图片、样式进行页面设计美化。 （5）根据用户的反馈进一步调整页面设计，以达到最优效果。 4、设计目标 （1）业务逻辑清晰，能清楚的向浏览者传递信息，浏览者能方便的寻找到自己想要查看的信息。 （2）用户体验良好，用户在视觉上，操作上都能感到很舒适。 （3）页面设计精美，用户能享受到美好的视觉体验，不会因为一些糟糕的设计细节而感到不爽。 （4）建站目标明晰，网页能很好的实现企业的建站目标，向用户展示产品、服务、理念、文化等信息。 5、设计说明 （1）主题明确 （2）设计思路清晰 简洁实用；使用方便；整体性好； 技术运用合理 （3）版式设计合理 （4）配色合理 （5）形式内容充实 （6）视觉效果好 （7）虚拟现实 （8）多媒体 （9）便于使用 （10）导向清晰 （11）下载快速 6、发展趋势 近年来，网页设计主要流行响应式设计、扁平化设计、无限滚动、单页、固定标头、大胆的颜色、更少的按钮和更大的网页宽度等。 7.2 网页设计的常用技术 HTML（HTML5） DIV+CSS Javascript ASP PHP JSP .net技术 等 7.2.1 HTML技术 HTML（ HyperText Markup language）即超文本标记语言，也是www的描述语言。通过超级链接可方便跳转到其它网页。 1. HTML主要特点如下 简易性 可扩展性 平台无关性 通用性 2.HTML的页面构成 HTML文本是由HTML标记命令组成的描述性文本，HTML标记可以说明文字、图形、动画、声音、表格、链接等。HTML文档的结构包括html标记,头部head标记、主体body标记三大部分，头部描述浏览器所需的信息，主体包含所要说明的具体内容。 html xmlns=/1999/xhtml head metahttp-equiv=Content-Typecontent=text/html; harset=gb2312 / title 网页标题 /title …… /head body 网页具体内容…… /body /html 3. HTML5 HTML5是为移动媒体设计的HTML语言； 引进了video、audio和canvas 等支持多媒体的新功能。 · 新的解析规则增强了灵活性 · 新属性 · 淘汰过时的或冗余的属性 · 一个HTML5文档到另一个文档间的拖放功能 · 离线编辑 · 信息传递的增强 · 详细的解析规则 · 多用途互联网邮件扩展