第1章 补充案例
案例1-1表格标记
一、案例描述
1、考核知识点
    名称：表格标记
    编号：028001005
2、练习目标
掌握实际开发中表格基本实现和使用。
3、需求分析
  在制作网页时，为了使网页中的数据能够有条理地显示，可以使用表格对网页进行规划。在Word文档中，要创建表格只需要插入表格，而在HTML网页中要想创建表格，需要使用相
关的表格标记才能创建表格。
4、设计思路（实现原理）
1）创建htmlDemo1.html页面，
2）在htmlDemo1.html中依照table表格的基本格式编写表格信息
      3）通过浏览器直接打开htmlDemo1.html页面，展现页面编写的表格信息。
二、案例实现
编写htmlDemo1.html，其代码如下：
<title>表格标记</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>用户名</th>
            <th>用户地址</th>
            <th></th>
        </tr>
        <tr>
            <td>张三</td>
            <td>北京</td>
            <td>137777777</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东京</td>
            <td>157777777</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>南京</td>
            <td>177777777</td>
        </tr>
    </table>
</body>
到htmlDemo1.html文件存放位置，直接用浏览器打开（或者在Eclipse上右键文件htmlDemo1.html→Open With→Web Broswer）,即可在浏览器上显示表格信息,如下示例:
三、案例总结
1.需要掌握表格基本编写格式：
<table>
    <tr>
          <td>单元格内的文字</td>
    </tr>
</table>
2.本案例中还使用了表格中的<th>标记,该标记自动将表格内容加粗居中显示,常常用户设置表格头。
同时，在学习表格标记的时候还应该熟悉其常用属性，比如border（表格边框）、colspan（列合并）、rowspan（行合并）等等。
案例1-2  表单标记
一、案例描述
1、考核知识点
名称：表单标记
编号：028001006
2、练习目标
掌握表单标记<form>及其相关标记的常用方法。
3、需求分析
表单就是在网页上用于输入信息的区域，它的主要功能是收集信息，并将这些信息传递给后台服务器。其实表单在互联网上随处可见，例如注册页面中的注册信息、后台管理员商品添加信息等等，本案例将模拟商品添加的表单编写。
设计思路（实现原理）
1）创建htmlDemo2.html页面，
2）在htmlDemo2.html中依照表单的基本格式编写新增表单信息
      3）通过浏览器直接打开htmlDemo2.html页面，展现页面编写的表单信息。
二、案例实现   
编写htmlDemo2.html，其代码如下：
<body>
    <form action="#" method="post" enctype="multipart/form-data">
        <table width="600px">
                  <tr>
                      <td>商品编号</td>
                      <td><input type="text" name="pId" /></td>
                  </tr>
                  <tr>
                      <td>商品名称</td>
                      <td><input type="text" name="pName" /></td>
                  </tr>
                  <tr>
                      <td>商品价格</td>
                      <td><input type="text" name="pPrice" /></td>
                  </tr>
                  <tr>
                      <td>商品图片</td>
                      <td><input type="file" name="PPic"></td>
                  </tr>
                  <tr>
                      <td>商品描述</td>
                      <td><textarea rows="3" cols="18"></textarea></td>
                  </tr>
              </table>
             
    </form>
</body>
到htmlDemo2.html文件存放位置，直接用浏览器打开（或者在Eclipse上右键文件htmlDemo2.html→Open With→Web Broswer）,即可在浏览器上显示表格信息,如下示例:
三、案例总结
1.需要掌握表单基本语法：
<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>
同时，参考上述表单案例，可以看出，表单标记<form>中多数会嵌入<table>表单标记（用户格式化填写信息）。
2.本案例商品添加使用了商品图片上传控件，所以在form表单提交的时候，enctype 类型取值必须如下：enctype="multipart/form-data"。
案例1-3  CSS选择器和常用属性
一、案例描述
1、考核知识点
名称：CSS选择器和常用属性
编号：028001011
2、练习目标
熟悉CSS选择器和常用属性的使用
3、需求分析
查看案例1（即htmlDemo1.html）页面，可以在浏览器上看出，使用<th>标签内的内容会居中显示，但是<td>标签内的内容都是左对齐，显得不协调。所以本案例将练习如何使用CSS选择器和常用属性将案例1表格内容居中以及其他常用样式操作。
4、设计思路（实现原理）
1）创建htmlDemo3.html页面，可以参考htmlDemo1的部分代码，
2）在htmlDemo3.html中对<td>标签内容居中修改
3）通过浏览器直接打开htmlDemo3.html页面，展现页面编写的表格信息样式。
二、案例实现
编写htmlDemo3.html，其代码如下：
<head>
<style type="text/css">
    tr {
        text-align: center;
    }
</style>
</head>
<body>
    <table border="1" >
        <tr>
            <th>用户名</th>
            <th>用户地址</th>
            <th></th>
        </tr>
        <tr bgcolor="yellow">
            <td>张三</td>
            <td>北京</td>
            <td>137777777</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东京</td>
            <td>157777777</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>南京</td>
            <td>177777777</td>
        </tr>
    </table>
</body>
到htmlDemo3.html文件存放位置，直接用浏览器打开（或者在Eclipse上右键文件htmlDemo3.html→Open With→Web Broswer）,即可在浏览器上显示表格信息,如下示例:
三、案例总结
在本案例中，分别使用了行内式和嵌入式两种方式来分别控制所有<td>表格内容居中以及第一行<td>表格内容背景颜，通过案例的学习更应该熟悉css样式的选择和常用属性的使用方法。
案例1-4 JavaScript的使用
html网页设计 table
一、案例描述
1、考核知识点
    名称：JavaScript的使用
    编号：028001014
2、练习目标
掌握JavaScript函数的基本使用。
3、需求分析
    JavaScript是Web中一种功能强大的脚本语言，被设计为向 HTML 页面增加交互性，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。本案例将模拟练习页面信息的删除显示控制。
4、设计思路（实现原理）
1）创建jsDemo4.html页面
2）在jsDemo4.html中添加js事件
3）通过浏览器直接打开jsDemo4.html页面，展现页面编写的信息，并练习点击按钮进行事件触发效果展示。
二、案例实现
    创建类jsDemo4，代码如下：
<body>
    <table>
        <tr>
            <td id="content" >苹果手机</td>
            <td><input type="button" onclick="hidden();" value="删除"/></td>
            <td><input type="button" onclick="show();" value="恢复"/></td>
        </tr>
    </table>
    <script type="text/javascript">
        function hidden(){
            if(confirm('确实要删除吗?')) {
                var content = ElementById("content");
                content.style.visibility= "hidden";
            }
        }
        function show(){
            var content = ElementById("content");
            content.style.visibility= "visible";
        }
    </script>
</body>
到jsDemo4.html文件存放位置，直接用浏览器打开（或者在Eclipse上右键文件jsDemo4.html→Open With→Web Broswer）,即可在浏览器上显示表格信息,如下示例:
然后点击删除按钮，效果如下：
点击弹出框的取消按钮，页面不变，当点击确定按钮后，页面效果如下：
然后在点击页面上的恢复按钮，页面效果如下：
三、案例总结
1、本案例中，展示了JavaScript函数的基本定义、引入和调用，并且使用了window对象的确认框confirm()；
2、同时需要掌握JavaScript中还有很多常用的事件类型以及外链式引入JavaScript函数的方法。
<script type="text/javascript" src="JS文件的路径"></script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。