设计《CERNET西南地区年会》网站

1. 文档结构创建。启动程序，创建HTML文档，在首行插入注释语句：“自己的姓名/学号”；保存文件，输入文件名为prj4-1.html。

2. 页面内容设计

1) 页面内容规划。在body标记中插入相关div，形成div嵌套结构，代码如下：

<div id="container">

         <div id="header"></div>

<div id="nav"></div>

<div id="mainbody">

          <div id="main"></div>

          <div id="rightbar"></div>

</div>

<div id="footer"></div>

</div>

图4-1 CERNET西南地区年会

2) 在id为nav的标记中，插入无序列表，设计导航菜单。代码如下：

<div id="nav">

       <ul>

         <li><a href="#">首    页</a></li>

         <li><a href="#">会议介绍</a></li>

<li><a href="#">雅安介绍</a></li>

<li><a href="#">日程安排</a></li>

<li><a href="#">大会报告</a></li>

<li><a href="#">宾馆交通</a></li>

<li><a href="#">资料下载</a></li>

<li><a href="#">会议注册</a></li>

<li><a href="#">联系我们</a></li>

      </ul>

</div>

3) 在id为main的标记中插入相应的段落，段落内容如下：

会议概要

CERNET西南地区教育信息化技术研讨大会

时间：2023年11月22日至11月25日

报道时间：2023年11月22日

地点：四川雅安市

会议主题：先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学表格、技术应用研讨及工作交流等。

主办：CERNET西南地区网络中心、CERNET四川省网络中心、信息技术推动教育教学变革、技术应用研讨及工作交流等

承办：四川农业大学

会议介绍

2023年11月22-25日，由CERNET西南地区网络中心、CERNET四川省网络中心、CERNET四川省网络中心及四川省教育技术与装备协会联合主办，四川农业大学承办的中国教育和科研计算机网络（CERNET）西南地区教育信息化技术研讨会在美丽的四川省雅安市召开。研讨会主要议题包括先进网络技术、信息化规划与学校信息化实践、信息化技术推动教育教学变革、技术应用研讨及工作交流等。会议将邀请CERNET专家、教育技术专家、部分国内高校及企业专家报告。

“会议概要”、“会议介绍”为标题，统一应用.bt样式，格式如下：

.bt{font-size:28px; padding:2px 16px; font-weight:bold;}

4) 在id为rightbar的标记中，分别插入id为rightbar_up、rightbar_down的2个子div。

l 在id为rightbar_up的div中，插入段落p，内容为“会议动态”，并应用.bt样式。

l 在id为rightbar_down的div中，插入3行3列的表格，表格中第2列中分别插入如下内容：雅安市天气预报、在线注册、修改信息。将“雅安市天气预报”设置为超链接，格式如下：

<a href="http://www.weather.com.cn/weather/101271701.shtml" target="_blank">  雅安市天气预报</a>

l 在id为rightbar_down的div中，插入段落和浮动框架。代码格式如下：

<p id="bt">宾馆地图</p>

<iframe id="baidu" height="180px" width="200px" frameBorder="0" scrolling="no" src="http://map.baidu.com/?newmap=1&ie=utf-8&s=s%26wd%3D%20%20%E5%9B%9B%E5%B7%9D%E5%86%9C%E4%B8%9A%E5%A4%A7%E5%AD%A6"></iframe>

5) 在id为footer的标记中，插入1个p标记。内容如下：

<p>©Copyright CERNET西南地区网络中心。Designed By <a href="http://www.bidcenter.com.cn/newssearchyz-20375491.html">四川农业大学网络信息中心</a></p>

6) 完成代码设计后，再次保存网页文件。通过浏览器查看页面效果（此处粘贴代码和网页截图）。

3. 表现设计(可以自己微调)

在style标记中分别定义div、p、ul、li、a等标记的样式，其样式要求如下所示：

1) 定义最外层div样式：#container样式为边界为上下0、左右自动，宽度100%。

2) 定义头部div样式：#header样式为内容水平居中、宽度100%、高度243px、背景颜色#7D26A8、图像header.jpg(请自己网络上找合适的图片)、图像位置居中顶部、不重复。

3) 定义导航div样式：#nav样式为宽度100%、高度40px、颜色白色、行高40px、内容水平居中、背景颜色#660066。

4) 定义ul样式：ul标记样式边界为上下0、左右自动（不设置头部和导航条之间会有空白带）、宽度950px、列表样式类型none、内容水平居中。

用无序列表实现水平导航菜单,关键有两点是消除无序列表前面的符号、将默认垂直排列的菜单转换成水平排列的菜单：

l 消除列表项前面的符号，使用列表样式ul{list-style-type:none;}

l 实现菜单水平导航，使用列表项样式li{float:left;}

注意：实现导航菜单均匀现实有两种方法：一是通过设置列表项的宽度、高度和文本居中实现，如“width：100px；text-align：center；font-size：16px；”；二是通过设置每个列表项的边界（margin：0 20px）来实现，在样式中追加属性值对（margin：0px 20px）。

5) 定义ul中的li样式，li样式为边界为上下0、左右自动、向左浮动（实现菜单水平导航）、文本居中对齐、字体大小16px、宽度5.5em、填充上下2px、左右8px。

6) 定义ul中的a:link、a:visited、a:active样式：a:link、a:visited、a:active样式为颜色为白色、字符装饰无。

7) 定义ul中的a:hover样式：a:hover样式为背景颜色#9933FF、文本居中对齐、显示方式为块方式(display:block;)。

8) 定义主体部分div样式：#mainbody样式为背景颜色#FFFFFF、填充上下0、左右自动、边界上下0、左右自动、宽度1001px。

9) 定义主体左侧部分div样式：#main样式为宽度60%、图层向左浮动、填充上下0、左右30px、边界为上下0、左右自动。

10) 定义主体右侧部分div样式：#rightbar样式为宽度30%、图层向右浮动；

11) 定义版权div样式：#footer样式为背景颜色#FFFFFF、清除图层左右浮动(clear:both;)、文本居中对齐、字体大小16px、行高40px。

12) 保存并查看网页。

【实例截图】

【核心代码】

.
├── 设计《CERNET西南地区年会》网站.zip
└── 新建文件夹 (2)
    ├── image
    │   └── W020230926544160371458.webp
    ├── prj4-1.html
    └── style.css

2 directories, 4 files