佛山科学技术学院 第8章 网页设计基础 Internet及多媒体应用.

Presentation on theme: "佛山科学技术学院 第8章 网页设计基础 Internet及多媒体应用."— Presentation transcript:

1 佛山科学技术学院 第8章 网页设计基础 Internet及多媒体应用

2 主要内容 1 概述 2 网站规划 3 网页制作流程实例 Internet及多媒体应用

3 8.1 概 述 Internet及多媒体应用

4 网页的工作机制 网页 网页，又称Web页，是一种可以在WWW上传输的，能被浏览器识别和解释并呈现各种信息的页面。实质上是一个纯文本文件，它应用超文本和超媒体技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，包括文字、图片、声音、视频、动画等，并通过浏览器进行解释后，向浏览者呈现出来。 网页通常分为静态网页和动态网页两种。 Internet及多媒体应用

5 网页的工作机制 网站 网站，又称Web站点或站点，它是万维网中的一个结点（即网络上的一个位置，包括服务器、网络设备和相关网络软件），每个结点可通过服务器上的一个文件夹存放不同的内容，服务器将整个文件夹在网上发布出去，这样其他用户可以通过WWW访问网站内容。这些内容可能是一组相关网页及其他辅助文件的集合，也可能只有一个网页。只要有独立的域名和空间，只有一个网页也可以是一个网站。 当用户上网进入网站后，网站总是向用户提供一个首先要访问的网页，该网页称为首页或主页，再通过超链接访问站点的其他网页。 Internet及多媒体应用

6 网页的工作机制 静态网页 静态网页是纯粹的HTML文件，其文件扩展名是 .htm.、.html或 .shtml。它可以包含HTML标签、文本、Jave小程序、客户端脚本及客户端ActiveX控件。但这种网页不包含任何服务器端脚本，网页中的每一行HTML代码在它放置到Web服务器之前都是事先编写好的，在放到Web服务器以后其内容便不再发生任何更改，除非网页设计人员重新编写或修改，所以称之为静态网页。 Internet及多媒体应用

7 网页的工作机制 动态网页 所谓动态网页是指网页文件中包含在服务器端执行的程序代码，需要应用程序服务器根据用户提供的不同信息而执行该程序代码进行数据处理，从而动态地生成不同的网页内容；可根据需要通过后台数据库提供实时数据更新和数据查询服务，然后将结果发送到浏览器端呈现。这类网页通常采用ASP、PHP或JSP等技术来设计，根据所采用的技术不同，网页文件的扩展名也不同，如 .asp，.aspx，.jsp，.php，.cgi等。 Internet及多媒体应用

8 静态网页的访问过程 ① Web 浏览器请求静态页面。 ② Web 服务器查找该页面。 ③ Web 服务器将该页面发送到请求浏览器。
Internet及多媒体应用

9 动态网页的访问过程 ① Web 浏览器请求动态页面。 ② Web 服务器查找该页面并将其传递给应用程序服务器。
③ 应用程序服务器扫描并执行该页面中的指令，动态生成结果页面。 ④ 应用程序服务器将生成的页面传递回Web服务器。 ⑤ Web服务器将结果页面发送到发出请求的浏览器。 Internet及多媒体应用

10 具有数据库交互能力的动态网页访问过程 ① Web浏览器请求动态页面。 ② Web服务器查找该页面并将其传递给应用程序服务器。
③ 应用程序服务器扫描并执行该页面中的指令。 ④ 应用程序服务器将查询发送到数据库驱动程序。 ⑤ 驱动程序对数据库执行查询。 ⑥ 记录集返回给驱动程序。 ⑦ 驱动程序将记录集传递给应用程序服务器。 ⑧ 应用程序服务器将数据插入页面中，然后将该页面传递给Web服务器。 ⑨ Web服务器将完成的页面发送到发送请求的浏览器。 Internet及多媒体应用

11 网站的分类 按网站内容和服务性质的不同则可分为门户类网站、娱乐与休闲类网站、游戏类网站、公司企业类网站、新闻媒体类网站和购物类网站等。 门户类网站 是一种综合性网站，信息涉及的领域非常广泛。 新闻媒体类网站 以提供新闻服务为主，在这类网站中可以查阅到各种新闻信息，作用类似于报纸。 娱乐与休闲类网站 大都是以提供娱乐信息和流行音乐为主的网站。这类网站的特点非常显著，通常色彩鲜艳明快，内容综合，多配以大量图片，设计风格或轻松活泼，或时尚另类。 Internet及多媒体应用

