第12章网站制作综合应用ppt课件.ppt

第1网站与网页概述第2HTML入门第3网页基本编辑第4表格第5框架第6APDiv第7 第8CSS和模板第9网页图形处理工具FireworksCS5第10图像处理工具PhotoshopCS5第11FlashCS5第12 学习目标 第12章网站制作综合应用 熟悉和掌握网站建设的基本流程综合运用DreamWeaver FireWorks Photoshop和Flash能独立设计一个内容完整 图文并茂 技术运用得当的网站 12 1网站建设流程 一般地 一个网站建设大致需要以下几项流程 网站策划设计网页测试站点发布站点 12 1 1网站策划 网站策划一般包括以下步骤 定位网站主题定位网站CI形象确定网站的栏目和版块确定网站的目录结构和链接结构确定网站的整体风格和创意设计 定位网站主题定位网站CI形象确定网站的栏目和版块确定网站的目录结构和链接结构确定网站的整体风格和创意设计 12 1 1网站策划 续 12 1 1网站策划 续 定位网站主题网站主题 网站所要表达信息的题材 如求职 聊天 社区 娱乐 旅行等 对于个人网站 建议选择题材时 首先主题要小而精 即定位要小 内容要精 其次题材最好是自己擅长或者喜爱的内容 再次题材不要太滥或者目标太高 12 1 1网站策划 续 确定网站的栏目和版块栏目的实质是一个网站的大纲索引 索引应该将网站的主体明确显示出来 版块比栏目的概念要大一些 每个版块都有自己的栏目 设置版块时 应该注意 各版块要有相对独立性 各版块要有相互关联 版块的内容要围绕站点主题 12 1 1网站策划 续 确定网站的目录结构和链接结构网站的目录结构是指建立网站时创建的文件目录 对于站点本身的上传维护 未来内容的扩充和移植有着重要的影响 建议 不要将所有文件都存放在根目录下 按栏目内容建立子目录 在每个主目录下都建立独立的images目录 目录的层次不要太深 建议不要超过3层 其它需要注意的 包括 不要使用中文目录 不要使用过长的目录 尽量使用意义明确的目录等 12 1 1网站策划 续 网站的链接结构是指页面之间相互链接的拓扑结构 两种基本链接结构 树状链接结构 一对一 首页链接指向一级页面 一级页面链接指向二级页面 星状链接结构 一对多 每个页面相互之间都建立有链接 12 1 1网站策划 续 确定网站的整体风格和创意设计网站的风格是指站点的整体形象给浏览者的综合感受 包括站点的CI 标志 色彩 字体 标语 版面布局 浏览方式 交互性 文字 语气 内容价值 存在意义 站点荣誉等等诸多因素 风格是独特的 是站点不同于其他网站的地方 或者色彩 或者技术 或者是交互方式 能让浏览者明确分辨出这是你的网站独有的 风格又是有人性的 通过网站的外表 内容 文字 交流可以概括出一个站点的个性 情绪 12 1 1网站策划 续 以下几条是确定网站风格的参考意见 将标志logo 尽可能的出现在每个页面上 或者页眉 或者页脚 或者背景 突出标准色彩 文字的链接色彩 图片的主色彩 背景色 边框等色彩尽量使用与标准色彩一致的色彩 突出你的标准字体 在关键的标题 菜单 图片里使用统一的标准字体 想一条朗朗上口宣传标语 把它做在网站的横幅广告里 或者放在醒目的位置 使用统一的语气和人称 即使是多个人合作维护 也要让读者觉得是同一个人写的 使用统一的图片处理效果 比如 阴影效果的方向 厚度 模糊度都必须一样 创造站点特有的符号或图标 用自己设计的花边 线条 点 展示网站的荣誉和成功作品 网站的创意是网站生存的关键 是传达网站信息的一种特别方式 创意的目的是更好的宣传推广网站 12 1 2设计网页 首页的设计是整个网站设计的难点 是网站成功与否的关键 一般的设计步骤是 1 确定首页的功能模块 首页的功能模块是指需要在首页上实现的主要内容和功能 一般的站点都有 网站名称 logo 广告条 banner 主菜单 menu 新闻 what snew 搜索 search 友情链接 links 邮件列表 maillist 计数器 count 版权 copyright 等 2 设计首页的版面设计版面的最好方法是 找一张白纸 一支笔 先将理想中的草图勾勒出来 然后再用网页制作软件实现 3 处理技术上的细节常见的技术细节 如 制作的主页如何能在不同分辨率下保持不变形 如何能在IE和Firefox下看起来都不至于太丑陋 如何设置字体和链接颜色等等 其他二级网页 在设计时应当保持与首页风格的一致性 12 1 3测试站点 测试站点 一般有浏览器兼容性测试和超链接测试 检查浏览器兼容性检测时可以先设置目标浏览器最低版本 12 1 3测试站点 续 超链接测试 检查站点链接查看超链接测试结果 12 1 4发布站点 一 设置远程服务器信息1 菜单栏中 站点 管理站点 命令 打开管理站点对话框 2 选择要上传的站点名称 单击 编辑 按钮 打开 站点设置对象 对话框 12 1 4发布站点 续 3 设置服务器 点击 服务器 填写基本信息并保存 12 1 4发布站点 续 二 上传站点1 在 文件 面板单击链接按钮 与远程服务器建立链接 2 在本地目录中选择上传的文件或文件夹 单击上传按钮 开始上传文件 3 浏览作品 打开浏览器 在地址栏中输入 http 学号 即可浏览到作品 12 2综合应用实例 介绍一个网站 家乡风光 的设计过程 网站主题为自然风景展示 主要过程如下 利用FireWorks设计网页利用Flash设计动画利用DreamWeaver制作网站具体操作过程见教材 12 3小结 本章简单介绍了网站建设的一般流程 通过综合运用DreamWeaver FireWorks Photoshop和F