第1章 网页制作基础要点.ppt

　　本章将介绍与网页设计与制作有关的基本知识以及Dreamweaver CS5的基本情况，以为后续内容的学习奠定基础。 * Dreamweaver CS5 网页制作基础教程 第1章　网页制作基础 学习目标 了解与网页有关的一些常用名词术语。 了解HTML和CSS的一些基本知识。 了解Dreamweaver CS5的工具栏和功能面板。 掌握Dreamweaver CS5设置首选参数的方法。 1.1　设计思路 本书拟使用一个项目“崂山旅游”网站贯穿全书，按照网站制作的基本流程，循序渐进地介绍使用Dreamweaver CS5设计和制作网页的基本方法。 本章首先介绍与网络和网页有关的一些名词术语以及HTML和CSS的入门知识，然后介绍现在流行的网页制作软件Dreamweaver CS5，包括工作界面和使用规则，这是使用Dreamweaver CS5的基础。 1.2　Dreamweaver基础 名词术语 HTML基础 CSS基础 1.2.1 名词术语 1. 因特网Internet 万维网WWW 超文本传输协议HTTP 统一资源定位器URL 文件传输协议FTP 电子邮件E-mail 网络通讯协议TCP/IP IP地址 域名DN 域名系统DNS 3G网络 互联网服务提供商ISP HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种标记语言。标记语言是一套标记标签，HTML使用标记标签来描述网页。 1、HTML文档的基本结构 html head title2012伦敦奥运会口号/title /head body Inspire a generation，翻译中文为：激励一代人。 /body /html 1.2.2 HTML基础 2、HTML标题 HTML设置了6级标题。HTML标题是通过h1 - h6等标签进行定义的。其中，数字越小，字号越大；数字越大，字号越小。 h1标题文字/h1 h2标题文字/h2 … h6标题文字/h6 3、HTML段落 HTML语言使用p…/p标签给网页正文分段，可以通过该标记中的align属性对段落的对齐方式进行控制。align属性的值通常有left、right、center 3种，可分别使段落内的文本居左、居右、居中对齐。使用段落标记p…/p与使用换行标记br是不同的，br标记只能起到另起一行的作用，不等于另起一段，换行仍然是发生在段落内的行为。 P align=“center”当我们失去的时候， br 才知道自己曾经拥有。/P 4、HTML链接 HTML语言通常使用a…/a标签在文档中创建超级链接。其中，href属性用来创建指向另一个网址的链接，使用target属性定义被链接的文档在何处显示，_blank表示在新窗口中打开文档。 a href= target=_blank网易主页/a 5、HTML表格 表格使用table标签来定义，每个表格有若干行，行使用tr标签来定义，每行又分为若干单元格，单元格使用td标签来定义。如果表格有行标题或列标题，标题单元格使用th标签来定义。如果表格有标题，标题使用caption标签来定义。表格的宽度使用width属性进行定义，表格的边框粗细使用border属性进行定义。 table width=160 border=1 caption名单/caption tr th姓名/th th班级/th /tr tr td王一翔/td td中三班/td /tr tr td王一楠/td td中二班/td /tr /table 5、HTML表格 表格使用table标签来定义，每个表格有若干行，行使用tr标签来定义，每行又分为若干单元格，单元格使用td标签来定义。如果表格有行标题或列标题，标题单元格使用th标签来定义。如果表格有标题，标题使用caption标签来定义。表格的宽度使用width属性进行定义，表格的边框粗细使用border属性进行定义。 CSS（Cascading Style Sheets，层叠样式表或级联样式表）作用主要是用于定义如何显示HTML元素。 1、CSS的保存方式 1.2.3 CSS基础 2、CSS的语法结构 CSS规则由两个主要的部分构成：选择器和声明。 选择器 {声明1; 声明2; ... 声明N} h3 {color: red; font-size: 14px;} p {color: #ff0000;} p {color: #f00; } p {color: rgb(255,0,0);} p {color: rgb(100%,0%,0%);} p {font-family: sans, serif;} p {text-align: center; color: re