網(wǎng)站的設(shè)計與實現(xiàn) (2)
《網(wǎng)站的設(shè)計與實現(xiàn) (2)》由會員分享,可在線閱讀,更多相關(guān)《網(wǎng)站的設(shè)計與實現(xiàn) (2)(11頁珍藏版)》請在裝配圖網(wǎng)上搜索。
1、課題名稱: 網(wǎng)站的設(shè)計與實現(xiàn) 題目 網(wǎng)站的設(shè)計與實現(xiàn) 主要內(nèi)容: HTML就是英文Hyper Text Markup Language的縮寫,翻譯成中文就是“超文本標(biāo)識語言”。下面結(jié)合自己在教育教學(xué)和實踐中的一些經(jīng)驗,設(shè)計出用手寫HTML代碼制作網(wǎng)頁,目的就是使有興趣學(xué)習(xí)HTML語言的朋友,能盡快掌握和應(yīng)用HTML語言設(shè)計網(wǎng)頁。 應(yīng)達(dá)到的要求或技術(shù)指標(biāo): 使學(xué)者很快的掌握和應(yīng)用手寫HTML代碼制作網(wǎng)頁 主要研究方法或技術(shù)路線: 通過學(xué)習(xí)(HTML)語言,搜集一些素材,如圖片、音樂、一些插件等。 完成本課題應(yīng)具備的條件: 學(xué)習(xí)(HTML)語言認(rèn)識各種代碼的使用;經(jīng)常研
2、究頁面代碼 各階段任務(wù)安排:具體安排如下: 主要參考資料: [1] HTML 語言教程 [2]《暢通無阻Ⅲ》的網(wǎng)頁設(shè)計 北京:清華大學(xué)出版社 [3] 前沿電腦圖像工作室 巧學(xué)巧用Dreamweaver、Fireworks、Flash制作網(wǎng)頁 北京:人民郵電出版社。 [4] 程序設(shè)計語言 [5] 高手云集]收集整理,版權(quán)屬于原作者(網(wǎng)頁設(shè)計師) 200 5 年 4 月 28 日 【摘 要】 據(jù)研究發(fā)現(xiàn),頁面下載速度是網(wǎng)站留住訪問者的關(guān)鍵因素,如果20—30秒還不能打開一個網(wǎng)頁,一般人就會沒有耐心。做網(wǎng)頁可以用Dre
3、amweaver 、Frontpage軟件,但這些軟件在制作過程中,會產(chǎn)生很多沒有用的廢代碼,增大文件占用空間,影響網(wǎng)頁的下載速度,如果用手寫HTML代碼制作網(wǎng)頁,網(wǎng)頁簡潔,文件下載傳輸速度快。HTML就是英文Hyper Text Markup Language的縮寫,翻譯成中文就是“超文本標(biāo)識語言”。下面結(jié)合自己在教育教學(xué)和實踐中的一些經(jīng)驗,設(shè)計出用手寫HTML代碼制作網(wǎng)頁,目的就是使有興趣學(xué)習(xí)HTML語言的朋友,能盡快掌握和應(yīng)用HTML語言設(shè)計網(wǎng)頁。 關(guān)鍵詞: 圖象;表單;表格;表格進(jìn)階 【Abstract】 Title:The website's design with re
4、alize By discovering ,It’s a key factor that the speed of for the website to keep the visitant, if 20-30 seconds they still can't open a web page, ordinary people according to the research the meeting is they will be impatient. Do the web page can use the software such as the Dreamweaver, Frontpage
5、, but these software are manufacture the process inside, and can producing a lot of useless discard the code, and enlarge the document to take up the space, and affect the speed of downloading of the web page, if by hand write the HTML code to manufacture the web page by the hand web page is semple
6、, the speed of download the document to deliver will be quickly. The HTML is the abbreviation of “English Hyper Text Markup Language” translat into Chinese that is a " chao wen ben biao shu yu yan".Then I combinate oneself is at my education and teaching experienceses, I designd to by hand write th
7、e HTML code to manufacture the web page,by hand My purpose is to make hope who the friend have the interest of studying language HTML, can control with HTML web page design as soon as possible. Keywords: Image;Form;Table;Advanced 目 錄 1 諸論 1 1.1 設(shè)計思想 1 1.2 開發(fā)工具的選用和介紹 1 2 網(wǎng)頁設(shè)計分析與設(shè)計 1 2.1什么是H
8、TML 1 2.2制作一個簡單網(wǎng)頁 2 2.3制作一個完整的網(wǎng)頁 3 2.4將網(wǎng)頁組合起來 5 2.4.1網(wǎng)頁之間的鏈接 5 2.4.2列表方式制作索引文件 5 2.4.3表格方式制作索引文件 6 2.4.4在表格中使用透明圖像 7 2.4.5分幀處理網(wǎng)頁 8 2.4.6給網(wǎng)頁加上聲音 9 2.5表單的應(yīng)用 9 3 系統(tǒng)的使用說明與安裝 10 參考文獻(xiàn) 10 附錄:源文件代碼 11 致謝: 11 諸論 在Internet飛速發(fā)展的今天,互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道,它在人們政治、經(jīng)濟(jì)、生活等各個方面發(fā)揮著重要的作用。多
9、學(xué)習(xí)和使用HTML 可以很成功地設(shè)計網(wǎng)站,但你必須理解HTML是如何工作的。大多數(shù)的網(wǎng)站設(shè)計者建議網(wǎng)絡(luò)新手應(yīng)從有關(guān)HTML的書中去尋找答案,用HTML制作網(wǎng)頁。因為用HTML設(shè)計網(wǎng)站,可以控制設(shè)計的整個過程。但是,如果你僅僅是網(wǎng)站設(shè)計的新手,你應(yīng)該能用手寫HTML代碼,尋找一個允許修改HTML的軟件包。HTML是一個很好的Web設(shè)計工具。在設(shè)計過程中,基于HTML制作網(wǎng)頁能幫助你學(xué)習(xí)HTML。它還允許你切換到所見即所得的模式,以便你在網(wǎng)站發(fā)送到Web之前,預(yù)覽你的網(wǎng)站。 1.1 設(shè)計思想 據(jù)研究發(fā)現(xiàn),頁面下載速度是網(wǎng)站留住訪問者的關(guān)鍵因素,如果20—30秒還不能打開一個網(wǎng)頁,一般人就會沒有
10、耐心。做網(wǎng)頁可以不用Dreamweaver,F(xiàn)rontpage等網(wǎng)頁制作軟件,其實網(wǎng)頁制作軟件,起的作用就是把你做的頁面,自動轉(zhuǎn)成手寫的這種HTML代碼的形式。直接手寫代碼就可以編寫網(wǎng)頁。這就要用到HTML語言了,HTML就是英文Hyper Text Markup Language的縮寫,翻譯成中文就是“超文本標(biāo)識語言”。那么我們?yōu)槭裁催€要手寫代碼?因為網(wǎng)頁制作軟件會產(chǎn)生很多沒有用的廢代碼,增大文件占用空間,影響網(wǎng)頁的下載速度,手寫HTML代碼簡潔,文件下載傳輸速度快。 通過下面的學(xué)習(xí),我們可以很快學(xué)會制作網(wǎng)頁,達(dá)到無師自通。 2網(wǎng)頁設(shè)計分析與設(shè)計 2.1什么是HTML 根據(jù)前面的設(shè)計
11、思想進(jìn)行分析,按照系統(tǒng)開發(fā)的基本觀點(diǎn)對網(wǎng)站進(jìn)行分解:HTML就是英文Hyper Text Markup Language的縮寫,翻譯成中文就是“超文本標(biāo)識語言”。 HTML 文件結(jié)構(gòu)(Document Structures) ...
... ...12、.2制作一個簡單的網(wǎng)頁 現(xiàn)在我們就來學(xué)習(xí)如何寫HTML語言代碼。編寫HTML語言使用的工具很簡單,用WINDOWS自帶的記事本就可以實現(xiàn)。首先從“開始”菜單中,啟動“記事本”應(yīng)用程序。接著在記事本中輸入如下代碼:
13、
14、tm ”,否則,記事本會將這個文件保存成擴(kuò)展名為“TXT”的純文本文件。單擊“保存”,這個網(wǎng)頁文件就保存完了。現(xiàn)在我們看看剛才做的網(wǎng)頁,像打開普通文件一樣,雙擊“student.htm”文件。 這時我們可以看到IE瀏覽器的標(biāo)題欄上顯示的就是,剛才我們寫在
15、epuiv="Content-Type" content=text/html; charset=gb2312>
將這個文件保存一下,再切換到IE窗口,按一下瀏覽器的刷新按鈕。就可以看到效果了,此時頁面的背景換成了黃色,如果你輸入“bgcolor=red”那頁面的背景就變成了紅色的了,這一點(diǎn)不難懂吧?也可以設(shè)置成用十六進(jìn)制的數(shù)字描述的顏色格式,比如“819EF0”,它代表淺藍(lán)色。這里的數(shù)字實際描述的是顏色的“RGB”值,某種顏色的RGB值,可以借助16、圖形圖像處理軟件的調(diào)色板得到,比如Photoshop……用這些方法就設(shè)置背景的顏色了。如果設(shè)置背景是圖形的網(wǎng)頁,首先,我們必須在建立一個“img”子目錄,以用來存儲圖片,圖片格式必須是使用“gif”“jpg”后綴,以后每次使用的時候都調(diào)用這個文件就可以了。(如下圖2.1,可以統(tǒng)括) 圖2.1 現(xiàn)在將中的bgcolor=yellow改成”background=../img/ tuo.gif ,“../img/ tuo.gif”是背景圖片的路徑。 2.3制作一個完整的網(wǎng)頁 頁面背景設(shè)置好了,我們現(xiàn)在可以在網(wǎng)頁中加入文字了。 現(xiàn)在我們在
和中間加入17、一些有關(guān)職校的說明文字:
職業(yè)技術(shù)學(xué)校是我縣唯一的獨(dú)立職業(yè)學(xué)校,學(xué)校開辦于2000年,其前身是設(shè)在鎮(zhèn)平中學(xué)的職業(yè)高級中學(xué),2019年2月,學(xué)校正式從鎮(zhèn)平中學(xué)獨(dú)立,成為我縣一所直屬學(xué)校。學(xué)?,F(xiàn)有在校學(xué)生640人(含在聯(lián)辦學(xué)校學(xué)習(xí)),教職工51人。
學(xué)校辦學(xué)以來,不斷探索山區(qū)職業(yè)教育的辦學(xué)思路,學(xué)校堅持“兩條腿走路”的辦學(xué)思路,開設(shè)“升學(xué)型”和“就業(yè)型”專業(yè),學(xué)?,F(xiàn)有商務(wù)外語(高考班)、計算機(jī)和應(yīng)用、電子商務(wù)、電子技術(shù)應(yīng)用、服裝設(shè)計與營銷、粵菜烹飪、旅游
18、服務(wù)與管理7個專業(yè)。學(xué)校為了讓更多的學(xué)子有更好的發(fā)展,為學(xué)生提供更多的就業(yè)機(jī)會,就業(yè)型專業(yè)分別于東莞市東城職業(yè)高級中學(xué)、東莞市厚街專業(yè)技術(shù)學(xué)校、中山市沙溪理工學(xué)校、廣州市旅游商貿(mào)職業(yè)學(xué)校四所國家級重點(diǎn)職業(yè)高級中學(xué)聯(lián)合辦學(xué)。
并且要在每段的前面加上全角的空格。每段的后面要加上
為行中斷標(biāo)識。(可以加上
和
作為空行用。)在“職業(yè)技術(shù)學(xué)校簡介”前后分別加上<19、作用。 如果一個網(wǎng)頁要足以吸引人的話,我們要插入幾張圖片。圖片應(yīng)放在同一文件夾下,也就是在student文件夾下。先準(zhǔn)備幾張圖片。tuo1.gif tuo2.gif tuo3.gif我們在文章的開頭輸入代碼“”在這里src= tuo1.gif表示插入的是本目錄下的圖片(來源)“alt”后面的文字作為圖片的說明?!皐idth”和“height”是圖片的寬度和高度信息,單位是像素。尖括號里面再加入“align=right”可以使圖片居右。 剛才插入的圖片是縮略圖,要使圖片更大,
20、更為清晰,我們可以作如下的鏈接。這樣的方式一方面可以加快打開網(wǎng)頁的速度,另一方面使得頁面圖片和方字比例協(xié)調(diào),只要閱讀頁面的人希望看到大圖片時點(diǎn)擊就可以了。那么將如何加入鏈接呢?我們在“”就可以實現(xiàn)了。在后面輸入“ ,a href=后面的地址表示鏈接目標(biāo)的路徑”。(一個鏈接是從標(biāo)識“”開始,到標(biāo)識結(jié)束的,被鏈接的文字或是圖形的信息寫在這兩個標(biāo)識之間。) 在“
21、der=0 target=-blank >”代碼里新加入了“?border=0”,可以去除邊框。加入了“target=-blank” 單擊圖片時就不會在原來的窗口中打開大圖,而是重新彈出一個窗口,在新窗口中打開大圖。 如何改變它的背景顏色,如何加上背景圖片,以和在頁面中加入文字、圖片,并給圖片加上鏈接。我們都可以實現(xiàn)它,接下來我們可以把各個專業(yè)都分別做成網(wǎng)頁。在做好的網(wǎng)頁中我們也可以通過右鍵單擊,選擇“查看源代碼”對HTML代碼進(jìn)行修改。 比如我們可以在主網(wǎng)頁標(biāo)題中加入代碼“
”可以加上橫線條,如果在里面加入“
22、gn=right>”就會有線條的粗細(xì)、顏色、長度、以和線的位置。 這樣我們的第一頁面就做完了,不會很難吧。 2.4將網(wǎng)頁組合起來 2.4.1網(wǎng)頁之間的鏈接 以上幾節(jié)中我們已經(jīng)有了系列的關(guān)于學(xué)校各專業(yè)的頁面,現(xiàn)在要做的就是把它們彼此聯(lián)系起來,這就是要通過“鏈接”。以前我們用過“”這種方式進(jìn)行超級鏈接。這是用的還是“”這個標(biāo)識。現(xiàn)在我們就把各專業(yè)網(wǎng)頁鏈接到學(xué)校主頁下去吧?!?a href=student/student.htm>”“學(xué)生”,在這里我們要注意的是網(wǎng)絡(luò)上用的都是“斜杠”,如果你使用
23、反斜杠,在硬盤上是正確的,放到網(wǎng)上就不行了。(在這里的“學(xué)生”是想要加鏈接的地方)添加后,這兩個字就會顯出藍(lán)色字樣來,表示這里已經(jīng)作了鏈接。在代碼中加入“target=_blank”,就可以在另外一個頁面打開了。只要哪個地方要作鏈接的話,我們就可以插入代碼“××”就可以實現(xiàn)鏈接了。 只要我們已經(jīng)制作了一批網(wǎng)頁,彼此都鏈接起來,就可以了。 2.4.2列表方式制作索引文件 對于一個網(wǎng)站上的網(wǎng)頁來說,僅僅有彼此的鏈接是不夠的,還需要一個“索引”文件,將它們都連接起來,使它們成為一個有機(jī)的整體?!八饕焙孟袷且槐緯哪夸浺粯?,我們在
24、D盤根目錄下建立一個名叫“all”的目錄,將原來做好的“jiaoling”目錄移到這個目錄下。那么移動之后,里面的各個文件的鏈接會不會亂?不會的,因為,我們在制作那些網(wǎng)頁的過程中使用的都是相對鏈接,只要里面的文件的目錄,名字沒有變化,這樣的移動是不影響網(wǎng)頁之間的鏈接關(guān)系的。 在all 目錄下我們再建一個img 是存放圖片的目錄,一個是school用于制作有關(guān)各專業(yè)的網(wǎng)頁介紹的網(wǎng)頁,在后面的制作索引的過程中會用到它們。 下面我們來就說說如何制作索引,我們先打開一個記事本,新建一個文件,輸入如下HTML代碼:
25、a http-epuiv="Content-Type" content=text/html; charset=gb2312>
- 商務(wù)英語(高考班)
- 計算機(jī)和應(yīng)用
- 電子商務(wù)
- 電子技術(shù)應(yīng)用
- 粵菜烹飪
- 服裝設(shè)計與營銷
- 旅游服務(wù)與管理
26、
- 標(biāo)識會使網(wǎng)頁多一些帶有空心的圓點(diǎn)的列表。
在各專業(yè)后面,將列表中所有的內(nèi)容都加上相應(yīng)的鏈接。剛才我們學(xué)習(xí)了利用列表的方式制作網(wǎng)頁,這種方式在列表內(nèi)容比較簡單的時候非常適用,但是如果用它制作整個網(wǎng)頁,就不是十分合適了。下面我們來講述如何應(yīng)用表格來制作網(wǎng)頁。
2.4.3表格方式制作索引文件
在資源管理器里,將all 下的index.htm 改名為index1.htm,這樣,這個用列表制
27、作的目錄文件夾就被保存下來,以后需要的時候還可以拿出來再使用。然后再用記事本編寫一個空白網(wǎng)頁,保存在這個目錄下,文件名為index.htm (為什么我們總是用index.htm 這個文件名呢?因為在網(wǎng)絡(luò)上有這樣一條規(guī)定:對于一個網(wǎng)址,或者是網(wǎng)站上的一個目錄,用瀏覽器打開的時候,瀏覽器直接指向該目錄下的index.htm文件。如果沒有這些文件,網(wǎng)站就會顯示出錯) 下面我們就用表格方式來制作目錄頁,輸入如下代碼:
28、rset=gb2312>
職校情況 |
30、width=100>和
31、一句代碼“bgcolor=e8eeff”再把