網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) (2)

上傳人:痛*** 文檔編號(hào):104101907 上傳時(shí)間:2022-06-09 格式:DOC 頁數(shù):11 大?。?6.50KB
收藏 版權(quán)申訴 舉報(bào) 下載
網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) (2)_第1頁
第1頁 / 共11頁
網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) (2)_第2頁
第2頁 / 共11頁
網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) (2)_第3頁
第3頁 / 共11頁

下載文檔到電腦,查找使用更方便

10 積分

下載資源

還剩頁未讀,繼續(xù)閱讀

資源描述:

《網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) (2)》由會(huì)員分享,可在線閱讀,更多相關(guān)《網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) (2)(11頁珍藏版)》請?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í)語言”。下面結(jié)合自己在教育教學(xué)和實(shí)踐中的一些經(jīng)驗(yàn),設(shè)計(jì)出用手寫HTML代碼制作網(wǎng)頁,目的就是使有興趣學(xué)習(xí)HTML語言的朋友,能盡快掌握和應(yīng)用HTML語言設(shè)計(jì)網(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)識(shí)各種代碼的使用;經(jīng)常研

2、究頁面代碼 各階段任務(wù)安排:具體安排如下: 主要參考資料: [1] HTML 語言教程 [2]《暢通無阻Ⅲ》的網(wǎng)頁設(shè)計(jì) 北京:清華大學(xué)出版社 [3] 前沿電腦圖像工作室 巧學(xué)巧用Dreamweaver、Fireworks、Flash制作網(wǎng)頁 北京:人民郵電出版社。 [4] 程序設(shè)計(jì)語言 [5] 高手云集]收集整理,版權(quán)屬于原作者(網(wǎng)頁設(shè)計(jì)師) 200 5 年 4 月 28 日 【摘 要】 據(jù)研究發(fā)現(xiàn),頁面下載速度是網(wǎng)站留住訪問者的關(guān)鍵因素,如果20—30秒還不能打開一個(gè)網(wǎng)頁,一般人就會(huì)沒有耐心。做網(wǎng)頁可以用Dre

3、amweaver 、Frontpage軟件,但這些軟件在制作過程中,會(huì)產(chǎn)生很多沒有用的廢代碼,增大文件占用空間,影響網(wǎng)頁的下載速度,如果用手寫HTML代碼制作網(wǎng)頁,網(wǎng)頁簡潔,文件下載傳輸速度快。HTML就是英文Hyper Text Markup Language的縮寫,翻譯成中文就是“超文本標(biāo)識(shí)語言”。下面結(jié)合自己在教育教學(xué)和實(shí)踐中的一些經(jīng)驗(yàn),設(shè)計(jì)出用手寫HTML代碼制作網(wǎng)頁,目的就是使有興趣學(xué)習(xí)HTML語言的朋友,能盡快掌握和應(yīng)用HTML語言設(shè)計(jì)網(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è)計(jì)思想 1 1.2 開發(fā)工具的選用和介紹 1 2 網(wǎng)頁設(shè)計(jì)分析與設(shè)計(jì) 1 2.1什么是H

8、TML 1 2.2制作一個(gè)簡單網(wǎng)頁 2 2.3制作一個(gè)完整的網(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ì)、生活等各個(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àn)橛肏TML設(shè)計(jì)網(wǎng)站,可以控制設(shè)計(jì)的整個(gè)過程。但是,如果你僅僅是網(wǎng)站設(shè)計(jì)的新手,你應(yīng)該能用手寫HTML代碼,尋找一個(gè)允許修改HTML的軟件包。HTML是一個(gè)很好的Web設(shè)計(jì)工具。在設(shè)計(jì)過程中,基于HTML制作網(wǎng)頁能幫助你學(xué)習(xí)HTML。它還允許你切換到所見即所得的模式,以便你在網(wǎng)站發(fā)送到Web之前,預(yù)覽你的網(wǎng)站。 1.1 設(shè)計(jì)思想 據(jù)研究發(fā)現(xiàn),頁面下載速度是網(wǎng)站留住訪問者的關(guān)鍵因素,如果20—30秒還不能打開一個(gè)網(wǎng)頁,一般人就會(huì)沒有

