知否论坛设计与实现

知否论坛设计与实现内容摘要：

本网站的字体设计主要采用 12 号的宋体，和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。 一般我们网页默认的字体是宋体。 五、页面布局设计 本网站采用简单版面布局，以求与色彩与内容上的搭 配。 六、浏览器和分辨率的选择 由于网站中融入大量 Flash，为考虑其浏览效果，则选择采用 IE 浏览器作为本网站特定浏览器。 其分辨率的选择是根据对窄屏显示器的适应，则采用 1024*800 的分辨率。 七、标签的重要性 meta 标签是内嵌在你网页中的特殊 html 标签，包含着你有关于你网页的一些隐藏信息。 Tab 标签不仅感官上给人舒服易操作的印象，也完全跟我们日常生活中使用的文件夹标签一样，所以更容易让用户接受。 使用 DIV 标签，建立层。 用在代码段前，配合 ALING、 VALIGN 使其设定水平方向和垂直方向的位置。 八、 CSS 样式设计 第一， 简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量 (因为重复设置的格式将被只保存一次 )。 第二，只要修改保存着网站格式的 CSS 样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。 避免了一个一个网页的修改，大大减少了重复劳动的工作量。 本网站根据自身需求制定多个样式表，使得网站页面更加美观，给人统一和比较整体的效果。 网站首页设计与实现 首页页面的设计上面是 logo 和广告 GIF 动态图片 ，首页下方主要设有关于奔驰历史起源 经典车型等链接。 目的在于让奔驰爱好者更加了解这个产品跟企业的文化背景。 下面是网页首页的设计方案： 序列 项目 布局 内容 配色 效果 大小 1 站内搜索框 首页页面右上角 运用表单并加入文本框，旁边配上搜索小图标一张加以链接 黑色 静态 宽 250x 高 第 １１ 页 共 24 页 2 Logo 首页页面左上角 图片左边为奔驰标志右边为梅赛德斯英文字母构成 黑色背景 白色字体 静态 宽 289px 高 87px 3 导航 LOGO 图的右侧 车款 、 奔驰天下 、 车主专区 、 金融服务 、 认证二手车 、 联系梅赛德斯 奔驰 的导航链接 黑白 静态 宽 758px 高 87px 4 banner 首页页面中间 应用 Photoshop 将四张奔驰汽车 图片结合为 GIP 图 红 灰 蓝 动态 宽 1015px 高 407px 5 链接 首页页面左下角 设有五个超链接。 分别设有缘起、经典车型、赛车历史及赛德斯 奔驰 125周年等 黑色背景 白色字体 静态 宽 300px 高 190px 结语：本页面的设计风格为国字型布局，页面颜色为黑白灰，页面宽为 1015px。 链接部分为整个页面的文字表达区，点击后相应会进入另一个页面，阐述奔驰的历史背景，产业文化。 页面效果图： 第 １２ 页 共 24 页 图 53 网站首页图 车款子页设计与实现 本网站的车款页面主要用来显示网站中的车款车型，每张车款图片加以链接，是本款系的价格，参数及其网络评价。 全方位介绍车款。 下面是车款页面设计方案： 序列 项目 布局 内容 配色 效果 大小 第 １３ 页 共 24 页 1 站内搜索框 车款 页面右上角 运用表单并加入文本框，旁边配上搜索小图标一张加以链接 黑色 静态 宽 250px 高 30px 2 Logo 车款 页面左上角 图片左边为奔驰标志右边为梅赛德斯英文字母构成 黑色背景 白色字体 静态 宽 289px 高 87px 3 导航 LOGO 图的右侧 车款 、 奔驰天下 、 车主专区 、 金融服务 、 认证二手车 、 联系梅赛德斯 奔驰 的导航链接 黑白 静态 宽 758px 高 87px 4 banner 车款 页面中间 应用 Photoshop 将四张奔驰汽车图片结合为 GIP 图 红 灰 蓝 动态 宽 1015px 高 407px 5 车款介绍 车款 页面中下 设有 13 款车型，每款经典车型都附有图片，没张图片都加以超链接，链接后会详细介绍车款的价 格，性能，参数，评价等一系列内容。 灰 白色 动态 宽 300px 高 190px 第 １４ 页 共 24 页 图 55 车款页面效果图 本网站的奔驰天下模块主要用来显示网站中 传承历史、奔驰新闻、企业社会 责任、创新科技与环保、壁纸电视 amp。 广告 等。 全方位让查看着了解。 奔驰天下页面设计方案： 序列 项目 布局 内容 配色 效果 大小 1 站内搜索框 奔驰天下 右上角 运用表单并加入文本框，旁边配上搜索小图标一张加以链接 黑色 静态 宽 250px 高 30px 2 Logo 奔驰天下 页面左上角 图片左边为奔驰标志右边为梅赛德斯英文字母构成 黑色背景 白色字体 静态 宽 289px 高 87px 3 导航 LOGO 图的右侧 车款 、 奔驰天下 、 车主专区 、 金融服务 、 认证二手车 、 联系梅赛德斯 奔驰 的导航链接 黑白 静态 宽 758px 高 87px 第 １５ 页 共 24 页 4 banner 奔驰天下 页面中间 应用 Photoshop 将四张奔驰 汽车图片结合为 GIP 图 红 灰 蓝 动态 宽 1015px 高 407px 5 链接 奔驰天下 页面 左下角 设有 6 个链接，奔驰天下、传承历史，以及社会责任等 灰 白色 动态 宽 300px 高 190px 6 页面预留空间 奔驰天下右下角 及时更新奔驰活动的一切信息 灰 白 静态 宽 675px 高 800px 图 56 首页 页面效果图 子页设计 与实现 本网站的奔驰天下模块主要用来显示网站中 维修保养，充分介绍汽车专业配置及其套餐服务。 车主专区页面策划方案： 序列 项目 布局 内容 配 色 效果 大小 1 站内搜索框 车主专区右上角 运用表单并加入文本框，旁边配上搜索小图标一张加以链接 黑色 静态 宽 250px 高 30px 2 Logo 车主专区页面左上角 图片左边为奔。