网页制作网站建设基础课件

《网页制作网站建设基础课件》由会员分享，可在线阅读，更多相关《网页制作网站建设基础课件（106页珍藏版）》请在金锄头文库上搜索。

1、第一章 网页与网站基础,【本章内容】 1.1 WWW简介 1.2 网页与网站的关系 1.3 静态网页与动态网页 1.4 HTML静态网页技术 1.5 XHTML新规范 1.6 CSS基础 1.7 网站建设的步骤,第1.1节 WWW简介（一）,因特网实现信息共享的主要途径是WWW服务。 WWW是World Wide Web的缩写，即世界范围内的网络的意思，也叫万维网，有时简称为Web。,第1.1节 WWW简介（一）,WWW服务的信息资源以Web网页的形式组织在一起，Web网页存放在WWW服务器里。因特网普通用户在浏览器中输入不同的WWW服务器地址就能看到不同的Web网页。 Web网页中通过一种“

2、链接”技术，可以实现Web网页之间的连接与跳转。,Web网页在WWW服务器与WWW客户机之间按照http协议进行传输。由下图可看出：WWW客户机和WWW服务器之间的通信通常分为四步骤（参看1.1节）。 图1-1 WWW服务体系结构图,第1.1节 WWW简介（二）,第1.2节 网页与网站的关系（一）,Web网页，简称为网页，一般是用HTML语言和其它Script语言编写而成的程序文件。 HTML是HyperText Markup Language的缩写，即超文本标签语言；Script语言是嵌入式脚本语言，如VBScript、 JavaScript、JSScript等。,第1.2节 网页与网站的关

3、系（一）,除文本以外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，然后才能嵌入到网页文件中。,第1.2节 网页与网站的关系（二）,一个WWW服务器里常常有许多网页和相关文件，为便于分类查找、组织和管理，常将众多的网页及相关文件存放到一个主目录（也叫根目录）下，或者分别存放在主目录下面的不同子目录里。然后将这些网页以链接的形式组织起来，并确定一个主网页（主网页存放在根目录下），就形成了一个网站。,第1.2节 网页与网站的关系（二）,因特网用户访问某网站时，首先打开的就是网站的主网页（简称为主页）。通过链接，用户可以方便地从主网页到达各分网页，也可以从分网页很容易地回到主网页

4、。,第1.2节 网页与网站的关系（三）,网站的主要特征 : 众多的网页 、确定的主题、 统一的网络、便捷的导航 、 栏目的分层、动态的信息、 双向交流栏目、用户指南等,第1.3节 静态网页与动态网页（一）,Web网页有很多种，如HTML网页、DHTML网页、ASP网页、JSP网页、PHP网页等。 总的来说，网页可以分为二类： 静态网页和动态网页。,第1.3节 静态网页与动态网页（二）,静态网页指的是HTML网页，即用HTML语言编写的网页，它是所有其他网页技术的基础。 网页中所有的对象，包括文字、图片、超链接、Flash动画、表格、列表等都需要通过HTML才能展现出来。,第1.3节 静态网页与

5、动态网页（三）,通过客户端脚本语言(如JavaScript)、层叠样式表（CSS）及文档对象模型（DOM）的综合使用，能让网页中的对象产生一些动态变化，例如鼠标移上后弹出快捷菜单、随滚动条移动的广告图片等。 这也属于静态网页的范围。,第1.3节 静态网页与动态网页（四）,动态网页是在WWW服务器端动态生成网页的技术，ASP、JSP、PHP等都属于动态服务器网页技术，本课程主要学习ASP技术。 动态网页一般都需要通过访问数据库（或文本类文件）来实时生成网页，系统中除了有WWW服务器器以外，还有一台数据库服务器（或者将WWW服务器与数据库服务器合二为一）。,第1.3节 静态网页与动态网页（五）,静

