网页设计基础教程.pptx

《网页设计基础教程.pptx》由会员分享，可在线阅读，更多相关《网页设计基础教程.pptx（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、ASPASP动态网站开发教程动态网站开发教程(第三版第三版)第第02章章 网页设计基础网页设计基础 掌握掌握HTMLHTML语言是制作网页的基础。语言是制作网页的基础。HTMLHTML文件包含了所有显示在网页中文件包含了所有显示在网页中的内容信息，例如文本的位置，网页的显示模式以及网页图片、动画和声音等的内容信息，例如文本的位置，网页的显示模式以及网页图片、动画和声音等资源的设置。本章将通过介绍资源的设置。本章将通过介绍HTMLHTML语言的各种标记和语法，介绍制作网页的语言的各种标记和语法，介绍制作网页的基础知识。基础知识。ASPASP动态网站开发教程动态网站开发教程(第三版第三版)教学重点

2、与难点教学重点与难点uu 了解使用了解使用HTMLHTML语语言言设计设计静静态态网网页页的方法的方法uu 掌握掌握编辑编辑网网页页文本格式的方法文本格式的方法 uu 掌握掌握创创建超建超链链接的方法接的方法 uu 掌握表格和列表的使用方法掌握表格和列表的使用方法 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)2.1认识网页认识网页 网页是用一种叫做网页是用一种叫做HTMLHTML的标记语言来表示的，它将要表示的信息语言用的标记语言来表示的，它将要表示的信息语言用HTMLHTML表述出来，这就形成了表述出来，这就形成了HTMLHTML代码。而浏览器的主要工作就是将这些标代码。而浏

3、览器的主要工作就是将这些标记语言记语言“翻译翻译”过来，并按照定义的格式显示，这就是最终看到的网页过来，并按照定义的格式显示，这就是最终看到的网页。uu 网页的基础知识网页的基础知识 uu 网页的基本结构网页的基本结构 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)InternetInternet是是从从Interconnected Interconnected NetworksNetworks延延伸伸而而来来的的，是是跨跨国国界界的的网网络络。InternetInternet把把世世界界各各地地数数以以千千万万计计的的计计算算机机和和传传输输线线路路连连接接在在一一起起构构成成

4、一一个个网网络络。通通过过它它可可以以交交换换信信息息、共共享享资资源源，并并以以此此为为基基础础实实现现各各种种计计算算机机通通信信应应用用项项目目。在在InternetInternet中中，网网页页是是它它的的重重要要组组成成部部分分，本本节节首首先先介介绍绍一一些些与与网网页页相相关关的的名名词和概念。词和概念。2.1.1 网页的基础知识网页的基础知识 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)HTMLHTML文件通常由文件通常由3 3部分组成，即起始标记、网页标题和文件主体。其中，部分组成，即起始标记、网页标题和文件主体。其中，文件主体是文件主体是HTMLHTML文件

5、的主要部分与核心内容，它包括文件所有的实际内容与文件的主要部分与核心内容，它包括文件所有的实际内容与绝大多数的标记符号。绝大多数的标记符号。在在HTMLHTML文本中，有一些固定的标记要放在每一个文本中，有一些固定的标记要放在每一个HTMLHTML文件里。文件里。HTMLHTML文文件的总体结构如下所示：件的总体结构如下所示：网页的标题及属性网页的标题及属性文件主体文件主体 2.1.2 网页的基本结构网页的基本结构 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)2.2 创建网页创建网页 本节将通过简单的操作实例，详细介绍在本节将通过简单的操作实例，详细介绍在WindowsWind

6、ows系统附带的记事本中，系统附带的记事本中，通过输入通过输入HTMLHTML代码创建网页的方法。代码创建网页的方法。uu 编辑网页正文编辑网页正文 uu 插入网页图像插入网页图像uu 建立超链接建立超链接 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)正文是网页的核心内容，用户可使用正文是网页的核心内容，用户可使用HTMLHTML语言在网页内对正文进行划分语言在网页内对正文进行划分段落、插入标题、修改字体、设置字号等操作。另外，段落、插入标题、修改字体、设置字号等操作。另外，HTMLHTML还允许对正文应还允许对正文应用不同的字形和效果。用不同的字形和效果。2.2.1 编辑网页

7、正文编辑网页正文 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)制作网页时，常需要在页面上添加一些图片，因为有时制作网页时，常需要在页面上添加一些图片，因为有时“一图胜千言一图胜千言”。HTMLHTML语言提供了语言提供了标记来处理图像的输出。本节将介绍在网页内插入图标记来处理图像的输出。本节将介绍在网页内插入图像文件，设置图像链接的方法，以及通过运用像文件，设置图像链接的方法，以及通过运用HTMLHTML标记改变图像的显示尺寸标记改变图像的显示尺寸与对齐方式等。与对齐方式等。2.2.2 插入网页图像插入网页图像 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)超链接

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

9、送邮件邮件 。2.2.3 建立超链接建立超链接 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)2.3 设置网页设置网页 本节将通过几个简单的实例，详细介绍通过修改本节将通过几个简单的实例，详细介绍通过修改HTMLHTML网页代码，在网页网页代码，在网页中设置表格、框架、列表、表单、中设置表格、框架、列表、表单、CSSCSS样式和动态样式和动态HTMLHTML的方法的方法 。uu 在页面中使用表格在页面中使用表格 uu 在页面中使用框架在页面中使用框架 uu 在页面中使用列表在页面中使用列表 u 在页面中使用表单在页面中使用表单 uu 使用动态使用动态HTML(DHTML)HTML

