2023年网页精品讲义设计方案1.pdf

《2023年网页精品讲义设计方案1.pdf》由会员分享，可在线阅读，更多相关《2023年网页精品讲义设计方案1.pdf（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-1-*学院 教 案 系部 课 程 名 称 授 课 班 级 主 讲 教 师 总课时 -2-第一章 网页和网站建设的基础知识 教学目标 1掌握 HTML 的基本知识及作用；2掌握安装和配置 IIS 的方法；3熟悉 Dreamweaver 的工作界面；4掌握创建和设置 Dreamweaver 站点的方法。教学重点 1HTML 语言；2熟悉 Dreamweaver 的工作界面；3创建本地站点。教学难点 HTML 的基本知识 教学时间 4 课时（2 节理论课，2 节实验课）教学过程 1.1 网页的基础知识 一、网页 1、网页的概念：网页是网站的基本组成元素。网页文件的扩展名通常为.htm 或.html

2、。一般是由 HTML 语言编写的文本文件。2、网页的实质 网页文档本身是一个文本文件，这些文本能够将文字及其他媒体文件有机的组织在一起，在浏览器中合适地显示。二、HTML 1、Html 的中文含义 Html 是 Hypertext Markup Language 的缩写，中文含义是“超文本标记语言”。2、Html 的概念 它是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现WEB 页面。3、网页文档的组成 一个 HTML 文档通常分为文档头和文档主体两部分。三、标记 1、标记的格式-3-在 HTML 中定义了许多标记，这些标记用来描述文档。这些标记使用“”括起来。标记通常分为开始标

3、记和结束标记。其格式为：标记内容 注意：若一个标记有多个属性，属性和属性之间要用空格隔开。示例：简单的网页文档 我的第一个网页 这是我的第一个网页 欢迎大家 2、常用标记 标记一个 HTML 文档的开始和结束。Html 文档的所有 内容就书写在这两个标记之间。用于标记文当首部的开始和结束，首部通常包括网页 标题、创作信息等内容，在浏览网页时不会在浏览器窗口内显示。和 用于设置网页的标题。该标记中不能包含其它标记，且 只能在标记中出现一次。当浏览网页时，网页的标题会出现在浏览器窗 口的标题处。和 标记是主体标记，该标记包含在 Html 标记内。文档主 体包括了网页显示的内容，如文字、链接、图像、

4、表格和其它对象。和 标记一个段落的开始和结束。和 说明其后的文字是一级标题。注释标记。说明：（1）每个标记在标识名以外还可以包含一个或多个“属性”，用于控制标-4-记内容的大小、颜色、位置、边框等。例如：“bgcolor=blue”就是 body 标记的一个属性，进一步说明网页的背景色为蓝色。（2）如果一个标记有多个属性，中间要用空格隔开。3、标记的常用属性 属性名 作用 Background 用图像设置网页背景 Bgcolor 设置网页的背景颜色 Text 设置网页中所有文本的颜色 Link 设置超文本链接尚未访问时文本的颜色，默认为蓝色 Vlink 设置超文本链接已经访问后 四、网页的基本

5、元素 网页中包括的元素主要有文本、图像、视频、声音、动画、表格、表单等。1、网站 LOGO Logo 的中文含义是标志、标识，在网页设计中，Logo 常作为公司或站点的标识出现，起着非常重要的作用，集中体现了这个网站的文化内涵和内容定位。2、网站 Banner Banner 的中文含义是横幅、标语，通常被称为网络广告。3、导航栏 导航栏实质上是一组超链接，通过这组超链接可浏览整个网站的其他页面。4、文本 文本作为人类最重要的信息载体的交流工具，是最重要的网页元素之一。与图像、动画等其他网页元素相比，文本不易在第一时间吸引浏览者的注意，但文本能够更加准确详细地表达网页信息内容和含义，是对其他网页

6、元素的补充。5、图像 图像在网页中起着非常重要的作用，适当的图像能够为网页增添生动性和活泼性，不仅丰富网页内容、提供更多的信息，还能给浏览者视觉上的美感。6、动画 动画能够形象生动地表现事物的变化发展过程，增加网页的动态效果，使网-5-站更加生动有趣，因此，动画已经成为现代网站中不可缺少的元素之一。7、表单 表单实质上是一个服务器程序，用户可以在网页上的表单域中输入文本或数据，提交表单，该表单程序在服务器上执行，并将执行结果反馈到相应的页面上，从而实现了用户与网站之间的交互。1.2 网站建设的基础知识 一、网站 网站是许多相关网页有机结合而形成的一个信息服务中心。网站的设计者将要提供的内容和服

7、务制作成许多个网页，并且经过组织规划，让网页互相链接，然后把相关文件存放在 WEB 服务器的一个文件夹中。这样一个文件夹就是一个网站。二、主页 当用户没有指定网页文件名时，网站的默认显示的网页。主页文件名通常为index.htm、index.html、default.htm。三、IIS 1、IIS 的含义 IIS（Internet Information Server，互联网信息服务）是一种 Web（网页）服务组件，其中包括 Web 服务器、FTP 服务器、NNTP 服务器和 SMTP 服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包括互联网和局域网）上发布信息成

