1、在线教务辅导网：http:/,教材其余课件及动画素材请查阅在线教务辅导网,QQ:349134187 或者直接输入下面地址：,http:/,职业院校立体化精品系列规划教材,项目一 网页设计基础,目 标,学习目标 了解网页设计中相关术语及概念 掌握HTML常用的标记语言 掌握一个完整网站设计的基本流程。 技能目标 掌握网页设计的基础知识 掌握网页设计的基本流程 能够独立完成一个网站的项目规划,主要内容,购物网站赏析,1,规划“蓉锦大学”网站,2,规划“果蔬网”网站,3,购物网站赏析,任务实施,任务目标,相关知识,任务目标,本任务将赏析购物类的网站，从而掌握网页设计的基本知识，主要包括网站、网页、主
2、页的概念，网页常用术语，常用网页制作软件，HTML标记语言等。通过本任务的学习，可掌握网页设计的基础知识。,相关知识,网站、网页、主页概念,相关知识,网页常用术语,相关知识,常用网页设计软件,相关知识,HTML标记语言 HTML文档的基本结构 一个完整的HTML文档包括标题、段落、列表、表格等各种嵌入元素，HTML使用标签来分隔并描述这些元素。即HTML是由各种HTML元素和标签组成。下图所示为HTML文档的基本结构。,相关知识,HTML标记语言,任务实施,随着网上购物的普及，购物类网站的网页设计也发生着变化，其中典型的就是界面更加丰富多样化，内容功能也更加强大。右图所示为一个购物类型的网站首
3、页。,任务实施,在网页banner（横幅广告）处采用大图片来展现，吸引购买者眼球，另外通过图片轮显动画效果增加了视觉效果和交互功能。,整个页面颜色非常统一，且对图片都进行了一个主色调处理， 背景颜色、文字颜色、商品图片颜色搭配协调。,规划“蓉锦大学”网站,任务实施,任务目标,相关知识,任务目标,本任务将练习规划网站的操作流程。通过本任务的学习，可了解网页设计的相关内容和原则，能够独立完成一个网站的前期策划工作。下图所示为网站规划大致流程图。,相关知识,网页设计内容,相关知识,网页设计原则,任务实施,前期策划与内容组织,任务实施,搜集和整理资料 在确定好网页类型后，需要搜集和整理网页内容与相关文
4、本，以及图形和动画等素材，并将其进行分类整理，如制作企业或公司的网站就需要搜集和整理企业或公司的介绍、产品、企业文化等信息。本任务制作的蓉锦大学网站需要搜集的素材包括相关文字介绍、学校标志、学校宣传动画等。,任务实施,网页效果图设计 网页效果图设计与传统的平面设计相同，通常使用Photoshop进行界面设计，利用其图像处理上的优势制作多元化的效果图，最后将图片进行切片并导出为网页，下图所示为使用Photoshop CS5设计的蓉锦大学网站界面效果图。,任务实施,网页中动画设计 网页中常见的动画通常是使用Flash制作，如banner和导航等，通常使用图片轮显或遮罩动画等动画效果，下图所示为使用
5、Flash CS5设计的蓉锦大学网站图片轮显动画。,任务实施,网站页面设计制作 网站静态页面的制作通常使用Dreamweaver来完成，其可视化的设计视图使没有编程基础的设计者使用起来得心应手，如下图所示为使用Dreamweaver CS5制作的蓉锦大学网站页面。,任务实施,网站测试与发布 网站制作好后，需要先对站点进行测试，网站测试通常是将站点转移到一个模拟调试服务器上进行，然后才能发布到服务器上，在网站测试过程中需要注意以下问题。 监测页面文件大小和下载速度。 通过链接检查报告对链接进行测试。因为页面在制作过程中可能会使某些链接指向的页面被移动或删除，需要检查是否有断开链接。 一些浏览器不
6、能很好地兼容网页中的某些样式、层、插件等，导致网页显示不正常。这需要测试人员检查浏览器的行为，将自动访问定位到其他页面。 页面布局、字体大小、颜色、默认浏览窗口大小等在目标浏览器中无法预览，因此需要在不同的浏览器和平台上进行预览并调试。 在制作过程中要经常对站点进行测试，及早发现并解决问题。,实训规划“果蔬网”网站,实训要求 本实训要求为一个水果蔬菜网上购物店规划一个网站，网店中的水果蔬菜是天然无污染的绿色有机食品，另外，网站会定期推出优惠商品，并提供团购优惠，还会教大家一些时令果蔬的制作技巧。要求制作的网页能体现该网站的主要功能，界面设计要符合产品特色。,实训规划“果蔬网”网站,实训思路,习题,（1）简述网站设计的一般流程，并具体介绍各个流程需要注意的事项。 （2）通过网络查阅资料或浏览一些优秀的个人网站，然后根据自己习惯，规划一个个人空间网站，下图所示为一个个人网站的规划草图，以供参考。,Thank You !,,谢谢观赏,
