Web技術(shù)基礎(chǔ)大作業(yè)報(bào)告

1、Web編程基礎(chǔ)大作業(yè)報(bào)告學(xué)院：計(jì)算機(jī)學(xué)院姓名：學(xué)號(hào)：主要分以下幾個(gè)版塊： 1.主頁版塊 2.登錄版塊 3.注冊(cè)板塊 4.個(gè)人介紹板塊 5.分享思維模塊 6.發(fā)現(xiàn)思維模塊 7.我的思維模塊 8.搜索模塊 9.幫助模塊摘要：Web引申為“環(huán)球網(wǎng)”，而且，在不同的領(lǐng)域，有不同的含義。對(duì)于普通的用戶來說，web僅僅只是一種環(huán)境互聯(lián)網(wǎng)的使用環(huán)境、氛圍、內(nèi)容等；而對(duì)于網(wǎng)站制作、設(shè)計(jì)者來說，它是一系列技術(shù)的復(fù)合總稱（包括網(wǎng)站的前臺(tái)布局、后臺(tái)程序、美工、數(shù)據(jù)庫領(lǐng)域等等的技術(shù)概括性的總稱）。 下面是我對(duì)web簡(jiǎn)單的一個(gè)應(yīng)用，利用dreamwave工具，和photoshop軟件設(shè)計(jì)了一個(gè)具有個(gè)人風(fēng)格的個(gè)人網(wǎng)站，首

2、先我先從網(wǎng)站設(shè)計(jì)的方向和目的、網(wǎng)站設(shè)計(jì)中涉及的知識(shí)點(diǎn)、網(wǎng)站設(shè)計(jì)的整個(gè)流程出發(fā)，然后通過自己設(shè)計(jì)的這個(gè)個(gè)人網(wǎng)站作品來說明并演示一個(gè)完整的網(wǎng)站制作過程。本論文詳細(xì)的介紹了整個(gè)網(wǎng)站設(shè)計(jì)的全過程。雖然還有一些不足之處，但頁面整體比較美觀大方，具有個(gè)人風(fēng)格，效果良好。接下來的步驟是為所要訪問的網(wǎng)頁，向在那個(gè)IP地址工作的服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求。在通常情況下，HTML文本、圖片和構(gòu)成該網(wǎng)頁的一切其他文件很快會(huì)被逐一請(qǐng)求并發(fā)送回用戶。網(wǎng)絡(luò)瀏覽器接下來的工作是把HTML、CSS和其他接受到的文件所描述的內(nèi)容，加上圖像、鏈接和其他必須的資源，顯示給用戶。這些就構(gòu)成了你所看到的“網(wǎng)頁”。大多數(shù)的網(wǎng)頁自身包含有

3、超鏈接指向其他相關(guān)網(wǎng)頁，可能還有下載、源文獻(xiàn)、定義和其他網(wǎng)絡(luò)資源。像這樣通過超鏈接，把有用的相關(guān)資源組織在一起的集合，就形成了一個(gè)所謂的信息的“網(wǎng)”。網(wǎng)站規(guī)劃思想 當(dāng)今社會(huì)，靠什么成功？很多成功人士都說過這樣一句話：“成功來自百分之八十的人際關(guān)系和百分之二十的自身天分和努力?！睋?jù)此可以發(fā)現(xiàn)，擴(kuò)大人際關(guān)系網(wǎng)是十分重要的一項(xiàng)活動(dòng)，因此就需要一條聯(lián)系兩方的橋梁，這條橋梁是滿載信息的大流量的通道，在這信息時(shí)代，于是網(wǎng)絡(luò)成為了這當(dāng)之無愧的橋梁。我設(shè)計(jì)這個(gè)網(wǎng)站的思路就來源于此。 怎樣讓更多人了解你？怎么使別人更了解你？怎樣擴(kuò)大自己的接觸面？當(dāng)代是繁忙的一代也是講究高效率的一代，當(dāng)今面對(duì)這些問題，這時(shí)候的內(nèi)

