第5章Dreamweaver网页设计软件.pptVIP

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