8、了一件很容易的事。2、IIS 的运行环境 IIS 通常运行在 WINDOWS 的 SERVER 版本上，可支持大量用户的访问。在WINDOWS XP professional 中，IIS 组件主要用于开发测试，不适宜大量用户的访问。另外，在 WINDOWS XP 的家庭版中未提供 IIS 组件。1.3 网页制作软件 一、启动 Dreamweaver 的方法 1、从“开始”菜单 2、双击桌面上的快捷方式 二、Dreamweaver 的工作界面；-6-文档窗口：“文档”窗口显示当前文档。可以选择设计视图、代码视图、拆分代码视图、代码和设计视图之一进行网页的编辑和开发。当“文档”窗口处于最大化状态（

9、默认值）时，“文档”窗口顶部会显示选项卡，上面显示了所有打开的文档的文件名。如果尚未保存已做的更改，则 Dreamweaver 会在文件名后显示一个星号。若要切换到某个文档，单击其选项卡即可。三、网页开发平台 早期的网页制作，网页设计师要通过手工编写 HTML 代码来实现，开发效率非常低。网页开发平台的出现，使得这些复杂代码的编写变得十分容易。在这些网页开发平台中，只需要点点鼠标，软件就能帮助用户书写出相应代码，即使不懂得 HTML，也能制作出漂亮的网页来。Dreamweaver 就是一种网页开发平台，其最新版本就是 Adobe Dreamweave。该软件同时适用于初学者和专业网页设计师，是

10、一款优秀的“所见即所得”的可视化网页编辑软件。另外，FrontPage 也是一款常用的网页开发平台，它是由微软公司开发的，适合于初学者。四、网页制作辅助工具 1、图像处理工具-Photoshop Photoshop 软件一直是图像处理软件的龙头老大，它不仅能创造出不朽的计算机图形艺术，而且为网页图像制作提供了强大的支持，现在已经成为使用最为广泛的网页图像处理软件。2、动画制作工具-FLASH FALSH 是目前网络上最为流行的矢量动画设计制作软件，在网页动画制作中有广泛应用。-7-1.4 创建 Dreamweaver站点 一、站点 1站点的含义 在 Dreamweaver 中，术语“站点”指属

11、于某个 Web 站点的文档的本地或远程存储位置。Dreamweaver 站点提供了一种方法，使您可以组织和管理您所有的 Web 文档，将您的站点上传到 Web 服务器，跟踪和维护您的链接以及管理和共享文件。应定义一个站点以充分利用 Dreamweaver 的功能。2站点的类型 Dreamweaver 站点由三个部分（或文件夹）组成，具体取决于开发环境和所开发的 Web 站点类型：（1）本地根文件夹 存储您正在处理的文件。Dreamweaver 将此文件夹称为“本地站点”。此文件夹可以位于本地计算机上，也可以位于网络服务器上。如果您直接在服务器上工作，每次您保存文件时 Dreamweaver 都

12、会将文件上传到服务器。（2）远程文件夹 存储用于测试、生产和协作等用途的文件。Dreamweaver 在“文件”面板中将此文件夹称为“远程站点”。远程文件夹通常在运行 Web 服务器的计算机上。3本地根文件夹和远程文件夹的关系 本地文件夹和远程文件夹使网站开发者能够在本地硬盘和 Web 服务器之间传输文件，便于轻松管理 Dreamweaver 站点中的文件。二、创建本地站点的步骤 1、创建本地站点的注意事项：（1）第一步必须先在本地计算机的磁盘上建立一个文件夹。（作为本地站点的根文件夹）提示：为了方便以后管理站点上的文件，先在本地文件夹中创建几个目录：htm、img、others，分别存放网页

13、设计中用到的资源及网页文件。（2）建立本地站点，选择主菜单中的“站点”“新建站点”命令，在弹出的新建站点对话框进行设置。2、新建站点的操作步骤：第一步：选择菜单中的“站点”“新建站点”命令，如图所示：-8-在弹出的对话框中选择“基本”选项卡，出现定义站点向导，如下图所示：第二步：单击“下一步”按钮，询问是否要使用服务器技术，选择“否”选项（表示目前该站点是一个静态站点，没有动态页即不使用 Web 应用程序：如 ASP、JavaServer Page JSP）-9-第三步：单击“下一步”按钮，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选项，然后指定本地机磁盘上的一个文件夹

14、储存站点文件（包括网页文件及设计网页用到的其它资源）第四步：单击“下一步”按钮，在弹出的对话框中设置如何连接到远程服务器，单击下拉菜单，选择“无”。如下图所示：-10-第五步：单击“下一步”按钮，弹出如下图设置概要。单击“完成”按钮，完成设置。思考：如何使用高级模式创建或设置站点？本章小结 本章主要介绍了网页的概念、标记的应用及书写格式还有网页的基本组成元素，网页中常用术语的含义，IIS 的含义和站点的配置，讲解了 Dreamweaver 的启动方法，界面的组成及常用部分的含义，并介绍了使用向导创建站点的方法步骤。本章作业 1、总结网页的概念及网页的实质？2、列举 Dreamweaver 中常用标记及其含义？3、尝试使用菜单对面板组进行设置。