国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 怎樣用html制作網(wǎng)頁(yè)?

怎樣用html制作網(wǎng)頁(yè)?

時(shí)間:2024-02-09 13:55:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2024-02-09 13:55:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)

怎樣用html制作網(wǎng)頁(yè)?:
? 學(xué)生HTML靜態(tài)網(wǎng)頁(yè)基礎(chǔ)水平制作 ? ,頁(yè)面排版干凈簡(jiǎn)潔。使用HTML+CSS頁(yè)面布局設(shè)計(jì),web大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)源碼,這是一個(gè)不錯(cuò)的旅游網(wǎng)頁(yè)制作,畫面精明,排版整潔,內(nèi)容豐富,主題鮮明,非常適合初學(xué)者學(xué)習(xí)使用, 這個(gè)實(shí)例比較全面,有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)。

@TOC


一、網(wǎng)站題目 ?

旅游景點(diǎn)介紹、旅游風(fēng)景區(qū)、家鄉(xiāng)介紹、等網(wǎng)站的設(shè)計(jì)與制作。


二、網(wǎng)站描述??

旅游景點(diǎn)介紹、旅游風(fēng)景區(qū)是一個(gè)介紹簡(jiǎn)介、行政區(qū)劃、地理環(huán)境、自然環(huán)境、教育事業(yè)、體育事業(yè)、旅游景點(diǎn)、城市榮譽(yù)等等。網(wǎng)站集中主要展示了的地方風(fēng)土人情,并通過(guò)訪客留言,增加游客的互動(dòng)體驗(yàn)。同時(shí),地方旅游網(wǎng)站里的每一個(gè)網(wǎng)頁(yè)都采用了統(tǒng)一的設(shè)計(jì)風(fēng)格,以加強(qiáng)城市整體面貌統(tǒng)一的宣傳效果。最重要的是做出旅游網(wǎng)站獨(dú)特的風(fēng)格,更能吸引瀏覽者的眼球。


三、網(wǎng)站介紹

網(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á)到打開后就能即時(shí)看到網(wǎng)站的效果。

網(wǎng)站素材方面:計(jì)劃收集各大平臺(tái)好看的圖片素材,并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片,然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片。

網(wǎng)站文件方面:網(wǎng)站系統(tǒng)文件種類包含:html網(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è)面; (2)css文件包含:css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等; (3)js文件包含:js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 點(diǎn)擊事件等等(個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼)。


四、網(wǎng)站效果

網(wǎng)站設(shè)計(jì)制作的重點(diǎn)是對(duì)網(wǎng)頁(yè)整體設(shè)計(jì)的布局和對(duì)網(wǎng)頁(yè)整體內(nèi)容的選題。 網(wǎng)站設(shè)計(jì)方面:計(jì)劃實(shí)現(xiàn)簡(jiǎn)潔大氣的網(wǎng)頁(yè)設(shè)計(jì)效果。 網(wǎng)站功能方面:計(jì)劃實(shí)現(xiàn)各個(gè)頁(yè)面之間的鏈接跳轉(zhuǎn)功能、鼠標(biāo)懸停在文字上的變色功能、簡(jiǎn)單的首頁(yè)動(dòng)態(tài)圖片切換功能、簡(jiǎn)單的表單提交功能。

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述




五、網(wǎng)站代碼制作部分

(1)網(wǎng)站首頁(yè)布局確定好各個(gè)板塊的內(nèi)容,并使用了DIV+CSS布局。另外首頁(yè)使用到的知識(shí)主要有圖片插入、圖片動(dòng)態(tài)切換、導(dǎo)航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。

(2)頁(yè)面使用了DIV+CSS布局,使用到的知識(shí)主要有圖片插入、導(dǎo)航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。

