2011年12月28日 星期三

網頁美工 XHTML+CSS (DIV + CSS)

純綷整理資料的筆記…文章雖命為XHTML+CSS,不過還是重在與Visual Studio這個工具的銜接(DIV + CSS)…所以淺嘗輒止…

網頁美工以目前來說,主流依然還是DIV + CSS
搭配使用的網頁美工工具嘛,也還是 Fireworks、Photoshop、Dreamwever

◎CSS+DIV 進行網頁美工,和傳統的 TABLE 網頁布局而具有以下4個顯著優勢

  1. 美工設計與網頁文字內容可以做區分
    將設計部分做區隔出來放在一個獨立樣式文件中,HTML文件中只存放文本信息。
  2. 提昇搜索引擎對網頁的索引效率
    用只包含結構化內容的HTML代替嵌套的標籤,搜索引擎將更有效地搜索到你的網頁內容。
  3. 提高頁面瀏覽速度
    對於同一個頁面視覺效果,採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面語法少太多了,前者一般只有後者的1/2大小。
  4. 容易美工/程式維護和改版
    簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。
  5. 美工設計和網頁程式再分離
    DIV + CSS不僅僅是其符合W3C標準,而是通過採用CSS+DIV,網頁程式也比較好超作,已經把設計與程式分離了。

◎用比喻的方式來說說DIV和CSS:


程式 是房子裡頭的管線,管線怎麼埋怎麼佈各憑(水電工的)本事,反正用的人電會通水會流就好了。(哈哈,程式設計式像水電工…很貼切吧…)
DIV  好比是房子的鋼筋,鋼筋的部分沒處理好,是不會影響佈管線的水電工的啦,不過房子中間多了一支柱一根樑,都會牽連到後期的裝潢隔間問題。所以DVI 要先打個設計圖…然後再實作是比較洽當的。
美工 是房子裝修,裝潢的好不好當然美工的設計感很重要,不過如果DVI 一開始搞得不好那麼裝修就得花很多工夫。
而美工裡CSS的部分像油漆…漆錯了還可以換,換完了還是可以重漆

那麼TABLE呢,早期的TABLE真的很重要,用PHOTOSHOP作網頁,初期也是走TABLE切片,TABLE的網頁就好像在word上畫表格一樣,把網頁切成若干小塊…全部包包在HTML裡,其實初期的時候我還真覺得DIV+CSS很麻煩,不過隨著同一網站的網頁愈做愈多時,你會慢慢發現他的好處的。

◎常見的 DIV 架構

image

HTML的部分

<!--Wrapper 外層 -->
<div id="WRAPPER"> 

<!--Header上橫幅 -->
<div id="HEADER">....</div>

<!--MAIN_NAV主選單 -->
<div id="MAIN_NAV">....</div> 

<!--CONTENT內容區 -->
<div id="CONTENT">....</div> 

<!--FOOTER頁尾 -->
<div id="FOOTER"> ...</div> 

</div>



CSS的部分

#WRAPPER
{
    width: 800px;
    margin: 0 auto;
    padding: 0 10px;
}

/*---- 頁首 ----*/
#HEADER
{
    background-color: #FF3300;
}
#HEADER h1 a
{
    text-indent: -9999px;
    display: block;
    width: 800px;
    height: 800px;
}

/*---- 主選單 ----*/
#MAIN_NAV
{
    background-color: #0000FF;
    overflow: auto;
    width: 800px;
}
#MAIN_NAV ul
{
    list-style-type: none;
}
#MAIN_NAV li
{
    float: left;
}
#MAIN_NAV li a
{
    display: block;
    padding: 5px 10px 5px 10px;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    font-size: 12px;
    text-decoration: none;
    border-right: 1px solid #FFFFFF;
}
#MAIN_NAV li a:hover
{
    background-color: #FFFFFF;
    color: #000000;
}


/*---- 內容區 ----*/
#CONTENT
{
    background-color: #00CC00;
    clear: both;
}
#CONTENT h2, #CONTENT h4, #CONTENT p
{
    padding: 6px 20px 6px 20px;
    font-size: 12px;
}
#CONTENT h2
{
    font-family: Arial;
    font-size: 24px;
    text-align: center;
    padding-top: 10px;
    background-color: #666;
    color: #FFF;
    letter-spacing: 10px;
    border-top: 2px #999 solid;
}


/*---- 頁尾 ----*/
#FOOTER
{
    background-color: #FFFF00;
}
#FOOTER h2, #FOOTER p
{
    font-size: 12px;
    padding: 5px 20px;
    font-family: Arial;
    color: #FFFFFF;
}
.clearfloat
{
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
} 
 


◎ 更多的 DIV 架構
恩,有人做好了大致的DIV架構讓大家直接套用修改…40個DIV架構應該夠用了
image

點我下載  (來源自: http://blog.html.it/layoutgala/)

 

◎偶然看到的網頁排版的18個提醒 (CSS設計時可參考)

  1. LOGO:基本logo特徵,符合logo設計基礎(平面設計通用)顯示器效果:清晰度,最小尺寸(因顯示器分辨率而帶來的,等同線下平面設計的印刷效果)
  2. 文字:內容主標副標決定字體、字體大小、粗細;狀態決定顏色(默認或者根據網站特殊統一)
  3. 廣告、內容圖片:尺寸樣式的定位,同一頁面的和諧性,圖片的優化,位置的節奏,大小對比。
  4. ICON:品牌性,表達準確合理,設計手法(依據品牌性),一致性,作用:吸引,醒目,方便識別、理解、操作、記憶。
  5. BUTTON:區別(不可點擊),根據人的生活經驗:厚度,可按,質感(實體聯想),色彩(品牌性、統一性、對比性);統一的樣式大小(依據裡面文字的內邊距統一)
  6. 背景圖片:氛圍效果營造,同產品的統一性,優化(品質大小,色彩信息,實現方案)
  7. 圖文排版:主圖次文,圖文節奏,空隙,樣板化。
  8. 當前狀態:放大(形狀),變色(反色、對比色、明度純度區別色),鏈進鏈出後指定內容提示。
  9. 交互控制項:樣式合理準確性(人對系統默認的認知和生活常規認知),狀態(視覺表現樣式和動作過程優化),創意。
  10. LOADIONG:內容關聯性(loading前後的內容關聯),無聊等待的樂趣,體積、面積優化,創意。
  11. 使用者回饋:包含了成功、出錯、提示、無結果等回饋,文案(明確、合理、人性化、創意),圖形(明確、醒目、色彩的心理認知準確度)。
  12. 動畫效果:過程合理(模擬真實環境的合理化),連續,節奏感,用戶日常動作表現,音效配合,創意。
  13. 首尾設計:首(品牌宣傳、自身特點、明確內容、氣氛表達、創意。)  尾(呼應、節奏,創意。
  14. 適應屏設計(全屏設計):最大最小屏幕的考慮(文字、圖片的位置、折行效果)
  15. 固定尺寸的欄位設計:合理的單元格(考慮黃金分割),單元格面積節奏,邊距統一性
  16. DEMO 設計樣稿:對內容最多最少的考慮。
  17. 頁面:品牌性,基調元素一致性,復用性,節奏感、面積感,視覺第一吸引,引導瀏覽,點線面關係,素描原理(運用素描的基本規律來做頁面)。
  18. 閱讀:背景對閱讀(視力)的舒適度,內容與背景的對比舒適度。

2011年12月27日 星期二

Dnow 試題分析(雙向細目)試算表

image
這個試算表是五年前做的
因為最近期末評量由我命題
為了檢視自已命題的方向和配分的方式是否正確
又把這張表再搬出來一次

製作這個Dnow 試題分析(雙向細目)試算表的原因
說起來蠻好笑的…五年前以替代役的身份參加了某教授的課程
測驗統計與命題分析…李坤x的那套
三個整天的課程,讓我快吐血…
從第一天由教授講解後
接下來二天,全部是實作,
最累的部分除了分辨題目是二元/多元、題目的知識向度外
我想測驗前雙向細目表的「統計」和「製表」更讓人望之却步

個人覺得不可思議的是在研習後二日
一個教「統計」的專業講師
竟然給我拿「計算機」在那邊算雙向細目表
教授都拿計算機算半天了,可想而知台下是什麼盛況了

所以我後來就依據他的理論,試著製作這個試算表
這個試算表改過好多次了,後來歷經二次「優良試卷評選」的洗禮後誕生了
這麼好的試算表,我當然要毛遂自薦
Dnow 試題分析(雙向細目)試算表可以讓你節省「製作」「統計」雙向細目表的時間
可以省多少時間…我只能說,從命題後到製表,熟練的話只要10分鐘
省下的時間全還你去檢視試卷的核心
一般人在做命題分析時,常常因為怕改雙向細目表,然後索性不改試卷內容,
使用Dnow 試題分析(雙向細目)試算表 ,我保證你可以從此不再畏懼。

點我下載:Dnow 試題分析(雙向細目)試算表

使用方式我就不贅述了,在檔案裡有大概的使用方式
特別提醒一點,這裡我只做到測驗前的部分
後測的統計有提供表格但已年久失修,我也沒在維護了
這個試算表對我而言是重要的里程碑…
(1) 寫程式之前一定要熟悉該系統是怎麼運作
(2) 寫程式之後二、三次的實際操作才能確保程式沒有太致命的bug
(3) 寫程式過程中,有時要打破 / 跳脫現有的格局/規範 (←這是我製表完後覺得最有價值的部分)

2011年12月17日 星期六

將 BartPE 安裝在 USB 碟

要將BartPE 安裝在 USB 磁碟中的原因有以下:

  • 製作自已專屬的 Windows PE ,中間有許多測試偵錯階段,總不能每試驗一次就燒錄一張光碟…那樣子勞民傷財的事dnowba做不來。
  • 就算到了發佈階段燒錄成了一張專屬的 Live CD ,在修復客戶的電腦時,我還是會希望有其他的救援機制,例如遇到了客戶電腦沒有光碟機的時候,如果也有一個LIVE UFD…那就萬無一失了。
  • 當然 dnowba 用 USB 製作 BartPE 的最終目標,是實現一個真正 LIVE 的系統,LIVE 不只是救援、本身還是一個可隨時添加/修改的「活」的系統。

隨著目前主機板對 USB 開機的支援度提高,以及 USB 磁碟價格愈來愈平易近人,既然勢不可擋…那就張開雙臂來好好的擁抱它吧…

BartPE 及工具PE Builder 的使用教學

什麼是 BartPE (Bart Preinstalled Environment) ?

它可以幫助你建置一個「個人」預先安裝系統的環境,BartPE 也很適合當作維護系統的工具。(這篇文章是舊事重提,不是什麼新技術了,純綷複習順道看看官方有什麼新玩意兒。)

它是利用 Windows XP 或 Windows Server 2003 的安裝光碟,截取出核心檔案,然後加以封裝成為一個開機系統,這個開機就可執行的系統的長像就是windows的畫面,想像一下,很早期在做系統維護的時候,ghost 必須在dos介面下操作,相較於早期的dos安裝環境,windows下操作ghost,圖形化的介面會讓你更上手些;好處當然不只這個,有些硬體的驅動並沒有辦法在dos情況下載入(這個狀況現在很少了,主機板這部分的支援度改善非常多),那麼在ghost的時候會出現找不到硬體的窘境…若是在載入windows環境後,那麼硬體的支援性會比較好一些。

BartPE 預先載入的環境可以是xp或是2003 (32位元),同時支援網路連線、解析度到 800*600,除此之外還有一些附屬的工具,如磁碟備份、掃毒…等等的修復工具…所以BartPE 是可以取代 dos安裝環境的。

特別注意的地方是,BartPE 不是微軟體產品,他也不是衍生自微軟開發的「Windows PE (Microsoft Windows Preinstallation Environment) 」,這二者間有什麼不同:

  • 用過Windows PE應該知道,他只是有類似xp畫面的空殼,裡頭要執行程式還是得靠打指令;BartPE 則是和xp一樣,程式都是圖形操作介面( GUI )。
  • Windows PE 定位在 OEM 做程式大量部署的平台;BartPE 則以成為新一代系統救援工具為開發願景。
  • Windows PE 僅提供給OEM 使用;BartPE 則為人人可使用的免費系統。

除了上述的差別外,BartPE 在功能的特點還有「支援自行添加軟體」「提供自製的Nu2Menu,讓你客製化開始選單」「支援網路連線」「支援檔案分享」「提供自製的pedos,可執行dos指令」

image

如果你有興趣的話,建議去官網一探究竟 http://www.nu2.nu/pebuilder/
dnowba底下只概述怎麼製作 BartPE ,需要使用的是官方提供的 PE Builder 這個工具怎麼使用,如果你是一般家用者,應該是不需要學這種東西,PE 版本的功能,對於家用者來說就是 救援 / 備份 系統,所以直接找現成的 PE 版就可以了(甚至是別人ghost 起來的系統都可以)。這篇文章比較偏向一般公司機關的系統管理者,怎麼做自已的大量部署的PE光碟,讓你在安裝客戶的系統時能客製作且節省安裝時間。

(後記:我發現要完成這麼大的專題,好像要花不少的時間…這邊只能說是個補個網路上比較少見的入門文件…如果有興趣的話自個再爬爬進階文章)

2011年12月14日 星期三

VMware 也可以 設定USB開機

 

即使到了 VMware 6.5 的版本,在虛擬機器下的 BIOS 還是不支援 USB 開機, 我想這是理所當然的事情啦,VMWARE的用途很廣了,比方說模擬BIOS畫面的修復工具,通常是用一般的VCD裝置,所以用掛載ISO檔的方式或是和HOST共用實體光碟機都可以實現,只是後期的修復工具還多了一種裝載在USB隨身碟的方式,想當然爾VMWARE不會支援,所以我們如果一定要透過USB 來開機的話,得透過第三方軟體來實現。

這個工具叫做 Plop Boot Manager 官網是 http://www.plop.at/en/home.html,可以到 http://www.plop.at/en/bootmanagerdl.html 下載 plpbt-5.0.13.zip 這個工具。
image

詳細使用方式如下:

NoName XPE 檔案結構概述,以及使用上的技巧

在讀 NoName XPE 這篇文章前,建議你對他的源頭 BartPE 有所了解比較好解構 ( 至於 BartPE 怎麼搞出來的我也沒能力知道 ,我只會使用 BartPE 作類似 NoName XPE 的 live cd 而已。雖然微軟已宣告終結 win xp 時代,但這種技術是千篇一律,搞懂了一種你就有敲門磚讓你誤打誤撞,撞出一條康莊大道了,所以即便是舊事重提我也要提,在NoName XPE官方論壇網站啞然而止的當下,相信dnowba的這幾篇紀念文對新手來說絕對是雪中送炭…

NoName XPE 的起源和最原始的用途,dnowba已經在上一篇講解過了

不過如果要利用現成的 Noname XPE 改成 自製化的 MY XPE 那麼有趣的事情也多了,這篇文章就來依照我常聽到的需求,寫一下實現的方式:

既然要用 Noname XPE 加以修改,那麼得先學會這個軟體的結構:

這個步驟絕對不能少,觀察→假設→驗證…符合科學精神 ,當然作者釋出解說文件最好,不然自已觀察一下也是ok的,我們不是反編譯員,不用厲害到要還把人家的檔案格式反解回來 ,只是要從觀察中演繹,模仿並如法炮製就可以了。
dnowba 用的版本是最後一個版本 20090909 XPE…這個版本和第一版的結構不同 (因為概念上不同,20090909 是模組化的概念 ),這個版本的結構上概述如下

ISO檔案結構為

  1. OUTTOOL 資料夾:放「非XP內建軟體」的資料夾,裡的的結構為
    • WIMMOD 資料夾:-模組化軟體都放在這邊,軟體是以 *.wim 為檔案格式,軟體最好是免安裝類型的軟體是最適合
    • OUTPECMD.INI:放軟體捷徑的地方,雖然用 *.wim 包了軟體,但還是需要執行的捷徑。
    • OUTTOOL.CMD
    • WIMMOD.CMD
    • WIMTOOL.EXE
  2. RXPE 資料夾:
  3. BOOTFONT.BIN:啟動時的因為要顯示中文字型,所以夾帶這個檔案,觀察一下容量,應該是抽掉了其他非必要的「字」
  4. RXPE.IM_ :有人反應說自製軟體包進去後會沒反應,主要出在XPE精簡過...它比XP少了很多的檔案...所以會不能使用...解決方法就是補檔案進去核心內(RXPE._IM)
  5. RXPE.SIF :
  6. ISO 資料夾:
  7. WIMLIST資料夾內的系統維修檢測模組.LST這個檔案:系統維修檢測模組,.LST內的WIM列表需要跟WIMMOD資料夾的軟體WIM的檔名要一樣

NoName XPE 加入其他工具軟體

 

NoName XPE 加入硬體驅動

 

xpe、ubuntu 雙系統

說穿了,這不能叫雙系統,因為他們分別存在二個不同的映像

xp、win 7 雙系統

看懂了嗎,如果你爬文的關鍵字下得不好,打了xp、win7雙系統,就算再加個「usb」當作keyword,你還是會找到一些不相干的文章,因為很重要的二個重點: 一、XPE 不是 XP,他只是系統救援用的 LIVE CD ,請別把他當作又要用PPS看影片、又要用WORD寫報告的家用系統。二、這種在開機選單上顯示 XP、WIN7二個選項讓你選系統的,不是雙系統,因為他們是分別存在二個不同的映像檔 (ISO 格式) 裡面的。

 

修改開機選單

 

 

( 這篇文章未完成…太累了…而且功課都沒好好溫習…先不寫了 )

2011年12月10日 星期六

XPE…不是PXE、也不是WIN PE…把XPE系統放入USB隨身碟

用USB碟來作WINXP系統碟…這個專題是一個小朋友給我的功課
他的電腦硬碟爆了,突發其想的想要用USB碟來當作系統開機區
因為他曾經有用過LINUX OS的經驗…所以他也想在WINDOWS上實現

好吧,為了讓這個正在轉大人的孩子免於淪入這個小地獄裡
網路上充斥一堆只講STEP BY STEP的文章會害死這些小朋友
怎麼爬文也爬不出這個泥沼
DNOWBA 決定再把陳年的舊技術再拿出來重談一次

這個技術的確是陳年往事…但是卻是很有趣的一個專題,要把他細細的說來還真要花一些工夫…因為裡頭可以討論的東西很多很多

當然怎麼實現,這麼核心的技術DNOWBA也是截取別人所長。最重要的是我在後面會釐清一些觀點…如果有什麼錯誤的地方歡迎指正。


以下為使用教學

先去HP官網下載做磁碟開機的程式HPUSBFW, 解壓縮檔案再執行程式HPUSBFW.EXEimage

選擇USB裝置(小於4GB的話,格式用FAT32),然後勾選建立一個DOS開機作業磁碟,位置就是上圖的HOUSBFW資料夾
image

後面是執行的畫面
image

完畢後可開機隨身碟就完成了!
image

接著下載 NONAME XPE  
http://www.badongo.com/file/23830229

下載後 usbxpe.zip 解壓縮執行 Ghost32.exe,選擇local→Disk→From Imageimage

選擇 usbxpe.gho ghostimage

然後選擇你的隨身碟作為還原位置
image

這邊按ok
image

按yes
image

最後主機版設置為USB開機,把USB插上去…就可以使用了,畫面如下
選第2項就可進入 Noname XPE
image

進入後選擇載入所有模組
image

以下為XPE的畫面
image

上面只是STEP BY STEP 教學,如果你在成功欣喜之後還有餘力的話…看看後面我補充相關的技術文章…

Related Posts Plugin for WordPress, Blogger...
// Dnow Function