网站建设与网页设计

网站建设与网页设计第1章 网站建设1.1 网站与网页基础知识1网页实际上是一个运行在计算机中的文件，网页经过网址（URL）来识别与存取。2全球网 全球网(Word Wide Web即万维网，缩写WWW，也称Web)，是建立在因特网上的全球性的、分布式、交互式、动态多平台的图形网络信息服务系统。它以客户机/服务器的方式进行工作的。其软件主要是由服务器端软件和客户端软件两部分组成。存取WWW的软件叫浏览器。Web结构是由Web浏览器、服务器、Web网页、统一资源定位器组成。3超文本超文本是与其他数据有关联的数据。在全球网的语言里，超文本的文件是由一些数据组成，而这些数据又与其他数据关联，用于读取超文本文件的工具称为浏览器。4超链接 超链接是带下划线或边框，内嵌Web地址的文字或图形，单击超链接可以跳转到特定的Web节点上的某一页。5统一资源定位器URL（Uniform Resource Locator）,”资源”是指在网络上所能获得的文字、图象、声音和动画等资料的总称，也就是各种类型的文件。要获取这些文件必须通过两种不同的协议，一是链接网页的HTTP（超文本传输协议），用http:/开始；二是链接服务器的FTP（文件传输协议），用ftp:/开始。浏览器运用统一资源定位器技术，确定被访问的网页。如：6浏览器浏览器是专用于浏览网页、检索和查找网上信息的工具。7服务器 服务器是运行服务器程序的计算机8Web网页 Web网页是由HTML(超文本标识语言)编写的。9主页 网页主索引页，是网站引导访问重点内容的向导页，一般访问网站的第一页。10网页一般布局如图：1.2 网站建设规划1确定网站规划目的 科研推广网站2可行性分析 成本、费用、收益。3网站规划 网站首页科技产业成果展示成果推广蔬果类咨询作物类留言专家介绍畜牧类信函在线解答1.3 网站设计原则1符合人的阅读习惯 文字大小、字体、颜色2网站导航要清晰 文字、图片、按钮3网页风格要统一 文字、图片、背景颜色，“很专业”4动静要搭配合理5突出新内容1.4 定位网站形象1设计网站标志 一般用网站名字的英文制作2设计网站色彩 主色调、深浅搭配、背景不要使用刺眼的颜色3保持网站的颜色统一第2章 Dreamweaver 应用2.1 熟悉Dreamweaver的工作环境DreamweaverMX2004 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。2.1.1 Dreamweaver的工作界面1. 标题栏：包含Dreamweaver的版本名称、网页标题、网页保存的位置及名称。2. 菜单栏：提供所有菜单命令，各面板上的操作按钮均有相应的菜单命令与之对应。3. 文档窗口：文档窗口是编排网页的区域，显示当前所编辑的文档内容，其显示与在浏览器中的结果近似。用户可以在文档窗口中输入文本、插入图像、音频及视频等文件内容。4. 常用面板：Dreamweaver提供了大量的面板，用户可以通过面板来设计制作页面，面板因其直观、简便的操作方式，深受使用者的好评。5HTML代码窗口：显示网页后台代码。2.1.2 新建、打开和保存网页1新建网页选择菜单栏中的【文件】-【新建】命令，系统将弹出“新建文档”对话框，单击【创建】按钮，便可以创建该页面。2打开网页在文档窗口中打开已有的网页，选择菜单栏中的【文件】-【打开】命令，系统弹出“打开”对话框，浏览选择需要打开的文档，单击【打开】按钮，打开选择的该网页。3保存网页新建的文档必须保存，选择菜单栏中的【文件】-【保存】命令，系统自动打开“另存为”对话框，选择保存路径，输入文件名，单击【保存】按钮，则该页被保存。网站的首页默认名字一般为index.htm。如果不是新建文档，则系统自动执行文件保存操作。2.2 网页元素2.2.1 文本文本是网页的核心内容，Dreamweaver允许通过以下三种方式在网页中添加文本。（1）直接将文本输入到页面它的操作方法十分简单，只需要将光标定位到编辑窗口中要输入文字的地方，然后直接输入文字即可。（2）从其他文档复制和粘贴文本在其它编辑器中编辑文本，选择菜单栏中的【编辑】-【复制】命令，将光标定位到编辑窗口中要输入文字的地方，选择菜单栏中的【编辑】-【粘贴】命令，即可将文字复制到页面。（3）从其它应用程序中拖放文本将光标定位到编辑窗口中要输入文字的地方，选择菜单栏中的【文件】-【导入】-【Word文档】/【Excel文档】命令，系统将弹出“打开”对话框，浏览选取要添加的文件，选择【打开】按钮，Word文档或Excel文档的内容就会出现在页面中。在页面中插入文字后，选中该文字，在属性面板修饰文字。例2-1 制作一个网页，测试页面属性对页面效果的影响，效果如图所示。具体的制作方法如下： 单击菜单栏中的【文件】-【新建】命令，打开“新建文档”对话框，选择“常规面板”中的【基本页】-【HTML】命令，单击【创建】按钮，创建一个基本页面。 在文档标题中输入“测试页面属性网页”。 单击属性窗口中【页面属性】按钮，打开“页面属性”对话框，在“页面字体”列表中选择“宋体”。提示：如果“页面字体”列表中不存在某种字体，选择“编辑字体列表”添加字体。 单击“大小”右侧的下拉按钮，选择24像素。 单击“文本颜色”右侧下拉按钮，选取红色。 在“左边距”、“右边距”、“上边距”、“下边距”中均输入“0”。 在编辑页面中任意输入文本，注意观察文本的颜色、大小及出现的位置，以确定页面属性设定各参数的作用。 单击菜单栏中的【文件】-【保存】命令，浏览选取保存位置，输入文件名称“测试页面属性网页”，单击【确定】按钮，保存页面。 单击菜单栏中的【文件】-【在浏览器中预览】-【IEexplore】命令或按F12键，在浏览器中预览页面。2.2.2 图片、图像图像既可以作为网页对象也可以作为网页背景插入。（1）直接插入图像将光标定位到要插入图像的位置，选择菜单栏中的【插入】-【图像】命令，或常用工具栏中的【图像】按钮，打开“选择图像源文件”对话框， 浏览选取图像。（2）插入背景图像单击属性面板中的【页面属性】按钮，打开“页面属性”对话框，单击“背景图像”右侧的“浏览”按钮，打开“选择图像源文件”对话框，浏览选取所需图像，单击【确定】按钮，插入背景图像。（3）创建图像热点 在选定的图像中，用图像属性面板上的热点工具。属性面板如图： 目标（R）： _blank 在一个新的浏览器窗口链接文件 _parent 在父辈浏览器窗口打开文件 _self 默认值 _top 在整个浏览器窗口中加载链接文件，删除所有的框架例2_2 网页背景图片具体的制作方法如下：（1） 单击菜单栏中的【文件】-【新建】命令，打开“新建文档”对话框，选择“常规面板”中的【基本页】-【HTML】命令，单击【创建】按钮，创建一个基本页面。（2）单击属性面板中的【页面属性】按钮，打开“页面属性”对话框，单击“背景图像”右侧的“浏览”按钮，打开“选择图像源文件”对话框，浏览选取所需图像，单击【确定】按钮，插入背景图像。（3）单击菜单栏中的【文件】-【保存】命令，浏览选取保存位置，输入文件名称“背景图像”，单击【确定】按钮，保存页面。（4）按F12键，在浏览器中预览页面。2.3 导行条的使用1插入导行条 单击菜单【插入】-【图像对象】-【导航条】命令 设置导行条的图像、鼠标经过时的图像、鼠标按下时的图像2编辑导行条 单击菜单【修改】-【导行条】命令3例2_3 制作导航按钮，如图所示具体操作步骤：（1）准备10个导航图片，5对两两不同色。（2）新建一个网页，在网页中输入文字“网站建设与网页制作”，并在属性面板中，设置文字属性。（3）单击菜单【插入】-【图像对象】-【导航条】命令，在弹出对话框中依次填写如图：（4）单击【确定】按钮，按F12键，在浏览器中预览页面。2.4 创建链接1创建链接 l 选中链接的文本或图片l 单击菜单【插入】-【超级链接】 或2使用属性面板创建链接单击属性面板中的“链接”后面的文件夹图标，打开“选择文件”对话框，浏览选取要链接的文件后，单击【确定】按钮，便可创建该超级链接。如图所示。 3创建E-mail 链接 单击菜单【插入】-【电子邮件链接】 或 工具栏单击电子邮件链接图标4修改链接： 在修改菜单中有一系列的修改链接操作2.5 表格应用1插入表格（参照word） 单击菜单【插入】-【表格】2设置表格属性 在表格属性面板里可以对表格的内容进行各项修改3拆分单元格 单击菜单【修改】-【表格】-【拆分单元格】4合并单元格 单击菜单【修改】-【表格】-【合并单元格】5表格格式化 单击菜单【命令】-【格式化表格】6表格嵌套l 选中单元格l 单击菜单【插入】-【表格】例2_4 在网页中插入表格、文本、图像对象，并进行简单的属性设置。网页效果如图所示。“在页面中插入对象网页”效果图具体的制作步骤如下：（1）单击菜单栏中的【文件】-【新建】命令，打开“新建文档”对话框，选择“常规面板”中的【基本页】-【HTML】命令，单击【创建】按钮，创建一个基本页面。（2）将光标置于页面中，单击菜单栏中的【插入】-【表格】命令，弹出“表格”对话框，设置“行数”、“列数”均为2，“表格宽度”为500像素，“边框粗细”、“单元格边距”、“单元格间距”均为“0”。设置完毕之后单击【确定】按钮插入表格，此时页面中出现一个2行2列的表格。（3）将光标置于第1行第1列单元格中，按住鼠标左键向右拖动至第1行第2列选中单元格，单击鼠标右键，在弹出的下拉菜单中选择【表格】-【合并单元格】命令，此时第1行的两列单元格就合并为1列了。（4）将光标置于第1行单元格中，在“属性”面板中，将“背景颜色”设置为“#FF0000”，此时第1行单元格中出现红色背景。（5）将光标置于红色背景上，输入文字“前沿电脑培训学校”并选中，在“属性”面板中，将“大小”设置为24，字体加粗，颜色设置为“#FFFF00”，“水平”设置为“居中”。（6）将光标置于第1行单元格中，在“属性”面板中“高”设置为80，“垂直”设置为“居中”，此时上述文本将出现在单元格正中。（7）将光标置于第2行第1列单元格中，在“属性”面板中将“背景颜色”设置为“#FF0000”，“宽”设置为90，单元格变成红色背景。（8）将光标置于第2行第2列单元格中，在“属性”面板中将“背景颜色”设置为“#FFFFCC”，“垂直”设置为“顶端”。（9）将光标置于第2行第2列单元格中，单击菜单栏中的【插入】-【图像】命令，弹出“选择图像源文件”对话框，浏览选取图片，单击【确定】按钮，在页面插入一个图片。选中图片，在属性面板中将“宽”设置为135，“高”设置为100，“垂直边距”设置为15，“水平边距”设置为10，“对齐”设置为“右对齐”。（10）单击鼠标左键，在第2行第2列单元格中输入上述文字。（11）单击菜单栏中的【文件】-【保存】命令，浏览选取保存位置，输入文件名称“在页面中插入对象网页”，单击【确定】按钮，保存。（12）单击菜单栏中的【文件】-【在浏览器中预览】-【IExplore】命令或按F12键，在浏览器中预览页面。2.6 水平线的使用水平线就是在页面中插入一条直线进行页面分割或起到美观作用，它的插入方法很简单，选择菜单栏中的【插入】-【HTML】-【水平线】命令，便可以在页面中插入水平线。注意插入的水平线与所处位置的宽度相等。2.7 利用层进行网页布局层（Layer）是一种 HTML 页面元素，可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。1创建层方法一：将光标至于要插入层的地方，选择菜单栏中的【插入】- 【布局对象】-【层】命令，在页面中插入层，在层中可以输入文字或插入图像等。方法二：选择“布局”面板中的【描绘层】按钮，在页面中按住鼠标左键拖动产生一个矩形区域后松开鼠标，插入一层。2. 操作层方法一：将鼠标至于层的左上角，光标将变为十字形状，按住鼠标左键拖动可以移动层；将鼠标至于层的边缘，光标将变成上下或左右箭头，按住鼠标左键拖动可改变层的大小。方法二：选择属性面板中的“左”、“上”调整层的位置，设定值决定层与浏览器边框的位置关系；选择属性面板中的“宽”、“高”调整层的大小。3设置层属性4设置层移动l 选中层l 单击菜单【修改】-【时间轴】-【录制层路径】l 鼠标在时间轴栏中单击右键-【录制层路径】或 单击菜单【修改】-【时间轴】-【录制层路径】l 拖动层移动作移动轨迹l 单击时间轴面板上的移动按钮“”，验证。2.8 表单 表单是人机对话的界面，用户可以通过表单与服务器端交互。2.8.1 插入表单域1插入表单 单击菜单【插入】 -【表单】-【表单】，系统将插入一个红色虚线巨型区域，表明这是一个表单，在预览时此区域不显示。2设置表单属性2.8.2 添加表单对象1插入文本域：单击菜单【插入】-【表单】-【文本区域】 设置文本区域属性：属性面板2添加按钮：单击菜单【插入】-【表单】-【按钮】 设置按钮属性：属性面板3插入图像域：单击菜单【插入】-【表单】-【图像域】 设置按钮属性：属性面板4添加单选按钮：单击菜单【插入】-【表单】-【单选按钮】 设置单选按钮属性：属性面板5添加复选框：单击菜单【插入】-【表单】-【复选框】 设置复选框属性：属性面板6添加下拉列表框：单击菜单【插入】-【表单】-【下拉列表框】 设置下拉列表属性：属性面板7例2_5 制作一个表单网页，网页制作效果如图所示。网页制作效果图（1）创建一个页面，用表格布局页面。合并表格，输入“调查表”，设置背景颜色，插入一个图片。前面涉及到的知识省略。（2）单击窗口菜单【插入】-【表单】-【表单】命令，在表格中插入一个表单。（3）在表单区域内插入一个3行2列的表格。（4）在表单区域内表格的第1行第1列，输入“姓名：”，在第1行第2列，单击窗口菜单【插入】-【表单】-【文本域】命令，插入一个文本框，选中文本框，在属性面板设置“字符宽度”为8。（5）在表单区域内表格的第2行第1列，输入“性别：”，在第2行第2列，单击窗口菜单【插入】-【表单】-【单选按钮】命令，插入一个单选按钮，选中单选按钮，在属性面板设置“初始状态”为“已勾选”，紧跟输入“男”，同理插入第二个单选按钮。（6）在表单区域内表格的第3行第1列，输入“职业：”，在第3行第2列，单击窗口菜单【插入】-【表单】-【列表/菜单】命令，插入一个列表，选中列表，在属性面板设置“类型”为“列表”，“高度”为3，“初始化时选定”填写“学生”、“教师”。（7）在表单区域内表格的第3行第2列，单击窗口菜单【插入】-【表单】-【按钮】命令，插入一个按钮。选中按钮，在属性面板设置“值”为“提交信息”，“动作”为“提交表单”。命令按钮的行为动作省略。（8）单击工具面板上的（在浏览器中预览/调试）按钮，预览网页。（9）保存网页文件。2.9 利用框架进行网页布局在网上经常可以看到网页被分割成几部分，有些部分区域内容是不变的（如导航栏），有些区域内容是变化的。这种在一个浏览窗口中显示多个网页的结构称为“框架结构”。框架结构将浏览窗口划分为不同部分，每部分装载不同内容，从而获得特殊效果。此外通过超级链接指定目标框架，在框架之间建立内容联系，实现网页导航功能。1. 框架技术为了更好的理解什么是框架。画一张示意图来进行讨论。图6-50 框架示意图这是一个左右结构的框架（中间绿色）。事实上这样的一个结构是由三个网页文件组成的。整体框架是一个文件，图中用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。2. 框架的组成框架主要由两部分组成，框架集与单个框架。（1）框架集：在一个文档内定义一组框架结构的网页。框架集定义了一页显示的框架数、框架的大小、载入框架的网页源和其它可定义的属性。（2）单个框架：在框架定义的某一区域显示的网页文件。3. 框架的操作（1）创建方法选择菜单栏中的【文件】-【新建】-【常规】命令，弹出“新建文档”对话框，如图6-51所示。选择类别为“框架集”，选择框架集类型，单击【确定】按钮，创建所需框架。或选择“布局”面板的【框架】按钮。（2）保存方法选择菜单栏中的【文件】-【保存全部】命令，保存过程是：首先保存框架网页，然后依次保存单个网页，被保存的页面边框自动加粗。（3）打开方法选择菜单栏中的【文件】-【打开】命令，选择框架集页面，系统打开框架集的同时自动加载单个框架。（4）选择框架集、单个框架方法框架集与单个框架分别是独立的HTML文件，如果要对框架集或单个框架进行编辑，必须先选定，具体操作方法如下：选定框架集：选择菜单栏中的【窗口】-【框架】命令，打开“框架”面板，在面板中选择框架边缘单击鼠标选定框架集，这时整个框架集黑边突出显示。选定单个框架：打开“框架”面板，在面板中灰色区域任意位置单击鼠标，选定某一框架，这时某一框架页面黑边突出显示。4. 设置属性（1）设置框架集属性（2）设置单个框架属性5例2_6 利用框架制作一个网页，效果如图所示。“框架网页”效果图具体的制作步骤如下：（1）单击菜单栏中的【文件】-【新建】命令，在弹出的“新建文档”对话框中，在“常规”面板中的类别列选择“框架集”，框架集选择“左侧固定”，单击【创建】按钮。（2）将光标置于左侧框架，输入文字“白色球鞋”、“黑色球鞋”、“蓝色球鞋”。（3）将光标置于右侧框架，单击菜单栏中的【插入】-【图像】命令，在弹出的“选择图像源文件”对话框中浏览选取“白色球鞋”图像，单击【确定】按钮。（4）单击菜单栏中的【文件】-【保存全部】命令，在弹出的“另存为”对话框中，输入“框架集”后单击【保存】按钮；输入“右侧框架1”后单击【保存】按钮；输入“左侧框架”后单击【保存】按钮。这样框架集及单个框架均被保存。（5）删除右侧框架1中的图像，单击菜单栏中的【插入】-【图像】命令，在弹出的“选择图像源文件”对话框中浏览选取“黑色球鞋”图像，单击【确定】按钮。单击菜单栏中的【文件】-【框架另存为】命令，在弹出的“另存为”对话框中，输入“右侧框架2”后单击【保存】按钮。（6）重复步骤5，插入图像“蓝色球鞋”，并以“右侧框架3”保存页面。（7）拖动鼠标左键，选取文字“白色球鞋”，在属性面板中选择“链接”文本框右侧的【浏览文件】按钮，在弹出的“浏览文件”对话框中浏览选取“右侧框架1”文件后，单击【确定】按钮。单击【目标】右侧的下拉按钮，在弹出的下拉菜单中选择【mainFrame】。（8）重复步骤7，为“黑色球鞋”、“蓝色球鞋”设置超级链接。（9）单击菜单栏中的【文件】-【保存】命令，再次保存“左侧框架”中的内容。（10）单击菜单栏中的【修改】-【框架集】-【编辑无框架内容】命令，在标题中输入“框架网页”，单击菜单栏中的【文件】-【保存】命令，再次保存“框架集”中的内容。（11）按F12键，预览页面。2.10 利用Dreamweaver制作动态特效网页2.10.1 行为的使用“行为”（Behaviors）是响应某一事件（Event）而采取的一个动作（Action）。“行为”是Dreamweaver MX 2004最具有特色的功能，它实质是在网页中调用JavaScript代码，实现网页的动态效果，使用“行为”功能不需要掌握复杂的JavaScript代码，可以完成一个需要几十甚至几百行代码才能完成的功能。1播放声音2弹出消息框3显示/隐藏层4交换图像5弹出窗口6移动字幕7常用行为事件表事件描述OnClick单击对象OnDblClick双击对象OnMouseOver鼠标指向对象OnMouseOut鼠标离开对象OnMouseMove鼠标在对象上移动OnMouseDown鼠标按下左键OnMouseUp鼠标抬起左键OnKeypress按键OnKeyUp抬键OnFocus选中指定对象2.10.2 动态特效网页实例1设置状态栏文本状态栏是位于浏览器窗口左下角的显示当前信息的区域，当用户把鼠标移动到一个链接上时，状态栏会显示要跳转的目的地址。Dreamweaver提供了一个控制状态栏的行为“设置状态栏文本”，通过该行为，用户可以改变默认的显示文字，加入一段自己定义的文字。（1）操作方法选择菜单栏中的【窗口】-【行为】命令，单击面板上的【+】按钮，选择【设置文本】-【设置状态栏文本】命令，系统将弹出“设置状态栏文本”对话框，如图所示。“设置状态栏文本”对话框在文本框中输入文字，单击【确定】按钮。2 例2_7 制作一个滚动公告栏网页，如图所示。图1 “滚动公告栏网页”效果图图2“滚动公告栏网页”制作过程图具体的制作步骤如下： 设置如图2所示页面。 将光标置于第3行第1列单元格中，单击插入面板的【标签选择器】按钮，打开“标签选择器”对话框，单击左侧窗口中“HTML”标签前的【+】按钮，打开HTML标签文件夹。 选择左侧“页元素”，选择右侧marquee标签，点击【插入】按钮后关闭窗口。 选择文档窗口的“代码”视图，把光标插入点放在 marquee标签内。 选择菜单栏中的【窗口】-【标签检查器】命令。打开的“标签检查器”属性面板。设置“direction”为“up”，“height”为100，“scrollAmount”为2，“scrollDelay”为0，“width”为290，“align”为“Scroll”，返回代码页面。 在光标所在位置输入图1所示文字。 单击菜单栏中的【文件】-【保存】命令，浏览选取保存位置，输入文件名称“滚动公告栏网页”，单击【确定】按钮，保存网页。按F12键，在浏览器中预览页面。代码说明： 移动字幕开始和结束标识behavior=scroll 动作=滚动direction=up 方向=向上height=100 显示宽度=100像素scrollamount=2 显示滚动=2行scrolldelay=0 滚动延迟时间=0秒3例2_8 制作一个页面，此网页打开15秒后自动跳转到另外一个页面，效果如图所示。图6-67“自动刷新跳转网页”效果图具体操作步骤如下： 制作如图所示页面，并以“自动刷新跳转页面”保存。 打开网页“自动刷新跳转页面”，单击菜单栏中的【插入】-【HTML】-【文件头标记】-【刷新】命令，系统将弹出“刷新”对话框。 将“刷新”对话框的“延迟”设置为15秒，单击“转到URL”后面的【浏览】按钮，浏览选取我们前面所作的 “滚动公告栏”网页，单击【确定】按钮。 单击菜单栏中的【文件】-【保存】命令，保存网页。按F12键，在浏览器中预览页面。等待15秒钟，浏览器启动跳转显示“滚动公告栏”页面。4. 例2_9 制作一个提示问候语网页，效果如图6-69所示。“提示问候语网页”效果图具体制作步骤如下： 制作如图所示网页。 单击菜单栏中的【窗口】-【行为】命令，打开“行为”面板。 在弹出的行为面板中单击图标，在弹出的下拉菜单中选择“弹出信息”，系统弹出“弹出信息”对话框，在文本框中输入“欢迎加盟”，单击【确定】按钮。保存网页。按F12键，在浏览器中预览页面。例2_10 制作一个网页，打开网页自动弹出广告窗口，效果如图所示。 “弹出广告网页”效果图具体的操作方法如下： 制作如图所示“index.htm”页面。 制作如图所示“pop.htm”页面。 打开页面“index.htm”，选择菜单栏中的【窗口】-【行为】命令，系统弹出“行为”面板。单击“行为”面板中的图标，在弹出的下拉菜单中选择【打开浏览窗口】命令，弹出“打开浏览器窗口”对话框。 在弹出的“打开浏览器窗口”对话框中，单击“要显示的URL”右侧的【浏览】按钮，在弹出的“选择文件”窗口中浏览选取“pop.htm”页面，单击【确定】按钮。 “窗口宽度”设置为300，“窗口高度”设置为150，“窗口名称”设置为“pop”，单击【确定】按钮。 保存网页，文件名称“弹出广告网页”。按F12键，在浏览器中预览页面。例2_11 制作一个具有下拉菜单的网页，效果如图所示。图6-76 “下拉菜单网页”效果图具体操作步骤如下：（1）将光标置于页面中，选择菜单栏中的【插入】-【布局对象】-【层】命令，在页面中插入一个层。（2）在层的属性面板中，设置“层编号”为“layer1”，设置“左”、“上”、“宽”、“高”分别为10、15、115、135，设置“背景颜色”为#。（3）将光标层“layer1”中，选择菜单栏中的【插入】-【表格】命令，在弹出的表格对话框中，设置 “行数”为4，“列数”为1，“表格宽度”为100%，“边框粗细”为1，“单元格边距”、“单元格间距”均为0。（4）在刚才插入的表格中输入图6-76所示的主菜单名，在文本属性面板中设置“大小”为12像素，“颜色”为#FFFF00，“对齐”为“居中”。（5）将光标置于页面中，选择菜单栏中的【插入】-【布局对象】-【层】命令，在页面中再插入一个层。（6）在层的属性面板中，设置“层编号”为“layer2”，设置“左”、“上”、“宽”、“高”分别为125、15、94、58，设置“背景颜色”为#。（7）将光标至于层“layer2”中，选择菜单栏中的【插入】-【表格】命令，在弹出的表格对话框中，设置“行数”为3，“列数”为1，“表格宽度”为100%，“边框粗细”为1，“单元格边距”、“单元格间距”均为0。（8）在刚刚插入的表格中输入图6-83所示文本，设置文本属性相同上。（9）按Ctrl键，单击“layer1”层中第一个单元格，打开“行为”面版，选择“行为”面板中的【+】按钮，在下拉菜单中选择“显示-隐藏层”，弹出“显示-隐藏层”对话框，在对话框中单击层名“layer2”，单击【显示】按钮，单击【确定】按钮，在“行为”面板设置事件为“onMouseOver”。作用是实现当鼠标移至第一个单元格时，下拉层“layer2”的状态变为显示。（10）鼠标位于网页，选择“行为”面板中的【+】按钮，在下拉菜单中选择“显示-隐藏层”，弹出“显示-隐藏层”对话框，在对话框中单击层名“layer2”，单击【隐藏】按钮，单击【确定】按钮，然后设置事件“onMouseOut”。（11）选中 “layer2”层，在层属性面板中设置“可见性”为“hidden”。表示 “layer2” 层在网页预览时处于隐藏状态。（12）重复步骤5步骤11，设置菜单项对应的显示-隐藏层。（13）保存网页，文件名称“下拉菜单网页”。（16）按F12键，在浏览器中预览页面。在主菜单栏中移动鼠标观察显示效果。例2_12 制作一个网页，单击“制作邮件链接”页面，自动弹出Outlook窗口，并自动填写收件人地址及邮件主题，效果如图所示。“邮件链接网页”效果图具体制作步骤如下： 将光标置于页面中，输入“联系我们”。 拖动光标左键，选取“联系我们”，在“属性”窗口中的“链接”对话框中输入“mailto:?subject=主题”。链接邮箱到“”，主题为“主题”。 保存网页，文件名称“邮件链接网页”。 按F12键，在浏览器中预览页面。点击“联系我们”观察设置结果。第3章 HTML编程基础 HTML是一种专门用于制作Web网页的超文本标识语言，它不但是整个Web网页制作的基础，也是Web编辑软件（Frontpage、Dreamweaver）的基础。3.1 HTML基础知识3.1.1 HTML的基本语法1标记 用于修饰浏览器窗口内文本的样式 格式： 文本内容 举例： 沈阳农业大学2标识属性 标识都有属性，用户可以定义其属性。 举例： 3内容注释格式： 举例： 3.1.2 网页结构 1标题信息 欢迎浏览本网页2主体标识3.1.3 编辑网页正文1划分段落： 文本内容 * 包括Left Center Right 例3_1： 文字对齐，效果如图：文本对齐窗前明月光疑是地上霜举头望明月低头思故乡2插入标题 文本中的标题通常使用黑体字：标题1标题2标题3标题4标题5标题6 例3_2：标题测试标题测试标题1标题2标题3标题4标题5标题63使用链接网页已经图文并茂了，但是网站中各网页应该是一个有机的整体，因此必须将各个网页通过超级链接方式联系起来，让浏览者在各个页面之间跳转。（1）超级链接的作用超级链接是Web和其它多媒体之间的最大区别，只要单击站点内的超级链接，它就会自动调转到链接目标处。超级链接的目标可以是另外一个网页，也可以是一幅图片、一个电子邮件地址或其他文档。链接起点的文档到目标的文档之间的路径有三种类型：u 绝对路径：由“http：/”、“ftp:/”开始的，提供所链接文档完整的URL及其使用的协议。u 相对路径：省略当前文档和所链接文档相同的URL