《网页设计基础》PPT课件.ppt

第 2章 网页设计基础 本章讲述的主要内容 2.1 HTML和 XHTML标记语言 2.2 在 Visual Studio中设计网页 2.3 样式控制 2.4 页面布局 2.1 HTML和 XHTML标记语言 2.1.1 HTML的基本格式 HTML文件中的标记符必须用 “ ”括起来，并且以 “ ” 开始，以 “ ”结束。其最基本的格式为： 内容 内容 例如： 我的主页 欢迎光临初学者之家 字体属性示例 2.1 HTML和 XHTML标记语言 2.1.2 常用 HTML标记 1. 文字和段落标记 2.1 HTML和 XHTML标记语言 2.1.2 常用 HTML标记 2. 超链接标记 一个超文本链接由两部分组成，一是呈现在读者面前的超链接对 象（通常是文字或图片）；另一部分是被指向的目标，它可以是 同一文件的另一部分，也可以是一个不同的文件，还可以是动画、 音乐、视频、程序文件等。 标记的格式为： 热点文本 2.1 HTML和 XHTML标记语言 2.1.2 常用 HTML标记 3. 插入和设置图片 使用图片标记 ，可以将一幅图片添加到网页中。该标记的 格式为： 各属性含义说明如下： src： 指出包括路径在内的图片文件名，例如： images/0001.jpg。 alt： 在浏览器尚未完全下载图片时，显示在图片位置的说明文字。 width和 height： 指定图片的宽度和高度，单位为像素值或百分比。 hspace和 vspace： 指定水平和垂直方向的空白像素值，以免文字 太靠近图片。 2.1 HTML和 XHTML标记语言 2.1.2 常用 HTML标记 4. 插入和设置表格 2.1 HTML和 XHTML标记语言 2.1.3 XHTML的基本格式 2.1 HTML和 XHTML标记语言 2.1.4 常用 XHTML标记 1. 标记的 style属性 2. 文字和段落标记 XHTML保留了绝大多数 HTML提供的字体和段落样式设置标记。 如， 标记表示粗体， 标记表示斜体， 标记表示下划 线， 和 标记分别表示大字体和小字体， 和 标记表示带有单、双删除线的文字， 和 表示以下标或上标方式显示文字等。 2.1 HTML和 XHTML标记语言 2.1.4 常用 XHTML标记 3. 和 标记 是块级元素，以 标记开始，以 标记结束。该标 记用来定义页面中的一个特殊区域，区域内可包含文字、图 片、表格或下级 等。使用 标记可方便的将若干页 面元素组成一个集合，以方便统一设置集合的显示位置及所 有元素的样式。 标记也是一个块级元素，它与 标记的功能相似，也 用来标记页面中一个特殊的区域。一般情况下对于较大的页 面区域需要使用 进行定义，而 标记常被用在某段 落或更小的区域中。 2.2 在 Visual Studio中设计网页 2.2.1 向 ASP.NET网站中添加静态网页 在 Visual Studio IDE环境中可以向网站中新建或添加已编辑完 成的静态网页文件。在新建一个 ASP.NET网站后，系统缺省地 只创建了一个名为 Default.aspx的，运行在服务器端的网页 文件。 如果希望向网站中添加运行在客户端的静态网页，可在解决方案 资源管理器中，右键单击网站名称，在弹出的快捷菜单中执 行 “ 添加新项 ” 命令，在打开的 “ 添加新项 ” 对话框模板列 表中选择 “ HTML页 ” ，在填写了文件名称后单击 “ 添加 ” 按 钮。 在 Visual Studio的工具栏中提供了一个名为 “ 验证的目标架构 ” 下拉列表框，如图 2-7所示。它用于设置编写 HTML文件时使用 的标准，可选项主要有 HTML 4.01、 XHTML 1.0的各版本和 XHTML 1.1。 2.2 在 Visual Studio中设计网页 2.2.2 .aspx文件与 XHTML ASP.NET窗体中各元素默认以 XHTML 1.0 Transitional规范描述， 页面中 Web服务器控件以特殊的标记表示。例如，下列代码表 示了一个命令按钮控件（ Button）和一个标签控件（ Label）。 可以看出 Web服务器控件与普通 XHTML元素相比最突出的不同点就 是具有 runat=“server”（在服务器端运行）的属性。 .aspx页面代码以 开始，称为页面的 “ Page指 令 ” 2.2 在 Visual Studio中设计网页 2.2.3 Visual Studio提供的网页设计环境 智能感知 “拆分”视图和属性窗口 2.3 样式控制 所谓样式控制是指对页面中各元素的外观（字体大小、颜色、 背景对齐方式等）进行设置的方法。在 XHTML中如果页面较为简 单，一般可使用各标记的 style属性来实现页面样式的控制。但 对于结构复杂，内容丰富的页面使用 style属性控制样式势必会 造成许多重复工作量，页面代码也会显得十分臃肿，此时可使用 CSS对网页样式进行统一的控制。 2.3 样式控制 2.3.1 CSS的概念 前面介绍过使用元素的 style属性控制 XHTML元素的样式，这 种方式程序内联样式。其优点是直观、方便，但缺点也十分突出， 如果页面中多个元素需要使用相同的样式，就需要进行多次重复 操作，需要修改时更是麻烦。 CSS（ Cascading Style Sheets，级联样式表，也称为层叠 样式表）是一种将页面元素样式设置集中化的方法，引入 CSS的 主要目的就是为了实现将页面结构与页面外观表现分离。 在设计由众多页面组成的网站时，设计页面外观样式会占据开发 人员大量的时间，特别是网页设计完成后，各种颜色的搭配以及 不同页面的外观一致性要求往往会给后期维护工作带来较大的负 担，而使用 CSS则可很好的解决这一问题。 CSS规定了内联式、嵌入式和外部链接式 3种定义样式的方法。 2.3 样式控制 2.3.1 CSS的概念 1. 内联式 2.3 样式控制 2.3.1 CSS的概念 2. 嵌入式 2.3 样式控制 2.3.1 CSS的概念 3. 外部链接式 所谓 “ 外部链接式 ” 样式控制，是将样式控制代码单独存放 在一个以 .css为扩展名的文本文件内，通过 标记引用其中 对样式的定义。 2.3 样式控制 2.3.1 CSS的概念 4. 样式定义的优先级 如果网页中既有内联式和嵌入式样式定义，又有外部链接式 样式定义，而且这 3种定义中还存在针对某特定元素的定义冲突。 在这种情况下浏览器将采用 “ 就近使用 ” 的优先原则，即采用与 该元素位置最近的样式定义。 显然，内联式样式定义在任何情况下都最靠近元素位置，所 以其优先级是最高的，也就是说内联式样式定义将覆盖嵌入式和 外部链接式样式定义。而对于嵌入式和外部链接式样式定义的优 先级，要看 标记和 标记的书写位置谁更靠近元素 的位置。 2.3 样式控制 2.3.2 向 ASP.NET网站中添加样式表 2.3 样式控制 2.3.3 使用样式生成器 图 2-13 修改样式对话框 图 2-14 添加样式规则对话框 2.3 样式控制 2.3.4 创建和使用样式规则 1. 元素选择符 2. 类名选择符 3. 元素 ID选择符 4. 样式规则的层次结构 2.4 页面布局 页面布局是网页设计的重要工作之一 ， 它决定了页面中各板块的 显示位置和显示方式 。 传统的页面布局通常采用表格布局技术 ， 适合一些页面结构不太复杂的小型网站 ， 其优点是布局方便直观 ， 缺点是显示速度较慢 ， 需要将整个表格下载完毕才开始显示页面 内容 。 表格布局方式也不利于 “ 结构和表现分离 ” 的设计理念 。 目前最为流行的页面布局方法是采用 CSS+DIV的布局技术 ， 这 是 Web标准推荐的布局方法 。 2.4 页面布局 2.4.1 使用表格布局页面 2.4 页面布局 2.4.2 使用 DIV和 CSS布局页面 下面的例题介绍了使用 DIV和 CSS进行页面布局的一般方法 。 例 2-3 2. CSS+DIV布局技术的常用技巧 2.4 页面布局 2.4.3 页面元素的定位 网页中元素的显示位置 ， 在浏览器窗口大小发生变化时可能出现 一些变化 。 为了避免元素位置变化而导致页面布局错乱 ， 需要使 用元素定位属性进行设置 。 页面元素定位分为流布局定位 （ static） 、 坐标绝对定位 （ absolute） 和坐标相对定位 （ relative） 3种形式 。 1. 流布局定位 （ static） 2. 坐标绝对定位 （ absolute） 3. 坐标相对定位 （ relative）