web网页设计实例作业 网页Dreamweaver设计
Web前端開發技術
描述 網頁設計題材,DIV+CSS 布局制作,HTML+CSS網頁設計期末課程大作業,公司官網網站 | 企業官網 | 酒店官網 | 等網站的設計與制 | HTML期末大學生網頁設計作業
HTML:結構
CSS:樣式
在操作方面上運用了html5和css3,
采用了div+css結構、表單、超鏈接、浮動、絕對定位、相對定位、字體樣式、引用視頻等基礎知識
JavaScript:做與用戶的交互行為
文章目錄
- 前端學習路線
- 網頁基本結構
- 網頁演示
- HTML結構代碼
- 學的反而越迷茫
- 學習更多
前端學習路線
(1)html文件:其中index.html是首頁、其他html為二級頁面;
(2)css文件:css全部頁面樣式,文字滾動, 圖片放大等;
(3)js文件:js實現動態輪播特效, 表單提交, 點擊事件等等(網頁中運用到js代碼)
網頁基本結構
(1)首頁:進入網頁中看到的第一個頁面(LOGO、公司名稱、導航、banner、新聞、相關信息、底部信息、banner一般是5個
(2)二級頁面:從首頁點擊進入之后的頁面叫做二級頁面
(3)三級頁面:從二級頁面點擊進入的頁面
網頁html:網頁是構成網站的基本元素,是承載各種網站應用的平臺。通俗地說,網站就是由網頁組成的
首頁網站:首頁是一個網站的入口網頁,故往往會被編輯得易于了解該網站多數作為首頁的文件名是index加上擴展名
導航菜單:是指位于頁面頂部或者側邊區域的,也稱之為導航欄,它起著鏈接站點或者軟件內的各個頁面的作用.
網頁頁腳:是網頁中每個頁面的底部的區域。常用于顯示附加信息。如作者、備案號等。
網頁演示
在這里插入圖片描述
HTML結構代碼
<!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>首頁</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="#">首頁</a></li><li><a href="#">公司介紹</a></li><li><a href="#">產品中心</a> </li><li><a href="#">新品圖紙</a> </li><li><a href="#">方案展示</a></li><li><a href="#">聯系我們</a></li></ul> </div><div class="marquee"><marquee>城郊生態農莊悅享休閑時光....         陽光房(露臺)提高你的生活品質....        國外自建房案例....   (了解更多)</marquee></div><div class="husj"> <div class="content"> <div class="box"><div class="dsgoo"><h2>新 品 圖 紙</h2><p>蘭瑟建筑定制別墅專業品牌</p><br /><ul class="fangiii"><li><a href="#"><img src="images/fl-03.jpg"/></a><h3>五層簡歐獨棟|堂屋|佛堂</h3><br /><p>面積1305m2 土建成本221.85萬</p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-04.jpg"/></a><h3>三層歐式別墅|帶露臺|堂屋|獨棟</h3><br /><p>面積623m 2 土建成本 99.68萬 </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-05.jpg"/></a><h3>三層雙拼歐式別墅|共堂屋| 帶露臺| 雙拼</h3><br /><p>面積595m 2 土建成本83.30萬 </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-06.jpg"/></a><h3>三層歐式別墅|帶露臺| 挑空客廳|獨棟</h3><br /><p>面積381m 2土 建成本64.47萬 </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-07.jpg"/></a><h3>三層中式別墅|帶露臺|挑空客廳|獨棟</h3><br /><p>面積449m2 土建成本67.35萬 </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-08.jpg"/></a><h3>三層歐式獨棟|大堂挑空|露臺</h3><br /><p>面積571m? 土建成本85.65萬 </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-09.jpg"/></a><h3>三層雙拼歐式別墅|共堂屋|雙客廳|露臺</h3><br /><p>面積924m2 土建成本166.32萬 </p><div class="scrol"></div></li><li><a href="#"><img src="images/fl-016.jpg"/></a><h3>三層獨棟別墅|地下室(車庫)|大露臺</h3><br /><p>面積1305m2 土建成本221.85萬</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> 長沙蘭瑟建筑設計咨詢有限公司</h3><br />長沙蘭瑟建筑設計咨詢有限公司是一家專注以度假別墅、私人別墅、休閑山(農)莊、渡假接待中心等工程設計咨詢的專業團隊。<br /><br />團隊核心均來自知名建筑設計院、施工企業具有10多年工作經驗的注冊工程師組成。為大量的公共休閑建筑和別墅項目提供了設計咨詢服務,如長沙天麓國際、寧鄉碧桂園山湖城、瀾灣國際等大型別墅樓盤項目。<br /><br />我們秉承"定制一處別墅,樹立一方口碑,聚集一個圈層"的理念!通過專業的全程服務為您打造彰顯尊崇的傳世大宅。<br /><br /></div><div class="clear"></div></div><div class="box"><div class="bar"><h3>設計案例</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">現代農莊改造</a> </li><li> <a href="info.html">舊房改造</a> </li><li> <a href="info.html">施工案例</a> </li><li> <a href="info.html">施工進度</a> </li><div class="clear"></div></ul></div><div class="clear"></div></div></div><div class="ri"><div class="doka"><h2>關于蘭瑟</h2><br /><br /><P>長沙蘭瑟建筑設計咨詢有限公司是一家專注于度假別墅、 高端私人別墅、休閑山(農)莊、渡假接待中心等工程設計咨詢的專業團隊。團隊核心均來自知名建筑設.. </P><a href="#">了解更多</a> </div><div class="box"><div class="bar"><h3>聯系方式</h3></div><div class=" sdxe"><ul><li> 電話:19900099990 </li><li> QQ:123456777 </li><li> 傳真:000-595959595 </li><li> 郵箱:8888888@qq.com </li><li> 地址:長沙 </li><li><a href="tencent://message/?uin=1613714520&Site=&neirong=yes">點擊對話</a> </li></ul></div><div class="clear"></div></div></div> </div></div> <div class="end"><p>xxx版權所有 </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>學的反而越迷茫
有這種感覺很正常,因為你還沒有真正去公司里面待過,也不清楚自己到底要學多少東西才能勝任公司里面給你分配的活。我從你的表述來看,你的基礎應該還是很扎實的。跟著網上那種全套的視頻教程學肯定沒有問題。
當你以后真正進入公司,發現工作的難度和量大約只有你學習時期的大約20%,你可能就會發出一聲嘆息:原來工作也不過如此嘛。
這是很正常的,因為大部分公司是招你進去去干活的,寫業務的,不是讓你一個新人去研發公司架構的。都是現成的東西,你要做的就是在別人的教導下,手把手的指揮下去添磚加瓦。到時候你恐怕要驚呼:就這?
所以,放松心態吧,好好享受大學時光
—————————————————
學習更多
關注我 | 點贊博文 | 每天帶你漲知識
相關問題可以相互學習,可關注↓公Z號
總結
以上是生活随笔為你收集整理的web网页设计实例作业 网页Dreamweaver设计的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Oracle 12c之Oracle 12
- 下一篇: 虚拟现实的起源、趋势及应用