网页元素定位技术.pptx

第一章 网站构建入门第二章 网页基本内容设计第三章 页面元素定位技术第四章 样式应用第五章 表单设计第六章 流媒体及行为的应用第七章 服务器技术第八章 网站的发布管理第1页/共28页主要内容利用层定位页面元素2利用表格定位页面元素1利用布局视图设计页面布局3第2页/共28页利用表格定位页面元素插入表格编辑表格设置属性选择表格及其元素调整表格单元格大小 添加和删除行和列拆分单元格合并单元格设置表格属性设置行列单元格属性第3页/共28页插入表格插入|表格第4页/共28页行数：输入新建表格的行数列数：输入新建表格的列数表格宽度：表格宽度，单位：像素百分比边框粗细：表格边框的宽度单元格边距：单元格内容和单元格边界之间的像素单元格间距：单元格之间的像素数页眉：可以定义表头样式标题：定义表格的标题对齐标题：定义表格标题的对齐方式摘要：对表格进行注释第5页/共28页添加内容到单元格第6页/共28页编辑表格选择表格及其元素选择整个表格选择指定单元格单击table标记选择表格第7页/共28页编辑表格调整表格和单元格大小调整列宽调整行高调整表格宽调整表格高同时调整表格宽和高第8页/共28页编辑表格添加和删除行列第9页/共28页编辑表格拆分合并单元格第10页/共28页设置属性设置整个表格属性v背景颜色：表格的背景颜色v背景图像：表格的背景图像v边框颜色：表格的边框颜色v填充：单元格内容和单元格之间的像素数v间距：相邻单元格之间的像素数v边框：设置表格边框的宽度第11页/共28页设置属性设置行列单元格属性第12页/共28页补充表格HTML标记 tr      heightwidthborderbordercolorbgcolortabletrtd第13页/共28页练习第14页/共28页练习第15页/共28页利用层定位页面元素插入层创建层层基本操作插入层拖放层 绘制层选择层调整层大小激活层移动层层属性设置第16页/共28页创建层插入层：把光标放置文档窗口想要插入层的位置，选择 插入|层拖放层：把绘制层的按钮从插入栏拖到文档窗口绘制层：在插入栏中单击绘制层按钮，在文档窗口中拖拽 鼠标画出一个层第17页/共28页层基本操作激活层要在层中插入文字，图像，先要激活层鼠标指针移至层内任何位置单击插点置于层内，输入文字和图像第18页/共28页层基本操作选择层要对层进行移动，调整大小，先要选择层选择一个层，选择多个层，shift第19页/共28页层基本操作调整层大小，移动层Ctrl+方向键可以对层进行微调大小第20页/共28页层基本操作层属性设置第21页/共28页补充：层的可见性层的堆叠顺序层和表格转换第22页/共28页补充层HTML标记第23页/共28页练习采用所给网页素材，利用层进行网页设计和布局第24页/共28页利用布局视图设计页面布局第25页/共28页选择左侧框架左边保存为left.html右边保存为fight.html再创建几个要显示的字页面设置超链接运行时候再保存主框架第26页/共28页第27页/共28页感谢您的观看！第28页/共28页