構(gòu)建一個(gè)大學(xué)生展示寢室風(fēng)采的平臺(tái)軟件學(xué)院web課程設(shè)計(jì)(編輯修改稿)
2024-07-12 06:47 本頁面
【文章內(nèi)容簡介】 接布局 。 簡介區(qū) 的 css 主要包括對(duì)一些文本和圖像顯示方式的定義。 鏈接區(qū) 主要包括了一些對(duì)于相關(guān)鏈接的顯示方式和排列方式。 利用 id 和類則可輕松利用 div 標(biāo)簽對(duì)上述各區(qū)域做相關(guān)的設(shè)置，同時(shí)也有利于網(wǎng)頁的修改和擴(kuò)展。 6 設(shè)置右邊公告欄里的文字向上連續(xù)滾動(dòng)，時(shí)間間隔為 400ms，且 當(dāng)鼠標(biāo)以上區(qū)域的時(shí)候滾動(dòng)停止，當(dāng)鼠標(biāo)移開的時(shí)候又繼續(xù)滾動(dòng) ： behavior=scroll scrollamount=3 scrolldelay=150 direction=up scrolldelay=400ms onmouseover=()onmouseout=() 另外還在主頁上面加入了背景音樂的播放，其 html 代碼如下： embed src=the hidden=True loop=True /embed loop 表示音樂的循環(huán)次數(shù)。 效果圖 7 ○ 2 窩窩故事 窩窩故事主要分為兩大模塊一個(gè)是菜單區(qū)，一個(gè)是展示區(qū)，同樣是利用對(duì)主 css 類的擴(kuò)展來實(shí)現(xiàn)的。 菜單區(qū) 主要是利 用了 css 中的類定義了包括頭文件，故事鏈接，文本區(qū)等條目的樣式，因而可利用 div 標(biāo)簽輕松布局。 展示區(qū) 主要是定義了包括圖片的調(diào)用以及文字的顯示方式 效果圖 ○ 3 窩窩圖片網(wǎng)頁 利用網(wǎng)上模板的資源，只需將相應(yīng)的 CSS 文件和 Javascript文件添加到指定的文件夾中即可實(shí)現(xiàn)相冊(cè)中圖片風(fēng)格的統(tǒng)一以及相冊(cè)的翻閱功能等： link href=css/ rel=stylesheet type=text/css 8 效果圖 ○ 4 窩窩留言 該部分因?yàn)檩^為簡單所以并沒有在添加 css 的類和 id，只是利用了 table 和 ul 來做相應(yīng)的布局。 9 2. 論壇網(wǎng)頁部分 （ 1） 主 Css 和 JavaScript 定義 網(wǎng)站通過 css 文件定義了一些基本標(biāo)簽的樣式， 主JavaScript 文件是與上一部分的相同的，同樣是實(shí)現(xiàn)對(duì)文件的保存和調(diào)用功能。 （ 2） 網(wǎng)頁實(shí)現(xiàn) ○ 1 論壇主頁 論壇采用是一種簡約的風(fēng)格，簡單的定義了菜單區(qū)的頭文件，鏈接的 css 樣式，通過 div 實(shí)現(xiàn)布局 效果圖 ○ 2 游戲區(qū) 游戲區(qū)的 css 樣式與上頁相同，并沒有加入新的布局，只是在頁面進(jìn)入時(shí)加入了如下 JavaScript 代碼，以實(shí)現(xiàn)文字隨鼠標(biāo)浮動(dòng)的效果。其代碼如下： script ! /*******************************Copyleft*********************10 ********************* Arkys Web Builder Toys :: Dreamweaver3 :: Flying fonts follow your mouse Coder by Arky。 data:2021121。 mailto:。 icq:17119978 for more tools, please visit *********************************************************************************/ 另外在游戲區(qū)還加入了五個(gè) JavaScript 小游戲，每個(gè)小游戲各對(duì)應(yīng)一個(gè)網(wǎng)頁。 效果圖 ○ 3 留言板 該部分也依然延續(xù)了主 css 文件中的布局，只是在 html 文件中加入了一個(gè) table 標(biāo)簽，因?yàn)檫€沒有連接數(shù)據(jù)庫所以現(xiàn)在其實(shí)還無法實(shí)現(xiàn)留言的功能，但可以完整的顯示界面。 效果圖 11 三 .設(shè)計(jì)小結(jié) （ 1）設(shè)計(jì)中遇到的問題及解決 通過 JavaScript 文件編寫一些特效，但通過網(wǎng)頁調(diào)用時(shí)發(fā)現(xiàn)有些 JavaScript 文件無法將其添加到 html 的 onload 事件中，也就是網(wǎng)頁在加載的時(shí)候并不調(diào)用該 JavaScript。雖然通過將 其改為 id的形式在 div 標(biāo)簽中調(diào)用可以實(shí)現(xiàn)，但是目前還不知道有些 js 程序無法隨 html 的 onload 加載的原因。 一開始并沒有寫過多的 css 方法， css 也只是將基本的標(biāo)簽加以定義，而網(wǎng)頁的各部分都是通過 talbe 標(biāo)簽來實(shí)現(xiàn)的，后來發(fā)現(xiàn)如果一個(gè)網(wǎng)頁有多個(gè)衍生的網(wǎng)頁，這樣不但要反復(fù)的定義 table而且如果發(fā)現(xiàn)錯(cuò)誤，一點(diǎn)一點(diǎn)的修改也過于麻煩，因而采用了再css 里定義各種區(qū)域的類和 id 的方法，結(jié)果是編譯變的簡單很多。 由于寫了過多的 css 文件，所以在調(diào)用的時(shí)候發(fā)現(xiàn)會(huì)有覆蓋的現(xiàn)象出現(xiàn)，因此將各部分網(wǎng)頁以及相應(yīng)的 css 保存在同一個(gè)文件中，結(jié)果顯示正常。 （ 2）心得體會(huì) 本次課設(shè)雖然做了 19 個(gè)網(wǎng)頁，但是由于時(shí)間關(guān)系，還是有許多想要實(shí)現(xiàn)的功能沒有實(shí)現(xiàn)，同時(shí)還有許多問題沒有解決。比如有些文字的排版還不夠整齊，而且背景音樂只加載到了主頁還沒有加載到其他分頁面。同時(shí)還希望能夠通過 IIS 假設(shè)站點(diǎn)能夠使其變?yōu)檎嬲木W(wǎng)站，是諸如注冊(cè)和留言頁面能夠連接到數(shù)據(jù)庫。 此次課程設(shè)計(jì)加深了我對(duì) css 和 javascript 的認(rèn)識(shí)。之前我也只是在課本上知道兩者的主要特點(diǎn)和大致內(nèi)容，但是這次實(shí)踐 之后，我更清楚了所謂的頁面風(fēng)格和函數(shù)功能的體現(xiàn)。特別是相冊(cè)的制作，它并非直接用 CSS 實(shí)現(xiàn)，而是很靈活地利用div 將相應(yīng)的代碼作為一個(gè)塊來實(shí)現(xiàn)切換圖片的功能，所以，并不是一種功能只能由一種技術(shù)來實(shí)現(xiàn)，我們應(yīng)該學(xué)會(huì)用更簡12 單明了的技術(shù)實(shí)現(xiàn)更為復(fù)雜的功能，我認(rèn)為，這才是技術(shù)發(fā)展的最終目標(biāo)。 通過本次課設(shè)我加深了對(duì) web 編程的理解，能夠比原來更為清晰的認(rèn)識(shí)到網(wǎng)頁的制作。提高自己的
畢業(yè)設(shè)計(jì)相關(guān)推薦
鄂ICP備17016276號(hào)-1