现代网页设计及网络建设技术 作者 黄建华 第5章 DREAMWEAVE MX.pptVIP

* * * * * * * * * 5.7 表格的应用 1．表格制作 表格是现代网页制作的一个重要组成部分，可以实现网页的精确排版和定位。 2．表格操作 对表格操作的几种常用方式。 （1）合并：将选中的连续单元格合并成为一个单元格； （2）分割：将一个单元格分割成若干单元格； （3）水平对齐方式：分为（左）、（中）、（右）三种； （4）垂直对齐方式：分为（顶）、（居中）、（居底）、（基线对齐）。 网页中的表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键，在右键菜单中选择“表格选项” →“插入行或列”，在对话框里填入数据即可。 3．选中表格中的各种元素操作 （1）选中一行，把光标移到该行的最左边单元格的左面，光标会自动变成箭头状，单击就可以选中一行。 兰州石化职业技术学院 5.7 表格的应用 （2）选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。 （3）选中整张表格，把光标移到表格的左上角或右边框或下边框线上，单击即可选中整幅表格。选中的表格还会在周围出现一个黑框，表示整张表格选中了。 （4）选中单元格，单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格；选不连续的单元格：按住Ctrl键，点取所需要的单元格即可。 兰州石化职业技术学院 5.8 版式设计 设计精美的网站，都是采用了优秀的版式设计。做一个网页，先要规划好版式。 1.常用的版式 （ 1）LOGO（标志）尺寸，Banner（横幅）尺寸，这是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。 （2）中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。 （3）下面一个表格，一行一列，放版权声明。 2.导航栏 导航栏在网页的设计中，直接关系到使用网页的方便和整个网页的美观。如果是以内容为主的网页，直接放入文字作为栏目，以键盘上的“|”分隔，一行一列的表格，如果栏目多，可以变成二行一列的表格。常见于门户网站，如 如果内容很多，兼顾美观，推荐使用弹出式菜单，在Dreamweaver MX中文版中可以直接做出弹出式菜单。 兰州石化职业技术学院 5.9 创建模板 1.创建模板 打开示例站点中已经建好的index.htm文件，打开“文件”，单击“另存为模板”，如图5－40所示。 2.基于模板创建页面 （1）打开“文件”菜单，单击“新建”，如图5－41所示。 （2）打开“模板”选项卡，选择模板文件，单击“创建”按钮，如图5－42所示。 （3）在里面输入网页的内容输入内容后，单击“文件”菜单中的“保存”，选择保存路径，一个页面就做好了。 图5－40 图5－41 图5－42 兰州石化职业技术学院 5.10 CSS CSS是Cascading Style Sheet的英文缩写，中文为层迭样式表，它是W3C协会为补充HTML在显示属性设置上的不足而制定的一种格式化网页的标准，它可以定义网页相关组件的各种属性的变化。样式表最大的优点就在于把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式，如文字的大小、对齐方式、颜色、区块变化、类和层等网页中的概念。 CSS它具有以下特点： 1）网页格式、结构和网页内容分开编辑，从宏观上控制页面的结构布局。 2）网页维护和更新网页效率高。 3）代码简洁，体积小。 4）具有一定的兼容性，但目前必须在IE4.0以上的浏览器软件才能支持CSS技术，在制作时要特别注意这个问题。 兰州石化职业技术学院 5.10 CSS 1．样式表的分类 一般情况下，层叠样式表可以分为三种。内联式样式表、嵌入式样式表和外部样式表。 （1）外部样式表是将样式表作为一个独立的文件保存在计算机上，其文件的扩展名为“.CSS”。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素。 如： H1｛font-family:″宋体″； font-weight:bold； font-size:50px； color:#ff00ff；} 这是针对标题1有关属性的设置参数，在网页中如果有标题1，所有的都按此属性显示。在使用时，首先通过LINK元素来链接这个样式文件。 （2）内部样式表是在HTML的程序段中，直接用Style属性将样式表加入到需要控制的信息的标记中。 兰州石化职业技术学院 5.10 CSS 如： ＜p style=″color：#ffff00″我是中国人！＜/p＞