网站前台绪论

10网站前台设计概述课题网站前台设计概述教学时间2课时（）课程类型新授教学设备一体化教室授课方式提出问题，启发学生思考回答问题，引出知识教学方法启发法、提问法、讲授法以学生为主体的行为引导教学法教学目标知识目标：1.了解网站的相关知识；2.了解网站的制作工具；3.熟知网站前台设计的流程。素质目标：1.培养独立思考的能力。教学重点熟知网站前台设计的流程。教学难点熟知网站前台设计的流程。学情分析1.学生有的具备网站设计的基本知识，有的还未接触过这种知识，水平参差不齐，在教学时应注意分情况教学；2.学生对学习网站这门课兴趣比较浓厚，在教学中要充分利用和尊重学生的兴趣。2教学过程【导入新课】时间教师活动展示内容要点学生活动5分钟让学生观看几个经常浏览的网站的网页罗列几个大家常去的网站思考：1、什么是网站？你都浏览过什么网站？2、你知道网站都是由什么组成的吗？【讲授新课】一、网站的基础知识时间内容备注40分钟（一）网站1.对网站的描述•万维网万维网(WorldWideWeb,简称)是Internet上集文本、声音、图像、视频等多媒体信息于一身的全球信息资源网络，是Internet上的重要组成部分。浏览器(Browser)是用户通向信息的窗口，通过浏览器，用户可以在浩瀚的Internet海洋中漫游，搜索和浏览自己感兴趣的所有信息。(HyperTextMarkupLanguage)编写，并在超文件传输协议HTTP(HypeTextTransmissionProtocol)支持下运行的。超文本中不仅含有文本信息，还包括图形、声音、图像、视频等多媒体信息（故超文本又称超媒体），更重要的是超文本中隐含着指向其它超文本的链接，这种链接称为超链（HyperLinks）。利用超文本，用户能轻松地从一个网页链接到其它相关内容的网页上，而不必关心这些网页分散在何处的主机中。•网站就是在互联网上一块固定的面向全世界发布消息的地方。它由域名(也就是网站地址)和网站空间构成。•因特网起源于美国国防部高级研究计划管理局建立的阿帕3网。网站(Website)开始是指在因特网上,根据一定的规则,使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。总结：网站是网页的集合2．对网页的描述•(HyperTextMarkupLanguage)编写，并在超文件传输协议HTTP(HypeTextTransmissionProtocol)支持下运行的。超文本中不仅含有文本信息，还包括图形、声音、图像、视频等多媒体信息（故超文本又称超媒体），更重要的是超文本中隐含着指向其它超文本的链接，这种链接称为超链（HyperLinks）。利用超文本，用户能轻松地从一个网页链接到其它相关内容的网页上，而不必关心这些网页分散在何处的主机中。•网页是通过浏览器在上所看到的每一个画面。•网页与网站都是以文件的形式存在的。一个网页大概分为：Logo、banner、导航、内容、版权网站的网页上可以有各种媒体元素，包括文本、声音、图像、动画和数字视频等。在这个网页中，包含了多种网页媒体元素。(1)文本文本一直是网页内容最常用的表达手段。用户可以按照自己的需求设置文本的字体、字号、颜色、底纹和边框等属性，通过不同的设置，突出显示重要的内容，并克服文字固有的缺点。(2)图像图像常用作网页中的题图、插图、背景图、图标和按钮。这些图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。在网页中经常使用GIF、JPEG(JPG)、PNG这3种图像文件格式。(3)动画动画可以增加网页的动态效果，使网站更为生动有趣。动画可以表现事物的运动过程，在商业网站上也常用它4来做广告看板。很多娱乐网站中都使用Flash动画来表现网页的内容，使网站内容更富有动感和情趣。在网页中经常使用的动画格式包括GIF动画和Flash动画等。(4)表单在网站浏览中，很多交互行为是通过超链接来实现的，但是这种交互行为只是一个简单的方式，表单的出现使用户与网站的交互上升到一个新的高度。表单是网页中站点服务器处理的一组数据输入域，当用户单击按钮或图形提交表单后，数据就会传送到服务器。(5)导航栏导航栏的作用是要让用户在浏览网站时，不会因为“迷路”而终止对网站的访问。导航栏就是一组超链接，这组超链接可链接到本站点的主页及其他主要网页。（6）表格表格是网页上的一行或多行单元格，用来组织网页的布局或有系统地布置数据。用户可以在表格的单元格中放置任何东西，包括文本、图形和表单，也可以是表格（7）框架框架是网页制作的另外一个布局工具，利用框架布局的5网页将显示窗口划分成多个独立的区域。（8）其他网页元素网中除了集中以上基本元素之外，还可以加入声音和数字电视等多媒体元素。声音可以用作网页背景音乐、网页操作时的音效、页供用户欣赏的歌曲和数字视频伴音等。数字视频可以用于点播新闻节目和教学节目。（二）.网站制作工具1.可视化工具在网页中可以添加多种多样的元素，但如何制作网站独特的图片和动画，并把网页中各种内容合理地联系起来制作出具有个人风格的网页呢？首先，要选择一个方便、易学、易用的工具。网页制作软件：Dreamweaver网络图像处理软件：Photoshop、Fireworks网络动画制作软件：Flash2.HTML语言文本、表格、样式、层、框架等元素的建立都是以HTML语言为基础的。HTML（hypertextmarkuplanguage）语言是超文本标记语言，用来描述上的超文本文件。3.常用动态网页语言（1）ASPASP(ActiveServerPages)是由微软创建的Web应用开发标准，服务器已经包含在IIS(InternetInformationService)服务器中，服务器将Web请求转入解释器中，在解释器中将所有中的脚本进行分析，然后执行。（2）PHPPHP(Pre-HypertextPreprocessor)是一种跨平台的服务器端嵌入式脚本语言，由于其良好的性能及免费的特点，它是目前互联网中应用非常流行的一种应用开发平台。它支持目前绝大多数数据库。（3）JSPJSP(JavaServerPage)是SUN公司推出的网站开发语言，它具有可移植性好，支持多种平台；强大的可伸缩性；多样化与强大的工具支持。JSP网页文件的后缀是.JSP。（4）.NET6.NET是微软推出的新一代基于.NET框架的动态网页开发语言，它采用了代码与页面编程语言相分离的编程方式。而ASP、PHP和JSP是将脚本语言嵌入到HTML文档中。.NET网页文件的后缀是.ASPX。二、网站设计的过程时间教师活动展示内容要点学生活动5分钟老师提问你想设计一个网站吗？怎么来设计呢？网站前台设计网站后台设计学生思考三、设计网站前台的流程时间内容备注20分钟本书内容——设计网站前台的流程1.需求分析，确定网站的布局、设计风格、结构——草图2.设计网页界面——Photoshop3.制作导航动画——Flash4.网站前台页面制作——Dreamweaver7四、分组分工时间内容备注15分钟•公司：网影科技公司•项目小组：网页设计部•每个小组4—6名组员构成，一名组长（项目经理）负责。学生担当需求解决方和项目开发小组项目经理、web设计师、业务员等角色。教师担当部门经理的角色，针对每个项目，给出所需背景知识、参考资料、师生交流平台、项目要求、相关案例、开发流程、注意事项等指导学生。【课堂小结】（2分钟）1.什么是网站2.网站的制作工具3.网站前台设计的基本流程【课后作业】（3分钟）1.什么是网站？什么是网页？2.网站都那几部分组成？3.上网观察新浪网、网易百度、Google企业网个人网站思考网站的结构和色彩有什么不同？【课后记】