第八章 网页设计
网页设计教学教案
网页设计教学教案第一章：网页设计基础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在动态网站上的应用。
网络规划设计师8
19
《网络规划与设计 网络规划与设计》 冶金工业出版社
网络规划与设计——第八章
8.5.3 网页配色
• 1. 2. 3. 4. 网页色彩搭配的原理 ： 色彩的鲜明性。 色彩的独特性。 色彩的合适性。 色彩的联想性。
20
《网络规划与设计 网络规划与设计》 冶金工业出版社
6
《网络规划与设计 网络规划与设计》 冶金工业出版社
网络规划与设计——第八章
8.2 网站的整体风格和创意设计
（1）风格是什么，如何树立网站风格？ （2）创意是什么，如何产生创意？
7
《网络规划与设计 网络规划与设计》 冶金工业出版社
网络规划与设计——第八章
8.2.1 风格
• 风格（style）是抽象的。是指站点的整体形象给 浏览者的综合感受。 • 风格是独特的，是站点不同与其他网站的地方。 • 风格是有人性的。
8.6 网页字体的设置
• 1. 2. 3. 4. 5. 字体使用技术 字符集的设定 字体的使用 字体的效果 字体大小的控制 字体超链接样式的设定
22
《网络规划与设计 网络规划与设计》 冶金工业出版社
网络规划与设计——第八章
8.6.2 字体使用原则
（1）不要使用超过3种以上的字体。字体太多则显得杂乱， 没有主题。 （2）不要用太大的字。因为版面是宝贵，有限的，粗陋的 大字体不能带给访问者更多信息。 （3）不要使用不停闪烁的文字。想让浏览者多停留一会儿 的话，就不要使用闪烁的文字。 （4）原则上标题的字体较正文大，颜色也应有所区别。
5
《网络规划与设计 网络规划与设计》 冶金工业出版社
网络规划与设计——第八章
《网页设计与制作》课程标准
《网页设计与制作》课程标准学时数：48学时________________ 课程性质：专业必修课—适用专业：计算机应用专业—一、本课程的性质、地位、作用以及与其它相关课程内容的联系《网页设计与制作》是计算机应用专业的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
二、课程教学目标本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识：*掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。
*掌握各种网页元素在DreamWeaVer中的使用。
例如表格、文本、图像、超级链接、层和表单等。
*掌握测试和发布网站的方法。
包括网站测试的内容和方法。
*能够解决一些网页设计中的常见问题。
三、本课程学时安排四、课程教学内容和基本要求（按章节详细阐述）第一章：网页设计概述（一）教学重点和难点重点：Dreamweavercs5的参数设置、Dreamweaver的站点设置。
难点：DreamWeaVer的站点设置。
（二）教学内容和基本要求教学内容：基础知识，初识DreamWeaver,DreamWeaVerCS5的参数设置，设置站点。
基本要求：了解网页设计基本知识；掌握DreanlweaVerCS5的参数设置；熟练掌握Dreamweaver的站点设置。
第二章：表格布局（一）教学重点和难点重点：表格基本操作、表格布局。
难点：表格布局。
（二）教学内容和基本要求教学内容：表格基本操作，表格高级应用，表格布局，网页设计基础。
基本要求：了解表格基本操作、表格高级应用及网页设计基础；掌握表格基本操作；熟练掌握表格布局。
第三章：CSS样式表（一）教学重点和难点重点：CSS样式表应用。
网页设计课件第8章
《网页设计与制作》
17
8.7 按钮、动画和行为 8.7.1 按钮 按钮是网页的重要组成元素之一，在网页中发挥着十分重要的作用。它主要起 着两个作用：第一是起到提示性的作用，用提示性的文本或者图形来告诉 浏览者单击后会有什么作用，这样的按钮可以是静态的图片，主要是让浏 览者了解单击它起到什么作用，甚至可能仅仅是一个小的较为美观的图片。 第二是动态响应的作用，即指浏览者在进行不同的操作时，按钮能够呈现 出不同的效果，响应不同的鼠标时间。起这样作用的按钮在一般情况下有4 个状态，即释放、滑过、按下或按下时滑过，它们的具体含义为： 释放状态：按钮默认的状态，当鼠标的指针没有指向按钮时，按钮就显示为这 种状态。 滑过状态：当用户将鼠标指向按钮但没有按下鼠标时的状态。此状态提醒用户 单击鼠标时很可能会引发一个动作。 按下状态：当用户将按钮按下时显示的状态。 按下时滑过状态：指在按钮被按下后，再在其上移动鼠标时的状态。 Fireworks 8提供了强大的按钮制作功能，用户可以新建也可以调用库来制作出 各种各样的按钮，可以通过使用按钮编辑器来快速变换按钮上的文字，使 得用户能够批量制作按钮，从而轻松制作有动态效果的导航栏。 1．创建动态按钮 2．编辑按钮 3．为按钮添加URL链接 4．导出按钮ຫໍສະໝຸດ 《网页设计与制作》13
3．滤镜的使用 滤镜可为位图添加特殊效果，该效果可应用于整个图像也 可以应用于图像中的一个部分。对图像进行滤镜操作可 在滤镜菜单中实现，在Fireworks 8中提供了7组滤镜， 下面介绍一个“缩放模糊”滤镜效果的制作。
《网页设计与制作》
14
8.5.4 图片效果的运用 下面介绍一个非常实用的例子：利用Fireworks制作照片 连续滚动效果。
10
8.5.2 对位图的编辑 位图格式的图像使用点来记录文件信息，每个点被称为一个 像素，无数个点组合在一起就形成了一幅图像。当将位图 放大时，如果放大一倍，1个点就变成了4个点，这样就会 出现通常所说的马塞克现象，使图像变得模糊和不清晰。 位图的这种记录方式适合用来表达色彩丰富的图形，常用 的位图图像格式有JPG、GIF、BMP等。基于上述原因， 矢量图常常被用于显示一些较“干净”的图形（即没有太 高的精确要求）、卡通动画、文本等。而那些对精度要求 较高及不太适宜用数学计算来表示的图形（如自然风景照 片等）就要用到位图了。 绘制位图图形的工具主要分布在工具箱中的位图部分，位图 工具主要包括刷子工具和铅笔工具，如图8-42所示。 图8-42 位图工具 下面用一个小例子来说明利用Fireworks 8是怎么进行位图编 辑的。 【例8-2】羽化图片。
中文dreamweaver8网页设计课程大全上册
管理本地站点
n 编辑本地站点 n 删除本地站点
中文dreamweaver8网页设计课程大 全上册
编辑本地站点
n 选择本地站点 n 删除站点中的文
件和文件夹 n 更改站点信息
中文dreamweaver8网页设计课程大 全上册
删除本地站点
如果不需要某个站点时，可以将其从站 点列表中删除。
中文dreamweaver8网页设计课程大 全上册
管理站点地图
n 定义主页 n 查看站点地图 n 在站点地图中管理页面文件
中文dreamweaver8网页设计课程大 全上册
定义主页
在使用站点地 图查看站点时必须保 证这个站点已定义了 一个主页，因为主页 是一个站点的根节点， 必须有根节点才有各 个支节点，也就是各 个子页。
新建文件夹
建立好站点后就可以在站点中新建文件夹，该文 件夹主要用来存储这个网站中用到的网页元素，如图 片、音乐等。
中文dreamweaver8网页设计课程大 全上册
新建网页文件
新建网页文件的方法与新建文件夹的 方法相同 。
中文dreamweaver8网页设计课程大 全上册
创建远程站点
创建远程站 点的方法与创建本 地站点的方法类似， 只是无需在站点文 件夹下再新建文件 夹或网页文件。
统一资源定位符（URL）
URL（Uniform Resource Locator）主要是用来 指定协议（如HTTP或FTP）以及对象、文档、万维网网 页或其他目标在Internet的位置和存取方式。
n 通信协议 n 主机名 n 所要访问的网页路径及名称
中文dreamweaver8网页设计课程大 全上册
《网页设计》完整课件网页设计课件
网页设计的流程与方法
网站可用性设计 网页布局设计 网页配色方案设计 网页字体设计 网页图片和图标设计
网页设计的工具与资源
Adobe Photoshop的基本使用方法与技巧 Sketch的基本使用方法与技巧 网页设计常用的图片、图标和字体资源
网页设计的实践
综合案例分析 实战演练：设计一个响应式网页 常见网页设计错误及其修正方法
《网页设计》完整课件网 页设计课件
本课件涵盖了网页设计的全部内容，从基础知识到实践，帮助你全面了解网 页设计的要素、流程以及工具与资源。让我们一起探索网页设计的精彩世界 吧！
导论
什么是网页设计？ 网页设计的目的与意义 网页设计的基本要素
网页设计基础知识
前端技术概述 HTM法 响应式设计的原理与实现
总结
页设计的发展趋势与展望 如何成为一个优秀的网页设计师
网页设计教学教案
网页设计教学教案第一章：网页设计概述1.1 教学目标了解网页设计的概念与意义掌握网页设计的基本原则与要求了解网页设计的发展趋势1.2 教学内容网页设计的概念与意义网页设计的基本原则与要求网页设计的发展趋势1.3 教学方法讲授法：讲解网页设计的概念、原则与要求展示法：展示优秀的网页设计案例，分析其设计思路与技巧1.4 教学步骤引入话题：介绍网页设计的概念与意义讲解基本原则与要求：强调用户体验、界面美观、内容清晰等原则分析发展趋势：介绍响应式设计、扁平化设计等趋势课堂练习：学生自行设计一个简单的网页布局1.5 作业布置要求学生完成一个简单的网页设计布局，包括头部、主体内容、底部等部分第二章：网页设计与制作基本工具2.1 教学目标掌握网页设计与制作的基本工具学会使用HTML、CSS、JavaScript等语言进行网页制作2.2 教学内容HTML：介绍HTML的基本结构与标签CSS：介绍CSS的语法与使用方法JavaScript：介绍JavaScript的基本语法与功能2.3 教学方法讲授法：讲解HTML、CSS、JavaScript的基本概念与使用方法实践操作法：学生实际操作，掌握基本语法与使用技巧2.4 教学步骤讲解HTML：介绍HTML的基本结构与标签，如、段落、图片等讲解CSS：介绍CSS的语法与使用方法，如选择器、属性、样式表等讲解JavaScript：介绍JavaScript的基本语法与功能，如弹窗、动态效果等课堂练习：学生自行设计一个简单的网页，并使用HTML、CSS、JavaScript实现一些基本效果2.5 作业布置要求学生完成一个简单的网页，并使用HTML、CSS、JavaScript实现一些基本效果，如导航栏、图片轮播等第三章：网页布局与排版3.1 教学目标掌握网页布局与排版的方法与技巧学会使用div标签进行布局掌握CSS样式表的编写方法3.2 教学内容网页布局的方法与技巧使用div标签进行布局CSS样式表的编写方法3.3 教学方法讲授法：讲解网页布局的方法与技巧展示法：展示优秀的网页布局案例，分析其设计思路与技巧实践操作法：学生实际操作，掌握布局方法与技巧3.4 教学步骤讲解网页布局的方法与技巧：介绍网格布局、浮动布局等方法讲解使用div标签进行布局：介绍div标签的使用方法与布局技巧讲解CSS样式表的编写方法：介绍选择器、属性、样式表等语法课堂练习：学生自行设计一个简单的网页布局，使用div标签与CSS样式表实现3.5 作业布置要求学生完成一个简单的网页布局，使用div标签与CSS样式表实现，包括头部、主体内容、底部等部分第四章：网页配色与图片处理4.1 教学目标掌握网页配色原则与技巧学会使用图片处理软件进行图片处理掌握CSS样式表中图片样式编写方法4.2 教学内容网页配色原则与技巧图片处理软件的使用方法CSS样式表中图片样式编写方法4.3 教学方法讲授法：讲解网页配色原则与技巧展示法：展示优秀的网页配色案例，分析其设计思路与技巧实践操作法：学生实际操作，掌握配色方法与技巧4.4 教学步骤讲解网页配色原则与技巧：介绍对比、调和、重复等配色原则讲解图片处理软件的使用方法：介绍Photoshop、Fireworks等软件的使用技巧讲解CSS样式表中图片样式编写方法：介绍图片样式、响应式图片等语法课堂练习：学生自行设计一个简单的网页配色，并使用图片处理软件进行图片处理4.5 作业布置要求学生完成一个简单的网页配色，并使用图片处理软件进行图片处理，将处理后的图片应用到网页中第五章：网页第六章：响应式网页设计6.1 教学目标理解响应式网页设计的概念与重要性掌握媒体查询的使用方法学会创建适应不同设备的网页布局6.2 教学内容响应式网页设计的概念与重要性媒体查询的使用方法响应式布局技术6.3 教学方法讲授法：讲解响应式网页设计的理念与技术展示法：展示响应式网页设计案例，分析其设计要点实践操作法：学生动手实践，尝试创建响应式网页布局6.4 教学步骤引入响应式网页设计概念：解释响应式网页设计的目的与优势讲解媒体查询：介绍媒体查询语法与用法，演示如何适应不同屏幕尺寸实践响应式布局：学生通过实际操作，使用CSS媒体查询实现响应式布局课堂练习：学生设计一个响应式网页布局，测试其在不同设备上的显示效果6.5 作业布置要求学生完成一个响应式网页布局设计，包括媒体查询的使用，适应手机、平板、桌面电脑等不同设备。
使用FrontPage 2003制作网页.ppt
二、FrontPage 2003的工作窗口 选择 “开始”→“所有程序”→“Microsoft office”→“Microsoft office FrontPage 2003”命令，即可打开 FrontPage 2003的工作窗口，如图8.1.1所示。该窗口与 Office 2003的其他组件的工作窗口基本相同，用户可以在 工作区中制作和编辑网页。
（3）自定义站点。如果用户已对该软件非常熟悉，也 可以自定义创建站点，具体操作如下：
1）选择“文件”→“新建”命令，弹出“新建”任务 窗格。
2）在该任务窗格中的“新建网站”选项区中选择“由 一个网页组成的网站”选项，弹出“网站模板”对话框。
3）在该对话框中选择“空白网站”选项，并在右侧的 网站位置下拉列表框中输入网站的位置后，单击“确定” 按钮，即可创建一个只包含两个空白文件夹private和 image的站点，用户可自行创建主页及其他网页文件。
（5）超链接视图。该视图将网站中所有的内部和外 部超链接的状态显示在一个列表中，并用图标表示超链接 已通过验证或已中断。选择“视图”→“超链接”命令， 即可切换到该视图。
（6）任务视图。该视图以列表的形式显示网站中的 所有已完成或尚未完成的任务，并在各个列标题下提供有 关各项任务的当前信息。选择“视图”→“任务”命令， 即可切换到该视图。
图8.1.1 FrontPage 2003的工作窗口
三、FrontPage 2003的基本视图 FrontPage 2003为用户在创建站点和编辑网页时提供 了多种视图，其中网站的视图模式有网页设计视图、文件 夹视图、报表视图、导航视图、超链接视图、任务视图和 远程网站视图；网页的视图模式有设计视图、代码视图、 拆分视图和预览视图。
二、打开站点 如果要对某个网站进行编辑修改，可先将其打开，然 后再进行其他编辑操作。用户可以使用以下两种方法打开 站点： （1）选择“文件”→“打开网站”命令，弹出“打开 网站”对话框。在该对话框中选择要打开的站点，单击“打 开”按钮 即可。 （2）单击常用工具栏中“打开”按钮 右侧的下拉 按钮 ，在其下拉菜单中选择“打开网站”命令，在弹出的 “打开网站”对话框中选择要打开的站点，单击“打开”按 钮即可。
网页制作之HTML标记语言篇
第八章HTML标记语言李思章老师QQ：413142184通过本章的学习，读者可以理解创建网页的基本元素，可以利用各种基本的网页制作技术进行页面设计和排版，从而创作出包含列表、表格、图像、超级链接、其他对象及框架结构的网页。
第一节HTML概述1、HTML的定义HTML是Hypertext Markup Language的缩写，意思是超文本标记语言，用于描述网页文档。
自从1990年首次用于网页编辑后，HTML迅速崛起成为网页编辑的主流语言。
几乎所有的网页都是由HTML或以其他程序语言嵌套在HTML中编写的。
HTML并不是一种程序语言，而是一种结构语言，它是一种规范，是一种标准，它是通过标记元素来实现网页内容的格式。
HTML语言具有平台无关性，这种语言可以通过记事本、Microsoft Frontpage、Adobe Dreamweaver等工具来编写，保存文件格式为.htm或者.html为后缀名的文件，无论用户使用什么操作系统，只要有响应的浏览器程序，就可以运行HTML文档。
虽然现在流行的浏览器能兼容早期结构不太严格的HTML文件，可以不按规则结构编写HTML文档，而且不同的浏览器对HTML标记元素及属性的解释也不完全一致，但是考虑到代码的可读性和纠错等方面因素，在此强烈建议大家按结构化方式编写HTML代码。
我们平常所说的“WEB页面”实际上就是指HTML文档，也就是说每个WEB页对应于一个HTML 文件。
在浏览器中是按顺序阅读网页文件（HTML文件）的，然后根据内容周围的HTML标记元素及属性来解释和显示各种内容，这个过程叫做语法分析。
2、HTML的结构HTML标记元素，绝大多数有起始标记和结尾标记，如：HTML语言的起始和结尾标记<html></html>、头部标记的起始和结尾<head></head>、页面标题标记的起始和结尾<title></title>、页面内容标记的起始和结尾<body></body>、表格标记的起始和结尾<table></table>、表单标记的起始和结尾<form></form>、框架集标记的起始和结尾<frameset></frameset>、样式表定义标记的起始和结尾<style></style>、脚本程序定义标记的起始和结尾<script></script>等。
《网页设计与制作》教案
一、教案基本信息教案名称：《网页设计与制作》教案适用课程：网页设计与制作课时安排：共20课时，每课时45分钟教学目标：1. 了解网页设计的基本概念和流程；2. 掌握HTML、CSS和JavaScript的基本语法和应用；3. 能够独立设计和制作简单的网页。
教学方法：1. 讲授与实践相结合；2. 案例分析；3. 小组讨论与协作。
教学内容：1. 网页设计基本概念与流程；2. HTML基本语法及应用；3. CSS基本语法及应用；4. JavaScript基本语法及应用；5. 网页设计与制作实践。
二、第一章：网页设计基本概念与流程课时安排：2课时教学内容：1. 网页设计基本概念；2. 网页设计流程；3. 网页设计原则与技巧。
教学方法：1. 讲授与实践相结合，通过案例分析让学生了解网页设计的基本概念和流程；2. 小组讨论，让学生分享对网页设计原则与技巧的理解。
教学活动：1. 引入案例：分析优秀网页设计案例，引导学生了解网页设计的基本概念；2. 讲解网页设计流程，让学生掌握从需求分析到设计制作的过程；3. 小组讨论：学生分组讨论网页设计原则与技巧，分享心得体会。
作业与评估：1. 课后作业：要求学生总结本节课所学的网页设计基本概念和流程；2. 课堂表现：观察学生在讨论中的参与程度和理解程度。
三、第二章：HTML基本语法及应用课时安排：4课时教学内容：1. HTML基本语法；2. 常用HTML标签及属性；3. HTML页面结构。
教学方法：1. 讲授与实践相结合，通过案例让学生掌握HTML基本语法和常用标签；2. 小组讨论，让学生分析实际案例中的HTML代码。
教学活动：1. 讲解HTML基本语法，让学生了解HTML代码的构成；2. 演示常用HTML标签及属性，让学生通过实践掌握其应用；3. 案例分析：学生分组分析实际案例中的HTML代码，理解其结构。
作业与评估：1. 课后作业：要求学生编写一个简单的HTML页面，运用所学标签和属性；2. 课堂表现：观察学生在讨论和实践中对HTML基本语法的掌握程度。
- 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 实例