网页设计与制作教案设计Word文件下载.docx

1、2、规划站点的浏览机制一般可采用以下的方法：创建返回主页的显示专题目录显示当前位置搜索和索引反应将网页创作者或管理员公布在网页上，或创建一个超级，以使用户能快速地将信息反应到中步骤：1、单击“文件-“新建-“站点命令或单击常用工具栏中“新建网页按钮的下拉箭头，从打开的下拉菜单中选择“站点命令2、选择一种站点模板或向导3、单击“确定按钮三、站点的根本操作1、打开站点：“文件-“打开站点2、删除站点：方法一：在Windows资源管理器中删除一个站点方法二：在FrontPage中删除站点，在“文件夹视图或“网页视图的“文件夹列表中，右击站点所对应的目录，在快捷菜单中单击“删除命令3、站点的设置“工具

2、-“站点设置，有“常规、“参数、“高级、“语言、“导航、“数据库六个选项卡【课程小结】【作业】15 课后练习 书本课后练习作业第二节 利用表格进展网页布局一、 插入表格二、 单元格的根本操作 插入表格单元格的根本操作【教学组织过程】2课时2课时1、单击常用工具上的“插入表格按钮2、单击“表格-“插入-“表格命令3、使用表格工具栏“查看“工具栏-“表格命令4、由文本转换“表格“转换“文本到表格一般以段落为分行标记，以逗号或句号为分列标记。1、选择单元格“表格“选定“单元格Ctrl：可选择不相邻的单元格Shift：选择多个相邻的单元格2、插入单元格“表格“插入“单元格3、合并单元格“表格“合并单元

3、格或“表格工具栏上的“合并单元格按钮4、拆分单元格“表格“拆分单元格或“表格工具栏上的“拆分单元格按钮三、填充单元格1、文本与图像填充“插入“图片2、对齐文本与图像“表格“属性“单元格，“水平对齐方式、“垂直对齐方式3、修改单元格背景“表格“属性“单元格，“背景4、调整边框颜色“表格“属性“单元格，“边框5、改变单元格尺寸“表格“属性“单元格，“指定宽度、“指定高度四、修改表格的行与列1、选择行与列2、插入行与列“表格“插入“行或列3、均分行与列“表格工具栏中的“平均分配行高或“平均分配列宽4、删除行与列“表格工具栏中的“删除单元格按钮或“表格“删除单元格命令第三节 利用框架设计网页布局一、认

4、识框架网页二、创建框架网页三、框架网页的保存和打开认识框架网页创建框架网页一、认识框架网页 1、框架的概念 框架网页是一种特殊的网页，它将自身分成几个区域，每个区域称作一个框架窗口通常简称为框架框架具有以下特性：每个框架都可以独立地显示一个网页，各个框架窗口之间可以设立超。每个框架窗口可以赋予一个名字，以便其他URL作为目标调用。2、框架的使用场合如、论坛通常用框架来显示在同一个站点中的多个超，这样可以不用浏览器中的“后退按钮而方便的进展浏览。框架也适用于类似在线书籍的应用，将目录显示在左边的框架中，单击目录，右边框架中显示相关的章节二、创建框架网页 1、框架网页的创建“文件“新建“网页，选择

5、“框架网页选项卡 2、框架网页模板10种 “设置初始网页“新建网页框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。 1、框架网页的保存“文件“保存文件或“框架“保存网页 2、框架网页的打开 “框架“在新窗口中打开网页四、 框架网页的属性 1、框架网页的属性 “文件“属性“框架间距、“显示边框2、框架的属性 “框架“框架属性五、调整框架布局 1、调整框架窗口的大小用鼠标拖动或在“框架属性对话框中调整 2、框架的拆分“框架“拆分框架按行或按列拆分用鼠标拖动拆分按Ctrl键3、框架的删除 “框架“删除框架六、目标框架当在框架网页的某一个框架中定义超时，需要指定被的网页显示在哪一个框架中，

6、即指定超的目标框架。选择要设置超的文字或图像，“插入“超，单击“目标框架、“更改目标框架第四节 使用导航栏一、定义导航结构二、认识导航栏属性三、创建导航栏定义导航结构认识导航栏属性在网页内添加导航栏之前，先建立该站点的导航结构“视图“导航按钮“插入“导航栏按钮“父层：创建指向当前网页上一级网页的超，并将上一级网页的标题名称显示在导航栏内。三、创建导航栏要在浏览器中才可看到实际导航栏效果四、创建共享边框用创建导航栏的方法只能在一个网页中创建导航栏，假如需要导航栏出现在站点内多个网页的一样位置，如此可将导航栏插入网页的共享边框内。右击编辑窗口，单击“共享边框命令练习二、利用框架设计一个企业的布局要

