第1章网页设计与制作应用教程.ppt

第1章网页设计与制作应用教程.ppt

《第1章网页设计与制作应用教程.ppt》由会员分享，可在线阅读，更多相关《第1章网页设计与制作应用教程.ppt（19页珍藏版）》请在冰豆网上搜索。

网页设计与制作应用教程（第2版）机械工业出版社同名教材机械工业出版社同名教材网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）主要内容主要内容第一部分第一部分网页设计与制作基础网页设计与制作基础第二部分第二部分AdobeDreamweaverCS5网页制作网页制作第三部分第三部分AdobeFireworksCS5网页网页图片处理图片处理第四部分第四部分AdobeFlashCS5网页动画制作网页动画制作2网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）第一章第一章InternetInternet与网页设计概述与网页设计概述1.1Internet概述概述1.2网站网站规划划设计概述概述1.3网网页设计基基础网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）1.1Internet1.1Internet概述概述InternetInternet与与TCP/IPTCP/IP协议IPIP地址和域名地址和域名InternetInternet提供的主要服提供的主要服务WWWWWW简介介浏览器服务器模式浏览器服务器模式网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）Internet与与TCP/IP协议协议Internet即国际计算机互联网，在中国也称即国际计算机互联网，在中国也称“因特网因特网”或或“万维网万维网”，是由符合，是由符合TCP/IP等网络协议的网络组成的互联等网络协议的网络组成的互联网。

网。

OSI参考模型参考模型TCP/IP模型模型应用层应用层应用层应用层TELNET、SMTP、FTP、DNS表示层表示层会话层会话层传输层传输层传输层传输层TCP、UDP协议协议网络层网络层网际层网际层IP协议协议数据链路层数据链路层网络接口层网络接口层物理层物理层表表1-1TCP/IP1-1TCP/IP模型和模型和OSIOSI参考模型对照关系参考模型对照关系1.1Internet1.1Internet概述概述网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）IPIP地址和域名地址和域名IP地址由地址由网网络地址（地址（netid）和和主机地址（主机地址（hostid）两部两部分分组成。

网成。

网络地址地址标识了主机所在的了主机所在的逻辑网网络，主机地址，主机地址则用来用来标识网网络中的一台主机。

中的一台主机。

IP地址是一个地址是一个32位的二位的二进制数制数,为了便于了便于记忆，分成四，分成四组，每每组八位二八位二进制数。

但通常采用十制数。

但通常采用十进制表示，即每个字制表示，即每个字节的二的二进制数制数转换成十成十进制数，每个十制数，每个十进制数之制数之间用用圆点点“.”隔开，隔开，这叫做叫做“点分法十点分法十进制制”。

例如：

例如：

11001010110011101100000001000010表示成：

表示成：

202.206.192.661.1Internet1.1Internet概述概述网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）IP地址的地址的类型型IP地址中的网地址中的网络地址是由地址是由Internet网网络中心来中心来统一分一分配的。

配的。

为了根据不同的网了根据不同的网络规模来合理分配模来合理分配IP地址，地址，IP地地址分址分为ABC三个基本三个基本类。

1.1Internet1.1Internet概述概述网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）域名域名IPIP地址能唯一标识网上的主机地址，但为了便于记忆，地址能唯一标识网上的主机地址，但为了便于记忆，为此提供了一种为此提供了一种域名系统域名系统DNSDNS，域名和，域名和IPIP地址之间存在地址之间存在一一对应的关系，域名由四部分组成。

一一对应的关系，域名由四部分组成。

格式为：

格式为：

计算机名计算机名.组织机构名组织机构名.二级域名二级域名.顶级域名顶级域名例如：

楚雄师范学院域名例如：

楚雄师范学院域名www.cxtc.edu.cn三级域名三级域名公安大学公安大学二级域名二级域名教育机构教育机构顶级域名顶级域名中国中国主机名主机名1.1Internet1.1Internet概述概述网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）InternetInternet提供的主要服务提供的主要服务InternetInternet为我们提供了信息获取、发布和交流的渠道，其为我们提供了信息获取、发布和交流的渠道，其服务功能包括：

服务功能包括：

lWWWWWW服服务l电子邮件电子邮件l文件的下载和上传文件的下载和上传lFTPFTP（文件（文件传输）服）服务lUsenetNewsUsenetNews（新（新闻组）和）和BBSBBS（电子公告牌）服子公告牌）服务lTelnetTelnet（远程登程登录）服）服务l网上游戏网上游戏l个人主页空间个人主页空间l电子商务电子商务1.1Internet1.1Internet概述概述网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）WWW简介l浏览器与网页浏览器与网页l统一资源定位器（统一资源定位器（URLURL）l超文本超文本l超文本置标语言超文本置标语言HTMLHTMLlHTTPHTTPl主页主页l常用搜索引擎常用搜索引擎浏览器服务器模式浏览器服务器模式1.1Internet1.1Internet概述概述网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）网站网站规划划设计是指在网站建是指在网站建设前前对市市场进行分析，确定网站的行分析，确定网站的目的和功能，并根据需要目的和功能，并根据需要对网站建网站建设中的技中的技术、内容、内容、费用、用、测试、维护等做出等做出规划。

