《网页制作实用教程 教学课件 ppt 作者 张淑清 第1章 网页设计初步》由会员分享，可在线阅读，更多相关《网页制作实用教程 教学课件 ppt 作者 张淑清 第1章 网页设计初步（16页珍藏版）》请在金锄头文库上搜索。
1、第1章 网页设计初步,教学内容：网页的基本概念；HTML语言结构；Dreamweaver 8 中文版的工作环境。 教学重点和难点： 掌握HTML语言结构，熟悉Dreamweaver 8 中文版的工作环境。,1.1 预备知识,1.1.1 什么是Internet Internet是将以往相互独立的，散落在各个地方的单独的计算机或是相对独立的计算机局域网，借助已经发展得有相当规模的电信网络，通过一定的通讯协议而实现更高层次的互联。 1.1.2 什么是WWW WWW是World Wide Web的缩写，简称Web，中文翻译为万维网或全球网。WWW是一个基于超文本（Hypertext）方式的信息检索服务
2、技术，它将位于Internet上不同地点的相关数据信息有机地编织在一起,1.1.3 什么是URL URL为“Uniform Resource Locator”的缩写，通常翻译为“统一资源定位器”，它是一个指定Internet上资源位置的标准，也就是人们常说的网址。 其格式为： 通讯协议：/服务器地址：通讯端口/路径 例如，http:/ 就是典型的URL地址,1.1.4 什么是DNS DNS是“Domain Name Service” 的缩写，通常翻译为“域名管理系统”，简称为域名，它采用分层管理模式，用于将机器的名称转变成 IP 地址。 DNS使用阶层式的命名标准。此阶层的运作方式是由右而左，
3、在右边的表示最高等级。如下图所示：,1.1.5 什么是Web浏览器和Web服务器 Web浏览器： 中文名称为网络浏览器或网页浏览器，简称浏览器；英文名称为Web Browser。浏览器是一个用于文档检索和显示的客户应用程序，并通过超文本传输协议（HyperText Transfer Protocol，HTTP）与Web服务器相连。目前，流行的有Internet Explorer和Netscape Navigator。 Web服务器(Web Server)： 是指驻留于因特网上某种类型计算机的程序。当Web浏览器（客户端）连到服务器上并请求文件时，服务器将处理该请求并将文件发送到该浏览器上，附带
4、的信息会告诉浏览器如何查看该文件（即文件类型），服务器使用HTTP（超文本传输协议）进行信息交流。,1.2 网页,1.2.1 网页的本质 我们看到的网页都是图文并貌的精美画面，实际上网页的源文件是一个记事本文件，该文件由一些类似这样的标签组成，即HTML标记语言。 HTML的英文全称是Hyper Text Markup Language， 直译为超文本标记语言，该语言不是一种程序设计语言，而是一种描述文档结构的标记语言。它的作用是通过一些标签来指示浏览器如何显示包含在标签中的内容。,HTML语言中常用标签：（如右图所示） HTML标记 标记放在HTML文件的开头，以标记结尾，用以向浏览器说明，
5、该文件是HTML文件。 “文件头”标记 文件头标记是以开头，以结尾。一般放在标记的后面，用以说明网页的标题，连接，关键字等信息。 “文件标题”标记 标题标记为和。用来设定文件的标题，注释该文件的内容。 “文件体”标记 文件体标记为和。一般用来指明HTML文档的内容，如文字、标题、段落和列表等，也可以用来定义页面的背景颜色。 “标题”标记 标题标记的格式为和。用来设置标题字体的大小。 “字体”标记 字体标记的格式为和，用来设置网页中文字的各种属性，比如字体，大小，颜色等。 “表格”标记 格式为和，用来在网页中插入表格。 “图片”标记 图片标记的格式为（#代表图片的URL）。用于在网页中显示图片，
6、它没有结尾标记。,1.2.2 网站 网站就是一个存储和管理网页与网页元素的场所。通常，一个网站就对应一个文件夹，包括该站的所有内容。 1.2.3制作网页常用的编辑工具和软件 常见的可视化网页制作软件有Dreamweaver（网页布局与素材整合等）、Fireworks（图形设计）、 Flash（flash动画制作）、 PhotoShop（图像处理）等,1.3 Dreamweaver 8中文版简介,1.3.1 Dreamweaver 8 工作界面 启动方法： 双击桌面上的快捷图标； 单击“开始” | 所有程序 | Macromedia| Macromedia Dreamweaver 8 单击快速启
7、动栏上的图标 注：第一次启动Dreamweaver 8，需要选择工作区布局。Dreamweaver 8有两种界面分别是“设计器”工作界面和“编码器”工作界面 “编码器”工作界面指的是纯代码编辑界面，适用于网页编程水平较高的用户。 如图所示：,Dreamweaver 8 工作界面 由以下几部分组成。 插入栏：包含各种类型的对象，如图像、表格、层和表单等。 文档工具栏：包含按钮和弹出式菜单，它们提供各种文档窗口视图，如“设计”视图和“代码”视图、各种查看选项和一些常用操作。 文档窗口：显示当前创建和编辑的文档。 属性面板：用于查看和更改所选对象的各种属性。 文件面板：可以管理文件和文件夹。文件面板
8、还可以访问本地磁盘上的全部文件，类似于Windows资源管理器。 其他面板。这些面板使用时展开，不用时通常被设置为折叠或关闭状态。如下图中的“CSS”、“应用程序”和“标签检查器”等,1.3.2 Dreamweaver 8 工具栏 1插入栏 Dreamweaver 8提供了两种“插入”栏显示方式，一种是菜单模式，另一种是制表符模式 2文档工具栏 各个按钮的功能如下： 显示代码视图：显示代码窗口，查看和编辑网页代码。 显示代码视图和设计视图：同时显示可视化编辑窗口和代码窗口。 显示设计视图：显示可视化的编辑窗口，直接对网页元素进行操作。 文档标题：显示和设置文档的标题。 浏览器检查错误：检查浏览
9、器支持，错误检查等。 文件管理：通过该菜单实现消除只读限制、获取、取出、上传、存回、设计备注和站点定位的功能。 浏览器中浏览/调试：在定义好的浏览器中预览和调试当前的网页。 刷新设计视图：设计视图中网页对象被修改后，单击此按钮来刷新。 视图选项：设置编辑窗口的一些编辑选项。,3标准工具栏 Dreamweaver 8中的“标准”工具栏中包含“文件”和“编辑”菜单中一般操作的按钮：“新建”、“打开”、“保存”、“保存全部”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。,1.3.3 Dreamweaver 8 属性面板 当用户在编辑区里选择了网页元素，在编辑窗口下方就会出现选中元
10、素的“属性”面板，“属性”面板显示出选中网页元素的各项属性值。 下图选中图像后的属性面板。 注：选中不同的网页元素，“属性”面板显示的 属性有所不同。,1.3.4 Dreamweaver 8 浮动面板组 浮动面板都处于编辑窗口之外，使用时可以单击面板边缘的小黑三角图标来展开，不需要的时候可以单击小黑三角图标把面板折叠起来。 大致分为：CSS样式、层、行为、代码片断、数据库、绑定、服务器行为、组件、文件、标签检查器、结果、历史纪录、框架、代码检查器和时间轴等 。如图：,1.5 课后习题答案,一、填空题 1Web服务器 2. 域名管理系统 二、选择题 1B 2. A 三、判断题 1 2. 四、简答
11、题 1.答： （1）打开浏览器，输入网址http:/，告知浏览器要访问的网页的服务器地址和网页在服务器上的位置，然后浏览器向服务器发出访问请求； （2）请求经由网络到达服务器后，服务器查找到所要访问的页面； （3）所要访问的页面内容经过网络下载到访问者的机器上，由浏览器解析这些内容。,2.答： Dreamweaver 8的窗口主要由以下几部分组成： “插入栏”：包含各种类型的对象，如图像、表格、层和表单等。 “文档工具栏”：包含按钮和弹出式菜单，它们提供各种文档窗 口视图，如“设计”视图和“代码”视图、各种查看选项和一些常 用操作。 “文档窗口”：显示当前创建和编辑的文档。 “属性面板”：用于查看和更改所选对象的各种属性。 “文件面板”：可以管理文件和文件夹。文件面板还可以访问本 地磁盘上的全部文件，类似于Windows资源管理器。 其他面板。这些面板使用时展开，不用时通常被设置为折叠或 关闭状态。如图1.7中的“CSS”、“应用程序”和“标签检查器”等。,
