第2章 网页设计基础

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