网页设计与制作应用教程（第2版）,机械工业出版社同名教材 配套电子课件,主要内容,第一部分 网页设计与制作基础 第二部分 Adobe Dreamweaver CS5 网页制作 第三部分 Adobe Fireworks CS5 网页图片处理 第四部分Adobe Flash CS5 网页动画制作,2,第一章 Internet与网页设计概述,1.1 Internet 概述 1.2 网站规划设计概述 1.3 网页设计基础,1.1 Internet 概述,Internet 与TCP/IP协议 IP地址和域名 Internet提供的主要服务 WWW 简介 浏览器服务器模式,1.1 Internet 概述,Internet 与 TCP/IP协议 Internet 即国际计算机互联网，在中国也称“因特网”或“万维网”，是由符合TCP/IP等网络协议的网络组成的互联 网。,表1-1 TCP/IP模型和OSI参考模型对照关系,IP地址和域名,IP 地址由网络地址（netid）和主机地址（hostid）两部分组成。网络地址标识了主机所在的逻辑网络，主机地址则用来标识网络中的一台主机。,IP 地址是一个32位的二进制数, 为了便于记忆，分成四组，每组八位二进制数。但通常采用十进制表示，即每个字节的二进制数转换成十进制数，每个十进制数之间用圆点“.”隔开，这叫做“点分法十进制”。 例如： 11001010 11001110 11000000 01000010 表示成： 202 . 206 . 192 . 66,1.1 Internet 概述,IP地址的类型 IP 地址中的网络地址是由Internet 网络中心来统一分配的。为了根据不同的网络规模来合理分配IP 地址，IP地址分为A B C 三个基本类。,1.1 Internet 概述,域名,IP地址能唯一标识网上的主机地址，但为了便于记忆，为此提供了一种域名系统DNS，域名和IP 地址之间存在一一对应的关系，域名由四部分组成。 格式为： 计算机名.组织机构名.二级域名.顶级域名,例如：公安大学域名： www . ppsuc . edu . cn,1.1 Internet 概述,Internet提供的主要服务,Internet 为我们提供了信息获取、发布和交流的渠道，其服务功能包括：,WWW 服务 电子邮件 文件的下载和上传 FTP（文件传输）服务 Usenet News（新闻组）和BBS（电子公告牌）服务 Telnet（远程登录）服务 网上游戏 个人主页空间 电子商务,1.1 Internet 概述,WWW 简介,浏览器与网页 统一资源定位器（URL） 超文本 超文本置标语言HTML HTTP 主页 常用搜索引擎,浏览器服务器模式,1.1 Internet 概述,1.2 网站规划设计概述,网站规划设计是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。,网站设计流程,编写网站设计的计划书 确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点 确定网站提供的内容 网站交互设计，如信息反馈、意见调查等 对网站的内容进行分类 设计网页必有的内容，如公司标志、联系方法和导航条等 制作网页的模板 检查网页的链接 根据需要修改不合适的地方 正式发布网站,1.2 网站规划设计概述,确定网站的类型,门户网站 搜索引擎 电子商务网站 数据中心 主题信息网站 团体网站 个人网站,网站的建设技术,静态网页技术 动态网页技术,1.3 网页设计基础,网页设计规划,1. 确定网页的整体风格,2. 设计网页框架,图1-2 个人网页框架草图,网页的基本元素,1.3 网页设计基础,文本 图片和动画 声音和视频 超链接 表格 表单 导航栏 其它常见元素,网页布局,网页布局的常用技术如下:,CSS（层叠样式表）布局 表格布局 框架布局,1.3 网页设计基础,网页布局类型,“国”字型布局 拐角型布局 标题正文型布局 左右框架型布局 上下框架型布局 封面型布局 Flash 型布局,1.3 网页设计基础,网页设计工具简介,1.网页制作工具,文本编辑器 FrontPage Dreamweaver Adobe Pagemill,2.网页图形图像处理工具,Fireworks Photoshop CorelDraw,3.网页动画制作与特效工具,Flash Ulead Gif Animator,1.3 网页设计基础,网页三剑客,Adobe 公司的Dreamweaver、Fireworks 和Flash 系列产品，素有网页“三剑客”之称。它们是专门用于网页制作和站点管理的软件。其中Dreamweaver 被大家称为“织梦者”，众多专业网站和个人主页都把它列为首选工具。Flash 是“三剑客”中的“闪电”，其以网上动画为特长，它做出的动画效果真是精美致极。Fireworks 是“三剑客”中的“火焰”，它以处理页面图片为特长，并可以轻松制作GIF 动画。,本章小结,本章作为教程的开篇内容，介绍了网页设计的入门知识，主要包括：了解Internet 与网页设计的基本概念的内容，如Internet 的概念、网络提供的服务；了解网站设计的基础内容，如设计网站的类型、网站的规划及相关技术；掌握网站制作的基础知识，如构成网页的基本要素、网页的布局；以及网页设计与制作的工具软件等环节的知识。,思考与练习,简述你所了解的网站就功能实现所涉及的类型有哪些？ 网站主页的布局有哪些风格？ 简述“网页三剑客”软件中Dreamweaver、Fireworks、Flash 软件的功能特点。,