《web前端網(wǎng)頁設(shè)計》課程設(shè)計-區(qū)域門戶類網(wǎng)站前端大作業(yè)

1、歐亞學(xué)院HTML+CSS大作業(yè)姓名HTML5網(wǎng)頁設(shè)計期末大作業(yè) 題 目： xxxx旅游 專 業(yè)： xxxxx 班 級： xxx 學(xué) 號： xxxxxx 姓 名： xxxxxx 時 間： xxxxxx 目錄 TOC o 1-3 h z u HYPERLINK l _Toc90996342 一.需求分析 PAGEREF _Toc90996342 h 2 HYPERLINK l _Toc90996343 功能需求 PAGEREF _Toc90996343 h 2 HYPERLINK l _Toc90996344 軟件需求 PAGEREF _Toc90996344 h 2 HYPERLINK l _T

2、oc90996345 二.詳細設(shè)計 PAGEREF _Toc90996345 h 2 HYPERLINK l _Toc90996346 1.首頁 PAGEREF _Toc90996346 h 2 HYPERLINK l _Toc90996347 子頁面設(shè)計 PAGEREF _Toc90996347 h 7 HYPERLINK l _Toc90996348 Css設(shè)計 PAGEREF _Toc90996348 h 21 HYPERLINK l _Toc90996349 三.課程總結(jié)與感想 PAGEREF _Toc90996349 h 27一.需求分析功能需求為了讓更多的人了解山西，走進山西。通過

3、以圖片的形式讓人們了解山西的文化起源，風(fēng)景，美食等，吸引更多的人來山西旅游，來感受山西的人文與美景。進一步推動山西的旅游業(yè)發(fā)展軟件需求制作此網(wǎng)頁用到了Hbuilder軟件二.詳細設(shè)計1.首頁首頁介紹了山西文化，風(fēng)景以及旅游業(yè)的發(fā)展2. 首頁代碼無標(biāo)題文檔$(function()$(#slides).slides(preload: true,preloadImage: images/loading.gif,play: 5000,pause: 2500,hoverPause: true,animationStart: function()$(.caption).animate(bottom:-35

4、,100);,animationComplete: function(current)$(.caption).animate(bottom:0,200);if (window.console & console.log) / example return of current slide numberconsole.log(current);););中間又走了些流程?！昂昧?，”那機器人道，“現(xiàn)在是自由活動時間。大家可以隨意選擇想要傳送到的地方，去看看22世紀(jì)的風(fēng)光！”張峰想了又想，不如看看他們的生活區(qū)吧！他縱身一躍，跳進了通往最繁華的生活區(qū)的傳送門。過了不知多久，他發(fā)現(xiàn)他處于一個破爛的貧民窟中

5、。四周垃圾如山，卻無人清理；房子落灰，卻無人翻新。晨時的陽光照在這些破爛不堪的東西上，白花花的，顯得格外刺眼。嘶！張峰倒吸一口氣，這么落魄，確定是一百年后的世界嗎？我得找人問問！他有些無語。他四處走動，卻沒有什么年輕人，都是一些邋遢不堪的老頭與老太太，坐在永動輪椅上，用搖桿操控方向，美其名曰“曬太陽”。為證實心里的想法，他攔住一個老爺爺：“爺爺，現(xiàn)在是多少年了？”老爺爺神色木然地看了他一眼，支吾道：“我我不記得了。讓我看看。”卻因找一個永動手表，屋內(nèi)屋外到處翻找。到最后，他一拍腦袋：“哦！就在我手腕上呢！老了，感官不行了！”他沖著張峰笑了笑，摘下表，上書：2120年5月20日?！皩α?，既然有永

6、動機器人，你們?yōu)槭裁床毁I一點幫著做點事呢？”張峰不解?！昂呛?，老了，沒錢啊，只能靠當(dāng)初買的藥吊著命呀！”老人露出一抹苦笑。不是吧！未來的文明，除了永動機器外，看上去怎么還倒退了呢？陳峰疑惑不解。他又找了一個年輕人。這人彎腰駝背，雙眼渾濁，簡直和暮年之人無異了。可真是奇怪！這人正值大好年華，為什么還是一臉麻木呢？不應(yīng)該是像他一樣朝氣蓬勃，對未來充滿幻想嗎？張峰上前攔下了他，說出了心中的疑惑。“呵呵，你是來搞笑的嗎？我們很小就喝了永生藥水，又不會死，就這樣茍活一日算一日吧！”他的雙眼間，已無神色?！澳悴蝗プ鳇c什實生活中怎么可能會有這么一檔子事呀！”經(jīng)過一番激烈的內(nèi)心掙扎，張峰覺得，就當(dāng)花錢消災(zāi)吧。

