01Web客户端编程的基础.ppt

网页设计流程 明确目标 综合类：通常为门户网站，如新浪、搜狐、人民网等，具有信息海量、受众群庞大、点击量巨大等诸多特点 企业类：通常为资讯与企业形象相结合的网站，如大型企事业单位、公司、学校等，具有一定的资讯内容，同时要承担传递企业形象的任务 其他类：诸如音乐、游戏、论坛等其他领域的网站 * 新浪网 中央政府门户网站 美的集团网站 瑞丽女性网 设计草图（手绘或软件辅助） 加工网页 确定风格——网站的主页体现了整体风格的定位 编排页面——使编排后的页面区域划分趋于合理、主次关系比较清晰 修饰线条——将文字、图片、标题等组合而形成各种线条 搭配颜色——通常遵循“总体协调、局部对比”的原则 优化网页 网页设计流程 * 网页布局 传统“T”型结构 分栏式 区域划分 无规律式 * 分栏式 分栏式结构：是一种开放式框架结构，是目前最常见的页面布局，其用途广泛，适合信息流量较大、更新较快、信息储备巨大的站点 三分栏式 * 二分栏式 分栏式 * 区域划分 区域划分式页面布局是利用辅助线、图形和色彩把网页平面分为几个区域，这些区域可以是规则的或不规则的，而由区域所形成的网页框架叫做区域排版，可以看作是分栏式结构的变异。 典型区域划分 区域划分与分栏式混合 无规律式 个性化风格 封面型 * 网页内容 文字 图片 动画 音视频 色彩 Logo * 文字 文字是信息传达的主要载体，是构成网站的基本元素，是占用页面面积最多的媒体。网页中文字设置的舒适程度直接影响到浏览者的心理感受，关于字体、大小、颜色、行间距、字间距、段落与段落之间的安排等都需要慎重考虑。 尽量保持其正常形态 字体宜在3种以内，以不同的字体区分标题和正文 正文文字通常选择12px，行间距通常为1.3或1.5倍行距 * 图片 常用图片格式 GIF：一种256色的压缩图形文件格式，但图片本身的显示品质并不会失真，它较适合颜色比较少、构成比较简单的图片（如Logo等）。 JPEG：是一种有损压缩格式，能够将图像压缩在很小的存储空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤，它较适合颜色比较多、构成比较复杂的图片（如照片等）。 Png格式：常用于小图标 * 动画 所谓动画，就是通过以每秒15到20帧的速度（相当接近于全运动视频帧速）顺序地播放静止图像帧以产生运动的错觉，也包括画面的缩放、旋转、变换、淡入淡出等特殊效果 最常见的实现动画效果方法是Animation Gif动画图形文件（俗称gif小动画） 常用Flash、Fireworks和Gif Animator等来实现 * 根据网站的主题选择合适的颜色，如儿童类网站宜使用鲜艳、对比强烈的颜色；稳健的金融机构网站宜选择冷色系、柔和的颜色。 在正文文字部分采用对比色，若颜色过于接近会影响浏览者阅读。 网页中不要使用过多的颜色，尽量控制在三种颜色以内。 考虑功能性颜色的选择，如提示、标题、超级链接等关键信息部分使用功能性的颜色以示强调和突出 注意网页中灰色的使用，灰色视觉柔和，易于搭配，是网页设计中的万能色。 色彩 * Logo Logo即为网站的标志 Logo的设计需要注意： Logo的颜色数一般不超过3种，可加入一些特定的被大众接受的识别元素，如食品行业通常会应用温馨的暖色调 Logo一旦确定就不要轻易改动，避免影响企业整体形象 Logo应放在显眼的位置，通常置于页面的左上角，但也并非一成不变，可视情况而定。 * 练习题 1、Web工作模式和Web工作原理分别是什么？ 2、Web客户端编程常用的技术有哪些，它们的 作用分别是什么？ 3、简介常用的HTML编辑工具。 4、简介常用的网页制作工具。 5、简介常用的图像处理工具。 6、简述如何规划设计一个网站。 7、简述HTML5的优势及其发展趋势。 8、查阅常用浏览器内核。 * * Web客户端编程技术 信息学院 范玉玲 Web基础知识 Internet 中译名为：因特网 起源于20世纪60年代后期美国国防部(Department of Defense,DoD)的当时称为高级研究计划局(Advanced Research Projects Agency, ARPA)的一个项目 目的在于为从事与国防相关合同项目的研究人员提供通信、程序共享和远程计算机访问等功能 这个网络是由ARPA提供经费支持的，因此被命名为ARPAnet ARPAnet只是在少数几个实验室和大学可用，规模并不是很大 1986年出现一个全国性的网络NSFnet(National Science Foundation, NSF)，由美国