导图社区 《互联网数据库程序设计》7.1-7.5网页布局与表单设计
《互联网数据库程序设计》7.1-7.5网页布局与表单设计。网页布局设计,dreamweaver预设布局,HTML创建表格,表格设计导向,表单概述,设计表单控件
编辑于2023-04-13 16:23:11 吉林《互联网数据库程序设计》10动态网页及程序设计。链接数据库服务器,链接数据库服务器的通知语句,发送SQL语句的向导,输出记录集中的数据与记录集相关的数据
《互联网数据库程序设计》8.5-8.8数值与逻辑表达式,数值表达式,数值运算符,常用数值函数,逻辑表达式,时间戳
《互联网数据库程序设计》8.1-8.5PHP与表达式,常用PHP编辑器,Dreamweaver开发PHP应用程序,PHP程序语法,PHP与HTML的区别,变量及其赋值运算与表达式输出,字符串表达式,字符串连接符
社区模板帮助中心,点此进入>>
《互联网数据库程序设计》10动态网页及程序设计。链接数据库服务器,链接数据库服务器的通知语句,发送SQL语句的向导,输出记录集中的数据与记录集相关的数据
《互联网数据库程序设计》8.5-8.8数值与逻辑表达式,数值表达式,数值运算符,常用数值函数,逻辑表达式,时间戳
《互联网数据库程序设计》8.1-8.5PHP与表达式,常用PHP编辑器,Dreamweaver开发PHP应用程序,PHP程序语法,PHP与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 >