HTML網(wǎng)頁課程設(shè)計報告（我的家鄉(xiāng)）

時間：2022-07-24 18:06:01 | 來源：網(wǎng)站運營

時間：2022-07-24 18:06:01 來源：網(wǎng)站運營

課程設(shè)計

摘 要

菏澤（Heze），是山東省地級市，中國牡丹之都 [1-14] ，古稱曹州，位于山東省西南部，魯蘇豫皖四省交界地帶，東與濟寧市相鄰，東南與江蘇省徐州市、安徽省宿州市接壤，南與河南省商丘市相連，西與河南省開封市、新鄉(xiāng)市毗鄰，北接河南省濮陽市。介于北緯34°39′—35°52′，東經(jīng)114°45′—116°25′之間，南北長157千米，東西寬140千米 [89] 。面積12239平方公里 [93] 。根據(jù)第七次人口普查數(shù)據(jù)，截至2020年11月1日零時，菏澤市常住人口為8795939人。

菏澤原系天然古澤，濟水所匯，菏水所出，連通古濟水、泗水兩大水系，唐更名龍池，清稱夏月湖。清雍正十三年（1735年）升曹州為府，附郭設(shè)縣，因南有“菏山”，北有“雷澤”，賜名菏澤。菏澤歷史悠久，享有“天下之中”之譽，《禹貢》九澤之菏澤、雷澤、大野澤、孟渚澤皆在境內(nèi)。人文始祖伏羲、東夷之帝少昊、賢明君主帝舜、兵主戰(zhàn)神蚩尤、改革家吳起、軍事家孫臏、農(nóng)學(xué)家氾勝之、經(jīng)濟學(xué)家劉晏、文學(xué)家溫子升等都出生在這里，劉邦登基稱帝、曹操成就霸業(yè)、黃巢起義、宋江聚義等都發(fā)生在菏澤。




目錄

一、作品簡介 1

二、設(shè)計方案 1

1. 軟硬件環(huán)境 1

2. 色彩方案 1

1 首頁 1

2. “景點地圖”頁面 3

3. “景點介紹”頁面 4

4. “數(shù)碼剪影”頁面 5

5. “分享交流”頁面 5

四、結(jié)論與心得 6

五、參考文獻 7

一、作品簡介

1. 網(wǎng)站的設(shè)計：DIV和表格的完美結(jié)合，使得整個網(wǎng)站結(jié)構(gòu)清晰明了。多個也頁面的相互鏈接，更使得整個網(wǎng)站生動活潑，趣味盎然。
2. 網(wǎng)站的主題：我的家鄉(xiāng)菏澤。
3. 網(wǎng)站的風(fēng)格：網(wǎng)站使用鮮艷的背景，鮮艷亮眼，在炎炎夏日讓人頓覺清爽，加上“我的家鄉(xiāng)菏澤”的網(wǎng)站名稱，讓人更感舒緩放松。同時網(wǎng)站利用文字加圖片的解析，讓人更容易了結(jié)整個網(wǎng)站的布局。合適的布局更吸引觀眾的眼球，讓人更加愛上這個網(wǎng)站，不愿離去。
4. 功能分析：各個鏈接均在同一窗口打開，大大節(jié)約瀏覽者時間，同時也方便使用。

二、設(shè)計方案

1. 軟硬件環(huán)境

1）硬件環(huán)境：

CPU型號：Inter酷睿i3

CPU主頻：1.8GHz

內(nèi)存容量：2GB

硬盤容量：500GB

顯卡芯片：AMD Radeon HD 7450M+Inter GMA HD 4000

2）軟件環(huán)境：

操作系統(tǒng)：預(yù)裝Windows10

2. 色彩方案

本網(wǎng)站所有網(wǎng)頁主要以暖色調(diào)的顏色為主。利用最少的顏色，達到最豐富的效果，其實并不難實現(xiàn)?？纯催@個組合，只用了一種顏色，調(diào)整了不同的色調(diào)。網(wǎng)站的效果純凈、優(yōu)雅，且不失有趣。

三、 實現(xiàn)過程

1 首頁

1)首頁效果圖

首頁效果圖如圖3.2所示，分為四部分，分別是頭部、主體，其中頭部有設(shè)計的網(wǎng)站背景；主體部分分為導(dǎo)航和網(wǎng)頁內(nèi)容，其中導(dǎo)航菜單體現(xiàn)了整個網(wǎng)站的欄目結(jié)構(gòu)，包括：首頁、景點地圖、景點介紹、數(shù)碼剪影，分享交流本網(wǎng)站就是圍繞這幾個模塊展開的。













