网站开发与设计基础表格和样式表及层行为和时间线框架表单布局及模板等学习教案

1、会计学1网站开发与设计基础网站开发与设计基础 表格和样式表及层表格和样式表及层行为行为(xngwi)和时间线框架表单布局及和时间线框架表单布局及模板等模板等第一页，共73页。2在文档窗口的设计视图中，将插入点放在需要表格出现的位置。方法1：单击“插入”菜单，选择“表格”项，方法2：直接单击插入面板组中的常用(chn yn)面板上的“插入表格”按钮，即会出现“插入表格”对话框，按需要进行相应的参数设置 。第2页/共73页第二页，共73页。3方法1：单击表格的左上角或者单击右边或底部边缘的任意位置。 方法2：单击表格中任意一单元格，然后在文档窗口左下角的标签选择器中选择 table 标签。方法3：

2、单击表格单元格，然后选择“修改(xigi)”菜单下“表格”子菜单下的“选择表格”。 当表格的外边框呈黑色，表示整个表格已经被选中 第3页/共73页第三页，共73页。4方法1：将鼠标指针指向行的左边缘或列的上边缘时，鼠标指针会变为黑色选择箭头时，单击鼠标左键就可以(ky)选择行或列。方法2: 进行拖动以选择多个行或列。 第4页/共73页第四页，共73页。5单击单元格，然后在文档窗口左下角的标签选择器中选择 td 标签。单击单元格，然后选择 “table”标签，则选中表格。 修改(xigi)菜单也可选择。第5页/共73页第五页，共73页。6方法1：从一个单元格拖到另一个单元格。方法2：单击一个单元

3、格，然后按住 Shift 键单击另一个单元格。这两个单元格定义的直线或矩形区域(qy)中的所有单元格都将被选中。连续单元格被选中。 方法2：选择不连续单元格时：按住 Ctrl 键的同时单击要选择的单元格、行或列。 第6页/共73页第六页，共73页。7第7页/共73页第七页，共73页。8第8页/共73页第八页，共73页。9观察：填充（单元格中内容与边框的距离），间距(jin j)（单元格间的宽度），边框改变时的效果。选定表格整体(zhngt)，设置表格整体(zhngt)的属性 设置单元格属性 第9页/共73页第九页，共73页。10表格(biog)的格式化第10页/共73页第十页，共73页。11向

4、表格中插入图片 首先定位。 即设置要插入图片在表格中的位置。选择“插入”菜单的“图像(t xin)”选项或点“插入图像(t xin)”按钮，在弹出的对话框中选择合适的图片，点“确定”按钮即可在表格中插入指定的图片。向表格中添加文字 先定位在添加文本。第11页/共73页第十一页，共73页。12第12页/共73页第十二页，共73页。13第13页/共73页第十三页，共73页。14理解层的概念掌握层的创建、操作与属性(shxng)设置理解行为与事件的概念掌握利用时间线创建动画第14页/共73页第十四页，共73页。15层是HTML内容的容器，是网页中用来(yn li)放置文本、图像、动画、表单、插件等网

5、页元素的载体。利用层能够精确对网页页面元素定位。（例如：左和上（左侧和顶部）指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 ）利用层浮动面版和层属性面版可以控制多个层的叠放次序（z属性）、显示或隐藏层，是否重叠等。 层与时间线配合使用设计出动画效果。第15页/共73页第十五页，共73页。16方法1：单击布局插入栏上的“绘制层”按钮，然后在文档窗口的设计视图中通过拖动来绘制层。或者将布局插入栏上的“绘制层”按钮直接拖动到文档中，即可在文档中放置一个预设大小的层。方法2：将插入点放入文档窗口，然后选择“插入”菜单布局对象下的“层”选项。方法3：若要连续绘制多个层，单击“插入”栏上的“

6、绘制层”按钮。通过按住 Ctrl 键并拖动来绘制各个层。只要(zhyo)不松开 Ctrl，就可以继续绘制新的层。 第16页/共73页第十六页，共73页。17激活层，单击层中任意位置此时光标在层中闪耀，层的左上角出现选择柄，边框线由灰色(hus)变为黑色 ，可向层中添加内容。选中层的多种方法如下: (用于设置层的属性)单击层的标记，可选中相对应的层。先激活层，再单击层左上角的选择柄，可选中该层。单击层的边框，也可选中层。按住Shift键，单击每一个要选中的层，可选中多个层。 第17页/共73页第十七页，共73页。18选择“编辑”菜单(ci dn)中 “首选参数”命令，在打开如图所示的对话框中的“

7、分类”列表框选择“层”选项，则可改变层的默认参数。 第18页/共73页第十八页，共73页。19【层编号】：用于指定一个名称，以便在“层”面板(min bn)和 脚本代码中标识该层。每个层都必须有它自己的唯一名称。 第19页/共73页第十九页，共73页。20【Z 轴】：确定层的 z 轴（即层叠顺序）。编号较大的层出现在编号较小的层的前面（上面）。【显示】：指定该层最初是否是可见的。 “default默认” 选项表示可见的； “inherit继承(jchng)” 选项表示继承(jchng)了父级的可见性属性； “visible可见” 选项表示显示层的内容； “hidden“隐藏” 选项表示隐藏层的

