第1章 网页设计与制作基础要点
合集下载
网页设计与制作 第一章 网页设计制作基础
1.1.3网页的相关术语
3、统一资源定位器 统一资源定位器简称URL，是用来指出某项信息的位置及存取方式，以取得 各种服务信息的一种标准方法。简单地说，URL就是网络服务器主机的地址，也 称为网址。 如：http：///view/index.htm就是一个网址，其中包括如下几 个部分： 传输协议：也就是上面举例中的http部分，表示传输方式遵循超文本传送协 议要求。 主机名：标识网络上某台计算机的专门名字。在Internet上，主机名是一个 字来表示，它们的作用是相同的。 文件路径及文件名：如上例的“view“表示网页文件所在的目 录；”“index.htm”表示网页文件名。在主机名与路径之间，路径与文件之间， 一般用“/”符号隔开。
1.1.4 网页制作流程
3、实现阶段 使用网页制作工具完成页面的制作。目前，网页的制作工具很多，如： Frontpage，Dreamweaver，.Net等。利用这些工具，可以根据画出的逻辑结构图 制作并实现网页效果。 4、测试阶段 使用浏览器测试网页的效果和正确性。网页制作完毕后，需要在浏览器中进 行网页测试，看看制作的网页效果如何，是否能在浏览器中正确显示。如果有不 合理的地方，要及时对网页进行修改，以保证网页的质量。 5、维护阶段 网页经过测试确定没有问题后，就可以把网页上传并发布到Internet上。这样， 全世界的网络浏览者都可以随时浏览此网页。为了吸引更多的浏览者，网页要经 常变化，并对制作好的网页进行定期的维护、更新、修改。
1.1.3网页的相关术语
7、发布 将制作好的网页传输到Internet服务器的过程称为发布，也称为上传。做好 网页后，如果没有将网站的内容上传到Internet服务器上，别人是无法访问到这 些资源的，那么这些资源就仅保存在本地硬盘而不供别人浏览。 8、超文本标记语言 超文本标记语言缩写为HTML，是用于描述网页文档的一种标记语言。HTML 是一种规范，一种标准，它通过标记符号来标识要显示的网页中的各个部分。浏 览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。但需要注 意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可 能会有不同的显示效果。 以IE浏览器为例，显示网页的html代码。在浏览器窗口选择【查看】|【源文 件】菜单命令，系统将自动启动记事本或写字板显示该网页的HTML源文件，如 图所示。
网页设计与制作课件第1章
上一页 返回
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
第1章网页设计与制作基础.
• Microsoft提供的NetMeeting是个功能齐全的网上
实时会议程序，它不仅包含标准的会议功能，还 提供了让用户通过音频、视频进行交流的功能， 并且交流双方可以共享应用程序和共享白板，在 共享白板上，可以双向绘画交流，这几乎与我们 在日常工作中在同一个画板上讨论问题一样。会 议期间，无须在每台计算机上安装软件，即可共 同创建文档、电子表格或其它文件。
2018/9/27
8
2. 电子邮件服务（E-mail）
电子邮件(E-mail)服务是Internet所有 信息服务中用户最多和接触面最广泛的一 类服务。 电子邮件不仅可以传送文字、 订单、图形，还可以传送动画或程序等等。
2018/9/27
9
3. 远程登录服务（Telnet）
远程登录是指允许一个地点的用户与 另一个地点的计算机上运行的应用程序进 行交互对话。远程登录使用支持Telnet协议 的Telnet软件。Telnet协议是TCP/IP通信协 议中的终端机协议。Telnet使你能够从与 Internet连接的一台主机进入Internet上的 任何计算机系统，
2018/9/27 5
1.1.2 互联网的应用技术
• 现在的网络资源及各种业务、应用日趋丰富。电
子政务、远程教育、远程医疗、移动短信、在线 数字内容等网上各类业务日新月异，电子商务交 易额快速增长，信息交流更加便捷高效。此外， 各种技术、业务和网络之间的相互渗透与融合， 推动了产业价值链的不断延伸和逐步完善，为信 息产业发展带来了新的机遇。互联网在促进经济 发展、推动社会进步和提高人民生活质量等方面， 正在发挥着越来越重要的作用。
2018/9/27
7
• WWW并不是实际存在于世界的哪一个地方，
事实上，WWW的使用者每天都赋予它新的 含义。Internet社会的公民们（包括机构和 个人），把他们需要公之于众的各类信息 以主页（Homepage）的形式嵌入WWW， 主页中除了文本外还包括图形、声音和其 它媒体形式，网站题材有很多，比如娱乐 休闲、体育、综合门户、就业、音乐、社 区等无奇不有包罗万象。
实时会议程序，它不仅包含标准的会议功能，还 提供了让用户通过音频、视频进行交流的功能， 并且交流双方可以共享应用程序和共享白板，在 共享白板上，可以双向绘画交流，这几乎与我们 在日常工作中在同一个画板上讨论问题一样。会 议期间，无须在每台计算机上安装软件，即可共 同创建文档、电子表格或其它文件。
2018/9/27
8
2. 电子邮件服务（E-mail）
电子邮件(E-mail)服务是Internet所有 信息服务中用户最多和接触面最广泛的一 类服务。 电子邮件不仅可以传送文字、 订单、图形，还可以传送动画或程序等等。
2018/9/27
9
3. 远程登录服务（Telnet）
远程登录是指允许一个地点的用户与 另一个地点的计算机上运行的应用程序进 行交互对话。远程登录使用支持Telnet协议 的Telnet软件。Telnet协议是TCP/IP通信协 议中的终端机协议。Telnet使你能够从与 Internet连接的一台主机进入Internet上的 任何计算机系统，
2018/9/27 5
1.1.2 互联网的应用技术
• 现在的网络资源及各种业务、应用日趋丰富。电
子政务、远程教育、远程医疗、移动短信、在线 数字内容等网上各类业务日新月异，电子商务交 易额快速增长，信息交流更加便捷高效。此外， 各种技术、业务和网络之间的相互渗透与融合， 推动了产业价值链的不断延伸和逐步完善，为信 息产业发展带来了新的机遇。互联网在促进经济 发展、推动社会进步和提高人民生活质量等方面， 正在发挥着越来越重要的作用。
2018/9/27
7
• WWW并不是实际存在于世界的哪一个地方，
事实上，WWW的使用者每天都赋予它新的 含义。Internet社会的公民们（包括机构和 个人），把他们需要公之于众的各类信息 以主页（Homepage）的形式嵌入WWW， 主页中除了文本外还包括图形、声音和其 它媒体形式，网站题材有很多，比如娱乐 休闲、体育、综合门户、就业、音乐、社 区等无奇不有包罗万象。
网页设计与制作-网页基础
国字型
拐角型
主要布局类型
标题型
FLASH型
04
网页的制作工具
Dreamweaver
使用Dreamweaver是创建专业 网站的最佳途径，同时也是构建 强大Internet应用程序的最简便 的途径。支持ASP、PHP、JSP 等各种网站开发语言。
Flash
Flash是由Adobe公司开发的一 款二维矢量动画软件，其动画制 作方便，交互功能强大，占用空 间小，所以非常适合网络传播。
02
网页的设计规划
设计规划步骤
明确目标
02 定位
调研用户 挖掘需求
04 方案
01 目标
分析市场 找准定位
03 调研
总体规划
明确目标
客户的目标是什么？ 客户制作网页/网站的长期、短期目标是什么？ 客户服务对象是谁？ 客户赢利模式或商业模式是什么？ 客户的主营产品和服务是什么？
Fireworks
Fireworks不仅是一个图像处理 工具，它还是一个全功能的网页 设计工具。利用Fireworks，不 仅可生成静态的图像，还可以生 成包含HTML和JavaScript代码 的动态图像，甚至可以编辑整个 网页。
谢谢！
分析市场
产品与服务分析 竞争对手分析 区域分析
用户调研
用户定位 用户使用习惯分析 用户需求分析
总体规划
主要目标 网购细分市场
主要用户 小资网购者
用户需求 品质与性价比
03
网页的风格
网页的风格
色彩：网站的主色、辅色、文字颜色、图片颜色等。 排版：表格、框架的应用，文本的缩排、段落等。 窗口：窗口的效果，如全屏幕显示，特效窗口等。 程序：网页互动的程序，如ASP、PHP、XML、CGI等。 特效：让网页看起来生动活泼的各种应用，如Flash、JavaScript、
拐角型
主要布局类型
标题型
FLASH型
04
网页的制作工具
Dreamweaver
使用Dreamweaver是创建专业 网站的最佳途径，同时也是构建 强大Internet应用程序的最简便 的途径。支持ASP、PHP、JSP 等各种网站开发语言。
Flash
Flash是由Adobe公司开发的一 款二维矢量动画软件，其动画制 作方便，交互功能强大，占用空 间小，所以非常适合网络传播。
02
网页的设计规划
设计规划步骤
明确目标
02 定位
调研用户 挖掘需求
04 方案
01 目标
分析市场 找准定位
03 调研
总体规划
明确目标
客户的目标是什么？ 客户制作网页/网站的长期、短期目标是什么？ 客户服务对象是谁？ 客户赢利模式或商业模式是什么？ 客户的主营产品和服务是什么？
Fireworks
Fireworks不仅是一个图像处理 工具，它还是一个全功能的网页 设计工具。利用Fireworks，不 仅可生成静态的图像，还可以生 成包含HTML和JavaScript代码 的动态图像，甚至可以编辑整个 网页。
谢谢！
分析市场
产品与服务分析 竞争对手分析 区域分析
用户调研
用户定位 用户使用习惯分析 用户需求分析
总体规划
主要目标 网购细分市场
主要用户 小资网购者
用户需求 品质与性价比
03
网页的风格
网页的风格
色彩：网站的主色、辅色、文字颜色、图片颜色等。 排版：表格、框架的应用，文本的缩排、段落等。 窗口：窗口的效果，如全屏幕显示，特效窗口等。 程序：网页互动的程序，如ASP、PHP、XML、CGI等。 特效：让网页看起来生动活泼的各种应用，如Flash、JavaScript、
网页设计与制作——Dreamweaver CS5标准教程第1章 网页设计基础
色彩，网页设计元素和页面布局是网页创意设计的 三个重要组成部分。
1.2.1色彩
1.2网页设计知识
1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩
的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越
大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左
上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网
站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完
Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup
Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则， 其作用是设置HTML和XHTML语言编写的结构化文档外 观。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表 现（Presentation）和行为（Behavior），相 应的技术标准由3个部分组成：结构化标准语 言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言 结构化语言HTML（Hyper Text Markup
名，表达为如下形式： 协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘
1.2.1色彩
1.2网页设计知识
1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩
的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越
大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左
上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网
站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完
Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup
Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则， 其作用是设置HTML和XHTML语言编写的结构化文档外 观。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表 现（Presentation）和行为（Behavior），相 应的技术标准由3个部分组成：结构化标准语 言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言 结构化语言HTML（Hyper Text Markup
名，表达为如下形式： 协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘
第1章网页设计与制作基础
（5）文本。文本是网页发布信息的主要形式，用它制作 出的网页占用的空间比较小，因此当用户浏览时可以很快地展 现在用户面前。在浏览器中，默认的中文字体为宋体，英文字 体为Times New Roman。也就是说，如果没有设置任何字体， 网页将以这两种字体显示。
网络规划及艺术设计
（6）图片。图片是网页十分重要的组成部分，有了图片， 网页才能够吸引更多的访问者，才能够更好地表现主题。
（3）的英文全名为World Wide Web，又称3W或Web，中文 译名为万维网。提供的服务之一，它由遍布在Internet上的称 为Web服务器的计算机组成。
（4）浏览器。浏览器是一种浏览网页的软件，通过它可以 方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电 子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和Netscape，其版本越高，所支持的网页效果就越多， 所以要经常升级。
（6）域名。由于IP地址的数字形式难以记忆和使用， 因此人们引入了域名用以代替复杂的IP地址。域名是用英文 来表示IP地址的。域名是由固定的域名管理组织在全球进行 统一管理的，要获取域名需到各地的网络管理机构进行申请。 申请域名后，无论在哪里，只要在与Internet相连的浏览器 的地址栏中输入域名即可登录相应的网站。
（7）动画。动画是由一组连续播放的静态画面组成的，所 谓连续播放既指时间上的连续，也指画面内容上的连续，即播 放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香 蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图 片动画，一类是Flash动画。
网络规划及艺术设计
网络规划及艺术设计
（1）单击“开始”按钮，选择“所有程序”→“附 件”→“记事本”命令，启动记事本程序。
网络规划及艺术设计
（6）图片。图片是网页十分重要的组成部分，有了图片， 网页才能够吸引更多的访问者，才能够更好地表现主题。
（3）的英文全名为World Wide Web，又称3W或Web，中文 译名为万维网。提供的服务之一，它由遍布在Internet上的称 为Web服务器的计算机组成。
（4）浏览器。浏览器是一种浏览网页的软件，通过它可以 方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电 子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和Netscape，其版本越高，所支持的网页效果就越多， 所以要经常升级。
（6）域名。由于IP地址的数字形式难以记忆和使用， 因此人们引入了域名用以代替复杂的IP地址。域名是用英文 来表示IP地址的。域名是由固定的域名管理组织在全球进行 统一管理的，要获取域名需到各地的网络管理机构进行申请。 申请域名后，无论在哪里，只要在与Internet相连的浏览器 的地址栏中输入域名即可登录相应的网站。
（7）动画。动画是由一组连续播放的静态画面组成的，所 谓连续播放既指时间上的连续，也指画面内容上的连续，即播 放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香 蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图 片动画，一类是Flash动画。
网络规划及艺术设计
网络规划及艺术设计
（1）单击“开始”按钮，选择“所有程序”→“附 件”→“记事本”命令，启动记事本程序。
网页设计与制作-01要点
第20页
远程登录服务(Telnet)
远程登录服务（Telnet）远程登录就是用户 通过计算机网络进入和使用远程的计算机 系统。
第21页
电子公告板服务（ BBS）
（BBS）即公告板系统（Bullet in Board System）是一个信息和文件的陈列室,常常 集中于一个特定主题，像发告示一样，将 要公布的信息粘帖到公告栏上，其他人可 以随时看到信息。
第3页
教学过程
Internet与WWW的发展历程 Web的基本概念 Web技术基础及高级技术 Web应用开发基础
第4页
1.1 Internet与WWW
第5页
什么是Internet
Internet是一个具体的网络实体,泛指全球 计算机网络的集合，是一个全球性的信息 通信网络，我们称之为因特网。
From Dr. Vinton Cerf, Co-Creator of TCP/IP
第24页
Web服务器
Web服务器是在网络中为实现信息发布、 资料查询、数据处理等诸多应用搭建基本 平台的服务器。
1945
1995
第10页
1.1 Internet与WWW
Internet的技术基础 TCP/IP
包括近100个协议,其中TCP是传送控制协 议;IP(Internet Protocol)是网际网协议。
域名系统(DNS)
实现域名与其所对应的IP地址进行对应和转 换
第11页
协议
是关于信息格式及信息交换规则的描述。
第6页
一、Internet的发展史
ARPANET
1969年,美国国防部 (DoD, Department of Defense)
实验性质的包交换 (packet-switched) 网络系统 1980年,分成APARNET及Milnet: 军事用途 五大特点: 1、支持资源共享 2、采用分布式控制技术 3、采用分组交换技术 4、使用通信控制交换技术 5、采用分层的网络通信协议
远程登录服务(Telnet)
远程登录服务（Telnet）远程登录就是用户 通过计算机网络进入和使用远程的计算机 系统。
第21页
电子公告板服务（ BBS）
（BBS）即公告板系统（Bullet in Board System）是一个信息和文件的陈列室,常常 集中于一个特定主题，像发告示一样，将 要公布的信息粘帖到公告栏上，其他人可 以随时看到信息。
第3页
教学过程
Internet与WWW的发展历程 Web的基本概念 Web技术基础及高级技术 Web应用开发基础
第4页
1.1 Internet与WWW
第5页
什么是Internet
Internet是一个具体的网络实体,泛指全球 计算机网络的集合，是一个全球性的信息 通信网络，我们称之为因特网。
From Dr. Vinton Cerf, Co-Creator of TCP/IP
第24页
Web服务器
Web服务器是在网络中为实现信息发布、 资料查询、数据处理等诸多应用搭建基本 平台的服务器。
1945
1995
第10页
1.1 Internet与WWW
Internet的技术基础 TCP/IP
包括近100个协议,其中TCP是传送控制协 议;IP(Internet Protocol)是网际网协议。
域名系统(DNS)
实现域名与其所对应的IP地址进行对应和转 换
第11页
协议
是关于信息格式及信息交换规则的描述。
第6页
一、Internet的发展史
ARPANET
1969年,美国国防部 (DoD, Department of Defense)
实验性质的包交换 (packet-switched) 网络系统 1980年,分成APARNET及Milnet: 军事用途 五大特点: 1、支持资源共享 2、采用分布式控制技术 3、采用分组交换技术 4、使用通信控制交换技术 5、采用分层的网络通信协议
网页设计与制作基础
第一章网页设计与制作基础【教学内容】介绍网页制作基本知识，包括网络技术的基础、常用软件简介和网站制作的基本流程；Internet的产生、发展与现状，以及Internet在我国的发展情况；TCP/IP分层模型、IP 协议的基本内容；IP地址、域名，以及域名体系的基本内容；网络互联的基本概念，以及接入Internet的基本方法；Intranet的基本概念，了解Internet的构成及功能。
【教学目的】使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。
【教学重点】网页设计中的若干术语。
【教学难点】理解网页设计中的若干术语。
【教学方式】讲授式、讨论式、案例分析式。
【教学参考】1、《网页设计精彩实例》彭万波等编著电子工业出版社2、《网页设计技术》刘涛编著中国铁道出版社3、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。
5、《精品动态网页制作》杨内江南编著清华大学出版社6、《Internet 网页工场》Wittime工作室重庆出版社。
7、《WEB网站设计》Joel Sklar著高等教育出版社。
8、《HTML网页制作教程》材义语编著铁道出版社。
【新课内容】§1.1 Internet概述1.1.1Internet 的起源Internet是起源于美国国防部高级研究计划局ARPA(Advanced Research ProjectAgency)于1968年主持研制的用于支持军事研究的计算机实验网Arpanet。
80年代中期人们将这些互联在一起的网络看作为一个互联网络，并以Internet来称呼它。
我国曾被译为“国际互联网”、“国际网”等。
1997年7月，全国科学技术名词审定委员会推荐使用中文译名“因特网”。
全球信息网即WWW(World Wide Web)，又被人们称为3W、万维网等，是Intemet上最受欢迎、最为流行的信息检索工具。
Internet网中的客户使用浏览器只要简单地点击鼠标，即可访问分布在全世界范围内Web服务器上的文本文件，以及与之相配套的图像、声音和动画等，进行信息浏览或信息发布。
精品课件-网页设计与制作实践-第1章网页制作基础
实验2 制作第一个网页
1 考核知识点 使用Dreamweaver创建网页。 2 练习目标 ●能使用Dreamweaver创建一个包含HTML结构和CSS样 式的简单网页。
实验2 制作第一个网页 实验内容及要求 请做出以下效 果：
要求： （1）要求在代码视图中完成。
每一种知识都需要努力， 都需要付出，感谢支持！
知识就是力量，感谢支持！
----谢谢大家！！
第1章网页制作基础
实验1 Dreamweaver初始化设置
1 考核知识点 工作区布局设置、面板开关、代码提示设置、 浏览器设置。 2 练习目标 ● 掌握Dreamweaver的基本设置操作。
实验1 Dreamweaver初始化设置
3 实验内容及要求 （1）把工作区布局设置为“经典”布 局。 （2）打开“属性”、“文件”面板。 （3）设置有代码提示。 （4）设置主浏览
网页设计与制作(第二版)第一节 网页设计基础
3、网页风格
网站的风格可以从以下几个方向来探讨 色彩的搭配：网页的底色、文字字型、图片的色系、颜色等。 版面的排列：表格、框架的应用，文字缩排、段落等。 导航的设计：导航窗口效果、导航效时等。 程序的选择：网页制作程序，如ASP，PHP，XML，CGI等。 特效的应用：让网页看起来生动活泼的各种特殊应用，如 Flash、Java script，Java applets，DHTML等。 架构的层次：目录的规划、层次的架构等。 内容的选取：网站主题、整体实用性、文件关联性、内容切 合度等。 发展与规划：对于网站的未来规划，网站整体内容发展方向 等。
２、 网站与网页
通常我们看到的网页，都是以.html为后缀的文件，俗 称HTML文件。不同的后缀，分别代表不同类型的网页 文件，例如以.cgi，.asp，.php，.jsp为后缀名。 网站是指存放在网络服务器上的完整信息的集合体， 它包含一个或多个网页，这些页以超链接方式连接在 一起，形成一个整体，描述一组完整的信息。 网站主要由主机、域名、网页等组成。建设网站，就 是在自己的计算机上安装Web服务器，设计制作自己的 网页并且发布出去。
第1节 网页设计基础
1、网页基本概念
1．网页：采用了超文本传输协议的文件 ，每个网页文 件都有一个地址（统一资源定位器URL） 2．URL：通过其在网络上来识别存与存取信息 3．超文本传输协议（HTTP）：HTTP是一个用于在客户端 和服务器间请求和应答的协议。 4．超文本（Hypertext）：超文本(Hypertext)是一类电 子储藏文本，其允许“点进”通过编码链接(超链接) 接入到其它的文本。 5．浏览器 ：用于浏览访问网页的工具软件。 6．Web服务器 ：用于存放网页文件的服务器。
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `float` 属性，可以让元素脱离正常的文档流，向左或向右移动，直到遇到父元素的边界或另一个浮动元素。
使用浮动布局可以实现多种布局效果，例如多列布局、文字环绕图像等。
定位布局通过设置元素的 `position` 属性，可以精确控制元素在页面上的位置。常见的定位方式有静态定位（`static`）、相对定位（`relative`）、绝对定位（`absolute`）和固定定位（`fixed`）。
在线网页编辑器
网页制作工具简介
延时符
02
HTML基础
HTML文档结构
<html>元素是HTML文档的根元素，包含了整个文档的内容。
<!DOCTYPE html>声明文档类型为HTML5。
HTML文档由一系列的元素构成，包括`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等。
03
响应式图片可以有效地减少带宽和加载时间，提高网页的性能和用户体验。
01
响应式图片是指在不同尺寸的屏幕上显示不同分辨率的图片。
02
通过使用HTML的srcset属性和CSS的picture元素，可以指定不同尺寸屏幕下的图片源，从而实现响应式图片。
响应式图片
THANKS
属性选择器
01
03
02
04
CSS选择器
用于设置元素的前景色和背景色，如`color`和`background-color`。
颜色与背景
用于设置字体类型、大小、行高等，如`font-family`、`font-size`和`line-height`。
《网页设计与制作》
1.3 网站建设流程
设计 开发
规划
要建设一个优秀的网站，通常应
该遵循以下工作流程：确定站点的核
心－网站的规划－网站外观的设计－
网页具体制作－网站性能测试－网站
发布－网站更新与维护。
发布
维护
网站规划 一个网站的成功与否与建站前的网站规划有着极为重要
的关系。在建立网站前应明确建设网站的目的，确定网站 的功能，确定网站规模、投入费用，进行必要的市场分析 等。只有详细的规划，才能防止在网站建设中出现的很多 问题，使网站建设能顺利进行。
域名 Com Edu Gov Int Mil Net Org
域名机构 商业机构 教育机构 政府部门 国际性机构
军队 网络机构 非盈利机构
附注：全称 Commercial organization
Educational institution government
International organization military
常用的协议名如下： HTTP：超文本传输协议，用于转换网页。 FTP：文件传输协议，主要用于传输文件，许多提供软件下载
的网站使用“FTP〞作为下载的网址。 MAILTO：传送E-mail协议，主要用于传输电子邮件。 例如：
网页与网站 构建WWW的根本单位是网页。网页中包含所谓的“超链
接〞，通过已经定义好的关键字和图形，只要用鼠标轻轻一 点，就可以自动跳转到相应的其它文件，获得相应的信息， 从而实现网页之间的链接，从而构成了WWW的纵横交织 的网状结构。
通过超链接连接起来的一系列逻辑上可以视为一个整体的 页面，那么叫做网站。
网站的概念是相对的，大能分布于多台效劳器上；小的如一些个人网 站，可能只有几个页面，仅在某台WEB效劳器的占据很小 的空间。
网页设计与制作 重点知识
网页设计与制作第一章internet 和WWW1.internet功能和应用①信息的获取与发布②电子邮件③网上交际④电子商务：在internet上利用电子货币进行结算的一种商业行为。
⑤多媒体服务的娱乐功能⑥网上事物处理⑦远程使用计算机：又称远程登录服务，一台计算机连接到另一台计算机上，并可以运行远程计算机上的各种程序。
⑧文件传输：FTP。
⑨电子公告牌⑩网络新闻组⑾万维网：WWW2.WWW的起源：world wide web 的缩写。
WWW是一种软件，是Internet上那些支持WWW 协议和超文本传输协议的客户机与服务器的集合。
3.Web的特点和结构：特点是他使用的超文本连接技术。
WWW的系统结构采用的是客户端/服务器结构模式。
浏览器是用来访问WWW服务的客户端，WWW服务器是提供WWW服务的服务端。
WWW服务器是核心部分。
在WWW服务器上实现WWW服务功能的是WWW 服务器软件。
WWW服务器上有很多静态的HTML文件，这些HTML文件都是用超文本标记语言编写的，WWW服务软件可以根据客户端的浏览器所提交的请求。
通过这些接口，客户端可以与服务器进行动态交互，可以通过专门的语言SQL来访问一些数据库资料。
4.HTTP是一种最常见的协议，他用于从WWW服务器传输超文本到本地浏览器的传送协议。
工作过程包括4个步骤：①建立连接②发送请求③给出应答④关闭连接5.文件传输协议是计算机网络上主机之间传送文件的一种服务协议。
FTP采用了客户端/服务器模式。
服务器有两种，必须先登录，在远程主机上获得相应的权限，既取得用户名和密码后，方可上传或下载文件。
匿名FTP服务器，用户无需密码就可连接到远程主机享受相关服务，作为一种安全措施，大多数匿名FTP主机都允许用户从其下载文件，而不允许用户向其上传文件。
6.FTP的地址格式：ftp：//用户名：密码@FTP服务器IP或域名：FTP命令端口/路径/文件名。
（FTP服务器IP或域名为必要项，其他不必须）7.超链接是www上的一种链接技巧，它是内嵌在文本或图像等多媒体元素中的。
《网页设计与制作教程》(教程全集)第1章
1.3 网站的设计
1.3.5 其他页面的设计
其他的页面设计步骤： 确定页面的功能模块→设计页面的布局→处理技术上 的细节。
需要注意以下几点： 1、和主页保持相同的风格。 2、要有返回首页的链接。 3、在页面上显示当前的位置。 4、目录结构不要超过四层。
1.3 网站的设计
1.3.6 企业网站的设计
网站主要由主机、域名和网页等组成。
1.2 网站的规划
1. 网站的题材
目前网站的题材主要有新闻、体育、经济、科技、计 算机技术、软件沙龙、房产、通信、短信、网上聊天、即时 信息、网上社区、校园天地，交通、证券、娱乐网站、旅行、 参考、资讯、网上求职、家庭教育、健康知识、生活时尚、 游戏、广告以及一些体现个人特色的网站等内容。
1.2 网站的规划
3. 给网站取名
网站的名称还要合情合理，最好能让人感觉到有亲切 感，当然，还一定要合法，坚决不能带有反动的、色情的、 迷信的、危害社会安全的名词语句。
1.2 网站的规划
4. 决定网站性质
在创建网站时，决定站点的性质是必须的。设计者应 清楚站点的性质，确定它将会提供什么样的服务，网页中应 该显示什么内容等，以便在站点设计过程中能突出网站主题。
1.3 网站的设计
1.3.1 网站的结构设计
网站的结构设计其实也就 是合理地设计网站的栏目和板 块。那么，需要设计哪些栏目 和板块呢?如何合理地去设计呢? 这是网站设计的目标。
1.3 网站的设计
1.3.2 网站的目录结构设计
在组织网站目录结构时，一般应该遵循如下一些规则：
1、用文件夹分类保存文档。 2、使用合理的文件名称。 3、将本地站点和远程站点设置为相同的目录结构。
成功的企业网站可以将公司信息、产品信息等最完整、 最形象和最具有良好沟通性等方面向世界展示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网站建设与网页设计
任课教师：颜君彪 课程类别：院选课
2011年6月
课程基本要求
了解网站建设的基本内容 掌握网站建设的步骤 掌握网页设计工具的使用 掌握HTML基本标记的使用方法 了解CSS和表单的用法
第1章 网页设计与制作基础
1.1 Internet基础知识
什么是Internet Internet的基本概念 Internet是一个具体的网络实体， 泛指全球计算机网络的集合，是 一个全球性的信息通信网络，我 们称之为因特网。
பைடு நூலகம்
1.2.5 浏览器
网络浏览器是在Internet网络上使用的特殊 软件，在上网登录成功的前提下，要用” 网络浏览器”软件才能进行Internet网络 的各种操作。
1.2.6 Web服务器
Web服务器是在网络中为实现信息发布、资 料查询、数据处理等诸多应用搭建基本平 台的服务器。
1. 3 网站与网页
HTTP协议（英文全名为Hypertext Transfer Protocol，中文称“超文本传输协议”） 它是用来在Internet上传送超文本的传送 协议。
1.2.4 超文本
超文本（Hypertext）是把一些信息根据需 要连接起来的信息管理技术，人们可以通 过一个文本的链指针打开另一个相关的文 本。
1.1.1 Internet所提供的服务
（1）电子邮件服务（E-mail）“电子邮 件”专指在Internet中的电子邮件E-mail就是 Electronic Mail的英文缩写，是计算机用户 交换信息的一种途径。邮件地址由用户名 和主机名组成，中间由@连接，如 bjlgao@，bjlgo是用户名，是 主机名。 （ 2）登录服务（Telnet）远程登录就是 用户通过计算机网络进入和使用远程的计 算机系统。
为用户通过Internet与其他人进行交谈，并举行各 种实时通信会议提供了极大的方便。 （7）WWW （World Wide Web）WWW也叫万 维网，是Internet网络的多媒体信息查询工具。由 三部分组成，即：客户机、服务器和HTTP协议。 （8）游戏、聊天服务
1.1.2 协议（Protocol）
网站是指建立在互联网上的Web站点， 存放在网络服务器上的完整信息的集合体， 它包含一个或多个网页，这些页以超链接 方式连接在一起，形成一个整体，描述一 组完整的信息。它面向公众提供互联网内 容服务。
1.3.1 网页与网站
网页也叫 Web页，网页就是在显示 器屏幕上的内容。网页实际是一个文件， 它存放在世界某个角落的某一个计算机 中。网站与网页的关系类似于一本书与 一页书
（3）文件传输服务（FTP）文件传输
服务（File Transfer Protocol）指是的 把文件从一台计算机传送到另一台计 算机。 （4）Gopher服务Gopher是一种基于 菜单的信息检索工具，用户只要在成 树形结构排列的多层菜单中逐级深入， 就可以检索到所需要的信息，而不必 考虑它们的存储方式和位置。
1.2.2 URL
URL（英文全名是Uniform Resource Locator，中文称是“统一资源定位 器”），Internet上的所有资源都可用 URL来表示。URL好比Internet上的门牌 号码，它可以帮助用户在Internet的信息 海洋中定位到所需要的资料。
1.2.3 HTTP协议
是关于信息格式及信
息交换规则的描述。
1.1.3TCP/IP协议簇
TCP/IP是Internet上通用的标准协议簇。 TCP（Transmission Control Protocol）传 输控制协议，提供面向连接的服务IP （Internet Protocol）互联网协议，将数据 从一个地址传送到另一个地址，也就是说 IP的工作就是传送和接收数据包。
1.1.4 IP 地址
P地址是一个32位的二进制数组 成的号码，该号码分为四段，每段8位， 每段取值范围在0～255之间。
1.1.5 域名、域名系统
Internet域名是Internet网络上一个服务器或一个 网络系统的名字，在全世界没有重复的域名。
DNS用分层命名的方法： 即计算机域名．组织结构名．网络名．最高层域名。 最高层域名又称顶级域名。顶级域名代 表建立网络的部门、机构或网络所隶属的国 家和地区。
1.4 网页制作常用工具
1．利用Photoshop CS3设计网页图像
2. 利用Fireworks CS3设计网页图像
1.3.2 静态网页与动态网页 网页按其表现形式来划分可分为动态页 和静态页。 静态网页只能浏览，不能实现客户端和 服务器端的交流互动，在静态网页中，也 可以出现各种动态的效果，如GIF格式的动 画、FLASH影片、滚动字幕等，这些“动态 效果”只是视觉上的，并不能实现客户端 和服务器端的交互。
动态网页的页面内容随用户的输入而 变化，能与客户端交流互动，它们会随不 同客户、不同时间，返回不同的网页，动 态网页使用ASP、PHP、JSP、等技 术生成。 静态网页和动态网页各有特点，网站 采用动态网页还是静态网页主要取决于网 站的功能需求和网站内容的多少。
（5）电子公告板服务（Internet BBS
电子公告扳（BBS）即公告板系统 （Bullet in Board System）是一个信息 和文件的陈列室，常常集中于一个特定 主题，像发告示一样，将要公布的信息 粘帖到公告栏上，其他人可以随时看到 信息。
（6）网络会议（Net Meeting）服务Net Meeting
分类：大体可分为两类。
一类是组织性顶级域名，由三个字母 缩写代表机构，如 .com代表商 业，.edu代表教育，.net代表网络等。 另一类是地理性顶级域名，由两个字 母缩写代表国家或地区，如.CN代表 中国，.JP代表日本等，.HK代表中 国香港。
1. 2 WWW及客户机／服务器工作方式
1.2.1 概念 客户机/服务器是一种网络的工作模式，也是一些 操作系统软件采用的系统模型。
任课教师：颜君彪 课程类别：院选课
2011年6月
课程基本要求
了解网站建设的基本内容 掌握网站建设的步骤 掌握网页设计工具的使用 掌握HTML基本标记的使用方法 了解CSS和表单的用法
第1章 网页设计与制作基础
1.1 Internet基础知识
什么是Internet Internet的基本概念 Internet是一个具体的网络实体， 泛指全球计算机网络的集合，是 一个全球性的信息通信网络，我 们称之为因特网。
பைடு நூலகம்
1.2.5 浏览器
网络浏览器是在Internet网络上使用的特殊 软件，在上网登录成功的前提下，要用” 网络浏览器”软件才能进行Internet网络 的各种操作。
1.2.6 Web服务器
Web服务器是在网络中为实现信息发布、资 料查询、数据处理等诸多应用搭建基本平 台的服务器。
1. 3 网站与网页
HTTP协议（英文全名为Hypertext Transfer Protocol，中文称“超文本传输协议”） 它是用来在Internet上传送超文本的传送 协议。
1.2.4 超文本
超文本（Hypertext）是把一些信息根据需 要连接起来的信息管理技术，人们可以通 过一个文本的链指针打开另一个相关的文 本。
1.1.1 Internet所提供的服务
（1）电子邮件服务（E-mail）“电子邮 件”专指在Internet中的电子邮件E-mail就是 Electronic Mail的英文缩写，是计算机用户 交换信息的一种途径。邮件地址由用户名 和主机名组成，中间由@连接，如 bjlgao@，bjlgo是用户名，是 主机名。 （ 2）登录服务（Telnet）远程登录就是 用户通过计算机网络进入和使用远程的计 算机系统。
为用户通过Internet与其他人进行交谈，并举行各 种实时通信会议提供了极大的方便。 （7）WWW （World Wide Web）WWW也叫万 维网，是Internet网络的多媒体信息查询工具。由 三部分组成，即：客户机、服务器和HTTP协议。 （8）游戏、聊天服务
1.1.2 协议（Protocol）
网站是指建立在互联网上的Web站点， 存放在网络服务器上的完整信息的集合体， 它包含一个或多个网页，这些页以超链接 方式连接在一起，形成一个整体，描述一 组完整的信息。它面向公众提供互联网内 容服务。
1.3.1 网页与网站
网页也叫 Web页，网页就是在显示 器屏幕上的内容。网页实际是一个文件， 它存放在世界某个角落的某一个计算机 中。网站与网页的关系类似于一本书与 一页书
（3）文件传输服务（FTP）文件传输
服务（File Transfer Protocol）指是的 把文件从一台计算机传送到另一台计 算机。 （4）Gopher服务Gopher是一种基于 菜单的信息检索工具，用户只要在成 树形结构排列的多层菜单中逐级深入， 就可以检索到所需要的信息，而不必 考虑它们的存储方式和位置。
1.2.2 URL
URL（英文全名是Uniform Resource Locator，中文称是“统一资源定位 器”），Internet上的所有资源都可用 URL来表示。URL好比Internet上的门牌 号码，它可以帮助用户在Internet的信息 海洋中定位到所需要的资料。
1.2.3 HTTP协议
是关于信息格式及信
息交换规则的描述。
1.1.3TCP/IP协议簇
TCP/IP是Internet上通用的标准协议簇。 TCP（Transmission Control Protocol）传 输控制协议，提供面向连接的服务IP （Internet Protocol）互联网协议，将数据 从一个地址传送到另一个地址，也就是说 IP的工作就是传送和接收数据包。
1.1.4 IP 地址
P地址是一个32位的二进制数组 成的号码，该号码分为四段，每段8位， 每段取值范围在0～255之间。
1.1.5 域名、域名系统
Internet域名是Internet网络上一个服务器或一个 网络系统的名字，在全世界没有重复的域名。
DNS用分层命名的方法： 即计算机域名．组织结构名．网络名．最高层域名。 最高层域名又称顶级域名。顶级域名代 表建立网络的部门、机构或网络所隶属的国 家和地区。
1.4 网页制作常用工具
1．利用Photoshop CS3设计网页图像
2. 利用Fireworks CS3设计网页图像
1.3.2 静态网页与动态网页 网页按其表现形式来划分可分为动态页 和静态页。 静态网页只能浏览，不能实现客户端和 服务器端的交流互动，在静态网页中，也 可以出现各种动态的效果，如GIF格式的动 画、FLASH影片、滚动字幕等，这些“动态 效果”只是视觉上的，并不能实现客户端 和服务器端的交互。
动态网页的页面内容随用户的输入而 变化，能与客户端交流互动，它们会随不 同客户、不同时间，返回不同的网页，动 态网页使用ASP、PHP、JSP、等技 术生成。 静态网页和动态网页各有特点，网站 采用动态网页还是静态网页主要取决于网 站的功能需求和网站内容的多少。
（5）电子公告板服务（Internet BBS
电子公告扳（BBS）即公告板系统 （Bullet in Board System）是一个信息 和文件的陈列室，常常集中于一个特定 主题，像发告示一样，将要公布的信息 粘帖到公告栏上，其他人可以随时看到 信息。
（6）网络会议（Net Meeting）服务Net Meeting
分类：大体可分为两类。
一类是组织性顶级域名，由三个字母 缩写代表机构，如 .com代表商 业，.edu代表教育，.net代表网络等。 另一类是地理性顶级域名，由两个字 母缩写代表国家或地区，如.CN代表 中国，.JP代表日本等，.HK代表中 国香港。
1. 2 WWW及客户机／服务器工作方式
1.2.1 概念 客户机/服务器是一种网络的工作模式，也是一些 操作系统软件采用的系统模型。