网页主页设计

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第三讲Dreamweaver界面设计,信息工程系,1,第三讲Dreamweaver界面设计,1、尽量使用字母，英文或拼音,2、注意保存，否则有些效果出不来,3、注意新建站点，便于管理,2,第三讲Dreamweaver界面设计,产品介绍页面,主页,帮助页面,3,4,5,6,7,第三讲Dreamweaver界面设计,整个页面的宽度是775px，水平居中,首先我们要做的是页眉和页脚,1、插入表格2*3背景为top_bg_1.gif,第一行行高：70px,第二行行高：11px （背景是top_bg_2.gif）,第一列列宽：172px,第二列列宽：480px,第三列列宽：123px,8,第三讲Dreamweaver界面设计,A11中插入图像：logo.gif,A13中插入3*2的表格,表格宽度：60%,Cellspacing：3px,水平居中,内容：帮助、登陆、搜索,注册、邮箱、注销,9,第三讲Dreamweaver界面设计,继续插入一个1*13表格,行高：30px,最后一列列宽：277px,奇数列列宽：80px 背景： top_bg_4.gif,偶数列列宽：3px 背景：top_bg_3.gif,奇数列内容依次是：,主页、公司简介、产品介绍、客户留言、订购说明、用户中心,A11内容：插入图像：homepage.gif,10,第三讲Dreamweaver界面设计,页脚的制作：,插入一个1*2表格，行高：30,内容为主页、搜索、帮助、关于我们、订购说明，用|分开,第二列内容：,版权所有2004（右对齐）,11,第三讲Dreamweaver界面设计,继续插入2*2表格,cellspacing为10，背景为top_bg_1.gif,第一列：,列宽：50% 右对齐,第二列：,列宽50% 左对齐,内容填入电话、地址、传真、电子信箱,12,第三讲Dreamweaver界面设计,产品介绍页面：,Title:产品介绍,Bgcolor：#CCCCCC,Width：775px,第一行,行高：30px,第一列：167px,第二列：596px,13,第三讲Dreamweaver界面设计,A11,背景：left_ban.gif,内容：插入图像bar_1.jpg 产品分类,A12,背景：mid_bg_4.gif,内容：插入图像bar_1.jpg 产品列表,14,第三讲Dreamweaver界面设计,A21：,背景：left_bg_1.gif,A22：,背景：#FFFFFF,内容：1*2表格，宽度为100%,单元格列宽：25%，75%,B11:,内容：图像0001.jpg,居中对齐,最后插入水平线,15,第三讲Dreamweaver界面设计,帮助页的设计：,1、框架集左侧固定,第一列：列值160px,第二列：1相对,2、窗口菜单框架,第一列：边框：否,第二列：滚动：自动边框：否,16,第三讲Dreamweaver界面设计,3、保存全部,分别起名为：,help.htm menu.htm main.htm,输入内容：,帮助菜单,关于客户留言,关于产品订购,关于注册会员,关于交款方式,关于售后服务,17,第三讲Dreamweaver界面设计,网站帮助文件,一、注册会员,主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容。,二、客户留言,主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容。,三、产品订购,主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容。,四、交款方式,主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容。,五、售后服务,主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容。,18,第三讲Dreamweaver界面设计,左侧：,标题：h3,加有序列表,右侧：,标题：h3,小标题：h4,19,第三讲Dreamweaver界面设计,左侧body：,类型:,大小：12px,颜色：#FFFFFF,背景：#CCFFFF,方框：上边界20px其他为0,扩展：Glow（color=#FF0000，strength=5）,20,第三讲Dreamweaver界面设计,H3：,类型：,大小：18px 粗细：粗体 行高：36px,区块：,文本对齐：居中,21,第三讲Dreamweaver界面设计,Ol：,类型：,行高：30px,22,第三讲Dreamweaver界面设计,右侧：,类型：,大小：12px 背景色：#FFFFFF,方框：,边界：20、25、10、10,过滤器：,shadow（color=#CCCCCC，Direction=120）,23,第三讲Dreamweaver界面设计,H3 同左端,H4,类型：,大小：14px,缩进：2字体高,P,缩进：2字体高,行高：16px,24,25,