《第7章网页制作与编程基础知识讲解》由会员分享，可在线阅读，更多相关《第7章网页制作与编程基础知识讲解（97页珍藏版）》请在金锄头文库上搜索。
1、,第7章 网页制作与编程基础,本章学习目标： 了解常用网页制作工具，基本掌握其中一种 掌握HTML语言 初步掌握VBScript或JavaScript脚本语言 了解动态网页技术 初步掌握ASP与数据库应用,7.1 常用网页制作工具,随着Internet技术的不断发展，网页制作工具越来越多，选择一种好的工具非常重要，能够起到事半功倍的效果。网页制作工具大体上可以分为两类：着眼于网页、网站全局的，称之为基本工具；着眼于网页某些元素的，称之为辅助工具。 网页制作基本工具是指那些专门用来设计能在浏览器中显示为网页的HTML文档的专用工具软件，它能整合编排网页元素，生成HTML网页代码文件。比较流行的网
2、页制作工具软件包括Microsoft FrontPage和Macromedia Dreamweaver等。 网页制作辅助工具是指用来创建或加工网页上的图形、图像、动画、声音和视频等网页元素的工具软件。,7.1 常用网页制作工具,7.1.1 Microsoft FrontPage 2003,FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。 FrontPage的最强大之处是其站点管理与远程发布功能。用户只需在本地对网页进行编辑，FrontPage会跟踪用户编辑
3、过的文件，在发布时，它会自动将修改过的网页进行发布，未编辑过的网页可由用户决定是否再次向服务器发送。,7.1 常用网页制作工具,7.1.1 Microsoft FrontPage 2003,1FrontPage 2003的特色 (1)强大的网页设计功能 可以智能地完成HTML文本的编辑，并可以针对不同的浏览器对网页进行设置；可以提供对多种版本的浏览器的支持；完善了所见即所得的网页编辑操作。 (2)丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。,7.1 常用网页制作工具,7.1.1 M
4、icrosoft FrontPage 2003,3FrontPage 2003工作界面,7.1 常用网页制作工具,7.1.1 Microsoft FrontPage 2003,3FrontPage 2003工作界面,窗口栏的内容随着所选视图不同而不同。为了便于用户制作网页和查看、修改Web站点的组织结构，FrontPage 2003提供了6种视图。单击视图菜单相应的菜单项可以切换到不同的视图。各个视图的功能分别为：,“网页”视图：网页视图是进行网页编辑的操作界面。 “文件夹”视图：用来对网站的目录和文件夹进行管理。 “报表”视图：用于查看与网页制作有关的各项参数。 “远程网站”视图：可以发布整
5、个网站或个别文件，还可以在两个或更多个位置之间同步文件。 “导航”视图：用来显示和编辑网页的导航关系。 “超链接”视图：显示某个网页与其他网页之间的关系。 “任务”视图：用来查看网站和网页设计的完成情况。,7.1 常用网页制作工具,7.1.2 Adobe Dreamweaver CS3,使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使用Dreamweaver将是一种全新的体验。在易用、创新、规范等优点的基础上，Dreamweaver还拥有更先进的网页
6、布局和设计环境，以及更为强大的代码编辑功能等卓越特性。 Dreamweaver CS3的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检查器以及多个面板组，如图7-2所示。,7.1 常用网页制作工具,7.1.2 Adobe Dreamweaver CS3,图7-2 Dreamweaver CS3 的界面布局,7.1 常用网页制作工具,1标题栏(注意区别文档的标题和文档的文件名称) 2菜单栏 3插入栏 4文档工具栏 5“属性”检查器 6其他面板,7.1.2 Adobe Dreamweaver CS3,7.1 常用网页制作工具,7.1.3 网页美化工具,1Pho
7、toshop CS3 2Fireworks CS3 3Flash CS3,为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。,7.2 HTML语言,7.2.1 HTML语言概述,1什么是HTML HTML英文全名是Hyper Text Markup Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统（如UNIX、Windows等）。它主要是在原来文本文件的基础上，增加一系列的标识符来描述格式，形成网络文件。当用户使用浏览器下载时，就把这些标识符解释成应有的
8、含义，并按照一定的格式将这些被标识的文件显示在屏幕上，而HTML的标识符号并不显示在屏幕上。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构 (1)HTML文档的基本结构 下面是一个最基本的超文本文档的源代码, My first page 我的第一个网页 ,HTML文件由标记和被标记的内容组成。每个标记都有“”围住，以表示这是HTML代码而非普通文本，标记能产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，但总的表示形式却大同小异。,7.2 HTML语言,7.2.1 HTML语
9、言概述,2HTML文档的结构 (2)HTML的标记 单标签 某些标记称为“单标签”，它只需单独使用就能完整地表达意思。 这类标记的语法是： 最常用的单标签是, 它表示换行。 双标签 另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。 这类标记的语法是：受标记影响的内容 例如你想对某段文字的加粗显示，就将此段文字放在 标记中, 如：你要加粗的字,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构 (2)HTM
10、L的标记 标签属性 许多单标记和双标记的始标记内可以包含一些属性，标记要通过属性来制作出各种效果。 其语法是：受影响内容 需要注意的是，并不是所有的标记都有属性；根据需要可以用该标记的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有顺序。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构 (3)HTML的几个部分 HTML文件以开头，以结尾。浏览器解释网页代码的起始标志。HTML文件包括头部（head）和正文（body）。 1)head头部信息,：表示这是网页的题头部分，用来说明文件命名和与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、关键字、
11、使用软件等，个别的标记产生页面动作，第4行声明超文本头部分结束。在简单的网页中这部分不重要，而较复杂的网页中，比如：用CSS样式表、JavaScript语言等，这部分会相当重要。 ：网页的标题。标题概括了网页的内容，能迅速了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。 在网页的头部代码中，还有另外一种文头标记meta标记，基本语法是：。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构 (3)HTML的几个部分 2）body文档主体部分,：是网页的正文部分。HTM
12、L文件主体标记的格式为：。作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表7-1所示。,HTML代码在书写时不严格区分大小写，也并不要求在书写时缩进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内部的内容向右缩进几格。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构 (3)HTML的几个部分 2）body文档主体部分,表7-1 BODY标记属性值,7.2 HTML语言,7.2.1 HTML语言概述,3一个简单的HTML实例, 一个简单的HTML示例 欢迎光临我的
13、主页 这是我第一次做主页，无论怎么样，我都会努力做好！ ,7.2 HTML语言,7.2.1 HTML语言概述,4HTML的特点,HTML是独立于平台的，它兼容多平台。 HTML文件中含有大量的特定标记(tags)，该标记用于解释如何显示指定的内容。 HTML文件中包含超文本内容，如多媒体信息、E-mail地址、数据库查询结果等。 HTML文件是一个有特定标记的、可识别的ASCII文本文件，通常文件扩展名为.html或.htm。 编写一个HTML文件不需要特殊的软件，只要有一个字符编辑器就可以完成。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(1)标题文字标记,标题文字
14、的格式为：标题文字,属性align用来设置标题在页面中的对齐方式：left（左对齐）right（右对齐）center（居中对齐） 属性n用来指定标题文字的大小。N可以取16的整数值，取1时文字最大，6时文字最小 与用定义的网页标题不同，标题格式显示在浏览器窗口中，而不显示在浏览器的标题栏中。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(1)标题文字标记, 设置标题 第1级标题(h1) 第2级标题(h2) 第3级标题(h3) 第4级标题(h4)（居左） 第5级标题(h5)（居右） 第6级标题(h6)（居中） ,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的
15、格式化,(2)字符格式标记,格式为：被设置的文字,标记可设定文字的字号（大小）、字体和颜色。 size用来设置文字的大小。数字的取值范围从17，size取1时最小，取7时最大。 Face用来设置字体。 Color用来设置文字颜色。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,1)和标记都可以设置文字的大小，二者的区别见下表(当中的size取7时，文字比要大)。,2)设置字体：在网页设计中要尽量用常见的字体。必要的罕见字体可以转化为文字图像。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,3)设置文字的颜色：,
16、标记中的text属性，设定整个网页文字的颜色 标记中的color属性，设定网页、段落、短语、词或字的颜色。 与的优先级，标记优先。, 标记同时对文字颜色进行定义 今天天气真好 黑色蓝色 粉红色 ,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,3)设置文字的颜色：,颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。上例中同时使用了body的text属性和font的color属性来对文字的颜色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记属性所定义的。另外，在title中涉及网页中的特殊替换字符，其字符所表示的的含义如下表所示。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,4)设置字型：,字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见下表所示：,7.2 HTML语言,7.2.2 文档的格式与风格,2段落格式化,(1)
