网页设计初学者可制作的简单网页——我的第二篇博客

最新推荐文章于 2024-06-18 10:35:53 发布

YYYYYYYYZ8

最新推荐文章于 2024-06-18 10:35:53 发布

阅读量1.2w

点赞数 61

分类专栏：网页设计文章标签： javascript css html

本文链接：https://blog.csdn.net/YYYYYYYYZ8/article/details/109496411

版权

网页设计专栏收录该内容

1 篇文章 2 订阅

订阅专栏

网页设计初学者可制作的简单网页——我的第二篇博客

欢迎来到我的博客

欢迎来到我的博客

我是大一的新生，这是我的第二篇博客。这个网页是我参加学校网页设计大赛的参赛作品，发布这篇博客，是希望能够让和我一样的初学者有所参考，并且接受各位大佬的建议。

前言

先说本人对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的应用也有所感悟，心里对网页的设计的思路更加清晰。

YYYYYYYYZ8

关注

61
点赞
踩
273

收藏

觉得还不错? 一键收藏
10
评论
网页设计初学者可制作的简单网页——我的第二篇博客

网页设计初学者可制作的简单网页——我的第二篇博客欢迎来到我的博客前言设计制作欢迎来到我的博客我是大一的新生，这是我的第二篇博客。这个网页是我参加学校网页设计大赛的参赛作品，发布这篇博客，是希望能够让和我一样的初学者有所参考，并且接受各位大佬的建议。前言先说本人对html，css，js的理解：html：文字图画等内容。css：动画，排版（即样式）。js：按钮等控制。简要来说就是html负责内容，css负责样式，js负责控制。设计我们大赛的主题是传统文化，因此我选择了国画作为主要呈
复制链接

扫一扫

专栏目录