模块一网页设计概述 一、因特网、万维网、浏览器的概念 1,因特网 定义，N门ENET的陆译，是一组全球信息魔源的总汇 目的：相互交流信息资潭 组成：基于一些共同的协议，通过许多路由器和公共互联网面成 朝略说：NTERNET是由于许多小的网络（子网）互联而成的逻辑网，每个子网中 连接着若干台计算机（主机）。 2.万推网 由无数个网络站点和网页的集合，由“统一资源定位符”标识，通过点击随接 来获得资源，通过超文本传输协议传送给使用者。 194.10麻省理工学院蒂姆伯钠斯·李发起成立了万推网联盟（简称w3C) 万维网与因特网的区别与联系 区别： :在因特网上，你找到许多联网的计算机，而在万推网上，你找到各种文件，声 音。录像这样一些信息 2:在因特网上，通过计算机之间的电境进行相互连接：而在万排料上，通过超文 本链接进行相互连接。 联系： 1万维网之所以存在，是因为在因特网上的计算机之间需要进行交瓷活动。没有了 因特网，万维网也就不存在了。2万推网使得因特网更为有用，因为人们真正够兴 趣的是信息。并不是真像了解连接到因特网的计算机和电缆。 3.浏笼悬 通过测览器，用户可以在浩瀚的Interne海洋中漫游。授素和浏觅白己多兴趣的 所有信息，是连通用户与I©rmg的煤介：启动计算机中的浏克器，它就会按愿地址 栏中的地址找到料页文件并最示在屏都上。 常见的浏克器有：1E、火复、容歌、网景、遨游、360等。 二、多煤体、超媒体、富媒体概念
模块一 网页设计概述 一、因特网、万维网、浏览器的概念 1. 因特网 定义：INTERNET 的翻译，是一组全球信息资源的总汇 目的：相互交流信息资源 组成：基于一些共同的协议，通过许多路由器和公共互联网而成 粗略说：INTERNET 是由于许多小的网络（子网）互联而成的逻辑网，每个子网中 连接着若干台计算机（主机）。 2. 万维网 由无数个网络站点和网页的集合， 由 “统一资源定位符” 标识， 通过点击链接 来获得资源， 通过超文本传输协议传送给使用者。 1994.10 麻省理工学院蒂姆·伯纳斯·李发起成立了万维网联盟（简称 W3C） 万维网与因特网的区别与联系 区别： 1：在因特网上，你找到许多联网的计算机， 而在万维网上，你找到各种文件，声 音，录像...这样一些信息。 2：在因特网上，通过计算机之间的电缆进行相互连接； 而在万维网上，通过超文 本链接进行相互连接。 联系： 1.万维网之所以存在，是因为在因特网上的计算机之间需要进行交流活动。没有了 因特网，万维网也就不存在了。2.万维网使得因特网更为有用，因为人们真正感兴 趣的是信息，并不是真像了解连接到因特网的计算机和电缆。 3. 浏览器 通过浏览器，用户可以在浩瀚的 Internet 海洋中漫游，搜索和浏览自己感兴趣的 所有信息。是连通用户与 Internet 的媒介;启动计算机中的浏览器，它就会按照地址 栏中的地址找到网页文件并显示在屏幕上。 常见的浏览器有：IE、火狐、谷歌、网景、遨游、360 等。 二、多媒体、超媒体、富媒体概念
L.多爆体 煤体(M®dia)：信息的载体，人与人之何信皂交流的中介。 多翼体(M山1m©da):计算机和视频技术的结合。实际上它是两个媒体：声音 和图像。用现在的术语，音响和电视，但目前人与人之间信息交流的中介由电视， 收音机，裂纸延伸到了互联网、电脑，ad,MP3(4,S)等电子设备，与时出现 了超媒体的概之。 2.都煤体 超规体(yper Media)一超文本十多煤体（是超媒体的子集）。将超文本技术 应用到多媒体中，就产生了超蝶体。它是使用超链接(yprk)构成的全球信息 系统。 超缇体前：媒体作品使用光盘、慧带等存储、发行 超煤体后：娱体作品将更多地使用磁盘存储、网洛发行 3.富爆体 是一种不需要大众安装任何插件就可以播放的整合视顾、音顿、动画图像、双向 信息通信和用户交互功能的新一代网络广告解决方案。它不是一种具体的互联网娱 体形式，而是指具有动面、声音、视频和交互性的信息传播方法。它的魅力在于提 供更丰富和多感官的接触机会以及精美细腻的创意展现，过去当窄带广告由于文件 K数限制使广告创意大师们因巧妇难为无米之炊而颠恼时，富煤体技术的注入无疑 是一剂强心剂，突破带宽限制，实现更大的创意空间，广告信息料到更精准的描速， 产生更精彩的体验，用户与广告之间强烈的交互性以及对视觉强别的震撼及感染力， 针对目标受众达到一矢中的的效果。 富螺体色合下列常见形式之一或者几种的组合： 流媒体、声音、Fla动h、以及Jma、Javasrip、DHML.等程序投计语言。 其可应用于各种网路服务中，如：网站设计、电子邮件、BANNER,现JTION、 弹出式广告、插播式广告等。 我们了解到了超媒体是超文本技术的发展而来的，那和我们这门误究竟有着怎么 样的联系呢？网站、网真究竟是什么呢？究竟他门是如何制作的呢？下面我们米深 入了解一下， 三、网页和网站的概念
1. 多媒体 媒体（Media）：信息的载体，人与人之间信息交流的中介。 多媒体（Multimedia）：计算机和视频技术的结合。实际上它是两个媒体：声音 和图像。用现在的术语：音响和电视，但目前人与人之间信息交流的中介由电视、 收音机、报纸延伸到了互联网、电脑、Ipad、MP3（4、5）等电子设备。与时出现 了超媒体的概念。 2. 超媒体 超媒体（Hyper Media）＝超文本＋多媒体（是超媒体的子集）。 将超文本技术 应用到多媒体中，就产生了超媒体。它是使用超链接 （Hyperlink）构成的全球信息 系统。 超媒体前：媒体作品使用光盘、磁带等存储、发行 超媒体后：媒体作品将更多地使用磁盘存储、网络发行 3. 富媒体 是一种不需要大众安装任何插件就可以播放的整合视频、音频、动画图像、双向 信息通信和用户交互功能的新一代网络广告解决方案。 它不是一种具体的互联网媒 体形式，而是指具有动画、声音、视频和交互性的信息传播方法。它的魅力在于提 供更丰富和多感官的接触机会以及精美细腻的创意展现，过去当窄带广告由于文件 K 数限制使广告创意大师们因巧妇难为无米之炊而烦恼时，富媒体技术的注入无疑 是一剂强心剂，突破带宽限制，实现更大的创意空间，广告信息得到更精准的描述， 产生更精彩的体验，用户与广告之间强烈的交互性以及对视觉强烈的震撼及感染力, 针对目标受众达到一矢中的的效果。 富媒体包含下列常见形式之一或者几种的组合： 流媒体、声音、Flash、以及 Java、Javascript、DHTML 等程序设计语言。 其可应用于各种网络服务中，如：网站设计、电子邮件、BANNER、BUTTON、 弹出式广告、插播式广告等。 我们了解到了超媒体是超文本技术的发展而来的，那和我们这门课究竟有着怎么 样的联系呢？网站、网页究竟是什么呢？究竟他们是如何制作的呢？下面我们来深 入了解一下。 三、网页和网站的概念
简单地说：超螺体技术镜是利用HTL.(超文本传输标记语言)米实现的。那利用HM 偏辑的文将，我门就把它叫做网页。请大家通过点击一下网站料页，感受网页是什么？ ·新浪，wwsina.com ·腾讯：wwwqq.c0m ·料号：ww163.ccm ,联想：www.lenovo.com ·清华：wwwtsinghua.cdu.cn ·川大：wwW.SCu.C加m ·我院：www.scitc.com.en ·政府网：pwW.Y.CW ·i度：wwwhaidu.com ·网址之家：www.haol:23.com ·工商银行：www.icbc.com.cm ·土豆网：w4w.tudou.com ·海室网：www.taob0.eom ·京东商城：www360buy.e0m ·驾校一点通：www.jxedt.com 世纪佳缘：www.jiayuan.com 通过以上网页观察，我们感受到，网页是一些信息的载体，它上面由文字，图像、声音、 视频、动西等各种形式的信息，我们还可以感受到一个网站中有若干个网页。它具有传递信 息、宜传和展示产品、电子商务运营、提供咨询服务、收集信息己达到双向沟通等功能。 网站的分类 按属用网站途，可以分为：门户、行业、娱乐、个人，WP等 按型商业目的，可以分为：营利型和非营利型，网站的营利板式有出卖广告位、收取会 员费，提取经纪费 获得联里收益等。 网站的组成 ·主机：存放网站货源的地方，可白建、购买、租用或托管 ·域名：俗称网址，需向服务商购买。如：sc.c0m.cm 隆源，由网页文件、文字、图像等组成，可被网民测览的信息资源文件 四、网页设计
简单地说：超媒体技术就是利用 HTML（超文本传输标记语言）来实现的。那利用 HTML 编辑的文档，我们就把它叫做网页。请大家通过点击一下网站网页，感受网页是什么？ • 新浪：www.sina.com • 腾讯：www.qq.com • 网易：www.163.com • 联想：www.lenovo.com • 清华：www.tsinghua.edu.cn • 川大：www.scu.edu.cn • 我院：www.scitc.com.cn • 政府网：http://www.gov.cn/ • 百度：www.baidu.com • 网址之家：www.hao123.com • 工商银行：www.icbc.com.cn • 土豆网：www.tudou.com • 淘宝网：www.taobao.com • 京东商城：www.360buy.com • 驾校一点通：www.jxedt.com • 世纪佳缘：www.jiayuan.com 通过以上网页观察，我们感受到，网页是一些信息的载体，它上面由文字、图像、声音、 视频、动画等各种形式的信息，我们还可以感受到一个网站中有若干个网页。它具有传递信 息、宣传和展示产品、电子商务运营、提供咨询服务、收集信息已达到双向沟通等功能。 网站的分类 按照用网站途，可以分为：门户、行业、娱乐、个人、WAP 等 按照商业目的，可以分为：营利型和非营利型，网站的营利模式有出卖广告位、 收取会 员费、 提取经纪费 获得联盟收益等。 网站的组成 • 主机： 存放网站资源的地方，可自建、购买、租用或托管 • 域名： 俗称网址，需向服务商购买。如：scitc.com.cn • 资源： 由网页文件、文字、图像等组成，可被网民浏览的信息资源文件 四、网页设计
前面说了这么多，大家对网站、网页都有所了解了，那这千变万化的网页究竟是如何制作 的呢？ 我们从以下步霉着手： 对文本的处理 对图像的处理 对动西的处理 ·真面制同样版 脚本编写 五、网页设计师的从业之路 我们学好这门课能做什么呢？一答案就是网页设计师 让我门简单了解以下料页设计师的从业生狂吧。一个网真设计师可以进设计公司。从事 网页设计、网络广告设计：也可以进大型企业从事美术制作：还可以互联网企业从事设 计、前璃制作、SE0优化等。初级网页授计师可以章到200元左右薪水，高碳网页设计师 可以拿到10000元以上的群水。网页设计师的晋升之路一般分为执行、设计师、指导、设计 总监， 六、网页设计与制作工具介绍 “工欲善其事必先利其器”。我们要塑学好网页设计及在这条路上很好的走下去，我们要 先了解下需要掌握的一些工具软件。在这里给大家介绍以下几个： 网页三刻客：是一套强大的网页编辑工具，最初是 DREAMWEAVER 由Macromedia公司开发出来的，由Dreamweaver, Fireworks,F门a动三个软件组成，俗称三剑客。三软件 FIREWORKS 能相互无缝合作。 图片最上面，Dreamweaver是专业的可视化网页设 FLASH Professional 计编辑、网站管理，雄护的工具。特点是能够快速创建 各种静态、动态网贞，目前版本为Macromedi Dreamweaver CS6
前面说了这么多，大家对网站、网页都有所了解了，那这千变万化的网页究竟是如何制作 的呢？ 我们从以下步骤着手： • 对文本的处理 • 对图像的处理 • 对动画的处理 • 页面布局排版 • 脚本编写 五、网页设计师的从业之路 我们学好这门课能做什么呢？——答案就是网页设计师 让我们简单了解以下网页设计师的从业生涯吧。一个网页设计师可以进设计公司，从事 网页设计、网络广告设计；也可以进大型企业从事美术制作；还可以互联网企业从事 UI 设 计、前端制作、SEO 优化等。初级网页设计师可以拿到 2000 元左右薪水，高级网页设计师 可以拿到 10000 元以上的薪水。网页设计师的晋升之路一般分为执行、设计师、指导、设计 总监。 六、网页设计与制作工具介绍 “工欲善其事必先利其器”，我们要想学好网页设计及在这条路上很好的走下去，我们要 先了解下需要掌握的一些工具软件。在这里给大家介绍以下几个： 网页三剑客：是一套强大的网页编辑工具, 最初是 由 Macromedia 公司开发出来的, 由 Dreamweaver， Fireworks，Flash 三个软件组成，俗称三剑客。 三软件 能相互无缝合作。 图片最上面，Dreamweaver 是专业的可视化网页设 计编辑、网站管理、维护的工具。 特点是能够快速创建 各种静态、动态网页。 目前版本为 Macromedia Dreamweaver CS6
Frontpage:是微款公司出品的一款网页制作入门级软件.FrontPage 使用方便简单，会用Wd就能做网页，所见即所得是其特点，该载件 结合了设计，程式码、预览三种核式。微状在006年年底前停止是供 FrontPage软件， Ps Adobe Photoshop,简称S”,是一个由Ad6 e Systems开发和 发行的图像处理软件，P件os0p主要处理以像素所构成的数字图像。 使用其众多的编修与绘图工具。可以更有效的进行图片编辑工作。 2003年，Adobe将Adobe P%hotoshop8更名为Adobe Photoshop CS. 因此，最新板本Adabe Photoshop CS6.Phocoshop的应用额域银广泛的，在图像、图形、文 字、视顿、出版等各方面都有涉及。 BWiSH Max L Swh:是一个快速，商单的制作门a动动西。只要点几下鼠标，就 可以让你的网页有令人注目的酯炫动通效果，可以创造形状，文字， 按组以及移动路径。也可以选释内建的超过150种诸如爆粪，藏涡， 3D旋转以及波浪等预设的动面效果。可以用新增动作到物件，来建 立自己的效果或制作一个互动式电影
Frontpage：是微软公司出品的一款网页制作入门级软件。FrontPage 使用方便简单，会用 Word 就能做网页，所见即所得是其特点，该软件 结合了设计、程式码、预览三种模式。微软在 2006 年年底前停止提供 FrontPage 软件。 Adobe Photoshop，简称“PS”，是一个由 Adobe Systems 开发和 发行的图像处理软件。Photoshop 主要处理以像素所构成的数字图像。 使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。 2003 年，Adobe 将 Adobe Photoshop 8 更名为 Adobe Photoshop CS。 因此，最新版本 Adobe Photoshop CS6。Photoshop 的应用领域很广泛的，在图像、图形、文 字、视频、出版等各方面都有涉及。 Swish：是一个快速、简单的制作 flash 动画。只要点几下鼠标，就 可以让你的网页有令人注目的酷炫动画效果。可以创 造形状、文字、 按钮以及移动路径。也可以选择内建的超过 150 种诸如爆炸、漩涡、 3D 旋转以及波浪等预设的动画效果。可以用新增动作到物件，来建 立自己的效果或制作一个互动式电影