模块五 网页设计(简约篇)

1模块5网页制作体验模块5.......................................................................................................................................1第一部分应用基础篇.............................................................................................................15.1应用场景与就业岗位.....................................................................................25.1.1应用场景与实例.............................................................................................25.1.2岗位分析.......................................................................................................3第二部分应用体验篇5.2任务1站点的创建与管理......................................................错误!未定义书签。5.2.1任务分析.......................................................................错误!未定义书签。5.2.2站点的创建...................................................................错误!未定义书签。5.2.4任务体验.......................................................................错误!未定义书签。5.3任务2制作个人博客首页......................................................................................95.3.1任务分析.......................................................................................................95.3.2首页的布局与设计.......................................................错误!未定义书签。5.3.3首页制作与美化.........................................................................................145.3.4任务体验.....................................................................................................215.4任务3网站发布与浏览.........................................................................................215.4.1任务分析.......................................................................................................215.4.2网站发布与浏览...........................................................................................225.4.3任务体验.......................................................................................................235.5知识与任务拓展....................................................................................................245.5.1网页基础知识.............................................................................................245.5.2制作网页特效.............................................................................................255.6课后练习..................................................................................错误!未定义书签。学习目标1.了解网页设计技术行业应用与岗位需求2.了解网页制作的相关概念3.了解在网页中进行图文编辑4.了解使用CSS美化页面5.了解网页特效的制作2第一部分应用基础篇5.1应用场景与就业岗位网页制作是网页设计师应用各种网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。其作用为展现公司形象，加强客户服务，完善网络业务。网页制作是企业开展电子商务的基础设施和信息平台，是Internet上宣传和反映企业形象和文化的重要窗口。5.1.1应用场景与实例网页和网站是Internet的重要组成部分，网站要存储在独立服务器或服务器的虚拟主机上才能被访问。网站按其内容分为企业类网站、电子商务网站、个人网站、机构类网站、教育类网站、娱乐游戏网站、门户网站和社区类网站等。1.企业网站企业宣传性网站主要围绕企业、产品及服务信息进行网络宣传，通过网站树立企业的网络形象。图5-1所示是企业网站，该网站网址是。图5-1企业网站2.电子商务网站电子商务网站主要依靠Internet来完成商业活动的各个环节。图5-2所示网站是京东商城，该网站网址是。图5-2电子商务网站33.门户网站门户网站涉及的领域非常广泛，是一种综合性网站。这类网站还具有非常强大的服务功能，比如搜索、论坛、电子邮箱、虚拟社区和短信等。比如网易、新浪、搜狐等。图5-3所示是网易门户网站，该网站网址是。图5-3门户网站4娱乐网站娱乐网站大都是以提供娱乐信息和流行音乐为主的网站，它们可以提供丰富多彩的娱乐内容。这类网站通常色彩鲜艳明快，内容综合。图5-4所示是娱乐类网站，该网站网址是。图5-4娱乐类网站除此之外还有很多网站应用场景，比如政府机构网站、社区网站等。5.1.2岗位分析网页设计是是指在因特网上，根据一定的规则，使用Dreamweaver、Photoshop等工具制作的用于展示特定内容的相关网页的集合。人们可以通过网页浏览器来访问网站，获取自己需要的信息及服务。1.行业与岗位需求在信息社会网络时代的今天，国际互联网以其惊人的速度发展。初步估计，未来我国对电子商务人才的需求每年约40万人。人才总量不足已成为制约我国电子商务发展的瓶颈。国家政策正在大力支持网络经济的发展，商务部已经对电子商务给予极大重视。网络经济的4快速发展，从事网站设计的专业技术人才备受欢迎。随着网络产业、信息产业高速发展，互联网越来越深入到生活中每一个角落，企业、政府部门也在不断的增加网络宣传，常见行业对网站的应用有：①政府机构网站：利用网站宣传政策法规、发布信息和进行网络办公，实现电子政务，它逐渐成为与普通百姓交流的直通车，提高了办事效率和透明度。②公司企业网站：主要围绕企业、产品及服务信息进行网络宣传，通过网站树立企业的网络形象。③电子商务网站：电子商务网站主要依靠Internet来完成商业活动的各个环节。④休闲娱乐网站：以提供娱乐信息为的网站。网络的高速发展带动各企业的网站建设和网页制作的日益繁荣，给企业带来的经济效益也是与日俱增，各企业和公司纷纷需要网站设计人员和网站维护人员，就业前景十分看好。通过国内主要招聘网站智联招聘、中华英才网等专业招聘网站对北京、上海、广州、深圳等大中型城市的IT人才招聘信息进行分析统计，与网页设计相关的主要就业岗位有网页设计师与网站美工。这两类就业岗位相关情况分析见下表5-1所示。表5-1典型工作岗位工作岗位岗位描述薪资待遇网页设计师熟悉整个网站的制作流程，能实施站点搭建，完成客户网站的首页、专题页、最终页等页面静态页面代码实现工作，并能独立制作各种类型网站。月薪2000－8000RMB网页美工负责客户网站页面以及各类网站广告的设计，并能负责公司各类宣传的美术创意和视觉设计。月薪2000－5000RMB2.专业技能网页设计是一门新兴的边缘性的行业，在网络产生以后应运而生。要成为一名专业的、合格的网站设计人员应该掌握哪些技能和知识？需要的具体专业技能与相关课程见表5-2所示。表5-2专业技能与相关课程岗位名称专业技能相关课程网页设计师1.熟悉网站开发流程，熟练使用Photoshop、Dreamweaver等软件，能快速将设计稿生成静态页面。2.精通HTML、CSS语言，熟练使用DIV+CSS排版技术，能熟练的手工编写HTML代码。3.精通JavaScript编程，掌握ajax。4.能处理主流浏览器兼容问题。1.网页设计基础2.网页交互设计3.DIV+CSS布局4.网站模板赏析网页美工1.具有较好的美术功底和创意构思能力，能把握色彩的使用，熟练掌握各种常用网页设计软件，能够读懂和手写HTML代码，熟悉web标准，了解DIV＋CSS制作。2.精通Photoshop、Flash、Illustrator、Fireworks等软件。1.Photoshop图像处理2.平面与色彩构成3.网页配色与布局4.用户体验设计3.职业素养一名网页设计师除了需要网站设计的技术外，还需要要具备很多的素质。作为网站设计人员应该具备哪些职业素质？下面先看几个页面设计案例。案例1：，页面效果如图5-5所示。5图5-5Ling’scar网站案例2：，页面效果如图5-6所示。图5-6xhtmlslicing网站分析与思考：案例1页面设计花花绿绿，让用户很难找到所需要的信息，没有突出的主题。案例2页面设计简洁、清晰、主题突出。你认为哪类网站更受用户欢迎？总结：通过案例1与案例2的比较我们可以得出下列的启示：①网页设计师要具备较强的审美能力，要有创新意识，设计出的作品要有创意。②网站的版面设计要清晰，简洁，具有良好的用户体验。第二部分应用体验篇博客的出现是近几年的事情，但发展速度之快，达到了令人瞠目结舌的程度。有人说，博客是继Email，BBS，ICQ之后出现的第四种网络交流方式，是信息时代的麦哲伦。通过博客不仅可以展示自己的才华，写网络日志，还可以同其他博友们交流学习，交朋友等。本部分是以博客网页制作为主线，让学生动手体验“个人博客站点创建、个人博客首页制作、网站发布与浏览等”制作的基本过程，形成网站知识建构的经验基础，为后续相关课程的学习做好铺垫准备。65.2