网页设计概述.ppt

网页设计与制作 主 讲：涂 春 梅 mail： 本门课程教材 网页设计基础 清华大学计算机与信息管理中心 中国铁道出版社 推荐参考教材1 网页设计与制作教程（第4版 ） 刘瑞新 等编著 机械工业出版社 推荐参考教材2 网页设计与制作案例教程 李敏 主编 电子工业出版社 推荐参考教材3 精通css+div网页样式布局 前沿科技 主编 人民邮电出版社 课程定位 v网页设计与制作是软件技术专业的专业必 修课程 v网页设计与制作是以计算机应用基础 课程为基础，同时又是软件技术专业各后续主 要专业课的基础。 v通过本课程的学习，应掌握网页设计与制作的 基本理论、基本操作技能和基本分析方法，为 以后学习web应用程序开发等后续专业课程打 下必备的基础。 学习目标 学 习 目 标 目标 -你的目标由你选择 v订smart的目标 specific 确定的 measurable 能够衡量的 achievable 可达成的 realistic 现实的 time 时间限制 行动 目 标 实现 现在 v成功即实现自己所设定的目标 掌握网页编程基础html相关知识 知识目标知识目标 熟练掌握网页制作软件dreamweaver的 基本操作和使用技能 掌握网页页面布局的各种方法 掌握表单网页制作方法 掌握图片与多媒体文件的添加、调整 掌握建立各种形式的超级链接的方法 css层叠样式表的应用 理解行为的作用，掌握设置行为的方法 培养收集、处理信息，准备、加工素材 的能力 技能目标技能目标 学会通过网站、书籍、素材光盘等方式 收集所需的文字资料、图像资料、flash 动画和网页特效等。 培养制作静态网页的能力 培养设计网站的综合能力 培养策划能力、色彩感悟能力；充分 培养和提高动手能力 具有勤奋学习的态度，严谨求实、创新 的工作作风 素质目标素质目标 具有良好的心理素质和职业道德素质 具有高度责任心和良好的团队合作精神 具有一定的科学思维方式和判断分析问题 的能力 运用所学的理论知识和技能解决网站开发 过程中所遇到的实际问题的能力 考核方式考核方式 平时作业 实验报告 上课考勤 网页设计与制 作相关技术的 实际应用 平时成绩(30%) 实践考核 (30%) 理论考试 (40%) 相关的基础理 论、知识点及 相关技术的应 用 学生作品 第一章 网页基础概述 1 2网页中的常用术语 3 4 网站开发的工作流程 5 什么是网页？ 网页制作工具 1 什么是网页？ 1 什么是网页？ v浏览web时所看到的文件称为web页，又称为 网页。 v网页可以将不同类型的多媒体信息（例如文本 、图像、声音和电影等）组合在一个文档中。 由于这些文档是用超文本标记语言html表示的 ，因此又称为html文档或超文本。 html vhtml通过标记符（tag）标记网页的各个组成部 分，通过在网页中添加标记符，指示浏览器如何 显示网页内容。浏览器按顺序阅读网页文件（ html文件）。 v任何网页页面都是以html语言为核心和基础的。 网页的分类 v按所处位置分类 按网页在网站中所处的位置可将网页分为主页和 子页两类。 v按表现形式分类 按网页的表现形式可将网页分为：静态网页和动 态网页。 静态网页 n 静态网页是指客户端浏览器发送url请求给服务 器，服务器查找需要的超文本文件不加处理直接 返回给客户端，在客户端浏览器显示的页面是由 网页设计师先制作完成放在服务器上的网页。 n 是纯粹html格式的网页，用户基本上不能参与 ，只是网站页面的静态发布。 n 静态网页相对更新起来比较麻烦，适用于一般更 新较少的展示型网站。 动态网页 n 动态网页中除了基本网页中的元素外，还包括一些程序， 这些应用程序需要浏览器与服务器之间发生交互行为。 n 动态网页技术根据程序运行的地点不同，又分为服务器端 动态技术（asp、jsp、php等）和客户端动态技术（ javascript、vbscript）。 n 动态网页一般涉及数据库操作，例如注册、登录、查询、 购物等，都需要设计强大的服务器端动态程序，并考虑各 种可能出现的出错情况，以保证网站的交互性和安全性。 动态网页的工作原理：动态网页的工作原理： 客户端浏览器向服务器发出客户端浏览器向服务器发出urlurl请求，服务器查找到请求，服务器查找到 相应的页面之后，首先读取动态网页上的代码，根据代码相应的页面之后，首先读取动态网页上的代码，根据代码 中的指令完成网页，然后将代码从网页上去掉，所得的结中的指令完成网页，然后将代码从网页上去掉，所得的结 果将是一个静态网页；应用程序服务器将该网页传送回网果将是一个静态网页；应用程序服务器将该网页传送回网 页服务器，网页服务器将网页发送到浏览器，浏览器得到页服务器，网页服务器将网页发送到浏览器，浏览器得到 的仍然是一个纯的仍然是一个纯htmlhtml的静态网页。的静态网页。 网页的结构 标题栏 地址栏 菜单栏 主 页 状态 栏 网页中的基本元素 网页中的主要元素有：文本、图像、超级链接、 导航栏、表格、表单、多媒体等。 1.文本 网页的主体一般以文本为主。在制作网页时， 可以根据需要设置文本的字体、字号、颜色以及 所需要的其他格式。 2. 图像 图像可以用作标题、网站标志（logo）、网页 背景、链接按扭、导航栏、网页主图等。使用最 多的文件格式是jpeg和gif格式。 3. 超级链接 超级链接是从一个网页指向另一个目的端的链 接。 4. 导航栏 导航栏能使浏览者方便地返回主页或继续下一 页的访问。导航栏可以是按钮、文本或图像 。 5. 表格 网页中的表格是一种用于控制网页页面布局的 有效方法。 6. 表单 表单通常用于收集信息或实现一些交互式的 效果。表单的主要功能是接收浏览者在浏览器端 的输入信息，然后将这些信息发送到浏览者设置 的目的端。 7. 多媒体 网页包含有声音、动画、视频等多媒体元素 。 2 网页中的常用术语 vwww vurl v文件传输协议（ftp） vip地址 v域名 v超级链接 v网站 2.1 www vwww（world wide web），中文称为万维网，也 可以简称网。 v它是一个大规模的在线信息集合，是一个资料空间 。可以通过一种叫做浏览器的应用程序进行检索与 查看。 www的起源 蒂姆伯纳斯李（tim berners lee） v 1989年，伯纳斯李提出了 “world wide web”的全球超文 本项目计划。 v 1990年，伯纳斯李开发出了架构起全球信息网的三大基 本技术：http(超文件传输协议电脑与服务器之间的沟 通语言)、html(超文本标记语言全球通用的文件格式) ，以及url(网址文件位置的标示系统)。 v 1991年，伯纳斯李把自己开发的全球信息网放到互联网 上。于是，一个划时代的奇迹，在欧洲粒子物理研究所、 在伯纳斯李的手中诞生了这就是今天风靡世界的 www。 vwww有什么不足的地方吗？ v万维网创始人伯纳斯李于1998年提出了有关下一 代万维网的构想语义网。 v语义网是机器可以理解数据含义的下一代万维网 。 比尔盖茨 比尔盖茨的豪华住宅 比尔盖茨那幢坐落在西雅图，被 喻为未来生活预言的科技住宅无疑 是当今世界上最现代化的豪华住 宅，堪称是智能建筑的经典之作。 v豪宅内共铺设各种电缆52英里，房子内所有的电器 设备相互连接成了一个智能网络。 v主人在回家途中便可在车内利用计算机遥控家中的 浴缸自动放水并调温，作好一切迎接准备。 v房屋装有气象感知器，可以根据各项气象指标，控 制室内的温度和通风情况。 v走进大厅时，空调系统会将室温调整至你感觉最舒 适的温度，音响系统也会针对你的喜好播放音乐， 灯光系统自动调整照明颜色与强度，就连墙上的 lcd显示屏，也会自动显示你喜爱的世界名画或播 放你上次只看到一半的影片。 v在住宅各处随意走动时， 地板能在6英寸的范围内 跟踪到人的足迹，在有人 经过时自动打开照明，离 去时自动关闭。 v每个房间的温度、照明、 音响等等都将随不同的设 定自动调整。就算是在水 池中，也会从池底“冒” 出如影随形的音乐。 v尤其有意思的是，比尔盖茨非常喜欢 车道旁边一棵140岁的老枫树，所以就通 过专门的监视系统对其进行24小时的全 方位监控一旦监视系统发现它有任何 干燥的迹象，灌溉系统就会启动。 v v是什么尖端的科技系统使得盖茨先生的豪宅拥有 如此高的智能化水平？ v要等到哪一个世纪才能让这样现代化的住宅走入 寻常百姓家？ v通过扩展今天的万维网（即www，是world wide web的简称）就完全可以使这一梦想变为现 实。这种扩展后的万维网称为语义网(semantic web）。 2.2 url url（uniform resource locator） v主要是用来指定协议（如http或ftp）以及对象 、文档、万维网网页或其他目标在internet的位置 和存取方式。一个url被用来标识一个网络路径，可 以通过互联网在这个url上访问到对应的资源。 通信协议 主机名 所要访问的网页路径及名称 v/111/welcome.htm v主机名为。所要访问的网页路 径及名称是/111/welcome.htm。 2.3 ftp ftp vftp（file transfer protocol）是一种广泛使用的 文件传输协议，是快速、高效和可靠的信息传输 方法。 vftp是基于客户/服务器模型的tcp/ip的应用，所 以只要在客户端和服务器之间建立了tcp/ip连接 ，无论两台电脑的位置远近、连接方式的异同以 及使用的操作系统的异同，都能通过ftp协议进 行文件的传输。 2.4 ip ip地址 v用来标识连接到internet上电脑的指定编号，每一 个ip地址对应一台电脑，这与用电话号码标识电 话网络中的电话相同。 v电脑识别的ip地址由32位二进制数值组成，电脑 上以十进制数值来显示，一组数值分为4部分，每 一部分均不能大于255，中间用“.”分隔，如 9 2.5 域名 域名 v就是常说的网址，它也具有惟一性，如百度的网 址、网易的网址等 就是一个域名，域名由汉语拼音或英文字符加上 数字表示，在访问网络时，域名将通过域名服务 器转换成ip地址，这种转换是在后台完成的。 2.6 超级链接 超级链接 v是网页中最常用的元素之一，网页就是通过无数 的超级链接才能组成一个网站。 v 超级链接可以链接到网站内部页面、对象，也可 以链接到其他网站，大大方便了用户在各个页面 对象之间实现跳转。 2.7 网站 v网站就是一个或多个网页的集合。从广义上讲， 网站就是当网页发布到internet上以后，能通过浏 览器在internet上访问的页面 。 2.7 网站 v 网站就是一个或多个网页的集合。从广义上讲，网站就是 当网页发布到internet上以后，能通过浏览器在internet上 访问的页面 。 v 网易 v 搜狐 v 新浪 v 重大 v 中国政府网 v 中国税务网 v 中国日报 v 南方周末 v 联众游戏 v 中国足球 v 旅游咨询 3 网页制作工具 v网页设计软件 (1). frontpage frontpage是microsoft公司出品的入门级网 页编辑软件。 (2). dreamweaver dreamweaver是macromedia公司推出的网页制 作产品，它是一个用于可视化设计与管理网页和 网站的工具，它与macromedia公司的flash、 fireworks配合使用，被称为“网页制作三剑客” 。 vdreamweaver是目前使用最多的网页设计软件。 v网页图像与动画制作工具 制作网页图像的软件种类繁多，大多数网页设计人员选择 的是fireworks或photoshop。 (1). fireworks fireworks是macromedia公司专门设计的web图形工具 软件，它可以用最少的步骤生成最小但质量很高的jpeg和 gif图像。 (2). photoshop photoshop是由adobe公司出品的著名的图形图像处理 软件。 v动画制作软件 网页动画制作中最常用的软件非flash莫属。 4 网站开发的工作流程 vv 在制作网页的过程中，要遵循一定的顺序才能协调分配整在制作网页的过程中，要遵循一定的顺序才能协调分配整 个制作过程的资源与进度。个制作过程的资源与进度。 确 定 主 题 搜 集 材 料 规 划 网 站 网站规划 推 销 网 站 维 护 更 新 后期维护网站制作 制 作 网 站 正 式 上 传 测 试 评 估 图 网站设计的工作流程 4.1 网站规划 1. 确定网站的主题 确定网站主题应遵循以下原则： （1）主题鲜明。一个网站必须要有一个明确的主题 ，在主题范围内做到内容全而精。 （2）明确设立网站的目的。 （3）体现自己的个性。把自己的兴趣、爱好尽情地 发挥出来，突出自己的个性，办出自己的特色 2. 搜集材料 围绕主题搜集材料，作为自己制作网页的素材 。 3. 规划网站 主题栏的设置 突出主题。把主题栏放在最明显的地方，让浏览者更快、 更明确的知道网站所表现的内容。 设计一个“最近更新”栏目，让浏览者一目了然的知道更新 内容。 栏目不要设置太多。 目录结构设计 按栏目内容建立子目录。 每个目录下分别为图像文件创建一个子目录image（图像 较少时可不创建）。 目录的层次不要太深，主要栏目最好能直接从首页到达 。 尽量使用意义明确的非中文目录。 颜色搭配 网页选用的背景应和页面的色调相协调，色彩 搭配要遵循和谐、均衡、重点突出的原则。 网站标志logo 人教网logo