网页设计和布局讲座.ppt

1、1,网站首页设计和布局,浙江省台州中学 20063,目标定位,1.主题确定 2.资料的收集、整理 3.网站的风格（颜色、栏目） 制作研究性网站之前,最好察看相类似的站点.,说明：网站制作之前，应该先建立站点目录。,网站首页布局,网站首页布局参数说明,1.网站LOGO标志的制作,网站首页布局参数说明,网站LOGO标志的制作 LOGO即是网站的名片,LOGO是与其它网站链接以及让其它网站链接的标志和门户。其中关于网站的LOGO，目前有三种规格：1. 88*31 这是互联网上最普遍的LOGO规格。2.120*60 这种规格用于一般大小的LOGO。3. 120*90 这种规格用于大型LOGO。,LOG

2、O的制作工具和方法:好像目前并没有专门制作LOGO的软件，但PHOTOSHOP、Swish等均可来制作。,网站首页布局参数说明,2.网站的宣传海报BANNER的制作,网站首页布局方法,1.利用表格布局版面,2.利用布局来设计版面,一般页面的构架主要是通过表格应用来实现的，表格在网页制作中是一种用途非常广泛而且很重要的工具，比较复杂的网页经常采用表格的嵌套（其实就是在一个单元格中再插入一个表格）。由于目前访问者的浏览器800600的分辨率使用频率最高，所以在制作网页的过程中，可以将窗口的宽定为760像素。,一种更加轻松完成网页制作的功能.,网站首页布局方法,利用表格布局首页版面,1.利用表格布局

3、版面操作步骤,步骤1：首先插入一个4行2列，宽为760像素，高为200像素的表格。并合并部分单元格，合并后如图所示。调整属性面板中的表格各参数，使表格居中对齐，背景颜色为白色。,利用表格布局首页版面,1.利用表格布局版面操作步骤,步骤2：执行修改| 页面属性命令，在弹出的页面属性对话框中，将左边距、右边距、边界宽度、边界高度都设置为0像素。这时可以发现表格已经紧贴在文档上方了。,步骤3：在第一行第一列的单元格中插入“images”目录下的“logo.gif”文件，而第一行第二列的单元格中插入一个SWF的Flash动画 。,步骤4：接下来在表格第二行的单元格内插入一个1行5列的表格，宽为760像

4、素，高为20像素，在属性面板中设置“bg1.gif”为背景图片。设置每个单元格的宽度为152像素。在每个单元格中输入作为导航条的内容：“本站首页”、“课前准备”、“课堂导学”、“课后复习”、“相关网站”，将文字颜色设置为白色，并居中对齐。,利用表格布局首页版面,1.利用表格布局版面操作步骤,步骤5：在表格第三行的单元格内插入一个4行2列的表格，宽为760像素，在 单元格中插入“images”文件夹下的“htys.jpg”，后面插入相关文字。其它操作一样。,步骤6：在表格第四行的单元格中，将背景颜色设为“#767d8f”，插入版权符号及相关内容。按F12键预览一下网页的效果。,利用布局设计方法来设计首页版面,1.利用布局设计方法来设计首页版面操作步骤,步骤1：单击插入工具栏中的布局选项，点击布局视图按钮，即进入布局模式。现在就可以在页面上绘制布局单元格和布局表格了。,步骤2：单击布局表格按钮，这时鼠标会变成十字形状，拖动鼠标就能绘制出一个布局表