门户网站ppt课件.ppt

第12章企划网门户网站 网站设计基础与实例教程 2 12 1网页效果图 主页效果图 网站设计基础与实例教程 3 12 1网页效果图 子页效果图 网站设计基础与实例教程 4 12 2客户需求 建站目的 1 网站定位要求 2 网站栏目设计要求 3 网站语言设计要求 4 网站设计基础与实例教程 5 12 2客户需求 网站创意设计要求 5 网站售后服务要求 6 网站设计基础与实例教程 6 12 3页面风格定位 具体表现在 颜色风格 布局风格 内容结构风格 语言风格 网站设计基础与实例教程 7 12 4网站建设方案 企划网 网站在完成前期工作后 建设方案主要内容包括以下几点 网站建设费用预算 确定付款方式及开发人员 制订开发时间表 网站维护及培训 网站设计基础与实例教程 8 12 5网站主页设计 效果图设计设计要领技术要点任务实施 网站主页设计 主页制作效果图切片动画设计页面整合 网站设计基础与实例教程 9 12 5 1效果图设计 色彩设计 图片设计 布局设计 设计要领 网站设计基础与实例教程 10 12 5 1效果图设计 网站设计基础与实例教程 11 12 5 1效果图设计 网页的配色表 网站设计基础与实例教程 12 12 5 2主页制作 效果图切片 动画设计 页面整合 主页制作 网站设计基础与实例教程 13 12 5 2主页制作 一 用Fireworks完成效果图切片 网站设计基础与实例教程 14 12 5 2主页制作 设计要领 为了实现内容的整体居中 需要一个最外层 id commend 来放置所有内容 按结构整个页面分为三个层 上边为放置LOGO的层 id header 中间放置主题内容层 id main 下边放置版本信息的层 id foot 切割出XHTML页面所需的全部素材 根据任务描述进行切片 Xhtml页面body的浅灰色背景 提出颜色值为 eaf1f9即可 背景区域body为深蓝到浅灰色的渐变色 而内容区域高度不固定 所以截取上下两张切片图bg gif和web bg gif LOGO区域分别截取站标 右侧效果图 logo gif和head jpg 导航栏背景截取切片menu bg gif 内容区域左上部分为动画部分 要计算起始坐标位置 计算出动画的尺寸 内容区域左下部分为滑动菜单 宣传图片 文字链接 菜单上方效果图截取切片leftmenu bc01 gif 宣传图片分别截取切片 对于文字链接前面的小图标截取切片self xtb gif 内容区域右侧部分为栏目显示 宣传图片 文字链接 栏目名称背景是圆角矩形 所以截取三张切片new lbc gif new rbc gif左右圆角 new bg jpg背景填充 宣传图片分别截取切片 对于文字链接前面的小图标截取切片ceset xbt gif 其他小修饰图片 截取切片 因此在制作过程中 技术要点有两个方面 背景色与背景图片如何进行切片 根据效果图合理划分DIV块 网站设计基础与实例教程 15 12 5 2主页制作 二 用Flash完成动画设计 网站设计基础与实例教程 16 12 5 2主页制作 三 用Dreamweaver完成XHTML的页面整1 设计要领 1 本页面中采用浮动定位加高度自适应的模式 2 在利用CSS DIV进行页面布局的过程如下 将页面用DIV分块 设计各块的位置 使用CSS定位 网站设计基础与实例教程 17 12 5 2主页制作 多级的级联菜单 滑动门技术 表单空值校验 2 技术要点 网站设计基础与实例教程 18 12 5 2主页制作 3 任务实施 放置头部信息 放置导航栏信息 放置网站主体信息 放置底部信息 主页index html 文件夹images style 样式表CSS 完善网页的结构 建立外部CSS文件css css 网站设计基础与实例教程 19 12 6网站子页设计 网页顶部 内容区域 网页底部 网页顶部logo导航栏 内容区域滑动导航菜单栏目展示 网页 网页 网站设计基础与实例教程 20 12 6 1效果图设计 效果图 网站设计基础与实例教程 21 12 6 1效果图设计 色彩设计 图片设计 布局设计 设计要领 网站设计基础与实例教程 22 12 6 2页面制作 效果图切片 动画设计 页面整合 分别制作切片leftzi gifleftbo gifleftse