【网站建设教程】如何通过Dreamweaver创建一个简单的网页
到目前为止，笔者已经创建了一个简单的名为firstpage.html的网页，为了让大家对网 页创建有个更清楚的认识，下面创建一个简单的留言本网页，这个网页允许用户输入留言 信息，在用户单击“提交”按钮时，将留言内容显示在网页上。
很明显，手工输入HTML代码是一件低效且容易犯错的工作，不要说是网站建设的新 人，就是一个具有多年网页设计经验的老手，也不一定能够一气呵成地写出无错的HTML 代码，因此在这个示例中选择使用Dreamweaver工具，如果读者的计算机上没有安装该工 具，请参考 本章1.2节关于Dreamweaver工具的介绍。
首先打开Dreamweaver工具，笔者电脑上安装的是Dreamweaver CS5,按照如下所示 的步骤完成这个留言板的创建。
(1)首次启动Dreamweaver时,会显示Dreamweaver的欢迎页面，在该页面的新建栏 中单击“HTML"链接，将创建一个新的HTML文件，如图1.12所示。
(2)当Dreamweaver创建了一个HTML页面后，就会自动创建一个基本的HTML代 码模板，如果读者的Dreamweaver当前模式不是设计视图，请先切换到设计视图，并在标 题标中输入“留言板”作为网页的标题，如图1.13所示。
(3)可以看到，在设计视图窗口中有一个光标键，首先直接输入一行文本“欢迎使用 留言本”，然后按一下回车键，Dreamweaver此时会帮助用户添加相应的HTML标记，用 户暂时可以不用理会Dreamweaver产生的标记代码。
(4)接下来向设计窗口添加一个表格，首先单击导航菜单的“窗口丨插入”菜单项， 或者按Ctrl+F2快捷键，将在右侧的导航面板中显示一个可以插入元素的工具栏。在工具 栏面板中单击“表格”按钮，将弹出如图1.14所示的表格对话框。
在这里设置表格行和列均为1,指定表格宽度为100%,这样表格可以占满整个页宽。 其他的保持默认值，单击“确定”按钮将会在设计视图上添加一个表格，如图1.15所示。
在表格内部右击鼠标，从弹出的快捷菜单中选择“表格丨选中表格”，然后在属性面 板窗口指定Id为guestTable,如图1.16所示。
在表格内部单击鼠标，输入一行文本"已经留言的内容”。
(5)在插入面板上单击“常用”按钮下面的小箭头，从弹出的菜单中选择“表单”工 具面板，将显示出所有可供插入的表单按钮，单击“文本区域”插入按钮，将弹出如图1.17 所示的窗口。
在文本区域中，仅指定ID值为guestNode,其他的均保留默认值即可，单击“确定” 按钮，Dreamweaver将询问用户是否添加一个表单标签，单击“是"按钮，Dreamweaver 将在页面上添加一个文本输入框。
(6)在文本框的下面，但是在表单标签的内部，按回车键，添加一个换行，然后从表 单工具栏中选择“按钮”工具，将弹出如图1.18所示的窗口。
为按钮指定ID为btnOk,然后单击“确定”按钮，将会在设计面板上看到新添加的“提 交”按钮。选中该按钮，在“属性”面板中将“动作”复选框勾选“无”，不使用表单的 提交功能。
(7)现在留言本的网页界面设计出来了，很简单吧，基本上没有编写一行HTML代码。
接下来需要编写当有人输了留言之后的显示问题。这里需要使用到Javascript脚本，因此 不能偷懒，必须在代码视图的vhead>标记处添加如下所示的JavaScript代码。
<head>
<meta http-equiv=nContent-TypeH content=ntext/html; charset=gb2312n /> <t it le> 留言板 </title〉
<script type=ntext/javascriptH>
function saveGuestBook()
(
objTable=document. getElementByld (nguestTablen) ; //获取网页上的表格对象 objRow=objTable . insertRow (objTable. rows . length) ; //向表格中插入一行
objCell=objRow, insertcell () ; //在行中插入一歹U
objCell.innerText=document , getElementByld(nguestNote") .value;
//指定列的文本
) </script> </head>
当用户在文本框中输入了信息后，单击“提交”按钮时，将首先使用 document.getElementByld获取网页上面的表格对象。然后向表格中插入一行，以便存放用 户输入的留言内容，在表格行中插入一个单元格，将用户在文本区域中输入的留言内容写 入这个单元格中。
(8)在完成了这些工作后，将这个JS函数与按钮btnOk进行绑定，在代码编辑器窗口 中找到btnOk的定义位置，添加onClick事件处理器，如下所示。
<input type="button" name="btnOk" id="btnOk" value="按钮"onclick= "saveGuestBook()" />
现在这个简单的留言本已经做好了，接下来就可以单击工具栏上的按钮，打开浏 览器开始执行了。可以看到当在文本框中输入了留言内容并提交时，会自动显示在表格中, 如图1.20所示。
虽然这个例子非常简单，而且效果也不是非常精美，但是至少让学习网站的初学者对网 页设计有了整体的认识，通过对本书各个章节的深入学习，要开发出精美的网站并不是难事。
很明显，手工输入HTML代码是一件低效且容易犯错的工作，不要说是网站建设的新 人，就是一个具有多年网页设计经验的老手，也不一定能够一气呵成地写出无错的HTML 代码，因此在这个示例中选择使用Dreamweaver工具，如果读者的计算机上没有安装该工 具，请参考 本章1.2节关于Dreamweaver工具的介绍。
首先打开Dreamweaver工具，笔者电脑上安装的是Dreamweaver CS5,按照如下所示 的步骤完成这个留言板的创建。(1)首次启动Dreamweaver时,会显示Dreamweaver的欢迎页面，在该页面的新建栏 中单击“HTML"链接，将创建一个新的HTML文件，如图1.12所示。
(2)当Dreamweaver创建了一个HTML页面后，就会自动创建一个基本的HTML代 码模板，如果读者的Dreamweaver当前模式不是设计视图，请先切换到设计视图，并在标 题标中输入“留言板”作为网页的标题，如图1.13所示。
(3)可以看到，在设计视图窗口中有一个光标键，首先直接输入一行文本“欢迎使用 留言本”，然后按一下回车键，Dreamweaver此时会帮助用户添加相应的HTML标记，用 户暂时可以不用理会Dreamweaver产生的标记代码。
(4)接下来向设计窗口添加一个表格，首先单击导航菜单的“窗口丨插入”菜单项， 或者按Ctrl+F2快捷键，将在右侧的导航面板中显示一个可以插入元素的工具栏。在工具 栏面板中单击“表格”按钮，将弹出如图1.14所示的表格对话框。
在这里设置表格行和列均为1,指定表格宽度为100%,这样表格可以占满整个页宽。 其他的保持默认值，单击“确定”按钮将会在设计视图上添加一个表格，如图1.15所示。
在表格内部右击鼠标，从弹出的快捷菜单中选择“表格丨选中表格”，然后在属性面 板窗口指定Id为guestTable,如图1.16所示。
在表格内部单击鼠标，输入一行文本"已经留言的内容”。
(5)在插入面板上单击“常用”按钮下面的小箭头，从弹出的菜单中选择“表单”工 具面板，将显示出所有可供插入的表单按钮，单击“文本区域”插入按钮，将弹出如图1.17 所示的窗口。
在文本区域中，仅指定ID值为guestNode,其他的均保留默认值即可，单击“确定” 按钮，Dreamweaver将询问用户是否添加一个表单标签，单击“是"按钮，Dreamweaver 将在页面上添加一个文本输入框。
(6)在文本框的下面，但是在表单标签的内部，按回车键，添加一个换行，然后从表 单工具栏中选择“按钮”工具，将弹出如图1.18所示的窗口。
为按钮指定ID为btnOk,然后单击“确定”按钮，将会在设计面板上看到新添加的“提 交”按钮。选中该按钮，在“属性”面板中将“动作”复选框勾选“无”，不使用表单的 提交功能。
(7)现在留言本的网页界面设计出来了，很简单吧，基本上没有编写一行HTML代码。
接下来需要编写当有人输了留言之后的显示问题。这里需要使用到Javascript脚本，因此 不能偷懒，必须在代码视图的vhead>标记处添加如下所示的JavaScript代码。
<head>
<meta http-equiv=nContent-TypeH content=ntext/html; charset=gb2312n /> <t it le> 留言板 </title〉
<script type=ntext/javascriptH>
function saveGuestBook()
(
objTable=document. getElementByld (nguestTablen) ; //获取网页上的表格对象 objRow=objTable . insertRow (objTable. rows . length) ; //向表格中插入一行
objCell=objRow, insertcell () ; //在行中插入一歹U
objCell.innerText=document , getElementByld(nguestNote") .value;
//指定列的文本
) </script> </head>
当用户在文本框中输入了信息后，单击“提交”按钮时，将首先使用 document.getElementByld获取网页上面的表格对象。然后向表格中插入一行，以便存放用 户输入的留言内容，在表格行中插入一个单元格，将用户在文本区域中输入的留言内容写 入这个单元格中。
(8)在完成了这些工作后，将这个JS函数与按钮btnOk进行绑定，在代码编辑器窗口 中找到btnOk的定义位置，添加onClick事件处理器，如下所示。
<input type="button" name="btnOk" id="btnOk" value="按钮"onclick= "saveGuestBook()" />
现在这个简单的留言本已经做好了，接下来就可以单击工具栏上的按钮，打开浏 览器开始执行了。可以看到当在文本框中输入了留言内容并提交时，会自动显示在表格中, 如图1.20所示。
虽然这个例子非常简单，而且效果也不是非常精美，但是至少让学习网站的初学者对网 页设计有了整体的认识，通过对本书各个章节的深入学习，要开发出精美的网站并不是难事。
本文链接：http://www.jaseo.net/study/58.html，文章未经本站许可，禁止转载!
以上就是关于"【网站建设教程】如何通过Dreamweaver创建一个简单的网页"文章的全部内容，获取【网站建设/网站排名/SEO优化】报价-拨打电话：13979612353