引言
设计“厦门大学百年校庆”网站，包含：
- 照片欣赏
- 学校介绍
- 通知公告
- 办学历程
可以参考已有的厦门大学95周年校庆、厦门大学100周年校庆
环境
- html6
- css
- javascript
- Dreamweaver2020
具体过程
-
新建一个站点
-
建立主页和对应的css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul class="menu">
<a href="home.html" target="frame"><li class="menu-item">主页</li></a>
<a href="introduce.html" target="frame"><li class="menu-item">学校介绍</li></a>
<a href="announcement.html" target="frame"><li class="menu-item">通知公告</li></a>
<a href="history.html" target="frame"><li class="menu-item">办学历程</li></a>
</ul>
</nav>
<div class="main">
<iframe src="home.html" name="frame"></iframe>
</div></body>
</html>
@charset "utf-8";
body{
padding: 0;
margin: 0;
display: block;
overflow: hidden;
}
/**********************************导航栏***********************************/
nav{
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100%;
padding: 0;
background-color: #FFFFFF77;
z-index: 1;
}
.menu{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.menu-item{
margin: 8px;
padding: 10px 0;
background-color: #AC1400;
color: white;
font-weight: bolder;
}
.menu-item:hover{
margin-top: 8px;
margin-bottom: 8px;
margin-left: 0px;
margin-right: 0px;
padding: 10px 0;
background-color: #CE1700;
color: white;
font-weight: bolder;
}
/**********************************主体***********************************/
.main{
position: fixed;
left: 0;
right: 0;
height: 100%;
background-color:#FFFFFF;
border-width: 0;
width: auto;
}
.main iframe{
height: 100%;
width: 100%;
border-width: 0;
scrolling: no;
}
a{
color: #000000;
text-decoration: none;
}
a:hover{
color: #000000;
text-decoration: none;
}
用伪类：hover设置鼠标悬停效果
3.照片展示页，鼠标悬停在圆点上可以切换背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<h1> 厦门大学百年校庆</h1>
<h3>Xiamen University Centenary Celebration</h3>
</div>
<div class="banner">
<div class="banner-view1">
<ul class="banner-pic1">
<li class="pic00 pic111"></li>
<li class="pic00 pic222"></li>
<li class="pic00 pic333"></li>
<li class="pic00 pic444"></li>
<li class="pic00 pic555"></li>
<li class="pic00 pic666"></li>
</ul>
</div>
<ul class="indicators">
<li class="indicator"></li>
<li class="indicator"></li>
<li class="indicator"></li>
<li class="indicator"></li>
<li class="indicator"></li>
<li class="indicator"></li>
</ul>
</div>
<script>
var oBall = document.getElementsByClassName("indicator"),
oBannerPic1 = document.getElementsByClassName("banner-pic1")[0];
oLis = oBannerPic1.getElementsByTagName("li"),
length = oLis.length;
var className = [
"pic111",
"pic222",
"pic333",
"pic444",
"pic555",
"pic666"
];
i = 1; //串起整个思路的全局变量
oLis[0].style.opacity = `1`;
oBall[0].style.backgroundColor = '#AC1400'; //默认最下面的第一个小球变色
change3();
function change3() { //淡入淡出轮播下方小球方法
for(let j = 0; j<6; j++){
oBall[j].onmouseenter = function () {
i = j+1;
oLis[j].style.opacity = `1`;
for (let t = 0; t < 6; t++ ) {
if(t+1 === i){
oBall[t].style.backgroundColor = '#AC1400';
oLis[t].style.opacity = `1`;
continue;
}
oBall[t].style.backgroundColor = '#FFFFFF77';
oLis[t].style.opacity = '0';
}
}
}
}
</script>
</body>
</html>
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body{
overflow: hidden;
position: fixed;
width: 100%;
}
.box{
position: fixed;
left: 50%;
top: 40%;
transform: translate(-50%,-50%);
width: 500px;
height: 100px;
background-color: #FFFFFF77;
padding: 20px;
text-align: center;
font-size: 40px;
font-weight: bolder;
color:#AC1400;
z-index: 1;
}
h1{
font-size: 50px;
letter-spacing: 5px;
}
h3{
font-size: 21px;
}
ul li {
list-style: none;
}
.banner {
width: 100%;
height: 100%;
position:fixed;
top: 0;
}
.banner-view1{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.pic00 {
position: absolute;
width: 100%;
height: 100%;
background-size:cover;
opacity: 0;
transition: opacity 0.6s;
}
.pic111 {
background-image: url(../images/slides/1.jpg);
}
.pic222 {
background-image: url(../images/slides/2.jpg);
}
.pic333 {
background-image: url(../images/slides/3.jpg);
}
.pic444 {
background-image: url(../images/slides/4.jpg);
}
.pic555 {
background-image: url(../images/slides/5.jpg);
}
.pic666 {
background-image: url(../images/slides/6.jpg);
}
.indicators {
width: 300px;
height: 30px;
position: absolute;
top: 60%;
left: calc(50% - 150px);
display: flex;
justify-content: space-around;
align-items: center;
}
.indicator {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #FFFFFF77;
cursor: pointer;
}
-
学校介绍界面
这里我使用了统一的模板page，以提高效率、方便维护
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>无标题文档</title>
<!-- TemplateEndEditable -->
<link href="../css/page.css" rel="stylesheet" type="text/css">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div class="main"><!-- TemplateBeginEditable name="内容" -->内容<!-- TemplateEndEditable -->
</div>
</body>
</html>
-
通知公告界面image.png
这里使用了滚动界面
<!doctype html>
<html><!-- InstanceBegin template="/Templates/page.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>无标题文档</title>
<style type="text/css">
.item{
width: 300px;
height: 150px;
margin: 10px;
background-color: #FFFFFF77;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
box-sizing: border-box;
float: left;
}
h3{
font-size: 20px;
line-height: 10px;
}
p{
font-size: 13px;
line-height: 20px;
}
</style>
<!-- InstanceEndEditable -->
<link href="css/page.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="main"><!-- InstanceBeginEditable name="内容" -->
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<div class="item">
<h3>标题标题标题</h3>
<p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
</div>
<!-- InstanceEndEditable -->
</div>
</body>
<!-- InstanceEnd --></html>
此页特有的样式直接写在页面里
设计理念与指导原则
- 红白配色暗合了厦大的建筑风格，古朴而庄重
- 排版使用了简洁现代的风格
- 半透明的内容框使页面更有整体感
- 摒弃了传统的上方导航栏和滚动页面的方式，使用了左边导航栏，使得右边页面滚动不破坏整体页面的结构，给人一种ppt的观感
- 主体页面中的边距使得元素之间不会很拥挤，给人舒适感。
- 全屏的背景图片丰富了观感、偏暗的色调又不影响文字阅读
- 导航栏的鼠标悬停效果提供了反馈，交互更加友好