7、 “算了，穿越文那么多，說不定還真有現(xiàn)實依據(jù)呢！就算是假的，也才四百元不到，我雖然窮，掐吧掐吧總能省出來的。只是待把該留的聊天記錄等都留下，就是被騙，好歹也有個證據(jù)報警不是！若是有個什么好人獎，那還賺了，嘿嘿”他自言自語道。一番咨詢后，他交了錢。在提交訂單的那一剎那，他感到有一股巨大的吸力拉扯著他，像一個漩渦般，越轉(zhuǎn)越快，直到他眼前一黑再醒來，只見四周是皆是高聳入云的摩登大廈，據(jù)說有近千層高。出乎張峰的意料，他們并不是死板的四方大廈，而是各種造型兼而有之，六角形的也有，錐形的也有。也不是張峰印象中清一色的藍色，各種顏色都有，在炫目的同時又不刺眼，只覺A.applink:hover border

8、: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:noneA.applink border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:noneA.info color:#2F5BFF;background:transparent;text-decoration:noneA.info:hover color:green;background:tran

9、sparent;text-decoration:underline首頁 山西美景 山西簡介 景點介紹 山西美食 問卷調(diào)查山西簡介山西歷史悠久，人文薈萃，擁有豐厚的歷史文化遺產(chǎn)，迄今為止有文字記載的歷史達三千年之久。山西歷史文化脈絡(luò)清晰，框架完整，對中華民族的形成發(fā)揮了重要作用，對華夏五千年文明產(chǎn)生了巨大影響，也使山西成為地方文化特色最濃厚的地區(qū)之一。目前，全國保存完好的宋、金以前的地面古建筑物70%以上在山西境內(nèi)，具有珍貴價值的國家級重點保護文物有119處之多。 得這顏色搭配是怎生的天經(jīng)地義，絲毫沒有凡塵的俗氣。在白天，它們也發(fā)著光，魅力四射，總而言之就三個字：現(xiàn)代化?！皟?nèi)測會員們，大家好！歡

10、迎來到100年后的世界！”突然，一道爽朗的男聲傳來。眾人慌忙四處觀望，卻不見人影?！霸趺礃?，這樣的出場方式，大家還習(xí)慣嗎？”卻見一個中年男人破空而來，在眾人頭頂漂浮了好一會兒才下來?！安挥脫?dān)心，我是主人研制的一個仿生永動機器人！”他眉毛一揚，朗聲說道。嘶！永動機器人？天哪！現(xiàn)在的科技這么發(fā)達的嗎？那在這個時代生活的人，生活一定很滋潤吧！張峰想道。那機器人帶領(lǐng)眾人參觀了一下科研中心。各類生產(chǎn)線，正急速運轉(zhuǎn)著，卻沒有工人他們是一臺臺永動生產(chǎn)線。大廳里，各式機器人各司其職，該做什么就做什么。他們極度像人，卻沒有情感，這是被人為剝奪了的緣故。然后是科學(xué)家們的工作室?？茖W(xué)家們由于喝了永生藥水的緣故，興致

11、并不是很高，但仍是一絲不茍地研究著新型藥水。說到這里，那機器人頓了一頓：“我們現(xiàn)在的永動機，以及永生藥水，便是他們研制出來的；沒有他們，就中國山西晉善晉美。山西是一個歷史悠久、遺存豐厚、風(fēng)光秀麗的省份。五千年文明看山西，悠久的歷史給山西留下了品位高、種類多的人文資源，獨特的山川地貌形成了雄奇秀美的自然風(fēng)光，共同構(gòu)成了我省得天獨厚的旅游資源。改革開放以來，山西旅游業(yè)有了非常迅速的發(fā)展，尤其是進入十一五時期，山西省的旅游業(yè)保持了快速、健康的發(fā)展。數(shù)據(jù)顯示：十一五期間，我省累計接待境外游客458.16萬人次，為十五期間的3.58倍，年均增長率為25.32%；實現(xiàn)旅游總收入3625.27億元，為十五期

12、間的4.64倍，年均增長率為29.98%。到十二五末，我省將培育億元景區(qū)510家，并以核心和重點旅游景區(qū)建設(shè)為中心，打造一批在國內(nèi)外有影響力和競爭力的龍頭景區(qū)。新增23家國家5A級旅游景區(qū)、2030家國家4A級旅游景區(qū)，建成68家國家或省級旅游度假區(qū)。培育年接待游客量300萬人次以上的旅游區(qū)23家，年接待游客量100萬人次以上的旅游區(qū)1520家，培育億元旅游景區(qū)510家。 美麗山西子頁面設(shè)計設(shè)計的第一個子頁面是山西美景，這一頁放上了山西幾個具有代表性的景點，以圖片的形式傳達山西文化.第一個子頁面的代碼無標(biāo)題文檔A.applink:hover border: 2px dotted #DCE6F4

