网页设计与制作第4讲.ppt
- 文档编号:2123279
- 上传时间:2022-10-27
- 格式:PPT
- 页数:27
- 大小:898.50KB
网页设计与制作第4讲.ppt
《网页设计与制作第4讲.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作第4讲.ppt(27页珍藏版)》请在冰豆网上搜索。
HTML的表单标记-制作交互式网页制作交互式网页HTML的框架标记-制作框架式网页制作框架式网页TOSOTOSO官方旗舰店官方旗舰店官方旗舰店官方旗舰店建立表单页面建立表单页面HTML表单是HTML页面与浏览器端实现交互的重要手段,利用表单可以收集客户端提交的有关信息。
如在网上要申请个人如在网上要申请个人空间,就必须按要求填写空间,就必须按要求填写完成网站提供的表单网页。
完成网站提供的表单网页。
表单可以用于调查、定购、表单可以用于调查、定购、搜索等功能。
搜索等功能。
表单信息的处理过程为:
当单击表单中的提交按钮时,输入到表单中的信息就会传递到服务器中,然后由服务器的有关应用程序进行处理,处理后或者将用户提交的信息储存在服务器端的数据库中,或者将有关信息返回到客户端浏览器上。
表单标记表单标记定义表单定义表单中的两个属性中的两个属性action指定处理数据的指定处理数据的CGI程序程序例:
例:
method数据传递的方式数据传递的方式例:
例:
表单中包含的标记表单中包含的标记制作单行文本框、按钮等制作单行文本框、按钮等.制作多行文本框制作多行文本框制作下拉菜单制作下拉菜单输入标记输入标记INPUT输入标记属性输入标记属性:
Name:
Name:
域的名称,即输入数据所存放的变量名域的名称,即输入数据所存放的变量名Type:
Type:
域的类型域的类型TextText文字域文字域PasswordPassword密码域密码域FileFile文件域文件域CheckboxCheckbox复选框复选框RadioRadio单选框单选框ButtonButton普通按钮普通按钮SubmitSubmit提交按钮提交按钮ResetReset重置按钮重置按钮ImageImage图像域(图像提交按钮)图像域(图像提交按钮)设置单行文本输入框设置单行文本输入框标记:
标记:
属性:
属性:
type=“text”(Password)设置输入类型设置输入类型name=“x1”输入数据所存放的变量名输入数据所存放的变量名value=“预置名称预置名称”设置缺省值设置缺省值size=“输入窗口的字节数输入窗口的字节数”maxlength=“最多输入的字节数最多输入的字节数”例:
例:
姓名:
姓名:
密码:
密码:
制作单选按钮制作单选按钮标记:
标记:
属性:
属性:
type=“radio”单选按钮单选按钮name=z1选项组变量名选项组变量名checked此项被默认选中此项被默认选中value=“缺省值缺省值”选中后传送到服务器的值选中后传送到服务器的值例:
例:
请选择你居住的城市:
请选择你居住的城市:
北京北京上海上海成都成都制作多选按钮制作多选按钮标记:
标记:
属性:
属性:
type=“checkbox”复选按钮复选按钮name=a1输入变量名输入变量名checked此项被默认选中此项被默认选中value=“缺省值缺省值”选中后传送到服务器的值选中后传送到服务器的值例:
例:
请选择你喜欢的音乐:
请选择你喜欢的音乐:
摇滚乐摇滚乐爵士乐爵士乐流行乐流行乐古典乐古典乐制作文件域制作文件域标记:
标记:
属性:
属性:
type=“File”文件域文件域name=f1输入变量名输入变量名例:
例:
请上传你的照片:
请上传你的照片:
制作提交与重置按钮制作提交与重置按钮标记:
标记:
属性:
属性:
type=“submit”提交按钮提交按钮type=“reset”重置按钮重置按钮value=“按钮名按钮名”例:
例:
制作图像提交按钮制作图像提交按钮标记:
标记:
属性:
属性:
type=“Image”图像提交按钮图像提交按钮name=“f1”src=“图像文件名图像文件名”例:
例:
设置多行文本输入框设置多行文本输入框标记:
标记:
预设文字预设文字属性:
属性:
name输入变量名输入变量名rows文本框的长度文本框的长度cols文本框的列数文本框的列数例:
例:
请留言请留言:
下拉菜单的制作下拉菜单的制作标记标记:
选项一选项一选项二选项二选项三选项三TOSOTOSO官方旗舰店官方旗舰店官方旗舰店官方旗舰店.属性:
属性:
namesize菜单中显示的选项条数菜单中显示的选项条数multiple允许多选允许多选例:
例:
你所熟悉的语言:
你所熟悉的语言:
汉语汉语英语英语日日语语德德语语俄俄语语法法语语使用框架结构使用框架结构框架框架的作用就是把浏览器窗口划分成若干个区域,每个区的作用就是把浏览器窗口划分成若干个区域,每个区域可以显示不同的网页。
重复出现的内容被固定下来,每域可以显示不同的网页。
重复出现的内容被固定下来,每次浏览者发出对页面的请求时,只下载发生变化的框架的次浏览者发出对页面的请求时,只下载发生变化的框架的页面,其它子页面保持不变。
页面,其它子页面保持不变。
使用框架使用框架可以非常方便的完成导航工作,而且各框架之间可以非常方便的完成导航工作,而且各框架之间不存在干扰问题,所以框架技术普遍应用于页面导航。
不存在干扰问题,所以框架技术普遍应用于页面导航。
横向分割窗口横向分割窗口.纵向分割窗口纵向分割窗口TOSOTOSO官方旗舰店官方旗舰店官方旗舰店官方旗舰店分割窗口(框架集标记)分割窗口(框架集标记)框架集标记属性框架集标记属性FrameSpacing=n框架集边框宽度框架集边框宽度BorderColor=“red”框架集边框颜色框架集边框颜色FrameBorder=0
(1)是否显示边框是否显示边框FRAME中的属性:
中的属性:
Src=“URL”指定页面源文件指定页面源文件Name=“窗口名称窗口名称”框架名称框架名称MarginWidth=n框架边缘宽度框架边缘宽度Marginheight=n框架边缘高度框架边缘高度Scrolling=“Yes”(“No”“Auto”)是否显示滚动条是否显示滚动条NoResize调整框架尺寸调整框架尺寸指定窗口内容指定窗口内容(框架标记框架标记)1.1.编制分割窗口的源程序,并在相应的窗口放编制分割窗口的源程序,并在相应的窗口放入文件内容,在入文件内容,在FRAME标记中说明窗口名称标记中说明窗口名称等属性(等属性(总框架网页文件总框架网页文件)2.2.选定某一窗口显示选定某一窗口显示“目录目录”、“索引索引”“指南指南”等一些带有引导性的内容等一些带有引导性的内容3.3.编制含有索引内容的编制含有索引内容的HTMLHTML源文件,说明索源文件,说明索引文字所指向的内容显示的窗口,并在分割引文字所指向的内容显示的窗口,并在分割窗口程序中说明该文件被放在哪一个窗口窗口程序中说明该文件被放在哪一个窗口(目录窗口网页文件)(目录窗口网页文件)建立框架式网页的步骤建立框架式网页的步骤分割窗口的分割窗口的HTML源程序源程序目录链接的目录链接的HTML源程序源程序窗口一窗口二窗口三浮动框架浮动框架浮动框架是一种特殊的框架页面,在浏览器窗口中可以嵌套子窗口,在其中显示页面的内容。
浮动框架的浮动框架的标记标记TOSOTOSO官方旗舰店官方旗舰店官方旗舰店官方旗舰店属性:
属性:
Width浮动框架的宽度浮动框架的宽度Height浮动框架的高度浮动框架的高度Name浮动框架的名称浮动框架的名称Align浮动框架排列的方式浮动框架排列的方式(LeftCenterRight)浮动框架浮动框架校园图片校园图片1TOSOTOSO官方旗舰店官方旗舰店官方旗舰店官方旗舰店例:
例:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作