柚子快報激活碼778899分享：
柚子快報激活碼778899分享：
???學(xué)生HTML靜態(tài)網(wǎng)頁基礎(chǔ)水平制作???，頁面排版干凈簡潔。使用HTML+CSS頁面布局設(shè)計,web大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的旅游網(wǎng)頁制作，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用, 這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。
? 精彩專欄推薦??????
? 【作者主頁——?獲取更多優(yōu)質(zhì)源碼】 ? 【學(xué)習(xí)資料/簡歷模板/面試資料/ 網(wǎng)站設(shè)計與制作】 ? 【web前端期末大作業(yè)——??畢設(shè)項目精品實戰(zhàn)案例】
文章目錄?
一、網(wǎng)站題目???二、網(wǎng)站描述??三、網(wǎng)站介紹?四、網(wǎng)站效果?五、網(wǎng)站代碼制作部分 ?HTML結(jié)構(gòu)代碼隣CSS樣式代碼?
六、遇到問題及如何解決?七、實訓(xùn)總結(jié)?八、更多干貨?
一、網(wǎng)站題目???
? 旅游景點介紹、旅游風(fēng)景區(qū)、家鄉(xiāng)介紹、等網(wǎng)站的設(shè)計與制作。
二、網(wǎng)站描述??
旅游景點介紹、旅游風(fēng)景區(qū)是一個介紹簡介、行政區(qū)劃、地理環(huán)境、自然環(huán)境、教育事業(yè)、體育事業(yè)、旅游景點、城市榮譽(yù)等等。網(wǎng)站集中主要展示了的地方風(fēng)土人情，并通過訪客留言，增加游客的互動體驗。同時，地方旅游網(wǎng)站里的每一個網(wǎng)頁都采用了統(tǒng)一的設(shè)計風(fēng)格，以加強(qiáng)城市整體面貌統(tǒng)一的宣傳效果。最重要的是做出旅游網(wǎng)站獨特的風(fēng)格，更能吸引瀏覽者的眼球。
三、網(wǎng)站介紹?
網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時看到網(wǎng)站的效果。
網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運行及修改編輯等操作）。 其中： （1）html文件包含：其中index.html是首頁、其他html為二級頁面； （2）css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3）js文件包含：js實現(xiàn)動態(tài)輪播特效, 點擊事件等等（個別網(wǎng)頁中運用到j(luò)s代碼）。
四、網(wǎng)站效果?
網(wǎng)站設(shè)計制作的重點是對網(wǎng)頁整體設(shè)計的布局和對網(wǎng)頁整體內(nèi)容的選題。 網(wǎng)站設(shè)計方面：計劃實現(xiàn)簡潔大氣的網(wǎng)頁設(shè)計效果。 網(wǎng)站功能方面：計劃實現(xiàn)各個頁面之間的鏈接跳轉(zhuǎn)功能、鼠標(biāo)懸停在文字上的變色功能、簡單的首頁動態(tài)圖片切換功能、簡單的表單提交功能。
五、網(wǎng)站代碼制作部分 ?
（1）網(wǎng)站首頁布局確定好各個板塊的內(nèi)容，并使用了DIV+CSS布局。另外首頁使用到的知識主要有圖片插入、圖片動態(tài)切換、導(dǎo)航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。
（2）頁面使用了DIV+CSS布局，使用到的知識主要有圖片插入、導(dǎo)航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。
（3）表單部分頁面使用了DIV+CSS布局，使用到的知識主要有運用了form表單、input文本框和input提交按鈕，完成表單信息收集。利用CSS設(shè)置input提交按鈕文字大小和顏色。
HTML結(jié)構(gòu)代碼隣
平遙古城位于山西省中部，始建于周宣王時期，明洪武三年（1370年）擴(kuò)建，距今已有2700多年的歷史。還較為完好地保留著明清時期縣城的基本風(fēng)貌，是中國漢民族地區(qū)現(xiàn)存最為完整的古城。山西平遙被稱為“保存最為完好的四大古城”之一，也是中國僅有的以整座古城申報世界文化遺產(chǎn)獲得成功的兩座古城市之一。 平遙古城1997年被列入世界文化遺產(chǎn)名錄。2009年，平遙古城被世界紀(jì)錄協(xié)會評為中國現(xiàn)存最完整的古代縣城。2015年7月13日，平遙古城成為國家5A級旅游景點。 2017年11月19日，獲得年度旅游目的地聲譽(yù)獎。 第一批全國中小學(xué)生研學(xué)實踐教育基地。 |
旅游景點
平遙縣衙平遙縣衙坐落于平遙古城中心，始建于北魏，定型于元明清，保存下來最早的建筑建于元至正六年（1346年），距今已有六百多年的歷史，整座衙署坐北朝南，呈軸對稱布局，南北軸線長二百余米.. |
日升昌票號日升昌票號成立于清道光三年（1823年），由山西省平遙縣西達(dá)蒲村富商李大金出資與總經(jīng)理雷履泰共同創(chuàng)辦?？偺栐O(shè)于山西省平遙縣城內(nèi)繁華街市的西大街路南，占地面積1600多平方米... |
孔廟文廟即孔廟，是祭祀孔子的地方。平遙文廟位于平遙縣城內(nèi)東南隅，始建于唐貞觀初年，其大成殿為金大定三年（1163年）重建，至今保持原貌，是我國現(xiàn)存各級文廟中歷史最久的殿宇。 |
清虛觀清虛觀是古城內(nèi)最大的道觀。按照道東佛西的傳統(tǒng)布局安排，坐落于東大街東段路北。清虛觀始建于唐顯慶二年（657年），原名太平觀，宋治平元年（1064年）改為清虛觀。... |
平遙城墻平遙城墻，始建于西周宣王時期（公元前827年～公元前782年）為夯土城垣。明洪武三年（1370年）重筑，由原“九里十八步”擴(kuò)為“十二里八分四厘”（6.4公里），變夯土城垣為磚石城墻。 |
甕城甕城，指建在城門外的小城，又叫月城，用以增強(qiáng)城池的防御能力。平遙古城的甕城城門與大城門的朝向多數(shù)呈90°夾角（南門和下東門除外），即便敵軍攻破了甕城城門，還有主城門防御... |
CSS樣式代碼?
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
font-family:"微軟雅黑";
font-size:14px;
color:#444;
line-height:24px;
background:#444;
}
ul,li{ list-style:none;}
.main {
width:1100px;
margin:0 auto;
background:#fff;
}
.menu{ background:#1c8bcf; height:40px;}
.menu ul{ margin-left:30px;}
.menu ul li{ float:left; text-align:center; margin-right:20px;}
.menu ul li a{ color:#fff; text-decoration:none; display:block; line-height:40px; padding:0px 40px; font-size:16px;}
.menu ul li a:hover{ color:#000; background:#FF0;}
.con {
padding:30px;
min-height:500px;
}
.con img {
margin-right:20px;
}
.title{ font-size:24px; margin-top:30px; margin-bottom:30px;}
.jd_list{ text-align:center;}
.jd_list td{ padding-bottom:30px;}
.jd_list td img{ width:300px; height:200px;}
.jd_list h3{ padding:10px 0;}
.jd_list .detail{ width:260px; margin:0 auto; text-align:left;}
.bottom{ background:#1c8bcf; text-align:center; padding:20px 0; color:#fff;}
.bottom span{ padding-right:20px;}
.title2{font-size:24px; margin-top:30px; margin-bottom:30px; text-align:center; border-bottom:1px solid #ccc; margin-bottom:20px; padding-bottom:30px;}
.title3{ margin:20px 0px;}
.wh p{ text-indent:2em; margin-bottom:10px;
六、遇到問題及如何解決?
實訓(xùn)中遇到得困難不少，比如如何收集適合網(wǎng)頁的圖片素材、如何讓網(wǎng)頁的配色看著更自然更舒適、如何用PS裁剪大小合適的圖片、以及制作表單時候如何設(shè)計等等，最后，通過上網(wǎng)查詢和請教別人得到了很好的解決。
七、實訓(xùn)總結(jié)?
通過這次網(wǎng)頁設(shè)計制作實訓(xùn)，能夠靈活的運用到所學(xué)的知識和技巧制作簡單的網(wǎng)頁，掌握了個人網(wǎng)站建設(shè)的技巧和基本網(wǎng)站建設(shè)的過程。對于用Dreamweaver、vscode、hbuider等制作網(wǎng)頁更為得心應(yīng)手。實訓(xùn)過程中我盡量充分利用老師教過的知識，對所學(xué)知識進(jìn)行了鞏固。為了制作出更好的效果我也翻閱參考了其他資料，學(xué)習(xí)到了更多的網(wǎng)頁處理技巧。制作網(wǎng)頁的過程中遇到很多的問題，通過查找資料或詢問同學(xué)都有得到解決。這次綜合實訓(xùn)我的收獲很大，學(xué)有所用，在實踐的過程中學(xué)習(xí)鞏固對知識能有更深的記憶。網(wǎng)頁制作是一門很實用的學(xué)科，值得我以后進(jìn)行更深入的學(xué)習(xí)。這次實訓(xùn)中我也體會到了自己掌握的技巧太少了，以至于很多想法都沒能實現(xiàn)，在以后的學(xué)習(xí)過程中我要對網(wǎng)頁制作有更深的了解，做出更為成熟的網(wǎng)頁。
八、更多干貨?
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “?點贊” “??評論” “?收藏” 一鍵三連哦！
2.??【??????關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！
3.
以上內(nèi)容技術(shù)相關(guān)問題?歡迎一起交流學(xué)習(xí)???????
柚子快報激活碼778899分享：
精彩文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Rakuten優(yōu)選賣家
