網頁設計初學者可制作的簡單網頁——我的第二篇博客

歡迎來到我的博客
- 前言
- 效果
- 設計
- 簡要介紹制作流程
- - 第一步——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;
	float: left;
	}
   @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的應用也有所感悟，心里對網頁的設計的思路更加清晰，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/206504.html

標籤：其他

上一篇：《你不知道的JavaScript上卷》知識點整理與讀書筆記

下一篇：JavaScript 基本資料型別