第章个人网站我的博客ppt课件.ppt

第9章个人网站 我的博客 网站设计基础与实例教程 2 9 1网页效果图 主页效果图 网站设计基础与实例教程 3 9 1网页效果图 子页效果图 网站设计基础与实例教程 4 9 2客户需求 博客 一词是从英文单词Blog音译而来 一种表达个人思想和网络链接 内容按照时间顺序排列 并且不断更新的出版方式 个人博客 个人网站 的作用有以下几点 作为网络个人日记 个人展示自己某个方面的空间 网络交友的地方 学习交流的地方 通过博客赚外快 通过博客展示自己的企业形象或企业商务活动信息 网站设计基础与实例教程 5 9 2客户需求 对于个人博客 客户往往都希望能够制作出既美观又能彰显自己风格的页面 这就要求做到以下几点 1 简洁为美 博客的装饰尽量简单 放弃那些不实的设计 即使要有也不要因为装饰影响到文章的阅读 2 要有自己的见解 对于某个事物你必须有自己的态度 对于你提供的信息和内容 必须做到真实 广博 生动 高品位 转载别人的文章要写名出处 无法查究出处的要写明转载 3 结构清晰 可分为个人区域 如个人介绍 日志等 交际区域 如好友 留言等 和服务区域 如音乐 视频 新闻等 持续更新 做到至少一个星期更新一次 隔几天最好 网站设计基础与实例教程 6 9 3页面风格定位 个人博客的风格定位相对容易 主要取决于作者的性格 喜好 总体上来讲体现为以下四个方面 1 颜色风格 选择一种体现个人形象 延伸个人内涵的色彩 2 字体风格 一般网页默认的字体是宋体 为了体现站点的 与众不同 和特有风格 可以根据需要选择一些特别字体 3 内容风格 布局简单明了 内容清新 栏目齐全便于交流 4 语言风格 通俗易懂 便于沟通与交流 网站设计基础与实例教程 7 9 4网站建设方案 网站建设方案包括以下几个部分 客户情况分析 网站需要实现的目的和目标 网站形象说明 网站的栏目板块和结构 网站内容的安排 相互链接关系 使用软件 硬件和技术分析说明 开发时间进度表 宣传推广方案 维护方案 制作费用 本公司简介 成功作品 技术 人才说明等 网站设计基础与实例教程 8 9 5网站主页设计 效果图设计个人网站比较简单 内容信息较少 往往是利用空闲时间来发展网站 这就造成了投入网站的人力和时间都非常有限 网页布局结构比较单一 由于网站面向的浏览者也相对较少 所以要在主页面上优先提供最重要的信息 提供可以吸引浏览者注意的信息 本网站把个人日志放在内容区的主要位置 个人网站要想做大很难 所以就要在已有的基础上做出自己的特点 首先 网站定位要准确 个人网站最好走个性化路线 避开与大网站的正面竞争 网站要小而精 不要一来就搞个大而全的东西 其次 内容 观点要独特 内容是最好的推广载体 它的重要性不言而喻 最后 适当加些动画和交互功能 这样可以使浏览者记住你的网站 并用帮助推广你的网站 网站设计基础与实例教程 9 9 5网站主页设计 效果图设计 网站设计基础与实例教程 10 9 5网站主页设计 主页制作用Fireworks完成效果图切片本案例中的页面分割要进行的工作很少 主要是将一幅大的图片分割成三部分 分别用于页面顶部 导航 页面底部的背景图 起到上下辉映的效果 网站设计基础与实例教程 11 9 5网站主页设计 主页制作用Flash完成动画设计网页中的动画已成为网站创立独特风格的重要手段 本案例中使用Flash的遮罩特效实现百叶窗效果 画面转换的时间要恰到好处 太快会使浏览者看不清楚要传达的信息 创意没有意义 太慢则感觉空洞 单调 使浏览者厌倦 注意力分散 网站设计基础与实例教程 12 9 5网站主页设计 主页制作用Flash完成动画设计 打开FlashCS3并新建一文档 修改文档属性 宽为210像素 高为130像素 在图层1导入第一幅图片 并调整图片大小与场景1同大 新建一图层 再导入第二幅图片 同样 调整到与场景1同大 新建一元件 选择 影片剪辑 命名为 矩形 在影片剪辑 矩形 中画一无线框的长矩形 长210高13 并让其中心对齐 在第20帧处插入关键帧 将矩形尺寸改为210 1 设置1 20帧为Shape 形状 动画 网站设计基础与实例教程 13 9 5网站主页设计 主页制作用Flash完成动画设计 新建一元件 选择 影片剪辑 命名为 百叶窗 打开库面板 并拖出十个 矩形 影片剪辑 并整齐地排列 使其完全覆盖主场景 回到场景1中 并新建一图层 命名为 百叶窗 把 百叶窗 影片剪辑拖入进来 并中心对齐 设置 百叶窗 层为遮罩层 预览 导出 网站设计基础与实例教程 14 9 5网站主页设计 主页制作Javascript脚本设计JavaScript使网页增加互动性 JavaScript使有规律地重复的HTML文段简化 减少下载时间 JavaScript能及时响应用户的操作 对提交表单做即时的检查 无需浪费时间交由CGI验证 JavaScript的特点是无穷无尽的 只要你有创意 网站设计基础与实例教程 15 9 5网站主页设计 Javascript脚本设计1 制作JavaScript时间特效之退出显示访问时间 编写代码fangWen newDate functionbye tuiChu newDate minutes tuiChu getMinutes fangWen getMinutes seconds tuiChu getSeconds fangWen getSeconds time seconds minutes 60 if time 1 time time second else time time seconds alert 您在这儿呆了 time 欢迎再来 网站设计基础与实例教程 16 9 5网站主页设计 Javascript脚本设计1 制作JavaScript时间特效之退出显示访问时间 引用脚本把区域改为 网站设计基础与实例教程 17 9 5网站主页设计 Javascript脚本设计2 制作JavaScript状态栏特效之动态显示状态栏 编写代码varmess 欢迎光临我的博客 varshiJian 300 设置时间间隔seq 0 functionscroll len mess length window status mess substring 0 seq 1 在状态栏上显示msg的第一到seq 1个字符 seq每次递加seq if seq len seq 0 当seq的长度大于等于msg的字符长度时 seq 0window setTimeout scroll shiJian 每个时间间隔调用一次scroll函数 网站设计基础与实例教程 18 9 5网站主页设计 Javascript脚本设计2 制作JavaScript状态栏特效之动态显示状态栏 引用脚本把区域改为 网站设计基础与实例教程 19 9 5网站主页设计 主页制作用Dreamweaver完成页面整合 网站设计基础与实例教程 20 9 5网站主页设计 主页制作用Dreamweaver完成页面整合 网页顶部设计 1 导航设计 2 日志 设计 3 相片 设计 4 关于我 设计 5 留言 设计 6 网页底部设计 7 网站设计基础与实例教程 21 9