整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
情介紹
二、網(wǎng)站描述
網(wǎng)站介紹
四、網(wǎng)站演示
TML結(jié)構(gòu)代碼
如何讓學(xué)習(xí)不再盲目
七、更多干貨
題目
HTML靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)作業(yè)使用dreamweaver制作，采用DIV+CSS布局，共有多個(gè)頁(yè)面，首頁(yè)使用CSS排版比較豐富，色彩鮮明有活力。頂部導(dǎo)航及底部區(qū)域背景色為100%寬度，主體內(nèi)容區(qū)域?qū)挾?/p>
一套優(yōu)質(zhì)的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該包含 (具體可根據(jù)個(gè)人要求而定)
頁(yè)面分為頁(yè)頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁(yè)腳四大部分。
所有頁(yè)面相互超鏈接，可到三級(jí)頁(yè)面，有5-10個(gè)頁(yè)面組成。
頁(yè)面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)。
菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)。
要有JS特效，如定時(shí)切換和手動(dòng)切換圖片輪播。
頁(yè)面中有多媒體元素，如gif、視頻、音樂(lè)，表單技術(shù)的使用。
頁(yè)面清爽、美觀、大方，不雷同。。
不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來(lái)，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。
網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁(yè)布局結(jié)構(gòu)。
網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁(yè)編程語(yǔ)言HTML5+CSS3+JS程序語(yǔ)言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開(kāi)后就能即時(shí)看到網(wǎng)站的效果。
網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片。
網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：網(wǎng)頁(yè)結(jié)構(gòu)文件、css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件、images網(wǎng)頁(yè)圖片文件；
網(wǎng)頁(yè)編輯方面：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面；
第一、帶著目標(biāo)去學(xué)習(xí)，無(wú)論看書(shū)報(bào)課還是各種線下活動(dòng)。
首先要明確自己的學(xué)習(xí)目標(biāo)是什么，是想解決什么問(wèn)題，實(shí)現(xiàn)怎樣的目標(biāo)。
第二、學(xué)習(xí)要建立個(gè)人知識(shí)體系
知識(shí)是學(xué)不完的，書(shū)籍是浩如煙海的。我們盡情徜徉其中的時(shí)候，千萬(wàn)不要被海水淹死，沒(méi)有自我了。在學(xué)習(xí)過(guò)程中，我們會(huì)發(fā)現(xiàn)每一個(gè)知識(shí)點(diǎn)都是有她的邊界和背景的，我們要善于歸納整理知識(shí)
第三、學(xué)到了就要用到
有時(shí)，我們一天下來(lái)感覺(jué)學(xué)到了很多干貨，那么我們一定要將這些知識(shí)點(diǎn)和實(shí)際工作和生活聯(lián)系起來(lái)。知識(shí)和實(shí)踐相互聯(lián)系靠攏。愛(ài)學(xué)習(xí)是一件好事，但只有會(huì)學(xué)習(xí)的人，才有價(jià)值。
HTML+CSS+JS網(wǎng)頁(yè)設(shè)計(jì)與制作，我的學(xué)校網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例， 本實(shí)例適合于初學(xué)HTML+CSS+JS的同學(xué)。該案例里面有div+css的樣式布局設(shè)置，這個(gè)實(shí)例比較全面，有一級(jí)頁(yè)、二級(jí)頁(yè)、詳情頁(yè)、輸入表單等，共6個(gè)頁(yè)面。本文將介紹如何通過(guò)從零開(kāi)始設(shè)計(jì)我的學(xué)校網(wǎng)站，并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)現(xiàn)設(shè)計(jì)與制作。（網(wǎng)頁(yè)設(shè)計(jì)與制作分享。源碼分享。）
1.網(wǎng)頁(yè)作品簡(jiǎn)介方面 ：青綠色簡(jiǎn)約風(fēng)格，div+css布局。主要有：首頁(yè)、關(guān)于暨大、學(xué)校新聞、新聞詳情頁(yè)、校園風(fēng)光、 聯(lián)系我們等總共6個(gè)頁(yè)面html下載。
2.網(wǎng)頁(yè)作品技術(shù)方面：使用CSS制作了網(wǎng)頁(yè)背景圖、鼠標(biāo)經(jīng)過(guò)及選中導(dǎo)航變色效果等。 首頁(yè)制作了搜索表單。
3.網(wǎng)頁(yè)作品布局方面：網(wǎng)頁(yè)布局整體為L(zhǎng)OGO、導(dǎo)航、主體內(nèi)容布局。子頁(yè)面多種布局，圖片居中布局，文本描述對(duì)齊方式設(shè)置了左對(duì)齊。
4.網(wǎng)頁(yè)作品編輯方面：此作品為我的學(xué)校網(wǎng)頁(yè)設(shè)計(jì)題材，代碼為 html+css 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、Vscode 、Sublime 所有編輯器均可使用）
視頻演示：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
截圖演示：
首頁(yè)
關(guān)于暨大
學(xué)校新聞
新聞詳情頁(yè)
校園風(fēng)光
聯(lián)系我們
文件目錄：
HTML代碼：
首頁(yè)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁(yè)</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 頭部 -->
<div class="top-box">
<!-- logo -->
<img src="./images/logo2.svg" class="logo" alt="" />
<div class="right-box">
<a href="#">新門(mén)戶</a>
<a href="#">郵件</a>
<a href="#">網(wǎng)上服務(wù)大廳</a> |
<a href="#">圖書(shū)館</a>
<div class="in-row">
<input type="text" placeholder="請(qǐng)輸入您的關(guān)鍵詞">
<button class="button">搜索</button>
</div>
</div>
</div>
<div class="header">
<!-- logo -->
<img src="./images/hw_zxdj.png" class="logo" alt="" />
<!-- 導(dǎo)航欄 -->
<div class="nav">
<ul>
<li>
<a class="active" href="./index.html" target="_self">
<span title="首頁(yè)">首頁(yè)</span>
</a>
</li>
<li>
<a href="./about.html" target="_self">
<span title="關(guān)于暨大">關(guān)于暨大</span>
</a>
</li>
<li>
<a href="./news.html" target="_self">
<span title="學(xué)校新聞">學(xué)校新聞</span>
</a>
</li>
<li>
<a href="./scenery.html" target="_self">
<span title="校園風(fēng)光">校園風(fēng)光</span>
</a>
</li>
<li>
<a href="./contact.html" target="_self">
<span title="聯(lián)系我們">聯(lián)系我們</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 主內(nèi)容 -->
<div class="main-content">
<div class="banner">
<img src="./images/banner.jpg" alt="" />
</div>
<div class="project-content">
<p class="content-title">暨南大學(xué)</p>
<div class="detail-content">
<div class="detail-pic">
<img src="./images/dasdasda.jpg" alt="" />
</div>
<div class="detail-desc">
<p>暨南大學(xué)是中國(guó)第一所由政府創(chuàng)辦的華僑學(xué)府。</p>
<p>“暨南”二字出自《尚書(shū)·禹貢》：“東漸于海，西被于流沙，朔南暨，聲教訖于四海。”意即面向南洋，將中華文化遠(yuǎn)播到五洲四海。
</p>
<p>學(xué)校目前是中央統(tǒng)戰(zhàn)部、教育部、廣東省人民政府共建的國(guó)家“雙一流”建設(shè)高校，直屬中央統(tǒng)戰(zhàn)部管理。</p>
<p> 暨南大學(xué)是中國(guó)歷史最悠久的大學(xué)之一。學(xué)校的前身是1906年清政府創(chuàng)立于南京的暨南學(xué)堂，后遷至上海，1927年更名為國(guó)立暨南大學(xué)。</p>
</div>
</div>
<p class="content-title">校園風(fēng)光</p>
<div class="content-list content-list2">
<ul>
<li>
<div class="cover-pic">
<img src="./images/xy6.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy7.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy8.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy9.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy10.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy11.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy12.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
<li>
<div class="cover-pic">
<img src="./images/xy13.jpg" alt="" />
</div>
<p class="title">校園一角</p>
</li>
</ul>
</div>
<p class="content-title">媒體暨大</p>
<div class="content-list content-list2">
<video src="https://osvc-mediaxbase.jnu.edu.cn/media/mediax/media/202312/25/51c2c04451825398f8c8b734.mp4" class="video" controls></video>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="contact-container">
<div class="contact-title">
<p>聯(lián)系</p>
<p>Contact</p>
</div>
<div class="contact-content">
<p class="c-name">木番薯科技</p>
<div class="c-addr">
<p>地 點(diǎn)：廣州市天河區(qū)花城大道666號(hào)</p>
<p>郵編：510000</p>
</div>
<div class="c-addr">
<p>公眾號(hào)名稱：木番薯科技</p>
<p>公眾號(hào)號(hào)碼：mengchatchat91</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>也適用于：大學(xué)生網(wǎng)頁(yè)作業(yè)制作 (HTML+CSS)、大學(xué)生HTML期末大作業(yè)、web前端期末大作業(yè)、web課程設(shè)計(jì)網(wǎng)頁(yè)規(guī)劃與設(shè)計(jì)、我的學(xué)校網(wǎng)頁(yè)設(shè)計(jì)作業(yè)成品、HTML+CSS+JS網(wǎng)頁(yè)設(shè)計(jì)期末課程大作業(yè)等。
css樣式：
<h見(jiàn)設(shè)計(jì)題材有 個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書(shū)籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他 等網(wǎng)頁(yè)設(shè)計(jì)題目, A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁(yè)大作業(yè)網(wǎng)頁(yè)設(shè)計(jì)需求, 喜歡的可以下載!
1.網(wǎng)頁(yè)作品簡(jiǎn)介 ：HTML期末大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè) A+水平 ,喜歡的可以下載，文章頁(yè)支持手機(jī)PC響應(yīng)式布局。
2.網(wǎng)頁(yè)作品編輯：作品下載后可使用任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網(wǎng)頁(yè)）。
3.網(wǎng)頁(yè)作品技術(shù)：Div+CSS、鼠標(biāo)滑過(guò)特效、Table、導(dǎo)航欄效果、banner、表單、二級(jí)三級(jí)頁(yè)面等，視頻、 音頻元素 、Flash，同時(shí)設(shè)計(jì)了logo（源文件），基本期末作業(yè)所需的知識(shí)點(diǎn)全覆蓋。
<h*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