13、;padding:2px;background-color:#ffff00;color:green;text-decoration:noneA.applink border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:noneA.info color:#2F5BFF;background:transparent;text-decoration:noneA.info:hover color:green;background:transparent;text-decorat

14、ion:underline首頁 山西美景 山西簡介 景點介紹 山西美食 問卷調(diào)查 美麗山西第二個子頁面是山西簡介，介紹了山西的文化起源，從古至今，讓人們了解山西，用文化吸引來客無標(biāo)題文檔A.applink:hover border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:noneA.applink border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-deco

15、ration:noneA.info color:#2F5BFF;background:transparent;text-decoration:noneA.info:hover color:green;background:transparent;text-decoration:underline首頁 山西美景 山西簡介 景點介紹 山西美食 第二個子頁面代碼山西簡介山西，因居太行山之西而得名，簡稱晉，又稱三晉，古稱河?xùn)|，省會太原市。山西東依太行山，西、南依呂梁山、黃河，北依長城，與河北、河南、陜西、內(nèi)蒙古等省區(qū)為界，柳宗元稱之為表里山河。1 山西是中華民族發(fā)祥地之一，山西有文字記載的歷史達三千年

16、，被譽為華夏文明搖籃，素有中國古代文化博物館之稱?？偯娣e15.67萬平方公里，東有太行山，西有呂梁山，山區(qū)面積約占全省總面積的80%以上。2 山西行政區(qū)輪廓略呈東北斜向西南的平行四邊形，下轄11個地級市，119個縣級行政單位（23個市轄區(qū)、11個縣級市、85個縣），總?cè)丝?664萬（2015年底）。轄區(qū)地理坐標(biāo)為北緯34344044，東經(jīng)1101411433。女媧補天的傳說發(fā)生在山西，中華民族的始祖黃帝、炎帝都曾把山西作為活動的主要地區(qū)。西侯度文化和丁村文化遺址表明，在舊石器時代山西已有了人類繁衍生息。堯、舜、禹都曾在山西境內(nèi)建都立業(yè)。中國歷史上第一個奴隸制國家政權(quán)夏朝建立在晉南。商代，山西是

17、商的主要統(tǒng)治區(qū)。周代，晉國由山西境內(nèi)崛興。晉文公曾為春秋五霸之一。秦、漢、魏、晉時期，山西在政治、軍事、經(jīng)濟、文化等各個方面，都起著舉足輕重的作用。南北朝時期，山西是北朝統(tǒng)治的中心地帶，北魏曾以平城（今大同）為都，東魏、北齊曾以晉陽（今太原）為別都、陪都。唐高祖李淵起兵太原，建立了大唐王朝，由此，山西被唐高祖認為是龍興之地，封太原為唐王朝的北都、北京。宋朝時期，山西是中國北方的主要發(fā)達地區(qū)。元代，全國共11個行省，山西與山東、河北，并稱為元朝腹地，大同、平陽（今臨汾）、太原三城則成為黃河流域的著名都會。進入半殖民地半封建社會以后，山西的經(jīng)濟、文化發(fā)展受到嚴重破壞。山西作為革命老區(qū)，在1921年

18、，中國早期的馬克思主義者高君宇在太原組建社會主義青年團，開展革命活動。紅軍長征到達陜北后，毛澤東率領(lǐng)紅軍主力渡河?xùn)|征，在晉西、晉中、晉南各地遍撒革命火種。抗戰(zhàn)爆發(fā)后，八路軍三大主力挺進山西，創(chuàng)立了敵后抗日根據(jù)地。八年抗戰(zhàn)中，山西是全國抗戰(zhàn)的重要戰(zhàn)略支點；山西地方黨組織培養(yǎng)了15萬名共產(chǎn)黨員，根據(jù)地向八路軍輸送了60萬熱血青年。6 解放戰(zhàn)爭期間，山西成為支援全國解放的戰(zhàn)略基地，廣大民眾積極支援前線，大批地方干部南下或東進、西進，奔赴新區(qū)。1949年4月，山西全省解放。9月，成立了山西省人民政府。1-2 美麗山西姚超第三個子頁面是山西景點介紹，以圖片配文字的形式介紹山西的美景，更加的直觀與全面，介

19、紹各個景點的地理位置以及由來第三個子頁面的代碼無標(biāo)題文檔A.applink:hover border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:noneA.applink border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:noneA.info color:#2F5BFF;background:transparent;text-decor

