web网页设计实例作业 网页Dreamweaver设计
Web前端開發(fā)技術(shù)
描述 網(wǎng)頁(yè)設(shè)計(jì)題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)期末課程大作業(yè)，公司官網(wǎng)網(wǎng)站 | 企業(yè)官網(wǎng) | 酒店官網(wǎng) | 等網(wǎng)站的設(shè)計(jì)與制 | HTML期末大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)
HTML：結(jié)構(gòu)
CSS：樣式
在操作方面上運(yùn)用了html5和css3，
采用了div+css結(jié)構(gòu)、表單、超鏈接、浮動(dòng)、絕對(duì)定位、相對(duì)定位、字體樣式、引用視頻等基礎(chǔ)知識(shí)
JavaScript：做與用戶的交互行為
文章目錄
- 前端學(xué)習(xí)路線
- 網(wǎng)頁(yè)基本結(jié)構(gòu)
- 網(wǎng)頁(yè)演示
- HTML結(jié)構(gòu)代碼
- 學(xué)的反而越迷茫
- 學(xué)習(xí)更多
前端學(xué)習(xí)路線
（1）html文件：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面；
（2）css文件：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等；
（3）js文件：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）
網(wǎng)頁(yè)基本結(jié)構(gòu)
(1)首頁(yè)：進(jìn)入網(wǎng)頁(yè)中看到的第一個(gè)頁(yè)面(LOGO、公司名稱、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個(gè)
(2)二級(jí)頁(yè)面：從首頁(yè)點(diǎn)擊進(jìn)入之后的頁(yè)面叫做二級(jí)頁(yè)面
(3)三級(jí)頁(yè)面：從二級(jí)頁(yè)面點(diǎn)擊進(jìn)入的頁(yè)面
網(wǎng)頁(yè)html：網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地說(shuō)，網(wǎng)站就是由網(wǎng)頁(yè)組成的
首頁(yè)網(wǎng)站：首頁(yè)是一個(gè)網(wǎng)站的入口網(wǎng)頁(yè)，故往往會(huì)被編輯得易于了解該網(wǎng)站多數(shù)作為首頁(yè)的文件名是index加上擴(kuò)展名
導(dǎo)航菜單：是指位于頁(yè)面頂部或者側(cè)邊區(qū)域的，也稱之為導(dǎo)航欄，它起著鏈接站點(diǎn)或者軟件內(nèi)的各個(gè)頁(yè)面的作用.
網(wǎng)頁(yè)頁(yè)腳：是網(wǎng)頁(yè)中每個(gè)頁(yè)面的底部的區(qū)域。常用于顯示附加信息。如作者、備案號(hào)等。
網(wǎng)頁(yè)演示
在這里插入圖片描述
HTML結(jié)構(gòu)代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="css/all.css" rel="stylesheet" media="all" type="text/css" /> <script src="js/jquery.js"></script> <script src="js/suipe.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首頁(yè)</title> </head> <body> <div class="banner"><div class="pic-list" style="left:-1920px"> <img src="images/top1.jpg" alt=""> <img src="images/top1.jpg" alt=""> <img src="images/top3.jpg" alt=""> <img src="images/top2.jpg" alt=""> <img src="images/top1.jpg" alt=""> </div><div id="buttons"> <span class='on'></span> <span></span> <span></span> </div><a href="javascript:;" class="arrow" id="prev"><</a> <a href="javascript:;" class="arrow" id="next">></a> </div> <div class="neirong"><ul class="center"><li><a href="#">首頁(yè)</a></li><li><a href="#">公司介紹</a></li><li><a href="#">產(chǎn)品中心</a> </li><li><a href="#">新品圖紙</a> </li><li><a href="#">方案展示</a></li><li><a href="#">聯(lián)系我們</a></li></ul> </div><div class="marquee"><marquee>城郊生態(tài)農(nóng)莊悅享休閑時(shí)光....         陽(yáng)光房(露臺(tái))提高你的生活品質(zhì)....        國(guó)外自建房案例....   (了解更多)</marquee></div><div class="husj"> <div class="content"> <div class="box"><div class="dsgoo"><h2>新 品 圖 紙</h2><p>蘭瑟建筑定制別墅專業(yè)品牌</p><br /><ul class="fangiii"><li><a href="#"><img src="images/fl-03.jpg"/></a><h3>五層簡(jiǎn)歐獨(dú)棟|堂屋|佛堂</h3><br /><p>面積1305m2 土建成本221.85萬(wàn)</p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-04.jpg"/></a><h3>三層歐式別墅|帶露臺(tái)|堂屋|獨(dú)棟</h3><br /><p>面積623m 2 土建成本 99.68萬(wàn) </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-05.jpg"/></a><h3>三層雙拼歐式別墅|共堂屋| 帶露臺(tái)| 雙拼</h3><br /><p>面積595m 2 土建成本83.30萬(wàn) </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-06.jpg"/></a><h3>三層歐式別墅|帶露臺(tái)| 挑空客廳|獨(dú)棟</h3><br /><p>面積381m 2土 建成本64.47萬(wàn) </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-07.jpg"/></a><h3>三層中式別墅|帶露臺(tái)|挑空客廳|獨(dú)棟</h3><br /><p>面積449m2 土建成本67.35萬(wàn) </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-08.jpg"/></a><h3>三層歐式獨(dú)棟|大堂挑空|露臺(tái)</h3><br /><p>面積571m? 土建成本85.65萬(wàn) </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-09.jpg"/></a><h3>三層雙拼歐式別墅|共堂屋|雙客廳|露臺(tái)</h3><br /><p>面積924m2 土建成本166.32萬(wàn) </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-016.jpg"/></a><h3>三層獨(dú)棟別墅|地下室(車庫(kù))|大露臺(tái)</h3><br /><p>面積1305m2 土建成本221.85萬(wàn)</p><div class="scrol"></div></li><div class="clear"></div></ul></div><div class="bar"><h3> </h3></div><div class="sds"><div><img src="images/fl-020.jpg" style="float:left; margin-right:20px" width="400"/><h2 style="text-align:center">公司介紹</h2><br /> <br /><h3> 長(zhǎng)沙蘭瑟建筑設(shè)計(jì)咨詢有限公司</h3><br />長(zhǎng)沙蘭瑟建筑設(shè)計(jì)咨詢有限公司是一家專注以度假別墅、私人別墅、休閑山（農(nóng)）莊、渡假接待中心等工程設(shè)計(jì)咨詢的專業(yè)團(tuán)隊(duì)。<br /><br />團(tuán)隊(duì)核心均來(lái)自知名建筑設(shè)計(jì)院、施工企業(yè)具有10多年工作經(jīng)驗(yàn)的注冊(cè)工程師組成。為大量的公共休閑建筑和別墅項(xiàng)目提供了設(shè)計(jì)咨詢服務(wù)，如長(zhǎng)沙天麓國(guó)際、寧鄉(xiāng)碧桂園山湖城、瀾灣國(guó)際等大型別墅樓盤項(xiàng)目。<br /><br />我們秉承"定制一處別墅，樹立一方口碑，聚集一個(gè)圈層"的理念！通過(guò)專業(yè)的全程服務(wù)為您打造彰顯尊崇的傳世大宅。<br /><br /></div><div class="clear"></div></div><div class="box"><div class="bar"><h3>設(shè)計(jì)案例</h3></div><div class="scrollleft" style="clear:both"><ul><li><p><img src="images/fl-02.jpg" width="100%" height="150"/></p><div class="scrol"></div></li><li><p><img src="images/fl-03.jpg" width="100%" height="150"/></p><div class="scrol"></div></li><li><p><img src="images/fl-04.jpg" width="100%" height="150"/></p><div class="scrol"></div></li><li><p><img src="images/fl-05.jpg" width="100%" height="150"/></p><div class="scrol"></div></li><li><p><img src="images/fl-06.jpg" width="100%" height="150"/></p><div class="scrol"></div></li><li><p><img src="images/fl-07.jpg" width="100%" height="150"/></p><div class="scrol"></div></li></ul></div><div class="clear"></div></div><div class="bar j2ss"><h3></h3></div><div class="le"><div> <img src="images/fl-020.jpg" width="100%" /> </div><div class="box"><div class="bar"><h3>新聞中心</h3></div><div class="sdxe"><ul><li> <a href="info.html">住宅別墅</a> </li><li> <a href="info.html">民宿山莊</a> </li><li> <a href="info.html">現(xiàn)代農(nóng)莊改造</a> </li><li> <a href="info.html">舊房改造</a> </li><li> <a href="info.html">施工案例</a> </li><li> <a href="info.html">施工進(jìn)度</a> </li><div class="clear"></div></ul></div><div class="clear"></div></div></div><div class="ri"><div class="doka"><h2>關(guān)于蘭瑟</h2><br /><br /><P>長(zhǎng)沙蘭瑟建筑設(shè)計(jì)咨詢有限公司是一家專注于度假別墅、 高端私人別墅、休閑山(農(nóng))莊、渡假接待中心等工程設(shè)計(jì)咨詢的專業(yè)團(tuán)隊(duì)。團(tuán)隊(duì)核心均來(lái)自知名建筑設(shè).. </P><a href="#">了解更多</a> </div><div class="box"><div class="bar"><h3>聯(lián)系方式</h3></div><div class=" sdxe"><ul><li> 電話：19900099990 </li><li> QQ：123456777 </li><li> 傳真：000-595959595 </li><li> 郵箱：8888888@qq.com </li><li> 地址：長(zhǎng)沙 </li><li><a href="tencent://message/?uin=1613714520&Site=&neirong=yes">點(diǎn)擊對(duì)話</a> </li></ul></div><div class="clear"></div></div></div> </div></div> <div class="end"><p>xxx版權(quán)所有 </p> </div></div> </body><div class="huidaoTop" id="roll_top"><img src="images/huitop.png" width="200px"/></div><div class="donhua" id="soi" style="text-align:center ; padding-top:200px"><img src="images/timg_03.png" width="120" style="animation:my1 2s ease-in-out infinite; -webkit-animation:my1 ease-in-out 2s infinite;"/><img src="images/timg_10.png" width="120" style="animation:my1 2s ease-in-out infinite; -webkit-animation:my1 ease-in-out 2s infinite;-webkit-animation-delay:1s; animation-delay: 1s;"/><img src="images/timg_05.png" width="120" style="animation:my1 2s ease-in-out infinite; -webkit-animation:my1 ease-in-out 2s infinite;"/></div><script type="text/javascript">$(document).ready(function(){$(".scrollleft").imgscroll({speed: 40, amount: 0, width: 1, dir: "left" });});$(document).ready(function(){$('#soi').hide();$(window).scroll(function () {if ($(window).scrollTop() >80) {$('#soi').fadeIn(400);} else {$('#soi').fadeOut(0);}});$('#soi').click(function () {$('html,body').animate({}, 300);}); });$(document).ready(function(){$('#roll_top').hide();$(window).scroll(function () {if ($(window).scrollTop() >180) {$('#roll_top').fadeIn(400);} else {$('#roll_top').fadeOut(0);}});$('#roll_top').click(function () {$('html,body').animate({scrollTop : '0px'}, 300);}); });var th=$(".neirong").offset().top; $(window).scroll(function(){var h=$(this).scrollTop();if(h>th){$(".neirong").addClass("sioi");}else{$(".neirong").removeClass("sioi");} });</script> </html>學(xué)的反而越迷茫
有這種感覺(jué)很正常，因?yàn)槟氵€沒(méi)有真正去公司里面待過(guò)，也不清楚自己到底要學(xué)多少東西才能勝任公司里面給你分配的活。我從你的表述來(lái)看，你的基礎(chǔ)應(yīng)該還是很扎實(shí)的。跟著網(wǎng)上那種全套的視頻教程學(xué)肯定沒(méi)有問(wèn)題。
當(dāng)你以后真正進(jìn)入公司，發(fā)現(xiàn)工作的難度和量大約只有你學(xué)習(xí)時(shí)期的大約20%，你可能就會(huì)發(fā)出一聲嘆息:原來(lái)工作也不過(guò)如此嘛。
這是很正常的，因?yàn)榇蟛糠止臼钦心氵M(jìn)去去干活的，寫業(yè)務(wù)的，不是讓你一個(gè)新人去研發(fā)公司架構(gòu)的。都是現(xiàn)成的東西，你要做的就是在別人的教導(dǎo)下，手把手的指揮下去添磚加瓦。到時(shí)候你恐怕要驚呼:就這？
所以，放松心態(tài)吧，好好享受大學(xué)時(shí)光
—————————————————
學(xué)習(xí)更多
關(guān)注我 | 點(diǎn)贊博文 | 每天帶你漲知識(shí)
相關(guān)問(wèn)題可以相互學(xué)習(xí)，可關(guān)注↓公Z號(hào)
總結(jié)
以上是生活随笔為你收集整理的web网页设计实例作业 网页Dreamweaver设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Oracle 12c之Oracle 12
- 下一篇： 虚拟现实的起源、趋势及应用