(3)表單部分頁(yè)面使用了DIV+CSS布局,使用到的知識(shí)主要有運(yùn)用了form表單、input文本框和input提交按鈕,完成表單信息收集。利用CSS設(shè)置input提交按鈕文字大小和顏色。

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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>平遙古城</title><link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/changimages.js"></script></head><body><div class="main"> <div class="top"><img src="images/top.jpg"/></div> <div class="menu"> <ul> <li><a href="index.html">首頁(yè)</a></li> <li><a href="about_kf.html">關(guān)于平遙</a></li> <li><a href="tourism.html">旅游景點(diǎn)</a></li> <li><a href="culture_kf.html">平遙文化</a></li> <li><a href="food_kf.html">平遙美食</a></li> </ul> </div> <div class="con"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><div class=pic_show> <div id=imgADPlayer></div> <script> PImgPlayer.addItem( "", "#", "images/pic1.jpg"); PImgPlayer.addItem( "", "#", "images/jd2.jpg"); PImgPlayer.addItem( "", "#", "images/jd3.jpg"); PImgPlayer.init( "imgADPlayer", 650, 400 ); </script> </div></td> <td><p>平遙古城位于浙江省中部,始建于周宣王時(shí)期,明洪武三年(1370年)擴(kuò)建,距今已有2700多年的歷史。還較為完好地保留著明清時(shí)期縣城的基本風(fēng)貌,是中國(guó)漢民族地區(qū)現(xiàn)存最為完整的古城。浙江平遙被稱為“保存最為完好的四大古城”之一,也是中國(guó)僅有的以整座古城申報(bào)世界文化遺產(chǎn)獲得成功的兩座古城市之一。 平遙古城1997年被列入世界文化遺產(chǎn)名錄。2009年,平遙古城被世界紀(jì)錄協(xié)會(huì)評(píng)為中國(guó)現(xiàn)存最完整的古代縣城。2015年7月13日,平遙古城成為國(guó)家5A級(jí)旅游景點(diǎn)。 2017年11月19日,獲得年度旅游目的地聲譽(yù)獎(jiǎng)。 第一批全國(guó)中小學(xué)生研學(xué)實(shí)踐教育基地。</p></td> </tr> </table> <h3 class="title">旅游景點(diǎn)</h3> <div class="jd_list"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><p><a href="jd1.html"><img src="images/jd1.jpg"/></a></p> <h3>平遙縣衙</h3> <div class="detail">平遙縣衙坐落于平遙古城中心,始建于北魏,定型于元明清,保存下來(lái)最早的建筑建于元至正六年(1346年),距今已有六百多年的歷史,整座衙署坐北朝南,呈軸對(duì)稱布局,南北軸線長(zhǎng)二百余米..</div></td> <td valign="top"><p><a href="#"><img src="images/jd2.jpg"/></a></p> <h3>日升昌票號(hào)</h3> <div class="detail">日升昌票號(hào)成立于清道光三年(1823年),由浙江省平遙縣西達(dá)蒲村富商李大金出資與總經(jīng)理雷履泰共同創(chuàng)辦。總號(hào)設(shè)于浙江省平遙縣城內(nèi)繁華街市的西大街路南,占地面積1600多平方米...</div></td> <td valign="top"><p><a href="#"><img src="images/jd3.jpg"/></a></p> <h3>孔廟</h3> <div class="detail">文廟即孔廟,是祭祀孔子的地方。平遙文廟位于平遙縣城內(nèi)東南隅,始建于唐貞觀初年,其大成殿為金大定三年(1163年)重建,至今保持原貌,是我國(guó)現(xiàn)存各級(jí)文廟中歷史最久的殿宇。 </div></td> </tr> <tr> <td valign="top"><p><a href="#"><img src="images/jd4.jpg"/></a></p> <h3>清虛觀</h3> <div class="detail">清虛觀是古城內(nèi)最大的道觀。按照道東佛西的傳統(tǒng)布局安排,坐落于東大街東段路北。清虛觀始建于唐顯慶二年(657年),原名太平觀,宋治平元年(1064年)改為清虛觀。...</div></td> <td valign="top"><p><a href="#"><img src="images/jd5.jpg"/></a></p> <h3>平遙城墻</h3> <div class="detail">平遙城墻,始建于西周宣王時(shí)期(公元前827年~公元前782年)為夯土城垣。明洪武三年(1370年)重筑,由原“九里十八步”擴(kuò)為“十二里八分四厘”(6.4公里),變夯土城垣為磚石城墻。</div></td> <td valign="top"><p><a href="#"><img src="images/jd6.jpg"/></a></p> <h3>甕城</h3> <div class="detail">甕城,指建在城門外的小城,又叫月城,用以增強(qiáng)城池的防御能力。平遙古城的甕城城門與大城門的朝向多數(shù)呈90°夾角(南門和下東門除外),即便敵軍攻破了甕城城門,還有主城門防御...</div></td> </tr> </table> </div> </div> <div class="bottom">平遙古城版權(quán)所有</div></div><embed src="images/m.mp3" hidden="true" autostart="true" loop="true"></body></html>

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;

六、遇到問(wèn)題及如何解決

實(shí)訓(xùn)中遇到得困難不少,比如如何收集適合網(wǎng)頁(yè)的圖片素材、如何讓網(wǎng)頁(yè)的配色看著更自然更舒適、如何用PS裁剪大小合適的圖片、以及制作表單時(shí)候如何設(shè)計(jì)等等,最后,通過(guò)上網(wǎng)查詢和請(qǐng)教別人得到了很好的解決。


七、實(shí)訓(xùn)總結(jié)

通過(guò)這次網(wǎng)頁(yè)設(shè)計(jì)制作實(shí)訓(xùn),能夠靈活的運(yùn)用到所學(xué)的知識(shí)和技巧制作簡(jiǎn)單的網(wǎng)頁(yè),掌握了個(gè)人網(wǎng)站建設(shè)的技巧和基本網(wǎng)站建設(shè)的過(guò)程。對(duì)于用Dreamweaver、vscode、hbuider等制作網(wǎng)頁(yè)更為得心應(yīng)手。實(shí)訓(xùn)過(guò)程中我盡量充分利用老師教過(guò)的知識(shí),對(duì)所學(xué)知識(shí)進(jìn)行了鞏固。為了制作出更好的效果我也翻閱參考了其他資料,學(xué)習(xí)到了更多的網(wǎng)頁(yè)處理技巧。制作網(wǎng)頁(yè)的過(guò)程中遇到很多的問(wèn)題,通過(guò)查找資料或詢問(wèn)同學(xué)都有得到解決。這次綜合實(shí)訓(xùn)我的收獲很大,學(xué)有所用,在實(shí)踐的過(guò)程中學(xué)習(xí)鞏固對(duì)知識(shí)能有更深的記憶。網(wǎng)頁(yè)制作是一門很實(shí)用的學(xué)科,值得我以后進(jìn)行更深入的學(xué)習(xí)。這次實(shí)訓(xùn)中我也體會(huì)到了自己掌握的技巧太少了,以至于很多想法都沒(méi)能實(shí)現(xiàn),在以后的學(xué)習(xí)過(guò)程中我要對(duì)網(wǎng)頁(yè)制作有更深的了解,做出更為成熟的網(wǎng)頁(yè)。


八、更多干貨

1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容,請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦!

2.??【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者,一起探討 前端 Node 知識(shí),互相學(xué)習(xí)」!

3.以上內(nèi)容技術(shù)相關(guān)問(wèn)題 歡迎一起交流學(xué)習(xí)



關(guān)鍵詞:怎樣

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