web課程設計報告_第1頁
web課程設計報告_第2頁
web課程設計報告_第3頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、精品Web應用開發(fā)基礎設計題目：電影網站設計與實現 _系部： _信息技術工程學院 _專業(yè)： _xxxxxxxx_班級： _xxxxxxxx _學號： _xxxxxxxxxxxx_姓名： _xxxxxxx_welcome精品目錄一、實驗目的 .3二、實驗需求 .3三、實驗功能 .3四、實驗內容 .31.設計主頁 .32.主頁頁面設計 .63.博客頁面設計 .64.關于我們 .65.常見問題 .7五、實驗心得體會 .71.標題 .72.內容的采集 .73.圖片 .74.網頁排版 .85.背景 .86.其它 .8六、實驗不足 .9welcome精品一、實驗目的1. 學會使用 HTML 和 CSS 技

2、術實現靜態(tài)網站的搭建和設計，完成五個網頁的建設，網站要呈現出來電影推薦的主題。2.掌握網站開發(fā)的原理和相關技術，尤其是要具備用HTML編寫網頁的能力。3. 掌握 HTML 基礎標簽（標題標簽、段落標簽和換行標簽）、列表（有序、無序）。4. 掌握基本框架的創(chuàng)建并使用框架實現網頁的整體布局。5. 掌握表格的基本創(chuàng)建、表格屬性的使用及使用表格實現網頁的整體布局。6. 掌握 CSS 多種屬性及使用方法（字體、文本、背景、邊框、邊距及填充）。二、實驗需求電影推薦是本網站打造的一個電影社區(qū)，幫助用戶找到想要的電影、影人、影院、電視劇。比如通過各大網站的影評，電影的評分幫助你找到你想要的電影。滿足用戶對于電

3、影的多種不同需求，充分釋放你對電影的熱愛。三、實驗功能1.用 HTML 設計制作網頁。 用記事本或dreamweaver作為工具， 利用 HTML 語言制作簡單網頁。2. 用框架、表格和表單設計制作網頁。3. CSS 樣式的使用。 CSS 的類、選擇符和標識符的使用，內嵌式、外接式樣式的使用4. javascript 的使用。在 HTML 網頁上使用，用來給 HTML 網頁增加動態(tài)功能。四、實驗內容1.設計主頁welcome精品主條目內容包括：主頁：網站打開后看到的第一個頁面，主頁文件名是index加上擴展名 .html 。index.hml頁面搭建<!doctype html>申

4、明文檔的類型是html5<meta charset="utf-8" />網頁的編碼格式是UTF-8<meta content="IE=edge,chrome=1">讓網站支持IE 瀏覽器。<title>電影網站：首頁</title>博客 : 博客上的文章通常根據張貼時間，以倒序方式由新到舊排列。本博客結合了文字、圖像，能夠讓讀者以互動的方式留下意見，是許多博客的重要要素。博客內容以圖片介紹為主，本應有一些博客專注在藝術、攝影、視頻、音樂、播客等各種主題，但由于初學尚有不足。<li><a h

5、ref="index.html">主頁 </a></li><li class="active">博客 </li><li><a href="blog.html">博客 </a></li><li class="active"><a href="about.html">關于我們 </a></li><li><a href="co

6、ntact.html">聯系我們 </a></li><li><a href="404.html">常見問題 </a></li><h5> 關于我們 </h5><p style="height:260px">本站整理各種經典， 熱評的電影。本著分享精神。 </p>聯系我們： 如果你對我們的網站有啥建議和意見，請聯系我們。 這也是對網站不足的一個回饋。反饋者可以將名字郵件信息等提交發(fā)送給我們。<div class=&qu

7、ot;contact">welcome精品<h3>聯系我們 </h3><p class="love">歡迎聯系我們 </p><div class="contact-form"><div class="col-md-6 contact-grid"><form><p class="your-para">你的名字： </p><input type="text"onblur=

8、"if (this.value = )” ><p class="your-para">你的郵件： </p><input type="text" onblur="if (this.value =) ''><p class="your-para">你的信息： </p><textareacols="77"rows="6"onfocus="this.value=''&qu

9、ot;onblur="if (this.value = ) "></textarea><div class="send"><input type="submit" value="提交 "></div></form></div><div class="col-md-6 contact-in"><p class="sed-para">聯系我們 </p><p cl

10、ass="para1">你對我們的網站有啥建議，請聯系我們，謝謝。</p></div >welcome精品常見問題： 網站開發(fā)初期仍然存在一些不足，可以獲得管理員幫助。暫且也可以做為即將開發(fā)的模塊。2.主頁頁面設計1.）第一板塊：滾動部分分為四個大板塊，分別介紹最新最熱上映的大片。以及大片宣傳片效果圖。也可以選擇滾動到相對應的鼠標指向頁面。2.）第二板塊：主要設計為精選的部分電影，以及其上映的時間。運用到的動態(tài)效果是左向滾動效果。3.）第三板塊：底部分左右倆快，左邊介紹部分電影的詳細情況。包括周邊電影院，以及相關影院鏈接和手辦，獨家新聞，片花等