10、耐心。做網(wǎng)頁可以不用Dreamweaver,F(xiàn)rontpage等網(wǎng)頁制作軟件,其實(shí)網(wǎng)頁制作軟件,起的作用就是把你做的頁面,自動(dòng)轉(zhuǎn)成手寫的這種HTML代碼的形式。直接手寫代碼就可以編寫網(wǎng)頁。這就要用到HTML語言了,HTML就是英文Hyper Text Markup Language的縮寫,翻譯成中文就是“超文本標(biāo)識(shí)語言”。那么我們?yōu)槭裁催€要手寫代碼?因?yàn)榫W(wǎng)頁制作軟件會(huì)產(chǎn)生很多沒有用的廢代碼,增大文件占用空間,影響網(wǎng)頁的下載速度,手寫HTML代碼簡潔,文件下載傳輸速度快。 通過下面的學(xué)習(xí),我們可以很快學(xué)會(huì)制作網(wǎng)頁,達(dá)到無師自通。 2網(wǎng)頁設(shè)計(jì)分析與設(shè)計(jì) 2.1什么是HTML 根據(jù)前面的設(shè)計(jì)

11、思想進(jìn)行分析,按照系統(tǒng)開發(fā)的基本觀點(diǎn)對網(wǎng)站進(jìn)行分解:HTML就是英文Hyper Text Markup Language的縮寫,翻譯成中文就是“超文本標(biāo)識(shí)語言”。 HTML 文件結(jié)構(gòu)(Document Structures) ... ... ... , <base href="http://m.appdesigncorp.com/"/>, <link>, <isindex>, <meta> </HEAD> <BODY> HTML 文件的正文寫在這里... ... </BODY> </HTML> 2</p> <p style='height:0px;padding:0;margin:0;overflow:hidden'>12、.2制作一個(gè)簡單的網(wǎng)頁 現(xiàn)在我們就來學(xué)習(xí)如何寫HTML語言代碼。編寫HTML語言使用的工具很簡單,用WINDOWS自帶的記事本就可以實(shí)現(xiàn)。首先從“開始”菜單中,啟動(dòng)“記事本”應(yīng)用程序。接著在記事本中輸入如下代碼: <HTML> <HEAD> <title>職業(yè)技術(shù)學(xué)校 這就是一個(gè)HTML文件最基本的結(jié)構(gòu)其中

13、 <body>都是HTML語言的結(jié)構(gòu)標(biāo)識(shí),它們通常都是“雙向標(biāo)識(shí)” "charset=gb2312"代表這個(gè)網(wǎng)頁采用的編碼是簡體中文,簡體中文版的WINDOWS系統(tǒng)都很好地支持這種編碼,保證你的網(wǎng)頁在被瀏覽的過程中不出現(xiàn)亂碼。 現(xiàn)在把這個(gè)文件保存下來,從“文件”菜單中,選擇“保存”,首先,在D:\目錄下創(chuàng)建一個(gè)新的文件夾并命名為“jiaoling”進(jìn)入這個(gè)文件夾再新建一個(gè)文件夾取名為“student”(在使用文件夾名和文件名最好都用英文,而且最好是小寫字母,這樣在網(wǎng)絡(luò)傳輸中,不容易出錯(cuò))在“文件名”文本框中輸入“student.htm”,注意一定要輸入擴(kuò)展名“.h</p> <p style='height:0px;padding:0;margin:0;overflow:hidden'>14、tm ”,否則,記事本會(huì)將這個(gè)文件保存成擴(kuò)展名為“TXT”的純文本文件。單擊“保存”,這個(gè)網(wǎng)頁文件就保存完了。現(xiàn)在我們看看剛才做的網(wǎng)頁,像打開普通文件一樣,雙擊“student.htm”文件。 這時(shí)我們可以看到IE瀏覽器的標(biāo)題欄上顯示的就是,剛才我們寫在<title>與之間的“職業(yè)技術(shù)學(xué)?!薄_@是這個(gè)網(wǎng)頁上什么都沒有的。那么,我們?nèi)绾畏湃胫黧w內(nèi)容呢?不急,現(xiàn)在我們切換到記事本窗口,繼續(xù)編寫剛才的文件,在的尖括號(hào)中加入一句代碼“bgcolor=yellow”。如下 職業(yè)技術(shù)學(xué)校

