第9章 个人网站-我的博客.ppt

网站设计基础与实例教程 第9章 个人网站——我的博客 9.1网页效果图 9.1网页效果图 9.2客户需求 “博客”一词是从英文单词Blog音译而来，一种表达个人思想和网络链接，内容按照时间顺序排列，并且不断更新的出版方式。 个人博客（个人网站）的作用有以下几点： 作为网络个人日记； 个人展示自己某个方面的空间； 网络交友的地方； 学习交流的地方； 通过博客赚外快； 通过博客展示自己的企业形象或企业商务活动信息。 9.2客户需求 对于个人博客，客户往往都希望能够制作出既美观又能彰显自己风格的页面，这就要求做到以下几点： 1．简洁为美：博客的装饰尽量简单，放弃那些不实的设计，即使要有也不要因为装饰影响到文章的阅读。 2．要有自己的见解：对于某个事物你必须有自己的态度；对于你提供的信息和内容，必须做到真实、广博、生动、高品位；转载别人的文章要写名出处，无法查究出处的要写明转载。 3．结构清晰：可分为个人区域（如个人介绍、日志等）、交际区域（如好友、留言等）和服务区域（如音乐、视频、新闻等）。 ４．持续更新：做到至少一个星期更新一次，隔几天最好。 9.3页面风格定位 个人博客的风格定位相对容易，主要取决于作者的性格、喜好，总体上来讲体现为以下四个方面： 1.颜色风格：选择一种体现个人形象、延伸个人内涵的色彩。 2.字体风格：一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。 3.内容风格：布局简单明了，内容清新，栏目齐全便于交流。 4.语言风格：通俗易懂，便于沟通与交流。 9.4 网站建设方案 网站建设方案包括以下几个部分： 客户情况分析； 网站需要实现的目的和目标； 网站形象说明； 网站的栏目板块和结构； 网站内容的安排，相互链接关系； 使用软件、硬件和技术分析说明； 开发时间进度表； 宣传推广方案； 维护方案； 制作费用； 本公司简介：成功作品，技术，人才说明等。 9.5网站主页设计 效果图设计 个人网站比较简单，内容信息较少，往往是利用空闲时间来发展网站，这就造成了投入网站的人力和时间都非常有限，网页布局结构比较单一。由于网站面向的浏览者也相对较少，所以要在主页面上优先提供最重要的信息，提供可以吸引浏览者注意的信息。本网站把个人日志放在内容区的主要位置。 个人网站要想做大很难，所以就要在已有的基础上做出自己的特点。 首先，网站定位要准确。个人网站最好走个性化路线，避开与大网站的正面竞争。网站要小而精，不要一来就搞个大而全的东西。其次，内容、观点要独特。内容是最好的推广载体，它的重要性不言而喻。最后，适当加些动画和交互功能。这样可以使浏览者记住你的网站，并用帮助推广你的网站。 9.5网站主页设计 效果图设计 9.5网站主页设计 主页制作 用Fireworks完成效果图切片 本案例中的页面分割要进行的工作很少，主要是将一幅大的图片分割成三部分，分别用于页面顶部、导航、页面底部的背景图，起到上下辉映的效果。 9.5网站主页设计 主页制作 用Flash完成动画设计 网页中的动画已成为网站创立独特风格的重要手段，本案例中使用Flash的遮罩特效实现百叶窗效果。画面转换的时间要恰到好处，太快会使浏览者看不清楚要传达的信息，创意没有意义。太慢则感觉空洞、单调，使浏览者厌倦、注意力分散。 9.5网站主页设计 主页制作 用Flash完成动画设计 ⑴打开Flash CS3并新建一文档。 ⑵修改文档属性，宽为210像素，高为130像素。 ⑶在图层1导入第一幅图片，并调整图片大小与场景1同大。 ⑷新建一图层，再导入第二幅图片，同样，调整到与场景1同大。 ⑸新建一元件，选择“影片剪辑”，命名为“矩形”。 ⑹在影片剪辑“矩形”中画一无线框的长矩形，长210高13，并让其中心对齐 。 ⑺在第20帧处插入关键帧，将矩形尺寸改为210*1 。 ⑻设置1－20帧为Shape（形状）动画。 9.5网站主页设计 主页制作 用Flash完成动画设计 ⑼新建一元件，选择“影片剪辑”，命名为“百叶窗” 。 ⑽打开库面板，并拖出十个“矩形”影片剪辑，并整齐地排列，使其完全覆盖主场景。 ⑾回到场景1中，并新建一图层，命名为“百叶窗”。把“百叶窗”影片剪辑拖入进来，并中心对齐。 ⑿设置“百叶窗”层为遮罩层。 ⒀预览，导出。 9.5网站主页设计 主页制作 Javascript脚本设计 JavaScript 使网页增加互动性。JavaScrip