第6章框架与表格布局页面分析.ppt

4. 项目实施 5）在网页中插入表格，具体参数为1行1列，宽为100%，高为160像素，填充、间距、边框都为0像素。将光标在单元格中点击一下，然后设置表格的背景图为“mid.jpg”。 6）在网页中再次插入表格，具体参数为3行1列，宽为100%，填充、间距、边框都为0像素。将光标插入到第1个单元格中，设置背景色为“#243569”(蓝色)。高度设为1像素，同时插入“space.gif”到该单元格，第3个单元格设置和第一个相同，设置第2个单元格的背景色为“#E3E3E3”。 7）在第2个单元格中嵌套新表格，具体参数为1行7列，宽为720，高25像素，填充、边框为0像素，间距为1像素，背景色为白色，设置表格单元格的背景色为“#E3E3E3”，依次给单元格中输入“首页”、组织架构”、“学习型班组”、“信息交流”、“组织创建”、“图片浏览”、“关爱社会”等文字，并设置他们的超级链接地址为“index.htm”，如图9-18所示。 4. 项目实施 插入背景图片与导航后的效果 4. 项目实施 8）继续在网页中插入表格，具体参数为1行2列，宽为100%，填充、间距、边框都为0像素，第1列列宽为20%，第2列列宽为80%。 9）在第1列中嵌套一个6行2列的表格，宽为100%。设置1、3、5行中的两列宽分别为30%和70%，高为28像素，背景色为“#E3E3E3”。并在1、3、5行中第1列插入图片“left.jpg”，第2列依次插入“文档搜索”、“分类显示”、“友情链接”。将第2、4、6行合并单元格，单元格的高依次为100像素、80像素、30像素，如图所示。 4. 项目实施 10）在第2行中插入表格3行2列，宽100%，高90像素。第1行的第一个单元格中输入“检索内容”，第2个单元格中插入文本框（表单元素）；第2行的第1个单元格中输入“文件类型”，第2个单元格中插入列表框（表单元素），第3行的第1个单元格中插入查询按钮（表单元素），第2个单元格中插入重置按钮（表单元素）。 11）鼠标在第4行中插入表格2行2列，宽70%，高80%。依次在四个单元格中插入“全部文档”、“组织管理”、“规章制度”、“流程管理”，并设置他们的超级链接为“index.htm”。将光标插入到第6行中，然后插入“互动学习网”，效果如图所示。 4. 项目实施 12）在右边的单元格中嵌套新表格，具体参数为1行7列，宽为771像素，填充、间距、边框为0像素，背景色为白色，采用第7步制作横线的方式，将第2、4、6列宽设置为1像素，背景色设置为“#CCCCCC”，并在其中插入“space.gif”图片。设置第1、3、5、7列宽为192像素。 13）在第1列中嵌套新表格，具体参数为4行1列，宽为177像素，在第1行中插入“pix03.jpg”，第2行中插入“pix003.jpg”，第3行中插入“淮信科技有限公司培训中心，是多…….”，第四行中插入“...more”等内容。采用同样的方法设置第3、5、7列，效果如图所示。 4. 项目实施 14）继续在网页中插入表格，具体参数为2行1列，宽为100%。采用第6步制作横线的方法制作背景色为“#233468”的横线，第2行行高为60像素，插入相关的版权信息。 15）总体调整，在第2行的表格中插入flash透明动画，在导航条中的td标签中插入事件函数： onmouseover=this.style.backgroundColor=#FDB314 onmouseout=this.style.backgroundColor=#E3E3E3“ 调整整个网页的视觉效果。 16）在“设计”调板中附加css文件夹中的“css.css”样式表，保存网页，按F12键预览网页，效果如图所示。 4. 项目实施 5.项目检查与评估 学习目标 评价项目 掌握表格的插入方法 能掌插入各种布局表格 掌握表格的属性设置 能设置表格的各种属性 掌握利用表格制作1像素细线 能利用表格制作1像素细线 掌握间距、边框、边距的使用技巧 能根据需求设置表格的间距、边框、边距 掌握圆角矩形结构布局的方法 能布局表格的圆角形态 掌握百分比布局的技巧 能使用百分比进行布局 6.强化拓展实训：框架中超链接使用 * * 网页设计与制作 主讲：xxx 第六章 框架与表格布局页面 1项目展示与项目目标 掌握在网页中创建框架的方法 掌握为框架命名并导入框架源文件的方法 掌握框架集文件的保存的方法 掌握框架集合集属性与框架属性的设置方法 掌握编辑框架的内容的方法 框架布局页面 2. 项目资讯 关键知识点一：创建预定义框架 新建一个空白文档，执行“查看”→“可视化助理”→“框架边框”命