時間:2023-03-30 11:35:20
序論:在您撰寫網頁制作論文時,參考他人的優秀作品可以開闊視野,小編為您整理的7篇范文,希望這些建議能夠激發您的創作熱情,引導您走向新的創作高度。
工具準備好了,可根據你的個人喜好來選擇一些素材,如圖片、喜歡的文章等。現在就讓我們從第一步的建立站點來踏上建造網上家園之旅。
用FRONTPAGE創建站點是很容易的。首先,我們來看一下創建一個只包含一個網頁的站點。選擇“文件”菜單的“新建”選項,單擊“站點”命令,這時新建站點對話框就彈出來了,在“指定新站點位置”文本框中輸入新站點的位置,單擊“只有一個網頁的站點”圖標,單擊“確定”按鈕。這就建立好站點了,我們現在來看一下新的站點里有什么,單擊“視圖”工具條的“文件夾”按鈕。在文件夾列表里有一個網頁文件,名字叫做“index.htm”。我們知道,每一個站點都要有一個主頁,這個主頁也是一個網頁文件。瀏覽者訪問站點時首先進入的就是站點的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是說我們新建只包含一個網頁的站點時,FRONTPAGE就自動為我們創建了站點的主頁了。這個新建的站點主頁時空的,我們可以向里面添加內容。
在文件列表里除了主頁之外,還有文件夾。新建站點時,FRONTPAGE都會在站點所在位置下新建兩個文件夾,一個是“images”另一個是“_private”。我們在編輯站點時可以在“image”文件夾里放置站點用到的圖片。“private”文件夾比較特殊,其中的文件對瀏覽者來說是隱含的,我們可以把一些不想讓瀏覽者看到的網頁文件放在這個文件夾里,比如:我們可以在這個文件夾里存放注冊用戶的個人信息。
盡管每一個站點都要有一個主頁,不過創建站點時我們仍然可以從一個空站點開始:選擇“文件”菜單的“新建”命令,單擊“站點”選項,在“新建站點”對話框里,我們可以選擇“空站點”圖標來創建一個空站點。“新建站點”對話框中還有許多其他圖標,這是FRONTPAGE提供的用來創建站點模板或向導。我們創建只有一個網頁的站點或者創建空站點,都是從頭開始來創建一個站點,這就好像蓋房子一樣,首先畫圖紙。然而,有許多的房子都具有相似的結構和用途,所以我們可以用一張圖紙蓋很多相似的房子,這樣就節省了許多工作。
同樣的,盡管站點的風格千差萬別但是有許多站點的功能和結構都是一樣的,如果我們從頭開始建立站點的話,就要做許多重復勞動,這時,我們就可以使用模板或向導來建立站點。模板和向導的作用就好像蓋房子的圖紙一樣,我們不必每次建立站點時都從頭開始。我們單擊“個人站點”圖標,用它可以迅速創建一個個人站點,輸入站點所在的位置,單擊“確定”按鈕,這樣我們剛就創建了個人站點。個人站點模板已經為我們規劃好了站點的目錄和建立了相關的頁面?,F在我們點擊一下“文件夾”按鈕,雙擊index.htm圖標,
看,這就是我們的個人站點的主頁。哎,好象有許多文字都不對,沒關系,這些文字都是可以改變的,現在寫的是文字的用途,比如“主題”文字就是用來寫網站標題的地方,我們只要把它改為自己喜歡的標題就可以了。返回到“文件夾”模式,雙擊photo.htm。也可以把風景圖片換成自己的照片,只要在新建站點的基礎上進一步修改就可以做出自己的個人站點了。這不僅節省了許多力氣,同時也給了初學者一個良好的出發點。
那么模板和向導有什么區別呢?我們安裝軟件時,一步步的用對話框提示我們完成安裝過程的程序就是一個向導。在FRONTPAGE里,向導也是一種模板,不過它是一種特殊的模板,它會以對話框的形式輔助你完成站點的創建過程。
現在我們選擇“文件”菜單的“新建”選項,單擊“站點”命令,
你看,FRONTPAGE提供了兩個向導:公司展示向導、討論站點向導,使用起來都很方便,你有興趣也可以利用向導建立一個站點。
創建頁面最簡單的方法就是單擊FRONTPAGE“常用”工具欄的“新建”按鈕。它的右方有一個向下的小箭頭,它是用來選擇要新建什么,可以用“新建”按鈕新建網頁、站點、文件夾和任務。默認狀態下是新建網頁。
如果要新建網頁,可以不用向下箭頭鍵選擇,而直接單擊“新建”按鈕。不過使用文件菜單的“新建”命令來新建網頁能夠有更大的選擇。單擊文件菜單的“新建”命令,選擇“新建網頁”,在“新建”對話框里,可以看到FRONTPAGE提供的許多網頁模板,我們可以用這些模板來建立相應的網頁。在右下角的預覽框里可以看到選中模板的外觀。選擇“兩欄正文”網頁,這樣就創建了一個新的分為兩欄的網頁了。然后點確定。使用模板可以不用總是從空白網頁開始編輯,這樣就省力很多。
網上幾乎所以的網頁都使用圖片加以點綴,在網頁中插入適當的圖片,能夠產生圖文并茂的效果。
如果有一個圖形,怎么把它放到網頁上呢?
首先要看你的圖形是什么格式的,也就是它擴展名是什么只有擴展名為GIF和JPEG的圖形文件才能成為我們的頁面的一部分。因為這兩種圖形格式不僅應用廣泛,而且有利于節省存貯空間。如果圖形不是這種格式,使用了其它格式的圖形文件,在保存網頁時FRONTPAGE會提示做格式轉換,FRONTPAGE可以自動進行格式轉換。
現在可我們看看怎么插入圖形選擇“插入”菜單的“圖片”命令,單擊“來自文件”按鈕。
在默認情況下,FRONTPAGE認為你要插入的圖片總是放在你建立的站點的目錄或它的子目錄下的??梢哉f,站點就是一個目錄。我們把編輯的許多網頁文件放在同一個目錄下,我們稱這個目錄為站點的主目錄。這些網頁引用的圖形一般也放在這個目錄下。當然,我們也可以在這個目錄下建立其他的子目錄,再把所有的圖形放在子目錄里。所以搜索下拉列表只允許在主目錄和主目錄下的子目錄進行選擇。如果要插入的圖片不在主目錄下,在“選擇文件”對話框中進行選擇。選擇好文件以后,單擊“確定”按鈕,回到“圖形”對話框。單擊“確定”按鈕,圖形就插入了。現在單擊“常用”工具欄的“保存”按鈕。在“另存為”對話框中輸入新的web頁文件的名字,單擊“保存”按鈕。出現了一個對話框,因為我們剛才插入的文件不在站點內,現在FRONTPAGE要把它復制到站點內,可是使用什么名字,放在站點的哪個目錄下呢,就要在這設置了,單擊“改變文件夾”按鈕,另外這兒還在需要時對圖形的格式進行轉換。單擊“位置”按鈕,在默認情況下,圖形被保存在站點的主目錄下,現在我們選擇IMAGE目錄,單擊“確定”按鈕?;氐健扒度胧轿募贝翱?,再單擊“確定”。這樣,圖形就保存在站點內了
我們還可以從INTERNET上插入一個圖形。選擇“插入”菜單的“圖片”命令,在URL欄內輸入圖片的地址,單擊“確定”按鈕。由于是插入網上的圖片,因此在插入圖形以后,應該保存一下網頁,使圖形存到站點內。
您可能說,我不會畫畫,插入圖片容易,可是編輯圖片就不容易了。沒關系,FRONTPAGE自己帶有許多剪貼畫,你可以把它們插入到自己的網頁。選擇“插入”菜單的“圖片”命令,選擇“剪貼畫”。你看,各種剪貼畫都分類放好了。你可以自由地選擇。不過,插入后別忘了保存網頁,把剪貼畫復制到站點目錄下。
一般我們插入的圖形總是和文本在一起的,所以調整圖形和文本的對齊方式很重要。在默認情況下,圖形自動與文本的底部對齊。這一個網頁,由于默認的對齊效果,頁面出現了大量的空白。這時就要調整圖形的對齊屬性。在圖形上單擊鼠標右鍵,選擇“圖片屬性”,選擇“外觀”選項卡我們把對齊方式調整為“左對齊”。使用圖形可以使網頁更加豐富多彩,而且我們還可以用圖形來建立超鏈接,使網頁相互聯系起來。怎么用圖形來建立鏈接呢?其實圖形超鏈接只要在建立超鏈接時選擇圖形就可以了。首先選中超鏈接的圖形,單擊箭頭圖形,單擊“常用”工具欄“超鏈接”按鈕,選擇主頁文件“頁面1.htm”,單擊“確定”按鈕.在普通模式中,按住CTRL鍵,單擊箭頭圖形,就跳到主頁頁面了。
如果我們要在圖片上加上文字,單擊圖形工具欄“文本”按鈕,現在圖形中就出現了一個文本框,輸入:“計算機軟件”按一下Esc鍵,取消文字編輯,就選中文字框了,調整文本框到合適的位置,單擊頁面其他區域,文字就添加成功了。
如果我要修改單擊一下要修改的文字,這時文字作為一個整體被選中了,再點一下文字,這時文本框里有光標閃爍,你可以編輯文本了,重新輸入:“計算機硬件”,在頁面其他區域單擊。文字就修改完成了。
怎樣使文字更豐富、活潑呢?一個簡單的方法就是使用“格式”工具欄。
字體設置:選上文字,打開格式工具欄的“字體”下拉列表框,在里面選擇相應的字體就可以了。如果瀏覽網頁的人使用的計算機沒有設置的字體?瀏覽器會用系統默認的字體代替你設置的字體。不過,使用常用字體是一個好習慣。
字號設置:在“格式”工具欄“字號”下拉列表框中選擇相應字體就可以了
工具欄上的B、I、U圖標的作用是:
按下B按鈕,被選中的文字就會變為粗體
按下I按鈕,被選中的文字就會變為斜體
按下u按鈕,被選中的文字就會帶下畫線
字的顏色:單擊“格式”工具欄“字體顏色”按鈕旁的向下箭頭,選擇適當的顏色,字的顏色就改變了。
還可以對字體進行一些其他設置。選擇“格式”菜單的“字體”命令,在這里我們還可以作進一步的設置。這里除了“格式”工具欄可以做的設置以外,還可以設置許多效果。
“字符間距”選項卡:它是用來設置文字的間距的。單擊“間距”下拉列表,可以選擇字符的間距是普通、擴充還是緊縮的。選擇擴充,這時預覽框的文字間距就變大了。也可以調整間距大小來改變間距,輸入10,文字的間距就更大了。
“定位”下拉列表:在FRONTPAGE中每一行都有一個底線,定位就是指文字相對于底線的距離。也就是把文字上下移動,現在選擇“上移”,文字就向上移動了。預覽框中的黑線就是行的底線。
設計好的頁面,應該檢查它在瀏覽器中是否顯示正常。
方法是,一般只要切換到預覽模式就可以了。單擊“預覽”選項卡,在這個預覽模式下的顯示和在瀏覽器中的顯示是一樣的。但這并不意味著我們就不必用瀏覽器來檢查編輯的網頁了。因為即使是同一個頁面,可能在不同的瀏覽器中顯示會不太一樣。比如在INTERNETEXPLORER中是這樣顯示的,但是在NETSCAPE中又是那樣顯示的。所以,我們要在自己的機器上多裝幾個瀏覽器,用來檢查網頁的兼容性。
那么為什么不用不同的瀏覽器來檢查呢?選擇“文件”菜單的“在瀏覽器中預覽”選項,在瀏覽器列表框中選擇不同的瀏覽器。(以INTERNETEXPLORER5.0為例)單擊“確定”按鈕。就可以看到新建頁面在瀏覽器中的效果了。
怎樣才能自己做的網頁相互聯系起來呢?也就是說讓別人點頁面上的圖形或文本就跳轉到其他頁面呢?
在網頁里,我們把這種點擊后會進行頁面切換的網頁界面元素叫超鏈接。
先來看一下用文字來建立鏈接。
首先創建一個指向站點內其他網頁的超鏈接。
選擇“插入”菜單的“超鏈接”命令,在文件列表框內選擇“頁面1.htm”文件,注意在URL文本框中顯示了該文件的地址。單擊“確定”按鈕.超鏈接就制作成功了。我們切換到預覽模式(單擊預覽按鈕),當我們把鼠標指向“主頁”兩字時鼠標變成手形,單擊它,我們就切換到主頁了。
那么為什么不在普通模式下試呢?:因為普通模式主要是用來編輯網頁的,當我們在普通模式把鼠標指向“主頁”兩字時鼠標沒有變成小手狀,因此不能進行頁面切換。不過如果按住CTRL鍵,鼠標就變成了小手狀。這時單擊就可以進行切換了。也就是說在普通模式中按住CTRL鍵才能激活超鏈接。我們也可以將超鏈接指向其他站點的網頁。選中作為超鏈接的文本,單擊“常用”工具欄的“超鏈接”按鈕,這和選擇插入菜單的超鏈接命令是一樣的。在“創建超鏈接”對話框里,在URL地址欄直接輸入要連接的網頁或網站的地址。如果不清楚要作超鏈接的地址,只要單擊URL地址框后面的放大鏡就可以用瀏覽器在INTERNET上查找要鏈接的網頁,FRONTPAGE會自動記錄你找到的地址。單擊“確定”按鈕就可以了。我們還可以改變已經設置好的超鏈接。首先確認是普通模式,在要改變的超鏈接下單擊鼠標右鍵,選擇“超鏈接屬性”命令,輸入新的URL地址就可以了。要想取消超鏈接,刪除所有URL地址框里的內容就可以了。還有一種超鏈接,可以鏈接電子郵件。這樣可以使你的網上朋友通過Email及時與你聯系,這是一個網站站長和網友交流的重要手段。先選中要作為超鏈接的文本,一般文本就是你的郵箱地址,單擊“超鏈接”按鈕,單擊“信封”按鈕,輸入你的郵箱地址,單擊“確定”按鈕,退出對話框,選擇“確定”,這時超鏈接就建立好了。我們試一下,切換到預覽模式,單擊郵件鏈接。
這樣我們就差不多完成了網頁的制作步驟,最后可將它到Web服務器上。站點前還要對它進行檢查工作,包括超鏈接,頁面等。
【參考文獻】
〈1〉喬春源,樊天岳等。信息技術。江蘇科學技術出版社,2001年7月。
建構主義理論指導下的課堂教學
筆者從建構主義教學觀和教學實踐出發,設計出了一套符合這門學科特點的教學與管理模式:把整個教學過程分成三個階段,全部在計算機教室開展,針對不同的教學內容和教學環節采用不同的教學方式,邊講邊練,即案例引導教學階段、任務驅動實踐階段和項目合作課程設計階段,如圖1所示。這三個階段中教師是引導者,學生是知識的構建者。教師與學生之間,學生相互之間必須密切配合[4]1.展示效果。課堂上,首先把與本節知識內容相關的案例效果及功能展示給學生,通過素材和網頁效果的對比,激發學生的想象能力。2.分析操作任務。在教師的引導下,對案例進行模塊化分析。分析案例時一般包括兩個方面:一個是利用以往知識可以處理的效果;另一個是本次教學內容處理的效果。分析案例的目的在于溫習以往知識和引出本節課教學知識點。學生在分析案例的同時,一方面不斷形成新的理論視野,增長案例分析的技巧;另一方面探索思考理論如何運用于實際,從而及時、有效地促進了理論向實踐的轉化,真正達到理論與實踐的結合,有利于加強文科專業學生的實踐動手能力。3.知識講解與操作示范。在講解過程中注重基礎知識的傳授和基本技能的培養,同時介紹網頁制作中的相關規范和標準,并且注意總結一些實用的技巧。這種教學方式目的明確、形式生動,學生帶著問題聽課,學習興趣和效果明顯提高。教師要實際操作案例,在操作過程中把以往的知識點簡單回顧,并著重介紹新知識點,即講述相關理論知識。把書本上的相關知識通過案例的形式直接展示給學生,學生不但容易理解理論內容,同時,也了解知識的實際用途。4.課堂同步實踐。理論與實踐交融,知識與感悟同步。學生真正掌握技術在于自己是否能夠獨立完成實踐操作,在學生實際操作的過程中,教師應從旁指導、及時糾正,學生只有在依靠自我的力量去解決學習問題的過程中獲得了成功的體驗,才能進一步激發他們的學習熱情。5.課程設計。學生結合所學網頁設計制作知識與自己的興趣或擅長等自擬主題,制作出符合一定要求的網站。每個項目小組由4到5人組成,推選出項目經理,負責小組的項目策劃和成員分工。通過討論、交流與合作,小組成員各盡所能,取長補短,共同完成任務。這樣,既調動了學生的積極性,實踐了所學的知識,又培養了團結協作的能力。將課程設計記入學生的平時成績,從而給學生在該課程的學習上施加一定的壓力,促進其更好地學習。6.歸納總結。教師對學生的操作表現做出講評,對學生在網頁設計中的共性問題進行糾正,不斷規范學生的網頁設計。并與學生共同詳細討論和總結案例中所用到的理論知識和操作技巧。表揚其優點,指出其錯誤,可以鞏固教學效果,彌補學習漏洞,并有助于學生之間的學習交流。教師以“案例”引路,引導學生邊學邊練,以“任務”驅動自主完成學習任務。以“項目”促進理論知識與實際操作結合。教師的“教”與學生的“學”圍繞一個目標,學生充分發揮自己學習主動性和創造性,多種教學方法結合不但解決了課時少、知識點多、實效差、與實踐應用相脫離等問題,而且還充分調動了學生學習的積極性,使學習過程成為一個人人參與的創造性實踐活動,更好地培養了學生創造性思維和發現問題、解決問題的能力[5]。
考核與評價方式
采用課程設計與上機考試結合的考核方式,上機考試從題庫中按出題方案組出若干數量試卷,每位學生隨機抽取其中一套進行考試?!熬W頁設計與制作”這門課程對于制作網頁的基礎理論和實際操作能力都有比較全面的要求,所以考試當中應當兼顧這兩個方面,理論部分注重學生對網頁制作基本知識、基本理論的掌握,采用選擇、判斷等客觀題的方式進行,為學生進一步的學習夯實基礎。實踐部分要求學生利用給定素材,包括考題所需的圖片、背景和其他輔助圖片、相關考題內容的文字資料、考題要求等,完成規定技術要求的網站創意設計與制作。一個好的考核方式不僅有利于全面真實地反映學生的學習水平,而且有利于反映教學中的問題,以便教師能夠及時作出相應調整[6]。
通過《網頁設計與制作》多年的教學發現,應用傳統的教學方式及考核方法學生只建立了的基礎的專業課程知識概念及單一的基本操作,并不能綜合應用操作技能完成某主題網站的設計與制作。為了建立以網頁設計與制作技能考核為主線的開放式、全過程的考核體系,提高學生綜合項目實踐能力,更好的與社會需求接軌。有必要對傳統的考核方式進行改革,同時經過多年教學探索,結合人才培養方案制定了以下的考核方案。
二、考核方案
1.考核方案的制定
本考核采取學生小組合作(每組2-3名學生)完成一個規定主題網站項目的方式展開??偝煽冇刹僮骺己顺煽?、項目報告成績兩部分組成,權重分別為70%、30%,每一項按百分制評分后依權重比例計入總成績,總成績不及格者必須重修本課程并重新參加考試。因本校的現有學期總評成績是由平時成績30%、期中成績30%、期末成績40%組成,為了與學校的評分要求接軌,將本次考試所得的總成績作為學校學期總評成績的期末成績部分。并在此說明平時成績30%部分是由學生本學期的課程作業完成情況、出勤及上課表現綜合評定。本考核方案中的操作考核、項目報告都有具體的考核方案,其中操作考核實施的具體要求以試卷形式展現,內容要求以表“操作考核內容”為中心,以考核學生綜合網站制作能力為基本思路,通過小組合作完成主題網站的設計與制作,具體要求在此省略。此外要求學生撰寫項目報告不僅讓學生明確各自的份內工作,同時要求學生善于思考、總結,每做一個項目都有所收獲。項目報告實施的具體要求涉及以下幾個方面的內容:
(1)項目實施過程。項目實施過程包括前期策劃、資料搜集、網頁制作。在前期策劃階段,要求小組共同確定網站名稱、網站風格(列舉網頁采用主要色彩及網頁色調定位)、網站欄目、站點目錄結構的內容以形成完整的網站規劃,在此規劃的指導下進行資料搜集、協作完成網頁制作。其中網頁制作中要求頁面美工設計階段介紹所用軟件及提供至少首頁效果圖截圖;靜態頁面制作階段要求繪制網頁布局的結構圖及標注尺寸;程序開發階段列舉所用的開發工具、對數據庫、表進行截圖,以及繪制程序開發頁面流程圖。
(2)項目總結。對本項目完成情況進行分析、總結,并介紹項目實施過程中的收獲及體會。在作品展示時要求各小組派出代表對作品進行介紹,總結,便于相互交流經驗。
(3)項目組介紹。對該項目組成員進行介紹及項目實施過程中的人員分工情況進行報告。體現小組合作開發項目的工作模式,讓學生明白實際工作中不僅需要具備較高的技術能力,還要有合作意識,與合作者之間有效、和諧的溝通。
2.考核方式
【關鍵字】Frontpage創建站點、新建頁面、文字、超鏈接
現在流行的網頁制作軟件有很多,如Macromedia公司的Dreamweaver、微軟公司的Frontpage、還有AdobePagemill3.0--制作多框架,表單和Imagemap圖像的網頁工具、Netscape等等。其中Frontpage更以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁,利用它可以輕松的組織、編輯網頁并將其到指定的站點上,而且在之后還能對更新情況進行監控以更新站點的內容。
工具準備好了,可根據你的個人喜好來選擇一些素材,如圖片、喜歡的文章等?,F在就讓我們從第一步的建立站點來踏上建造網上家園之旅。
用FRONTPAGE創建站點是很容易的。首先,我們來看一下創建一個只包含一個網頁的站點。選擇“文件”菜單的“新建”選項,單擊“站點”命令,這時新建站點對話框就彈出來了,在“指定新站點位置”文本框中輸入新站點的位置,單擊“只有一個網頁的站點”圖標,單擊“確定”按鈕。這就建立好站點了,我們現在來看一下新的站點里有什么,單擊“視圖”工具條的“文件夾”按鈕。在文件夾列表里有一個網頁文件,名字叫做“index.htm”。我們知道,每一個站點都要有一個主頁,這個主頁也是一個網頁文件。瀏覽者訪問站點時首先進入的就是站點的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是說我們新建只包含一個網頁的站點時,FRONTPAGE就自動為我們創建了站點的主頁了。這個新建的站點主頁時空的,我們可以向里面添加內容。
在文件列表里除了主頁之外,還有文件夾。新建站點時,FRONTPAGE都會在站點所在位置下新建兩個文件夾,一個是“images”另一個是“_private”。我們在編輯站點時可以在“image”文件夾里放置站點用到的圖片?!皃rivate”文件夾比較特殊,其中的文件對瀏覽者來說是隱含的,我們可以把一些不想讓瀏覽者看到的網頁文件放在這個文件夾里,比如:我們可以在這個文件夾里存放注冊用戶的個人信息。
盡管每一個站點都要有一個主頁,不過創建站點時我們仍然可以從一個空站點開始:選擇“文件”菜單的“新建”命令,單擊“站點”選項,在“新建站點”對話框里,我們可以選擇“空站點”圖標來創建一個空站點?!靶陆ㄕ军c”對話框中還有許多其他圖標,這是FRONTPAGE提供的用來創建站點模板或向導。我們創建只有一個網頁的站點或者創建空站點,都是從頭開始來創建一個站點,這就好像蓋房子一樣,首先畫圖紙。然而,有許多的房子都具有相似的結構和用途,所以我們可以用一張圖紙蓋很多相似的房子,這樣就節省了許多工作。
同樣的,盡管站點的風格千差萬別但是有許多站點的功能和結構都是一樣的,如果我們從頭開始建立站點的話,就要做許多重復勞動,這時,我們就可以使用模板或向導來建立站點。模板和向導的作用就好像蓋房子的圖紙一樣,我們不必每次建立站點時都從頭開始。我們單擊“個人站點”圖標,用它可以迅速創建一個個人站點,輸入站點所在的位置,單擊“確定”按鈕,這樣我們剛就創建了個人站點。個人站點模板已經為我們規劃好了站點的目錄和建立了相關的頁面?,F在我們點擊一下“文件夾”按鈕,雙擊index.htm圖標,
看,這就是我們的個人站點的主頁。哎,好象有許多文字都不對,沒關系,這些文字都是可以改變的,現在寫的是文字的用途,比如“主題”文字就是用來寫網站標題的地方,我們只要把它改為自己喜歡的標題就可以了。返回到“文件夾”模式,雙擊photo.htm。也可以把風景圖片換成自己的照片,只要在新建站點的基礎上進一步修改就可以做出自己的個人站點了。這不僅節省了許多力氣,同時也給了初學者一個良好的出發點。
那么模板和向導有什么區別呢?我們安裝軟件時,一步步的用對話框提示我們完成安裝過程的程序就是一個向導。在FRONTPAGE里,向導也是一種模板,不過它是一種特殊的模板,它會以對話框的形式輔助你完成站點的創建過程。
現在我們選擇“文件”菜單的“新建”選項,單擊“站點”命令,
你看,FRONTPAGE提供了兩個向導:公司展示向導、討論站點向導,使用起來都很方便,你有興趣也可以利用向導建立一個站點。
創建頁面最簡單的方法就是單擊FRONTPAGE“常用”工具欄的“新建”按鈕。它的右方有一個向下的小箭頭,它是用來選擇要新建什么,可以用“新建”按鈕新建網頁、站點、文件夾和任務。默認狀態下是新建網頁。
如果要新建網頁,可以不用向下箭頭鍵選擇,而直接單擊“新建”按鈕。不過使用文件菜單的“新建”命令來新建網頁能夠有更大的選擇。單擊文件菜單的“新建”命令,選擇“新建網頁”,在“新建”對話框里,可以看到FRONTPAGE提供的許多網頁模板,我們可以用這些模板來建立相應的網頁。在右下角的預覽框里可以看到選中模板的外觀。選擇“兩欄正文”網頁,這樣就創建了一個新的分為兩欄的網頁了。然后點確定。使用模板可以不用總是從空白網頁開始編輯,這樣就省力很多。
網上幾乎所以的網頁都使用圖片加以點綴,在網頁中插入適當的圖片,能夠產生圖文并茂的效果。
如果有一個圖形,怎么把它放到網頁上呢?
首先要看你的圖形是什么格式的,也就是它擴展名是什么只有擴展名為GIF和JPEG的圖形文件才能成為我們的頁面的一部分。因為這兩種圖形格式不僅應用廣泛,而且有利于節省存貯空間。如果圖形不是這種格式,使用了其它格式的圖形文件,在保存網頁時FRONTPAGE會提示做格式轉換,FRONTPAGE可以自動進行格式轉換。
現在可我們看看怎么插入圖形選擇“插入”菜單的“圖片”命令,單擊“來自文件”按鈕。
在默認情況下,FRONTPAGE認為你要插入的圖片總是放在你建立的站點的目錄或它的子目錄下的。可以說,站點就是一個目錄。我們把編輯的許多網頁文件放在同一個目錄下,我們稱這個目錄為站點的主目錄。這些網頁引用的圖形一般也放在這個目錄下。當然,我們也可以在這個目錄下建立其他的子目錄,再把所有的圖形放在子目錄里。所以搜索下拉列表只允許在主目錄和主目錄下的子目錄進行選擇。
如果要插入的圖片不在主目錄下,在“選擇文件”對話框中進行選擇。選擇好文件以后,單擊“確定”按鈕,回到“圖形”對話框。單擊“確定”按鈕,圖形就插入了?,F在單擊“常用”工具欄的“保存”按鈕。在“另存為”對話框中輸入新的web頁文件的名字,單擊“保存”按鈕。出現了一個對話框,因為我們剛才插入的文件不在站點內,現在FRONTPAGE要把它復制到站點內,可是使用什么名字,放在站點的哪個目錄下呢,就要在這設置了,單擊“改變文件夾”按鈕,另外這兒還在需要時對圖形的格式進行轉換。單擊“位置”按鈕,在默認情況下,圖形被保存在站點的主目錄下,現在我們選擇IMAGE目錄,單擊“確定”按鈕?;氐健扒度胧轿募贝翱冢賳螕簟按_定”。這樣,圖形就保存在站點內了
我們還可以從INTERNET上插入一個圖形。選擇“插入”菜單的“圖片”命令,在URL欄內輸入圖片的地址,單擊“確定”按鈕。由于是插入網上的圖片,因此在插入圖形以后,應該保存一下網頁,使圖形存到站點內。
您可能說,我不會畫畫,插入圖片容易,可是編輯圖片就不容易了。沒關系,FRONTPAGE自己帶有許多剪貼畫,你可以把它們插入到自己的網頁。選擇“插入”菜單的“圖片”命令,選擇“剪貼畫”。你看,各種剪貼畫都分類放好了。你可以自由地選擇。不過,插入后別忘了保存網頁,把剪貼畫復制到站點目錄下。
一般我們插入的圖形總是和文本在一起的,所以調整圖形和文本的對齊方式很重要。在默認情況下,圖形自動與文本的底部對齊。這一個網頁,由于默認的對齊效果,頁面出現了大量的空白。這時就要調整圖形的對齊屬性。在圖形上單擊鼠標右鍵,選擇“圖片屬性”,選擇“外觀”選項卡我們把對齊方式調整為“左對齊”。使用圖形可以使網頁更加豐富多彩,而且我們還可以用圖形來建立超鏈接,使網頁相互聯系起來。怎么用圖形來建立鏈接呢?其實圖形超鏈接只要在建立超鏈接時選擇圖形就可以了。首先選中超鏈接的圖形,單擊箭頭圖形,單擊“常用”工具欄“超鏈接”按鈕,選擇主頁文件“頁面1.htm”,單擊“確定”按鈕.在普通模式中,按住CTRL鍵,單擊箭頭圖形,就跳到主頁頁面了。
如果我們要在圖片上加上文字,單擊圖形工具欄“文本”按鈕,現在圖形中就出現了一個文本框,輸入:“計算機軟件”按一下Esc鍵,取消文字編輯,就選中文字框了,調整文本框到合適的位置,單擊頁面其他區域,文字就添加成功了。
如果我要修改單擊一下要修改的文字,這時文字作為一個整體被選中了,再點一下文字,這時文本框里有光標閃爍,你可以編輯文本了,重新輸入:“計算機硬件”,在頁面其他區域單擊。文字就修改完成了。
怎樣使文字更豐富、活潑呢?一個簡單的方法就是使用“格式”工具欄。
字體設置:選上文字,打開格式工具欄的“字體”下拉列表框,在里面選擇相應的字體就可以了。如果瀏覽網頁的人使用的計算機沒有設置的字體?瀏覽器會用系統默認的字體代替你設置的字體。不過,使用常用字體是一個好習慣。
字號設置:在“格式”工具欄“字號”下拉列表框中選擇相應字體就可以了
工具欄上的B、I、U圖標的作用是:
按下B按鈕,被選中的文字就會變為粗體
按下I按鈕,被選中的文字就會變為斜體
按下u按鈕,被選中的文字就會帶下畫線
字的顏色:單擊“格式”工具欄“字體顏色”按鈕旁的向下箭頭,選擇適當的顏色,字的顏色就改變了。
還可以對字體進行一些其他設置。選擇“格式”菜單的“字體”命令,在這里我們還可以作進一步的設置。這里除了“格式”工具欄可以做的設置以外,還可以設置許多效果。
“字符間距”選項卡:它是用來設置文字的間距的。單擊“間距”下拉列表,可以選擇字符的間距是普通、擴充還是緊縮的。選擇擴充,這時預覽框的文字間距就變大了。也可以調整間距大小來改變間距,輸入10,文字的間距就更大了。
“定位”下拉列表:在FRONTPAGE中每一行都有一個底線,定位就是指文字相對于底線的距離。也就是把文字上下移動,現在選擇“上移”,文字就向上移動了。預覽框中的黑線就是行的底線。
設計好的頁面,應該檢查它在瀏覽器中是否顯示正常。
方法是,一般只要切換到預覽模式就可以了。單擊“預覽”選項卡,在這個預覽模式下的顯示和在瀏覽器中的顯示是一樣的。但這并不意味著我們就不必用瀏覽器來檢查編輯的網頁了。因為即使是同一個頁面,可能在不同的瀏覽器中顯示會不太一樣。比如在INTERNETEXPLORER中是這樣顯示的,但是在NETSCAPE中又是那樣顯示的。所以,我們要在自己的機器上多裝幾個瀏覽器,用來檢查網頁的兼容性。
那么為什么不用不同的瀏覽器來檢查呢?選擇“文件”菜單的“在瀏覽器中預覽”選項,在瀏覽器列表框中選擇不同的瀏覽器。(以INTERNETEXPLORER5.0為例)單擊“確定”按鈕。就可以看到新建頁面在瀏覽器中的效果了。
怎樣才能自己做的網頁相互聯系起來呢?也就是說讓別人點頁面上的圖形或文本就跳轉到其他頁面呢?
在網頁里,我們把這種點擊后會進行頁面切換的網頁界面元素叫超鏈接。
先來看一下用文字來建立鏈接。
首先創建一個指向站點內其他網頁的超鏈接。
選擇“插入”菜單的“超鏈接”命令,在文件列表框內選擇“頁面1.htm”文件,注意在URL文本框中顯示了該文件的地址。單擊“確定”按鈕.超鏈接就制作成功了。我們切換到預覽模式(單擊預覽按鈕),當我們把鼠標指向“主頁”兩字時鼠標變成手形,單擊它,我們就切換到主頁了。
那么為什么不在普通模式下試呢?:因為普通模式主要是用來編輯網頁的,當我們在普通模式把鼠標指向“主頁”兩字時鼠標沒有變成小手狀,因此不能進行頁面切換。不過如果按住CTRL鍵,鼠標就變成了小手狀。這時單擊就可以進行切換了。也就是說在普通模式中按住CTRL鍵才能激活超鏈接。
我們也可以將超鏈接指向其他站點的網頁。選中作為超鏈接的文本,單擊“常用”工具欄的“超鏈接”按鈕,這和選擇插入菜單的超鏈接命令是一樣的。在“創建超鏈接”對話框里,在URL地址欄直接輸入要連接的網頁或網站的地址。如果不清楚要作超鏈接的地址,只要單擊URL地址框后面的放大鏡就可以用瀏覽器在INTERNET上查找要鏈接的網頁,FRONTPAGE會自動記錄你找到的地址。單擊“確定”按鈕就可以了。我們還可以改變已經設置好的超鏈接。首先確認是普通模式,在要改變的超鏈接下單擊鼠標右鍵,選擇“超鏈接屬性”命令,輸入新的URL地址就可以了。要想取消超鏈接,刪除所有URL地址框里的內容就可以了。還有一種超鏈接,可以鏈接電子郵件。這樣可以使你的網上朋友通過Email及時與你聯系,這是一個網站站長和網友交流的重要手段。先選中要作為超鏈接的文本,一般文本就是你的郵箱地址,單擊“超鏈接”按鈕,單擊“信封”按鈕,輸入你的郵箱地址,單擊“確定”按鈕,退出對話框,選擇“確定”,這時超鏈接就建立好了。我們試一下,切換到預覽模式,單擊郵件鏈接。
這樣我們就差不多完成了網頁的制作步驟,最后可將它到Web服務器上。站點前還要對它進行檢查工作,包括超鏈接,頁面等。
【參考文獻】
〈1〉喬春源,樊天岳等。信息技術。江蘇科學技術出版社,2001年7月。
論文摘要:項目教學法是師生為共同實施一個完整項目而進行的教學活動。文章介紹了將項目教學法應用到《網頁制作技術》課程中的經驗及收獲。在整個教學過程中,著重培養學生的“四種能力”,以實現培養網站構建人才的課程教學目標。
項目教學法簡介
項目教學法的前提是“項目”,是一個人人參與的集學習、創作于一體的過程。
項目教學法就是在教學中,組織學生真實地參加項目設計、實施和管理的全過程,在項目實施過程中完成教學任務。項目教學法的開始階段,主要采用獨立作業的方式。項目教學法更多采用小組工作的方式,共同制定計劃、共同或分工完成整個項目。一般而言,項目教學法的實施過程可以分五個階段:
確定項目任務通常由教師提出一個或幾個項目的任務設想,與學生一起討論,最終確定項目的目標和任務。制定計劃由學生制定項目工作計劃,確定工作步驟和程序,得到教師的認可后實施。
實施計劃學生確定各自在小組中的分工以及小組成員的合作形式,然后按照已確立的工作步驟和程序開展工作。
評價考核通過項目的完成情況對學生的學習效果進行考查,包括教師評價、學習小組評價和自評三部分??煞秩齻€級別進行考核:第一級,由教師對各小組項目完成情況進行評定,如能否共同協作,是否實現預期功能,是否具有創新意識等;第二級,由各小組成員根據每個組員對本小組的貢獻情況及參與意識進行互評;第三級,由學生本人進行自評,如自己是否在原有基礎上有所提高,是否已經掌握本課程的知識點并熟練應用。最后,綜合三級評定情況確定每名學生的學習成績。對于有企業參與的項目,必要時可由企業做出最終評價。
歸檔或結果應用項目應盡可能具有實際應用價值,應盡可能將項目的完成結果應用到企業和學校的生產教學實踐中。
《網頁制作技術》課引入項目教學法
《網頁制作技術》是我院計算機應用技術、計算機網絡技術、軟件技術等專業的主干課程,具有實用性強,應用面廣,操作性強、與崗位聯系密切等特點。為了更好地講授《網頁制作技術》課,我們進行了大膽的教學改革,打破了傳統的教學模式,將實際項目引入課堂教學,改革教學方法、教學手段及考核形式,較好地實現了課程教學目標。《網頁制作技術》的課程目標《網頁制作技術》的課程目標是結合職業崗位的需要,培養出能夠從事網頁平面設計或網站構建的人才,提高學生的學習能力、協作能力和綜合能力。
將項目教學法引入《網頁制作技術》課本課程的傳統教學方式是先由教師在多媒體教室授課,然后安排學生在實驗室上機驗證教師所講內容。這種方式忽略了學生的積極性、主動性,學生學到的知識比較零碎,很難開發實際項目。隨著課程內容的深入,很多學生逐漸失去了學習興趣,喪失了主動參與的意識,以致課程結束時,幾乎沒有學生能夠設計出具有一定水平的網站。為打破傳統的教學模式,突出學生的主體地位,讓學生成為教學的中心。我們分析了該課程的特點,并結合任課教師為企業開發網站的經驗,讓教師將所承擔的網站建設項目引入課堂教學,引導學生共同開發項目,讓學生既能學到知識,又能積累項目開發經驗,從而體現出“教、學、做是一件事,不是三件事”。
項目教學法提高了學生的能力和素質將項目教學法引入《網頁制作技術》后,學生成為了學習的主體,教師在教學過程中起引導協助作用。學生在項目的驅動下自主學習,邊學邊做。有些能力突出的學生在學習過程中主動與外界聯系,承接小型網站建設項目。在完成項目的過程中,他們主動與其他同學和教師進行交流,討論問題,促進了項目教學法的發展。項目完成后所帶來的成功的愉悅和滿足感,不但提高了學生的學習興趣和學習積極性,同時也培養了學生自主學習的能力。
《網頁制作技術》課實施項目教學法的過程
筆者在擔任《網頁制作技術》課的教學過程中,結合學生的特點以及環境,將教學過程劃分成以下五個階段。(一)網站項目的確定
確立實用、優秀的項目是項目教學法能否成功實施的關鍵。因此,在實施項目教學法時,首先,應選擇切實可行的項目。在教學正式開始之前,可先對學生進行分組,盡量使每一組學生的能力都比較均衡。同時,結合相應的崗位能力要求,將選用的項目分為兩種:一種是選用已通過驗收的項目,另一種是選用正在進行中的項目。其次,應針對學生的實際水平確定項目的難易程度。對于首次接觸這門課程的學生,由教師負責選取項目,講解知識點。所選取的項目必須簡單、典型,并且最好選擇已經完成的項目,以便學生進行知識的遷移。對于具有一定基礎的學生,可由教師和學生共同討論選定具有較高難度的項目,并且最好選擇正在進行中的項目,讓學生身臨其境,參與創造實踐活動,親身體驗實踐的艱辛與樂趣。另外,應注意根據學生具體的培養方向,確立最適合的項目。
(二)網站項目計劃
網站項目的計劃應按照項目開發的需求加以實施。確定項目以后,讓每一組學生針對該項目進行需求分析,啟發學生主動發現身邊的素材。對于已通過驗收的項目,可由教師充當企業的角色,由學生向教師匯報自己所進行的關于項目需求的分析及收集到的資料;對于正在進行中的項目,可由學生直接面對企業,與企業溝通,做出需求分析。教師在這一過程中,一方面,起到指導的作用,另一方面,在對已驗收的項目實施的過程中,教師應事先對該項目內容進行定位,分析研究需要解決的問題和完成的任務,確保學生進行需求分析時,不會定位過高。完成項目需求分析后,教師應根據學生所作的需求分析確定項目的能力模塊,并將每個能力模塊細分為一系列小項目,學生根據課程的時間安排,結合項目內容編寫項目開發計劃書。例如,根據我校《網頁制作技術》課的實際情況,將首次接觸這門課程的學生的能力模塊劃分如下(見下圖)。
(三)網站項目實施
項目教學法中最重要的環節是項目的具體實施過程。在該過程中,教師應及時恰當地對學生進行引導,督促學生根據項目計劃書,按時按量完成相應的功能模塊,保證項目順利進行,實現課程教學目標。對于首次接觸網頁制作的學生來說,沒有一定的網頁制作軟件操作基礎,就無法進行項目建設。因此,應在《網頁制作技術》課程項目實施過程的第一階段講授學生網頁制作軟件的使用方法,為第二階段奠定基礎,第三階段的主要任務則是撰寫網站開發總結報告,鍛煉學生撰寫文章的能力。
第一階段實施過程對應上圖中的能力模塊劃分情況,在第一階段的實施過程中主要教授學生網頁制作軟件的使用方法,使其形成相應的具體能力。具體做法是:教師首先通過簡單的例子講解實際操作方法,然后,讓學生練習新知識、新操作,完成相應的實驗項目。通過這種雙教一體的教學模式、講練結合的教學手段讓學生掌握牢固的基礎知識。
第二階段實施過程結合第一階段學生具體能力的鍛煉情況,根據所要建設的項目,按照項目計劃書進行開發并完成設計。該階段是項目教學法實施的核心環節。在此階段,教師要根據各開發小組的具體情況、具體要求及時恰當地進行指導,解決學生開發過程中遇到的難題,督促學生按時按量完成項目計劃書中的各個開發環節,保證學生順利完成項目的開發,實現教學目標。在實際教學過程中,教師要重點做好指導監督工作。如定期召開各項目組長會議,了解各項目組的開發進程;在項目開發過程中進行技術引導和指導,收集各組遇到的難題,組織各組進行總結和經驗交流,從中探討不同的解決問題的方法。
第三階段實施過程該階段的任務是在學生完成網站建設后,撰寫開發總結報告,總結本次學習、開發的收獲和經驗,為下一次開發做準備。階段性總結評價也是項目具體實施過程中必不可少的環節。教師和學生在每個階段的學習結束后,都要對該階段的學習成果進行展示、評價、總結,及時改進不足之處,鞏固成果,為后續工作打下堅實的基礎。
(四)網站項目展示與評價
項目完成后,應對網站項目的建設效果進行展示,并加以講解。在講解展示網站的過程中,學生和教師可以提出問題,并結合相應的網站項目評分表,形成學生和教師對該項目各自的評價。在對學生進行評價時,還應結合其在項目開發過程中的學習能力、合作能力、參與程度、服務程度以及所起作用等各方面的表現情況。在對承接的企業的開發項目進行評價時,除上述評價角度外,還應結合企業的需求,即除了學生評價、教師評價外,還要有企業評價,并以企業的評價作為最終的評判標準。
(五)網站項目的總結和應用
項目完成后應進行總結,并將其成果應用到相關領域,體現該門課程的教學目標。我校在《網頁制作技術》課中實施項目教學法以來,完成了多個項目并將研究成果應用到實際工作中,如我院的網站、各系各部門的網站、思明網站等。項目完成后應總結思路、技巧并進行經驗交流。思路總結可以幫助學生明晰項目完成的最佳思考方法,找到自己的不足;技巧總結著重總結解決開發環節中遇到的難題的方法,把握并吸收整個項目開發的精髓;經驗交流主要是對學習方法、知識應用進行交流。最后,教師可以指導學生對項目進行拓展和延伸。超級秘書網
項目教學法的成果
《網頁制作技術》課在實施項目教學法后,從本質上改變了課程的教學目的。這種改變使學生不再覺得學習該門課程只是為了獲取學分,而是真正掌握一門技術,具備一定的開發能力,能夠承擔相應的工作。在整個教學過程中,學生的自主學習能力、實踐能力、創新能力、團隊協作能力、分析解決問題的能力以及撰寫報告的能力都得到了鍛煉、培養和提高。
實踐表明,《網頁制作技術》課從傳統的多媒體教學模式的枷鎖中掙脫出來,實施項目教學法,體現了以學生為本,最大限度地調動了學生自主學習的積極性,培養了學生的綜合能力,使學生掌握了一門技巧,對教師也是一種鍛煉和提高。
參考文獻:
王棟松.在計算機課程教學中開展項目教學法的研究[J].職業教育研究,2005,(11).
互聯網作為連接世界各地計算機的全球性信息化網絡,它的傳輸內容是非常豐富的,涉及到全球的各個領域,是人們了解世界、掌握信息的主要渠道之一。網站作為信息時代基層的一個重要窗口,是院務公開、公正、服務職工、惠及民生的重要手段。辦好網站,對于保障職工合法權益、增加職工之間互相的透明性、加強自身建設、提升知名度和影響力都具有非常重要意義。
2網站設計分析
文字、圖形、色彩是展示網站內容的重要組成部分,是構成網站傳達信息不可或缺的手段,同時也是用戶對網站第一印象和整體風格關注的主要內部分。要想設計出符合人性化需求的網站,只有多為用戶著想,認真地以用戶的切身體會出發去完成網站的整體設計。當然,在設計過程中需要考慮的因素很多,用戶群因素和界面因素是首要考慮的兩個方面。
3網頁制作
3.1選擇合適的網頁設計軟件當前能使用的網頁設計類軟件很多,而選擇一個功能強大、操作簡單的軟件則會讓你事半功倍。對于網頁制作軟件來說,初學者最常使用是Frontpage和Dreamweaver,Frontpage是微軟公司出品的一款網頁制作入門級軟件,FrontPage使用方便簡單,會用Word就能做網頁,所見即所得是其特點,該軟件結合了設計、程式碼、預覽三種模式。Dreamweaver是美國MACRO~EDIA公司開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器,利用它可以輕而易舉地制作出充滿動感的網頁。此外,制作網站還要用到邊緣性軟件,如photoshop、flash等,網頁設計過程中可根據自己的需要靈活運用這些軟件。
3.2選擇網頁內容前期的框架設計好后,就要為這個網站選擇內容了。網頁內容影響著網站的成敗,所以我們要多花一些心思在內容制作上。內容選擇要選有新意的、獨特的,這些可以從圖書、報紙、互聯網等信息媒介搜集素材,素材通常分為三類一一文字、圖片、影像。素材準備得越多越好,再從這些素材中粗中取細,以備制作網站時可以隨時拿來使用??傊?,網頁內容是網站的根本,如果內容空洞,頁面制作的再怎么精美,仍然不會留住訪問者。
3.3運用網頁設計中的色彩不同的色彩搭配產生不同的效果,反映出不同網頁的文化內涵。因為它能產生強烈的視覺沖擊,所以確定網頁的色彩是相當重要的一步。在網頁的色彩設計上,除了要表現心理和感情聯想之外,還要考慮色彩的對比明暗、輕重、冷暖、調和色和純度對比色的應用等等。合理的用色可以讓信息的傳遞更有價值,使網頁更有效和準確地把信息傳達給我們的視覺。
4結語
關鍵詞:網頁制作表格divdreamweaver8.0網頁框架利與弊
引言
隨著信息時代的發展,web技術的一天天成熟,如何制作出一個符合規范,美觀又瀏覽速度快的網頁已經越來越成為一個網頁設計師所要考慮的重點了。過去的網頁設計師只需考慮網頁前臺美工處理,然后切片形成網頁即可,而自從CSS層疊式樣式表誕生后,網頁排版成為了一個新的網頁技術研究的領域。在制作網頁中,我們布局網頁的方法一般有兩種,第一種是使用table(表格)來布局網頁,另一種是使用div容器來布局網頁。下面我們就一個實例來講解這兩種方法來布局網頁的操作步驟,以及比較兩種方法的優點和不足之處。
一、網頁布局的兩種方法
方法一:使用table表格制作網頁框架。具體操作步驟如下:
第一步,打開dreamweaver8.0軟件,數好目標表格的行和列(從最小的格子數起)點擊插入菜單中的表格項,然后打開下面的屬性面板
第二步,將第一行的三列合并,第三行的三列合并。
第三步,合并后,一定要嚴格定義好每行的高度,其次一定要定義好第二行每個單元格的寬度,注意三個單元格的寬度之和應該是表格的總寬度。
第四步,將總表格居中對齊,設置好表格的邊框顏色以及每個單元格的底紋,即可。
這樣,一個通過表格制作的網頁框架就做好了,表格的每個單元格就可以存放圖片、文字、動畫等等了。
方法二:通過div容器來制作網頁框架。具體步驟如下:
第一步,新建一個dreamwer文件,點擊插入菜單中的插入布局對象中的div標簽,點擊確定;
第二步,新建CSS樣式
新建完后將CSS樣式的邊框、底紋以及高度和寬度設置好。這樣就設置好了頂部單元格。
設置好所有的css屬性后,點擊dreamweaver的編輯窗口div標簽,點擊如圖5屬性欄中的divID應用即可。
第三步,使用相同的方法繼續插入布局對象中的DIV標簽,第二行插入DIV應注意,首先插入一個大的div容器,然后在里面插入左中右三個div,定義好每個div的寬度后,注意左邊和中間的div容器的css代碼必須寫入:float:left;否則div容器是無法形成橫排的
第四步,使用相同的方法插入底部的第六個div容器。保持與上面容器寬度一致,同時在css代碼中將每個div容器的底紋和邊框設置好。
二、總結網頁布局的兩種方法的優點與不足之處
使用table表格來布局網頁框架的優點:制作方法直接,直接通過插入菜單中插入以及屬性欄中設置所有的操作即可,無需定義CSS樣式;制作的速度快。缺點:由于html文件中的table標簽的瀏覽速度較慢,所以,使用嵌套表格的方法來布局網頁框架會使網頁瀏覽的速度變慢。
使用DIV的方法布局網頁框架的優點:可以通過css樣式給框架進行功能強大的屬性設置以及給網頁的局部進行任意的定位,制作出來的頁面瀏覽速度較快,同時頁面的風格可以通過修改單獨的css文件進行隨意的修改和更新;缺點:每個div容器都需要定義css樣式來控制,制作過程相比table方式要復雜?,F在的網頁越來越傾向于使用DIV的方法來布局網頁了。:
三、table與div方法布局網頁框架的應用
table方法布局網頁主要應用在功能較為簡單、頁面不多的網站中;而div主要應用于大型的網站頁面設計中。