2012网络-网页设计(上)-李茵课件.ppt

第2章 网页制作 第8章 网页设计与制作 (上) 概述 ■网页的基本概念 是一个纯文本文件，以html或htm作为扩展名 通过html标记将文字、图片等信息组织在一起 在浏览器上呈现出一幅幅画面 ■网页的基本组成 文字:文字是网页的主体 图像:使网页更形象生动(JPEG和GIF格式) 超级链接:链接其他网站或网页 表格、表单、视频和音频、其他网页元素 概述 ■网页制作语言之一 利用HTML语言所定义的标记及其属性来编写一个文本文件。用htm或html作为文件的扩展名。 ■网页制作软件 文本编辑工具; 专业网页制作软件，FrontPage、Dreamweaver等; 一些图像处理软件，如PhotoShop等. 构成网页的基本元素 TITLE标记 Hn标记 pre预格式化文本标记 BR和P标记 B I U S STRONG标记 FONT标记 总结 表单中提交数据的方法有那两种及其区别？ 表单里有哪些常用的表单元素？ 创建一个框架页面至少需要哪两个标签？ target设定目标资源所要显示的窗口，其取值可以为哪些？ 简述创建一个多框架页面所需的主要步骤。 * * 讲解要点： * 讲解要点： * 讲解要点： * 讲解要点： * 讲解要点： * 讲解要点： * 讲解要点： * 讲解要点： 创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。用“所见所得”网页制作软件如Dreamweaver或 FrontPage你可以不费吹灰之力编写HTML文件。要是你没学过网页制作软件，你可以用文本编辑器（几乎每台电脑都自带的）就可以编写HTML文件。为了学好HTML教程，我们强烈建议你用文本编辑器编写HTML文件。 EM代表的是四号字体 超文本链接指针是HTML最吸引人的优点之一。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力。超文本链接指针是指把并不连续的两段文字或两个文件联系起来。 * 讲解要点： * 讲解要点： 如何使用填充、间距属性 * border(边框的厚度) cellpadding (单元格填充) cellspacing (单元格间距) 查看源代码 TABLE border=20 cellpadding=30 cellspacing=40 bordercolor=red …… /TABLE 如何设置表格的填充属性 * 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属性用来设置表格内填充距离 查看源代码 填充之后的效果 小结2 编写如下图所示效果对应的HTML代码 * 表格的高度、宽度、背景图像、边框和填充属性 行的背景色 单元格居中对齐 练习答案 练习代码 如何实现图文内容的布局，达到如左图所示页面的效果？ 分析上图所示页面，应该用什么进行布局？ * 什么是表格布局 使用表格进行布局 用表格对网页的内容进行整体控制 如何使用表格进行布局 * 使用表格布局下图，需要几行几列？ 需要7行2列 如何使用表格进行布局 * 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 查看源代码 小结3 编写如下图所示效果对应的html代码 * 跨2行，并放了一副图片 此单元格放了一副图片 此单元格跨了3列 练习答案 练习代码 * 总结 创建表格最少需要那三个标记？ 简述表格的基本结构。