网页的设计和布局讲座.pptVIP

网站首页设计和布局 浙江省台州中学 * 浙江省台州中学 2006－3 目标定位 1.主题确定 2.资料的收集、整理  3.网站的风格（颜色、栏目） 制作研究性网站之前,最好察看相类似的站点. 说明：网站制作之前，应该先建立站点目录。 网站首页布局 网站LOGO/BANNER 栏目列表区 导航区 网页内容 版权说明 网站首页布局参数说明 1.网站LOGO标志的制作 网站首页布局参数说明 网站LOGO标志的制作 LOGO即是网站的名片,LOGO是与其它网站链接以及让其它网站链接的标志和门户。其中关于网站的LOGO，目前有三种规格：?1. 88*31 这是互联网上最普遍的LOGO规格。2.120*60 这种规格用于一般大小的LOGO。3. 120*90 这种规格用于大型LOGO。 LOGO的制作工具和方法:?好像目前并没有专门制作LOGO的软件，但PHOTOSHOP、Swish等均可来制作。 网站首页布局参数说明 2.网站的宣传海报BANNER的制作 Gif动画 Swf动画 网站首页布局方法 1.利用表格布局版面 2.利用布局来设计版面 一般页面的构架主要是通过表格应用来实现的，表格在网页制作中是一种用途非常广泛而且很重要的工具，比较复杂的网页经常采用表格的嵌套（其实就是在一个单元格中再插入一个表格）。由于目前访问者的浏览器800×600的分辨率使用频率最高，所以在制作网页的过程中，可以将窗口的[宽]定为760像素。 一种更加轻松完成网页制作的功能. 网站首页布局方法 利用表格布局首页版面 1.利用表格布局版面操作步骤 步骤1：首先插入一个4行2列，宽为760像素，高为200像素的表格。并合并部分单元格，合并后如图所示。调整[属性]面板中的表格各参数，使表格居中对齐，背景颜色为白色。 利用表格布局首页版面 1.利用表格布局版面操作步骤 步骤2：执行[修改]| [页面属性]命令，在弹出的[页面属性]对话框中，将[左边距]、[右边距]、[边界宽度]、[边界高度]都设置为0像素。这时可以发现表格已经紧贴在文档上方了。 步骤3：在第一行第一列的单元格中插入“images”目录下的“logo.gif”文件，而第一行第二列的单元格中插入一个SWF的Flash动画 。 步骤4：接下来在表格第二行的单元格内插入一个1行5列的表格，宽为760像素，高为20像素，在[属性]面板中设置“bg1.gif”为背景图片。设置每个单元格的宽度为152像素。在每个单元格中输入作为导航条的内容：“本站首页”、“课前准备”、“课堂导学”、“课后复习”、“相关网站”，将文字颜色设置为白色，并居中对齐。 利用表格布局首页版面 1.利用表格布局版面操作步骤 步骤5：在表格第三行的单元格内插入一个4行2列的表格，宽为760像素，在 单元格中插入“images”文件夹下的“htys.jpg”，后面插入相关文字。其它操作一样。 步骤6：在表格第四行的单元格中，将背景颜色设为“#767d8f”，插入版权符号及相关内容。按F12键预览一下网页的效果。