7、求有如下内容：关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情等。第五节 网页布局功能的应用一、创建布局表格二、绘制布局表格创建布局表格绘制布局表格一、创建布局表格 1、创建布局表格 打开一个空白网页，并切换到“设计视图下，单击“表格菜单中的“布局表格和单元格命令，随后在右侧弹出一个任务窗口，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。 2.绘制布局表格 如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格项中单击“绘制布局表格，随后将指针移到操作窗口最左端，然后拖动鼠标即可

8、绘制表格。3、设置表格属性 插入表格后，还需对表格属性进展设置。在“表格属性项中设置该表格所需的属性。 提示：在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高命令，在弹出的“行属性对话框中重新输入该行高度值即可。练习三、使用布局功能设计学校要求包括有以下内容：学校简介、校园新闻、教育

9、教学、学生天地、校园论坛、教师之家等第六节 网页布局设计 一、文本的美化“格式“字体二、 运用边框与阴影“格式“边框与阴影 1、设置边框 2、设置阴影 文本的美化“格式“字体运用边框与阴影“格式“边框与阴影 1、设置边框 2、设置阴影 1、输入文本2、美化文本设置文本字体、字号 注：字符的大小共有6级，其中默认级别是3。 3、设置文本效果 4、改变文本颜色 5、设置字符间距 三、 使用列表“格式“项目符号和编号方式 1、添加项目列表 。项目列表也称为无序列表，它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有3种：实心黑点、空心圆圈和实心方块。2、添加编号列表在网页中的

10、内容存在顺序关系时，可应用编号列表。3、添加定义列表定义列表就是在网页内定义词汇、术语的列表，具体的定义内容将以首行缩进的方式出现在列表的下一行。格式工具栏的“样式“定义的术语，输入要词汇、术语，按回车键4、设置嵌套列表要建立组合列表，可以先生成第1级列表，然后再生成第2级列表，依此类推。建立组合列表的具体操作步骤如下： 1先生成第1级列表 2将光标移动到拥有第2级列表的第1级列表项目的末尾，然后按回车键。将出现一个空的列表行。3单击“格式工具栏中的“增加缩进图标。该行变为一个空白行，是没有列表编号或项目符号的。再单击一次“增加缩进图标。 4此时再按照建立列表的方法构造第2级列表。5输入第2级

11、列表。输入过程中每次接回车键就自动生成第2级列表项目。 6第2级列表输入完毕后，将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第2级列表的设置操作。嵌套列表可以转变为可折叠大纲，这样在浏览器中浏览时，就可以展开或折叠大纲中的各个级次。生成可折叠大纲的具体操作步骤如下： l按生成复合列表的方法构造好这个复合列表所有的列表级次。2选择“格式菜单中的“项目符号和编号方式命令，打开“项目符号和编号方式对话框，或者在列表中单击右键，从弹出的菜单中选择“列表属性命令。3在打开的对话框中，选中“启用可折叠大纲复选框。 4单击“确定按钮。练习四、设计一个介绍某某风景与特产的网页要求：设计一个网页介

12、绍某某的风景与特产，要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜与特产。第七节 网页装饰设计一、添加图像二、处理图像添加图像在浏览器中，能处理的图片格式只有GIF、JPEG格式和PNG格式等少数几种图片。1、GIF格式图片 GIF格式最多能支持256种颜色8位颜色。可以具有透明、动画等特殊效果。2、JPEG格式文件 JPEG格式可以处理高达1670万种颜色24位颜色，所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。插入本地计算机上的图像“插入“图片“来自文件，“从计算机选择一个文件插入WEB上的图像“插入“图片“来自文件，“从WEB浏览器来选

13、择网页或文件1、剪裁图像“图片工具栏“剪裁按钮2、设置透明背景“图片工具栏“设置透明色按钮三、添加文本“图片工具栏“文本按钮四、保存图像默认情况下，当前站点的图像文件保存在Images文件夹中五、运用特殊效果1、调整图片的亮度和比照度2、图片的翻转与旋转3、图片的冲蚀和黑白处理4、凹凸效果六、设置图片对齐方式“图片属性“外观“布局“对齐方式七、使用水平线水平线是贯穿网页宽度的细灰条，用于分隔文本或加着重符。添加水平线后，可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题，如此会使用图形来代替水平线以匹配主题。1、插入水平线2、设置水平线属性八、 修改网页背景“格式“背景1、调整

