201709考試批次網頁制作結課作業學生姓名 學習中心 學號 專 業 年級層次北京語言大學網絡教育學院網頁制作結課作業注意：本學期所布置的結課作業，請同學一律按照以下要求執行：1) 結課作業提交起止時間：2017年8月2日-9月11日。（屆時平臺自動關閉，逾期不予接收。）2) 結課作業課程均需通過“離線作業”欄目提交電子版，學院不收取紙介的結課作業，以紙介回寄的作業一律視為無效；3）截止日期前可多次提交，平臺只保留最后一次提交的文檔，閱卷時以最后一次提交的結課作業為準，截止日期過后將關閉平臺，逾期不交或科目提交錯誤者，按0分處理；4) 提交文檔要求：提交的文檔格式為doc、rar，大小10M以內；5) 必須嚴格按照每門課程的答題要求完成作業，沒有按照學院要求來做的結課作業，將酌情扣分。一、設計題目（請在以下網頁設計作品中任選其一，最后整理一份網站設計與實現的報告即可，具體要求如下。總分100分）1、制作個人主頁2、制作公司網站主頁3、制作環保網站網頁4、制作BBS注冊網頁5、制作購物網站6、制作班級主頁7、制作家鄉介紹網頁8、制作汽車世界網頁9、制作銷售書店網頁10、制作美食天下網頁二、網站設計與實現具體要求1、設計題目：選擇一個你最感興趣的主題，進行網站設計與開發，網站內容具有實用價值。2、開發環境： 綜合使用Dreamweaver CS、CSS、HTML、Flash CS、Fireworks CS、VBScrip（JAVAScript）等工具和語言，但動態網頁制作不做硬性規定。3、內容要求： 內容不限，但要求主題思想明確； 具體的設計所需素材，可在網上查找，但不得有嚴重侵權行為，一經發現按零分處理。4、技術要求： 選用Div、表格、框架、層等若干技術設計和布局網頁； 超級鏈接（一般鏈接、電子郵件、錨點等）的使用； 行為的運用、時間軸動畫、JavaScript特效等； 其他：按自己的喜好，添加的其他技術效果。5、網站結構要求：網站頁面組織結構清晰合理，要求站點至少要有三層結構，至少三個網頁以上。網站中元素要包括：文字、圖像、聲音、Flash動畫等。6、網頁界面要求： 網頁頁面結構清晰、美觀大方、形式新穎、內容充實、瀏覽方便、鼓勵創新； 網頁中沒有錯別字； 每頁均可以返回首頁和鏈接到其它頁，每頁都有導航條； 可以自己制作圖片、動畫等以增加網頁展示效果。 7、網站文件結構：網站建立的文件目錄結構應合理，除首頁（index.html或index.htm）外，其它頁文件、圖片等應放在相應的文件夾下，并且所有文件名、文件夾名、圖片名等都必須使用英文小寫字母。三、撰寫設計報告要求：最后整理一份網站設計與實現的報告，內容包括目錄、需求分析、網站網頁設計與實現內容，內容組織邏輯要合理，層次清晰，語言要準確通順。其具體來講最好有以下內容：1、網站主題介紹；2、網站需求描述；3、網站頁面結構規劃與設計、網站文件夾目錄規劃、網頁布局規劃與設計；4、網頁的實現（主要的步驟及實現代碼等）；5、總結；6、按合理的順序附主要源代碼。四、評分總則1、作業成績2、設計報告 內容邏輯組織合理，層次清晰； 內容充實，重點突出，詳略得當； 觀點表達正確，語言準確通順； 圖表制作正確規范； 排版規范美觀。個人網站設計報告 一、準備工作 經過本學期對網頁設計基礎這門課的學習，我對網頁設計以及相關工具的使用有了深入的了解，在本學期末設計制作主題為個人主頁的網頁。經過考慮對制作工具的篩選，決定用Dreamweaver做個人網頁，設計和制作圖片、頁面及圖標等。本網站內容充實，在主頁的設計上運用了模板、框架等。分頁面上運用了導航條。插入了動態圖片以及視頻等增加了美觀度，在首頁的設計上本著簡單易懂的原則，用戶只要點擊鏈接就能看到自己想看到的鏈接內容。網站的首頁設置了背景音樂，使訪問者在瀏覽的同時還能欣賞到悠揚的旋律。二、作品結構利用框架（選取了左右下的框架結構）設置基本模樣。左邊框架作為導航欄，下邊的部分作為滾動圖片欄，右上方一大部分作為各個子網頁的瀏覽區，在導航欄插入了音樂，以便放入的音樂不會隨著鏈接的進入而消失，增添了網頁的趣味性。導航欄共包括：我的檔案、我的日志、我的班級、我的寵物、視頻欣賞等五項，分別鏈接到各個子頁面，在導航區的最下方還設置有返回歡迎頁面的鏈接，并且設置導航區的背景、顏色、插入動態圖片等。三、設計方案和步驟 現在重點介紹一下我的網頁的制作過程以及其間遇到的種種困難。 開始時我選擇了DreamweaverMX作為制作軟件，看書學習了一些基礎的東西之后就著手開始了我的網頁制作，我先初步對網頁作了一些頁面規劃，然后建立了站點，用軟件中的一些基本的功能制作，首先是封面，由于Dreamweaver MX沒有插入藝術字的功能，所以封面上的藝術字是我先在Word文檔里制作好了之后用圖片的方式插入的。接著有開始設計主頁，我主要用層來設計版面，再適當配合表格，網頁基本的框架就出來了，但這時卻遇到了一個很令人頭疼的問題：突然所有插上去的圖片都不能顯示了！我用盡了所有能想出來的方法，請教了很多的電腦高手都不能把這個無法解釋的問題解決，就連重新安裝DreamweaverMX也毫無作用，由于是借別人的電腦，我就一氣之下把那些東西都刪光了，連Dreamweaer也不例外，當時我真的很失望，想到這兩天做的東西一下全沒了就很是接受不了，我曾經一度想放棄，不過冷靜了之后我決定從頭開始。我換了Frontpage，由于對Frontpage一無所知，也沒有相關的書籍，所以剛開始建站點和網頁的方法只能向別人請教。不過在開始制作了之后我發現Frontpage很多功能和Word相似，于是很快掌握了其許多基本的功能。接著我又熬了一個通宵，決定把前面的損失彌補過來。前面的工作也不能算完全白做，因為至少我在重新制作的時候不必話太多的時間去重新設計版面。還是按照原來的設計，只是改動了一些，大體的框架還是沒有改變。在我學習的這寫階段，我的網頁學的不是很好，所以，我的網頁心德寫的不太好還請老師能給以評論，但是，由于我在學習時看了一些關于網頁方面的書籍，還是積累了一些有關網頁設計方面是知識，就是不是太好，具體是總結了以下幾點有關網頁方面的知識。第一、要靈活運用網頁中的基本樣式 熟悉網頁設計的網友就知道，調用Style的方法很多，我們可以單擊鼠標右鍵選擇Custon Style來調用Style標準，也可以在狀態欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣，但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style標準，在網頁代碼中就生成一個span標簽，這樣的標簽一多就會使文件十分臃腫而且影響瀏覽器的解析速度，所以我們應盡量使用狀態欄中的元素列表來調用Style。 第二、就是要活用Format Table命令 在復雜的網頁設計中，表格的應用是最多的，因為利用表格可以自由地控制文本和圖象在網頁上出現的具體位置，從而使整個網頁看上去緊湊統一。Dreamweaver在這方面也不甘落后，我們可以使用其中的“Format Table”（格式化表格）命令來快速地對表格應用預先設計好的樣式。要使用預先設計好的樣式，先將光標置于表格的任意一個單元格內，再選擇“Command”“Format Table”命令， 在隨后出現的對話框中，從左邊的列表中選擇一個設計方案。按“Apply” 鍵來查看效果，如果不滿意的話，還可以重新設置或者修改部分參數的值，如邊界粗細，背景顏色等等。 第三、同時鏈接到兩個網頁 我們都知道超級鏈接一次只能連到一個頁面。如果我們要想一次在不同的框架頁中打開文檔，可以使用“Go To URL”javascript 行為。打開一個有框架的網頁，選擇文字或圖象，然后從行為面板中選擇“Go To URL”。我們會注意到Dreamweaver會在“Go To URL”對話框中顯示所有可用的框架。選擇其中一個我們想鏈接的框架并輸入相應的URL后再選擇另一個框架并輸入另一個URL。 第四、不給文件起中文名稱大家在制作好了網頁后，通常會給網頁起一個具有代表性的中文名稱，一來能使人一看文件名就能大概了解文件所包含的內容，二來能夠方便各個超級鏈接之間的相互調用。但如果你在Dreamweaver中這樣做，就會發現Dreamweaver對中文文件名支持得不是太好，經常會有頁面調用不正確的現象發生，所以我們以后在Dreamweaver中保存網頁的時候，盡量用英文或者數字作為文件名稱，這樣就可以避免上面的出錯現象。 第五、巧妙設置字體分辨率 我們在制作網頁的時候，經常有這種體會，那就是制作好的網頁在本地計算機上瀏覽時很正常，但在另外一臺計算機上瀏覽時發現原本漂亮的網頁變得歪歪扭扭了，這是為什么呢？原來各個計算機的分辨率要使你的主頁在不同的分辨率下都能正常顯示，在 Dreamweaver中得到了較好的解決。在文檔窗口的右下角，Dreamweaver 顯示當前文檔被設計成的分辨率大小。單擊哪個數字，在彈出式菜單中可以為當前的頁面指定顯示分辨率，通過修改可以使你的主頁更具靈活性。使不同分辨率的顯示器都能較好地顯示。第六、巧妙隱藏標簽 如果在網頁中插入了不可見的元素時，Dreamweaver會自動在頁面上添加一個與之相應的元素標簽，以便于我們選擇不可見元素。但這并不全是件好事，比如我們在一個有很多層的頁面中的第一行便插入一個表格，就會發現由于首行排列了太多的層元素標簽而使得表格自動退到了頁面的第二行，雖然在瀏覽時并不影響效果，但這確確實實會阻礙我們的工作。所以當我們覺得某個元素標簽礙手礙腳時，就索性將之屏蔽掉。方法是按Ctrl+U打開Preferences面板，在Category中選中Invisibel Elements，在面板的右邊將會出現所有的元素標簽。只要將不需要的元素標簽前的勾去掉，以后它就保證不會再出現了。 第七、善用拖放技巧 我們在使用Dreamweaver編輯網頁的時候，經常需要插入一些圖象什么的，假設要插入的圖象很多，按照常規方法來操作就顯得非常麻煩。我們可以利用拖放技巧來很好地解決這個問題。首先我們把Dreamweaver的操作窗口變成活動窗口，以騰出空間來顯示Explorer窗口，找到要插入的圖象文件后，把它們一一用鼠標拖動到網頁的適當部位，Dreamweaver將自動把這些圖象的url添加到文件的HTML代碼中，當然這里要求被拖動的圖象文件必須是gif、jpg等web圖象格式的文件。對于已經在網頁中的圖象也是一樣，直接拖過來就可以了。但如果被拖動的圖象上有超級鏈接，就不可以再使用拖動技術了，因為那時拖過來的僅僅是超級鏈接地址。 第八、自動設置更新時間 我們知道一個網頁要想獲得更多的回頭率，一個很重要的一條就是要不斷更新。但對于我們這些個人網頁來說，要天天及時更新恐怕不是很容易的事情。因此，我們希望網頁能自動更新，下面筆者就提供一個能自動更新修改時間的源代碼，我們只要把這段源代碼添加到之間就能實現更新時間的目的了： ；二是用鼠標依次單擊Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag，并從中選擇a，然后在decoration中選中none，最后單擊確定就成功了。 第九、巧妙復制文字 在幾個不同的應用程序中間相互復制文字，是我們在實際工作中可能要常做的事情。但是，如果我們從Dreamweaver中復制編輯區中的文字到另外一個應用程序的時候，HTML代碼和文字將一起被復制過去了，那么我們該如何才能只把編輯區中的文字復制下來呢？我們知道，通常復制時都用快捷鍵 Ctrl - C 來操作，如果我們在復制的時候多按一個C鍵，那么Dreamweaver將只會復制選中的文字了。十、善用快捷鍵 為了提高操作的效率，我們可以在Dreamweaver中使用快捷鍵，例如使用Ctrl-B或Ctrl-I來為文字應用黑體或斜體格式，也可以使用以下一些鍵盤快捷鍵來為選中的文本應用HTML格式：Ctrl-0: 無格式 Ctrl-T: 段落 Ctrl-1: 標題 1 Ctrl-2: 標題 2 Ctrl-3: 標題 3 Ctrl-4: 標題 4 十一、自動關閉網頁 如果我們希望自己的網頁在指定的時間內能自動關閉，不妨在網頁源代碼中的標簽后面加入如下代碼： 其中代碼中的3000表示3秒鐘，它是以毫秒為單位的。十二、巧妙設置對象名稱 我們在用Dreamweaver來制作非常復雜的效果時，有可能需要經常重復地使用某一個或者多個對象，例如我們經常需要定位某個特定的表格、圖象等，如果我們沒有給某一個網頁中的多個對象取名的話，那么在重復應用這些對象的時候，可能很麻煩或者容易出錯。為了能夠方便調用這些對象，我們應該在每創建一個新的對象時，都記得給它取一個有代表性而且比較容易記憶的名稱。在給這些對象命名時，我們可以通過對象的“屬性”面板來操作就行了。 十三、為圖象鏈接增加動態效果 有時我們為了要達到一種逼真的效果，希望鼠標移動到某個鏈