6、态网页及动态网页的访问方式 (a) 静态网页访问方式 (b) 动态网页访问方式,第1.3节 静态网页与动态网页（六）,不同的网页技术，其作用范围不同。静态网页作用在客户端浏览器中，也就是说它们是在网页下载到客户端浏览器之后发生作用；而动态服务器网页技术（ASP，JSP，PHP等）作用在WWW服务器端，它们在即时生成HTML静态网页文件之后，便不再对网页发生作用。,第1.4节 HTML静态网页技术,一. HTML简介 二. HTML静态网页基本结构 三. 网页内的文字格式 四. 分段换行、预格式与列表 五. 媒体元素的插入,六. 超链接的使用 七. 表格的设计 八. 表单的设计 九.网页属性的设

7、置 十. HTML标签分类,一. HTML简介（1）,HTML是HyperText Markup Language的缩写，中文意义是超文本标签语言。用HTML语言编写的网页是静态网页。HTML是网页的基本语言，也是其他网页技术的基础。,一. HTML简介（2）,HTML是一种结构化的语言，采用标签来描述网页内容，所有的标签都是由“”组成。HTML语言采用类似于“”的结构来描述网页中所有的内容，如头部信息、段落、列表、超链接、图片、表格等。其中“”被称为起始标签，“”被称为结束标签，统称标签。起始标签、结束标签及其中间内容组成HTML元素。,一. HTML简介（2）,例如，段落元素：、 头部元素

8、：、 超链接元素：等。 大多数元素都有配对的起始标签和结束标签，少数只有起始标签而没有结束标签（或结束标签可省略），这时要用一个“/”将标签关闭,如：。 每个元素都有一些属性，属性只出现起始标签里，形式：属性名=“属性值”。例如：,一. HTML简介（2）, 网易网站 其中是超链接元素的起始标签，是超链接元素的结束标签，href和target是a元素的两个属性，“http:/ ”和“_blank”分别是这两个属性的属性值，标签名与属性之间、属性与属性之间要有空格符相隔。,一. HTML简介（3）,可以用任意一种文本编辑工具（如记事本、写字板、WORD等）来编写HTML网页文件。HTML网页文件

9、的扩展名为.htm或 .html。 HTML标签只能使用半角字符。HTML标签字母可大写,也可小写。 HTML的注释，采用 表示，符号 之间的所有内容（可以跨行）都是注释，浏览网页时不会显示出来。,二. HTML静态网页基本结构 (1),1. HTML最基本的标签 ,二. HTML静态网页基本结构 (1),1. HTML最基本的标签 一个HTML网页文件总是从标签开始，以标签结束；网页的标题（浏览网页时，显示在浏览器的标题栏）总是在和之间定义；网页主体内容则在和之间描述。,二. HTML静态网页基本结构 (2),2. HTML网页 基本结构 由上述基本HTML标签可构成HTML网页的基本结构。

10、如例1-1.htm：, HTML网页基本结构 这是我制作的第一个网页。 ,三.网页内的文字格式 (1),1. 标题字体的定义 ,三.网页内的文字格式 (2),2. 文本文字的定义 ,三.网页内的文字格式 (3),3. 加粗、倾斜与下划线的定义 使用加粗、倾斜与下划线标签（b、i、u），可对文本文字进一步修饰。 如：等等。,三.网页内的文字格式 (4),含有这些标签组成一个网页文件1-2.htm如下： 标题字体与文本文字的定义 第1号标题字体 第2号标题字体 第3号标题字体 第4号标题字体 第5号标题字体（居中） 黑体3号文字 仿宋体4号文字（倾斜、下划线） 宋体5号红色文字 ,四. 分段换行、

