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