網頁設計初學者可制作的簡單網頁——我的第二篇博客
- 歡迎來到我的博客
- 前言
- 效果
- 設計
- 簡要介紹制作流程
- 第一步——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/qita/205342.html
標籤：AI