《互联网数据库程序设计》7.1-7.5网页布局与表单设计

《互联网数据库程序设计》7.1-7.5网页布局与表单设计。网页布局设计，dreamweaver预设布局，HTML创建表格，表格设计导向，表单概述，设计表单控件

7.1-7.5网页布局与表单设计

• 7.1网页布局设计
  • 网页布局
    • 对页面中的文字、图片、多媒体内容和表格进行统一的样式和位置设计
  • 页面组成
    • 一个网页页面通常由标题、脚注、侧栏和正文等页面元素标题、脚注、侧栏和正文
• 7.1.2使用Dreamweaver预设布局
  • 单击“文件”菜单 →“新建”选项，打开“新建文档”对话框
    • 列固定
      • 类型以像素数量定义区域列宽，区域宽度不会随浏览器的尺寸而变化
    • 列液态
      • 类型表示以浏览器宽度的百分比（%）定义区域列宽，改变浏览器尺寸时自动调整区域的列宽
  • 表格
    • 通过行、列和单元格描述二维信息，在网页中用于显示结构化数据和实现页面布局
  • 表格结构
    • 由一行或多行组成，每行又由一个或多个单元格组成列，通过标题、边框、填充和单元格边距实现布局效果
• 7.4.2使用HTML创建表格
  • 标签格式
    • <Table Border="10" Cellpadding="10" Cellspacing="10"> <Caption>表格标题</Caption> <Tr> <Th>列标题1</Th><Th>列标题2</Th>…… <Th>列标题n</Th> </Tr> </Tr> <Tr> <Td>单元格1</Td> …… </Tr> <Tr> <Td>单元格</Td>…… </Tr> </Table>
• 7.4.3表格设计导向
  • 1 插入表格
    • 选择“插入”面板的“常用”类→“表格”
  • 2 为表格添加元素
    • 直接插入
      • 在设计视图中单击目标单元格设置插入点，添加元素
    • 添加外部数据
      • 选择“插入”菜单→“表格对象”→“导入表格式数据”，选择文件位置
  • 3 设置表格属性
    • 整体属性
      • 单击表格边框选中整个表格，在属性面板中修改
    • 单元格属性
      • 单击选择一个单元格，按住左键拖动连续选择，按住Ctrl键实现多选
    • 行、列属性
      • 鼠标在目标行或列的首部，变为箭头样式，实现行、列选择
• 7.5.1表单概述
  • 表单
    • 网站服务器和浏览器数据交互的桥梁，数据提交后，由服务器端脚本程序接收并处理
• 7.5.2设计表单
  • 表单标签格式
    • <Form Action=接收数据的程序文件名 Target=接收数据程序的打开位置 Enctype=编码类型 Method=发送表单数据的方法名 Name=表单名> …</Form>
  • Enctype编码类型
    • 定义表单的数据编码方式，属性值有如下三种
    • Application/X-www-Form-urlencoded：
      • 默认值，指定表单数据发送到服务器之前对所有字符编码，即空格转换为 "+"，特殊符号转换为 ASCII码
    • Text/Plain
      • 表单数据以纯文本方式发送，不对特殊字符编码
    • Multipart/Form-data
      • 表单数据以二进制形式发送，不对字符编码，当在表单中传递文件时，必须使用该值
  • Method方法
    • 定义提交表单的方法，属性值为Get和Post
    • Get方法
      • 默认值。数据附加在资源名后作为参数发送给WEB服务器。通过“？”与资源名连接，不同数据之间用 “&”相连，有长度限制
      • 如：LocalHost/Login.PHP ? Name=ywy & Password=ywy211。PHP程序中用数组$_GET接收
    • Post方法
      • 数据用加密方式发送给WEB服务器。PHP程序中用数组$_POST接收数据。安全性更高且没有长度限制
