网页设计 李玮莹 lwy@mail.gench.com.cn Office:1236# 微信公众号：

课程性质 课程性质：考查课 考核方式：平时成绩和三次大作业成绩 平时成绩：课堂表现，考勤，随堂作业，课后作业（40%） 大作业一：table与表单的应用（10%） 大作业二：多媒体元素在网页中的应用（20%） 大作业三：综合网站设计与制作（30%）

设问 网上发表过自己的留言吗？ 自己开发过网站吗？ 喜欢什么样的网站？ 想过自己做一个个人网站吗？ 你的就业向往是什么？想过做一个网页设计师吗？ 从浏览者 到设计师

主要内容 HTML网页设计　 美工与动画设计（Fireworks、flash）　 CSS样式设计　 CSS页面布局设计　 综合案例

第1章 网页设计基础知识

1.1 网页的基础概念

图1.2 服务器与浏览器的关系示意图

1.1.1　网页设计遵循的理念 （1）考虑访问者的带宽问题。 （2）版面布局合理。 （3）网站标志的设计。 （4）站点内容要精、专，及时更新。 8

1.1.2 网站整体风格的确定 网站的风格 包含的因素 例如： 指网站的整体形象给访问者的综合感受。 1.1.2　网站整体风格的确定 网站的风格 指网站的整体形象给访问者的综合感受。 包含的因素 网站的标志设计、色彩、版面布局、浏览方式、交互性、文字和价值等。 例如： 儿童网站“WaWaYaYa”是生动活泼的；大多商业网站如IBM，是专业严肃的。 教师演示，打开WaWaYaYa和IBM网站给大家演示，并进行讲解。 9

http://www.wawayaya.net/

http://www.61flash.com/

http://www.ibm.com/cn/

置身于山区的旅馆，特色突出

页面色调明亮，户外生活

确定网站的整体风格需要注意以下几个方面： （1）网站标志要放在醒目位置要保持不变。 （2）反应网站精髓的标语并动态显示。 （3）导航放在每一张网页的相同位置。 （4）确定网站的主体颜色并注意颜色。 （5）页面的布局一般采用左边导航右边文字， 或者上面导航下面文字的方法，或两者结合使 用。 （6）内容结构简单且分类要简而精。

1.1.3 网页创意 什么是创意？ （1）创意是传达信息的一种特殊手段。 （2）创意是将现有的要素重新组合。 1.1.3　网页创意 什么是创意？ （1）创意是传达信息的一种特殊手段。 （2）创意是将现有的要素重新组合。 网络上最多的创意是与现实生活相结合，例如网上购物，电子社区，电子病历，在线拍卖等。而且资料越丰富，越容易产生创意。所以任何人，都可以创造出不同凡响的创意来。 21

1.1.4 网页色彩搭配简介 网页色彩搭配应考虑以下因素： （1）色彩的鲜明性。 （2）色彩的独特性。 （3）色度的合适性。 1.1.4　网页色彩搭配简介 网页色彩搭配应考虑以下因素： （1）色彩的鲜明性。 （2）色彩的独特性。 （3）色度的合适性。 （4）色彩的代表性。 22

1.1.5　常用网页设计工具简介 1．网页设计软件Dreamweaver 2．网络动画制作软件Flash 3．网络图像处理软件Fireworks 24

1．网页设计软件Dreamweaver Dreamweaver是一个方便的网页制作工具，支持最新的DHTMLTT和CSS标准。 它能够快速高效地创建极具表现力和动感效果的网页，同时使制作过程简单化。 不仅提供了强大的网页编辑功能，而且拥有完善的站点管理机制，是一个集网页制作和站点管理于一身的网页创作工作。

2．网络动画制作软件Flash Flash是最流行的矢量动画制作软件之一，它只用少量矢量数据就可以描述一个复杂的对象，而且占用的存储空间少，非常适合在网络上使用。 运用它可以制作出栩栩如生、动感十足的动画作品。

3．网络图像处理软件Fireworks Fireworks是专门针对Web而设计的图 像处理软件，因此它对图像进行了充分 的优化。

1.2 网页与HTML

1.3 Web标准 Web标准：即网站标准。WEB标准不是某一个标准，而是一系列标准的集合。 网页的构成：结构+表现+行为 结构化标准语言：主要包括XHTML和XML 表现标准语言：主要包括CSS 行为标准：主要包括对象模型、ECMA Script（JavaScrip ）

对网站浏览者的好处： 文件下载与页面显示速度更快 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士） 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等） 用户能够通过样式选择定制自己的表现界面 所有页面都能提供适于打印的版本

对网站所有者的好处： 更少的代码和组件，容易维护 带宽要求降低（代码更简洁），成本降低 更容易被搜寻引擎搜索到 改版方便，不需要变动页面内容 提供打印版本而不需要复制内容 提高网站易用性 举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。 在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

Web发展的三个时代 各行各业对网页人才的需求日益增大 Web 3.0时代，这就不仅仅是产生交互了，而是提出了一个新的概念，网站运营方提供平台，网页浏览者可以参与平台的共建，在网站平台发布自己的应用程序。网页浏览者的权限更进一步提升，不仅仅是信息的发送和接收方，还可以发布自己编写的交互式应用程序。典型代表：Facebook、校内网、微博等。 各行各业对网页人才的需求日益增大

 图1.5 仅使用HTML定义“结构”的页面效果

图1.6 使用CSS设定样式之后的效果

1.4 网页设计与开发过程 简单来说，网站开发的全过程大致可为 策划与定义、设计、开发、测试和发布5个阶 段。

图1.7 网站开发的工作流程

1.5 HTML基础 HTML（Hypertext Markup Language，超 文本标记语言）不是一种编程语言，而是一 种描述性的标记语言，用于描述超文本中内 容的显示方式。 最基本的语法就是：<标记>内容</标记>。 当浏览器从服务器接收到HTML文件后， 就会解释里面的标记符，然后把标记符相对 应的功能表达出来。

Dreamweaver工作环境简介 1 ．工作环境介绍 2．自定义界面 3．Dreamweaver CS3的三种视图模式 菜单栏 工具栏 文档编辑区 属性面板 面板组 1 ．工作环境介绍 2．自定义界面 3．Dreamweaver CS3的三种视图模式