15、epuiv="Content-Type" content=text/html; charset=gb2312> 將這個(gè)文件保存一下,再切換到IE窗口,按一下瀏覽器的刷新按鈕。就可以看到效果了,此時(shí)頁面的背景換成了黃色,如果你輸入“bgcolor=red”那頁面的背景就變成了紅色的了,這一點(diǎn)不難懂吧?也可以設(shè)置成用十六進(jìn)制的數(shù)字描述的顏色格式,比如“819EF0”,它代表淺藍(lán)色。這里的數(shù)字實(shí)際描述的是顏色的“RGB”值,某種顏色的RGB值,可以借助

16、圖形圖像處理軟件的調(diào)色板得到,比如Photoshop……用這些方法就設(shè)置背景的顏色了。如果設(shè)置背景是圖形的網(wǎng)頁,首先,我們必須在建立一個(gè)“img”子目錄,以用來存儲(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)頁 頁面背景設(shè)置好了,我們現(xiàn)在可以在網(wǎng)頁中加入文字了。 現(xiàn)在我們在 和中間加入

17、一些有關(guān)職校的說明文字:

職業(yè)技術(shù)學(xué)校

  職業(yè)技術(shù)學(xué)校是我縣唯一的獨(dú)立職業(yè)學(xué)校,學(xué)校開辦于2000年,其前身是設(shè)在鎮(zhèn)平中學(xué)的職業(yè)高級(jí)中學(xué),2019年2月,學(xué)校正式從鎮(zhèn)平中學(xué)獨(dú)立,成為我縣一所直屬學(xué)校。學(xué)校現(xiàn)有在校學(xué)生640人(含在聯(lián)辦學(xué)校學(xué)習(xí)),教職工51人。
  學(xué)校辦學(xué)以來,不斷探索山區(qū)職業(yè)教育的辦學(xué)思路,學(xué)校堅(jiān)持“兩條腿走路”的辦學(xué)思路,開設(shè)“升學(xué)型”和“就業(yè)型”專業(yè),學(xué)?,F(xiàn)有商務(wù)外語(高考班)、計(jì)算機(jī)和應(yīng)用、電子商務(wù)、電子技術(shù)應(yīng)用、服裝設(shè)計(jì)與營銷、粵菜烹飪、旅游

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é)校四所國家級(jí)重點(diǎn)職業(yè)高級(jí)中學(xué)聯(lián)合辦學(xué)。
  并且要在每段的前面加上全角的空格。每段的后面要加上
為行中斷標(biāo)識(shí)。(可以加上

作為空行用。)在“職業(yè)技術(shù)學(xué)校簡介”前后分別加上<
這個(gè)標(biāo)識(shí)是使其中的內(nèi)容居中對齊。再在題目的前后加上字體標(biāo)識(shí)〈font size=6 color=31743F>和, 是字體標(biāo)識(shí),它對標(biāo)識(shí)中的文本起控制

19、作用。 如果一個(gè)網(wǎng)頁要足以吸引人的話,我們要插入幾張圖片。圖片應(yīng)放在同一文件夾下,也就是在student文件夾下。先準(zhǔn)備幾張圖片。tuo1.gif tuo2.gif tuo3.gif我們在文章的開頭輸入代碼“tuo1”在這里src= tuo1.gif表示插入的是本目錄下的圖片(來源)“alt”后面的文字作為圖片的說明?!皐idth”和“height”是圖片的寬度和高度信息,單位是像素。尖括號(hào)里面再加入“align=right”可以使圖片居右。 剛才插入的圖片是縮略圖,要使圖片更大,

