网页设计基础教程

ASP,动态网站开发教程,(,第三版,),第,02,章 网页设计基础,掌握,HTML,语言是制作网页的基础。,HTML,文件包含了所有显示在网页中的内容信息，例如文本的位置，网页的显示模式以及网页图片、动画和声音等资源的设置。本章将通过介绍,HTML,语言的各种标记和语法，介绍制作网页的基础知识。,教学重点与难点,了解使用,HTML,语言设计静态网页的方法,掌握编辑网页文本格式的方法,掌握创建超链接的方法,掌握表格和列表的使用方法,2.1,认识网页,网页是用一种叫做,HTML,的标记语言来表示的，它将要表示的信息语言用,HTML,表述出来，这就形成了,HTML,代码。而浏览器的主要工作就是将这些标记语言“翻译”过来，并按照定义的格式显示，这就是最终看到的网页,。,网页的基础知识,网页的基本结构,Internet,是从,Interconnected Networks,延伸而来的，是跨国界的网络。,Internet,把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项目。在,Internet,中，网页是它的重要组成部分，本节首先介绍一些与网页相关的名词和概念。,2.1.1,网页的基础知识,HTML,文件通常由,3,部分组成，即起始标记、网页标题和文件主体。其中，文件主体是,HTML,文件的主要部分与核心内容，它包括文件所有的实际内容与绝大多数的标记符号。,在,HTML,文本中，有一些固定的标记要放在每一个,HTML,文件里。,HTML,文件的总体结构如下所示：,网页的标题及属性,文件主体,2.1.2,网页的基本结构,2,.,2,创建网页,本节将通过简单的操作实例，详细介绍在,Windows,系统附带的记事本中，通过输入,HTML,代码创建网页的方法。,编辑网页正文,插入网页图像,建立超链接,正文是网页的核心内容，用户可使用,HTML,语言在网页内对正文进行划分段落、插入标题、修改字体、设置字号等操作。另外，,HTML,还允许对正文应用不同的字形和效果。,2,.,2.1,编辑网页正文,制作网页时，常需要在页面上添加一些图片，因为有时“一图胜千言”。,HTML,语言提供了,标记来处理图像的输出。本节将介绍在网页内插入图像文件，设置图像链接的方法，以及通过运用,HTML,标记改变图像的显示尺寸与对齐方式等。,2,.,2.2,插入网页图像,超链接一般可分为外部链接,(External Link),与内部链接,(Internal Link),。单击外部链接时，浏览器窗口将显示其他文档的内容；单击内部链接时，访问者将看到网页的其他部分并显示在当前浏览器窗口中。另外，,HTML,还可以创建指向邮件地址的链接，单击该链接后便可通过电子邮件软件给指定的地址发送邮件 。,2,.,2.3,建立超链接,2.3,设置网页,本节将通过几个简单的实例，详细介绍通过修改,HTML,网页代码，在网页中设置表格、框架、列表、表单、,CSS,样式和动态,HTML,的方法,。,在页面中使用表格,在页面中使用框架,在页面中使用列表,在页面中使用表单,使用动态,HTML(DHTML),表格对于制作网页是很重要的，现在很多网页都是使用多重表格。主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地设置背景和前景颜色。,表格由,标记开始，,标记结束，表格的内容由,标记和,标记定义。,标记说明表格的一个行，表格有多少行就有多少个,标记；,标记则设定一个单元格来填充表格,。,2,.,3.1,在页面中使用表格,框架网页把浏览器窗口切割成几个独立的部分，打开的链接目标文件只占用浏览器窗口的某个区域，该区域就是框架网页的目标框架。框架网页的出现，使得访问者在浏览器窗口中可同时观察多个网页 。,设计框架网页时，,标记和,标记用于定义框架网页的结构。由于框架网页的出现，从根本上改变了,HTML,文档的传统结构，因此在出现,标记的文档中，将不再使用,标记，包含框架网页的,HTML,文档的基本结构为：,其中，,URL,用于确定在框架网页内显示的网页文件的地址,。,2.3.2,在页面中使用框架,使用列表能够有效地表达出具有并列、排序关系的网页内容，为访问者阅读网页提供方便。,HTML,为用户提供了编号列表、符号列表与自定义列表,3,种形式。通过上述列表的相互嵌套，还可以进一步丰富列表的表现方式,。,2.3.3,在页面中使用列表,使用编号列表,使用符号列表,自定义列表,定义嵌套列表,2.3.4,在页面中使用表单,在,Web,网页中，表单用来给供访问者填写信息，从而使管理员能获得访问者信息，使网页具有交互功能。表单设计在,HTML,文档中，当用户填写完信息后做提交,(submit),操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的,ASP,或,PHP,等处理程序处理后，再将用户所需信息返回到客户端的浏览器上，这样网页就具有了交互性。,网页内的表单由表单标记,定义，使用,标记意味着表单的开始，而,标记符号则意味着表单的结束。由于表单通常用于收集站点访问者的信息，因此在表单的内部必须出现输入标记,，用于收集表单数据。表单标记的基本结构如下所示：,2.3.5,使用动态,HTML(DHTML),使用,DHTML,技术，可通过浏览器技术、客户端脚本技术和,CSS,样式表生成变化缤纷的动态页面。,DHTML,是,Dynamic HTML(,动态,HTML),的简称，它是一种即使在脱离网络环境的情况下，网页装载到浏览器后仍然能够随时变换内容的技术。例如，当鼠标指针移至文章段落中，段落能变成醒目的红色或蓝色；在网页的页面上，随机地漂浮着一些漂亮的小标志；网页横幅不断地滑动或具有滚动闪亮的效果等。,DHTML,之所以能够制作出“动感”的效果，首先是因为,DHTML,将网页中的每个元素划分成了许多独立的对象，通过,CSS,来指定这些对象的属性。,CSS,是,DHTML,网页进行改变的对象，网页中的各种变化都是通过脚本语言设置,CSS,的属性来实现的。因此可以说,CSS,是编写,DHTML,网页的基础 。,