11、相關信息。右邊則是電影熱度的一個實時排行情況。4.）第四板塊：反饋模塊。提供類似于相關合作方的反饋鏈接。如果你有什么需要可以通過這些方式轉告給我們。3.博客頁面設計A. 頁面左側為最新電影的相關博客和看過這些電影的人相關評論和留言。B.在此頁面右側你可以看到最新電影的相關類別。類別目錄下包括：1.）名人訪談2.）熱映電影3.）電影影評4.）電影最新新聞5.）以及你最喜愛的男女演員的詳細介紹4.關于我們welcome精品在這里，也可以通過此方式了解本網站的功能，以及接下來將要更新的一些相關信息。你也可以表達你的意見或者建議。通過郵件的方式或者我們提供給瀏覽者的聯系方式轉達給我們還需要亟待改進的地

12、方。這里是一個網站人員與瀏覽者反饋的平臺。在此基礎上將來也可以引進相關聊天的軟件，以便更好更快的服務于大眾。5.常見問題這是一個網站的最后模塊。留給可能出現問題網頁的快捷解決方式。以便快速解決電影影評網帶來的一些困擾。五、實驗心得體會做好主頁，并不是一件容易的事，它包括個人主頁的選題、內容采集整理、圖片的處理、頁面的排版設置、背景及其整套網頁的色調等很多東西。1. 標題在個人主頁中標題起著很重要的作用，它在很大程度上決定了你整套個人主頁的定位。一個好的標題必須有概括性、簡短，有特色、容易記，還要符合自己主頁的主題和風格，決不要取一個名不符實的"好名字 " ，別人第一次上了當

13、，下次再也不會光顧了。2. 內容的采集選好標題后，開始采集內容，內容必須與標題相符，在采集內容的過程中，應注重特色，所謂特色應該是有一些自己的東西。個人主頁中的特色，應該突出自己的個性，把自己的興趣、愛好盡情地發(fā)揮出來，因為在網絡上不受限制。3. 圖片做個人主頁不能只用文字，必須在主頁上適當地加一些圖片，增加可看性，俗話說"一圖勝千言 "，我想不無道理，一張?zhí)幚淼煤玫膱D片不需要多做任何解釋，就能讓人一目了然，讓人去思考，去了解它。當然處理得不好的以及無關緊要的圖片最好不要放上去，welcome精品否則讓人覺得是累贅，同時也影響網頁的傳輸速度。圖片不僅要好看，還要在保證圖片質

14、量的情況下盡量縮小圖片的大小，在目前網絡傳輸速度不是很快的情況下，圖片的大小在很大程度上影響了網頁的傳輸速度。那么如何精簡圖片的大小呢，一般來說，圖片顏色較少的及在256 色以內的最好把它處理成gif 圖像格式，如果是一些色彩比較豐富的圖片，最好把它處理成jpg 圖像格式，因為gif 和 jpg 各有各的壓縮優(yōu)勢，應根據具體的圖片來選擇壓縮比。4. 網頁排版網頁頁面整體的排版設計也是不可忽略的，要讓讀者在狹小的電腦屏幕上閱讀，很重要的一個原則是合理地運用空間，讓自己的網頁井井有條，留下必要的空白，人覺得很輕松。不要把整個網頁都填得密密實實的，沒有一點空隙，這樣會給人一種壓抑感。5. 背景網頁的

15、背景并不一定非要用白色，選用的背景應該和整套頁面的色調相協調。合理的應用色彩是非常關鍵的。6. 其它如果想自己的網頁更有特色一些，可適當地加一些網頁制作的技巧，諸如聲音、動態(tài)網頁、 java 、applet等，當然這些小技巧最好不要加太多，它會影響網頁的下載速度。等個人主頁做得差不多了，可別忘了在個人主頁上放一個留言板、一個預留板塊。前者能及時獲得參觀者的意見和建議，及時得到網友反饋的信息，最好能做到有問必答，用行動去贏得更多的訪問者；后者能讓知道主頁參觀者想法后，可以及時調整設計，適應不同的瀏覽器和參觀者的要求。通過這次課程設計，使我加深了對web 應用結構的理解，對HTML 、css 等有

16、了更深的了解，比如：welcome精品1.html 的主體標簽 <body> </body>:2.換行標簽 <br>3.分段控制標簽 <p> ： <PALIGN= 參數值 > </p>4.原樣顯示文字標簽 <pre></pre>.5.插入水平線標簽 <hr>6.標題文字標簽 <hn> ：格式： <hn align=參數標題內容 </hn>7.無序列表 <UL>8.有序列表 <OL>9.圖像插入標簽 <img>10. 建立超鏈接的標簽為 <A> 和 </A>11. 框架集 <frameset> 控制12. 嵌入多媒體文件 <EMBED SRC=" 音樂文件地址 ">13. 文件輸入框，<input type=“ file ” na

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論