20、更為清晰,我們可以作如下的鏈接。這樣的方式一方面可以加快打開網(wǎng)頁的速度,另一方面使得頁面圖片和方字比例協(xié)調(diào),只要閱讀頁面的人希望看到大圖片時(shí)點(diǎn)擊就可以了。那么將如何加入鏈接呢?我們在“”就可以實(shí)現(xiàn)了。在后面輸入“ ,a href=后面的地址表示鏈接目標(biāo)的路徑”。(一個(gè)鏈接是從標(biāo)識(shí)“”開始,到標(biāo)識(shí)結(jié)束的,被鏈接的文字或是圖形的信息寫在這兩個(gè)標(biāo)識(shí)之間。) 在“校圖1

21、der=0 target=-blank >”代碼里新加入了“?border=0”,可以去除邊框。加入了“target=-blank” 單擊圖片時(shí)就不會(huì)在原來的窗口中打開大圖,而是重新彈出一個(gè)窗口,在新窗口中打開大圖。 如何改變它的背景顏色,如何加上背景圖片,以和在頁面中加入文字、圖片,并給圖片加上鏈接。我們都可以實(shí)現(xiàn)它,接下來我們可以把各個(gè)專業(yè)都分別做成網(wǎng)頁。在做好的網(wǎng)頁中我們也可以通過右鍵單擊,選擇“查看源代碼”對HTML代碼進(jìn)行修改。 比如我們可以在主網(wǎng)頁標(biāo)題中加入代碼“


”可以加上橫線條,如果在里面加入“

22、gn=right>”就會(huì)有線條的粗細(xì)、顏色、長度、以和線的位置。 這樣我們的第一頁面就做完了,不會(huì)很難吧。 2.4將網(wǎng)頁組合起來 2.4.1網(wǎng)頁之間的鏈接 以上幾節(jié)中我們已經(jīng)有了系列的關(guān)于學(xué)校各專業(yè)的頁面,現(xiàn)在要做的就是把它們彼此聯(lián)系起來,這就是要通過“鏈接”。以前我們用過“”這種方式進(jìn)行超級(jí)鏈接。這是用的還是“”這個(gè)標(biāo)識(shí)。現(xiàn)在我們就把各專業(yè)網(wǎng)頁鏈接到學(xué)校主頁下去吧?!?a href=student/student.htm>”“學(xué)生”,在這里我們要注意的是網(wǎng)絡(luò)上用的都是“斜杠”,如果你使用

23、反斜杠,在硬盤上是正確的,放到網(wǎng)上就不行了。(在這里的“學(xué)生”是想要加鏈接的地方)添加后,這兩個(gè)字就會(huì)顯出藍(lán)色字樣來,表示這里已經(jīng)作了鏈接。在代碼中加入“target=_blank”,就可以在另外一個(gè)頁面打開了。只要哪個(gè)地方要作鏈接的話,我們就可以插入代碼“××”就可以實(shí)現(xiàn)鏈接了。 只要我們已經(jīng)制作了一批網(wǎng)頁,彼此都鏈接起來,就可以了。 2.4.2列表方式制作索引文件 對于一個(gè)網(wǎng)站上的網(wǎng)頁來說,僅僅有彼此的鏈接是不夠的,還需要一個(gè)“索引”文件,將它們都連接起來,使它們成為一個(gè)有機(jī)的整體?!八饕焙孟袷且槐緯哪夸浺粯樱覀冊?/p>

24、D盤根目錄下建立一個(gè)名叫“all”的目錄,將原來做好的“jiaoling”目錄移到這個(gè)目錄下。那么移動(dòng)之后,里面的各個(gè)文件的鏈接會(huì)不會(huì)亂?不會(huì)的,因?yàn)?,我們在制作那些網(wǎng)頁的過程中使用的都是相對鏈接,只要里面的文件的目錄,名字沒有變化,這樣的移動(dòng)是不影響網(wǎng)頁之間的鏈接關(guān)系的。 在all 目錄下我們再建一個(gè)img 是存放圖片的目錄,一個(gè)是school用于制作有關(guān)各專業(yè)的網(wǎng)頁介紹的網(wǎng)頁,在后面的制作索引的過程中會(huì)用到它們。 下面我們來就說說如何制作索引,我們先打開一個(gè)記事本,新建一個(gè)文件,輸入如下HTML代碼: 專業(yè)介紹

