1、1,网页设计,2,网页操作要点,站点的建立和管理： 新建站点和网页 打开网站和网页 文本的格式： 字体 段落的格式 项目符号与编号 页面属性： 网页标题、背景音乐、 背景图片(水印)、背景颜色、默认文本色、超级链接颜色等。 插入： 插入图像 插入艺术字 插入FLASH动画 插入音频和视频（插件、链接） 插入水平线 插入层 插入代码,3,超链接： 文本和图像的超链接 电子邮件链接 书签的命名与链接 图像的热点链接。 表格： 插入表格 表格和单元格的属性 合并与拆分单元格、调整行高和列宽 表单： 插入表单、插入表单的文本域（文本框、文本区）、复选框、选项按钮、下拉框、按钮。 网页布局： 框架网页
2、表格布局 添加网页的动态效果： 字幕 交互式按钮 DHTML效果等。,网页操作要点,4,站点的建立和管理,5,新建站点或网页,菜单“文件/新建”,6,打开网站,菜单“文件/打开网站”,在“打开网站”的对话框中的“查找范围”中分别选择C:、KS、WY1，然后单击”打开“按钮。,7,打开网页,有些题目是打开一个已存在的网页文件，进行编辑，然后保存。 如打开index.htm。只要在文件夹列表里双击index.htm文件名就可打开此网页，进行编辑。,8,文本的格式,9,菜单“格式/字体”： 设置字体、字形、大小、颜色、效果菜单“格式/段落”： 设置对齐方式、缩进、段落间距菜单“格式/项目符号与编号”
3、： 设置项目符号与编号方式,文本的格式,10,页面属性,11,页面属性,设置网页属性命令：把光标放在网页的空白处， 1、快捷菜单中选择“网页属性” 2、菜单“格式/属性” 3、Alt+Enter,12,页面属性,设置标题：设置背景音乐：,13,背景： 设置背景图片 选中使其成为水印 可使背景图片不随 网页滚动而滚动颜色： 设置网页背景颜色 和文本颜色设置超级链接相关 颜色等。,页面属性,14,插入,15,菜单“插入/图片/来自文件” 菜单“插入/图片/剪贴画” 选中图片,在快捷 菜单中选择“图片 属性” 设置图片的 环绕样式、布局、 大小以及图片的 超级链接,插入图像,16,插入艺术字,菜单“
4、插入/图片/艺术字” 在“艺术字工具栏”里可设置艺术字格式、形状等,17,插入FLASH动画,菜单“插入/图片/Flash影片” 双击插入的Flash影片，设 置属性： 影片背景色 对齐方式 布局 大小,18,插入水平线,菜单“插入/水平线” 双击水平线，设置 水平线属性： 大小 对齐方式 颜色,19,插入音频和视频,2种方式 菜单“插入/Web组件” 在组件类型中选择 “高级控 件”，在“选择一个控件”中选 择 “插件”。在“插件属性”对 话框中设置音频或视频文 件数据源。 选中目标，链接到声音文件或视频文件,20,插入层,层是网页元素的定位技术，可以放置大部分的页面元素，如文本、图像、动画
5、等等 层可以放在网页的任何位置，用插入层的方法可以随心所欲地安排网页上各种元素的位置。 菜单“插入/层”,21,插入代码,菜单“插入/文件” 将光标放在要插入代码文件处，选择菜单“插入/文件”命令，在弹出的对话框中改变文件类型为所有文件（*.*），选择代码文件，按下“打开”按钮。（插入代码文件后，不能立刻看到效果，必须保存网页后，在浏览器中看到效果）,22,表单,23,表单,菜单“插入/表单”,1、插入表单元素后，因根据题意双击表单元素，设置属性。 2、所有表单元素必须插在一个虚框里，否则下面的按钮对整个表单不起作用,24,超链接,25,链接到文件或网页,菜单“插入/超链接“： 在网页中为文字
6、或图形建立超链接 ，链接到文件或网页 目标框架：用于选择链接的目标内容显示在哪一个窗口中。 网页默认值：当前窗口。 新建窗口：新建一个空白窗口显示内容 。,26,链接到书签,菜单“插入/超链接“： 在网页中为文字或图形建立超链接 ，链接到该网页自身某个特定位置（即书签位置）。 菜单”插入/书签”，先在特定位置上设置书签。,27,链接到电子邮箱,菜单“插入/超链接”： 在网页中为文字或图形建立超链接，可给指定的邮件地址发送邮件。,28,热点链接,可以在图片上设置某一区域，称为热点，设置超级链接。 热点设置：菜单 “视图/工具栏/图片”，打开图片工具栏,各种形状热点,29,表格,30,插入表格,菜
7、单“表格/插入/表格” 大小： 设置行数和列数 布局： 设置对齐方式、宽 度等 边框： 设置边框线粗细等 背景： 设置表格的背景颜色和图片,31,表格和单元格属性,将光标放在表格内任意一个单元格，快捷菜单选择“表格属性”，就可修改表格属性。 将光标放在要修改的单元格，或选中几个要修改的单元格，快捷菜单选择“单元格属性”，就可修改单元格属性,32,合并、拆分单元格、 调整行高和列宽,选中要操作的单元格、行或列，在菜单“表格”中选择命令,33,布局,34,框架网页,菜单“新建”，在右侧打开的“新建”任务窗格中选择“其他网页模板”，在打开的“网页模板”对话框中选择“框架网页”选项卡，再根据题意选择框
8、架类型。,35,设置框架网页属性,将光标分别放在不同的网页中，通过菜单“框架/框架属性”，根据题意设置各网页的属性，如框架名称、框架大小。 按“框架网页”按钮，可设置框架边框粗细,36,设置网页内容,按“新建网页”按钮：制作网页。 按“设置初始网页”，选择一个已有的网页。,37,保存框架网页,保存各个网页(除非网站上已有的网页) 把光标放在网页中, 菜单“文件/保存网 页”，在弹出的对 话框中依次输入文 件名，保存各网 页，最后保存框架集。,38,布局表格,在网页中，菜 单“表格/布局表 格和单元格”， 在右侧打开的 任务窗格中， 根据题意在表 格布局中选 择布局，然后根 据题意单击边框 数字
9、旁的下拉箭 头改变行高和列 宽。,39,添加网页动态效果,40,字幕,字幕特点：文字在 屏幕上滚动。 菜单“插入/Web组件” 在组件类型中选择 “动态效果”，在“选 择一种动态效果”中 选择“字幕”。在“字 幕属性”对话框中设 置字幕属性：字幕 的文本内容、字幕 滚动方向，表现方 式等,41,交互式按钮,交互式按钮的特点： 在按钮上移动鼠标， 按钮和按钮上的文 字会改变颜色，单击 按钮会链接到其他内 容。 菜单“插入/交 互式按钮” 在“交互式按钮”对话 框中设置按钮属性。,42,DHTML效果,菜单“视图/工具栏/DHTML效果” DHTML效果的特点：对文字、图片等选择一种事件，如单击、
10、双击、鼠标悬停等，会产生动态效果，如飞出、交换图片、格式改变等,43,网页操作例题 1、利用C:kswy1文件夹中的素材（图片素材在C:kswy1images中，动画素材在C:kswy1flash中），按以下要求制作或编辑网页，结果最终都保存在该文件夹中。 打开主页index.htm，将表格设置成无边框，宽度80，居中，表格中所有单元格内容水平居中，将第一行中的文字移动到表格上方居中，并设置该行文字为黑体，24磅，绿色、加粗。 分别合并表格中第1、5、7行所有的单元格，然后按样张分别在这3行中插入水平线，将中间的水平线设置为宽度90%，高度3像素，颜色为蓝色；另2根水平线宽度高度为默认，颜色为
11、红色。合并表格第1列的2、3、4行，并在其中插入动画sh.swf，设置动画的宽度和高度分别为250和180像素，背景为透明。 将第3列的第2行至第4行进行单元格合并后，在其中插入图片topL.jpg，将其宽度和高度都设置为150像素，设置单击图片上的“东方明珠”建筑能在新建窗口中打开chapter.htm网页。 按样张在“旅游反馈”下面插入一个表单，在表单的第1行输入“昵称：”及相应的单行文本框，字符宽度为20，表单的第2行输入“反馈：”及多行文本区，字符宽度为18，行数为3，表单的第3行居中插入“提交”与“清除”两个按钮，使它们分别能进行提交表单和清除表单。 设置网页背景为bj.gif，背景
12、图片不随网页滚动而滚动，将网页最下方的文字设置为10磅，并按样张在其后添加”联系我们”，然后设置“联系我们”链接到邮箱地址。在表格第一行插入JavaScript代码文件cjc1.txt ，显示系统的日期和时间。,44,45,2、利用C:KSwy2文件夹中的素材（图片素材在C:kswy2images中, 动画素材在C:kswy2flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。 （1）打开主页index.htm ,设置网页属性：标题为“绿色家园”，背景颜色为#006600。将标题“环保纪念日”和“历年世界环境日主题”设置成隶书、加粗、18磅、#FFFF00。为“环保纪念日”的内容添
13、加编号，编号及文字内容均为14磅白色楷体；为“历年世界环境日主题”的内容添加白色项目符号，项目符号及文字内容均为14磅白色宋体。 （2）插入一水平居中对齐的2行2列的表格，边框粗细、单元格边距、间距均为0，指定宽度90%，将表格第一行的行高设置为50像素，第一行单元格内容水平居中对齐；第二行单元格内容顶端对齐；第一列的列宽设置为40%，第二列的列宽设置为60%；并将网页中文本分别移动到对应的单元格内。 （3）在网页的最上方，插入一个2行2列的表格，设置表格属性：水平居中对齐，边框粗细、单元格边距、间距均为0，指定宽度90%，表格背景图像设为：bj1.jpg，设置所有单元格属性为水平和垂直都居中
14、，将第一列的列宽设置为20%，并合并单元格，将第2行第2列的单元格拆分为5列，列宽分别为：15%、15%、20%、15%、15%。在网页最上方表格的第1列和第2列的第2行分别输入文本，设置“Green Garden”文字属性为：Comic Sans MS、粗斜体、36磅、黄色，其余文字为宋体、常规、14磅、白色。 （4）在网页的最上方表格的第1行第2列单元格中插入图片greengarden.jpg；在表格最下方插入1行2列表格，表格水平居中，边框粗细、单元格边距、间距均为0，表格宽度为50，分别插入图片flower.gif和plant.jpg，在plant.jpg图片上插入36磅的黄色隶书文本
15、“保护环境”；将plant.jpg，宽度450像素，高度设置为120像素。 （5）将最上方表格中的文本“绿色教育”替换为图像lsjy.jpg，并设置鼠标单击图像时，图像交换为lsjy1.jpg；利用文本文件sbtx.txt中的JavaScript代码制作鼠标特效。设置文本“环保知识竞赛”与网页page4.htm建立超级链接。设置单击文本“参赛报名”后能下载“csbmd.doc”文件。 设置超级链接的颜色为红色。,46,47,3、利用C:KSwy3文件夹中的素材（图片素材在wy3images中，动画素材在wy3flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。(1) 打开主页ind
16、ex.htm。设置网页标题为：汽车天地；设置网页背景图像为tu03.jpg，背景图片不随网页滚动而滚动。并在index.htm网页第1行插入一个3行3列的表格。设置表格属性：对齐方式水平居中、指定宽度为632像素、边框线宽度0、单元格边距为0、单元格间距0，合并第1行所有单元格，合并第3行第1列和第2列，设置表格内第一列所有单元格属性为水平和垂直均居中。(2) 在表格的第1行中插入字幕“驾驭汽车 行走无疆”，字体颜色为红色，大小24磅，背景颜色为黄色，字幕方向向右，表现方式为交替。在表格第2行第1列单元格插入图片tu02.jpg，在表格第2行第3列单元格插入图片tu01.jpg，并将这两个单元
17、格的列宽都设置为与图片等宽，在表格的第3行第1列单元格插入动画qc.swf，设置宽为362像素，高为120像素，将动画背景设为透明，并将此单元格设为枣红色（#993300）。(3) 根据样张在表格的第3行第2列单元格插入文本文件“ty.txt”中的文本并编辑，字体设置为隶书、12磅，颜色为枣红色（#993300）。在表格下方输入文字“回到页首”，文字为隶书、12磅，居中，单击文字，能回到页首。(4) 根据样张在表格的第2行第2列单元格插入表单，利用文本文件“汽车知识题库.txt”中的内容，按样张插入并编辑，添加相应的表单元素，文字字体设置为10磅；在表单下方将两个按钮设置为提交和重置，并按样张
18、设置在表单下方居中。(5) 在表格第2行与第3行间插入行（该行包含3个单元格），依次插入一个交互式按钮、艺术字和图片。交互式按钮要求按钮文本为“汽车网站”，按钮样式为“浮雕胶囊1” ，字体为华文行楷、字号为14，颜色为红色，宽110，并链接到“http:/；艺术字的文本为“绿色汽车”，选字库第3行第1列的格式，特效为鼠标单击后向页面左下方飞出；图片名为tu04.jog。,48,49,1、利用C:KSwy4文件夹中的素材（图片素材在wy4images中，动画素材在wy4flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。 （1）打开主页index.html。设置网页标题为：云计算；按
19、样张设置网页背景色为浅蓝色（#E7F4FE）。设置表格属性：对齐方式水平居中、边框线宽度为0。 （2）按样张设置表格第一行的背景色为深蓝色（#000099），添加文字：云计算，并设置文字的字体为幼圆，文字的颜色为白色（#FFFFFFF），文字的大小为72pt。 （3）按样张在“对于云计算，您更看好的是？“的提问后的表单中设置“对公有云更看好“、“对私有云更看好 “、“二者前景都很看好“、“二者前景都不看好“四个单选按钮，默认选中“对私有云更看好“；在“理由：“右边添加文本框；在表单最下方居中添加“提交“与“重置“按钮。 （4）在表单下方插入图片：cloudy.gif，图片大小设置为宽：221像
20、素，高96像素，将图片中的文字“云”链接到站点中的“cloud.html“ ，且能在新窗口中看到“cloud.html“的网页内容。 （5）按样张在表格下方添加水平线，并设置水平线的宽度为1000像素，居中。设置最后一行文字颜色为灰（#808080）、大小为 12磅（或16像素），设置“友情链接“链接到http:/。设置超链接颜色为紫红色(#FF00FF)。在网页的任意位置插入JavaScript代码文件wellcome.txt。,网页操作习题,50,51,2、利用C:KSwy5文件夹中的素材（图片素材在wy5images中，动画素材在wy5flash中），按以下要求制作或编辑网页，结果保存在
21、该文件夹中。 （1）打开主页index.htm，设置网页背景图像为bj.jpg，图像不随网页的滚动而滚动.设置网页中的表格属性：对齐方式为居中对齐、边框线宽度及单元格间距均为0，指定宽度为95%，分别将表格第3、4、5行的第2列到第5列的所有单元格合并。 （2）根据样张在表格第1行的第1列单元格插入图片hs.jpg，使图片居中，设置宽为150像素，高为120像素，设置图片hs.jpg中的“黄山“2个字的热点区域链接到fb.txt。 （3）在表格的第1行第2列单元格中插入动画hs.swf，并使其居中、宽为800像素、高为120像素；根据样张在表格的第2行第2列单元格插入水平线。 （4）设置水平线
22、宽度为90%，高度5像素，居中，蓝色（#0000FF）。第3行第2列单元格中插入文本文件“fb.txt“中的内容，首行空2个字符。按样张设置空心圆项目符号。 （5）根据样张在表格的第5行第2列插入“Copyright2005-2006黄山风景区管委会“，并超链接到http:/ 利用C:KSwy6文件夹中的素材（图片素材在wy6images中，动画素材在wy6flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。 (1) 在该网站中建立框架网页，框架类型为“自顶向下的层次结构”，框架网页文件名为index.htm。框架内的上、中、下网页文件名分别为top.htm，middle.htm和
23、bottom.htm，上、中、下框架的高度在框架网页的比例分别为40%、30%和30%，并使框架边框显示为2像素。 (2) 按样张在top.htm网页中插入2行1列表格，边框线宽度0、单元格边距为0、单元格间距0，设置表格水平居左，宽度为80。在第1行插入字幕“跨越欧亚的国度”，方向向右。第2行插入字幕“展现别样风情的俄罗斯”，方向向左，字幕文字均为幼园，24磅，红色。网页背景图片为bj3.jpg，并设置为水印。 （3）在middle.htm网页中插入3行3列表格，边框线宽度0、单元格边距为0、单元格间距0，所有单元格属性为水平和垂直均居中。设置第1列列宽为60%，合并表格第1列所有单元格，依
24、次插入图片zao5.gif、zao4.gif和zao5.gif，设置第2列和第3列列宽为20%。按样张在表格上方、第2列和第3列插入文字，所有文字都为宋体、14磅、红色。 （4）把middle.htm网页中的文字建立超链接。“红场”与hc.jpg建立超链接，目标框架为“整页”，“圣瓦西里大教堂”与swxl.jpg建立超链接，目标框架为“top”，“冬宫”与 dg.jpg建立超链接，目标框架为“middle”，“夏宫”与xg.jpg建立超链接，目标框架为“新建窗口”。设置超链接的颜色为蓝色，已访问的超链接颜色为绿色。 （5）在bottom.htm 网页中插入文件zswd.txt，居中，按样张插入表单项，文字均为宋体、12磅，黑色。,54,