• 7.5.3设计表单控件
  • 表单控件
    • 用户实际操作的是表单中的表单控件
    • 控件标签
      • <Form Name="Form1" Method="Post" Action=""> </Form>
    • 表单控件由Input等标签实现，通过Type属性值标识控件的类型。
    • type属性
      • Type属性值 控件类型 Type属性值 控件类型 Text 文本、文本字段或文本域 Image 图像域提交按钮 Password 密码框 Reset 重置按钮 Checkbox 复选框 Submit 提交按钮 Radio 单选按钮 Button 普通按钮 File 文件上传按钮
    • Dreamweaver中：选择“插入”面板的“表单”类，添加表单和所需控件并修改属性
  • 1 文本（text）
    • 也称文本字段或文本域，用于输入一行数据
    • 格式
      • <Input Type=Text Name=文本名 Size=宽度 Maxlength=最多字符数 Value=数据 …… />
    • 属性说明
      • 属性 DW名称 属性说明 例子 Name 文本字段 文本名称 Name= Textfield Size 字符宽度 输入域的显示宽度 Size=20 Maxlength 最多字符数 可输入字符串的最大长度 Maxlength=200 Value 初值 设置初值和存储输入的数据 Value=UserName
  • 2 密码框（password）
    • 用于输入一行数据（密码），用户数据显示为星号“*”或圆点“˙”
    • 格式
      • <Input Type=Password Name=密码框名 Size=宽度 Maxlength=最多字符数 Value=密码……/>
  • 3 文本区域（编辑框）
    • 输入并显示多行文本，通过TextArea标签实现
    • <TextArea Name=文本区域名 Cols=列数 Rows=行数 Value=数据……/>
    • Cols
      • 每行能显示的字符个数（列数)，当输入数据超过此列数时，超出的数据自动到下一行显示
    • Rows
      • 能显示的数据行数。当数据超出此行数时，将隐藏多余的数据行
  • 4 单选按钮
    • 以圆形“⊙”或“○”呈现在表单上，相同名称的多个单选按钮组成一组，获取用户的单项选择
    • 格式
      • <Input Type=Radio Name=单选按钮组名 Value=选项值 [Checked] ……/>
    • 属性说明
      • 属性 DW名称 属性说明 例子 Name 名称 单选按钮组名称 Name=XL Value 选定值 设置当前选项的值 Value=1 Checked 初始选中状态 每组只能选中一项 Checked="Checked"或 Checked
  • 5 复选框
    • 以矩形“□”或“□”呈现在表单上。多个相同名称复选框为一组，每组中可以选中多项
    • 格式
      • <Input Type=CheckBox Name=复选框组名[] Value=选项值 [Checked] …… />
    • 属性说明
      • 属性 DW名称 属性说明 例子 Name 名称 复选框组名称 Name=WY[] Value 选定值 设置选中对象时所取得值 Value=1 Checked 初始选中状态 每组可以选中多项 Checked="Checked"或 Checked
  • 6 命令按钮
    • 用户与网页交互的通用触发器控件，根据type值分为三种类型，系统响应行为有所不同
    • 格式
      • <Input Type=Button|Reset|Submit Name=按钮名 Value=显示的文字……/>
    • Reset（重置）
      • 还原到各控件的初始值
    • Submit（提交）
      • 存储表单数据到全局数组$_POST或$_GET中，同时触发Action属性指定的PHP文件。若Action属性值为“#”，执行当前网页代码
  • 8 选择列表
    • 以选项域的方式提供一组选项，俗称列表框
    • 格式
      • <Select Name=列表框名[] Size=显示列表行数 [Multiple] > <Option Value=选项值1 [Selected]>选项的显示文本 </Option> …… <Option Value=选项值n [Selected] >选项的显示文本 </Option> </Select>
    • 属性说明
      • 属性 DW名称 属性说明 例子 Name 选择 列表框名称 Name= TC[] Size 高度 列表框中同时显示行数 Size=3 Multiple 允许多选 允许选中多项，省略此属性，只能选中一项 Multiple=Multiple或Multiple Value 值 设置选中对象时所取的值 Value=1 Selected 初始选中项 初始时处于选中状态 Selected=Selected或Selected
  • 9 选择菜单
    • 也称下拉列表框，由下拉按钮和下拉列表组成，单击下拉按钮时才显示列表，格式不含Size和Multiple属性
    • 格式
      • <Select Name=下拉列表名> <Option Value=选项值Selected>选项显示的文本</Option> <Option Value=n Selected>选项显示的文本</Option> </Select >