12 8.1.2 网站的分类 购物类网站 公司企业类网站 个人网站
网站的分类 购物类网站 这类网站对技术要求非常严格，其工作流程主要包括商品展示，商品浏览，添加购物车，结账等。 公司企业类网站 企业根据自己的需求而专门创设的，其目的在于宣传企业及其产品，并提供一些售后服务。目前，绝大多数大中型企事业单位均有自己的网站。 个人网站 以个人名义开发创建的具有较强个性化的网站。一般是个人为了兴趣爱好或展示自己而创建的，带有很明显的个人色彩，在内容、风格、样式上，都形色各异、包罗万象。 这类网站一般不具备商业性质，通常规模不大，网上随处可见，也有不少优秀的站点。 Internet及多媒体应用

13 8.1.3 网页设计与制作工具 网页编辑排版工具 网页图像处理工具 网页动画制作工具 网页配色工具
网页设计与制作工具 网页编辑排版工具 最常用的网页编辑排版软件是Dreamweaver和FrontPage。 网页图像处理工具 图像处理工具大多选择Photoshop、Fireworks等。 网页动画制作工具 如Flash等。 网页配色工具 如“玩转颜色”、“网页配色”等。 Internet及多媒体应用

14 网站建设与网页制作流程 在制作网页之前，首先要了解网站建设与网页制作的一般流程。主要目的是要强调网站的整体概念，强化网页与网站相关的意识，制作的每一个网页都要围绕主题，并属于同一个网站。只有思想上明确总体规划与设计，思路、流程清晰，才能做好每一个网页，建好一个网站。 Internet及多媒体应用

15 网站建设流程 网站规划与设计：根据用户需求和实际条件，确定网站目标、功能、内容、结构、风格等，对整个网站进行全面的规划和设计。
页面设计并链接：根据网站的规划和设计，按照网页制作流程，完成所有网页，并创建所有链接。 创建网站：根据自身条件，选择自己搭建管理网站的软硬件平台，或申请托管主机、虚拟主机，或申请网页空间，以确定网站的发布平台。 测试网站并发布：使用专用的FTP工具或网页编辑软件的网站管理功能，将制作完成的整个网站上传，并进行各项测试，通过后发布。 网站维护与更新：网站正常运行期间，对网站进行维护与更新。 Internet及多媒体应用

16 网页制作流程 网页是网站的元素，一个网站是由若干个相互链接的网页构成的。网页的建设流程通常遵循：确立网页目标并构思，设计页面版式，收集与加工网页素材，编辑网页内容，测试并发布网页，如图8-12所示。 确立网页目标并构思：明确网页设计目标，添加什么内容，实现什么效果，并进行相关构思，将作为后续网页制作的指导依据。 设计页面版式：网页版式设计很重要，只有既合理、又美观地布局网页中的各个元素，设计出来的网页才是成功的网页。 收集与加工网页素材：根据设计目标，全面收集或制作各种素材，是下一步制作网页的前提条件。 编辑网页内容：按照设计目标和网页版式设计要求，使用网页制作工具制作每一个网页。只有反复编辑或修改，才能确保网页制作的最终效果。 测试并发布网页：已经完成的或更新了的网页，要及时放到网站上进行测试及发布。 Internet及多媒体应用

17 8.2 网 站 规 划 Internet及多媒体应用

18 8.2.1 网站内容规划 网站主题 网站名称 网站的主题也就是网站的题材，设计一个网站，首先要确定网站的主题。 主题要小而精。
网站内容规划 网站主题 网站的主题也就是网站的题材，设计一个网站，首先要确定网站的主题。 主题要小而精。 题材最好是自己擅长或者喜爱的内容。 题材不要太滥或者目标太高。 网站名称 网站名称是其主题的高度概括，要正当合法，体现主题容易记，还要有特色，甚至标新立异，给浏览者更多的视觉冲击和空间想象力。 尽量简短精要，一般控制在6个汉字以内，如新浪、网易、中国雅虎、中国新闻网、中国网络电视等。 Internet及多媒体应用

19 8.2.1 网站内容规划 内容准备 栏目设计 文字材料 图片 声音、动画和影片
网站内容规划 内容准备 文字材料 图片 声音、动画和影片 栏目设计 栏目的实质是一个网站的大纲索引，它应该将网站的主体明确显示出来。一般的网站栏目设计要注意以下几方面： 紧扣主题 设立最近更新或网站指南栏目 设立可以双向交流的栏目 设立下载或常见问题回答栏目。 Internet及多媒体应用

