《网页设计与制作-电子教案-陈彦许 第5章 动态网页设计初步》由会员分享，可在线阅读，更多相关《网页设计与制作-电子教案-陈彦许 第5章 动态网页设计初步（58页珍藏版）》请在金锄头文库上搜索。
1、第5章 动态网页设计初步,【学习目标】,5.1 超文本标记语言HTML,5.1.1 HTML简介,【代码】 网页设计与制作 我正在学习网页设计与制作课程 ,在上述代码中，第一行和第二行是为了兼容HTML的升级版XHTML而设置的，在此可暂不考虑；第三行中的和最后一行的表示文档的开始与结束；在和之间，分成两个部分，第一部分为和，表示文档头的开始和结束，例如网页的标题信息就放在和之间的标记中。第二部分是和，是网页的主体部分，例如“我正在学习网页设计与制作课程”就放在这个部分。,HTML的全称是Hyper Text Markup Language，中文名字为“超文本标记语言”，是目前网络上应用最为广
2、泛的语言，也是构成网页文件的主要语言。它由HTML标记构成描述性文件，说明网页中文字、图像、表格、链接等信息。由于Dreamweaver能够自动生成HTML代码，现用一个简单的例子说明一下HTML文档的结构。 打开Dreamweaver，新建一个HTML文档，在其标题栏中输入“网页设计与制作”，在正文部分输入“我正在学习网页设计与制作课程”，单击代码视图，就可以看到如下文档。,5.1 超文本标记语言HTML,5.1.2 常用的HTML标记1、表格的HTML标记,打开Dreamweaver后，新建一个HTML文档，在设计视图中插入一个3行2列的表格，并按表5-1输入内容；,表5-1 测试表格,打
3、开代码视图，可以看到HTML代码的和之间自动生成了表格的代码如下：, 第一行第一列 第一行第二列 第二行第一列 第二行第二列 第三行第一列 第三行第二列 ,其中和是表格的开始与结束标记，在中的参数指明了边框、单元格边距、单元格间距的信息；是表中行的信息，由于插入的表格是三行的表格，所以在代码中出现了3组和，分别标出行的开始和结束；是单元格的信息，如第一行包括两个单元格，所以标出了两个和。,5.1 超文本标记语言HTML,5.1.2 常用的HTML标记2、图像的HTML标记,在网页中插入一个图像AW.GIF，选中图像时找开代码视图，就可以看到如下HTML代码： 就是插入图像后自动生成的HTML代
4、码，其中的参数src显示了图像文件的图径与名称，width为图像显示的宽度，height为图像显示的高度；,5.1 超文本标记语言HTML,5.1.2 常用的HTML标记3、超链接的HTML代码,在网页中输入“新浪网”，并通过属性面板设置其超链接为“http:/”，设置文字的超链接，打开代码视图，就可以看到如下代码： 新浪网 、就是超链接的HTML标记，其中的href参数指明了链接的地址。,5.1 超文本标记语言HTML,5.1.2 常用的HTML标记4、其它常用的标记,除表格标记、图像标记和超链接标记外，表5-2中列出了常用的HTML标记，供读者参考。对于表中未列出的标记，用户在利用Drea
5、mweaver等可视化工具对网页进行编辑时，可以选定相应的对象，打开代码视图，查看其HTML标记。,5.2 表单,5.2.1 插入表单域,在交互网站中，应用表单可以收集客户的信息，如客户名称、联系方式、填写订单及产品搜索等。在网页中插入的表单对象提供了用户输入数据的机制，用户输入的数据通过服务器端的应用程序进行处理，并将结果呈现到用户的浏览器中进行显示。 插入表单对象之前一般需要插入表单域，如果没有插入表单域，直接插入表单对象，Dreamweaver会自动创建一个表单域，插入表单域的方法如下：,Step1,将光标移动到需要插入表单的位置；单击“插入”面板中的“表单”类别里的“表单”按钮。即可创
6、建表单域。,5.2 表单,5.2.1 插入表单域,Step2,单击“插入”面板中的“表单”类别里的“表单”按钮。即可创建表单域。 创建成功后，在工作区域显示一个红色的方框，这就是刚刚创建的表单域。插入表单域后，单击红色的表单边框可以选定表单域，Dreamweaver的属性面板变成表单的属性面板，如图所示。在属性面板中可以设置表单的属性。,5.2 表单,5.2.2 插入表单对象,1、插入文本域 文本域，即文本输入框，是使用最广泛的表单对象，它可以接受任何类型的字母、数字等文件。文本域可以单行或多行，也可以以密码域的方式显示，此时输入的文本将被星号或其它符号替换，避免旁观者看到这些文本。 插入文本
7、域的方法为，在需要插入文本域的位置单击，然后单击“插入”面板中的“表单”类别里的“文本字段”按钮。在弹出的对话框中设置其辅助功能，单击“确定”按钮，即可创建一个文本域。 单击文本域，就可以在“属性”面板中设置其属性，如图所示：,文本域：指定文本域的名称，在服务器应用程序中调用该文本域中输入的内容时使用。 字符宽度：指定文本域最多可显示的字符数。 最多字符数：指定用户在单行文本域中最多可输入的字符数，如果此处为空白，则用户可以输入任意多个字符。 类型：指定文本域的类型，其中选中“单行”时为单行文本域，选中“多行”为多行文本域，选中“密码”时为密码域。 初始值：指定表单在默认状态下显示的文本，可以
8、在域中指定说明或提示信息。 类：为文本域指定CSS样式。 行数：在类型中选定“多行”时可用，用于指定文本框的高度。,5.2 表单,5.2.2 插入表单对象,2、添加按钮对象 使用表单可以将表单数据提交到服务器，如图所示的网易免费邮箱中，当用户输入用户名、密码等信息后，单击“登录”按钮，就可以将用户输入的用户名和密码信息上传到网易的服务器中进行验证。,5.2 表单,5.2.2 插入表单对象,使用按钮可以将表单中的数据提交到服务器，或者重置表单，也可以为按钮指定其它处理任务，如输入房子单价、面积、贷款方式、贷款年限及还款年限，就可以计算机出房子总价、单月还款数额等。 在网页中插入按钮的方法与插入文
9、本域的方法类似，只需要将光标放在要插入按钮的位置，然后单击“插入”面板中的“表单”类别里的“按钮”按钮，在弹出的对话框中设置其辅助功能属性，单击“确定”按钮。默认情况下，添加的按钮是一个提交按钮（将表单中的数据提交到服务器）。 选定插入的按钮，就可以在属性面板中设置按钮的属性，按钮的属性面板如图所示：,按钮名称：指定按钮的名称； 值：设定按钮上显示的文本，如图5-3中显示的文本为“登录”，则在此输入“登录”； 动作：设定按钮的类型，指定单击按钮时发生的动作。如果选择“提交表单”，则将表单中的数据提交到服务器；如果选择“重设表单”，则将表单中的数据设为空；如果选择“无”，则不做提交或重设操作，由
10、编程人员指定其它程序处理； 类：为按钮指定CSS样式，如图5-3所示的“登录”按钮，就不是默认的样式。,5.2 表单,5.2.2 插入表单对象,3、添加复选框表单 复选框是指用户可以有多个选择的一种输入表单机制，如一个人的爱好可以包括“读书”、“上网”、“听音乐”、“打球”等当中的一个或多个，甚至是一个都没有。 在网页中插入复选框的方法与按钮等表单元素的方法完全相同，同样选中复选框时可以在如图所示的“复选框”属性面板中设置复选框的属性。,复选框名称：指定复选框的名称。在此需要注意的是，一组复选框需要设置相同的名称，否则程序编制人员就无法编写相应的程序。 选定值：指定复选框被选中时发送到服务器的
11、值； 初始状态：指定用户打开网页时复选框的选定状态； 类：为复选框指定CSS样式。,5.2 表单,5.2.2 插入表单对象,4、单选按钮 单选按钮代表相互排斥的选择，只允许用户从单选按钮组中选择一个。所谓单选按钮组，是指由两个或两个以上的同一名称的按钮组成的一组按钮，如图所示，用户在“性别”选项中只能选择“帅哥”或“美女”中的一个，不能不选或两个都选。 插入单选按钮的方法与插入其它表单对象的方法类似，在此不再叙述；单选按钮的属性面板如图所示。,名称：指定单选按钮的名称。需要注意的是，一组单选按钮的名称必须相同，否则计算机会认为是两组单选按钮。例如，在图5-5中，如果将“帅哥”前面的单选框和“美
12、女”前面的单选框设为不同的名称，在浏览网页时，用户就可以同时选定“帅哥”和“美女”，这显然与设置的单选框的目的不同。 选定值：设置选定该单选框向服务器中发送的值。在图5-5中，尽管在网页中显示的是“帅哥”，但为其设置的值是“男”，则向服务器中传输的是“男”。 初始状态：确定单选框的初始状态。 类：为单选框指定CSS样式。,5.2 表单,5.2.2 插入表单对象,5、添加下位列表或菜单 使用单选按钮或复选按钮时，随着选项的增多，占据的屏幕空间会增大，这时可以使用下拉列表或菜单，用户可以从中选择一个或多个选项。添加下拉列表或菜单的方法与其它表单的插入方法类似，其属性面板如图所示。,“列表/菜单”，
13、为“列表/菜单”指定名称。 类型：指定插入的是“菜单”还是“列表”，其中菜单是在多个选项中选择一项，而列表可以选择多项。 高度：当选择列表类型时，此项被激活，允许用户指定列表的高度。 选定范围：选中此项，用户可以从列表中选择多个项。 列表值：单击时打开如图5-7的“列表值”对话框，可通过它向表单中添加选项。 类：为列表或菜单指定CSS样式。 初始化时选定：设置列表中默认选定的菜单项。,5.2 表单,5.2.2 插入表单对象,5、添加下位列表或菜单,5.2 表单,5.2.2 插入表单对象,6、添加跳转菜单 跳转菜单提供了一个下拉列表，单击其中一项可以跳转到相应的网页或站点，一般用于当前站点的导航
14、。 插入跳转菜单的方法为：将光标放在插入的位置，然后单击“插入”面板中的“表单”类别里的“跳转菜单”按钮，弹出“插入跳转菜单”对话框，如图所示。,在“文本”中输入菜单项的名称，在“选择时，转到URL”中输入选择该菜单项要跳转的地址，单击确定完成插入操作。,5.2 表单,5.2.2 插入表单对象,7、其它表单对象 除以上表单对象外，Dreamweaver还提供了文件域、图像域、隐藏域等表单对象，其中文件域允许用户把计算机上的文件作为表单对象上传给服务器，但必须有服务器端脚本去处理提交的文件；图像域可以在表单中插入一个图像，以生成图形化按钮，如“提交”或“重置”按钮；隐藏域用于存储用户输入信息，在
15、该用户下次访问此站点时使用这些数据。这些表单对象的操作方法与上述六个表单对象的操作方法大同小异，由于篇幅有限，在此不再叙述。,5.2.3 表单实例,5.2 表单,下面通过一个实例讲解插入表单的一般过程。在网页中插入表单对象，考虑网站布局的需要，一般首先插入表单域，然后插入表格以约束各表单元素的位置，最后在表格的各单元格之间再插入表单对象。设计完成后的网页如图所示：,5.2.3 表单实例,5.2 表单,至此，网页设计完成，保存文件后浏览网页，重点查看密码域输入的是否为密码形式、“性别”选项中是否允许多选、“重填”按钮是否可以使表单数据重置等内容。,5.3 搭建动态网站设计环境,5.3.1 动态网
16、站设计简介,我们可以将网站分为静态网站和动态网站。静态网站的内容是固定不变的，它不能实现访问者与网站的交互，如果修改网站的内容必须修改网站的HTML代码。随着网站信息的不断增加，其维护工作量大得出乎想象。动态网站是具有交互性的网站，能够实现网站的自动更新。 在制作动态网站过程中，网站美工利用可视化的网站设计与制作工具（如Dreamweaver）制作前台，由编程人员编制网站后台程序。由于一套程序可以供多个相同类别的网站使用，所以在网站制作单位，虽然编写程序需要大量的工作，但由于是一次性工作（甚至可以直接购卖网站后台代码或直接下载免费的代码，这是一些中小网站制作公司经常采用的方法），因此网站设计的主要任务是网页的前台设计，大量的工作是网站美工完成的。 常用的后台编制语言包括ASP、JSP、PHP、ASP.net。由于ASP具有功能强、学习简单等特点，在网站开发中一直处于统治地位。据统计，目前80%以上的中小企业网站制作均采用ASP技术，本章重点介绍