14、背景色彩2、调整背景图案九、创建交换图像DW 20041、插入交换图像“插入“图像对象“鼠标经过图像“原始图像、“鼠标经过图像、“按下时，前往的URL2、预览交换图像：F12【课程小结】a第八节 创建超一、与当前站点的二、与空白网页的三、与电子信箱的创建热点与电子信箱的一、与当前站点的“插入“ 超，“搜索当前站点的文件夹位置二、与空白网页的“插入“ 超，“创建一网页并到该网页三、与电子信箱的“插入“ 超，“制作发送电子的超四、与Web的“插入“超，“使用WEB浏览器来选择网页或文件，ALT+TAB，如此网页地址自动添加到URL中五、修改颜色“网页属性“背景，“颜色“超、“已访问的超、“当前超

15、六、使用图像地图1、创建热点 在图片中创建热点的具体操作步骤如下： 选中要建立热点的图片。图片被选中后，四周将出现8个控制方块，并且“图片工具栏被激活。在“图片工具栏中，选择热点的形状的图标。可以选择长方形、圆形或多边形。将鼠标移动到图片中。这时，鼠标指针变成一支笔的模样。用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合热点绘制完毕，图片中将出现该热点的边框。打开“插入超对话框，建立到热点上的超的过程与建立到文本上的超的过程根本一样。练习五、设计一个介绍一年四季风景的用到嵌套列表、框架、超、图像热点等技术。第九节 表单设计一、 认识表单二、 生成表单

16、三、 表单内容编辑认识表单 表单内容编辑表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进展处理。1、表单的创建与表单字段的添加“插入“表单2、表单向导“文件“新建“网页-“常规“表单网页向导1、单行文本框2、滚动文本框3、复选框4、单项选择按钮5、下拉菜单6、按钮7、图片8、标签9、隐藏的表单字段四、验证性表单字段“验证有效性按钮五、 表单处理程序右击表单，选择“表单属性命令，提供了保存表单数据的三种不同处理方式：1、发送到文件单击“选项按钮，进展设置2、发送到数据库3、讨论表单处理程序4、注册表单处理程序5、自定义ISAPI、NSA

17、PI、CGI或ASP脚本练习六：制作表单制作一个注册信息表单，要求包括下面的内容：会员某某、您的某某、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子、常用、收货地址、邮政编码、提交按钮、重填按钮第十节 层与应用DW 2004一、层概述二、创建层层概述创建层层Layer是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进展重叠和复杂的布局。“插入“布局对象“层“插入工具栏“布局“ 描绘层，按住鼠标拖动方法三：“插入工具栏“布局，拖动“ 描绘层按钮到文档窗口按CTRL键，可绘

18、制多层三、 通过拖动周围的黑色调整柄控制层的大小四、 拖动层左上角的选择柄可以移动层的位置。五、 单击层标记可以选中一个层。显示层标记的方法：“编辑“首选参数“分类“不可见元素六、显示层面板“窗口“层1、层的隐藏与显示2、层数3、层重叠 七、层和表格之间的转换在转换为表格之前，请确保层没有重叠。 “修改“转换“层到表格假如要将表格转换为层，请选择“修改“转换“表格到层15 课后练习 书本课后练习作业、第十一节 行为 一、行为概述行为概述行为是一种利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能的技术。行为是事件和由该事件触发的动作的组合。下面给出一些常见事件的一些解释on

19、Click 单击onDbclick 双击onKeypress按键onMouseDown鼠标按下onMouseOut鼠标移出onMouseOver鼠标移上onMouseUp鼠标抬起。实例：dreamweaver中网页折叠菜单的制作第一步：先插入一个一行、两列的表格，方法：单击菜单上的“插入 ，再选取“表格 ，在“行中输入1，在列中输入2，在单击“确定。把宽和高分别设为200px和30px 在两个单元格内分别输入 内容第二步，在单元格内插入一个层。把宽和高分别设为100px和90px 第三步：在层中插入一个三行、一列的表格，方法同第一步。并把宽和高分别设为100px和90px,以填满这个层。在三个

20、单元格中输入内容 在层的属性栏中将“可视设为“隐藏，这样在打开网页时便看不见这个层 在“行为目标中选择一个适宜的浏览器，一般是选择“。然后单击左边的“+按钮，来添加行为。在弹出的菜单中选择“显示或隐藏层 ， 在弹出的窗口中选择 “Layer1 ，就是我们刚刚添加的那个层了，再单击“显示接着单击“事件下面右边的那个向下箭头按钮，在弹出菜单中选择“当鼠标移上OnMouseOver。再单击“+按钮，选取“显示或隐藏层，还是选取“Layer1，不过这次我们点击的是“隐藏Hide了，再确定。然后选择“事件，单击“当鼠标移开（OnMouseOut）。第十二节 HTML语言根底一、HTML语言概述二、HTML文件根本架构 HTML语言概述HTML文件根本架构当我们畅游Internet时，我们透过浏览器所看到的，是由HTML （HyperText Markup Language） 语言所构成。HTML （ 超文件标记语言 ） 是一种建立网页文件的语言，透过标记式的指令 （