20 8.2.2 网站CI设计 设计网站标志（Logo） 设计标准色彩
所谓CI（corporate identity），是指通过视觉来统一企业的形象。一个好的网站，与实体公司一样，需要整体的形象包装和设计。有创意的CI设计，对网站的宣传推广有事半功倍的效果。 设计网站标志（Logo） 网站标志（Logo）的作用很多，最重要的就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。 设计标准色彩 “标准色彩”是指能体现网站形象和延伸内涵的色彩。一般来说，不超过三种，太多则让人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。 Internet及多媒体应用

21 8.2.2 网站CI设计 设计标准字体 设计宣传标语 标准字体是指用于标志、标题、主菜单的特有字体。
宣传标语是体现网站精神、网站目标的，可以用一句话甚至一个词来高度概括，类似于实际生活中的广告词。 Internet及多媒体应用

22 8.2.3 设计网站的目录结构与链接结构 设计网站的目录结构 建立链接结构 不要将所有文件都存放在根目录下 按栏目内容建立子目录
设计网站的目录结构与链接结构 设计网站的目录结构 不要将所有文件都存放在根目录下 按栏目内容建立子目录 建立独立的images目录 目录的层次不要太多 不要使用中文目录名和过长的目录名 建立链接结构 树状链接结构 星状链接结构 比较好的方案是：首页和一级页面之间用星状链接结构，一级和以下各级页面之间用树状链接结构。 Internet及多媒体应用

23 8.2.4 网页布局设计 常用网页布局结构 左右型（即左右两列） 上下型（即一列，上下两行或上中下多行标题、脚注）
网页布局设计 常用网页布局结构 左右型（即左右两列） 上下型（即一列，上下两行或上中下多行标题、脚注） 上左右型（即2列，标题、侧栏和脚注） 上左右下型（即2列，标题、左右侧栏和脚注） 上下左中右型（即3列，标题、左中右栏和脚注） POP时尚型（页面布局像一张宣传海报，以一张精美图片作为页面的设计中心） Internet及多媒体应用

24 8.2.4 网页布局设计 常用网页布局结构 左右型（即左右两列） 上下型（即一列，上下两行或上中下多行标题、脚注）
网页布局设计 常用网页布局结构 左右型（即左右两列） 上下型（即一列，上下两行或上中下多行标题、脚注） 上左右型（即2列，标题、侧栏和脚注） 上左右下型（即2列，标题、左右侧栏和脚注） 上下左中右型（即3列，标题、左中右栏和脚注） POP时尚型（页面布局像一张宣传海报，以一张精美图片作为页面的设计中心） Internet及多媒体应用

25 8.2.4 网页布局设计 页面布局尺寸 浏览器垂直滚动条要占用屏幕显示宽度20像素（px）
网页布局设计 页面布局尺寸 浏览器垂直滚动条要占用屏幕显示宽度20像素（px） 默认的上、下、左、右边距分别为10像素（可设置为0） 800×600分辨率下，页面显示的最大宽度为780px，一般实际取值范围是700～780px 1024×768分辨率下，页面显示的最大宽度为1004px，一般实际取值范围分别是900～1004px Internet及多媒体应用

26 8.2.4 网页布局设计 网页布局的黄金比例 网页布局的一般骨架，如右图所示。包括页眉（即标题）、侧栏、内容和页脚（即脚注）等。
网页布局设计 网页布局的黄金比例 网页布局的一般骨架，如右图所示。包括页眉（即标题）、侧栏、内容和页脚（即脚注）等。 网页布局时上下各行高度、左右各列宽度的比例要大致符合黄金比例0.618。 Banner Footer Main content Sidebar Logo Navigation Internet及多媒体应用

27 网页布局设计 网页布局设计步骤 设计版式草案 列出清单 精细化布局 确定布局方案 Internet及多媒体应用

28 8.3 网页制作流程实例 Internet及多媒体应用

29 8.3 网页制作流程实例 创建网站目录结构 定义站点 新建网页文档 设置页面属性 插入表格布局页面 添加文本 插入图像 插入多媒体
8.3 网页制作流程实例 创建网站目录结构 定义站点 新建网页文档 设置页面属性 插入表格布局页面 添加文本 插入图像 插入多媒体 保存浏览网页 Internet及多媒体应用

30 佛山科学技术学院 本章小结 介绍网页、网站的基本概念以及网站的类型，简述网页访问机制、网站建设与网页制作的一般流程、网站规划和网页布局设计等，最后，以简单实例，介绍创建网站和制作网页的操作过程。 实验要求 课后完成配套实验指导书第5篇中的实验1、实验2。