11、预格式与列表(1),1. 分段标签 可省略。- 2. 换行标签 - 3. 预格式标签 ,四.分段换行、预格式与列表（2）,含有分段、换行和预格式标签的网页文件1-3.htm如下： 分段换行与预格式 以下是没有使用分段、换行与预格式标签的情况： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 以下是使用了三个换行标签的情况： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 以下使用分段标签（分为两段）： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 以下使用预格式： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 ,四. 分段换行、预格式与列表(

12、3),3.列表标签 （1）无序列表（项目列表） 例如，在HTML基本网页结构的body标签内输入如下代码： 星期一早晨升国旗 星期二下午开班会 星期五下午卫生大扫除 浏览网页，结果如下：,四. 分段换行、预格式与列表(3),（2）有序列表 例如，在HTML基本网页结构的body标签内输入如下代码： 星期一第1节读英语 星期二第1节读中文 星期五第3、4节学习交流会 浏览网页，结果如下：,五. 媒体元素的插入 （1）,1. 图像的插入 标签可省略, 这时起始标签 形如。 -,五. 媒体元素的插入 （1）,使用了img标签插入图像的网页文件1-4.htm如下： 网页图像的插入 一、gif图像“笑脸

13、” 二、jpg图像“环境” ,五. 媒体元素的插入 （2）,2. 其它媒体元素的插入 可省略。 - 如： 等等。,五. 媒体元素的插入 （2）,使用embed标签插入视频、动画等媒体元素的网页文件1-5.htm如下： 视频、动画媒体的插入 一、avi视频 二、SWF动画 ,六. 超链接的使用（1）,超链接标签的形式： 或 1. 网页文件的链接 ,六. 超链接的使用（1）,例如： 搜狐网站 第一章第个网页 给我留言 幻灯片演示课件,六. 超链接的使用（2）,2. 锚点的定义与页内链接 当网页内容很长，需要进行页内跳转链接时。就需要定义锚点和锚点链接。 可省略 - ,六. 超链接的使用（3）, 超

14、链接的使用 因特网链接 湖南第一师范 本地网页的链接 第一章第2个网页 非网页文件的链接 幻灯片演示课件1 锚点的使用 .第一段. .第二段. .第三段. .第四段. 第一段春天的故事 返回 ,七. 表格的设计（1）,1. 表格标签 ,七. 表格的设计（2）,2. 表题标签 . 3. 表行标签 ,七. 表格的设计（3）,4. 单元格标签 （1）表头单元格标签 ,七. 表格的设计（3）,4. 单元格标签 （2）普通单元格标签 ,七. 表格的设计（4）,例如，一个3行4列有表题、表头行的表格可用以下方式定义 . . . ,七. 表格的设计（例）, 表格的使用 课程表 星期一 星期二 星期三 星期四

15、 星期五 , 第1、2节 语文 数学 物理 化学 计算机 第3、4节 政治 历史 地理 生物 英语 , 第5、6节 体育 英语 语文 数学 物理 第7、8节 音乐 美术 体育 二课堂 休息 ,八. 表单设计（1）,表单是能够将用户信息提交给服务器的一种页面元素，是服务器与网页访问者之间沟通的纽带。主要标签有表单标签、表单元素（包括文本字段、密码字段、文本区域、隐藏域、复选框、单选按钮、列表项、图像域、跳转菜单、文件域、按钮等）标签等。表单元素要入放在表单起始标签与表单结束标签之间。 1. 表单标签 ,八. 表单设计（2）,2. input类标签 input类标签用于定义表单内一个输入型、选择型或按钮元素。一般格式如下： 其中type属性用于定义该元素的具体类型，可选的类型有text(文本)、password(密码)、hidden(隐藏)、checkbox(复选)、radio(单选)、image(图像)等。 例如： 输入姓名： ,八. 表单设计（2）,例如： 输入密码： 篮球 足球 ,八. 表单设计（2）,单选项： 男 女 按钮： ,八. 表单设计（2）,图像域： ,八. 表单设计（3）,3.文本区域标签 与之间的内容，为该文本区域中的初始值。 -,八. 表单设计（3）,例如： 热烈庆祝中华人民共和国成立