第5章Dreamweaver网设计软件

第5章Dreamweaver网页设计软件主要内容：Dreamweaver软件介绍Dreamweaver软件配置Dreamweaver软件设计网页程序文件过程第一页，共二十四页。5.1DreamweaverMX2004概述特点：交互式插入网页元素（文本框、按钮等）。自动产生标记。在线提示标记选项，和选项内容。第二页，共二十四页。5.1DreamweaverMX2004概述5.1.1DreamweaverMX2004简介创建网站站点（创建一个文件夹）用于保存网页文件。网页系统调试完毕上传到指定网站。第三页，共二十四页。5.1DreamweaverMX2004概述5.1.2DreamweaverMX2004操作界面设计者：采用“所见即所得”的方式维护网页。代码编写者：通过输入HTML语句代码编写网页文件。第四页，共二十四页。5.1DreamweaverMX2004概述5.1.2DreamweaverMX2004操作界面运行Dreamweaver打开的第一个窗口。第五页，共二十四页。5.1DreamweaverMX2004概述5.1.2DreamweaverMX2004操作界面Dreamweaver工作窗口第六页，共二十四页。5.2建立和编辑网页程序网页文件：可以在浏览器上显示的页面文件。主页文件：访问网站时打开的第一个网页文件。默认的主页文件名：index.htm、index.html、default.htm、default.html第七页，共二十四页。5.2建立和编辑网页程序第八页，共二十四页。5.2建立和编辑网页程序5.2.1建立空白网页文件第九页，共二十四页。5.2建立和编辑网页程序Dreamweaver网页文件编辑窗口。第十页，共二十四页。5.2建立和编辑网页程序Dreamweaver网页文件编辑窗口。代码卡：手工编辑html标记设计卡：交互方式编辑html标记拆分卡：拆分成两个窗口，上边窗口编辑标记，下边窗口显示网页效果。第十一页，共二十四页。5.2建立和编辑网页程序5.2.2设置网页页面的属性打开或新建网页文件。单击网页窗口下边的“展开”“收缩”按钮。单击“网页属性”可以设置的“外观”属性有：字体、字号、字色、背景色、背景图片。“链接”属性有：连接字体、字号、链接颜色、已访问链接色、活动链接色、链接下划线样式。“标题”属性有：标题字体、标题n字号、标题n字色。第十二页，共二十四页。5.2建立和编辑网页程序5.2.3插入和设置网页页面的文本1）插入文本打开网页。单击“设计”卡。输入文字。按“enter”另起一段。按“shift+enter”换一行（行间距小）。2）插入特殊符号打开网页。定位光标。单击“插入”|“HTML”|“特殊字符”|“其它字符”3）插入日期打开网页。定位光标。单击“插入”|“日期”第十三页，共二十四页。5.2建立和编辑网页程序5.2.4插入和设置网页页面的导航条1）插入导航条grapmenu.htm打开网页。单击“设计”卡。定位导航条位置。单击“插入”|“图像对象”|“导航条”设置导航条元件、项目名称、状态图像、前往的URL。2）图片链接tupimenu.htm在网页中插入图片和链接<ahref="a.htm"><imgsrc="companys.jpg"></a>第十四页，共二十四页。5.2建立和编辑网页程序5.2.5插入和设置网页页面的修饰线1）插入修饰线打开网页。单击“设计”卡。定位修饰线位置。单击“插入”|“HTML”|“水平线”设置水平线的宽度、高度、对齐方式。第十五页，共二十四页。5.3表格的应用5.3.1插入表格tablesp.htm打开网页。单击“设计”卡。定位表格位置。单击“插入”|“表格”定义表格的行数、列数、表格宽度、边框粗细、页眉、标题、对齐方式。5.3.2设置表格合并单元格、设置某一个单元格属性（背景色）5.3.3表格作用对网页内容进行布局，表格边框线粗细为0第十六页，共二十四页。5.4超链接的应用5.4.1设置网页超级链接setlink.htm打开网页。单击“设计”卡。定位光标位置。单击“插入”|“超级链接”输入提示文本，输入链接网址，网页链接使用URL。5.4.2设置邮件超级链接打开网页。单击“设计”卡。定位光标位置。单击“插入”|“电子邮件链接”输入提示文本，输入链接的邮箱地址。第十七页，共二十四页。5.5表单的应用5.5.1表单formsamp.htm打开网页。单击“设计”卡。定位光标位置。单击“插入”|“表单”（form）<form

name=“form1”method=“post”action=““></form>在表单里可以插入多个元素（文本框、单选按钮…）第十八页，共二十四页。5.5表单的应用5.5.2文本框formsamp.htm打开网页。单击“设计”卡。在表单里定位光标位置。输入文字内容单击“插入”|“表单”|”文本字段”<form

name=“form1”method=“post”action=““><input

name="textfield"type="text"size="18"maxlength="18"></form>在表单里可以插入多个元素（文本框、单选按钮…）第十九页，共二十四页。5.5表单的应用5.5.6”提交“”重置“按钮formsamp.htm打开网页。单击“设计”卡。在表单里定位光标位置。单击“插入”|“表单”|”按钮”<form

name=“form1”method=“post”action=“formsamp.php“><input

name="textfield"type="text"size="18"maxlength="18">

<input

type="submit"name="Submit"value="提交"></form>插入“提交”按钮后应该指定服务器后台处理程序action选项formsamp.php添加重置按钮时type=“reset”第二十页，共二十四页。5.5表单的应用5.5.3单选按钮formsamp.htm打开网页。单击“设计”卡。在表单里定位光标位置。单击“插入”|“表单”|”单选按钮”<form

name=“form1”method=“post”action=“formsamp.php“>男<inputtype="radio"name="radiobutton"value="radiobutton">女<inputtype="radio"name="radiobutton"value="radiobutton">

<input

type="submit"name="Submit"value="提交"></form>插入“提交”按钮后应该指定服务器后台处理程序action选项formsamp.php添加重置按钮时type=“reset”第二十一页，共二十四页。5.5表单的应用5.5.4复选框formsamp.htm打开网页。单击“设计”卡。在表单里定位光标位置。单击“插入”|“表单”|”复选框”<form

name=“form1”method=“post”action=“formsamp.php“>计算机<inputtype="checkbox"name="checkbox"value="checkbox">英语<inputtype="checkbox"name="checkbox2"value="checkbox">

<input

type="submit"name="Submit"value="提交"></form>插入“提交”按钮后应该指定服务器后台处理程序action选项formsamp.php添加重置按钮时type=“reset”第二十二页，共二十四页。5.5表单的应用5.5.5列表菜单formsamp.htm打开网页。单击“设计”卡。在表单里定位光标位置。单击“插入”|“表单”|”列表菜单”<form

name=“form1”method=“post”action=“formsamp.php“><selectname=“select”size=“1”>(size>”1”是列表，size=“1”是菜单)<optionvalue="addrec">添加记录</option><optionvalue="modrec">修改记录</option><optionvalue="delrec">删除记录</option><optionvalue="srcrec">查询记录</option></select><input

type="submit"name="Submit"value="提交"></form>插入“提交”按钮后应该指定服务器后台处理程序action选项formsamp.php添加重置按钮时type=“reset”第二十三页，共二十四页。内容总结第5章Dreamweaver网页设计软件。5.1DreamweaverMX2004概述。5.1DreamweaverMX2004概述。在线提示标记选项，和选项内容。5.1.