网页设计第1章.ppt

《网页设计第1章.ppt》由会员分享，可在线阅读，更多相关《网页设计第1章.ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作应用教程机械工业出版社同名教材机械工业出版社同名教材配套电子课件配套电子课件2009.42009.4第一章第一章 InternetInternet与网页设计与网页设计概述概述1.1 Internet 概述 1.2 网站规划设计概述 1.3 网页设计基础 1.11.1 InternetInternet 概述概述Internet Internet 与与TCP/IPTCP/IP协议IPIP地址和域名地址和域名InternetInternet提供的主要服提供的主要服务WWW WWW 简介介 浏览器服务器模式浏览器服务器模式1.11.1 InternetInternet 概述概述Inter

2、net Internet 与与 TCP/IPTCP/IP协议协议 Internet 即国际计算机互联网，在中国也称“因特网”或“万维网”，是由符合TCP/IP等网络协议的网络组成的互联 网。OSI参考模型参考模型TCP/IP模型模型应用层应用层 TELNET、SMTP、FTP、DNS表示层会话层传输层传输层 TCP、UDP协议网络层网际层 IP协议数据链路层网络接口层物理层表1-1 TCP/IP模型和OSI参考模型对照关系1.11.1 Internet 概述IPIP地址和域名地址和域名 IP 地址由网络地址（netid）和主机地址（hostid）两部分组成。网络地址标识了主机所在的逻辑网络，主

3、机地址则用来标识网络中的一台主机。IP 地址是一个32位的二进制数,为了便于记忆，分成四组，每组八位二进制数。但通常采用十进制表示，即每个字节的二进制数转换成十进制数，每个十进制数之间用圆点“.”隔开，这叫做“点分法十进制”。例如：11001010 11001110 11000000 01000010 表示成：202 .206 .192 .66 1.11.1 InternetInternet 概述概述IP地址的类型 IP 地址中的网络地址是由Internet 网络中心来统一分配的。为了根据不同的网络规模来合理分配IP 地址，IP地址分为A B C 三个基本类。1.1 Internet 概述域名

4、域名 IP地址能唯一标识网上的主机地址，但为了便于记忆，为此提供了一种域名系统DNS，域名和IP 地址之间存在一一对应的关系，域名由四部分组成。格式为：计算机名.组织机构名.二级域名.顶级域名例如：公安大学域名：www .cppsu .edu .cn三级域名三级域名公安大学公安大学二级域名二级域名教育机构教育机构顶级域名顶级域名中国中国主机名主机名 1.11.1 InternetInternet 概述概述InternetInternet提供的主要服务提供的主要服务Internet 为我们提供了信息获取、发布和交流的渠道，其服务功能包括：lWWW WWW 服服务 l电子邮件电子邮件 l文件的下载

5、和上传文件的下载和上传 lFTPFTP（文件（文件传输）服）服务 lUsenet NewsUsenet News（新（新闻组）和）和BBSBBS（电子公告牌）服子公告牌）服务 lTelnetTelnet（远程登程登录）服）服务 l网上游戏网上游戏 l个人主页空间个人主页空间l电子商务电子商务 WWW 简介 l浏览器与网页浏览器与网页 l统一资源定位器（统一资源定位器（URLURL）l超文本超文本 l超文本置标语言超文本置标语言HTMLHTML l HTTPHTTP l主页主页 l 常用搜索引擎常用搜索引擎 浏览器服务器模式浏览器服务器模式1.11.1 InternetInternet 概述概述

6、1.2 网站规划设计概述 网站规划设计是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站设计流程 1.编写网站设计的计划书2.确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点3.确定网站提供的内容4.网站交互设计，如信息反馈、意见调查等5.对网站的内容进行分类6.设计网页必有的内容，如公司标志、联系方法和导航条等7.制作网页的模板8.检查网页的链接9.根据需要修改不合适的地方10.正式发布网站1.2 网站规划设计概述 确定网站的类型 l门户网站门户网站 l搜索

