《班级网页制作流程架构.doc》由会员分享，可在线阅读，更多相关《班级网页制作流程架构.doc（24页珍藏版）》请在金锄头文库上搜索。
1、台北市西松國小資訊素養研習-班級網頁製作班級網頁製作流程架構使用Namo開始製作班級網頁【GO】開啟Namo：開始程式集Namo WebEditor5.5Namo WebEditor 5.5網頁編輯區HTML(HyperText Markup language)網頁的超文字標記語言！早期沒有視窗化的編輯介面時，就是靠編寫相關語法來製作網頁。使用中的檔案名稱格式化工具列功能表標準工具列嗯！介面比FrontPage更像Word吧，因此操作起來更容易入手！不過Namo就像Dreamweaver、FrontPage一樣，除了編輯區外，還有網站的導覽，稱為網站管理員這可是Namo另一個重點，可以讓你方便
2、的管理你的網站樹狀結構（這在Dreamweaver也有，不知道是不是學來的），不過網站管理員我們等一下再說。利用網站精靈快速建立一個網站的結構：【GO】檔案網站網站精靈4個步驟：範本結構佈景主題資訊發佈詳細請見課本（P5P10）【備註】此步驟主要是在確定存檔的位置，建議存在C以外的磁碟機，例如H碟自己的帳號下，請自行命名一個資料夾，就算電腦裡沒有也沒關係。因為如果發現沒有該資料夾，會自動幫你建立。OK！當你做完這個步驟，你的首頁就快OK了！看短短幾分鐘，首頁就漂漂的了！利用網站管理員好好管理網站的結構：利用網站精靈建立專案後，會在資料夾自動產生相關的檔案及結構，其中images預設是用來存放圖
3、形的地方。為了往後在管理方便，可自行新增資料夾，將相同的檔案放在同一個資料夾。名稱：用來更改檔名，當你更改完檔名後，所有相關的連結也會跟著更動，蠻方便的。狀態：會告訴你有沒有修改或開啟。這結構樹可是很好用喔！也是NAMO管理網站時的精神所在。這是你網站的名稱。對NAMO而言以一個專案來表示一個網站，因此你可以利用NAMO管理多個網站。首頁，網友們連結到你網站時，預設會看到入口網頁。第一層，也就是首頁上出現的左邊選項。更改首頁標題：預設標題是.的首頁，要刪除掉這幾個字或是改網站名稱。【GO】可以到網站管理員網站在首頁圖示按滑鼠右鍵內容（將標題換成你想要的名字）當你按下確定就改好啦！班級網頁架構建
4、立在網站精靈中預設的班級網頁選項只有部分，甚至不符合自己的要求，現在就要快速的重建主要選項的項目名稱，此時要借重網站管理員的功能，來快速建立好所有的項目。在此列出一些建議事項，請自行決定您的班級網頁架構。上面這張圖像不像一棵樹的顛倒或是說類似族譜，稍微解釋一下【根】：班級首頁【樹幹】：從班級消息寄信給我都視為同一層的樹幹。班級首頁，就是這一層的父親，對班級首頁而言，樹幹這一層是他的兒子輩，而枝葉則是孫子輩。【枝葉】：像帥哥、酷妹等【備註】在NAMO中你要建立選單時，記得要在其父親的層次往下建立，以下示範如何操作。建立首頁選項層：修改新增檔案的檔名（重新命名）：在網站管理員的網站點選要更改檔名的
5、檔案滑鼠右鍵重新命名。當你更改完檔名後，NAMO會自動幫你把相關的超連結的設定給重新改過來！如此就不用擔心改個檔名，還要怕其他網頁中的連結設定全錯啦！刪除掉導覽樹不必要的子頁：NAMO預設的選項一般而言會和你自己所需求的選項差異性很大，因此現在我們將不必要的子頁給刪除掉。【GO】在要刪除的子頁滑鼠右鍵從導覽樹移除。（另外校友資訊、圖書館也移除）。如果確定那個子頁不要且連檔案也不要，可以選擇刪除。快速新增子頁1、新增子頁：【GO】網站管理員結構在新聞此子頁滑鼠右鍵複製在上一層首頁滑鼠右鍵貼上OK你可以在最右邊發現新增的子頁2、更改導覽樹的名稱：不過你可發現也叫新聞趕快改一改吧【GO】在新增的新聞
6、滑鼠右鍵內容更改成計畫中的子網頁，例如：教學理念。記一下這個檔名，因為如果每一個都是news_1.html，以後要更新網頁那可看不太懂要改哪一個檔才是！有時候還會改錯！3、修改檔名：【GO】網站管理員專案在news_1.html滑鼠右鍵重新命名輸入新的檔名（例如：教學理念teach.html，記得.html不可以刪掉喔！因為此副檔名也是瀏覽器作為判斷用，在98/NT/2000作為當你點兩下時，會以什麼程式開啟的關鍵）建立完整的導覽樹現在就請依照前面的方法，把導覽樹建立成你所規劃的班級網頁架構。在此我將原本的新聞班級消息，簡介班頭導師（導師介紹），教職員麻辣鮮師（任課教師），學生麻辣學生（並在此
7、頁下建立兩個子頁（辣哥、辣妹）大風吹，吹什麼？我拖拖拖建好了這棵樹，不過選項順序好像怪怪的！沒關係！這可以很快就解決的！1、將班級消息移到選項最上面：因此我們要將班級消息移到班頭導師的左邊【GO】滑鼠按住班級消息不放拖到班頭導師左邊出現三角形的時候（可是代表方向喔）OK放掉就OK啦！2、接著請將麻辣學生、酷站、班級課表、教學理念、班級經營、學生作品、教學檔案、班級活動、等等按照自己的順序排好！終於把架構及順序確立了！不過新增的時候檔名是延續剛剛複製的原始檔名後面加上數字，看起來也不知道WHO WHO WHO（誰誰誰）因此請利用下面的方法更改檔名。（AND由於之前都做過，因此在此就不圖解了！）在
8、此僅提供任名的參考，取好檔名也方便以後維護網站方便，以免看到檔名，也不知道是什麼東西！（省略副檔名.htm）班級消息（news）、班頭導師（leader）、麻辣鮮師（teacher）、麻辣學生（stu）辣哥（boy）、辣妹（girl）、班級課表（timetable）、教學理念（teach）、班級經營（manage）、學生作品（works）、教學檔案（edufile）、班級活動（actions）、酷站（links）。也都命名好啦！避免欲哭無淚：快喔！存檔喔！其實之前就應該先存！還是趕快吧！【GO】檔案儲存專案。如果您是在編輯視窗，同時又開啟很多個檔案在編輯。【GO】在一般工具列全部儲存。 變更布
9、景主題或修改布景主題中的文字 有兩種方法可以變換布景主題，兩種方法都可以達到更換怖景主題的效果【GO】方法1：格式怖景主題方法2：視窗資源管理員怖景主題修改其中文字的字型修改主標題文字的字型【GO】在主標題文字滑鼠右鍵修改怖景主題物件WebCanvas是新的簡易影像處理功能視窗。-【GO】點選圖中主標題文字找到內容小視窗更換字型大小（調整到可以看到所有的字）。PS：雖然此處可以將圖形變大，但是不太建議。修改導覽列的文字字型及大小：【GO】同圖1在導覽列滑鼠右鍵修改怖景主題物件 請注意，由於導覽列上的按鈕動作有一般狀態、滑鼠移到上面及按下後的效果，因此請在圖層小視窗選擇表的分頁，分別選擇norm
10、al、rollover、highlight 點選圖中按鈕標籤在內容小視窗更改字型及大小。記得normal、rollover、highlight都要做喔！一些常使用的技巧新增分隔線：方法：直接使用預設的水平線【GO】插入水平線（箭頭所指的那條線）線條的樣式不是很好看！可以在線條滑鼠右鍵水平線內容修改寬度、高度、顏色、實線與否。方法：選擇自己找到或製作的分隔線，或是使用其美工圖案中的分隔線【GO】插入影像選擇美工圖案（或是從檔案）好了你就可以看到漂亮又有動態效果的分隔線了！不過當你按下存檔的時候，請記得將圖檔存在images資料夾下！表格建立：使用的方法和技巧和WORD差不多！在此我們以班級課表來
11、練習製作。而在課本（P57-P64）也有蠻詳盡的介紹。調整儲存格大小：【GO】和WORD一樣！滑鼠移到線上，出現，按住右鍵，調整儲存格大小。設定表格框線：表格框線預設為灰色的框線！換一下吧！【GO】在表格內任一個地方滑鼠右鍵表格內容設定整個表格所佔的大小，請選擇百分比，寬度輸入85。如果你想取消框線，把厚度設定成0。表格的背景預設為透明，如果想要特別，也可以使用圖形來當背景，或是使用顏色來做背景！不過一般而言比較少這樣設定。解釋一下色彩設定：色彩：如果淡色邊框、深色邊框沒有設定就會使用色彩的設定作為框線的顏色。淡色邊框：表格線的左上部分。深色邊框：表格線的右下部分。【備註】淡色邊框、深色邊框的
12、設定使用必須上圖中資料隔間距不能為0。設定儲存格的文字對齊方式或背景顏色：預設的文字對齊為儲存格高度的中間，修改成靠上。【GO】在欲修改的儲存格上滑鼠右鍵儲存格內容請將垂直對齊靠上。如果你希望背景能有顏色！或是如課表，將不同課程用不同的背景顏色以做區別。你也可以使用圖形來做背景，如果要請選擇合併儲存格：利用每天早上都相同的朝會時間，把星期一到星期五合併成一個儲存格，在輸入朝會時間。【GO】先反白要合併的儲存格滑鼠右鍵表格合併儲存格在儲存格內容中輸入朝會時間。練習兩節課同時在一起，合併上下兩隔儲存格唯一個。【GO】先反白要合併的儲存格滑鼠右鍵表格合併儲存格在儲存格內容中輸入國語、數學、自然、美勞
13、等。設定字型：大小：一般網頁製作，字型size設定一般為1-7，一般大概為3左右，如果要在大一點可以到4以上。字型：現今電腦都會裝很多套字型，不過當網友在瀏覽網頁時，會根據網頁的字型設定去找該網友的電腦中去找是否有該字型，如果沒有該字型，則以預設的細明體顯示。因此為了避免麻煩，請儘量以幾乎都會有的字型細明體、新細明體、標楷體這3種字體為設定，不然請用圖形方式來呈現多樣化的字型。【GO】反白要更改的文字格式化工具列設定字體大小、字型。影像圖形的使用插入圖形方法1：在編輯視窗中有發現如圖（白色區塊）【GO】點選白色區塊滑鼠右鍵影像內容。方法2：由於NAMO已經有提供相當多的美工圖案，因此輸入的圖形大多是自己製作、照片、網路找到的圖片。【GO】點選欲插入圖形的位置插入影像從檔案。方法3：NAMO已經提供相當多的圖形，可以節省很多你去找圖的時間！【GO】點選欲插入圖形的位置插入影像美工圖案。美工圖案：你也可以在此才去美工圖案中找圖。選取圖檔：自行新增圖片，請使用瀏覽到圖形所在位置。提示文字：在瀏覽網頁時，當滑鼠停在圖片上一會兒，會出現的文字敘述。影像效果在NAMO已經支援了部分的影像特效，方便簡易編輯，可以減少到一般影像軟體編輯的時間，算是很貼心的設計。
