1、长沙职业技术学院教案教学章节： 第 1 章第 1、2 节 教学课时：2 学时 第 1 次授课 教学目的和要求：1理解网页和网站基本知识。2掌握网站开发的基本流程和网页的色彩搭配。教学重点与难点：教学重点：网页和网站基本知识和网站开发的基本流程教学难点：网站开发的基本流程教学方法：通过优秀作品赏析直观了解网页的基本知识和流程教学内容：1.1 学习任务：网页和网站基本知识一、网页和网站概述：互联网是一个蕴藏着无穷资源的宝库，在资源共享和信息交换方面具有得天独厚的优势，网页正是这些资源和信息重要的传递载体。 1网页浏览Web时所看到的文件称为Web 页，又称为网页。网页可以将不同类型的多媒体信息（包
2、括文字、图像、动画、声音、视频等）组合在一个文档中。由于这些文档是用超文本标记言表示的，其文件名一般是以.html 或.htm 结尾，因此又语称为 HTML 文档或超文本。长沙职业技术学院教案 2网站根据提供服务的不同，通常把提供网页服务的服务器称为多Web 服务器，相关网站称为 Web 站点。一个 Web 站点由一个或个 Web 页组成，这些 Web 页相互连接在一起，存放在 Web服务器上，以供浏览者访问。网站是提供各种信息和服务的基地，如用户熟悉的搜狐、新浪、雅虎等。网站是由很多网页链接在一起组成的。用户浏览到一个网站时看到的第一个页面叫做主页。从主页出发，可以访问到本网站的每一个页面，
3、也可以链接到其他网站，方便地共享网站资源。二、网页的主要元素网页包括的主要元素有：文本、图像、动画、导航栏、超链接、表格、表单等。 1文本文本是人类最重要的信息载体和交流工具，网页的主体一般以文本为主。制作网页时，可以根据需要设置文本的字体、字号、颜色、样式等属性，风格独特的网页文本设置会给浏览者赏心悦目的感觉。 2图像图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等功效。图像可以用作网页的标题、网站 Logo、网页背景、链接按钮、导航栏、网页主图等。 3动画长沙职业技术学院教案动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。如果网页中存有太多的
4、动画，会使浏览者眼花缭乱，无心细看。所以，对动画制作的要求越来越高。在网页中加入的动画一般是 GIF 格式的动画和 Flash 动画等。 4导航栏导航栏是网站设计者在规划网站结构时必须考虑的一个问题，站点的每个网页上均应设置导航栏，并且应将其放置在网页中比较明显的位置。设置导航栏的目的是使浏览者能够顺利地浏览网页，方便地返回主页或继续下一页的访问。导航栏可以是文本、按钮或图像的样式。 5超链接超链接是网页中最为有用的功能之一。超链接是从一个网页指向另一个网页的链接，该链接既可以指向本地网站的另一个网页，也可以指向世界各地的其他网页。 6表格网页中的表格是一种用于控制网页页面布局的有效方法。为长
5、沙职业技术学院教案了达到理想的视觉效果，通常不显示表格的边框。使用表格辅助布局，可以实现网页横竖分明的风格。 7表单表单是一种特殊的网页元素，通常用于收集信息或实现一些交互式的效果。表单的主要功能是接收浏览者在浏览器的输入信息，然后将这些信息发送到服务器端。三、网页类型网页分为静态网页和动态网页两种类型。静态网页就是设计者做什么样，在客户端浏览时就显示什么样，而动态网页可以根据不同的用户显示不同的页面。1.静态网页：纯粹 HTML 格式的网页通常称为“静态网页” 。静态网页的基本特点归纳如下： 静态网页每个网页都有一个固定的URL，且网页 URL 以.htm、.html、.shtml 等常见形
6、式为后缀，而不含有“？” 。 网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。 静态网页的内容相对稳定，因此容易被搜索引擎检索。 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方长沙职业技术学院教案式比较困难。静态网页的交互性较差，在功能方面有较大的限制2动态网页采用了动态网页技术，在服务器端运行的网页和程序属于动态网页，它们会根据编写的程序访问数据库动态地生成页面。动态网页文件的后缀一般都是.asp、.aspx、.
7、php、.jsp。动态网页的优点是效率高、更新快、移植性强，可以根据先前所制定好的程序页面，根据用户的不同请求返回其相应的数据，从而达到资源的最大利用和节省服务器上的物理资源。由此可见，静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之，一般要采用动态网页技术来实现。四、静态网页编辑软件1 FrontPage2 Dreamweaver五、网页图像与网页动画制作软件1Photoshop2Fireworks长沙职业技术学院教案3Flash1.2 学习任务：网站开发的基本流程网
8、站开发的基本流程包括 5 个阶段:看下图一、需求分析使网站建设满足用户的要求。二、网站规划网站规划是网站开发必不可少的重要一环，直接关系到整个网站的整体风格、布局结构等。网站规划包含的内容很多，如网站的主题、网站栏目、结构层次、连接内容、颜色搭配、网站 Logo、版面布局及文字图片的运用等。1确定网站主题根据网站设计目的和用户需求来确定网站的主题是非常重要的。网站的主题就是网站所要包含的主要内容，例如，旅游、娱乐休闲、体育、新闻、教育、医疗、时尚等。要求网站的主题鲜明突出，要点明确，需要按照客户的要求，以简单明确的语言和页面体现网站的特色，并调用一切手段充分表现网站的个性，办出网站的特色，这样
9、才能给浏览者留下深刻的印象。长沙职业技术学院教案2目录结构设计可以用树状结构先把每个页面的内容大纲列出来，尤其当制作一个很大的网站时，特别需要把这个架构规划好。图1-3是一个网站的栏目结构图。大纲列出来后，还必须考虑每个页面之间的链接关系，这也是一个网站优劣的重要标志。链接混乱、层次不清的站点会导致浏览困难，影响网页内容的发挥。3网页色彩搭配色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩 的对比。在色彩的运用上，可以根据主页内容的需
10、要，分别采用不同的主色调。4网站LogoLogo是与其它网站链接以及让其它网站链接的标志和门户。Logo 最重要的作用就是表达网站的理念、便于人们识别，被广泛地应用于站点的链接和宣传。长沙职业技术学院教案设计 Logo 的原则：以简洁的、符号化的视觉艺术把网站的形象和理念展示出来。5版面布局版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现 640*480 像素，800*600 像素，1024*768 像素等不同尺寸。网站经常用到的版面布局形式：1、 “T”结构布局 2、 “口”型布局 3、 “三”型布局 4、 POP 布局三、
11、网站制作规划好网站后，就要开始设计并制作网站。设计网页是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂次序来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。制作网页包括网页素材的收集、主页设计、引用图片、网页排版、背景及其整套网页的色调等。1收集素材 2主页设计 3引用图片4网页排版 5网页背景 6其他四、网站的测试与上传Web网站制作完成以后，并不能直接投入运行，而必须进行全面、完整的测试，包括本地测试、网络测试等多个环节。五、网站的推广与维护六、作业浏览网页说明哪些网站属于哪些布局，颜色搭配的效果，及属于静态网站还是动态网站。
