網站結構

33973006 昭雯的網站


目標
了解網站內容的線性結構、層屬結構與檔案命名

學習新功能

網站地圖 (site map)
線性結構
層屬結構

超連結
一、前置作業

開啟Dreamweaver，進入網站管理，連結到遠端資訊。
於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
存檔。

二、網站地圖
一個網站是眾多網頁的組合，每一個網頁，都是個別的檔案，常見的附檔名為html。每一網頁會與其他網頁建立出關係，例如是同類關係，或者連續關係，或者連結關係。
為了管理這些網頁成為良好的結構，網站會附設網站地圖 (有中譯為網站導覽)，讓維修人員或瀏覽者容易理解整個網站的結構。在架網站時，須先想好內容的組織架構，以期能符合使用者經驗。

三、線性結構

線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
製作步驟：

在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
在work_1內新增一個檔案，取名為article1.html。
再新增一個檔案，取名為article2.html。
再新增一個檔案，取名為article3.html。
再新增一檔案夾，取名為images。
將三個圖像放入images資料來內。

開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
為下一篇設超連結，連到入article2.html。
儲存檔案article1.html。

另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
為下一篇設超連結，連到入article3.html。
為上一篇設超連結，連到入article1.html。
儲存檔案article2.html。
另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
將上一篇的超連結連到article2.html。
儲存檔案article3.html。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
上傳到伺服器。
四、層屬結構

層屬結構：像書本那樣，一書有數章，每章數節等。
實例簡介：利用可任選且具超連結的文字或圖像。
製作步驟：

在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
在work_2資料夾內新增一個檔案，取名為article1.html。
再新增一個檔案，取名為article2.html。
再新增一個檔案，取名為article3.html。
再新增一個檔案，取名為article4.html。
再新增一檔案夾，取名為images。
將四個圖像放入images資料來內。

article1.html，編輯它，使成為圖文作品，在文章最下方加入第一篇、第二篇、第三篇、第四篇等四個詞，為讓各詞間有空白，按Ctrl+Shift+空間棒。

將第一篇做超連結到article1.html。
將第二篇做超連結到article2.html。
將第三篇做超連結到article3.html。
將第四篇做超連結到article4.html。
儲存檔案。
另存新檔，取名為article2.html，取代原檔案，編輯article2.html，存檔。
另存新檔，取名為article3.html，取代原檔案，編輯article3.html，存檔。
另存新檔，取名為article4.html，取代原檔案，編輯article4.html，存檔。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
上傳到伺服器。
五、首頁與內頁超連結

將index.html檔的作業一與work_1內的article1.html連結。
將index.html檔的作業一與work_2內的article2.html連結。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
儲存檔案。
上傳到伺服器。


越看越花 這真是有難度阿

11/29網站架設

http://kimonotw.myweb.hinet.net/


一般而言，架網站有二個方式：

一是以自己的電腦當伺服器（server）；你要申請網站，要繳年費；
二是以別人的電腦當伺服器。你可能要繳費，但很多是免費的。
現在，你要做的是第二種，即以本校提供每人10ＭＢ空間來架設個人網站。它有一些限制，譬如，它無法建構資料庫。雖如此，仍可完出一些有趣的內容，以下介紹以dreamweaver來架設網站的方法，分以七大步驟：

一、建立本地端的資料夾

先在電腦D:槽內新增一個資料夾，一律取英數名，不要空格或特殊符號，本例中，取名為web123456。
打開web123456資料夾，新增一個資料夾，取名為www。(注意：英文要小寫)

二、用Dreameweaver建立本地資訊

啟動Dreamweaver，開啟新檔，選「html」。
從主選單選網站 >管理網站，於對話框點按「新增網站」鈕。
點按浮動視窗上方的「進階」標頭。
在左上角的分類下，選「本地資訊」。
點按「本地資料夾」空白欄右側的資料夾圖示，選擇web123456這個資料夾。(注意紅色框內最右邊不可以有www)。

三、設定遠端資訊

接著，在分類欄內選「遠端資訊」，並完成類似下圖之資料設定。
注意，主機目錄欄要留白。要打V的一定要打鉤。
換測試鈕。
當顯示可以連繫成功，可以按「確定」鈕。

四、實際連線

在Dreamweaver作業視窗右側，按以「連線至遠端主機」。
選用「本地端」。
滑鼠在www資夾，點按右鍵，按新增檔案，取名為index.html。
注意，這項命名字不可錯誤。
點按index.html二下以開啟dreamweaver，它會是一個空白頁面。
在頁面內輸入能表達你個人資料的文字內容。
在title欄內鍵入「xxxx的首頁」
檔案>存檔。
五、檔案上傳。

點按上傳圖示。
六、瀏覽成果
依上述步驟，你應已架好自己的個人網站了，你應該記下你自己的網站的網址！它應該像下列文字串：http://web2.ntit.edu.tw/~sxxxxxxxxxxx/ （註：sxxxxxxxxxxx是你的號碼）

到瀏覽器的位址欄，鍵入你的網址
http://web2.ntit.edu.tw/~sxxxxxxxxxxx或
http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.html或
http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.htm。
看看三者有沒不同。

七、下載
當你將網站資料下傳到伺服器之後，你可到任何地方將資料下載。下載的步驟如下：

同主步驟一至四。
點按Dreamweaver作業視窗右側的下載。
在本地端，將下傳的檔案加以編輯，儲檔。
上傳。
到瀏覽器看結果。


學到了一種架設網站的方法了

11/15隨堂作業

1.半學期來製作個人部落格及分組部落格的收穫與待改進之處。

徐文嫻的部落格

白意婷的部落格

蔡妙音的部落格

虛實之間 (入選無名網站動漫第20名)

阿土伯的有機肥

雪兒好

小心眼

因為之前就有在無x有一個blog 可是都沒有很辛勤的在更新
而在開始製作後發現網誌要常更新(要有內容 ) 在版面上也是
需要花心思的呦 版面不僅要有新意 文章內容的字要清楚
背景也要考慮許多因素 我覺得這是一門深奧的學問阿

2.以下兩者的差異

阿默的生活

中國攝影

阿默 - 偏向個人 及 活動資訊分享 比較偏向個人為中心的blog
影像- 是一個交流的平台 而且與藝術相關 不像是日誌 偏向大眾交流的網站

3看以下的網站有何感想

Macannashoe

好厲害的一個網站 有個性及特色
但是一開始看到首頁還以為只是個塗鴉的網站
沒想到是在賣個人商品 還走國際化路線呢

11/8分組報告之最終決戰

下次上課在5樓囉



同學們的 blog


for nothing - 街頭藝術

小天使的第1000首歌 - 音樂藝術

慈悲熊美食料理 - 家常美食

饕掏不絕 - 城市風味 美食




圖片來源:komika 如有侵權請告知喲 謝謝

11/1 新的一個月之 分組報告 2

在遙遠的彼方 能看見夢想之地嗎?

我在慌亂中 探索著我的之後

也在這裡闡述著... 現在的 我










今天分組報告的同學blog如下

連結列

波本可樂 - 地方美味

八分之四等於二分之一 -人文藝術

毛毛造照 - 心情扎記 創作

人生樂不樂 - 行銷無所不在...

大家都好厲害喔 不論是在分組的或是個人的
每個人都用心的在經營著自己的小天地
也希望大家的小天地能變成大世界喔 加油