第1章得 网页设计初步.pptVIP

第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）方式的信息检索服务技术，它将位于Internet上不同地点的相关数据信息有机地编织在一起 1.1.3 什么是URL URL为“Uniform Resource Locator”的缩写，通常翻译为“统一资源定位器”，它是一个指定Internet上资源位置的标准，也就是人们常说的网址。 其格式为： 通讯协议：//服务器地址[：通讯端口]/[路径] 例如，/ 就是典型的URL地址 1.1.4 什么是DNS DNS是“Domain Name Service” 的缩写，通常翻译为“域名管理系统”，简称为域名，它采用分层管理模式，用于将机器的名称转变成 IP 地址。 DNS使用阶层式的命名标准。此阶层的运作方式是由右而左，在右边的表示最高等级。如下图所示： 1.1.5 什么是Web浏览器和Web服务器 Web浏览器： 中文名称为网络浏览器或网页浏览器，简称浏览器；英文名称为Web Browser。浏览器是一个用于文档检索和显示的客户应用程序，并通过超文本传输协议（HyperText Transfer Protocol，HTTP）与Web服务器相连。目前，流行的有Internet Explorer和Netscape Navigator。 Web服务器(Web Server)： 是指驻留于因特网上某种类型计算机的程序。当Web浏览器（客户端）连到服务器上并请求文件时，服务器将处理该请求并将文件发送到该浏览器上，附带的信息会告诉浏览器如何查看该文件（即文件类型），服务器使用HTTP（超文本传输协议）进行信息交流。 1.2 网页 1.2.1 网页的本质 我们看到的网页都是图文并貌的精美画面，实际上网页的源文件是一个记事本文件，该文件由一些类似html这样的标签组成，即HTML标记语言。 HTML的英文全称是Hyper Text Markup Language， 直译为超文本标记语言，该语言不是一种程序设计语言，而是一种描述文档结构的标记语言。它的作用是通过一些标签来指示浏览器如何显示包含在标签中的内容。 HTML语言中常用标签：（如右图所示） HTML标记 html标记放在HTML文件的开头，以/html标记结尾，用以向浏览器说明，该文件是HTML文件。 “文件头”标记 文件头标记是以head开头，以/head结尾。一般放在html标记的后面，用以说明网页的标题，连接，关键字等信息。 “文件标题”标记 标题标记为title和/title。用来设定文件的标题，注释该文件的内容。 “文件体”标记 文件体标记为body和/body。一般用来指明HTML文档的内容，如文字、标题、段落和列表等，也可以用来定义页面的背景颜色。 “标题”标记 标题标记的格式为h?和/h?。用来设置标题字体的大小。 “字体”标记 字体标记的格式为font和/font，用来设置网页中文字的各种属性，比如字体，大小，颜色等。 “表格”标记 格式为table和/table，用来在网页中插入表格。 “图片”标记 图片标记的格式为img src=#（#代表图片的URL）。用于在网页中显示图片，它没有结尾标记。 1.2.2 网站 网站就是一个存储和管理网页与网页元素的场所。通常，一个网站就对应一个文件夹，包括该站的所有内容。 1.2.3制作网页常用的编辑工具和软件 常见的可视化网页制作软件有Dreamweaver（网页布局与素材整合等）、Fireworks（图形设计）、 Flash（flash动画制作）、 PhotoShop（图像处理）等 1.3 Dreamweaver 8中文版简介 1.3.1 Dreamweaver 8 工作界面 启动方法： ①双击桌面上的快捷图标； ②单击“开始” | 所有程序 | Macromedia| Macrome