网页设计和布局讲座.ppt

《网页设计和布局讲座.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网站首页设计和布局浙江省台州中学2006－31目标定位1.主题确定2.资料的收集、整理3.网站的风格（颜色、栏目）制作研究性网站之前,最好察看相类似的站点.说明：网站制作之前，应该先建立站点目录。网站首页布局网站LOGO/BANNER栏目列表区导航区网页内容版权说明网站首页布局参数说明1.网站LOGO标志的制作网站首页布局参数说明网站LOGO标志的制作LOGO即是网站的名片,LOGO是与其它网站链接以及让其它网站链接的标志和门户。其中关于网站的LOGO，目前有三种规格：1.88*31这是互联网上最普遍的LO

2、GO规格。2.120*60这种规格用于一般大小的LOGO。3.120*90这种规格用于大型LOGO。LOGO的制作工具和方法:好像目前并没有专门制作LOGO的软件，但PHOTOSHOP、Swish等均可来制作。网站首页布局参数说明2.网站的宣传海报BANNER的制作Gif动画Swf动画网站首页布局方法1.利用表格布局版面2.利用布局来设计版面一般页面的构架主要是通过表格应用来实现的，表格在网页制作中是一种用途非常广泛而且很重要的工具，比较复杂的网页经常采用表格的嵌套（其实就是在一个单元格中再插入一个表

3、格）。由于目前访问者的浏览器800×600的分辨率使用频率最高，所以在制作网页的过程中，可以将窗口的[宽]定为760像素。一种更加轻松完成网页制作的功能.网站首页布局方法利用表格布局首页版面1.利用表格布局版面操作步骤步骤1：首先插入一个4行2列，宽为760像素，高为200像素的表格。并合并部分单元格，合并后如图所示。调整[属性]面板中的表格各参数，使表格居中对齐，背景颜色为白色。利用表格布局首页版面1.利用表格布局版面操作步骤步骤2：执行[修改]

4、[页面属性]命令，在弹出的[页面属性]对话框中，将

5、[左边距]、[右边距]、[边界宽度]、[边界高度]都设置为0像素。这时可以发现表格已经紧贴在文档上方了。步骤3：在第一行第一列的单元格中插入“images”目录下的“logo.gif”文件，而第一行第二列的单元格中插入一个SWF的Flash动画。步骤4：接下来在表格第二行的单元格内插入一个1行5列的表格，宽为760像素，高为20像素，在[属性]面板中设置“bg1.gif”为背景图片。设置每个单元格的宽度为152像素。在每个单元格中输入作为导航条的内容：“本站首页”、“课前准备”、“课堂导学”、“课后

6、复习”、“相关网站”，将文字颜色设置为白色，并居中对齐。利用表格布局首页版面1.利用表格布局版面操作步骤步骤5：在表格第三行的单元格内插入一个4行2列的表格，宽为760像素，在单元格中插入“images”文件夹下的“htys.jpg”，后面插入相关文字。其它操作一样。步骤6：在表格第四行的单元格中，将背景颜色设为“#767d8f”，插入版权符号及相关内容。按F12键预览一下网页的效果。利用布局设计方法来设计首页版面1.利用布局设计方法来设计首页版面操作步骤步骤1：单击[插入]工具栏中的[布局]选项，点击

7、[布局视图]按钮，即进入[布局]模式。现在就可以在页面上绘制布局单元格和布局表格了。步骤2：单击[布局表格]按钮，这时鼠标会变成十字形状，拖动鼠标就能绘制出一个布局表格了。步骤3：单击[布局表格]按钮，这时鼠标会变成十字形状，拖动鼠标就能绘制出一个布局表格了。网站LOGO/BANNER栏目列表区网页内容区版权说明网站其他页面布局其他有关问题说明谢谢！