信息发布与网页设计 网页设计基础.pptVIP

信息发布与网页设计 信息学院 《信息发布与网页设计》课题组 * 网页设计基础 路径的概念 网页制作的基本原则 网页版面的布局 网页布局技术 网页布局的步骤 版面的编排 版面的布局形式 网页色彩的搭配 网页的创意设计 绝对地址 相对地址 相对地址 相对地址 相对地址 相对地址 相对地址 相对地址 相对地址 相对地址 相对地址 总结 网页制作的基本原则 网页要有主题、有内容 界面友好，不要过分渲染，也不要毫无生气 考虑兼容性（IE、Netscape 、maxthon 、Firefox 、K-Meleon 、Opera ） 首页很重要 尽量不要放置大型图片、动画或视频信息 画面摆放要错落有秩，容易找到浏览目标 网页制作的基本原则 内容明确分类 图形恰到好处 背景清爽，不影响阅读 注意代码的编写 及时更新 网站维护 网页版面的布局 页面尺寸 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下的页面范围变得更小。分辨率越高页面尺寸越大。 在网页设计过程中，向下拖动页面是唯一给网页增加更多内容(尺寸)的方法。但除非能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么最好能在上面做上页面内部连接，方便访问者浏览。 网页版面的布局 整体造型 造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。 对于不同的形状，它们所代表的意义是不同的。 网页版面的布局 页头：定义页面的主题。 页脚：放置制作者或公司信息。 文本：图片和文本是网页的两大构成元素。 图片 多媒体：越来越广泛地应用于网页上。 网页布局技术 层叠样式表的应用 在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。 表格布局 表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。 网页布局技术 框架布局 从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。 网页布局的步骤 设计草案（纸上布局、软件布局） 尺寸选择 造型的选择 增加页头 增加文本 增加图片 定稿（色彩、形状的平衡、对比，利用空白） 版面的编排 主次分明、中心突出 大小搭配、相互呼应 图文并茂、相得益彰 网页的创意设计 美国广告学教授詹姆斯关于创意思考过程的描述 研究搜集的资料，启发创意 使意识自由发展，任意结合 选择恰当的组合，产生创意 修正、细化创意 具体化创意 色彩简介 色彩简介 黄色，它代表阳光，所以它有户外、开放的特色，譬如：活泼、开朗、明智、年青、希望、好动等外向性格，黄色是向外伸展的颜色，因此也代表经济权利的欲望，更深的黄色是属于金黄色的系列，因为有更多的经济和权利欲望，所以是属于比较成熟的性格特色。 色彩简介 红色代表盛开的花朵，表现各种的情趣，所以红色是各种情欲的象征，有绝对的外向性格特质，充满了正面和负面的欲望。因此红色是热情、外向、努力、奋斗、争取同情、爱情、柔情以及各种愤怒反抗情绪。 色彩简介 蓝色代表宁静时候的天空海洋，它代表向上、和平、稳定、稳重、固执、坚持、理想、尊严等等性格特色，因此它有求知向上、好奇好胜的表现行为，当蓝色比较浅色的时候，代表有求知、向上、好奇的心。深蓝色变深的时候，就好像是傍晚的天空和海洋，代表虽有求知向上的心，却丧失斗志。 色彩简介 绿色代表有极端完美主义的性格，要求很高、性格固执，常常为苛求完美而克尽自己的责任，适合社会服务工作或者神职工作人员。 * * 平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website/img/photo.jpg，我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。 网站中以/img/photo.jpg 来确定文件位置的方式也是绝对路径。 让我们先来分析一下为什么会发生图片不能正常显示的情况。举一个例子，现在有一个页面index.htm，在这个页面中联接有一张图片photo.jpg。他们的绝对路径如下： 　　 c:/website/index