网页设计初学者可制作的简单网页——我的第二篇博客
- 欢迎来到我的博客
-
- 前言
- 效果
- 设计
- 简要介绍制作流程
-
- 第一步——html内容
- 第二步——css排版
- 第三步——js控制
- 第四步——润色网页
- 心得
欢迎来到我的博客
我是大一的新生，这是我的第二篇博客。这个网页是我参加学校网页设计大赛的参赛作品，发布这篇博客，是希望能够让和我一样的初学者有所参考，并且接受各位大佬的建议。
前言
先说本人对html，css，js的理解：
html：文字图画等内容。
css：动画，排版（即样式）。
js：按钮等控制。
简要来说就是html负责内容，css负责样式，js负责控制。
效果
其余的形式类似就暂不展示了
设计
设计理念：
本小组网页设计主题为“画见中国”，希望借此能够简单地了解中国画，通过中国画加深对中国优秀传统文化的认识。
主要选择了起源、流派、代表画家、代表画作这几个方面进行简要介绍。为了更好地契合主题，网页中的字体主要为毛笔字体，而且也选择了毛笔边框，另外，我们还在网页上加入了古风纯音乐，都是为了让整个页面展现古风的风格。
我们大赛的主题是传统文化，因此我选择了国画作为主要呈现的内容，因为国画更有表现力，设计难度也相对容易。
本人没有什么艺术细胞，所以就提了个别建议（如背景是经典画作《清明上河图》),设计的样式由同组同学负责。最初用PPT设计图案如下:
简要介绍制作流程
由于该作品要参与比赛，所以就不发源代码了，在这里简要介绍下制作的方法
第一步——html内容
首先当然是把需要的内容（如：背景图片，按钮图片…)放入css中。如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>广州大学对不队参赛作品</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="img/import.jpg" class="img1"/>
<img src="img/button1.png" onclick="javascript:showcontent(1);"/>
<img src="img/button2.png" onclick="javascript:showcontent(2);"/>
<img src="img/button3.png" onclick="javascript:showcontent(3);"/>
<img src="img/button6.png" onclick="javascript:showcontent(4);"/>
<img src="img/button4.png" onclick="javascript:showcontent(0);"/>
<img src="img/button5.png"/>
<img src="img/title.png"/>
<img src="img/c1.1.png" id="contentimg"/>
<img src="img/left.png" id="left" onclick="javascript:movelr(0);"/>
<img src="img/right.png" id="right" onclick="javascript:movelr(1);"/>
<img src="img/nosound.png" id="sound" onclick="Play()"/>
</body>
<script src="test.js" type="text/javascript"></script>
</html>
可以看到我们把需要的图片都放入了html里。
第二步——css排版
现在我们已经向html塞了内容，接下来我们就要通过css对文章进行排版。这里我会进行一些演示。
先看向我们的设计图,我们可以把网页分为以下几个部分。
这意味这我们需要在这里创建几个盒子，用于存放我们的图片内容。
在这我们用< div >< /div >制作几个盒子，将这些图片存放在里面并给这些盒子定义类或ID。 如：
<div class="buttondiv1">
<img src="img/button1.png" />
<img src="img/button2.png" />
<img src="img/button3.png" />
<img src="img/button6.png" />
</div>
然后在css里定义盒子的大、位置，图片的大小、位置。（为使网页能在不同分辨率可运行，我们的大小用百分比来表示） 如:
.buttondiv1
{
width: 65%;
position: absolute;
top: 0px;
left: 0px;
z-index:10;
height:15%;
}
.buttondiv1 img
{
width: 20%;
height:90%;
opacity:0.6;
}
这里有三个知识点:
- 绝对定位中top/bottom和left/right两个中必须有一个这样才能确定定位的位置
- width，height属性中百分比指的是在自己所在盒子里的相对宽高。（body也算是一个盒子）
- z-index的作用是设置所在层，保证其不被覆盖。
安排完位置后，就得开始做一些动画效果。
这里我们希望清明上河图作为背景在后方滚动。所以我们用关键帧数的方式，做了循环的动画。
.div1 .img1{
float: left;
opacity:0.7;
animation-name: move;
animation-duration: 700s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes move {
0%{
transform: translateX(0px);
}
50%{
transform: translateX(-88%);
}
100%{
transform: translateX(0px);
}
}
这样就可以实现清明上河图作为背景滚动的效果。(应设置好图像的大小）
设置按钮的效果
.buttondiv1 img:hover
{
opacity:1;
cursor:pointer;
}
这里实现了鼠标放在按钮上的时候，按钮颜色变深。（通过改变透明度）当然先前要设置好较低的透明度。
做好这些后我们的网页的雏形就有了，之后就是用js实现按钮的效果。
第三步——js控制
首先要提的就是，html加载js的时候，我将js放在了最后< /html >前，这是为了让网页先加载好页面的效果，然后再加载js，防止网页迟迟没加载好的情况出现。
先定义在js中定义一个函数
function showcontent(i) {
var titleobj=document.getElementsByClassName("title")[0];
var contentobj=document.getElementById("contentimg");
var contentdiv=document.getElementsByClassName("contents")[0];
var move=document.getElementsByClassName("move")[0];
switch (i)
{
case 0:
move.style.display="none";
contentdiv.style.display="none";
titleobj.style.display="block";
break;
}
这里switch中我只演示一个，其中的意思是如果i是0的话，左右方向键move不显示，存放图片内容的div不显示，主题的title显示。
再配合html中
<img src="img/button4.png" onclick="javascript:showcontent(0);"/>
就可以实现主页按钮的作用。
这里有三个知识点
- js中调用类，应该用：
var titleobj=document.getElementsByClassName("title")[0];
(类不唯一，用数组的形式)
- js中调用ID，应该用：
var contentobj=document.getElementById("contentimg");
(ID是唯一的)
- html调用js的方式
<img src="img/button4.png" onclick="javascript:showcontent(0);"/>
(方式不唯一)
第四步——润色网页
到现在大致的网页已经做完了，为保证网页的精美，我们可以适当添加一些功能（如音乐）。
这里我们添加了音乐：
html：
<div class="mysound">
<img src="img/nosound.png" id="sound" onclick="Play()"/>
<audio controls="controls" id="myaudio" src="music/music1.mp3" loop="loop" hidden="true" preload="auto"></audio>
</div>
js：
function Play()
{
var myAuto = document.getElementById('myaudio');
if (myAuto.paused)
{
myAuto.play();
document.getElementById('sound').src="img/sound.png";
}
else
{
myAuto.pause();
document.getElementById('sound').src="img/nosound.png";
}
}
（再用css进行排版即可）
除此之外我们还添加了画作，完善网页内容的完整性，这里就不做过多的介绍。
心得
通过这次网页设计，我对于绝对定位的使用更加熟悉，js的应用也有所感悟，心里对网页的设计的思路更加清晰。
