ASPNET网站开发技术第二章课件.pptxVIP

第二章学习情境：页面的布局及样式设计

第二章 学习情境：页面的布局及样式设计

学习情境引入

基本知识1：HTML语言

基本知识3：网页布局标记

基本知识4：级联样式表CSS

决策与计划

实施

2

.1

学习情境引入

□

页面布局及样式设计的能需求

前台页面布局及样式展示

前台页面布局及样式设计的技术分解

2

.1

.1

页面布局及样式设



网上书店管理系统是一个面向消费者的购物网站，所以网站的布局及样式的设计是否合理美观是极为重要的。就前台页面而言，具体需求如下：

1各组成部分

2基本布局要求

3样式风格

2

.1

.2

前台页面布局及

本章以网站前台页面的母版设计为基础，掌握网页布局和样式设计的技巧，以完成网上书店管理系统的整体布局。其效果如图2‑1和图2‑2所示

2

.1

.3

前台页面布局及

页面都是由“内容、结构、表现和行为”这4个方面组成的。“内容”就是页面要传达的信息，包含数据、文档或者图片等；“结构”就是把内容进行结构化，比如加上标题、段落和列表等；“表现”就是用来改变内容外观的东西。例如字体大小，正文的颜色，背景颜色等修饰；“行为”就是对内容的交互及操作，例如，使用JavaScript判断一些表单提交，或者实现菜单的显示和隐藏等。“内容”是基础，然后是附加上去的“结构”和“表现”，最后再对它们加上“行为”。页面的布局和样式设计，也就是“结构、表现”这两个部分，相关的技术主要包括：

超文本标记语言HTML（含XHTML）；

级联样式表CSS；

本章即讲解HTML和CSS样式表的使用方法，用来完成页面的布局和样式的设计，下一章将介绍页面动态行为的实现技术。

2

.2

基本知识1

：HTML

语

HTML语言简介

HTML文档

超链接标记

文本类标记

图像标记

对象标记

移动对象标记

form标记

2

.2

.1

HTML

语言简介

前面章节已经简要概述了HTML语言，XHTML标准是HTML的最新标准。XHTML中的X是可扩展的意思，XHTML就是可扩展的超文本标记语言，它比HTML有更严格的书写标准、更好的跨平台能力。如果说HTML是汉语，那么XHTML就是标准普通话。ASP.NET支持XHTML标准。

2.2.2 HTML文档

HTML文档即HTML网页。

例2‑1编写HTML网页，用红色、5级字号显示“HelloWorld！”。

html

head

title网页标题/title

/head

body

fontsize=5color=redHelloWorld!/font

/body

/html

在记事本里写完这些代码之后，将文件保存为“Hello.htm”,然后你双击这个文件，系统就会自动用IE打开并显示这个网页。如图2‑2所示：

“HTML标记”，其基本结构是：一个开始标记，一个结束标记，中间是显示内容，如下：标记名属性=“属性值”显示内容/标记名

2.2.2 HTML文档

1. 基本术语

（1）HTML标记

所有标记必须要用两个尖括号括起来：，结束标记要有一个/，来表示结束。

标记名要用小写字母。

开始标记和结束标记及其之间的内容，称为HTML元素，以标记的名称为元素名称。

一个包括内容的HTML元素，包含一个开始标记和一个结束标记，显示内容在它们中间。

一个不包括内容的HTML元素，开始标记和结束标记可以合并书写。例如：

br/是换行标记，hr/是水平线标记等。

大多数HTML元素是可以嵌套的。

2.2.2 HTML文档

1. 基本术语

（2）HTML标记属性

所有属性都放置在开始标记的尖括号内。一个标记可以拥有多个属性，用空格隔开。

属性总是以“名称/值对”的形式出现，属性的值一定要在双引号中。如：

font标记的size=5，表示使用第5级字号。

大部分属性都有默认值，由浏览器确定。

所有的标记都可以有name和id等属性，name表示该标记的名称，id是该标记的唯一标识符，一般在JavaScript中，name和id都可以像变量名那样指代某个标记。

嵌套标记中，父标记的属性会影响所有各级子标记。

2.2.2 HTML文档

2 HTML文档基本结构

HTML文档是一种树形层次结构。html、head、body标记，及其结束

标记，是必有的标记，组成了基本的HTML文档。

html和/html标记是文档的根，其他的HTML标记全部包括在html和

/html之内，即html是开始标记，/html是结束标记，它们分别是网页的第一个标记和最后一个标记，其他所有html代码都位于这两个标记之间，html标记告诉浏览器或其他程序：这是一个网页文档，应该按照html语言规

则对标记进行解释。

head和/head