网页设计实验指导书
网页制作实验指导书-全稿
第一章网页制作开发工具的基本操作实验1.1 Dreamweaver 8软件的基本操作【相关知识】1. Dreamweaver8相对于其他以前的版本增加和增强的功能有：支持XML数据、增加样式呈现工具栏、增强CSS设计、增加代码折叠功能。
2. Dreamwaver 8支持Windows和Macintosh两种操作系统。
3. 在Dreamweaver 8中可以使用HTML、CSS、XML等多种文件类型，主要的文件类型是HTML文件，可以使用.html或.htm扩展名保存HTML文件。
一、实验目的和要求学会Dreamweaver 8的安装和卸载的方法。
二、实验步骤1. 安装Dreamwaver 8（1）运行，打开安装向导对话框。
（2）单击[下一步]按钮，打开安装向导的许可证协议页面。
（3）选中[我接受该许可证协议中的条款]，单击[下一步]按钮，打开选择安装路径的对话框。
（4）可以通过选中[创建快速启动栏快捷方式]或[在桌面上创建快捷方式]复选框来创建快速启动栏快捷图标或桌面快捷图标，单击[更改]按钮，打开更改当前目的地文件夹页面。
（5）在[文件夹名称]文本框中输入新的文件夹路径，单击[确定]按钮，返回安装路径对话框，单击[下一步]，打开默认的文件类型对话框。
（6）单击[下一步]按钮，打开[已做好安装程序的准备]对话框。
（7）单击[安装]按钮，开始安装Dreamweaver 8，安装过程会持续几分钟，然后显示[完成Dreamweaver8 安装工作]对话框，如图1-1所示。
（8）单击[完成]按钮，完成Dreamweaver 8的安装工作。
2. 卸载Dreamwaver 8（1）在[开始]菜单中选择[控制面板]命令后，打开相应面板。
（2）选择[添加/删除程序]命令后，打开相应面板。
（3）在[添加或删除程序]对话框的[当前安装的程序]列表中选择[Micromedia Dreamweaver 8]一项，单击[删除]按钮。
《网页设计与制作》课程实验指导书
XXX学院男生宿舍X号楼综合布线系统设计方案设计单位：设计指导：宿舍布线系统的设计一、综述A.布线系统将贯穿雨1~5楼的各个平面。
主要为语音、数据、图像等系统信号提供高性能传输路由。
B.作为一个综合性的线路平台，应具有一定的兼容性和开放性，可满足各类通讯及计算机等传输需要和网络结构，提供一个标准化、高带宽、低成本的网络环境。
C.系统应具有开放的模块化结构，可灵活地进行资源分配，线路管理、变更和扩展。
D.系统应提供一个安全、有序。
便于管理的设备安装及连接环境，可快捷简便地进行系统安装和运行。
E.在充分考虑目前应用情况下，以高起点和适度超前的原则来规划本系统。
为各种高性能应用踢狗充足的传输带宽，为日后系统的升级提供充足的空间。
F.宿舍楼基本情况：楼层面积约为16*9米，且已有中国移动和中国电信的无线网络热点分布。
二、具体布置系统包括工作区子系统、配线(水平)子系统、干线子系统、设备问子系统、管理子系统和建筑群子系统。
1.工作区子系统。
工作区子系统是由学生信息插座到计算机网络的连接线缆。
学生宿舍的房间设置一般为6人间其内部语音及网络数据点的位置不像大开问办公那样难以布置，因室内床位布置均已确定，很容易确定其数据端口的位置。
日前宿舍布置一般为上铺居住，床铺下设置学习书桌，因此数据端安装在书桌下，高度为0．3 m。
应根据校方的要求，选择数据端口的安装数量。
对于要求较高的，每个学生书桌下方设置一个数据端口，房间内公共部位设置一个电话端『_J。
要求较低的，可每两个同学共用一个数据端口，然后采用交换机分别接引至电脑。
其优点是减少了水平引来线路和保护管线(槽)，缺点是影响网络速度，需自加分配没备。
除考虑数据端r]的位置外，还需相应布置供电电源插座，间距应为0．2 m。
2.配线(水平)子系统配线(水平)子系统由楼层配线架(FD)至信息插座之间的线缆、信息插座(含转换点及配套设施)组成，它将偻层弱电竖井内配线架与每个宿舍室内的信息插座相连。
dreamweaver网页设计实验指导书
网页设计实验指导书（一）DreamWeaver静态网页制作第一章网站规划 ................................................................................................... - 3 - 第二章Dreamweaver静态网页设计实验 ...................................................... - 8 - 实验一在Dreamweaver中建立一个站点.................................................. - 8 - 实验二在网页中使用文本........................................................................... - 15 - 实验三超级链接的建立............................................................................... - 21 - 实验四网页图像的应用............................................................................... - 29 - 实验五网页表格操作 ..................................................................................... - 36 - 实验六利用表格进行网页布局..................................................................... - 39 - 实验七利用层进行网页布局....................................................................... - 48 - 实验八行为和图层的应用............................................................................. - 53 -实验九框架型网页的制作........................................................................... - 66 - 实验十一交互式表单的应用..................................................................... - 84 - 实验十二HTML语言基础应用 .................................................................... - 90 - 实验十三网页动态效果辑............................................................................. - 97 - 实验十四CSS样式表的创建及运用....................................................... - 106 -第一章网站规划一、网站建设的基本流程网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。
HTML网页设计基础实验指导书2016
wordHTML网页设计根底实验指导书实验一网页设计根底与HTML根本标签【实验目的】1．掌握利用因特网进展信息游览、搜索，下载网页、图片、文字和文件；2．对给定的，能指出的结构、目录结构、页面布局方式；3．掌握HTML的根本标签<HTML><HEAD> <BODY><TITLE><META>标记；【实验环境】Window xp操作系统，机器联网。
【实验重点与难点】熟练使用浏览器进展浏览、搜索、下载。
【实验内容】1、根据制作的需要，从网上下载网页制作时需要的文字、小图片、动画与flash。
2、上网访问实际假如干，了解各的风格〔主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等〕、页面布局方式；在网上找出如下版面布局的结构形式：⑴“T〞结构布局⑵“口〞型〔“国〞字型〕布局⑷对称比照布局⑻海报型布局3、利用搜索引擎，浏览因特网上较为著名的5个，记录这些的名称、地址和以与相应的网页文件格式〔扩展名〕；4、查看我院主页的源代码，收藏到收藏夹中，将其设为主页，并指出该的结构、目录结构和页面布局方式。
5、构建HTML文档“我的第一个网页〞：〔1〕从开始菜单启动记事本；〔2〕在记事本中，录入一个HTML文档；〔3〕设置该文档在最终在浏览器中显示的标题为“我的第一个网页〞；〔4〕在页面添加可见的文本“我的第一个网页〞；〔5〕使用记事本的菜单“文件〞→“保存〞，在“另存为〞对话框中，在“保存类型〞下拉列表中选择“所有文件〞，录入“文件名〞myfirstpage.htm，单击“保存〞按钮将该页面保存到实验文件夹。
实验二 HTML文本格式的应用【实验目的】1．掌握使用<body>标记设置网页背景颜色和文本颜色。
学习使用分段标记<p></p>；2．掌握使用<font>标记设置文字的属性；3．掌握在网页中插入背景图片；4．掌握在网页中插入水平线，并设置水平线的属性；5．掌握在网页中插入背景音乐。
网页设计实习指导书
网页设计实习指导书（54学时for 信计）邹青编信息工程学院二００六年八月实习一掌握HTML的格式一、实习目的1. 掌握网页的基本结构及必须的标记；2. 了解Web页面中特殊字符及颜色的显示，掌握页面整体颜色配比。
3. 学会并掌握从网上获取HTML的知识及下载网页元素；二、实习要求1. 掌握网页的基本结构，熟悉html、head、body、title基本标记2. 了解Body标记的BackColor、BackGround、Text、Link、VLink、ALink属性，特殊字符的显示3. 用记事本完成简单的网页4. 学会从InterNet上获取网页元素三、实习内容及方法1. 网页基本结构<html> ……表示网页的开始<head> ……网页头，用来保存对网页的一些注释及规定一些动作<title>网页标题</title> ……在浏览器标题栏显示的内容</head> ……结束网页头<body> ……正文开始正文……显示在浏览器中的内容</body> ……正文结束</html> ……网页结束2. 用记事本建立一个简单的网页第一步：从开始菜单栏中启动记事本；第二步：在记事本中输入一下内容<html><head><title>我的第一个网页</title></head><body>Hollo, World!!!!</body></html>第三步：在文件菜单中单击保存→选择保存类型为：所以类型→输入文件名为test.html→单击确定按钮；第四步：找到刚才建立的文件，双击打开，浏览自己的网页3. Body属性的使用及特殊字符的显示。
用记事本建立一个网页sec.htm，内容如下：<html><head><title>我的第二个网页</title></head><body BGColor＝#cccccc Text=blue Link=black ALink=redVLink=green>我的<友情链接><a href=””>搜狐</a><br><a href=” ”>西北农林科技大学</a><br><a href=” http://127.0.0.1”>我自己</a></body></html>4. 从网上保存3个自己感兴趣的页面及10张图片到自己的软盘上。
ASP实验指导书
《ASP动态网页设计》实验指导书系部：计算机系专业：计算机科学与技术专业目录实验一 WINDOWS XP IIS的安装与配置 (3)实验二 HTML标记符的使用（表格、表单对象、CSS样式） (4)实验三 SQL语言 (5)实验四 VBSCRIPT编程 (6)实验五 ASP内建对象 (8)实验六利用ADO对象实现对数据库的存取操作 (10)实验七简单BBS，用户注册 (13)实验八简单BBS，用户登录 (17)实验一 Windows xp IIS的安装与配置一、实验目的：熟悉IIS的安装过程与配置方法。
通过编写简单的ASP页面，掌握ASP网页的编写和运行方法。
二、实验要求：学生掌握关于动态网页的相关知识；具备制作静态网页的基础；具备一定的网络基础知识。
三、实验器材：Windows xp计算机系统；安装IIS、Dreamweaver 8、Access 2003数据库系统等。
四、实验内容（步骤、结果）：1、ASP Web服务器的安装与配置；[参考步骤]：1.检测本机的TCP/IP协的运行情况：运用Ping和IPconfig命令；2.将windows 2000/XP光盘插入教师机中，将其共享；3.学生机器将查看自己的IP地址，在网络中配置；4.在添加和删除程序中，添加IIS；5.在自己的本地硬盘中用03soft建一文件夹；6.在管理工具中Internet 信息服务中配置IIS；7.运行Dreamweaver 8建立站点，完成相关的设置，其中根目录与IIS中一致，并使用服务器技术；8.启动Dreamweaver 8，然后切换到源代码显示方式；9.在<body>与</body>之间，加入以下ASP代码：<%Response.write(“这是利用ASP网页输出的信息”)%>；10.将网页保存到C：\03soft目录下，文件命名为first.asp；11.启动IE浏览器，在地址栏中键入：http://localhost/first.asp或http://127.0.0.1/first.asp，然后按回车。
2-网页设计实验指导书32
《网页设计》实验指导书上海建桥学院信息技术学院二〇一一年九月《网页设计》实验指导书目录实验1 Html5标记的综合应用 (1)1.1 实验目的 (1)1.2 实验原理 (1)1.3 实验器材和环境 (1)1.4 实验内容 (1)1.5作业 (1)实验2 Css3属性的综合应用 (2)2.1 实验目的 (2)2.2 实验原理 (2)2.3 实验器材和环境 (2)2.4 实验内容 (2)2.5作业 (2)实验3 主题网站的设计与制作 (3)3.1 实验目的 (3)3.2 实验原理 (3)2.3 实验器材和环境 (3)3.4 实验内容 (3)3.5作业 (3)1.1 实验目的综合运用html5常用标记，设计与制作静态网页，至少包含超链接、图像、背景、表单、音视频等标记。
1.2 实验原理xhtml文档的基本结构<html><head><body>标记，<meta>和<title>标记<body>、<p>等常用标记及其属性在网页中插入背景图片在网页中插入水平线，并设置水平线的属性table、form、audio、video等标记的应用1.3 实验器材和环境PC机1台、Photoshop cs3以上、dreamweaver cs3以上、flash cs3以上1.4 实验内容现要求完成主要内容如下：(1)正确建立站点、文件管理正确(2)站点下只有主页，并命名为：index.html；图像文件要放在images文件夹；子页放在Include文件夹（或index文件夹）内；正确命名所有文件。
(3)用表格布局，完成网页至少3个，并正确链接。
(4)用表单完成个人信息采集的页面，风格要与主页一致。
(5)正确使用所学过的xhtml标记(6)在作品的版权位置显示学号和姓名1.5作业提交站点文件夹，命名要求：“学号”+“姓名”实验报告书2.1 实验目的综合运用Css3常用标记，美化静态页面，至少包含段落、图像、边框、背景、项目列表、超链接等元素的美化。
网页设计与制作实验指导书
网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系2007年9月实验一网页设计基础实验一、实验目的1．掌握商务网站设计的基本原则、网站及网页的基本风格与基本构图特点；2．熟悉页面排版，掌握网页布局的方法。
二、实验内容1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。
2．在网上找出下列版面布局的结构形式：⑴．“T”结构布局⑵．“口”型（“国”字型）布局⑶．“三”型布局⑷．对称对比布局⑸．POP布局3．找出使用大色块和抽象线条构图风格的网站（至少各2个）；4．使用电脑中的图片工具（Photoshop）把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。
三、实验步骤与要求按“实验内容”中1～4完成网上的操作，完成实验报告，在实验报告中要求记录如下内容：⑴．所访问各商务网站的风格及特点；⑵．各种版面布局网站的域名和所采用的版面布局形式；⑶．使用大色块和抽象线条构图风格网站的域名和所采用的构图形式；⑷．10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。
四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。
2、存成doc文件和html文件，上传到教师机D：\zuoye目录下实验二建立站点（2学时）一、实验目的：(1)熟悉DreamWeaverMX的界面及其操作(2)熟悉使用DreamWeaverMX建立站点，理解本地站点和远程站点的概念二、实验内容本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。
三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在Dreamweaver中，对文本的输入及编辑，与word极其相似。打开新建或已经建立的页面，把光标放在编辑区中，就可以输入文字/特殊的字符了。
（2）添加中文字体或中文组合字体到字体列表（两种步骤不同）
下面为中文字体的添加步骤：
在属性面板中，单击“大小”左侧的∇图标，选择编辑字体列表,就可看到图3-13的对话框。
在窗口中选择需要插入的图片。如果选择的图片文件在网站目录以外，系统会询问是否将图片复制到网站内，此时应该选择“是”。
将选择好的图片存放在网站内的特定位置。
保存完毕，就可以看到插入的图片效果了，并且可以通过图片属性面板来改变图片的属性。
（2）编辑图像
利用图像属性面板，设置图像的各种属性。
11．创建超链接（以文字为例）
■设置好之后，选择【应用】【确定】即可。
图3-11页面属性设置窗口
（3）网页的创建、保存与打开。
选择【文件】→【新建】，打开如图4-2所示的对话框，就可新建各种类型的网页，此时新建页面的文件名默认为“Untitled-1.htm”，点击保存图标，即可进行保存更改文件名的操作。
图3-12新建文档窗口
9．文本的插入和编辑
（1）插入表格
（2）修改表格样式
（3）填充内容写并对各个网页创建超能链接。如:“”
图4-1表格网页
注：实验报告中要求写出详细步骤。
2．使用框架布局网页
在网页中利用框架布局一般经过如下步骤：
（1）创建框架
（2）设置框架属性
（3）设定初始页面
（4）确定框架间的调用关系
图3-3图3-4
单击【下一步】,弹出图3-4，指定网站所在的本地端文件夹位置单击 按钮，选择E：\shiyan\
单击【下一步】,弹出图3-5，在如何运用服务器技术中选择【无】
单击【下一步】,弹出图3-6，完成。
图3-5图3-6
（3）按照上面的说明设置完成后，此时会弹出文件面板组，显示出如图3-7所示的本地的站点视图。
2、制作一个如图2-2样式所示的个人网站首页，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等。
图2-1个人网站首页
三、实验步骤
1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是FrontPage/Dreamweaver的代码窗口。
2．按各种不同标签的语法规则，输入合法的代码。
网页设计
实验指导书
经济与管理学院
二零一一年二月
实验一网页设计基础实验
一、实验目的和要求
1、了解网站的相关知识，IP地址、域名、主页空间等。
二、实验内容和步骤
1．IP地址的申请
（1）了解IPV4地址申请步骤
（2）查询学校主页的IP地址信息202.119.136.0
（3）/index/0D/index.htm
查询到学校的IP地址段范围、单位、通信地址、联系人等信息
2、域名信息查询
（1）/index/0A/index.htm
查询到相关的域名状态、域名联系人、注册日期等相关信息。
3、域名注册
（1）/
三、实验报告要求
按“实验内容和步骤”完成1～4的网上操作，在实验报告中要求记录如下内容：
二、实验内容
1．动作动画的制作
完成第一个FLASH影片：在黄色背景的屏幕中间，由小到大逐渐扩展显示蓝色文字“第一个FLASH影片”，同时从右向左展开一幅云图图像，一个红色立体球由左上方缓慢移到屏幕中间的下边，移动的同时球由小变大。
基本步骤：
(1) 新建一个影片文件和设置影片的基本属性；
(2) 输入文字“第1个FLASH影片”，设置文字的属性；
从可用字体框中，选择要添加的字体，单击“《“，这种字体就会添加到选择的字体框中了。
单击ok按钮，就可以将这种字体，添加到字体列表中了。
图3-13编辑字体列表框图3-14选择图像源窗口
（3）设置文本格式
可以通过属性面板，包括段落的格式、字体、字号、字的颜色等等，将“单词识记”设置“标题2”其于文字设置成列表格式。
（2）启动ODBC，在ODBC窗口中选择“系统DSM”；
（3）单击“添加”，在“创建新数据源”对话框中选择“Microsoft Access Driver(*.mdb)”驱动；
（4）单击“完成”，在出现的“ODBC Microsoft Access安装”对话框中输入数据源名及说明，并选择要进行链接的数据源；
（4）单击进入“普通”选项卡，返回网页编辑状态，单击“保存”按钮保存设置。
（5）关闭网页。
6．在网页中插入多媒体对象
注：在网页中插入多媒体对象的基本方法为：“插入”/“媒体”/“插件”
三、实验心得体会
实验四网页布局（4课时）
一、实验目的和要求
1．掌握在Dreamweaver8中使用表格布局网页的操作；
（5）单击“确定”即可建立DSN。
8．熟悉Dreamweaver 8的基本工作环境
（1）打开Dreamweaver 8，自行熟悉各菜单、面板等的使用。
（2）设置网页背景属性。
■点击主菜单上的【修改】【页面属性】,弹出图4-1所示的对话框。
■在对话框中可以设置背景标题、背景图像、文本颜色以及各种链接的颜色等等。
3．输入完成后保存代码文件，文件后缀为.htm/.html。
4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。
四、程序代码（在实验报告中写出）
五、实验心得体会
主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。
实验三本地站点的创建和编辑
2．掌握在Dreamweaver8中使用框架布局网页的操作；
3．掌握在Dreamweaver8中使用层布局网页的操作。
二、实验内容和步骤
1．使用表格布局网页
表格是将页面中的内容以表格的形式排列，常用于单一页面内图片与文字的安排，是最常用的布局命令。
在网页中利用表格完成如图4-1所示的网页,一般经过如下步骤：
(5)保存框架文件
（6） 建立“简介”“基本元素”“超链接”等页面显示在主框架中。
完成如图4-2所示的网页,并依据一般步骤写出详细步骤，图像可自行选择。
图4-2 框架网页
3．使用层布局网页
建立如图所示的页面
（1）利用菜单“插入”/“布局对象”/“层”或利用插入栏中的常用面板来实现插入图；
（2）从属性面板中设置图层的基本属性
（2）设置超链接属性
选择“文件/属性”命令，打开“网页属性”对话框，单击进入“背景”选项卡。
单击“启动超链接翻转效果”复选框，单击“翻转样式”按钮，打开“字体”对话框，设置鼠标光标指向超链接时显示出的效果。
在“超链接”、“已访问的超链接”和“当前超链接”的颜色列表框中，选择要使用的颜色。
（3）单击进入“预览”选项卡，预览网页，在主页中单击超链接文字，察看链接到的网页。
（1）可以采用以下的任一种方法
在网页中选中要建立超链接的文字，选择文件“插入/超链接”命令，在超链接对话框中选择页面作为超链接的URL。
在网页中选中要建立超链接的文字，单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，在超链接对话框中选择页面作为超链接的URL。
选中超链接文本后，在常用工具栏中单击超链接按钮图标都可以打开对话框。
在文档编辑区将插入点定位到所需位置，选择[插入][HTML][水平线]菜单命令或单击“插入”栏中的“HTML”选项卡在其中单击 按钮即可添加水平线。（如图3-15）
图3-15水平线的属性面板
②插入日期
插入面板中【常用】→【日期】，图3-16；
图3-16插入日期
10．添加图像
（1）添加图像
将光标想要插入图片的位置，点击主菜单上的【插入】【图像】这时出现选择图像源的对话框窗口。
1．定义本地站点
（1）单击【站点】【新建站点】命令，打开图3-1所示的站点定义窗口。
图3-1图3-2
（2）选择“基本”选项卡，在分类列表中选择本地信息选项开始定义站点。
■各选项的设置方法可参考下面的文字说明。
站点名称文本框：输入网站中文名称，如：风行科技(如图3-2)；
单击【下一步】,弹出图3-3，选择【否，不想使用服务器技术】
（3）将“untitled.htm”的网页文件更名为“index.htm”,回车。
3．修改、删除文件名。
直接选中要修改的文件，单击即可修改，或右击并从快捷菜单选择【重命名】。
直接选中要删除的文件，按delete键，或右击并从快捷菜单选择【删除】。
图3-9建立网页文件图3-10站点编辑窗口
6．编辑网站内容
单词识记
英文单词Do的含义:
做，干；
制作，产生；
算出，研究；
行，合适；
Do away with 废掉
Do without 没有┄┄┄也行
Have nothing to do with 和 ┄┄┄┄毫无关系
Have(something) to do with 和 ┄┄┄有点关系
（4）插入其他文本
①插入水平线
1．IP地址的申请步骤，及查询学校的I地址得到的信息；2．查询任一域名地址，记录相关信息；
3．写出域名地址的申请步骤；
4．浏览所列出的几种类型的风站，说明这些网站所包含的主要信息。
四、实验心得体会
主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。
（1）在定义了一个或多个本地端的站点之后，往往由于某种原因需要编辑网站的相关数据，这时打开图3-10编辑站点窗口，再按照下面的步骤操作。
（2）选择要修改的网站，完成修改网站的相关设置，完成后单击ok。
（3）回到编辑站点对话框，单击完成按钮结束工作。