《2网络-网页设计上)-李茵.pptVIP

第2章 网页制作 第8章 网页设计与制作 (上) 概述 ■网页的基本概念 是一个纯文本文件，以html或htm作为扩展名 通过html标记将文字、图片等信息组织在一起 在浏览器上呈现出一幅幅画面 ■网页的基本组成 文字:文字是网页的主体 图像:使网页更形象生动(JPEG和GIF格式) 超级链接:链接其他网站或网页 表格、表单、视频和音频、其他网页元素 概述 ■网页制作语言之一 利用HTML语言所定义的标记及其属性来编写一个文本文件。用htm或html作为文件的扩展名。 ■网页制作软件 文本编辑工具; 专业网页制作软件，FrontPage、Dreamweaver等; 一些图像处理软件，如PhotoShop等. 构成网页的基本元素 TITLE标记 Hn标记 pre预格式化文本标记 BR和P标记 B I U S STRONG标记 FONT标记 如何使用填充、间距属性 * border(边框的厚度) cellpadding (单元格填充) cellspacing (单元格间距) 查看源代码 TABLE border=20 cellpadding=30 cellspacing=40 bordercolor=red …… /TABLE Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 如何设置表格的填充属性 * TABLE cellspacing=“5” cellpadding=“10” border=“1 background=images/type_back.jpg TR TD colspan=6nbsp;/TD /TR TR bgcolor=#EBEFFF TD colspan=3 align=center 笔记本电脑/TD TD colspan=3 align=center 办公设备、文具、耗材/TD /TR …. /TABLE cellspacing属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离 查看源代码 填充之后的效果 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 小结2 编写如下图所示效果对应的HTML代码 * 表格的高度、宽度、背景图像、边框和填充属性 行的背景色 单元格居中对齐 练习答案 练习代码 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 如何实现图文内容的布局，达到如左图所示页面的效果？ 分析上图所示页面，应该用什么进行布局？ * 什么是表格布局 使用表格进行布局 用表格对网页的内容进行整体控制 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 如何使用表格进行布局 * 使用表格布局下图，需要几行几列？ 需要7行2列 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 如何使用表格进行布局 * TABLE width=298 TR TD colspan=2IMG src=images/adv.jpg //TD /TR TR TD width=“122” rowspan=“6” align=“left” IMG src=images/wangyou.jpg width=116 height=142 //TD TD width=“285” A href=“#”超值变形金钢2.5折!/A /TD /TR TR TDA href=#人们为啥对电视吼叫 /A/TD /TR …… /TABLE 查看源代码 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright