了解網頁 What's HTML

HTML教學 By 艾倫的網路設計奎花寶典

教學之前 :
艾倫目前正閉關在W3SCHOOLS鍛鍊經驗值，配合自己之前買的HTML書籍，與網路上的相關教學檔案，希望能夠增強自身的功力。阿亮說凡走過必留下痕跡，艾倫希望釋出讓大家能夠淺而易懂的文件，提供作為學習的參考，所以未來艾倫會將一系列的學習檔案，依序慢慢的釋放給各位看官，大家有空多來捧場，相互切磋。以下第一篇導讀文，請大家指教~


一.關於網頁HTML

1. HTML全名就是Hyper Text Markup Language，中文翻譯為超文本標記語言。
2. 每一個網頁都是由HTML規範的標籤語言所建立的，目的是為了讓瀏覽器能看懂網頁的編排模式。
3. 瀏覽器是閱讀網頁的工具程式，目前的兩大主流為IE與Firefox。
4. 網頁內容通常由標籤包圍，藉以變換各種不同的排版與格式。
5. HTML是製作學習網頁語言的重要基礎，如果想更深入的操控CSS，必須對HTML標籤有基本的概念。
6. HTML又被稱為靜態網頁，因為必須手動編輯每一個頁面；其相對應的稱為動態網頁。
7. 所謂的動態網頁，並不是只會動的圖片或者Flash等影像語音，而是連結資料庫藉由少量的頁面達到呈現更多的資料頁面的網頁服務程式。

二、動態網頁

1. Dynamic service page，動態服務網頁是指藉與伺服器的資料庫服務連結，可節省網頁設計與維護成本。
2. 目前的動態網頁程式主流為ASP.NET、PHP、JSP。
3. 配合的資料庫為MSSQL、MYSQL、ORACLE。
4. 動態網頁最普遍的應用為會員系統、討論區、產品管理系統、電子商務、新聞系統等需要呈現大量資料的網路程式。

三、建議學習設計網頁的各個階段

• 學習HTML語言標籤
  • 認識會基礎的HTML標籤語言
  • 可以只憑程式碼，寫出想要的網頁內容
    

• 學習CSS語法
  • 學習使用CSS編排Div版型
  • 學習使用CSS美化表格及圖片
  • 學習使用CSS作內文排版
    

• 學習Dreamweaver 視覺化設計
  • 熟悉使用所有的工具項目
  • 熟練套用javascript程式與行為指令模式
  • 練習使用DW建立CSS程式碼與外部CSS檔案
  • 使用DW結合PHP或者ASP.NET程式語言
  • 熟悉使用DW結合資料庫做出動態網頁
    

• 學習增添網頁的美感
  • 熟悉向量繪圖軟體Illustrator
  • 熟悉修圖軟體Photoshop
  • 熟悉動畫製作軟體Flash
    

• 學習程式語言(PHP或ASP)
  • 學習基本描述語法
  • 了解運算子與函式陣列
  • 學習網頁應用的程式寫法
    

• 學習資料庫
  • 學習資料庫基本架構
  • 學習如何訂立符合需求的資料庫欄位
  • 正規化資料庫的方法
  • 如何連結網路資料庫
  • 其他的應用

Google Chrome VS Mozilla Firefox

瀏覽器爭霸戰!

Google 於九月三號 推出了名為Chrome的瀏覽器，目前速度最快的瀏覽器Firefoxr出現勁敵，一波新的瀏覽器大戰即將開始，究竟會出現何種結果，網頁設計相關的人應特別的關切，因為需要更多考量瀏覽器程式方面的限制。




世界上最快的瀏覽器
您知道現在目前最快的瀏覽器是哪一個嗎?答案可能還在生產中，但艾倫我今日測試了一下，新版3.1的firefix雖然還在測試階段，但是內藏恐怖的秘密武器"猴子崔西"，雖然還未正式發表，但已先聲奪人，不過網路界的龍頭老大谷歌可不認為快就能搶攻瀏覽器市場。

瀏覽器爭霸戰!
Google的瀏覽器Chrome，獨特的分頁記憶體處理技術，可以快速的開啟網頁並且與google的程式功能結合。谷歌老大除了特別製作32頁的漫畫來衝知名度，並且在同時在世界一百多個國家宣布發行並製作影音檔使用說明，Google夾帶的大量資源與搜尋引擎的佔有率，正一步一步的朝各種可能的發展方向前進。

IE面臨更大的危機~
本來一網獨大的老大哥IE瀏覽器，程式上的Bug不用多說，因為採原始碼封閉的方式，速度早已不及一直處於開放原始碼的Mozilla Firefox。而目前Firefox目前所被廣為採用的3.0.1版本，其實在市場佔有率上早已不惶多讓，不僅在連線速度上因為跟IE7可以明顯的做比較，在資源的佔用率或當機的機率次數，網路上的玩家也有大量的評論，艾倫在此就少唱雖他一下，畢竟未來他可能已經不是第二主角了。

測試版的Firefox3.1內藏秘密武器
Trace Monkey猴子崔西，Firefox新的秘密武器，獨特的圖片下載技術，突破的已往的限制。在3.0版以前Firefox的瀏覽網頁速度幾乎已經獨步全球，可是3.1測試版暗藏的Trace Monkey技術，更超越以往的速度，據測試圖片下載速度高達以往的三十幾倍。但目前釋放'出的測試版本，並未開開啟其功能。在艾倫的測試之下，還未開啟的測試版Firefox就已經比推廣版快上許多，在禁不起誘惑之下，也偷偷開啟了猴子崔西的潘朵拉寶箱。速度，就只有一個字，讚!

超越極限大家一起來測試!
想要體驗一下超快速瀏覽網頁嗎?開啟猴子崔西功能，可以參考重灌狂人的文章，請各自Google一下，培養自己在網路上自我學習的能力也是很重要的。右側為Firefox3.1測試版的下載網址，請點選firefox-3.1b1pre.en-US.win32.installer.exe檔名下載。艾倫邀請大家一起徜徉在超越極限速度的瀏覽器特快車吧!

PS:目前艾倫已實驗出，使用Chrome 的Blog的字型跟平常有點不太一樣，似乎變的有點歪歪跟小小的，似乎支援的字體有點不盡相同。

重要的是什麼?

過去有沒有基礎不重要，重要的是現在要打好基礎

動態網頁班裡很多同學常問我，以前是不是有學過程式的東西
我常會回答他們說 : 沒有 ~

小弟大學念的是新聞傳播，並沒有相關程式設計經驗，唯一有差異性的應該算大學上課時有讀過一點C語言，但完全沒有實機操作，那大約是六年前的事情，到現在也都忘了差不多了。

常常告訴自己，不要排斥任何覺得有用的東西，假定有"我一定學不會"或者"我不適合的"觀念已經存在心中，那將會對學習造成更大的阻礙，很輕易的對學習目標產生距離，有時候這個距離會越來越大...大到你無法超越。


沒有熱忱 就很難堅持

學習過程中最重要的是什麼，那就是對學習目標抱有一定程度的熱忱，我的學習方法就是盡量對任何事物產生興趣，盡量不在心中有排斥感，這樣至少在學習的過程中保持一定愉快的心情。

舉例來說，從高中時期以來我的英語能力一直很差，大學聯考時英文考試沒有超過低標，以高中生來說我的英語能力，算是有點差的。考上大學後一直覺得英語就算不好，將來也不一定沒有飯吃。一直到退伍後找工作時，才開始發現不能這樣下去，語言對往後工作有很深的影響力，有時候甚至是升遷的重要關鍵。

從找到工作後到轉為正職，開始決定了不能這麼一直下去，所以我決定要從自己最害怕的東西開始做起，那就是學好英語。決定目標之後，就是開始尋找資源，陸續在柯見跟華爾街加起來補了兩年多，現在就算覺得自己不夠，但是已經建立起學習模式和信心，語言是需要時間累積的。

有始有終的毅力 學習結束後更能肯定自己

兩年多的晚上學英語時間，很多時候我都累到不想去上課，但是最終我沒有缺過課。別人現在晚上都輕鬆在家裡看電視或者應酬逛街，我幹麻得這麼拼(其實是因為自己以前太混了，現在要補回來)。我對自己說，就算今天只是去補習班睡覺，那又如何，睡飽了又是一條好漢，可以繼續聽上課內容。如果今天偷懶沒去聽，那下次去的話可能就會跟不上，那學習的鴻溝會從此平方倍的加大。

目前我已經把英語課程學習告一個段落，雖然學習的過程中或有偷懶或者懈怠，但至始自終的學習過程，強化了我的信心，讓我免除了從此帶著"菜英文"的標籤，大學同學都很訝異我為什麼可以再回頭去學習英語，並且懷疑我真的是以前大學英語課重修的那位同學嗎，有某種不同的改變在我身上發生了。

多給自己一點信心 保持拼鬥的決心

現在因為加入多媒體班，雖然很多美工技術或者程式語言對我來講，還是很陌生，但是我始終保持不拒絕的態度，對自己喜歡的東西多投入一點熱忱 ; 對於自己不擅長的東西，保持一定的水準即可，或許未來會因為某些機緣，你會用這些你不擅長的東西，在職場上衝鋒陷陣。

最後套句小胖老師的話跟大家說，"加油!好嗎?"

初學PHP

一.網頁型態介紹

• 靜態網頁 HTML CSS JavaScript Host
• 動態網頁 PHP ASP.NET JSP
• 資料庫 MySQL MSSQL Oracle

二.安裝環境設定

1. 安裝架站軟體(Appache PHP MySQL )
2. 電腦資料夾設定副檔名要顯示出來
3. 利用Dreamweaver管理網站
4. 其他環境UltraEdit NotePad

三.寫程式的注意事項

1. 程式為文字檔=>利用DW原始碼模式編輯
2. 檔案放在網頁資料夾=>F\AppServ\www\myweb\intro.php
3. 檔名規則=>可使用英文小寫與數字與底線;不能使用中文、空白、特殊符號建立檔名。

四.PHP的名詞解釋

1.常數

• 一般如name，有$在前表示變數

2.變數的資料型態與符號

• 文字 : 用單引號(裡面內容包含變數不作用)或是雙引號(會將裡面的變數替換掉)
• 三小引號 :< < <
• 數字 : 計算用，注意-不加引號
• 日期 : 文字型態或者特定格式 例如"2008-8-29" or "97年8月29日"

3.資料運算

• 文字字串合併 : 使用 . 號 ， Ex- "姓名".$name
• 數字運算 : * / % + - (備註 : % 表示餘數)

4.函式

• time() :傳回目前時間
• date() :傳回目前日期

5.語法(述敘句)

• 程式每行以 ; 號結尾
• echo : 顯示資料 (輸出至瀏覽器)

五.Dreamweaver管理網站

• 檔案位址:F\AppServ\www\myweb\
• 指定php mysql伺服器技術
• 預覽前置詞 http://localhost/mywed/
  

六.本日作業

• 網頁內容自訂(或自我介紹之表格)
• 圖片式廣告
• 相關應用:每次顯示不同圖片、背景圖、幸運數字等。

使用CSS語法操作Div標籤

CSS作業 我比老師多加了一個logo的語法標籤
並借了同學的幾個CSS，用PHP下變數去做更換CSS的動作
在頁面上按F5重整就會自動更換照片和版型喔
連結網址 <=請點他 以下為CSS語法

---

.main{
background-color:#FFE4C4
}

.menu{
position:absolute;
left:40px;
top:30px;
width:150px;
height:800px
}

.logo{
border:10px ridge red;
background-color:moccasin;
padding:5px;
height:100px
}

.item{
border:10px ridge red;
background-color:moccasin;
padding:5px;
height:30px
}

.content{
background-color:gray;
position:absolute;
left:200px;
top:30px;
width:600px;
height:500px
}

.banner{
border:10px ridge red;
background-color:moccasin;
padding:5px;
width:600px;
height:100px;
}

.page{
border:10px ridge red;
background-color:moccasin;
padding:5px;
width:600px;
height:400px
}

---

有時候很多就是很少

指導老師:韓世國 地點:文化103教室

今天老師教導Logo設計的時候講了一句很有深意的話--很多就是很少!

我有點聽不太懂，不知道有沒人人可以指點迷津 = ="

初步假設解釋
一. 設計圖案的主視覺要素太多，focus的感覺就會變少!
二. 話如果太多，喜歡你的人就很少~~(延伸版)
三. 錢很多，愛心就很少(胡言亂語版)

很難一言以畢之 ，七刀~ 想不通不如來去睡覺....

欠老師的LOGO作業 ...

不知道可不可以混過去~~

---

攝影，是主觀意識的藝術表現

攝影，是主觀意識的藝術表現
潛意識，沉浸在方格的完美裡
半夜兩點，因為錯過世界的美麗而泛起失眠