《436编号HTML静态网页的制作 -》由会员分享，可在线阅读，更多相关《436编号HTML静态网页的制作 -（98页珍藏版）》请在金锄头文库上搜索。
1、第2章 静态网页的制作,Web编程实用技术教程,学习目标,了解网页制作工具（Dreamweaver、Flash）的简单使用方法，用之制作静态网页； 学会将Dreamweaver作为开发Web程序的平台； 掌握超级链接的创建； 学会利用表格和框架进行网页布局； 学会使用HTML和XML语言编制网页。,目 录,2.1 常用的网页制作工具,2.2 制作第一个简单网页,2.3 超文本和超图像链接,2.4 网页制作中的Flash动画,2.5 利用表格和框架制作网页,2.6 HTML与XML标识语言,Dreamweaver是一套专业化的网页创作工具，它采用“所见即所得”的可视化编辑方式，能够快速高效地创建
2、各种具有专业水平的网页，不需要编写任何代码。如果需要在代码界面进行工作，只需进入HTML代码窗口或源代码检视器中，就能同步看到Dreamweaver生成的源代码。它支持最新的DHTML、CSS标准及分层技术，具有极好的兼容性，适用于各种平台和各种浏览器。,2.1 常用的网页制作工具 Dreamweaver,启动Dreamweaver程序 在“开始”菜单的“所有程序”中找到“Adobe Dreamweaver CS3”，并单击该命令。Dreamweaver将立即启动，在“文档”窗口内将打开一个空白文档，如下图所示。,2. Dreamweaver的用户界面 Dreamweaver由页面编辑器和站点
3、管理器两大部分组成。下图所示的是Dreamweaver的页面编辑器，包括页面编辑窗口和各种浮动面板。,(1) 页面编辑窗口： 页面编辑窗口由标题栏、菜单栏、工具栏、文档编辑区和状态栏等基本部分组成，各部分的功能如下： 标题栏：显示当前页面的标题，括号中显示对应文档的路径和文件名。 菜单栏：包含所有的操作命令。Dreamweaver共有10个系统菜单，分别为文件、编辑、查看、插入记录、修改、文本、命令、站点、窗口、帮助。单击系统菜单，打开对应的下拉菜单，可选择下拉菜单中的操作命令。面板上的各个操作按钮基本上都有菜单操作命令与之相对应。, 工具栏：放置常用工具。如：左边第一个按钮用于切换到HTML
4、代码窗口，第二个按钮切换到HTML代码视图和页面设计视图双状态同步窗口，第三个按钮则切换到页面编辑窗口。 文档编辑区：编辑网页的区域。Dreamweaver启动后，自动创建一个空白的网页文档等待编辑。, 状态栏：显示当前网页的有关信息。在状态栏中从左到右依次为标签选择器、基本工具、窗口设置框和下载指示器。 标签选择器：编辑网页时，利用标签选择器可以显示和修改HTML标签，单击标签按钮可以选择网页中相应的编辑对象。 基本工具：包括选取工具、手形工具、缩放工具和选择缩放比例列表框。 窗口设置框：设置显示窗口的大小，单击设置区右侧的小按钮，在打开的菜单中，可以根据显示器屏幕的分辨率选择不同的显示尺寸
5、。 下载指示器：显示当前网页的文件量大小，以及网页被下载所需要的时间，单位是*k/*秒。,(2) 浮动面板： 页面编辑器中有2个常用的浮动面板：插入面板、属性面板，以及放置其他面板的浮动面板集。 浮动面板是Dreamweaver的一大特色。利用浮动面板对网页进行属性设计，在页面编辑窗口中可以直接看到操作结果，真正实现了“所见即所得”的编辑功能。 浮动面板集也是Dreamweaver的一大特色。设计者可以按自已的需要任意组合或拆分浮动面板集中的各种面板，也可以用鼠标拖拽浮动面板的标题栏来移动浮动面板，用鼠标拖拽浮动面板的边框来改变浮动面板的大小。,(3) 站点管理器： 站点管理器主要用于管理站点
6、内的文件和目录，可对站点内的文件进行改名、编辑和删除等基本操作，并可检验对象的链接情况，自动修改其他页面指向这个对象的链接。利用模板和库，可以使站点内的部分页面应用相同的模板和库，从而使多个页面具有相同的风格，并且可以快速进行统一更新。管理器还自带FTP功能，能完成站点内文件的上传和下载，进行站点的发布和远程管理。,制作一个浏览效果如下图所示的简单网页。,2.2 制作第一个简单网页,实现步骤如下： 首先启动Dreamweaver，打开前面所建立的本地站点，接着在页面中插入各种基本的网页元素。 一、基本网页元素（文字、图像、水平线、日期和时间）的插入 1. 在页面中添加和处理文字 (1) 在页面
7、中输入文字，操作步骤如下： 在页面编辑区中，按照页面的设计内容输入文字，各段文本的末尾按回车键，如下图所示；, 按Ctrl+S键保存网页。第一次创建的网页可以作为首页index.htm文件保存，随后该首页将得到进一步的扩充和完善。 注意：书中所提到的“保存网页”都是指将网页保存到本地站点下。 (2) 将第一行“计算机工程系”作为网页的标题文字，操作步骤如下： 选中“计算机工程系”，打开属性面板，如下图所示；, 在“格式”下拉选项中选择最大标题“标题1” 以设置标题样式； 单击 按钮将字体变粗，单击按钮将文字居中显示。 (3) 接着，设置中文字体。 在属性面板上单击字体按钮 ，打开字体下拉列表，
8、选择想设置的字体。如果字体下拉列表中没有想设置的字体，如何添加中文字体呢？操作如下：, 打开“编辑字体列表”对话框，执行下列操作之一： 在属性面板上单击字体按钮 ，打开字体下拉列表，选择“编辑字体列表”选项，如下图所示；,在菜单栏中选择“文本”“字体”“编辑字体列表”命令。, 在“编辑字体列表”对话框（如下图所示）中进行如下操作：, 在“编辑字体列表”对话框中进行如下操作： 先在“字体列表”框中选定“在以下列表中添加字体”项； 在“可用字体”框中选择一种字体（如隶书）； 单击方向按钮 ，选中的字体添加到“选择的字体”框中，同时也出现在“字体列表”框中。 如果还要加入第二种字体，则单击按钮 ，再
9、重复上面的3步即可。如果要删除某种字体，则在“字体列表”框中选定该字体，单击按钮 。还可以单击按钮 ，将刚添加的字体上移，便于以后的使用。 单击“确定”按钮。此时，属性面板上的字体下拉列表中已经添加了“隶书”等字体。,(4) 将第一段文本的颜色设置为红色，将第三段文本的颜色设置为十六进制代码#3333CC蓝色，将后面文本的颜色设置为十六进制代码#FF00FF的淡紫色。操作步骤如下： 首先选中第一段文本； 单击属性面板上的字体颜色按钮，在“颜色”调色板中用吸管吸取红色即可，如下图所示。,在网页中，每种颜色都可用一个十六进制代码表示。如果知道颜色的代码，可直接在“颜色”文本框中输入该颜色的十六进制
10、代码。 用相同的方法设置下面文本的颜色。 (5) 将最后的5行文本组成一个项目列表，操作步骤如下： 首先选中最后5行文本； 打开属性面板，单击按钮 ，则最后5行文字前便增加了圆点式的项目符号“”，如下图所示。,(6) 如果要为选中的段落前加上1、2、3式的项目编号，则单击 按钮即可。同样，项目符号的样式是可以更改的，单击属性面板上的“列表项目”按钮进行相应的设置。,(7) 同时，还可以让“Welcome”文本从左到右动起来，操作步骤如下： 首先选中“Welcome”文本； 在属性面板上单击按钮 ，打开快速标签编辑器；, 在光标处直接输入“marquee”，或稍等一会，在出现的下拉列表中选择“m
11、arquee”选项，然后按回车键。此时，状态栏上已多了一项加粗显示的。 按F12键预览网页效果。,2. 在页面中插入和处理图像 (1) 将图像插入到页面中。操作步骤如下： 在“学生专区”项目符号“”前按回车键，以确定插入图像的位置在第三段和第四段之间； 单击插入面板中的 按钮的子菜单“图像”（或者在菜单栏中选择“插入记录”“图像”命令），弹出“选择图像源文件”对话框，如下图所示；, 在查找范围框中选定图像文件所在的文件夹及文件，单击“确定”按钮。 弹出“图像标签辅助功能属性”对话框，填写该图像的“替换文本”及“详细说明”内容，单击“确定”按钮。 经过上面的操作，图像便插入到了当前的页面中。按F
12、12预览网页，可以看到当鼠标停留在图像上时就会出现提示文字。这样做的好处就是当浏览网页时，即使图像不能完全显示出来，提示文字也能让浏览者了解图像的内容或主题。但是，此时的图像并没有按照页面设计的要求放置，因此需要调整图像的对齐方式、周边间距及图像的大小等。,(2) 调整图像的对齐方式。关于图像，在属性面板上有两种对齐方式：图像在页面中的对齐方式及图像和周围元素的对齐方式。, 调整图像在页面中的对齐方式 分别单击 3个按钮，可以看到图像分别位于页面的左边、中间和右边。再次单击相应对齐按钮，图像回到原来的位置上。此时单击左对齐按钮。 调整图像和周围元素的对齐方式 单击属性面板上的“对齐”按钮，在下
13、拉列表选项中选择“左对齐 ” 。,(3) 调整图像的周边间距。操作步骤如下： 选中图像，打开属性面板； 在“垂直边距”文本框中输入10，设置垂直间距为10像素； 在“水平边距”文本框中输入60，设置水平间距为60像素，按回车键。 可以看到图像与上、下、左、右方的文字间隔都拉大了，如下图所示。如果删除输入框中的数值，则图像又回到原来的位置。,(4) 调整图像的大小。方法有两种： 直接拖拽图像上的控点； 在属性面板的“高度”和“宽度”文本框中输入相应数值（单位是像素）。 如果不满意调整图像的大小，则可以单击属性面板上的“高度”和“宽度”标志，使图像还原为原始大小。,3. 插入水平线 (1) 在页面
14、中插入水平线。操作步骤如下： 在“Welcome”文本后单击鼠标，以确定插入水平线的位置； 在菜单栏中选择“插入记录”|“HTML”“水平线”命令，则Dreamweaver默认的水平线便插入到“Welcome”和第三段文字之间，如下图所示。,(2)修改水平线，将水平线居中对齐，且其宽度为浏览器窗口的80%，操作步骤如下： 选中上面所插入的水平线； 在水平线属性面板的“宽度”文本框中输入“80”，并选择其单位为“%”，如下图所示； 在“对齐”下拉列表中选择“居中”对齐方式。,注意： 在水平线的属性面板上，其宽度的单位分为两种：像素和%（百分比）。80%和80像素的区别在于：无论浏览器窗口怎么缩放
15、，宽度设置为80像素的水平线都是80个像素点长；而宽度设置为80%的水平线将会自动调整长度，其宽度总是占浏览器窗口宽度的80%。 要插入垂直线，则选中水平线，将其高度设置为垂直线的高度（如：80像素），将宽度设置为垂直线的宽度（如：2像素）即可。,(3) Dreamweaver默认的水平线颜色为灰色，要将水平线的颜色设置为黄色，操作步骤如下： 选中上面所插入的水平线； 单击水平线属性面板的 按钮，打开快速标签编辑器； 在标签中插入属性color=“#FFFF00”或color=“yellow”； 按F12预览，便可看到水平线是黄色。,. 插入日期和时间 在页面中插入日期和时间，操作步骤如下：
16、(1) 确定所插入的日期和时间的位置； (2) 单击插入面板的日期按钮 ，者在菜单栏中选择“插入记录”“日期”命令，打开“插入日期”对话框，如下图所示；,(3) 在“插入日期”对话框中选择星期、日期和时间格式，选中“储存时自动更新”项，然后单击“确定”按钮。在日期的属性面板上单击“编辑日期格式”按钮可以重新修改日期格式。,二、网页属性（标题、背景、页边距等）的设置 执行下列操作之一，打开“页面属性”对话框： 在菜单栏中选择“修改”“页面属性”命令； 在“属性”面板中单击“页面属性”按钮； 在网页空白处单击鼠标右键，在弹出的快捷菜单中选择“页面属性”命令。,1. 在标题栏中增添网页标题 在标题栏中增添网页标题，操作步骤如下： (1) 在“页面属性”对话框的“分类”选项中选择“标题/编码”，在其选项卡的“标题”文本框中输入“计算机工程系”； (2) 点击“确定”按钮。网页标题“计算机工程系”便显示在浏览器的标题栏上，如下