7、引擎搜索引擎 l电子商务网站电子商务网站 l数据中心数据中心 l主题信息网站主题信息网站 l团体网站团体网站 l个人网站个人网站 网站的建设技术 l静态网页技术静态网页技术l动态网页技术动态网页技术 1.3 网页设计基础网页设计规划 1.确定网页的整体风格2.2.设计网页框架 首页个人简介本人视频联系本人文学作品图1-2 个人网页框架草图 网页的基本元素 1.3 网页设计基础l文本文本l图片和动画图片和动画 l声音和视频声音和视频 l超链接超链接 l表格表格 l表单表单 l导航栏导航栏 l其它常见元素其它常见元素 网页布局 网页布局的常用技术如下网页布局的常用技术如下:lCSSCSS（层叠样式

8、表）布局（层叠样式表）布局l表格布局表格布局l框架布局框架布局1.3 网页设计基础网页布局类型网页布局类型 l“国国”字型布局字型布局 l拐角型布局拐角型布局 l标题正文型布局标题正文型布局 l左右框架型布局左右框架型布局 l上下框架型布局上下框架型布局 l封面型布局封面型布局 lFlash Flash 型布局型布局 1.3 网页设计基础网页设计工具简介 1.1.网页制作工具网页制作工具l文本编辑器文本编辑器 lFrontPage FrontPage lDreamweaverDreamweaver lAdobe Adobe PagemillPagemill 2.2.网页图形图像处理工具网页图形

9、图像处理工具 l Fireworks Fireworksl Photoshop Photoshopl CorelDraw CorelDraw3.网页动画制作与特效工具网页动画制作与特效工具lFlash Flash lUleadUlead Gif Animator Gif Animator 1.3 网页设计基础网页三剑客网页三剑客 Adobe Adobe 公司的公司的DreamweaverDreamweaver、Fireworks Fireworks 和和Flash Flash 系列产品，系列产品，素有网页素有网页“三剑客三剑客”之称。它们是专门用于网页制作和站点管理之称。它们是专门用于网页制作

10、和站点管理的软件。其中的软件。其中DreamweaverDreamweaver 被大家称为被大家称为“织梦者织梦者”，众多专业网，众多专业网站和个人主页都把它列为首选工具。站和个人主页都把它列为首选工具。Flash Flash 是是“三剑客三剑客”中的中的“闪电闪电”，其以网上动画为特长，它做出的动画效果真是精美致极。，其以网上动画为特长，它做出的动画效果真是精美致极。Fireworks Fireworks 是是“三剑客三剑客”中的中的“火焰火焰”，它以处理页面图片为特，它以处理页面图片为特长，并可以轻松制作长，并可以轻松制作GIF GIF 动画。动画。本章小结 本章作为教程的开篇内容，介绍了

11、网页设计的入门知识，主要包本章作为教程的开篇内容，介绍了网页设计的入门知识，主要包括：了解括：了解Internet Internet 与网页设计的基本概念的内容，如与网页设计的基本概念的内容，如Internet Internet 的概念、的概念、网络提供的服务；了解网站设计的基础内容，如设计网站的类型、网站网络提供的服务；了解网站设计的基础内容，如设计网站的类型、网站的规划及相关技术；掌握网站制作的基础知识，如构成网页的基本要素、的规划及相关技术；掌握网站制作的基础知识，如构成网页的基本要素、网页的布局；以及网页设计与制作的工具软件等环节的知识。网页的布局；以及网页设计与制作的工具软件等环节的知识。思考与练习 1.1.简述你所了解的网站就功能实现所涉及的类型有哪些？简述你所了解的网站就功能实现所涉及的类型有哪些？2.2.网站主页的布局有哪些风格？网站主页的布局有哪些风格？3.3.简述简述“网页三剑客网页三剑客”软件中软件中DreamweaverDreamweaver、FireworksFireworks、Flash Flash 软软件的功能特点。件的功能特点。