圖3.2 首頁效果圖

2) 首頁結(jié)構(gòu)框圖

首頁結(jié)構(gòu)框圖如圖3-3所示，是通過盒子與盒子的嵌套關(guān)系實現(xiàn)的。










圖3.3 首頁結(jié)構(gòu)框圖

div代碼如下：

<div id="container">

<div id="header">

<div id="logo">logo</div>

<div id="right">圖片</div></div>

<div id="nav">導(dǎo)航</div>

<div id="content">

<div id="menu">

<div id="menu_top">圖片</div>

<div id="menu_cd">菜單</div></div>

<div id="main">主體</div></div>

<div id="footer">版權(quán)說明</div></div>




#frame布局設(shè)置將網(wǎng)頁整體化了，其他所有布局均包含在里面。







圖2-4 #frame布局代碼

2. “景點地圖”頁面

圖3.5 “家鄉(xiāng)美景”頁面

界面如上所示，采用的是和首頁相同的模板，Header、Nav以及Footer部分都是一樣的樣式，只是網(wǎng)頁中間的Content部分不一樣，在本頁中，我將六張美食的圖片以三行兩列顯示，圖片下方用灰色字體表明美食的名稱，圖片和文字均建立了超鏈接，單擊任意圖片，可以進入相應(yīng)美食的介紹頁面。

在設(shè)計時，我遇到的問題是，每張圖片都有邊框，后來我在css文件中寫上：

img{ border:0px;}

就去掉了圖片的邊框，使頁面更美觀。

3. “景點介紹”頁面

仿照“景點地圖”頁面，內(nèi)容包括：界面、文字描述界面內(nèi)容和特效、遇到的問題、如何解決的、本網(wǎng)頁的特色。

4. “數(shù)碼剪影”頁面

5. “分享交流”頁面

遇到的問題寫法：

問題1：寫了但是沒效果




答：1清空緩存 2換個瀏覽器試一下 3對照文檔檢查 5替代法，換一種最簡單的寫法，看是否執(zhí)行




問題2：寬度，高度沒效果




答：1檢查是否被其他布局元素影響 2寬度% ，高度用px才有效果 3實在不行，換一種布局法




問題3：一個沒見過東西，不知如何下手




答：1靜下心來拆分，拆分成自己熟悉的東西 2現(xiàn)在很多東西網(wǎng)上拼拼湊湊有現(xiàn)成的 3平常多實踐

四、結(jié)論與心得

1.總結(jié)本網(wǎng)站特色

網(wǎng)頁分七個主題來介紹。層次明了，結(jié)構(gòu)清晰，首頁里垂直排列的菜單就給人以舒暢的感覺。

2.個人總結(jié)

在開始學(xué)習(xí)網(wǎng)頁設(shè)計這門課之前心里就無比期待，對這門課有著濃厚的興趣。在經(jīng)過一學(xué)期的學(xué)習(xí)之后，才發(fā)現(xiàn)原來制作一個網(wǎng)頁是如此的復(fù)雜，如此的需要耐心和時間。學(xué)習(xí)之后不僅比較全面的了結(jié)了網(wǎng)頁制作也設(shè)計基本原則，而且還可以自己動手做網(wǎng)頁了，這對我來說是最值得高興的事，因為可能會對我以后的工作有用。

其中的每個字都是自己一個個打上去的，網(wǎng)頁里面的分界線也是自己在photoshop里面做好然后插圖插進去的。因為字比較多，所以表格做的也很多，而且有些效果因為沒學(xué)過javascript，所以做不出來，花了很多時間，所以才導(dǎo)致于我到這么晚才完成。通過這次實訓(xùn)，我明白了，做網(wǎng)站不僅僅是追求好，更要有選擇在合適的時間內(nèi)可以完成的網(wǎng)頁制作，也明白了照搬照抄有時候并不是那么簡單，或許，自己原創(chuàng)會更好。

雖然實訓(xùn)完了就不用學(xué)網(wǎng)頁設(shè)計了，但是出于興趣，我會好好的自學(xué)它，爭取能夠做出很完美的網(wǎng)頁。

五、參考文獻

[1] 席金菊,何碧英 編著.網(wǎng)頁設(shè)計與制作[M].北京:科學(xué)出版社,2015

[2] 孫冬梅著 Dreamweaver CS5 完全學(xué)習(xí)手冊 北京：電子工業(yè)出版社，2011．

[3] Dreamweaver CS3網(wǎng)站建設(shè)與網(wǎng)頁制作案例指導(dǎo) 北京： 電子工業(yè)出版社，2009.

參考網(wǎng)站：