25、a http-epuiv="Content-Type" content=text/html; charset=gb2312>

    • 商務(wù)英語(高考班)
    • 計(jì)算機(jī)和應(yīng)用
    • 電子商務(wù)
    • 電子技術(shù)應(yīng)用
    • 粵菜烹飪
    • 服裝設(shè)計(jì)與營銷
    • 旅游服務(wù)與管理
將這個(gè)文件保存在D盤根目錄下的all的文件夾內(nèi),命名為index.htm

26、

    這個(gè)標(biāo)識(shí)是用來對網(wǎng)頁中的項(xiàng)目進(jìn)行自動(dòng)編號(hào)的,括在這兩個(gè)標(biāo)識(shí)內(nèi)的內(nèi)容,每出現(xiàn)一個(gè)
  1. ,就會(huì)出現(xiàn)個(gè)編號(hào),而且在這個(gè)編號(hào)前面會(huì)自動(dòng)換行。
      標(biāo)識(shí)會(huì)使網(wǎng)頁多一些帶有空心的圓點(diǎn)的列表。 在各專業(yè)后面,將列表中所有的內(nèi)容都加上相應(yīng)的鏈接。剛才我們學(xué)習(xí)了利用列表的方式制作網(wǎng)頁,這種方式在列表內(nèi)容比較簡單的時(shí)候非常適用,但是如果用它制作整個(gè)網(wǎng)頁,就不是十分合適了。下面我們來講述如何應(yīng)用表格來制作網(wǎng)頁。 2.4.3表格方式制作索引文件 在資源管理器里,將all 下的index.htm 改名為index1.htm,這樣,這個(gè)用列表制

      27、作的目錄文件夾就被保存下來,以后需要的時(shí)候還可以拿出來再使用。然后再用記事本編寫一個(gè)空白網(wǎng)頁,保存在這個(gè)目錄下,文件名為index.htm (為什么我們總是用index.htm 這個(gè)文件名呢?因?yàn)樵诰W(wǎng)絡(luò)上有這樣一條規(guī)定:對于一個(gè)網(wǎng)址,或者是網(wǎng)站上的一個(gè)目錄,用瀏覽器打開的時(shí)候,瀏覽器直接指向該目錄下的index.htm文件。如果沒有這些文件,網(wǎng)站就會(huì)顯示出錯(cuò)) 下面我們就用表格方式來制作目錄頁,輸入如下代碼: 專業(yè)介紹

      28、rset=gb2312>

      29、able> 保存一下,用IE打開,我們發(fā)現(xiàn)IE瀏覽這只有一行的表格,這是一張非常簡單的表格。在

      職校情況
      之間的代碼就是表格的內(nèi)容。下面的和兩個(gè)標(biāo)識(shí),其中是表行標(biāo)識(shí),也稱行標(biāo)識(shí),一個(gè)表格中有幾對,就表示這個(gè)表格有幾行;而是表格列標(biāo)識(shí),它們也是成對出現(xiàn)的,表格中的內(nèi)容就寫在之間。一對表行標(biāo)識(shí)中包含有幾對表格標(biāo)識(shí),這行中就有幾列。上面我們制作的就有六個(gè)單元格。其中只有一個(gè)單元格有內(nèi)容,我們只看見一個(gè)單元格,其它的沒有顯示出來。如果在

      30、width=100>和之間加入全角的空格,這時(shí)我們就可以看到其它個(gè)剛才沒有顯現(xiàn)出來的空白表格了。 接著我們給可以給這個(gè)表格再曾加幾行,并添加一些內(nèi)容保存,并刷新IE,這時(shí)我們就可以看一個(gè)比較完整的表格了。如果出現(xiàn)文字較多時(shí),我們可以在相對應(yīng)的單元格里面加上這樣一句代碼“colspan=2”“colspan”屬性是進(jìn)行列合并處理,“colspan=2”就是讓一個(gè)單元格占有兩列的寬度,實(shí)際上我們就可以達(dá)到word 中的合并單元格的功能。如果要進(jìn)行行的合并,我們就可以用“rowspan”。 單元格不但可以有寬度屬性,還可以加上背景色,現(xiàn)在我們就給它加上背景色。給每個(gè)中加上

      31、一句代碼“bgcolor=e8eeff”再把

      標(biāo)識(shí)中的“border=1”改成“border=0”,保存刷新,試試效果。 你也用手寫代碼的方式,去做一個(gè)表格吧!可以給單元格加上背景顏色,設(shè)置邊框?qū)挾鹊?,這里就不多說了。 2.4.4在表格中使用透明圖像 所謂的透明圖像,指的是一個(gè)寬和高都為一個(gè)像素的透明圖形,這個(gè)圖形可以用photoshop很容易地做出來,一般把它命名為“bland.gif”。在D:\all\img下面存放一個(gè)這樣的圖形,當(dāng)用瀏覽器閱覽的時(shí)候,是看不見這個(gè)圖形的,但是我們可以用透明圖像來占位置、撐開行高,或者是做出一些特殊效果。 加入下面代碼:

      32、

      這時(shí)所對應(yīng)的單元格高度變成了40個(gè)像素。這就是透明圖像撐開行高的典型例子。保存,刷新,看一下效果吧! 2.4.5分幀處理網(wǎng)頁 分幀處理網(wǎng)頁,就是說整個(gè)頁面被分成了兩個(gè)部分,每次點(diǎn)擊左面的鏈接時(shí),右面的內(nèi)容就會(huì)相應(yīng)產(chǎn)生變化。 這就要用到HTML語言中的“幀”的概念,也就是通常稱為“frame”的格式。 專業(yè)介紹 left.htm 和right.htm兩個(gè)文件是我們事先做好的兩個(gè)文件,保存,在瀏覽器中看一下效果。本來一個(gè)網(wǎng)頁中必須要標(biāo)識(shí),現(xiàn)在用這個(gè)標(biāo)識(shí)代替,就表示這是一個(gè)分幀處理的

      34、頁面。 “rows”后面的值說明窗口的橫向劃分情況,“cols”后面的值則說明縱向劃分情況。 “cols=150,*”這里的意思是整個(gè)窗口劃分成兩列,第一列的寬度是150像素,第二列的寬度則為第一列劃分出去之后的剩余部分。中的“frameborder=1 ”表示幀窗口之間有邊界,“framespacing=5”表示這個(gè)邊界寬度為5個(gè)像素。 標(biāo)識(shí)與標(biāo)識(shí)要配合使用,用來指定幀的內(nèi)容。中的“src”屬性指定的是放入該幀的文件的路徑,“name”屬性是一個(gè)幀窗口的名稱。 接下來,就自己去體驗(yàn)一下分幀頁面的做法吧。

      35、 2.4.6給網(wǎng)頁加上聲音 我們已經(jīng)有了一些有圖片也有文字的網(wǎng)頁,但是要達(dá)到“聲情并茂”的目的,還需要最后一步的努力,就是給網(wǎng)頁加上一個(gè)聲音。下面就來給頁頁加入聲音。 首先“all”目錄下新建一個(gè)名叫“sound”的文件夾,放入一個(gè)名叫“backsound.mid”的聲音文件。然后在index.htm中的與之間加入這樣一段代碼:,存盤并在瀏覽器中打開index.htm文件。 在這段代碼中,是嵌入文

      36、件的意思“src”是聲音文件的路徑,“ autostart=true”是自動(dòng)播放,“ loop=true ”是循環(huán)播放,而“width=100與 height=100”是限制了調(diào)出的媒體播放器的大小。如果你要把這個(gè)媒體播放器隱藏的話,我們就可以加上“hidden”。 2.5表單的應(yīng)用 表單的應(yīng)用就是指HTML語言提供一種讓瀏覽者與服務(wù)器之間進(jìn)行交流的方式。也就是說可以上網(wǎng)上填一些信息,然后提交的網(wǎng)頁。它一般需要跟JavaScript語言或者CGI等后臺(tái)程序相結(jié)合,完成交流。 這里我們僅講述表單頁面的基本知識(shí),從記事本中,打開一個(gè)新文件,寫上以下代碼: <

      37、title>表單提交
      HTML語言使用
      標(biāo)識(shí)來編寫表單,其中的“name”屬性,是這個(gè)表單的名字;后面的“ action”屬性的值是要使用的后臺(tái)程序的文件的路徑。在

      38、orm > 中加入如下的代碼:訪客姓名: 這個(gè)標(biāo)識(shí)中,可以插入各種交互控件,可以是文本框,按鈕,復(fù)選框等,其中的“name”屬性是必須要有的,avaScript語言和CGI程序就是依據(jù)“name”來判斷讀者輸入的信息的。 在
      訪客姓名:
      電子郵件:

      39、ngth=30>
      留言內(nèi)容:
      “Value”屬性的值是出現(xiàn)在按鈕上的文字。如果“type=reset”,那點(diǎn)按這個(gè)按鈕后,輸入的信息將被清除掉,讓讀者重新輸入。 關(guān)于表單,我們就講這些了,有關(guān)表單更深入的知識(shí),你可以參考其它的一些資料。 關(guān)于手寫HTML代碼制作網(wǎng)頁的基本知識(shí),到這里,我們也都全部學(xué)完了。只要你有足

      40、夠的耐心,一步一步跟著學(xué),多多練習(xí),并且經(jīng)常研究頁面代碼,一定會(huì)學(xué)得很好的。 3系統(tǒng)的使用說明 3.1運(yùn)行環(huán)境要求 Windows9x/2000/xp Microsoft internet explorer 記事本 3.2 搜集一些圖片, “圖片”文件必須是“GIF”、“JPG”格式文件,并且在命名為“img”為文件夾名下保存。搜集一些音樂必須是“mid”、“wav”、“MP3”格式文件。 4參考文獻(xiàn) [1] l/html_design.html HTML 語言教程 [2]《暢通無阻Ⅲ》的網(wǎng)頁設(shè)計(jì) 北京:清華大學(xué)出版社 [3] 前沿電腦圖像工作室 巧學(xué)巧用Dre

      41、amweaver、Fireworks、Flash制作網(wǎng)頁 北京:人民郵電出版社。 [4] 程序設(shè)計(jì)語言 [5] [ 高手云集]收集整理,版權(quán)屬于原作者(網(wǎng)頁設(shè)計(jì)師) 附錄:源文件代碼 1、文字移動(dòng)屬性的設(shè)置 方向 #=left, right 職業(yè)技術(shù)學(xué)校

      職業(yè)技術(shù)學(xué)校 2、背景音樂 #=WAV 文件的 URL #=循環(huán)

      42、數(shù) 3、插入視頻剪輯 用 url.avi 這一 AVI(Video for MS-WINDOWS) 文件來播放視頻; 用 url.gif 這一 GIF 圖象作為視頻的封面,即:在瀏覽器 尚未完全讀入 AVI 文件時(shí),先在 AVI 播放區(qū)域顯示該圖象。 4、表格的色彩 表元的背景色彩和背景圖象

      43、ground="URL"> #=rrggbb 16 進(jìn)制 RGB 數(shù)碼, 或者是下列預(yù)定義色彩名稱: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

      第 11 頁

      展開閱讀全文
      溫馨提示:
      1: 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
      2: 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
      3.本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
      4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
      5. 裝配圖網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
      6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
      7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

      相關(guān)資源

      更多
      正為您匹配相似的精品文檔

      copyright@ 2023-2025  zhuangpeitu.com 裝配圖網(wǎng)版權(quán)所有   聯(lián)系電話:18123376007

      備案號(hào):ICP2024067431號(hào)-1 川公網(wǎng)安備51140202000466號(hào)


      本站為文檔C2C交易模式,即用戶上傳的文檔直接被用戶下載,本站只是中間服務(wù)平臺(tái),本站所有文檔下載所得的收益歸上傳人(含作者)所有。裝配圖網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對上載內(nèi)容本身不做任何修改或編輯。若文檔所含內(nèi)容侵犯了您的版權(quán)或隱私,請立即通知裝配圖網(wǎng),我們立即給予刪除!

        Food Drink Sweet
        AB