10、(DHTML)ASPASP动态网站开发教程动态网站开发教程(第三版第三版)表表格格对对于于制制作作网网页页是是很很重重要要的的，现现在在很很多多网网页页都都是是使使用用多多重重表表格格。主主要要是是因因为为表表格格不不但但可可以以固固定定文文本本或或图图像像的的输输出出，而而且且还还可可以以任任意意地地设设置置背背景景和和前前景景颜色。颜色。表表格格由由标标记记开开始始，标标记记结结束束，表表格格的的内内容容由由标标记记和和标标记记定定义义。标标记记说说明明表表格格的的一一个个行行，表表格格有有多多少少行行就就有有多多少少个个标记；标记；标记则设定一个单元格来填充表格标记则设定一个单元格来填充

11、表格。2.3.1 在页面中使用表格在页面中使用表格 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)框架网页把浏览器窗口切割成几个独立的部分，打开的链接目标文件只占框架网页把浏览器窗口切割成几个独立的部分，打开的链接目标文件只占用浏览器窗口的某个区域，该区域就是框架网页的目标框架。框架网页的出现，用浏览器窗口的某个区域，该区域就是框架网页的目标框架。框架网页的出现，使得访问者在浏览器窗口中可同时观察多个网页使得访问者在浏览器窗口中可同时观察多个网页 。设计框架网页时，设计框架网页时，标记和标记和标记用于定义框架网页的标记用于定义框架网页的结构。由于框架网页的出现，从根本上改变了结构

12、。由于框架网页的出现，从根本上改变了HTMLHTML文档的传统结构，因此在文档的传统结构，因此在出现出现标记的文档中，将不再使用标记的文档中，将不再使用标记，包含框架网页的标记，包含框架网页的HTMLHTML文档的基本结构为：文档的基本结构为：其中，其中，URLURL用于确定在框架网页内显示的网页文件的地址用于确定在框架网页内显示的网页文件的地址。2.3.2 在页面中使用框架在页面中使用框架 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)使用列表能够有效地表达出具有并列、排序关系的网页内容，为访问者阅读网使用列表能够有效地表达出具有并列、排序关系的网页内容，为访问者阅读网页提供方

13、便。页提供方便。HTMLHTML为用户提供了编号列表、符号列表与自定义列表为用户提供了编号列表、符号列表与自定义列表3 3种形式。种形式。通过上述列表的相互嵌套，还可以进一步丰富列表的表现方式通过上述列表的相互嵌套，还可以进一步丰富列表的表现方式。2.3.3 在页面中使用列表在页面中使用列表 uu 使用编号列表使用编号列表 uu 使用符号列表使用符号列表 uu 自定义列表自定义列表 uu 定义嵌套列表定义嵌套列表 ASPASP动态网站开发教程动态网站开发教程(第三版第三版)2.3.4 在页面中使用表单在页面中使用表单 在在WebWeb网页中，表单用来给供访问者填写信息，从而使管理员能获得访问网

14、页中，表单用来给供访问者填写信息，从而使管理员能获得访问者信息，使网页具有交互功能。表单设计在者信息，使网页具有交互功能。表单设计在HTMLHTML文档中，当用户填写完信息文档中，当用户填写完信息后做提交后做提交(submit)(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的经过服务器上的ASPASP或或PHPPHP等处理程序处理后，再将用户所需信息返回到客户等处理程序处理后，再将用户所需信息返回到客户端的浏览器上，这样网页就具有了交互性。端的浏览器上，这样网页就具有了交互性。网页内的表单由表单标记网页内

15、的表单由表单标记定义，使用定义，使用标记意味着表单的开标记意味着表单的开始，而始，而标记符号则意味着表单的结束。由于表单通常用于收集站点访标记符号则意味着表单的结束。由于表单通常用于收集站点访问者的信息，因此在表单的内部必须出现输入标记问者的信息，因此在表单的内部必须出现输入标记，用于收集表单数，用于收集表单数据。表单标记的基本结构如下所示：据。表单标记的基本结构如下所示：ASPASP动态网站开发教程动态网站开发教程(第三版第三版)2.3.5 使用动态使用动态HTML(DHTML)使用使用DHTMLDHTML技术，可通过浏览器技术、客户端脚本技术和技术，可通过浏览器技术、客户端脚本技术和CSS

16、CSS样式表生样式表生成变化缤纷的动态页面。成变化缤纷的动态页面。DHTMLDHTML是是Dynamic HTML(Dynamic HTML(动态动态HTML)HTML)的简称，它是一种即使在脱离网络的简称，它是一种即使在脱离网络环境的情况下，网页装载到浏览器后仍然能够随时变换内容的技术。例如，当环境的情况下，网页装载到浏览器后仍然能够随时变换内容的技术。例如，当鼠标指针移至文章段落中，段落能变成醒目的红色或蓝色；在网页的页面上，鼠标指针移至文章段落中，段落能变成醒目的红色或蓝色；在网页的页面上，随机地漂浮着一些漂亮的小标志；网页横幅不断地滑动或具有滚动闪亮的效果随机地漂浮着一些漂亮的小标志；网页横幅不断地滑动或具有滚动闪亮的效果等。等。DHTML DHTML之所以能够制作出之所以能够制作出“动感动感”的效果，首先是因为的效果，首先是因为DHTMLDHTML将网页中将网页中的每个元素划分成了许多独立的对象，通过的每个元素划分成了许多独立的对象，通过CSSCSS来指定这些对象的属性。来指定这些对象的属性。CSS CSS是是DHTMLDHTML网页进行改变的对象，网页中的各种变化都是通过脚本语网页进行改变的对象，网页中的各种变化都是通过脚本语言设置言设置CSSCSS的属性来实现的。因此可以说的属性来实现的。因此可以说CSSCSS是编写是编写DHTMLDHTML网页的基础网页的基础 。