8、内容。 第20页/共73页第二十页，共73页。21【溢出】：当层的内容超过层的指定大小时，层中内容的显示情况。包含以下四种选项： “visible可见”选项表示指示在层中显示额外的内容。 “hidden隐藏” 选项表示不在浏览器中显示额外的内容。 “scroll滚动” 选项表示滚动条永远存在(cnzi)。（运行时可见） “auto自动” 选项表示需要时显示滚动条。第21页/共73页第二十一页，共73页。22通过 “层” 浮动控制面板可以完成对层命名、选定(xun dn)层、修改层的可见性、设置层在堆栈中的叠放次序及设置层嵌套等操作。选择“窗口”菜单(ci dn)下的 “层”选项，出现层控制面板

9、。 创建4个层，如图所示。层显示为按 z 轴顺序排列的名称列表；首先创建的层出现在列表的底部，最后创建的层出现列表的顶部。Z值越大层越在上面。第22页/共73页第二十二页，共73页。23利用层控制面板，可以快速修改(xigi)层名称（双击层名）和层的显示与隐藏（单击，如果显示一个睁眼的图标，表示显示该层；如果显示一个闭眼的图标，表示隐藏该层）改变Z索引值：单击Z列，便可修改该层的层次(cngc)属性值。或者用鼠标拖曳层，也可以调整该层的叠放次序。第23页/共73页第二十三页，共73页。24创建嵌套层：按住Ctrl键，然后(rnhu)在层控制面板中拖曳子层到父层上，当父层上出现黑框时松开鼠标，便

10、可创建一个嵌套层，如图所示，把Layer2拖曳到Layer3上。取消嵌套层：只需用鼠标将子层拖离父层，便可取消嵌套层。第24页/共73页第二十四页，共73页。25第25页/共73页第二十五页，共73页。第26页/共73页第二十六页，共73页。27时间线技术能让网页中的元素随时间变化活动起来，从而创建出多姿多彩的网页动画。（例如：浮动小动画）网页中的动态效果其实质是在网页上依次快速连续地显示与某个图像(t xin)相关联的多幅图像(t xin)，因显示速度较快使人形成图像(t xin)活动的感觉。 时间线动画的单位是帧，每一帧是动画的一幅瞬间图。时间线动画是在特定的时间内、在指定的动画运动轨迹上

11、，显示一系列有关联特性的静态图像(t xin)的组合。时间轴只能(zh nn)移动层！第27页/共73页第二十七页，共73页。第28页/共73页第二十八页，共73页。第29页/共73页第二十九页，共73页。第30页/共73页第三十页，共73页。31第31页/共73页第三十一页，共73页。32第32页/共73页第三十二页，共73页。33n-隐藏层” ，分别选择onMouseover()时显示层，onmouseout()时隐藏层。n（注意如何使层的位置与对象的位置协调！？ ）n第33页/共73页第三十三页，共73页。34第34页/共73页第三十四页，共73页。35第35页/共73页第三十五页，共7

12、3页。第36页/共73页第三十六页，共73页。37第37页/共73页第三十七页，共73页。38第38页/共73页第三十八页，共73页。39第39页/共73页第三十九页，共73页。40第40页/共73页第四十页，共73页。41第41页/共73页第四十一页，共73页。42框架(kun ji)中文件的打开和保存第42页/共73页第四十二页，共73页。43(shxng)设置所有框架和框架集的格式。第43页/共73页第四十三页，共73页。44处理(chl)不能显示框架的浏览器第44页/共73页第四十四页，共73页。45第45页/共73页第四十五页，共73页。46第46页/共73页第四十六页，共73页。4

13、7表单中包含(bohn)的对象：第47页/共73页第四十七页，共73页。48本域和“浏览”按钮。n“按钮”在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。第48页/共73页第四十八页，共73页。49第49页/共73页第四十九页，共73页。50第50页/共73页第五十页，共73页。51第51页/共73页第五十一页，共73页。52第52页/共73页第五十二页，共73页。53n（3第53页/共73页第五十三页，共73页。54布局布局(bj)的创建的创建第54页/共73页第五十四页，共73页。55第55页/共73页第五十五页，共73页。56设置布局视图样式(yngsh)参数通过首选参数对

14、话框可以设置布局视图的相关参数。第56页/共73页第五十六页，共73页。57第57页/共73页第五十七页，共73页。58第58页/共73页第五十八页，共73页。59第59页/共73页第五十九页，共73页。60第60页/共73页第六十页，共73页。61第61页/共73页第六十一页，共73页。62第62页/共73页第六十二页，共73页。63第63页/共73页第六十三页，共73页。64从模板(mbn)分离文档 第64页/共73页第六十四页，共73页。65第65页/共73页第六十五页，共73页。66第66页/共73页第六十六页，共73页。67第67页/共73页第六十七页，共73页。68第68页/共73页第六十八页