网页设计与制作：使用层和框架布局页面
网页设计与制作实验报告
最后还要制作各个页面的，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。
10、上传测试
网页制作完毕以后，要进行测试，在浏览器上运行自己的，反复测试，以发现设计中的缺陷。
实验结果及理论分析：
非常感谢老师给了我这次，独立设计，制作网页的机会，通过这次试验，我的收益颇多。首先，独立的实践了一个完整的设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。最后，我感受最深的是，技术方面的学习，最重要的是自己实践做出东西，只通过自己的亲身实践，才能学会、学懂、学通技术。
（2）窗口组成的认识
19春北交《网页设计与制作》在线作业二答案
------------------------------------------------------------------------------------------------------------------------------ (单选题)1: 如果将单个单元格的背景颜色设置为蓝色，然后将整个表格的背景颜色设置为黄色，则单元格的背景颜色为（）。
A: 红色B: 黄色C: 绿色D: 蓝色正确答案:(单选题)2: HTML是一种页面( )。
A: 程序设计型的语言B: 执行型的语言C: 编译型的语言D: 描述型的语言正确答案:(单选题)3: 图像属性面板中的热区按钮不包括（）。
A: 方形热区B: 圆形热区C: 三角形热区D: 不规则形热区正确答案:(单选题)4: 下列文件属于静态网页的是()A: Index.aspB: index.jspC: index.htmlD: index.php正确答案:(单选题)5: 要指定一个表格的宽度为200像素，高度为150像素，以下正确的是（）。
A: <table width=200 height=150>B: <table borderwidth=200 height=150>C: <table borderwidth=150 ght=200>D: <borderwidth=200 height=150>正确答案:(单选题)6: <font>标记的Size属性最大可以取值为（）A: 5B: 6C: 7D: 8正确答案:(单选题)7: 下列选项中不属于CSS选择符的是（）。
A: 超文本标记选择符B: 类选择符C: ID选择符D: 对象选择符正确答案:------------------------------------------------------------------------------------------------------------------------------ (单选题)8: 下列关于CSS的说法错误的是：（）A: CSS的全称是CascadingStyleSheets，中文的意思是“层叠样式表”B: CSS的作用是精确定义页面中各元素以及页面的整体样式C: CSS样式不仅可以控制大多数传统的文本格式属性，还可以定义一些特殊的HTML属性D: 使用DW只能可视化创建CSS样式，无法以源代码方式对其进行编辑正确答案:(单选题)9: 设置网页的标题时，在代码中需要（）标记。
专科《网页设计与制作》
［试题分类］：专科《网页设计与制作》_12000079[题型］:单选［分数］：21。
下列哪个地址是电子邮件地址（）A。
WWW。
263。
B。
CSSC＠263。
NETC。
192。
168。
0.100D.http://www.sohu。
com答案：B2。
高科技企业网站的主题色一般都使用蓝色，蓝色有什么含义？（) A。
凉爽清新B。
高雅浪漫C.纯洁D.高端大气答案：A3.保存Flash动画时,其原文件的默认格式是（）。
A。
swfB.。
flaC。
.jpgD。
. gif答案:B4。
“常用”面板中的“图像"按钮位于哪个区域中( ）。
A.插入面板B.属性面板C.面板组D。
菜单栏答案:A5。
下列说法正确的是( ) 。
A.网页和站点都是文件B。
创建网页就是创建站点C。
创建网页也可以不必创建站点D。
创建网页前必须应先创建站点答案：D6.在HTML中画一条绿色线条的标签是（)A。
见图B.见图C。
见图D。
见图答案：A7。
HTML是一种（)A.文件传输协议B。
超文本协议C。
编译语言D.超文本标记语言答案：D8.在HTML语句中标记的作用是( ）A.插入动画B.插入空格C。
插入图像D。
插入文本答案:C9。
如果要修改表格的列宽,则需要修改哪个标签的属性？（）A.tableB。
trC.tdD.align答案:C10。
标记的作用是( ）A。
创建一个上下框架网页,右边框架宽度是左边框架的3倍B。
创建一个左右框架网页，右边框架宽度是左边框架的3倍C。
创建一个嵌入式框架网页，外面框架宽度是里面框架的3倍D.创建一个三框架的网页答案:B11。
超链接的属性target =_parent的作用是（）。
A。
将目标网页在原来的窗口中打开B。
将目标网页在新的窗口中打开C。
链接上一个页面D。
链接本页面的另一个文件答案：A12.<a href=″＃cs″>计算机学院</a>的作用是（)A。
超级链接到计算机学院网页B。
超级链接到本文件中cs标记处C。
《网页设计与制作》课程标准
《网页设计与制作》课程标准一、课程性质本课程是中等职业学校数字媒体类数字媒体技术应用专业必修的一门专业核心课程，是在《图形图像处理》《程序语言设计》等课程基础上，开设的一门理论与实践相结合的专业课程，其任务是让学生掌握网页设计的基础知识与基本技能，为《多媒体作品设计软件应用》等后续课程的学习奠定基础。
二、学时与学分72学时，4学分。
三、课程设计思路本课程按照立德树人根本任务要求，突出核心素养、必备品格和关键能力，兼顾中高职课程衔接，高度融合网页设计与制作知识技能的学习与职业精神的培养。
1依据《中等职业学校数字媒体类数字媒体技术应用专业指导性人才培养方案》中确定的培养目标、综合素质、职业能力，按照知识与技能、过程与方法、情感态度与价值观三个维度，突出项目操作能力和解决问题能力的培养，结合本课程的性质和职业教育课程教学的最新理念，确定本课程目标。
2.根据“中等职业学校数字媒体技术应用专业'工作任务与职业能力'分析表”，依据课程目标和计算机软件测试员等工作的岗位需求，围绕网页设计与制作关键能力，反映数字媒体行业发展的新知识、新技术，体现科学性、适用性原则，确定本课程内容。
3.以创建一个完整的网络为主线，设置模块和教学单元，将网页设计与制作的基础知识、基本技能和职业素养有机融入，遵循学生认知规律，结合学生的生活经验，确定学习内容的顺序。
四、课程目标学生通过学习本课程，掌握网页设计与制作的基础知识与技能，能独立制作中小型的网站，并通过现代信息化的手段进行表现，初步形成良好的职业意识和职业素养。
1了解网页设计与制作相关的艺术、技术背景知识及发展趋势，能对网站制作产生学习兴趣。
2.熟悉网页制作原理及制作流程，掌握静态网站制作的基本方法。
3.掌握AdobeDreamWeaVer网页制作工具，熟练运用多种网页设计技术，具备网页设计、制作及站点管理的基本知识和基本技能。
4.了解动态网页的初步知识，能合理规划网站，并能根据要求正确创建数据库和数据表，完成网站制作。
《网页设计与制作》课程标准
《网页设计与制作》课程标准适用专业：计算机系各专业学时：72 学分：4编写执笔人：**** 审定负责人：**** 课程编码：一、课程性质本课程是专业学习领域课程，主要培养学生从事网页设计与制作的基本技能，使学生掌握网页设计的概念和方法，能读懂HTML代码，能够运用专业的网页设计工具，使用“DIV+CSS”技术，进行网站规划、建立和维护，具备网页设计岗位的职业技术能力。
本课程前导课程：计算机应用基础、网络应用基础本课程后续课程：动态网站开发二、课程设计思路本课程的设计思路以就业为导向，按照基于工作过程的职业能力来进行课程开发，请计算机各专业有经验的教师对各自专业所涵盖的岗位群进行工作任务和职业能力分析，以此为依据确定本课程的工作任务和课程内容，并参照行业职业标准，以任务引领为课程框架，将课程按递进方式设计成项目，并以项目为单元组织教学，使学生由浅入深，以点到面的全面掌握网页设计的职业技能。
学生通过各项目的系列练习操作，熟练地掌握岗位所需知识和技能，并不断强化，项目体现操作能力和解决问题能力的培养，体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。
同时对教学过程的教学条件、教学模块、教学案例都进行了详细的设计，完成本课程的整体教学内容和教学实施的整体设计，建立了基于网页设计的课程标准。
课程框架结构、学分和学时分配三、课程学习目标总目标：使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的静态网站。
具体目标：（一）教学目标：1.了解HTML代码中各种标记符的作用和应用，以及格式要求；2.了解图像的几种格式：GIF、JPEG、PNG格式，它们各自的特点和差别；3.掌握Dreamweaver操作界面的基本组成、界面组件的操作方法；4.熟练掌握网页元素的各种定位技术，深入理解它们的作用；5.了解轮换图片与影像地图的作用，掌握它们的设计方法6.掌握网页中动态按钮和时间轴动画的创建，以及各种动画元素的插入方法7.了解CSS样式表的作用和意义，熟练掌握其设计方法；8．了解DIV标签的作用，熟练掌握其使用方法；9.了解表单的作用，掌握其使用方法；10.熟练掌握各种链接的作用以及相关操作；11.了解模版和库在网页更新维护中的作用，熟练掌握它们对网站进行管理和更新的方法；12.了解站点的定义、作用，掌握创建定义站点结构的方法；（二）技能教学目标：1.会用HTML语言中的标记制作一个简单的网页；2.会用HTML语言中的标记设置颜色、文本格式和列表；3.熟练利用各种方法在网页中插入文本和图片、设置文本和图片之间的格式；4.会利用Dreamweaver制作轮换图象和影象地图；5.能熟练的在网页中设置各种超链接；6.熟练利用网页元素定位工具设计网页格局；7.熟练利用DIV+CSS设置页面外观；8.会在网页中插入多媒体对象，如：flash、flash按钮；9.会在网页中插入表单，利用表单让用户之间能更好的交流；10.会使用JavaScript脚本程序实现某些网页特效；11.熟练利用模板和库对网页进行更新和维护；12.熟练利用站点对网站进行上传；（三）素质教学目标：1. 提高审美能力，好的网页首先外观要求大方美观，较高的审美能力能帮助自己作出好的网页出来2. 合理的利用技术，在不影响美观或者是尽量不影响的条件下，找到一个接合点做出美观而又实用的网页3. 时时关注软件的新发展，学会应用新的功能，以提高工作效率4. 具有一定的文化素质，让自己的网页增添几分艺术特色，使自己网页设计达到一定的水准5. 作一个生活的有心人，使自己的作品富有生机6.提高学生的合作精神、协调工作能力和组织管理能力四、课程内容与要求项目一认识网页、网站（4学时）教学目标：了解网页设计的基本概念，掌握Dreamweaver工作界面设置，掌握站点的建立和管理，能够根据要求建立和管理站点；掌握进行网页制作的一般步骤。
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
网页设计与制作：使用层和框架布局页面
4. 创建嵌套层 单击对象面板上的层图标，直接拖动到父层中。 ●单击对象面板上的层图标，直接拖动到父层中。 ●层控制面板里ctrl+拖动 层控制面板里ctrl+层和框架布局页面
5. 对齐层（shift选定） 对齐层（ 选定） 选定 修改/ ●修改/对齐 6. 用标尺和栅格来对齐层 ①找到标尺 查看/标尺 标尺/显示 ● 查看 标尺 显示 ②修改标尺单位 ●右击标尺 ③弹出栅格 查看/网格 网格/显示网格 ●查看 网格 显示网格 ④栅格设置 查看/网格 网格/网格设置 ●查看 网格 网格设置
网页设计与制作
第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 第九章 第十章 HTML语言基础 语言基础 初识Dreamweaver 初识 创建与应用表格 使用层和框架布局页面 CSS样式与模板的使用 样式与模板的使用 行为、 行为、库和资源管理 建立动态网站 Flash动画基础知识 动画基础知识 创建动画 使用Fireworks编辑网页图像 使用 编辑网页图像 2 4 3 3 3 3 3 3 3 3
1
第四章 使用层和框架布局页面
一、分层 1. 层的概念 ●层是可将网页分割成“一个个能包含任何元 层是可将网页分割成“ 素的逻辑块” 素的逻辑块”。 层的内容可重叠，位置可移动， ●层的内容可重叠，位置可移动，在不同浏览 器中由不同的标识符产生分层的特点。 器中由不同的标识符产生分层的特点。 2. 建立一个新层 对象面板/ ●对象面板/布局 3. 修改层 ①选择一个层
第四章 使用层和框架布局页面
4. 典型案例 用时间轴在网页中制作幻灯片（ ①用时间轴在网页中制作幻灯片（P112） ） ②制作框架网页（P114） 制作框架网页（ ）
第四章 使用层和框架布局页面
网页设计与制作设计框架网页
第8章 设 计 框 架 网
16
页
8.1 框架网页
■ 框架实例
■ 创建链接。
■ 如果希望链接地对象（文本或者图片）在 一个框架内部,而链接地页面则在另外地框
架内打开,那么就需要通过设置目的打开方
式来控制框架地显示内容。在设置好链接
之 后 , 使用属性面板里地Target（目的）弹
出菜单,可以指定在哪个框架打开被链接地
■ 创建各种框架 ■ 方法1:选择"修改"→"框架集"→"拆分左,右,
上 , 下框架"命令。
2023-02-15
第8章 设 计 框 架 网
6
页
8.1 框架网页
■ 创建各种框架 ■ 方法2:按住Alt键 , 然后拖曳任一条框架边框,
这样可以垂直或水平分割文档（或已有地 框架） ; 按住Alt键 , 然后从一个角上拖曳框 架边框,这样也可以把文档（或已有地框架） 划分为4个框架。
■ 接下来分别在"框架"面板选择相应地框架, 然后在框架属性面板里插入相应地网页就 可以完成了。
2023-02-15
第8章 设 计 框 架 网
28
页
8.1 框架网页
■ 保存框架集 ■ 框架集地实质就是把浏览器窗口划分为几
个可相同可不同地小区（即框架） , 然后可 以在每个小区独立显示一个网页文件 （html文件） , 而最后这些独立小区地组合 就是所谓地框架集。
2023-02-15
第8章 设 计 框 架 网
7
页
8.1 框架网页
■ 插入预定义框架集 ■ Dreamweaver通常预定义了多种框架集,
通过使用预定义框架集,我们就可以轻易创 建想要地框架集。选择"插入"→"HTML" →"框架"命令然后选择一种框架,框架集生 成时可以对每一个框架命名。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一章 HTML语言基础
2
第二章 初识Dreamweaver
4
第三章 层和框架布局页面
3
第五章 CSS样式与模板的使用
3
第六章 行为、库和资源管理
3
第七章 建立动态网站
3
第八章 Flash动画基础知识
3
第九章 创建动画
3
第十章 使用Fireworks编辑网页图像 3
4. 典型案例 ①用时间轴在网页中制作幻灯片（P112） ②制作框架网页（P114）
剪辑--要将自动生成的<html>前面的代码删除
4. 创建嵌套层 ●单击对象面板上的层图标，直接拖动到父层中。 ●层控制面板里ctrl+拖动
第四章 使用层和框架布局页面
5. 对齐层（shift选定） ●修改/对齐 6. 用标尺和栅格来对齐层 ①找到标尺 ● 查看/标尺/显示 ②修改标尺单位 ●右击标尺 ③弹出栅格 ●查看/网格/显示网格 ④栅格设置 ●查看/网格/网格设置
1
第四章 使用层和框架布局页面
一、分层 1. 层的概念 ●层是可将网页分割成“一个个能包含任何元
素的逻辑块”。 ●层的内容可重叠，位置可移动，在不同浏览
器中由不同的标识符产生分层的特点。 2. 建立一个新层 ●对象面板/布局 3. 修改层 ①选择一个层
第四章 使用层和框架布局页面
②调整层的大小及位置 ●手工拖动 ●属性面板 ③全面使用层属性和控制面板 ●给层命名 ●可见性 ●堆栈顺序（Z轴） ●背景图案和背景色 ●剪辑和溢出
第四章 使用层和框架布局页面
7. 应用层 ①转换层为表格（P97） ②制作阴影字（P99） ③飘落的花朵（P101）
第四章 使用层和框架布局页面
二、创建框架 ●框架（frame）：浏览器内的一个矩形区，它
具有一个网页的所有属性和功能。 ●框架系（frameset）：一个定义了一组框架
及每个框架所含内容的特殊网页，用以设置 框架的各种属性。 1. 创建框架结构的网页 ●对象面板 2. 设置框架系属性 ①调整框架尺寸 ●鼠标拖动
第四章 使用层和框架布局页面
3. 修改框架属性 ①删除框架 ●拖动框架边框到边界处即可。 ②框架的页面属性 ●框架属性面板（先在框架面板中选定框架） ③在框架中替换框架文件 ●框架属性面板中的源文件域 ④设置框架边框 ⑤修改框架中的内容 ●与普通页面的修改修改相同 ●插入链接时注意使用目标域
第四章 使用层和框架布局页面