计算机一级辅导-网页设计.ppt

1,网页操作要点,站点的建立和管理：新建站点和网页打开网站和网页文本的格式：字体段落的格式项目符号与编号页面属性：网页标题、背景音乐、背景图片(水印)、背景颜色、默认文本色、超级链接颜色等。插入：插入图像插入艺术字插入FLASH动画插入音频和视频（插件、链接）插入水平线插入层插入代码,2,超链接：文本和图像的超链接电子邮件链接书签的命名与链接图像的热点链接。表格：插入表格表格和单元格的属性合并与拆分单元格、调整行高和列宽表单：插入表单、插入表单的文本域（文本框、文本区）、复选框、选项按钮、下拉框、按钮。网页布局：框架网页表格布局添加网页的动态效果：字幕交互式按钮DHTML效果等。,网页操作要点,3,站点的建立和管理,4,新建站点或网页,菜单“文件/新建”,5,打开网站,菜单“文件”/“打开网站”,在“打开网站”的对话框中的“查找范围”中分别选择C:、KS、WY1，然后单击”打开“按钮。,6,打开网页,有些题目是打开一个已存在的网页文件，进行编辑，然后保存。如打开index.htm。只要在文件夹列表里双击index.htm文件名就可打开此网页，进行编辑。,7,文本的格式,8,菜单“格式/字体”：设置字体、字形、大小、颜色、效果菜单“格式/段落”：设置对齐方式、缩进、段落间距菜单“格式/项目符号与编号”：设置项目符号与编号方式,文本的格式,9,页面属性,10,页面属性,设置网页属性命令：把光标放在网页的空白处，1、快捷菜单中选择“网页属性”2、菜单“格式/属性”3、Alt+Enter,11,页面属性,设置标题：设置背景音乐：,12,背景：设置背景图片选中使其成为水印可使背景图片不随网页滚动而滚动颜色：设置网页背景颜色和文本颜色设置超级链接相关颜色等。,页面属性,13,插入,14,菜单“插入/图片/来自文件”菜单“插入/图片/剪贴画”选中图片,在快捷菜单中选择“图片属性”设置图片的环绕样式、布局、大小以及图片的超级链接,插入图像,15,插入艺术字,菜单“插入/图片/艺术字”在“艺术字工具栏”里可设置艺术字格式、形状等,16,插入FLASH动画,菜单“插入/图片/Flash影片”双击插入的Flash影片，设置属性：影片背景色对齐方式布局大小,17,插入水平线,菜单“插入/水平线”双击水平线，设置水平线属性：大小对齐方式颜色,18,插入音频和视频,2种方式菜单“插入/Web组件”在组件类型中选择“高级控件”，在“选择一个控件”中选择“插件”。在“插件属性”对话框中设置音频或视频文件数据源。选中目标，链接到声音文件或视频文件,19,插入层,层是网页元素的定位技术，可以放置大部分的页面元素，如文本、图像、动画等等层可以放在网页的任何位置，用插入层的方法可以随心所欲地安排网页上各种元素的位置。菜单“插入/层”,20,插入代码,单击网页下面的代码，将代码文件全部复制粘贴到的后面，在浏览网页时可看到代码的效果,21,表单,22,表单,菜单“插入/表单”,1、插入表单元素后，因根据题意双击表单元素，设置属性。2、所有表单元素必须插在一个虚框里，否则下面的按钮对整个表单不起作用,23,超链接,24,链接到文件或网页,菜单“插入/超链接“：在网页中为文字或图形建立超链接，链接到文件或网页 目标框架：用于选择链接的目标内容显示在哪一个窗口中。网页默认值：当前窗口。新建窗口：新建一个空白窗口显示内容。,25,链接到书签,菜单“插入/超链接“：在网页中为文字或图形建立超链接，链接到该网页自身某个特定位置（即书签位置）。菜单”插入/书签”，在特定位置上设置书签。,26,链接到电子邮箱,菜单“插入/超链接”：在网页中为文字或图形建立超链接，可给指定的邮件地址发送邮件。,27,热点链接,可以在图片上设置某一区域，称为热点，设置超级链接。热点设置：菜单“视图/工具栏/图片”，打开图片工具栏,各种形状热点,28,表格,29,插入表格,菜单“表格/插入/表格”大小：设置行数和列数布局：设置对齐方式、宽度等边框：设置边框线粗细等,30,表格和单元格属性,将光标放在表格内任意一个单元格，快捷菜单选择“表格属性”，就可修改表格属性。将光标放在要修改的单元格，或选中几个要修改的单元格，快捷菜单选择“单元格属性”，就可修改单元格属性,31,合并、拆分单元格、调整行高和列宽,选中要操作的单元格、行或列，在菜单“表格”中选择命令,32,布局,33,框架网页,菜单“新建”，在右侧打开的“新建”任务窗格中选择“其他网页模板”，在打开的“网页模板”对话框中选择“框架网页”选项卡，再根据题意选择框架类型。,34,设置框架网页属性,将光标分别放在不同的网页中，通过菜单“框架/框架属性”，根据题意设置各网页的属性，如框架名称、框架大小。按“框架网页”按钮，可设置框架边框粗细,35,设置网页内容,按“新建网页”按钮：制作网页。按“设置初始网页”，选择一个已有的网页。,36,保存框架网页,保存各个网页(除非网站上已有的网页)把光标放在网页中,菜单“文件/保存网页”，在弹出的对话框中依次输入文件名，保存各网页，最后保存框架集。,37,布局表格,在网页中，菜单“表格/布局表格和单元格”，在右侧打开的任务窗格中，根据题意在表格布局中选择布局，然后根据题意单击边框数字旁的下拉箭头改变行高和列宽。,38,添加网页动态效果,39,字幕,字幕特点：文字在屏幕上滚动。菜单“插入/Web组件”在组件类型中选择“动态效果”，在“选择一种动态效果”中选择“字幕”。在“字幕属性”对话框中设置字幕属性：字幕的文本内容、字幕滚动方向，表现方式等,40,交互式按钮,交互式按钮的特点：在按钮上移动鼠标，按钮和按钮上的文字会改变颜色，单击按钮会链接到其他内容。菜单“插入/交互式按钮”在“交互式按钮”对话框中设置按钮属性。,41,DHTML效果,菜单“视图/工具栏/DHTML效果”DHTML效果的特点：对文字、图片等选择一种事件，如单击、双击、鼠标悬停等，会产生动态效果，如飞出、交换图片、格式改变等,42,1、利用C:kswy1文件夹中的素材（图片素材在C:kswy1images中，动画素材在C:kswy1flash中），按以下要求制作或编辑网页，结果最终都保存在该文件夹中。打开主页index.htm，将表格设置成无边框，宽度80，居中，表格中所有单元格内容水平居中，将第一行中的文字移动到表格上方居中，并设置该行文字为黑体，24磅，绿色、加粗。分别合并表格中第1、5、7行所有的单元格，然后按样张分别在这3行中插入水平线，将中间的水平线设置为宽度90像素，蓝色；合并表格第1列的2、3、4行，并在其中插入动画是sh.swf，设置动画的宽度为250，高为180，背景为透明。将第3列的第2行至第4行进行单元格合并后，在其中插入图片topL.jpg，将其宽度和高度都设置为150像素，设置在图片的“东方明珠”上单击能在新建窗口中打开chapter.htm文档。按样张在“旅游反馈”下面插入一个表单，在表单的第1行输入“昵称：”及相应的单行文本框，字符宽度为20，表单的第2行输入“反馈：”及多行文本框，字符宽度为30，行数为3，表单的第3行居中插入“提交”与“清除”两个按钮，使它们分别能进行提交表单和清除表单。设置网页背景为bj.gif，将网页最下方的文字设置为10磅，并按样张在其后添加”联系我们”，然后设置“联系我们”链接到邮箱地址。,网页操作例题,43,44,2、利用C:KSwy2文件夹中的素材（图片素材在C:kswy2images中,动画素材在C:kswy2flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。打开主页index.htm，在表格第2行第2列插入字幕“历史巨片值得期待”，并设置文字的字体：黑体、字号：14磅、颜色：#999999，且加粗。按样张在表格第3行与第4行间插入行（该行包含两个单元格），在插入行的左边第一个单元格中插入图片“images/专辑精选.jpg”，设置图片的宽度：185px，高：32px，水平边距（水平间距）：20px，并将该行行高设置为根据内容自动调整。为表格第3行的图片3.jpg插入文字“影片剧照”，文字格式为：隶书、24磅、红色。为表格第三行的“故事梗概”与“主要演员”文本设置默认的项目符号，设置“故事梗概”链接到站点中的“故事梗概.htm”，且能在独立的窗口中看到“故事梗概.htm”的网页内容。设置单击“主要演员”能下载网站中的“主创人员.doc”文件。按样张在表格第3行第2列的右下方插入二项单选项：“我想看”与“我没兴趣”，且“我想看”的初始状态为“已选”，“我没兴趣”的初始状态为“未选”，将此单元格中更改后的文本都设置为与原有段落文字相同的格式。设置网页标题为“影视大学”，按样张在表格的下方添加水平线，设置水平线高度为1px（像素）；在水平线的下方添加一行文字“影视大学网站 联系我们”，设置文字的字号：10磅，且居中；设置“联系我们”链接到邮箱地址。,45,46,3、利用C:KSwy3文件夹中的素材（图片素材在wy3images中，动画素材在wy3flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。打开主页index.htm。设置网页标题为：汽车天地；设置网页背景图像为tu03.jpg，背景图片不随网页滚动而滚动。并在index.htm网页第1行插入一个3行3列的表格。设置表格属性：对齐方式水平居中、指定宽度为浏览器窗口的632像素、边框线宽度0、单元格边距为0、单元格间距0，合并第1行所有单元格，合并第3行第1列和第2列，设置表格内第一列所有单元格属性为水平和垂直均居中。在表格的第1行中插入水平线，设置其高度为3像素，带阴影；在表格第2行第1列单元格插入图片tu02.jpg，在表格第2行第3列单元格插入图片tu01.jpg，并将这两个单元格的列宽都设置为与图片等宽，在图片tu01中汽车热点区域链接到ds.htm，并使该页面能在新窗口中打开；在表格的第3行第1列单元格插入动画qc.swf，设置宽为362像素，高为120像素，将动画背景设为透明，并将此单元格设为枣红色（#993300）。根据样张在表格的第3行第2列单元格插入文本文件“ty.txt”中的文本并编辑，字体设置为隶书、12磅，颜色为枣红色（#993300）。在表格下方输入文字“回到页首”，文字为隶书、12磅，单击文字，能回到页首。根据样张在表格的第2行第2列单元格插入表单，利用文本文件“汽车知识题库.txt”中的内容，按样张插入并编辑，添加相应的表单元素，文字字体设置为10磅；在表单下方将两个按钮设置为提交和重置，并按样张设置在表单下方居中。,47,48,1、利用C:KSwy4文件夹中的素材（图片素材在wy4images中，动画素材在wy4flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。(1)打开主页index.htm，在第一行输入文字“海宝的设计”，居中、字体设置为黑体、24磅，颜色为蓝色（#0000FF）；设置网页背景颜色代码为：#FFCC66。(2)在网页第2行插入一个3行2列的表格。设置表格属性：对齐方式为水平居中、指定宽度为浏览器窗口的80%、边框线宽度0、单元格边距为0、单元格间距0，设置表格内第一和第二行所有单元格属性为水平和垂直均居中。(3)在表格的第1行第1列单元格插入图片HB.jpg，将图片设置宽为100像素，高为150像素；在表格第1行第2列单元格插入动画HB.swf，动画设置宽为600像素，高为150像素。(4)分别合并表格第2行的第1列和第2列、第3行的第1列和第2列，并在第2行中插入水平线，设置其高为10像素、宽为400像素，无阴影。(5)根据样张在表格的第3行插入文本文件“海宝的设计.txt”中的内容并编辑，字体设置为宋体、14磅，对“海宝的设计-上海世博会吉祥物面世全程”设置超链接，并居中。文字下面分别插入图片Email.gif，在两个图片之间输入“上海世博会事务协调局局长信箱”，居中显示，并将文字链接到电子邮箱“”。在网页中通过HTML文本插入二段Javascript代码，一段Javascript代码在文件wellcome.txt中,另一段在date1.txt中。,网页操作习题,49,50,2、利用C:KSwy5文件夹中的素材（图片素材在wy5images中，动画素材在wy5flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。(1)打开主页index.htm。设置网页标题为：股民调查；设置网页背景图片为Bj.jpg。不随网页滚动而滚动，设置超链接的颜色为红色，已访问的超链接颜色为绿色。并在index.htm网页第1行插入一个3行2列的表格。(2)设置表格属性：对齐方式水平居中、指定宽度为浏览器窗口的90%、边框线宽度0、单元格边距为0、单元格间距0，设置表格背景颜色为黄色（#FFFF00）；合并表格第2列的第2行和第3行，合并后单元格水平垂直均居中。(3)在表格的第1行第1列单元格插入图片Szzs.jpg，并设置第1列列宽与图片的宽度相同；在表格的第2行第1列单元格中插入水平线，设置其高度为5像素，没有阴影；在表格的第2行第2列单元格中输入“与我联系”，并使其链接到邮箱。(4)根据样张在表格的第3行第1列单元格插入文本文件“股票知识.txt”中的文本并编辑，字体设置为隶书、10磅，颜色为紫红色（#993399）。(5)根据样张在表格的第1行第2列单元格插入表单，参照文本文件“股民调查.txt”中的文本，按样张插入并编辑，字体设置为宋体、12像素（或10磅），颜色为蓝色（#0000FF）；“您的股龄”列表值为5年以下、6-10年、11年以上，默认为6-10年；在表单下方将两个按钮设置为提交和重置，并按样张设置在表单下方居中。,51,52,3、利用C:KSwy6文件夹中的素材（图片素材在wy6images中，动画素材在wy6flash中），按以下要求制作或编辑网页，结果保存在该文件夹中。(1)在该网站中建立框架网页，框架类型为“自顶向下的层次结构”，框架网页文件名为index.htm，替代原来的index.htm主页。框架内的上、中、下网页文件名分别为top.htm，middle.htm和bottom.htm，上、中、下框架的高度在框架网页的比例分别为25%、50%和25%，并使框架边框显示为2像素。(2)按样张在top.htm网页中插入二张图片，一张名为bar11.gif图片，另一张为adv3.jpg。图片居中。按样张在top.htm中插入一个1行3列的表格，如样张输入文字并设置三个超链接，“主页”与index.htm链接，目标框架为“整页”；“查询”与xjh.jpg相链接，目标框架为middle；“电子邮件”与电子信箱链接，邮件地址为。(3)在middle.htm网页中插入两个1行2列的表格，表格宽度为95%，按样张分别在各单元格中插入test6.txt文件的内容和文件名为tp61.gif和tp62.gif图片。(4)在middle.htm网页中的图片添加特效：在图片tp61.gif添加一个鼠标双击后向页面左下方飞出的效果，在图片tp62.gif添加一个鼠标悬停时交换图片的效果，交换图片名为“xjh.jpg”。(5)bottom.htm网页背景为bar41.gif，背景不随网页滚动而滚动。在该网页中添加一个“交互式按钮”，按钮上的文字为“月圆园”，其字体为Arial，加粗，字号为14，颜色为红色，链接到“top.htm”，目标框架为整页，按钮颜色为黄色，宽度为120像素，高度为24像素。在该网页的交互式按钮下面插入艺术字“月圆园”，艺术字格式为第4行第5列，形状为波形1，艺术字具有动态效果，其效果为：当鼠标单击该文本时，将显示边框设置为方框中的“凸线”，颜色为蓝色，宽度为4，其底纹背景色为“黄色”，前景色为“自动”。,53,