划。

网站设计流程网站设计流程1.1.编写网站写网站设计的的计划划书2.2.确定网站确定网站设计总体思想，即网站体思想，即网站设计如何能如何能实现网站网站规划中提出的目划中提出的目标，以及网站的以及网站的风格和特点，网格和特点，网页的外的外观与使用方面的特点与使用方面的特点3.3.确定网站提供的内容确定网站提供的内容4.4.网站交互网站交互设计，如信息反，如信息反馈、意、意见调查等等5.5.对网站的内容网站的内容进行分行分类6.6.设计网网页必有的内容，如公司必有的内容，如公司标志、志、联系方法和系方法和导航条等航条等7.7.制作网制作网页的模板的模板8.8.检查网网页的的链接接9.9.根据需要修改不合适的地方根据需要修改不合适的地方10.10.正式正式发布网站布网站1.1Internet1.1Internet概述概述网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）确定网站的类型确定网站的类型l门户网站门户网站l搜索引擎搜索引擎l电子商务网站电子商务网站l数据中心数据中心l主题信息网站主题信息网站l团体网站团体网站l个人网站个人网站网站的建设技术网站的建设技术l静态网页技术静态网页技术l动态网页技术动态网页技术1.21.2网站规划设计概述网站规划设计概述网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）1.31.3网页设计基础网页设计基础网页设计规划网页设计规划1.1.确定网页的整体风格确定网页的整体风格2.2.设计网页框架设计网页框架首页首页个人简介个人简介本人视频本人视频联系本人联系本人文学作品文学作品图图1-21-2个人网页框架草图个人网页框架草图网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）网页的基本元素网页的基本元素l文本文本l图片和动画图片和动画l声音和视频声音和视频l超链接超链接l表格表格l表单表单l导航栏导航栏l其它常见元素其它常见元素网页布局网页布局网页布局的常用技术如下网页布局的常用技术如下:

lCSSCSS（层叠样式表）布局（层叠样式表）布局l表格布局表格布局l框架布局框架布局1.31.3网页设计基础网页设计基础网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）1.31.3网页设计基础网页设计基础网页布局类型网页布局类型l“国国”字型布局字型布局l拐角型布局拐角型布局l标题正文型布局标题正文型布局l左右框架型布局左右框架型布局l上下框架型布局上下框架型布局l封面型布局封面型布局lFlashFlash型布局型布局网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）1.31.3网页设计基础网页设计基础网页设计工具简介网页设计工具简介1.1.网页制作工具网页制作工具l文本编辑器文本编辑器lFrontPageFrontPagelDreamweaverDreamweaverlAdobePagemillAdobePagemill2.2.网页图形图像处理工具网页图形图像处理工具lFireworksFireworkslPhotoshopPhotoshoplCorelDrawCorelDraw3.网页动画制作与特效工具网页动画制作与特效工具lFlashFlashlUleadGifAnimatorUleadGifAnimator网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）1.31.3网页设计基础网页设计基础网页三剑客网页三剑客AdobeAdobe公司的公司的DreamweaverDreamweaver、FireworksFireworks和和FlashFlash系列产品，系列产品，素有网页素有网页“三剑客三剑客”之称。

它们是专门用于网页制作和站点管理之称。

它们是专门用于网页制作和站点管理的软件。

其中的软件。

其中DreamweaverDreamweaver被大家称为被大家称为“织梦者织梦者”，众多专业网，众多专业网站和个人主页都把它列为首选工具。

站和个人主页都把它列为首选工具。

FlashFlash是是“三剑客三剑客”中的中的“闪电闪电”，其以网上动画为特长，它做出的动画效果真是精美致极。

，其以网上动画为特长，它做出的动画效果真是精美致极。

FireworksFireworks是是“三剑客三剑客”中的中的“火焰火焰”，它以处理页面图片为特，它以处理页面图片为特长，并可以轻松制作长，并可以轻松制作GIFGIF动画。

动画。

网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）本章小结本章小结本章作为教程的开篇内容，介绍了网页设计的入门知识，主要包本章作为教程的开篇内容，介绍了网页设计的入门知识，主要包括：

了解括：

了解InternetInternet与网页设计的基本概念的内容，如与网页设计的基本概念的内容，如InternetInternet的概念、的概念、网络提供的服务；了解网站设计的基础内容，如设计网站的类型、网站网络提供的服务；了解网站设计的基础内容，如设计网站的类型、网站的规划及相关技术；掌握网站制作的基础知识，如构成网页的基本要素、的规划及相关技术；掌握网站制作的基础知识，如构成网页的基本要素、网页的布局；以及网页设计与制作的工具软件等环节的知识。

网页的布局；以及网页设计与制作的工具软件等环节的知识。

网页设计与制作应用教程（第网页设计与制作应用教程（第22版）版）思考与练习思考与练习1.1.简述你所了解的网站就功能实现所涉及的类型有哪些？

简述你所了解的网站就功能实现所涉及的类型有哪些？

2.2.网站主页的布局有哪些风格？

网站主页的布局有哪些风格？

3.3.简述简述“网页三剑客网页三剑客”软件中软件中DreamweaverDreamweaver、FireworksFireworks、Flash