网页制作技术 许莉 教学课件 第2章.pdfVIP

第2章 网页设计基础 • 本章学习目标 – 了解网页设计的有关知识和术语，理解相关 概念 – 熟悉网页构成的基本元素 – 掌握网页制作的基本原则和布局思想 – 了解网站开发的基本流程和制作步骤 – 上网浏览总结各种不同类型网页布局 2.1 网页设计基础知识 2.1.1 网页的知识与有关术语 • 网页（Web ） – 网页，也称为Web页，是万维网中的基本文 档，它是用HTML （超文本标识语言）或者 其他语言（如javaScript 、VBScript 、ASP 、 PHP、XML等）编写而成的。 2.1.1 网页的知识与有关术语 • 网站（Site） – 网站是指存放在网络服务器上的完整信息的 集合体，它包含一个或多个网页，这些网页 以超链接方式连接在一起，形成一个整体， 描述一组完整的信息。 2.1.1 网页的知识与有关术语 • 超文本（Hypertext） • 静态网页 • 动态网页 • 下载 2.1.2 网页的基本构成元素 • 文字 • 图像 • 超链接 • 表格 • 表单 • 事件与行为 • 动画 • 框架 • 音频 • 视频 • 交互 2.2 网页设计思想 2.2.1网页设计的基本原则 • 主题鲜明 • 结构合理 • 形式与内容统一 • 技术与艺术统一 • 整体与局部统一 2.2.2 网页设计的美学法则 • 统一与变化 • 对比与调和 • 对称与均衡 • 节奏与旋律 • 单纯与秩序 2.2.3 网页设计应考虑的问题 • 设计网站的标志（Logo ） 2.2.3 网页设计应考虑的问题 • 设计网站的宣传标语 2.2.3 网页设计应考虑的问题 • 设计网站的标准色彩 – 一个网站的标准色彩不宜过多，太多会让人 眼花缭乱。标准色彩应该用于网站的标志、 标题、主菜单和主色块，以给人整体统一的 感觉，其他色彩也可以使用，但只能作为点 缀和衬托，绝不可以喧宾夺主。 • 设计网站的标准字体 2.3 网页的版面布局 2.3.1 网页布局原则 • 平衡 • 对比 • 疏密度 • 比例 • 凝视 • 图片说明 2.3.2 网页布局结构 • “同”字型结构布局(Π型结构布局) 2.3.2 网页布局结构 • “国”字型布局 • T型布局 • “三”型布局 2.3.2 网页布局结构 • 对比布局 • POP布局 • Flash 布局 2.3.3 网页布局步骤 • 草案 • 粗略布局 • 定案 2.4 网页制作的基本流程 • 设计主题 • 网页素材收集 • 网页制作 • 网页测试与发布