网页设计第七章
第七章 使用Div和AP Div
DIV+CSS是网站标准（或称“WEB标准”）中 常用术语之一，通常为了说明与HTML网页设计语 言中的表格（table）定位方式的区别，因为 XHTML网站设计标准中，不再使用表格定位技术， 而是采用DIV+CSS的方式实现各种定位。
Div标签本身没有任何表现属性，如果要使Div
绘制嵌套的AP Div
（1）确保在“AP 元素”面板中取消选择了“防 止重叠”。
（2）在“插入”工具栏的“布局”类别中。单击 “绘制AP Div”按钮
（3）在“文档”窗口的“设计”视图中，鼠标拖 动绘制一个AP Div
（4）在选中“绘制AP Div”按钮 ，在现有AP Div的内部鼠标拖动绘制AP Div，这个AP Div就嵌 入到前面的AP Div中， apDiv2嵌入到apDiv1中
置在网页文档中的任何一个位置，都可以随意移动，而且还可以与动作
行为制作出动画效果。
1.插入AP Div
AP Div可以使用菜单中的命令插入，也可以选择 插入栏中相应的按钮，通过拖拽鼠标添加AP Div。
（1）在页面的“设计”视图，在“插入”工具栏 的“布局”类别中，单击“绘制AP Div”按钮 ，
2． 使用AP元素面板将现有AP元素嵌套在另一个 AP元素中
单击菜单“窗口”→“AP元素”，打开“AP元素” 面板
在“AP元素”面板中选择一个AP元素，然后按 住Ctrl键将此AP元素拖动到“AP元素”面板中的目 标AP元素。
目标AP元素的名称高亮显示时，松开鼠标按钮
一些 Web 设计人员更喜欢通过 AP 元素来进行设 计，而不是使用表格来创建自己的布局。 Dreamweaver 可以使用 AP 元素来创建自己的布局， 然后将它们转换为表格。例如，如果需要支持 4.0 版 之前的浏览器，可能需要将AP 元素转换为表格。不过， 建议不要将 AP 元素转换为表格，因为这样做会产生带 有大量空白单元格的表格，更不用说急剧增加的代码了。 如果需要一个使用表格的页面布局，最好使用 Dreamweaver 中可用的标准表格布局工具来创建该页 面布局。
学习网页设计基础知识的快速方法
学习网页设计基础知识的快速方法第一章：了解网页设计基础知识的重要性在如今数字化时代，网页设计已经成为一种必备的技能。
无论是个人网站、商业网页还是移动应用，都需要良好的网页设计来吸引用户并提供良好的用户体验。
学习网页设计基础知识是非常重要的，下面将介绍一些快速学习网页设计基础知识的方法。
第二章：理解网页设计的基本原理网页设计的基本原理涉及诸多方面，包括色彩搭配、排版布局、图像处理等。
理解这些基本原理对于设计出令人满意的网页至关重要。
学习这些基础知识可以通过参考相关书籍、在线教程、以及参加培训课程来获取。
同时，可以通过分析优秀的网站设计来学习他们的设计原理，并尝试将其应用到自己的设计中。
第三章：掌握HTML和CSSHTML和CSS是网页设计的基础，学习这两个语言是非常重要的。
HTML是超文本标记语言，用于创建和组织网页的结构和内容。
CSS是层叠样式表，用于控制网页的布局和样式。
学习HTML和CSS可以通过在线教程、网上代码资源和实践来进行。
可以创建一个简单的网页，并尝试使用不同的CSS样式来美化网页。
第四章：了解响应式设计响应式设计是一种能够适应不同屏幕尺寸的设计方法。
随着移动设备的普及，响应式设计已经成为必备的技能。
学习响应式设计可以通过掌握媒体查询、弹性盒子布局和流体网格等技术来实现。
同时，可以通过使用响应式设计框架，如Bootstrap，来简化设计过程。
第五章：学习用户体验设计用户体验设计是确保网页能够提供良好使用体验的重要方面。
了解用户的需求和行为，以及如何设计简单、直观的界面是提升用户体验的关键。
学习用户体验设计可以通过阅读相关书籍、参加相关课程和实践来进行。
可以通过使用原型工具来设计和测试用户界面，以便根据用户的反馈进行改进。
第六章：尝试使用网页设计工具学习使用网页设计工具可以提高设计效率和质量。
常用的网页设计工具包括Adobe Photoshop、Adobe Illustrator和Sketch等。
第07章 动态网站技术概述
1.PHP技术的特点
（1）PHP是免费的，可以从PHP官方网站（）自 由下载PHP的相关软件。 （2）PHP的源代码是开源的，所有的PHP源代码理论上都可以得到。 （3）PHP程序开发效率高、运行速度快。相对于其他语言，编辑简单， 实用性强，更适合初学者。 （4）由于PHP是运行在服务器端的脚本,可以运行在UNIX、LINUX、 WINDOWS等环境下，所以跨平台性强。 （5）由于PHP消耗相对较少的系统资源，所以其运行效率高。 （6）利用PHP可以动态创建图像。 （7）在PHP4和PHP5 中，面向对象功能得到了很大的改进，因此可以 用来开发大型商业系统。
7.4.1 IIS搭建Web服务器
7.4 动态Web服务器
静态网页制作好以后，可以直接在浏览器中进行预览和测试，但是动态网 页制作好以后，必须要在Web服务器上进行预览和测试，也就是说需要搭建一 个Web服务器的环境，用来开发测试动态网页，甚至可以直接用来发布静态网 站和动态网站。 对于Windows平台来说，IIS就是标准的Web服务器，而对于UNIX和Linux平 台来说，Apache就是最常用的Web服务器。
1.ASP技术的特点
（1）利用ASP技术可以突破静态网页的一些功能限制，实现动态网页技术。 （2）ASP代码是嵌入在HTML代码所组成的文件中的，因此易于学习和使用。 （3）服务器上的ASP程序会在服务器端执行ASP程序，并将结果以HTML格式 传送到客户端浏览器上，因此兼容性极好，使用各种浏览器都可以正常浏览 ASP所产生的网页。 （4）ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更加 强大，并且大大节省了开发时间，提高了开发效率。 （5）ASP可以使用服务器端ActiveX组件来执行各种各样的特殊任务，如存取 数据库、发送Email或访问文件系统等，使得网页的功能更加丰富。 （6）由于服务器是将ASP程序执行后的结果以HTML形式传回到客户端浏览器 的，因此使用者根本不会看到ASP所编写的原始程序代码，可防止ASP程序代 码被窃取，提高了网站的安全性。 （7）利用ASP可以方便地连接ACCESS或SQL数据库，这为网站的开发提供了 便捷的路径。 （8）ASP不仅可以与HTML结合开发网站，也可以与XHTML（eXtensible HyperText Markup Language，可扩展超文本标记语言）和WML（Wireless Markup Language，无线标记语言）结合制作WAP手机网站。 这是因为ASP技术具有如上所述的诸多优点，所以也是目前应用最为广泛的动 态网站制作技术。
网页设计教学教案
网页设计教学教案第一章：网页设计概述1.1 教学目标让学生了解网页设计的概念和重要性让学生掌握网页设计的基本原则和流程1.2 教学内容网页设计的定义和作用网页设计的基本原则（如用户体验、界面设计、内容组织等）网页设计的流程（如需求分析、设计稿制作、编码实现等）1.3 教学方法讲授法：讲解网页设计的概念和原则案例分析法：分析优秀网页设计案例，让学生了解设计要点实践操作法：让学生动手制作简单的网页设计稿1.4 教学评估课堂问答：检查学生对网页设计概念和原则的理解案例分析报告：评估学生对优秀网页设计案例的分析能力网页设计稿：检查学生的实际操作能力第二章：网页界面设计2.1 教学目标让学生掌握网页界面设计的基本原则和方法让学生了解网页界面设计的常见元素和布局方式2.2 教学内容网页界面设计的基本原则（如清晰性、一致性、美观性等）网页界面设计的常见元素（如文字、图片、按钮等）网页界面设计的布局方式（如网格布局、分区布局等）2.3 教学方法讲授法：讲解网页界面设计的原则和常见元素案例分析法：分析优秀网页界面设计案例，让学生了解设计要点实践操作法：让学生动手制作网页界面设计稿2.4 教学评估课堂问答：检查学生对网页界面设计原则和常见元素的理解案例分析报告：评估学生对优秀网页界面设计案例的分析能力网页界面设计稿：检查学生的实际操作能力第三章：网页布局与排版3.1 教学目标让学生掌握网页布局和排版的基本原则和方法让学生了解网页布局和排版的常见技术和工具3.2 教学内容网页布局和排版的基本原则（如清晰性、一致性、美观性等）网页布局和排版的常见技术（如HTML、CSS等）网页布局和排版的工具（如网页编辑器、设计软件等）3.3 教学方法讲授法：讲解网页布局和排版的原则和技术案例分析法：分析优秀网页布局和排版案例，让学生了解设计要点实践操作法：让学生动手制作网页布局和排版设计稿3.4 教学评估课堂问答：检查学生对网页布局和排版原则和技术的理解案例分析报告：评估学生对优秀网页布局和排版案例的分析能力网页布局和排版设计稿：检查学生的实际操作能力第四章：网页色彩与字体设计4.1 教学目标让学生掌握网页色彩和字体设计的基本原则和方法让学生了解网页色彩和字体设计的常见技巧和搭配规律4.2 教学内容网页色彩设计的基本原则（如对比度、饱和度、色调等）网页字体设计的基本原则（如易读性、一致性、美观性等）网页色彩和字体的常见搭配规律和技巧4.3 教学方法讲授法：讲解网页色彩和字体设计的原则和方法案例分析法：分析优秀网页色彩和字体设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页色彩和字体设计4.4 教学评估课堂问答：检查学生对网页色彩和字体设计原则和方法的理解案例分析报告：评估学生对优秀网页色彩和字体设计案例的分析能力网页色彩和字体设计稿：检查学生的实际操作能力第五章：网页交互设计让学生了解网页交互设计的基本概念和重要性让学生掌握网页交互设计的常见技术和方法5.2 教学内容网页交互设计的定义和作用网页交互设计的常见技术（如JavaScript、jQuery等）网页交互设计的常见方法（如按钮、滑动门、下拉菜单等）5.3 教学方法讲授法：讲解网页交互设计的概念和技术案例分析法：分析优秀网页交互设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页交互设计5.4 教学评估课堂问答：检查学生对网页交互设计概念和技术的理解案例第六章：网页素材的使用6.1 教学目标让学生了解网页素材的种类和作用让学生掌握网页素材的使用方法和技巧6.2 教学内容网页素材的种类（如图片、音频、视频等）网页素材的作用和选择原则网页素材的使用方法和技巧（如插入、优化、压缩等）讲授法：讲解网页素材的种类和作用案例分析法：分析优秀网页素材使用案例，让学生了解设计要点实践操作法：让学生动手实践，使用网页素材6.4 教学评估课堂问答：检查学生对网页素材种类和作用的理解案例分析报告：评估学生对优秀网页素材使用案例的分析能力网页设计稿：检查学生的实际操作能力第七章：网页代码基础7.1 教学目标让学生了解网页代码的种类和作用让学生掌握网页代码的基本编写方法和技巧7.2 教学内容网页代码的种类（如HTML、CSS、JavaScript等）网页代码的作用和编写原则网页代码的基本编写方法和技巧7.3 教学方法讲授法：讲解网页代码的种类和作用案例分析法：分析优秀网页代码编写案例，让学生了解设计要点实践操作法：让学生动手实践，编写网页代码7.4 教学评估课堂问答：检查学生对网页代码种类和作用的理解案例分析报告：评估学生对优秀网页代码编写案例的分析能力网页设计稿：检查学生的实际操作能力第八章：网页兼容性与优化8.1 教学目标让学生了解网页兼容性和优化的概念和重要性让学生掌握网页兼容性和优化的方法和技巧8.2 教学内容网页兼容性的概念和原因网页优化的概念和方法网页兼容性和优化的方法和技巧（如代码优化、图片优化等）8.3 教学方法讲授法：讲解网页兼容性和优化的概念和方法案例分析法：分析优秀网页兼容性和优化案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页兼容性和优化8.4 教学评估课堂问答：检查学生对网页兼容性和优化概念和方法的理解案例分析报告：评估学生对优秀网页兼容性和优化案例的分析能力网页设计稿：检查学生的实际操作能力第九章：网页设计案例分析9.1 教学目标让学生了解网页设计案例的分析方法和流程让学生掌握分析优秀网页设计案例的技巧和要点9.2 教学内容网页设计案例分析的方法和流程分析优秀网页设计案例的技巧和要点网页设计案例的评析和总结9.3 教学方法讲授法：讲解网页设计案例分析的方法和流程案例分析法：分析优秀网页设计案例，让学生了解设计要点实践操作法：让学生动手实践，进行网页设计案例分析9.4 教学评估课堂问答：检查学生对网页设计案例分析方法和流程的理解案例分析报告：评估学生对优秀网页设计案例分析的技巧和要点的掌握情况网页设计稿：检查学生的实际操作能力第十章：网页设计项目实践10.1 教学目标让学生了解网页设计项目的流程和规范让学生掌握完成网页设计项目的方法和技巧10.2 教学内容网页设计项目的流程和规范完成网页设计项目的方法和技巧网页设计项目的评析和总结10.3 教学方法讲授法：讲解网页设计项目的流程和规范案例分析法：分析优秀网页设计项目，让学生了解设计要点实践操作法：让学生动手实践，完成网页设计项目10.4 教学评估课堂问答：检查学生对网页设计项目流程和规范的理解案例分析报告：评估学生对优秀网页设计项目分析的技巧和要点的掌握情况网页设计稿：检查学生的实际操作能力重点和难点解析1. 网页设计概述2. 网页界面设计补充和说明：介绍如何使用设计原则（如对齐、对比、重复和亲密性）来创建直观且吸引人的界面。
网页设计与制作（附微课视频第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）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。
对称的造型在⼤⾃然中⽐⽐皆是，同时也是版式设计常⽤的构成形式。
《Dreamweaver制作表单》教学设计
《Dreamweaver制作表单》教学设计作者：王丽莉来源：《黑河教育》2013年第07期教材分析《Dreamweaver制作表单》是中等职业制作网页的方法及过程专业教材《网页设计与制作》中第七章的内容。
在网页设计中，表单是一个专业网站必不可少的内容，是网站管理者与浏览者之间沟通的桥梁。
通过表单可以得到访问者的反馈信息，收集用户的反馈意见，在此基础上做出科学合理的决策。
本章内容主要涉及表单概述、创建表单、表单元素的插入及表单参数设置操作，其中创建表单页面是学习的主要内容。
学情分析职高学生喜欢亲自动手操作，但缺乏系统的分析能力，缺少从实践到理论的总结能力，因此本课教学要注重培养学生的协作讨论和分析问题能力。
教学目标知识与技能：理解表单的概念和作用；了解规划表单、创建表单与设置表单的方法；能使用“Dreamweaver”制作表单网页。
过程与方法：采用知识迁移，对比引入；开展任务驱动，学习新知；进行问题探究，突破难点，巩固所学。
情感态度与价值观：培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力。
教学重难点重点：创建表单。
难点：表单元素的插入。
教学过程一、创设情境，导入新课教师利用大屏幕展示生活中常见的各种表单页面，让学生一边欣赏一边思考：这些常见的页面能实现什么功能？在网页设计中怎样实现这些功能？以此激发学生的学习兴趣，导入本节学习内容——制作表单页面。
【设计意图】这一环节，通过展示图片，从现象到本质总结出表单在我们生活中的实用性，锻炼了学生的归纳总结能力，激发了学生学习新知的欲望，为后面的学习做了铺垫。
1.表单创建的作用在网页制作中，表单主要作用就是收集来自用户的信息，例如用户名、密码、电子邮箱地址、兴趣、爱好等等，主要完成调查、注册、搜索、订购等功能，它是网站管理者与浏览者之间沟通的桥梁。
让学生举例说明在生活中常见的表单有哪些？2.认识表单元素表单域；文本域；单选按钮；复选框；文件域；提交按钮。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础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 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
第7章Office-frontpage
7.3 FrontPage
三、图片
①设置显示“文本”：在图片工具栏中 点选“文本”，可直接在图片上添加说 明文本；在“图片属性”对话框中的 “常规” →“文本”栏内输入的内容将 在预览时鼠标在图片上停留时显示。 ②设置“缩略图”：可提高网页的浏览 速度。设置为缩略图后，在预览状态点 击该缩略图时会显示原图。
7.3 FrontPage
五、表格
在FrontPage中使用表格可方便地排布文 本、数据和图片。 建立和编辑表格同word中的相关操作， 注意分别利用表格属性和单元格属性。
Jiang Bin
7.3 FrontPage
六、框架和页面规划
框架网页，在网页中预设指定的框架区 域，在个区域中显示不同的内容，可避 免浏览器窗口的频繁切换。 一般框架可在 新建文件时选用
Jiang Bin
7.3 FrontPage
七、动态效果
（1）动态网页DHTML效果： “查看” →“工具栏” →“DHTML” “格式” →“动态HTML效果” → （2）悬停按钮：鼠标移动到这类按纽上时会 出现特殊的效果，［保存文件后，预览］ “插入” →“组件” →“悬停按钮”
Jiang Bin
7.3 FrontPage
八、表单
使用表单可实现网页的交互式管理和信息输入。 表单域的类型：表单、文本框、文本区、复选框、 单选按钮、下拉菜单、按钮、图片、标签。 可以在需要的地方插入指定表单域控件，也可以 设计表单网页： “文件” →“新建” →“网页” → “常规” →表单网页向导→
Jiang Bin
Jiang Bin
7.3 FrontPage
FrontPage软件提供了一个网页编辑工具，可以 象编辑word文档一样操作，同时自动生成相 关网页代码和html语言程序。从而简化了网页 设计的操作。 1．编辑窗口 2．编辑网页 3．图片 4．超级链接 Jiang Bin 5．表格 6．动态效果 7．框架和页面规划 8．表单
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
top.html的制作
Photoshop除了可以用来绘制效果图，也能完成效 果图的切割工作，如图所示，选取Photoshop工具 箱中的“切片工具”，将效果图中有用的部分切 割下来。
绘制切片时注意查看切片的属性，要精确调整 它们的大小和位置。所有的切片绘制、调整完毕后， 选择文件存储为Web所用格式，将所有切片保存下 来，每一个都自动保存成一个小图像文件
7.1 网站系统设计
7.1.1 网站设计的基本过程 1. 分析阶段：确定站点的目标、客户群、主题、规 模、站点结构、栏目和界面风格，制定出详细的计 划。 2. 设计阶段：制定主页的结构、连接方式和站点的 模块划分方式，并收集相关的素材，制作必要的组 件。 3. 实现阶段：选择适当的工具、语言创建网页，编 写或制作出各个不同功能网页的代码，确定网页之 间的关系，建立网页之间的链接。 4. 测试阶段：利用浏览器测试网页文档的正确性、 可用性和健壮性，及时纠正错误，杜绝漏洞。 5. 维护阶段：在站点运行过程中，需要经常对制作 好的网页文档进行更新和完善。
在index.html的编辑界面下，点击Dreamweaver 插入工具栏的“布局”选项卡，找到其中的“ 框架”图标，在下拉菜单中选择“顶部”框架 。这里会弹出对话框提示输入每个框架的名称 ，可以不输入，即保留框架的默认名称： TopFrame和MainFrame。
在页面中添加了上下二分式的“顶部框架”后，还需要对 各个框架和框架的集合：“框架”集进进行设置，调整它 们的高度或宽度，设置其边框是否可见，及是否允许框架 中嵌入的网页滚动等。设置框架和框架集最好使用“框架 面板” 框架面板如图
7.2.2 网站制作流程简介
在网站的创作过程中，一般的流程是制作人先 在本地计算机上将网站全部制作完成，再将网 站的所有文件上传发布到事先申请的Web服务 器上。所以第一步要做的事情是创建一个本地 网站并开始制作，其过程如下。 1. 建立空白站点
2. 给空白站点添加文件夹和文件 （1）添加主页
（2）添加文件夹和其它文件。
Logo 导航条 正文
信息栏
Logo
导航条
信息栏
正文
2. 绘制网页效果图 效果图是网页结构草图的基础上，利用 绘图软件进行进一步精细地描绘
3. 效果图切割保存 （1）效果图中并非所有的图样都会应用在 网页当中，尤其是效果图当中那些需要修改 的地方，更不能直接贴入网页。 （2）效果图整体上较大，如果不分开插入 网页，用户会感觉网页的打开速度很慢。分 割成许多小图之后，打开网页时边浏览器一 边显示部分图片，一边打开还未显示的那些 ，提升了用户体验。 （3）效果图切割也是为了满足 Dreamweaver设计网页时的排版布局需要。
7.3 个人网站设计实例
7.3.1首页设计
第一步，使用平面图形设计软件Photoshop制作 网站效果图，将效果图进行切片以获取网页制作 中需要的图像素材 设计好的效果图如图
第二步，在 Dreamweaver软件中 建立空白网站，并向 空白网站中添加必要 的文件夹和文件，如 图
第三步，在文件面板中双击打开index.html 进行编辑 本例中的网站准备实现这样一种效果：在浏 览网站的过程中页面的上部维持不变，变化 的是网页的中下部分。可以用框架结构实现 这样的功能。具体步骤是：
《网页设计与制作教程》第七章
网站设计案例
第七章 网站设计案例
网站设计是一个系统工程，由多项工作组成， 各项工作之间互相依赖，并不孤立。在开始设计 之前，设计者应该对网站的设计流程有一个总体 性的把握。更具体地，即设计者应遵循一定的原 则设计网站，并在设计之前先对网站有一个整体 的规划，进行各种准备工作。 准备工作全部完成后，才可进行细节化的页面 设计与制作。制作完成后可以将网站发布，即申 请购买域名与空间，将制作好的网站文件夹上传 至空间中并与域名绑定。完成这一步后即得到了 一个完整实用、可在整个Internet上访问的网站。
7.1.2 网站设计的基本原则
1. 速度优先原则 2. 标题设计原则 3. 内容更新原则 4. 艺术处理原则
（1）网络统一 （2）版面编排 （3）总体性 （4）色彩处理
5. 操作简便原则 6. 易于维护原则
7.2 网站内容设计
一般的可以将网站按照主题性质不同分为政府网 站、企业网站、商业网站、教育科研机构网站、 个人网站、其它非盈利ห้องสมุดไป่ตู้构网站以及其它类型的 网站。 进行网站规划也就是组织网站的内容和结构。 1. 线性结构 2. 树型结构 3. 网型结构
1. 页面布局 （1）打开主页，进入布局模式
（2）绘制布局表格和布局单元格
2. 添加内容 进入标准模式后，布局表格连同布局单元格 一起，变成了普通的虚线表格（零线宽表格 ）。将效果图切割下来的小图片依次插入到 对应的单元格中，如图
完成后的效果如图
3. 设置超链接 在Dreamweaver中设置超链接十分简单。只 要选中想到设置为超链接的文字、图片等元 素，在该元素的属性窗口中就有链接设置框 ，将相应的URL填入即可。
主页
栏目一
栏目二
栏目三
（a）线性结构 主页 主页 主页
栏目一
栏目二
栏目一
栏目二
一级栏目
二级栏目
（b）树型结构 主页
（c ）树型结构与线性结构的结合
`
栏目一
栏目二
（d）网型结构
7.2.1 网页外观设计
网站规划完成后， 就可以开始设计具体 的页面了。在设计页 面时要明确网站发布 的是什么信息，不同 的网站有不同的风格 。例如这里制作的是 一个汽车租赁公司的 网站，明确主题后， 可绘制出网站的结构 图。 1. 绘制页面结构草图
框架和框架集属性设置完成之后，点击菜单文件 保存全部，将所有的设置保存。这里会提示保存 框架集文件，一定要把框架集文件保存成 index.html文件。
框架集属性设置
编辑上部框架源文件top.html。虽然可以 在主页index.html中编辑这两个文件，但实 际上这种做法是很不方便的。正确的方法是 在文件面板中分别双击打开top.html和 main.html进行编辑。