表单网页与框架网页的制作

《表单网页与框架网页的制作》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、表单网页与框架网页的制作一：制作如下图所示的表单网页（提示：先插入表单，然后在表单内插入一个9行2列的表格，在表格的单元格中插入表格元素）二：框架网页制作1 框架的创建下创建如图10.2所示的框架页，这是比较简单而且最为常用的网页布局结构。图10.2 框架页展示在Dreamweaver8中创建框架有4种方法：  ●选择菜单命令【文件】→【新建】，弹出【新建文档】对话框，在对话框中选择【常规】→【框架集】→【垂直拆分】，单击【创建】按钮，可创建框页，如图10.3所示。  ●选择菜单命令【查看】→【可视化助理】→【可视框架边框助理】，在网页中

2、按Alt键后，用鼠标拖动框架边框，也可创建框架。  ●选择菜单命令【插入】→【HTML】→【框架】→【次级菜单中框架类别】，在文档中创建框架。  ●切换工具栏类别为【布局】，单击【框架】按钮右侧的三角形，在下拉列表框中选择相应的框架类别，创建框架。在弹出的【框架标签辅助功能属性】对话框中设置每个框架的标题，如图10.4所示。         图10.3 创建框架                                  图10.4 设置框架标题单击【确定】按钮，在文档中创建左右形式的框架。2 设置框架集属性框架和框架集的属性都可以

3、在属性面板中设置，此处需要介绍框架面板来协助完成。（1）用快捷键Shift+F2或选择菜单命令【窗口】→【框架】，调出【框架】面板，如图10.5所示。（2）在框架面板中，单击最外一层边框，在【属性】面板中可以设置框架集的属性，如图10.6所示。          图10.5 【框架】面板                        图10.6 框架集【属性】面板在属性面板中各项参数详细设置如下：  ●边框：设置框架集是否显示边框，即是、否、默认值，默认显示边框。  ●边框宽度：如果选择显示边框，在此可以设置边框的宽度。  ●边框颜色：如

4、果选择显示边框，在此可以设置边框的颜色。  ●列：单击属性面板右侧中框架集的缩图，可以设置框架集的比例，一般设置一列框架的值为固定的像素或百分比，另一列的值为“1”，单位选择“相对”，这样可以保证让框架集未固定设置宽度的一列随浏览器而自动适应宽度。3 设置框架属性（1）在【框架】面板中单击框架的名称，可以在相应的【属性】面板中设置框架的相关属性，如图10.7、图10.8、图10.9和图10.10所示。        图10.7 选择左侧框架                     图10.8 选择左侧框架页的【属性】面板        图

5、10.9 选择右侧框架                     图10.10 选择右侧框架页的【属性】面板在属性面板中可以进行下面的设置：  ●框架名称：在框架名称下方的文本框中可设置框架的名称，方便区别不同的框架。  ●源文件：在文本框中设置当前框架页内的文档名称，也可通过单击按钮查找本地文件路径。  ●边框：设置当前框架是否有边框，默认有。  ●边框颜色：如果设置有边框，可在此设置边框颜色。  ●滚动：设置当前框架是否显示滚动条，有是、否、自动、默认4个选项，当选择自动时，网页内容超出框架的范围会自动显示滚动条。  ●不能调整大小：选

6、中该复选框，框架将不能调整大小。  ●边界宽度：框架距离距框集的左右距离。  ●边界高度：框架距离距框集的上下距离。4 框架的基本操作对于框架可以进行如下的操作：选择框架、拆分框架、删除框架和打开框架中的一个网页。下面结合图例来讲述这几种基本操作。1．选择框架（1）要选择框架，只要单击一个框架内的任意地方，该框架就成为当前活动的框架。该框架中的网页就成为当前活动的网页。（2）要选择所有的框架，把光标移到框架与框架之间的分隔线上，等光标变成形状后单击。（3）要改变框架的尺寸，把光标移到框架的边框上，等光标变成形状后拖动边框，如图10.11所

7、示。图10.11 选择框架2．拆分框架（1）要把框架一分为二，按住Ctrl键不放然后拖动框架的边框。（2）也可以选择菜单命令【修改】→【框架页】的下级菜单选项来拆分框架命令。例如，选择【拆分右框架】选项，则右侧的框架被拆分成了左右两个框架，如图10.12所示。图10.12 拆分框架【修改】→【框架页】菜单命令的次级菜单的各项功能如下：  ●编辑无框架内容：编辑代码之间的内容，当浏览器不支持框架时网页所显示的内容。  ●拆分左框架：拆分后原框架在新生成的框架左侧。  ●拆分右框架：拆分后原框架在新生

8、成的框架右侧。  ●拆分上框架：拆分后原框架在新生成的框架上面。  ●拆分下框架：拆分后原框架在新生成的框架下面。3．删除一个框架框架创建后可删除，具本操作步骤如下：（1）选择菜单命令【查看】