第八章 网页设计
网页设计教学教案
网页设计教学教案第一章：网页设计基础1.1 教学目标了解网页设计的基本概念和原则掌握网页设计的工具和软件学习网页设计的基本技能和技巧1.2 教学内容网页设计的定义和作用网页设计的原则和要素网页设计的工具和软件介绍网页设计的技能和技巧讲解1.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享1.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第二章：网页布局与排版2.1 教学目标学习网页布局的基本概念和原则掌握网页排版的方法和技巧学习使用网页布局工具和软件2.2 教学内容网页布局的定义和作用网页布局的基本原则和要素网页排版的方法和技巧网页布局工具和软件介绍2.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享2.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第三章：网页配色与图标设计3.1 教学目标学习网页配色的基本原则和方法掌握网页图标设计的基本技巧和风格学习使用网页配色工具和软件3.2 教学内容网页配色的定义和作用网页配色的一般原则网页配色的具体方法网页图标设计的基本技巧网页图标设计的风格3.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享3.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第四章：网页动画与交互设计4.1 教学目标学习网页动画的基本概念和制作方法掌握网页交互设计的基本原则和技巧学习使用网页动画和交互设计的工具和软件4.2 教学内容网页动画的定义和作用网页动画的基本类型和制作方法网页交互设计的定义和作用网页交互设计的原则和技巧网页动画和交互设计的工具和软件介绍4.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享4.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第五章：网页设计与网页标准5.1 教学目标学习网页设计的基本标准和规范掌握网页设计的最佳实践和技巧学习使用网页设计的相关工具和软件5.2 教学内容网页设计标准的基本概念和作用网页设计规范的定义和内容网页设计最佳实践的介绍网页设计的工具和软件介绍5.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享5.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第六章：HTML与CSS基础6.1 教学目标学习HTML的基本结构和语法掌握CSS的使用方法和技巧理解HTML和CSS在网页设计中的重要性6.2 教学内容HTML的定义和作用HTML的基本结构和语法CSS的定义和作用CSS的使用方法和技巧HTML和CSS在网页设计中的应用6.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享6.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第七章：响应式网页设计7.1 教学目标学习响应式网页设计的基本概念和原则掌握响应式网页设计的技巧和工具学习响应式网页设计的方法和流程7.2 教学内容响应式网页设计的定义和作用响应式网页设计的基本原则和要素响应式网页设计的技巧和工具响应式网页设计的方法和流程7.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享7.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第八章：网页设计与前端开发8.1 教学目标学习前端开发的基本概念和流程掌握HTML、CSS和JavaScript在网页设计中的应用学习使用前端开发工具和框架8.2 教学内容前端开发的定义和作用HTML、CSS和JavaScript在网页设计中的应用前端开发的流程和步骤前端开发工具和框架的介绍8.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享8.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第九章：网页设计与后端开发9.1 教学目标学习后端开发的基本概念和流程掌握后端编程语言和数据库在网页设计中的应用学习使用后端开发框架和工具9.2 教学内容后端开发的定义和作用后端编程语言和数据库在网页设计中的应用后端开发的流程和步骤后端开发框架和工具的介绍9.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享9.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第十章：网页设计项目实践10.1 教学目标培养学生独立完成网页设计项目的能力培养学生团队协作和沟通能力培养学生对网页设计行业的理解和认识10.2 教学内容网页设计项目的定义和作用网页设计项目的流程和步骤网页设计项目的实践操作和技巧团队协作和沟通的方法和技巧10.3 教学方法实践操作和项目实训团队协作和沟通的实践指导和学生互评10.4 教学评估项目完成的质量和效果团队协作和沟通的参与度学生互评和教师评价重点和难点解析一、网页设计基础1.1 教学内容中的网页设计的定义和作用、原则和要素，以及网页设计的工具和软件介绍是本节课的重点。
网页设计课件第8章
创建层
层的首选参数设置 层的建立 层的嵌套
《中文Dreamweaver 8网页设计教程》
层的首选参数设置
在新建层之前，通过“首选参 数”对话框中的“层”选项来设 置层的默认属性。
《中文Dreamweaver 8网页设计教程》
层的建立
将插入点放置在“文档”编辑窗口中，然后 选择[插入] [布局对象] [层]菜单命令将自动 在插入点插入一个层。 在“插入栏”的“布局”插入栏中单击“绘 制层”按钮，拖动鼠标绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘 制层”按钮，在文档编辑窗口中单击鼠标可 绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘 制层”按钮，按住【Ctrl】键并拖动即可连 续绘制多个层。
《中文Dreamweaver 8网页设计教程》
层与表格的相互转换 将层转换为表格 将表格转换为层
《中文Dreamweaver 8网页设计教程》
将层转换为表格
层和表格都是对网页进行精确定位的工具， 用层定位比表格定位使用起来更加方便，但层 只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览 器的版本高低没有要求，如果要使设计的网页 在更低版本的浏览器中也能被正确显示，那么 可将用层设计的网页转换为表格形式。
设置单个层的大小 设置多个层的大小
层属性的设置
设置单个层的属性 设置多个层的属性
《中文Dreamweaver 8网页设计教程》
设置单个层的大小
在文档编辑区选择一个层，在出现的调整柄上按住鼠 标左键不放并拖动，当调整到适当的大小时释放鼠标 即可。 在文档编辑区选择一个层，按住【Ctrl】键的同时再 按键盘上的方向键即可按一次1个像素的步幅来调整 层大小。 在文档编辑区选择一个层，按住【Shift+Ctrl】键的同 时再按键盘上的方向键即可按一次10个像素的步幅来 调整层大小。 在文档编辑区选择一个层，以像素为单位在属性面板 中输入宽度和高度的值。
第八章网页音频和视频的设计
</video>
4.添加预播放的视频文件
Preload属性的值
Auto：当前加载后载入整个音频；
Meta：当页面加载后只载入元数据；
None：当页面加载后不载入音频；
<video controls=”controls”preload=”auto”>
<source src=”movie.mp4”>
<source src=”123.mp3”type=”video /ogg”>
</video >
四、在网页中添加视频文件
1.添加自动播放文件
<video controls=”controls”autoplay=”autoplay”>
<source src=”movie.mp4”>
</video>
《HTML网页设计》教案（续页）第4页
</video>
5.设置视频文件的高度和宽度
<video controls=”controls” width=”200” height=”160”>
<source src=”movie.mp4>
</video>
Audio标签用来定义播放声音文件或者音频流的标准，支持格式为：ogg、MP3、wav。
书写方法：
<audio src=”xxx.mp3” controls=”controls”></audio>
Src属性：链接音频地址；
Controls属性：提供控件属性；
标签之间的文字用来提示不支持浏览器；
网页设计与制作（附微课视频第2版）参考答案
⽹页设计与制作（附微课视频第2版）参考答案第⼀章习题参考答案⼀、选择题1、A2、A3、B4、C5、A、B、C、D6、A、C、D7、B8、C9、B⼆、简答题1．答：URL是UniformResourceLocation的缩写,译为“统⼀资源定位符”，URL是Internet 上⽤来描述信息资源的字符串,主要⽤在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。
采⽤URL可以⽤⼀种统⼀的格式来描述各种信息资源,包括⽂件、服务器的地址和⽬录等；2答：⽂本、图像、动画、视频等。
3.答：⽹页结构语⾔的作⽤是将⽹页需要的内容以结构化、模块化的⽅式总结和存储，供表现语⾔和⾏为进⾏调⽤。
⽹页结构语⾔包括可扩展超⽂本标记语⾔XHTML 1.0和HTML 5等两种结构语⾔。
其中，XHTML 1.0为当前被⼴泛使⽤的标准，⽽HTML 5标准则是⽹页未来将被使⽤的标准。
⽹页表现语⾔的作⽤是为⽹页的结构语⾔定义尺⼨、位置、背景，以及⽂本的各种效果。
⽬前⽹页表现的国际标准语⾔为CSS 样式表技术。
⽹页结构语⾔和⽹页表现语⾔共同作⽤可以为⽤户呈现⽹页的整体画⾯，然⽽，⽹页是⼀种交互性的媒体，其除了可以呈现内容外，还可以根据⽤户的界⾯操作响应各种事件，此时，就需要⽤到⽹页的⾏为语⾔。
⽹页的⾏为语⾔包括多种类型，例如，JavaScript、JScript以及VBScript等。
4.答：⼀个完整的HTML5⽂档包含声明、头部和主体三个部分组成。
第⼆章习题参考答案⼀、选择题1.A、B2.A3.B4.D5.D6.D7.C⼆、简答题1．答：（⼀）⽹站功能需求分析；（⼆）⽹站的策划，本阶段主要包含⽹站栏⽬，内容，产品提炼等等；（三）⽹站设计，根据策划开始进⾏设计；（四）程序代码的开发；（五）上线测试；（5）后期维护；2.答：（1）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。
对称的造型在⼤⾃然中⽐⽐皆是，同时也是版式设计常⽤的构成形式。
网页设计与制作第8章 网站建设
第八章 网站建设
8.1网站设计的原则与页面风格 很多初学者把掌握网页制作软件的使用看作是网站制作的最基本 的技能，但事实上并非完全如此，软件的掌握是短期就能够速成 的，而且新的软件层出不穷，功能越来越强大，要全部掌握这些 软件和功能是不可能的。然而，使用软件的是人必须有良好的网 站设计概念才能创造出优秀的网站，这才是网站制作的核心。虽 然软件是制作网站必不可少的工具，但是有一点不容忽视：网站 设计者使用的制作工具大同小异，无论是初学者还是专家，大多 数网站的建设人员都会选用诸如Dreamweaver，FrontPage， Fireworks，Photoshop，Photoimpact，ImageReady这些主流软 件。为什么设计出的网站却在风格、形态上都有很大的区别呢？ 这正说明了网站创作的灵魂在于站点建设者对网站的规划、网站 的风格及网站的概念的理解。
三级结构是一种典型结构，并不是唯一的结构。在三级结构之外， 网站制作者还可以编排出很多页面，比如：用于显示当日新闻的 弹出式活动面板、用于对访问者进行调查的调查问卷、当访问者 离开站点时的道别画面等，这些往往不属于典型页面，但他们也 包含在网站结构之中。下面我们将向大家介绍一些网站，并分析 站点结构： 商业站点结构，微软的主站点如图8-1所示：微软网站的主页体现 了一般商业网站的设计概念，从标志、站内搜索引擎到公司广告 都能体现。在本网站中，导航栏被设计在页面的上方，紧靠在公 司标志的下方以及网页的最下方，如果单击它们，就能进入到二 级页面。单击“栏目”出现二级页面——栏目页，该页上的文字 内容较一级页面明显增多。另外，导航条有所改，如图8-2所示 Products变成了黄色，同时前面的小三角指‘待修改’。
网页设计与制作教案
网页设计与制作教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念和重要性讨论网页设计的基本原则和目标1.2 网页设计流程介绍网页设计的基本流程，包括需求分析、设计草图、布局和配色等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Illustrator和Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念和作用讲解HTML的基本结构和语法2.2 CSS概述介绍CSS的概念和作用讲解CSS的基本语法和用法2.3 常用HTML标签介绍常用的HTML标签，如div、span、img等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性讲解常用的网页布局方法，如网格布局和Flexbox等3.2 排版与字体介绍排版和字体的概念和重要性讲解如何使用CSS进行排版和字体设置3.3 响应式设计介绍响应式设计的概念和重要性讲解如何使用CSS媒体查询来实现响应式设计第四章：网页动画与交互4.1 网页动画概述介绍网页动画的概念和作用讲解如何使用CSS动画和JavaScript实现网页动画4.2 网页交互概述介绍网页交互的概念和重要性讲解如何使用JavaScript实现网页交互效果4.3 表单与验证介绍表单的概念和重要性讲解如何使用HTML和JavaScript实现表单的验证和提交第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的目标和内容讲解如何规划和设计实践项目5.2 实践项目实施讲解如何使用HTML和CSS实现实践项目的布局和排版讲解如何使用JavaScript实现实践项目的动画和交互效果5.3 实践项目总结与评价总结实践项目的成果和经验教训对实践项目进行评价和改进建议第六章：网页素材的运用6.1 图像的使用介绍在网页中使用图像的规范讲解如何优化图像文件大小讲解图像的响应式处理方法6.2 视频和音频的使用介绍在网页中使用视频和音频的规范讲解如何嵌入视频和音频文件讲解视频和音频的响应式处理方法6.3 交互式元素介绍交互式元素的概念和作用讲解如何使用CSS和JavaScript创建交互式元素第七章：网页兼容性与优化7.1 浏览器兼容性介绍浏览器兼容性的概念和重要性讲解如何解决浏览器兼容性问题7.2 网页性能优化介绍网页性能优化的概念和重要性讲解如何优化网页加载速度和性能7.3 搜索引擎优化（SEO）介绍搜索引擎优化的概念和重要性讲解如何优化网页内容以提高搜索引擎排名第八章：网页设计与制作进阶技巧8.1 网页框架和库的使用介绍网页框架和库的概念和作用讲解如何使用常见的网页框架和库，如Bootstrap和jQuery8.2 响应式设计进阶讲解如何使用CSS预处理器（如Sass或Less）讲解如何使用现代CSS技术，如Grid布局和Flexbox8.3 网页编程语言的运用介绍在网页设计与制作中常用的编程语言，如JavaScript、jQuery和PHP 讲解如何使用这些编程语言实现复杂的网页功能第九章：网页设计与制作案例分析9.1 案例分析概述介绍案例分析的概念和重要性讲解如何选择和分析网页设计与制作的成功案例9.2 案例分析方法讲解如何对网页设计与制作案例进行逐层分析和总结讲解如何从案例中吸取经验和启示第十章：网页设计与制作的评估与改进10.1 网页设计与制作的评估介绍网页设计与制作评估的概念和重要性讲解如何对网页设计与制作过程进行评估和反思10.2 用户体验与交互设计介绍用户体验和交互设计的概念和重要性讲解如何提升用户体验和交互设计10.3 持续改进与更新讲解如何根据评估结果进行持续改进和更新强调在不断变化的市场环境中，持续学习和创新的重要性重点和难点解析重点一：网页设计原则与目标理解并运用网页设计的基本原则确定网页设计的具体目标重点二：网页设计流程掌握需求分析的方法和技巧学习设计草图、布局和配色等步骤的具体实现重点三：网页设计工具的使用熟练掌握至少一种网页设计工具的操作了解不同设计工具的优缺点和适用场景重点四：HTML与CSS的基础知识掌握HTML的基本结构和语法理解CSS的基本语法和用法重点五：网页布局与排版的方法学习并应用常用的网页布局方法掌握排版与字体的设置技巧重点六：响应式设计的原则与实现理解响应式设计的概念和重要性学会使用CSS媒体查询实现响应式设计重点七：网页动画与交互的效果实现掌握CSS动画和JavaScript动画的实现方法学习实现网页交互效果的技巧重点八：表单设计与验证理解表单的设计原则学会使用HTML和JavaScript实现表单验证和提交重点九：实践项目的规划与实施掌握实践项目的规划和设计方法学会使用HTML、CSS和JavaScript实现实践项目重点十：网页设计与制作的评估与改进学习如何对网页设计与制作过程进行评估和反思掌握提升用户体验和交互设计的方法全文总结和概括：本教案全面覆盖了网页设计与制作的基本概念、原则、流程、技术要点和实践应用。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
(完整版)网页设计教学大纲
网页设计教学大纲一、课程性质与任务1、课程性质《网页设计与制作》是中计算机专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver cs3，通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
2 、课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识：* 掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。
* 掌握各种网页元素在Dreamweaver cs3中的使用。
例如表格、文本、图像、超级链接、层和表单等。
* 熟悉一些网页设计辅助软件的功能和使用方法。
例如Flash、Fireworks、Photoshop等。
* 掌握测试和发布网站的方法。
包括网站测试的内容和方法。
* 能够解决一些网页设计中的常见问题。
* 了解ASP开发平台的搭建，Dreamweaver cs3在动态网页制作方面的应用。
二、课程教学目标与要求1、本课程的基本目标（1）使学生通过本课程的学习，掌握Dreamweaver cs3的使用方法，学会使用Dreamweaver cs3制作Web网页的技术。
（2）本课程学习结束后，学生应能自行设计各种网页、开发一定规模的网站，使学生通过本课程的学习，熟练掌握其基本制作方法和技巧，并最终设计一个综合性的网站并且编制简单的脚本上传到互联网上。
2、课程在知识、素质方面的基本要求（1）知识要求深入了解Internet，理解WWW、HTTP、HTML等概念及作用；掌握网站设计和发布的流程。
理解网站维护管理的意义及重要性，理解服务器、客户端、浏览器的概念和作用；了解多种网页制作软件和图像处理软件相结合设计网站的好处。
了解Dreamweaver cs3在动态网站上的应用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8.2.2 HTML 的结构
HTML 把元素划分为3 种主要类型： 把元素划分为 种主要类型： 核心的结构化元素有：<html>、<head>和<body>。 <html>是网页文档的开始，<head>中放的是关于文档 的信息，文档内容放在<body>中。 块状元素还分为3 种：结构化的、多目标的和终端的。 内联元素也有3 种主要的类型：语义化、排列顺序和内 联块状。
8.1.3 网页文档的类型与构成
网页文档的种类主要分为两大类： 网页文档的种类主要分为两大类： 静态网页文档 所谓静态网页文档，就是网页文档里面没有程序代码，不会被 服务端执行。这种网页通常在服务端以扩展名.htm 或是.html 存储，表示里面的内容是以HTML 语言所编写。 动态网页文档 所谓动态网页文档，就是网页文档内含有程序代码，并会被服 务器执行。这种网页通常以扩展名类似于.asp 或是.aspx 存储， 网页中采用Active Server Pages（ASP），或者是PHP、 JSP 等动态网页技术。
1
8.1 网页概述
8.1.1 网页与 网页与WWW 8.1.2 网站的用途 8.1.3 网页文档的类型与构成
8.1 网页概述
我们平时所看到的网页实际上是一个文件，被存放在某一 台计算机中，网页经由网址来识别与存取，当我们在浏览器输入 网址后，经过一段复杂而又快速的程序，网页文件会被传送到你 的计算机，并由浏览器将网页的内容展示在我们的眼前。静态网 页文件通常是HTML 格式（文件扩展名为.html 或.htm）
8.2.1 HTML 的由来与发展
HTML 作为定义万维网的基本规则之一，最初由蒂姆约 翰伯纳斯-李（Tim John Berners-Lee）于1989 年在 CERN 研制出来。既然HTML 成为网页信息发布的标准格式， 因此使用任何一种计算机和浏览器浏览采用HTML 描述的网页 信息时，都可以正确地、透明地共享网页上包含的所有数据。
8.2.1 HTML 的由来与发展
现今HTML 语言版本已从较早的2.0 版本发展演变到一直 沿用至今的4.01 版本，可用来编辑网页和HTML 语言的软件种 类也纷繁众多，实际上，我们只需要一个简单的文字处理软件 就可编写HTML 语言，甚至是Windows 操作系统中的记事本 或写字板，基础的HTML 语言程序也很容易掌握。 2008 年，发布第一份正式的HTML 5.0 草案。HTML 5.0 比以往的版本允许添加更多样化的数据形式，还有语言本 身加入一些新的页面元素，例如<header>、<section>、 <footer>以及<figure>等元素。当然，一些过时的HTML 4.0 中使用的元素将被取消，其中包括纯粹显示效果的元素， 如<font>和<center>，因为它们已经被CSS 取代。
WWW 万维网、Web 网、3W 网 万维网、 World Wide Web
最初是由蒂姆约翰伯纳斯-李（Tim John Tim Berners-Lee）在欧洲核物理研究中心（CERN） 提出的，并且在麻省理工学院计算机科学实验 室成立了万维网联盟，又称W3C理事会。
网页与WWW 8.1.1 网页与WWW
8.3.3 网页设计要点
网页设计有以下要点： 网页设计有以下要点： 确定整体风格 网页色彩搭配 网页内容新颖 网页命名简洁 注意视觉效果 网页文字易读 熟练掌握HTML 图片注释文字 浏览器兼容性 网页动画数量 网页导航清晰
8.3.4 网页的布局
网页布局类型： 网页布局类型： “国”字型 框架型 封面型 Flash 型
8.1.2 网站的用途
网站有下列几种用途： 网站有下列几种用途： 企业网站 许多公司与企业都拥有自己的网站，利用网站来进行宣传、 发布产品资讯和招聘等。 个人网站 随着网页制作技术的流行，很多人也开始制作个人主页， 这些通常是制作者用来自我介绍、展现个性的地方。 资讯网站 也有以提供网络资讯为赢利手段的网络公司，提供人们生 活各个方面的资讯，如时事新闻、旅游、娱乐、经济等。
8.2.2 HTML 的结构
1．“文件头”（head） ． 文件头” ） 文件头标记也就是通常见到的标记，标记在网页中是看不到的，因为它包 含在HTML 语言的<head>…</head>标记之间，而通常我们所见到的网 页内容只有在<body>…</body>之间的才可以在文档中显示出来。
2．“文件标题”（title） ． 文件标题” ） title 元素是文件头里唯一一个必须出现的元素，它也只能出现在文件头里。 它的格式如下： <title>标题</title> 标题表示该HTML 文件的名称，是对文件的概述。标题对于一个文件来说 是非常重要的，我们可以从一个好的标题中判断出该文件大概的内容。不 过文件的标题一般不会显示在文本窗口中，而是以窗口的名称显示出来。
8.2.2 HTML 的结构
HTML 是严格的元素层次嵌套结构，每个元素必须使用 “<>”包含起来形成标记（tags），并且标记是成对呈现， 有开始标记，就有相对应的结束标记。元素可以互相嵌套，但 是却不能重叠。
<html> <head> <title>标题 </title> </head> <body> 正文部分 </body> </html>
8.3.2 FrontPage 2003 软件常用功能
FrontPage 2003 成功启动后，在屏幕上出现FrontPage 2003 主窗 口，该窗口主要由标题栏、菜单栏、工具栏、视图栏、编辑区和状态栏等部 分组成。窗口采用“所见即所得”的操作方式。我们对FrontPage 2003 软 件中的常用功能及操作进行简要介绍。 1．软件界面组成 ． （1）菜单栏 （2）工具栏 （3）编辑区 2．常用工具栏按钮 ． （1）“新建普通网页”按钮 （2）“切换窗格”按钮 （3）“浏览器的预览”按钮 （4）“Web 组件”按钮 （5）“插入超链接”按钮 （6）“发布网站”按钮 3．新建站点 ． （1）使用模板新建站点 （2）使用向导新建站点 （3）直接新建站点 4．站点中的网页编辑 ． （1）打开已创建的网站 （2）在站点中新建网页 （3）保存网页 5．打开已经存在的网页 ． 6．在浏览器中预览网站 ． 7．网页格式排版 ． （1）设置网页标题 和属性 （2）设置文本格式 （3）设置超链接 8．在网页中插入图 ． 片
网页与WWW 8.1.1 网页与WWW
统一资源定位器 Uniform Resource Locator，URL ，
URL 用来标识WWW 网中每个信息资源（比 如网页资源）的位置。 在浏览器的地址栏中输入的南京艺术学院网址
网页与WWW 8.1.1 网页与WWW
大学计算机应用基础
主编：褚宁琳
DAXUE JISUANJI YINGYONGJICHU
第
8
章
网页设计
学习目标
掌握网页的基本概念 掌握HTML 的由来及结构 掌握网页设计的要点、布局及配色 了解网页编程、规划及发布的方法
目 录
1
8.1 网页概述
2 3
8.2 HTML 8.3 网页设计
4
8.4 网站开发
超文本 Hypertext
超文本的创造者是范内瓦布什（Vannevar Bush）
8.1.2 网站的用途
网站 Website
网站是指在互联网上，根据一定的规则， 用于展示特定内容的相关网页的集合。简单地 说，网站是一种通信工具，就像布告栏一样， 人们可以通过网站来发布自己想要公开的资讯， 或者利用网站来提供相关的网络服务。人们可 以通过网页浏览器来访问网站，获取自己需要 的资讯或者享受网络服务。
8.1.3 网页文档的类型与构成
超文本是用超链接的方法，将各种不同空间的文字信息非 线性组织在一起的网状文本。超文本更是一种用户界面方式， 用以显示文本及与文本之间相关的内容。其中的文字包含可以 链接到其他位置或者文档的链接，允许从当前阅读位置直接切 换到超文本链接所指向的位置。 通常我们看到的网页，就是这样的电子文档，有些是 以.htm 或.html 为扩展名结尾的文档，不同的扩展名，分别代 表不同类型的网页文档，例如，以CGI、ASP、PHP、JSP 甚 至其他更多的扩展名结尾的网页文档。
8.3.1 8.3.2 8.3.3 8.3.4 8.3.5 8.3.6
网页设计工具 FrontPage 2003 软件的常用功能 网页设计要点 网页的布局 网页的配色 CSS 与JavaScript
8.3.1 网页设计工具
1．Adobe Dreamweaver Dreamweaver 软件是一个很强大的网页设计软件，它包括可视化编辑、HTML 代 码编辑的视图模式，它还能通过拖曳从头到尾制作动态的HTML 动画，支持动态 HTML（Dynamic HTML）的设计，即使页面没有插件也能够在各种浏览器中正确地 显示页面的动画。 2．Microsoft FrontPage FrontPage软件的工作窗口由3 个标签页组成，分别是“所见即所得”的编辑页、 HTML 代码编辑页和预览页。FrontPage 最强大之处是其站点管理功能，在更新服 务器上的站点时，不需要创建更改文件的目录。
8.2 HTML
HTML 超文本标记语言 HyperText Mark-up Language HTML 是构成网页文档的主要语言，成为网页文档发布和 浏览的基本格式。HTML 文本是由 HTML 命令组成的描述性 文本，HTML 命令可以说明文字、图形、动画、声音、表格和 超链接等。
8.2.1 HTML 的由来与发展 8.2.2 HTML 的结构 8.2.3 HTML 实例