A.1 实验1：页面头和页面脚

东浔

已于 2022-03-05 21:55:37 修改

阅读量587

点赞数 1

分类专栏： Web应用开发文章标签： php css html web

于 2022-03-03 16:17:03 首次发布

本文链接：https://blog.csdn.net/m0_51039351/article/details/123256715

版权

Web应用开发专栏收录该内容

7 篇文章 10 订阅

订阅专栏

A.1 实验1：页面头和页面脚

A.1.1 目的与要求
A.1.2 实验内容

本实验创建页面头模块文件 header.php和页面脚模块文件 footer.php。这两个模块文件都保存于教务选课系统项目xk中的“源文件”结点。

A.1.1 目的与要求

(1)熟悉PHP运行环境XAMPP，掌握基本的操作方法。
(2)熟悉PHP开发环境NetBeans IDE，掌握常用的操作方法。
(3)熟悉和掌握HTML标签的使用。
(4)熟悉和掌握CSS样式与样式表的定义和应用。

A.1.2 实验内容

(1)创建PHP文件 headerphp，作为能够呈现页面头的模块文件。该页面头的左边是系统的logo图标，中间是系统的欢迎信息，右边显示日期和时间。这里，日期和时间可以都先制作成静态的文本，在后面的实验中再加以改进。

header.php（无图片）

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <center> <!--table居中-->
        <table
            style='border-collapse: collapse'>
            <col style='background-color: blue'/>
            <col style='background-color: white'/>
            <col style='background-color: lightgray'/>
            <col style='background-color: lightgray'/>
            <col style='background-color: lightgray'/>
            <tr>
                <td rowspan='3' font style='color: white; font-size: 60px'>选</td>
                <td rowspan='3' font style='color: blue; font-size: 60px'>课</td>
                <td rowspan='3' font style='font-family: 楷体; font-size: 40px; font-weight: bold'>&#12288&#12288欢迎使用&#12288</td>
                <td rowspan='3' font style='font-family: 宋体; font-size: 40px; font-weight: bold'>教学选课系统！&#12288&#12288&#12288&#12288</td>
                <td style='text-align: right'>2016年11月01日</td>                
            </tr>
            <tr>
                <td style='text-align: right'>星期五</td>
            </tr>
            <tr>
                <td style='text-align: right'>上午 10:26:38</td>
            </tr>
        </table>
    </center>
    </body>
</html>

header（无图片）
请添加图片描述
header.php（有图片）

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <center> <!--table居中-->
        <table
            style='border-collapse: collapse'>
            <!--
            <col style='background-color: blue'/>
            <col style='background-color: white'/>
            -->
            <col />
            <col style='background-color: lightgray'/>
            <col style='background-color: lightgray'/>
            <col style='background-color: lightgray'/>
            <tr>
                <!--
                <td rowspan='3' font style='color: white; font-size: 60px'>选</td>
                <td rowspan='3' font style='color: blue; font-size: 60px'>课</td>
                -->
                <td rowspan='3'><img src='img/logo.png'/></td>
                <td rowspan='3' font style='font-family: 楷体; font-size: 40px; font-weight: bold'>&#12288&#12288欢迎使用&#12288</td>
                <td rowspan='3' font style='font-family: 宋体; font-size: 40px; font-weight: bold'>教学选课系统！&#12288&#12288&#12288&#12288</td>
                <td style='text-align: right'>2016年11月01日</td>                
            </tr>
            <tr>
                <td style='text-align: right'>星期五</td>
            </tr>
            <tr>
                <td style='text-align: right'>上午 10:26:38</td>
            </tr>
        </table>
    </center>
    </body>
</html>

header（有图片）
请添加图片描述
header.php（当前时间）

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <center> <!--table居中-->
        <?php
            date_default_timezone_set('PRC');
            $date1=date("Y年m月d日");
            $date2=date("H:i:s");
            $date3=array("日","一","二","三","四","五","六");
        ?>
        <table
            style='border-collapse: collapse'>
            <!--
            <col style='background-color: blue'/>
            <col style='background-color: white'/>
            -->
            <col />
            <col style='background-color: lightgray'/>
            <col style='background-color: lightgray'/>
            <col style='background-color: lightgray'/>
            <tr>
                <!--
                <td rowspan='3' font style='color: white; font-size: 60px'>选</td>
                <td rowspan='3' font style='color: blue; font-size: 60px'>课</td>
                -->
                <td rowspan='3'><img src='img/logo.png'/></td>
                <td rowspan='3' font style='font-family: 楷体; font-size: 40px; font-weight: bold'>&#12288&#12288欢迎使用&#12288</td>
                <td rowspan='3' font style='font-family: 宋体; font-size: 40px; font-weight: bold'>教学选课系统！&#12288&#12288&#12288&#12288</td>
                <td style='text-align: right'><?php echo $date1; ?></td>                
            </tr>
            <tr>
                <td style='text-align: right'><?php echo "星期".$date3[date("w")]; ?></td>
            </tr>
            <tr>
                <td style='text-align: right'><?php echo (date('a')==='am'?'上午 ':'下午 '). $date2; ?></td>
            </tr>
        </table>
    </center>
    </body>
</html>

header（当前时间）
请添加图片描述

(2)创建PHP文件footer.php，作为能够呈现页面脚的模块文件。除了一条水平线段，该页面脚包括版权、单位名称、联系电话和电子邮件地址等信息。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <hr width='700'>
        <p style = 'text-align:center'}>Copyright©2016  &#12288首都经济贸易大学 信息学院 &#12288电话：1234567 &#12288邮箱：abcde@cued.edu.cn</p>
    </body>
</html>