第2章网页设计基础.ppt

第2章 网页设计基础 2.1 HTML和XHTML标记语言 2.1 HTML和XHTML标记语言 2.1 HTML和XHTML标记语言 2.1 HTML和XHTML标记语言 2.1 HTML和XHTML标记语言 2.1 HTML和XHTML标记语言 2.1 HTML和XHTML标记语言 2.1 HTML和XHTML标记语言 2.2 在Visual Studio中设计网页 2.2 在Visual Studio中设计网页 2.2 在Visual Studio中设计网页 2.3 样式控制 2.3 样式控制 2.3 样式控制 2.3 样式控制 2.3 样式控制 2.3 样式控制 2.3 样式控制 2.3 样式控制 2.3 样式控制 2.4 页面布局 2.4 页面布局 2.4 页面布局 2.4 页面布局 * 本章讲述的主要内容 2.1 HTML和XHTML标记语言 2.2 在Visual Studio中设计网页 2.3 样式控制 2.4 页面布局 2.1.1 HTML的基本格式 HTML文件中的标记符必须用“”和“”括起来，并且以“标记”开始，以“/标记”结束。其最基本的格式为： 标记内容/标记 标记 属性1=属性值1 属性2=属性值1 ……内容/标记 例如： title我的主页/title b欢迎光临初学者之家/b font size=3 color=red 字体属性示例/font 2.1.2 常用HTML标记 1. 文字和段落标记 2.1.2 常用HTML标记 2. 超链接标记 一个超文本链接由两部分组成，一是呈现在读者面前的超链接对象（通常是文字或图片）；另一部分是被指向的目标，它可以是同一文件的另一部分，也可以是一个不同的文件，还可以是动画、音乐、视频、程序文件等。 a标记的格式为： a href=URL地址 name=字符串 target=打开窗口方式热点文本/a 2.1.2 常用HTML标记 3. 插入和设置图片 使用图片标记img，可以将一幅图片添加到网页中。该标记的格式为： img src=图片文件名 alt=简要说明 width=图片的宽度 height=图片的高度 border=边框宽度 hspace=水平方向空白 vspace=垂直方向空白 / 各属性含义说明如下： src：指出包括路径在内的图片文件名，例如：images/0001.jpg。 alt：在浏览器尚未完全下载图片时，显示在图片位置的说明文字。 width和height：指定图片的宽度和高度，单位为像素值或百分比。 hspace和vspace：指定水平和垂直方向的空白像素值，以免文字太靠近图片。 2.1.2 常用HTML标记 4. 插入和设置表格 2.1.3 XHTML的基本格式 2.1.4 常用XHTML标记 标记的style属性 标记 style=参数1: 值1; 参数2: 值2;……; 参数n: 值n 2. 文字和段落标记 XHTML保留了绝大多数HTML提供的字体和段落样式设置标记。如，b标记表示粗体，i标记表示斜体，u标记表示下划线，big和small标记分别表示大字体和小字体，s和strike标记表示带有单、双删除线的文字，sub和sup表示以下标或上标方式显示文字等。 2.1.4 常用XHTML标记 3. div和span标记 div是块级元素，以div标记开始，以/div标记结束。该标记用来定义页面中的一个特殊区域，区域内可包含文字、图片、表格或下级div等。使用div标记可方便的将若干页面元素组成一个集合，以方便统一设置集合的显示位置及所有元素的样式。 span标记也是一个块级元素，它与div标记的功能相似，也用来标记页面中一个特殊的区域。一般情况下对于较大的页面区域需要使用div进行定义，而span标记常被用在某段落或更小的区域中。 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.2