20、ation:noneA.info:hover color:green;background:transparent;text-decoration:underline首頁 山西美景 山西簡介 景點介紹 山西美食 五臺山 山西省忻州市五臺山風(fēng)景區(qū)，位于山西省的東北部，屬太行山系的北端。跨忻州地區(qū)的五臺縣、繁峙縣、代縣、原平縣、定襄縣，周五百余里。中心地區(qū)臺懷鎮(zhèn)，距五臺縣城90公里，忻州市160公里，山西省會太原市240公里。 平遙 平遙縣位于山西省中部，距太原市約85公里。與同為第二批國家歷史文化名城的四川閬中、云南麗江、安徽歙縣并稱為中國保存最為完好的四大古城，也是目前我國唯一以整座古城申報世

21、界文化遺產(chǎn)獲得成功的古縣城。 云岡石窟 山西省大同市云岡石窟位于山西省大同市西郊武周山北崖，石窟依山開鑿，大小窟龕252個，石雕造像51000余軀，是我國規(guī)模最大的古代石窟群之一。北魏和平年間開鑿石窟五所，就是當(dāng)時開鑿最早的所謂曇曜五窟。 壺口瀑布 山西省臨汾市黃河壺口瀑布位于吉縣城西45公里，距臨汾市165公里處的晉陜峽谷黃河河床中，已成為世界上最大的黃色瀑布，因其氣勢雄渾而享譽中外。 壺口瀑布，是由于黃河流至壺口一帶，收束為一股，奔騰呼嘯，躍入深潭，濺起浪濤翻滾，形似巨壺內(nèi)黃水沸騰。 皇城相府 山西省晉城市皇城相府國家AAAAA級旅游景區(qū)、全國文化產(chǎn)業(yè)示范基地、中國北方文化巨族之宅，被世人

22、譽為東方雙城古堡?？偯娣e3.6萬平方米，康熙皇帝年經(jīng)筵講師陳廷敬的故居。其建筑依山就勢，隨形生變，官宅民居，鱗次櫛比，是一組別具特色的明清城堡式官宅建筑群。 綿山 綿山，亦名綿上，后因春秋晉國介之推攜母隱居被焚又稱介山。 古老神奇的綿山，歷史悠久，2640年的歷史博大精深。人文景觀雄壯宏偉，自然風(fēng)光優(yōu)美，集秦山之雄奇、無水不秀、無澗不幽、無景不典；氣勢恢弘，巧奪天工 美麗山西姚超第四個字頁面介紹的是山西美食，分別介紹了剔尖，山西太谷餅，刀削面和莜面窩窩。并且都配上了各自的圖片，用美食照片吸引外地游客第四個子頁面的代碼無標(biāo)題文檔A.applink:hover border: 2px dotted

23、 #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:noneA.applink border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:noneA.info color:#2F5BFF;background:transparent;text-decoration:noneA.info:hover color:green;background:transparent;text

24、-decoration:underline首頁 山西美景 山西簡介 景點介紹 山西美食 美麗山西姚超Css設(shè)計bodybackground:url(./images/bg.jpg) no-repeat center top;#page width:978px; margin:0 auto;#topwidth:978px; height:100px; margin:0 auto; #navwidth:970px; height:40px; margin:10px auto; background:url(./images/top_bg.gif); background:#3a3b3f; colo

25、r:#000;#nav pheight:40px; line-height:40px; #nav p acolor:#fff; font-size:14px; font-weight:bold;line-height:30px; padding:0 45px;#nav p a:hovercolor:red; text-decoration:none; #footwidth:970px;padding:20px 0;color:#000; font-size:14px;text-align:center;#container width:970px;padding:10px;margin:0 a

26、uto;position:relative;z-index:0;font-family:Geneva, Arial, Helvetica, sans-serif;#example width:600px;height:350px;position:relative;body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,divmargin:0;padding:0;border:0;*margin:0;padding:0;border:0;body font-family:Geneva, Arial, Helvetica, san

27、s-serif;font-size: 12px;color:#000000;line-height: 20px;text-align:left;td,th font-family:Geneva, Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;a color: #000000;A:link TEXT-DECORATION: none;A:visited text-decoration: none;A:hovertext-decoration:underline;ul,lilist-style-type:none;li a:

28、hovertext-decoration:underline;#ribbon position:absolute;top:-3px;left:-15px;z-index:500;#frame position:absolute;z-index:0;width:600px;height:341px;top:-3px;left:-80px;#slides position:absolute;top:15px;left:4px;z-index:100;#slides .next,#slides .prev position:absolute;top:112px;left:-145px;width:2

29、4px;height:43px;display:block;z-index:101;.slides_container width:570px;height:270px;overflow:hidden;position:relative;#slides .next left:722px;.contwidth:970px; margin:0 auto;.cont ul li float:left; margin-right:10px;.cont ul width:960px; margin:0 auto;.new padding-left:10px; padding-top:20px; padding-bottom:20px; width:960px; overflow:hidden;.new imgwidth:260px; height:130px; float:left;.new_pwidth:600px; float:left; padding-left:10px;.new_p afont-size:26px;font-weigh