4、斂不會(huì)被認(rèn)為是好的，最好的解決辦法我認(rèn)為是把自己推銷出去，我想通過網(wǎng)絡(luò)把自己的概況晾曬，方便別人更快捷更省事地得到相關(guān)信息，通過這種方式，也可以交到志同道合的朋友，可以一起研究探討，相互促進(jìn)，達(dá)到共贏。 既然這樣，那么網(wǎng)站的風(fēng)格自然是溫和、樸素、柔美的，這樣才能達(dá)到更高的親和力效果，同時(shí)也應(yīng)該具有喜悅性、創(chuàng)新性、活潑開朗性，展現(xiàn)個(gè)人品格及魅力。最重要的是要呈現(xiàn)一個(gè)真誠的自我在大家面前，樹立可信性、誠實(shí)性，消除虛擬因素，獲得大家的真誠對(duì)待和好感。網(wǎng)站的目錄結(jié)構(gòu)如下： help -幫助頁面的所有文件 CSS -存放外置CSS文件 home -存放JS、CSS、圖片、網(wǎng)頁 Images -存放圖片文

5、件login-sign in -存放注冊(cè)和登錄頁內(nèi)容相關(guān)的文件setting -存放自我介紹頁面相關(guān)所有文件thoughts -存放thoughts.html相關(guān)的文件share -存放分享相關(guān)的文件 head.html -首部頁面 Home,html -主頁面 foot.html -尾部頁面 index.html-導(dǎo)航頁面 JS -存放JS文件 綜合知識(shí)的運(yùn)用情況1、層的使用：在這次網(wǎng)頁設(shè)計(jì)過程中，使用了大量div層，因?yàn)樗`活好用，可以隨便拖動(dòng)，變大變小都很方便，而框架雖然也能達(dá)到這個(gè)效果，但是，它不夠靈活，不利于我所需要表達(dá)的效果的呈現(xiàn)，也許是不習(xí)慣的原因吧，覺得太死板了，當(dāng)然一些地方仍

6、然要用到它，體現(xiàn)清晰的結(jié)構(gòu)。2、使用鏈接：為方便讀者的查閱，在各頁面底部都設(shè)置了頁面鏈接。3、插入跳轉(zhuǎn)菜單為了使讀者能快捷的回到自己感興趣的頁面，于是在各個(gè)頁面都插入了跳轉(zhuǎn)菜單。4、設(shè)置水平循環(huán)滾動(dòng)的圖片5、使用彈出信息行為6、框架的使用網(wǎng)頁中涉及的知識(shí)點(diǎn) 1、可視化網(wǎng)站設(shè)計(jì)制作軟件dreamweaver的熟練使用，站點(diǎn)的創(chuàng)建、導(dǎo)入以及管理；2、主頁的創(chuàng)建和設(shè)置，模塊的保存與應(yīng)用和子網(wǎng)頁的創(chuàng)建、完成；3、用photoshop軟件對(duì)圖片素材進(jìn)行必要的處理；4、網(wǎng)站整體布局和超鏈接的添加； 遇到的問題及解決辦法難點(diǎn):1.從整體布局看較為合理，但是從局部來講存在一些技術(shù)上和嚴(yán)密性的不足。2.頁面美觀

7、度不夠高，Dreamewver CS6軟件應(yīng)用不夠熟練，軟件中所涉及得制作方法以及工具沒有更好的應(yīng)用。解決辦法：1.配色原則：避免網(wǎng)頁雜、亂，有時(shí)候單一色彩不為也是一種獨(dú)特，用色柔和，減少視覺混亂，對(duì)比度強(qiáng)的色彩不能應(yīng)用于一般網(wǎng)站。2.字體問題：字體是整個(gè)網(wǎng)頁最醒目的部分，若字體不協(xié)調(diào)會(huì)給人一種枯燥的感覺，避免用雜色字體，防止瀏覽者眼花繚亂。3.制作習(xí)慣：制作一個(gè)網(wǎng)頁首要的是完美的構(gòu)思，應(yīng)該先構(gòu)思好再動(dòng)手制作，素材搜集完整，根據(jù)主題選材，不能脫離主題，確保所用材料與主題相關(guān)。4.完整性：網(wǎng)站的基本格式完整，相關(guān)鏈接，友情鏈接必不可少，這也增加了網(wǎng)頁的方便性網(wǎng)頁截圖首頁1:本頁面用了<if

8、rame>框架做了頁頭和頁尾.且有圖片輪播,使用了js技術(shù)。頭部:中間:尾部:2登陸:本頁面主要是使用<ifram>框架引用foot.html和header.html.然后使用的js技術(shù)進(jìn)行登陸時(shí)的表單驗(yàn)證3注冊(cè):本頁面主要是使用<ifram>框架引用foot.html和header.html.然后使用的js技術(shù)進(jìn)行登陸時(shí)的表單驗(yàn)證以及表格的混合使用4首頁2:本頁面主要是CSS的四中布局的混合使用,實(shí)現(xiàn)圖文混排.5個(gè)人設(shè)置:本頁面主要是對(duì)表格的混合使用,表格與div標(biāo)簽的混合使用6分享思維:本頁面主要是對(duì)表單的使用 7我的維度:本頁面也是主要對(duì)CSS圖文布局的使用

9、8創(chuàng)意為度:本頁面主要也是對(duì)css的四中方式布局的使用9幫助頁面:本頁面主要是對(duì)<li>標(biāo)簽的嵌套混合使用.心得與體會(huì)： 這次網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)篇個(gè)人網(wǎng)站設(shè)計(jì)完成后，我收獲了很多，感觸也很深。我最大的感受就是理論不用于實(shí)踐終究是理論，說得難聽點(diǎn)那根本就是紙上談兵，止于理論的學(xué)習(xí)，將來是沒多少成績(jī)的，有前途發(fā)展的話也必將是少了更為之錦上添花的一筆。 當(dāng)然也深刻認(rèn)識(shí)了一點(diǎn)，那就是我們所學(xué)的知識(shí)雖說是很基礎(chǔ)很根本，但沒有根基怎么能建好別墅呢?所以說基礎(chǔ)知識(shí)是很重要的，我們?cè)趯W(xué)習(xí)過程中不能小看而去忽略它，它是一筆財(cái)富，能引導(dǎo)我們看得更遠(yuǎn)飛得更高。 通過這次作業(yè)，我發(fā)現(xiàn)一個(gè)很普遍的問題：我們往往是

10、眼高手低，學(xué)習(xí)這些知識(shí)時(shí)覺得它就是小菜一樁，但現(xiàn)在真的驗(yàn)證了“看花容易繡花難” 這句話，當(dāng)我們著手實(shí)踐時(shí)就不像我們想象中的那么簡(jiǎn)單了，每一個(gè)細(xì)節(jié)都需要注意，稍有不慎頁面就在預(yù)覽中變了樣，因此更需要我們細(xì)心和耐心地去完成，也就兩個(gè)字概括認(rèn)真，只有認(rèn)真對(duì)待才會(huì)從骨子里學(xué)到東西，才學(xué)到心里去了。 我覺得這次確實(shí)是很有意義的一次檢測(cè)，本來自我感覺良好的，結(jié)果實(shí)戰(zhàn)時(shí)還是存在很多問題的，平時(shí)學(xué)起來覺得很輕松就以為掌握了所學(xué)知識(shí)，但現(xiàn)在都忘記很多細(xì)節(jié)是怎么樣的了，因此開始著手時(shí)有些障礙，但我下定決心把以前的實(shí)驗(yàn)內(nèi)容都溫習(xí)一遍，遇到不懂的就及時(shí)查資料，比如翻閱資料書，百度，也請(qǐng)教同學(xué)，一起討論，相互學(xué)習(xí)，于是

11、最后也如魚得水，水到渠成，因此得到一個(gè)非常重要的結(jié)論只要自己想學(xué)只要自己有那份執(zhí)著與毅力，虛心的請(qǐng)教，勤于查閱相關(guān)資料就一定會(huì)有收獲的，真的當(dāng)今沒有什么知識(shí)是用不著的，在哪，哪里都是知識(shí)，只要自己持有高度的學(xué)習(xí)熱忱。當(dāng)然，我們?cè)趯W(xué)習(xí)過程中一定要及時(shí)鞏固、練習(xí)，掌握了也不一定熟悉，熟能生巧?。∥覀儜?yīng)該吸取這個(gè)教訓(xùn)，否則即使我們最終達(dá)到了目的，但我們走了很多彎路，而不是事半功倍的結(jié)果了。不過最終，經(jīng)過長久的堅(jiān)持與不斷的琢磨，看到了自己辛苦后的成果，盡管這還有很多不足，但看著它我心里充滿著喜悅，一分耕耘一分收獲，這永遠(yuǎn)是真理。完成自己的作品后我也觀賞了其他同學(xué)的作品，對(duì)比起來，各有千秋，當(dāng)然能從其中發(fā)現(xiàn)很多值得我去學(xué)習(xí)的地方，比如說有的頁面布局很好，有的頁面內(nèi)容很充實(shí)，看起來很有感覺。結(jié)構(gòu)清晰，頁面體積小，瀏