【山西新华电脑学校提供】网页设计之网站建设案例.ppt

网站建设实例 本章目标 熟悉网站设计的基本思路 完成一个具体的网站设计 一、设计思路 网站定位 确定栏目 确定目录结构 确定链接结构 形成整体风格 1、网站定位 1、网站类型： 网上求职 网上聊天 网上社区BBS 计算机技术 网页/网站开发 娱乐网站 旅行 参考、咨询 家庭教育 生活时尚 2、选择原则： 主题：小而精，自己擅长的内容； 题材：不要太滥。 目标：不要太高，名称要正，易记，特色 3、形象： logo ： 代表的任务，专业性、的代表性东西，一般一 色彩：一般不超过3种用于主要颜色，其他只能点缀 字体：专业（粗仿宋）、设计精美（广告体）、随和（手写体） 宣传标语： 2、确定栏目 紧扣主题，将主题分类做为栏目 设置最近更新、本站指南、双向交流栏目（BBS），下载专区、常见问题回答等栏目 3、确定目录结构 1、不要将所有文件都存在根目录。易造成管理婚礼 2、按栏目内容及那里子目录，经常变在一个目录下 3、在独立子目录下建立各中文件，级别不要超过3级 4、不要中文目录，过长的结构 4、确定链接结构 树状结构：条例清晰，浏览效率低 星型结构：链接过多，容易迷路 混合结构：首页和一级页面用星状，其他用树状 形成风格 1、有价值的内容 2、希望站点给人的印象 3、加强上述印象 实 施 1、网站规划 a、网站结构 b、颜色设计 c、布局设计 a、网站结构（1） 网站分析：电子商务网站，出售数码产品 同类网站分析 网站结构 店铺介绍、网上商铺、客户服务 帮助中心、发货查询 喝红酒 a、网站结构（2） 店铺介绍：店铺基本信息 地理位置、店铺照片、老板承诺 网上商铺：产品销售信息 产品分类/产品索引/产品介绍 客户服务：提供的服务 帮助中心：购买和售后遇到的问题 发货查询：发货的情况 B、颜色设计 愉快与高科技特性 蓝色主色调代表科技，高对比度，使得颜色醒目 240.72.62 C、布局 2、网页架构 a、站点 B、布局 C、元素制作 D、css设置 e、制作模版页 a、站点 b、布局（180，550） 765*105，居中对齐 页头：730*105 765*24 导航：730*24 765*280 本站承诺： 180 主广告区： 550 765*564， 产品分类：180，连续7个布局单元格 主信息区：550，标语（19），主信息区 765*75 页脚：730*16 730*43 730*16 C、元素制作 1、banner 2、导航条：730*24 3、背景修饰：16* 4、本店承诺区背景 d、 css设置 首选项：css而不是标签（定义样式时自动生成css） 具体样式： Body：方框上边界为0 Td：字号12 标题：字号12 颜色：文字白色 列表：边框下边框实线1像素，黑色 e、制作模版页 添加内容 3、页面制作 1、首页（布局时，alt禁止对齐） 布局表格---布局，布局单元格编辑内容，注意布局单元格无法在内部绘制布局表格，如需要，需先嵌入一个表格在绘制，在实际制作的过程中最好使用布局表格，除非要输入内容的地方 * * 注：布局单元格应距离布局表格一定距离定并接要及时修改注释