网页设计基础教程.pptVIP

30十一月2025网页设计基础教程

教学重点与难点了解使用HTML语言设计静态网页的方法掌握编辑网页文本格式的方法掌握创建超链接的方法掌握表格和列表的使用方法

2.1认识网页网页是用一种叫做HTML的标记语言来表示的，它将要表示的信息语言用HTML表述出来，这就形成了HTML代码。而浏览器的主要工作就是将这些标记语言“翻译”过来，并按照定义的格式显示，这就是最终看到的网页。网页的基础知识网页的基本结构

Internet是从InterconnectedNetworks延伸而来的，是跨国界的网络。Internet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项目。在Internet中，网页是它的重要组成部分，本节首先介绍一些与网页相关的名词和概念。2.1.1网页的基础知识

HTML文件通常由3部分组成，即起始标记、网页标题和文件主体。其中，文件主体是HTML文件的主要部分与核心内容，它包括文件所有的实际内容与绝大多数的标记符号。在HTML文本中，有一些固定的标记要放在每一个HTML文件里。HTML文件的总体结构如下所示： Html Head 网页的标题及属性 /Head Body 文件主体 /Body /Html2.1.2网页的基本结构

2.2创建网页本节将通过简单的操作实例，详细介绍在Windows系统附带的记事本中，通过输入HTML代码创建网页的方法。编辑网页正文插入网页图像建立超链接

正文是网页的核心内容，用户可使用HTML语言在网页内对正文进行划分段落、插入标题、修改字体、设置字号等操作。另外，HTML还允许对正文应用不同的字形和效果。2.2.1编辑网页正文

制作网页时，常需要在页面上添加一些图片，因为有时“一图胜千言”。HTML语言提供了Img标记来处理图像的输出。本节将介绍在网页内插入图像文件，设置图像链接的方法，以及通过运用HTML标记改变图像的显示尺寸与对齐方式等。2.2.2插入网页图像

超链接一般可分为外部链接(ExternalLink)与内部链接(InternalLink)。单击外部链接时，浏览器窗口将显示其他文档的内容；单击内部链接时，访问者将看到网页的其他部分并显示在当前浏览器窗口中。另外，HTML还可以创建指向邮件地址的链接，单击该链接后便可通过电子邮件软件给指定的地址发送邮件。2.2.3建立超链接

2.3设置网页本节将通过几个简单的实例，详细介绍通过修改HTML网页代码，在网页中设置表格、框架、列表、表单、CSS样式和动态HTML的方法。在页面中使用表格在页面中使用框架在页面中使用列表在页面中使用表单使用动态HTML(DHTML)

表格对于制作网页是很重要的，现在很多网页都是使用多重表格。主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地设置背景和前景颜色。表格由Table标记开始，/Table标记结束，表格的内容由Tr标记和Td标记定义。Tr标记说明表格的一个行，表格有多少行就有多少个Tr标记；Td标记则设定一个单元格来填充表格。2.3.1在页面中使用表格

框架网页把浏览器窗口切割成几个独立的部分，打开的链接目标文件只占用浏览器窗口的某个区域，该区域就是框架网页的目标框架。框架网页的出现，使得访问者在浏览器窗口中可同时观察多个网页。设计框架网页时，Frame标记和Frameset标记用于定义框架网页的结构。由于框架网页的出现，从根本上改变了HTML文档的传统结构，因此在出现Frameset标记的文档中，将不再使用Body标记，包含框架网页的HTML文档的基本结构为： Html Head…/Head Frameset…/Frameset FrameSrc=URL /Html其中，URL用于确定在框架网页内显示的网页文件的地址。2.3.2在页面中使用框架

使用列表能够有效地表达出具有并列、排序关系的网页内容，为访问者阅读网页提供方便。HTML为用户提供了编号列表、符号列表与自定义列表3种形式。通过上述列表的相互嵌套，还可以进一步丰富列表的表现方式。