十二月 30, 2010

links for 2010-12-30

Posted in Uncategorized 於 10:00 下午 由 midashuang

十二月 29, 2010

links for 2010-12-29

Posted in Uncategorized 於 10:01 下午 由 midashuang

十二月 28, 2010

links for 2010-12-28

Posted in Uncategorized 於 10:02 下午 由 midashuang

終端機底下看不出來的空格

Posted in Uncategorized 於 2:22 上午 由 midashuang

最近在寫php擷取資料夾內部檔案的程式,有時候也會將工作上寫好的程式拿回家測試。

明明在公司可以抓取test資料夾的程式回到家居然不可以,這沒道理阿。
ls指令也有出現測試的資料夾阿。
但是就是怎樣都無法進入資料夾,看得到卻吃不到,真是太神奇了。

視窗底下直接點選資料夾開啟資料夾,ok的,可以開啟。
是權限問題嗎?也不是,用cd 指令直接顯示出來就是說沒有這個test資料夾。
那ls指令底下出現的test資料夾是見鬼了嗎?    @@"

那就重新命名算了,結果才發現test資料夾名稱後面多了一格空格,難怪我看得到卻吃不到  =.=” 下次遇到這種情形就知道怎麼解決了。

空格語法:可以將空格取代為反斜線後接一個空格。 ~$ cd test\

十二月 26, 2010

links for 2010-12-26

Posted in Uncategorized 於 10:00 下午 由 midashuang

十二月 24, 2010

links for 2010-12-24

Posted in Uncategorized 於 10:01 下午 由 midashuang

十二月 21, 2010

links for 2010-12-21

Posted in Uncategorized 於 10:01 下午 由 midashuang

十二月 20, 2010

links for 2010-12-20

Posted in Uncategorized 於 10:01 下午 由 midashuang

十二月 17, 2010

推薦5個CSS framework

Posted in Uncategorized 於 7:08 上午 由 midashuang

目前“自我感覺”好像不錯的CSS框架,推薦給大家,如果有其他認為不錯的在加進來。

1. YUI :由Yahoo開發出來的CSS framework,是非常可靠的框架,可透過YUI Grid Builder工具快速建構網頁,並可建造出多種多欄位網頁,適合用於多種欄位組合的網頁。官方網站範例。 

2. YAML :YAML 是一款開發文檔齊全、非常可靠的框架,相關文檔可參照它給出的English (PDF)文檔和官方網站上的範例,另亦提供YAML Builder 工具快速建構網頁。適合用於三欄式以及具備導覽列的網頁。

3. BlueTrip :主要結合了多個框架的特點,當中集合了BluePrint & Tripoli 框架的部分、Hartija 的列印樣式、960.gs 的簡單性、Elements icon圖示,期望能成為一個含有全部功能的框架。

4. ElasticCSS : 主要目的為快速建構網頁,欄位切割方式採用幾大幾小方式,採用這種方式可以交給框架自動裁切並可快速開發網頁。Elastic欄位範例與採用ElasticCSS架構製作的網頁範例

5. Mollio :Mollio 提供了不錯的佈景主題與版面配置(type-a 到 type-f 六種),其中包含了有1欄式~3欄式框架與導覽列,並可參照其樣式指南Styleguide (PDF)即可快速了解其架構。主要讓設計師能快速的建構出網頁頁面。

CSS framework整理-2

Posted in Uncategorized 於 3:26 上午 由 midashuang

Elements CSS
Elements是一個腳踏實地的CSS框架。它的建立是為了幫助設計師寫入CSS速度更快,更高效。element特點:輕量化、易使用、具備一些基本設定。內部框架只包含header、content、footer三大項,沒有分欄,較適合製作單頁面的網頁。

YAML
YAML是一款開發文檔齊全、非常可靠的框架,參照它給出的PDF文檔和官方網站上的示例可以很輕鬆地上手,它也提供很多開發中可以利用的工具,其中 YAML Builder 是官網上所提供的建構工具,不需下載,可於網頁直接建構出你所要得框架,即可快速構造出一個YAML的CSS佈局實例,並且可直接產生程式碼供你使用。
YAML範例:Layout examples

Baseline
Baseline主要是以印刷排版標準為目的的方式去建造,Baseline可以很容易的開發一個具備網格、排版美觀的網站。透過內部的設置可以重置瀏覽器的設置並建立一個基本的排版布局。Baseline當中包含了typography, form, gird讓您可快速建置網頁雛型,並邁向以網格基線為基礎的印刷排版框架。
其中網格可分成單頁面,兩欄式,四欄式等方式以方便排版,範例網頁

52Framework特點:

  • HTML5
    • 全部採用目前最新的HTML5標籤: header, nav, section, article, footer, and more to come soon (with styling)
    • 使用全新的<!DOCTYPE html> and <html lang="en">
    • 新的輸入字段類型: url, email, etc
    • 嵌入腳本(JavaScript)中只使用script標籤沒有屬性類型
    • 改進復位 HTML5的樣式表
  • CSS3
    • 使用新的選擇器,可自行定義選定的屬性文本。
    • 方塊圓角
    • 文字陰影
    • 方塊陰影
  • Grid
    • 16 column, 52 pixel based with 8 pixel gutter
整體結構如下
<body>
     <header>
        <nav>
        </nav>
    </header>      

    <aside>
        <form>
        </form>
    </aside>
    <section>
        <article>
        </article>
        <article>
            <code>
            </code>
            <article>
            </article>
        </article>
    </section>
    <footer>
    </footer>

</body>

使用52framework將需採用新的元素,此框架已幫你設置了一些常見的元素,如標題標籤(h1, h2, h3)等風格以及基本的頁面排版,另外還多了一個顯示代碼的地方,另外亦可採用網格方式實現網頁架構。

Tripoli Framework
Tripoli是一個用於 HTML的表現的通用的CSS規範。通過重設和重建瀏覽器標準,tripoli為你的網站項目提供了一個標準的,跨瀏覽器表現的基礎。Tripoli可以將頁面分成兩欄式或者三欄式,整體結構如下:

 *     .l1: 2-column 66% - 33%
 *     .l2: 2-column 33% - 66%
 *     .l3: 2-column 50% - 50%
 *     .l4: 3-column 33% - 33% - 33%
 *     .l5: 3-column 16% - 66% - 16%
 *     .l6: 3-column 25% - 50% - 25%
 *     .l7: 3-column 66% - 16% - 16%
 *     .l8: 3-column 50% - 25% - 25%
 *     .l9: 3-column 25% - 25% - 50%
<body>
<div id="container">
	<div id="header">
		<div><!-- header content --></div>
	</div>
	<div id="primary">
		<div><!-- primary content --></div>
	</div>
	<div id="secondary">
		<div><!-- secondary content --></div>
	</div>
	<div id="tertiary">
		<div><!-- tertiary content --></div>
	</div>
	<div id="footer">
		<div><!-- footer content --></div>
	</div>
</div>
</body>

BlueTrip
BlueTrip :主要結合了多個框架的特點,期望能成為一個含有全部功能的框架,很好很強大。優點:

特性:
* 24列的網格
*合理的排版風格
*清爽的表格樣式
*列印樣式表
*空白的開始模式
*性感按鈕
*狀態消息樣式

利用BlueTrip框架所做的一些網頁:SHOWCASE

SenCSS
Sen並沒有提供佈局方面實例,但提供了另外一些如基準線、字體、内外邊距、表格、列表、標題等的設定支援。
範例頁面

Typogridphy
Typogridphy是一套採用印刷排版與網格布局的方式建構的框架,有點類似Baseline,並基于 960 grid system 的 CSS 框架,可以讓設計師或者開發者快速創造網格布局,同時他完全採用em來進行布局,讓網頁可以縮放。不過用google的瀏覽器開啟範例網頁時,頁面會超過瀏覽器,有點問題。

Content with Style
是採用一個固定寬度的布局,其中有六種常見的部落格結構布局。

  • 垂直導覽列與單欄式內容
  • 垂直導覽列與兩欄式內容
  • 水平導覽列與單欄式內容
  • 水平導覽列與兩欄式內容
  • 水平導覽列與本頁導覽與內容
  • 水平導覽列與本頁導覽與兩欄式內容

整體結構如下:

  • Header
  • Footer
  • Main content
  • Sub content
  • Main nav
  • Local nav
<body>
        <div id="page">
            <div id="header">
                <hr />
            </div><!-- end header -->
            <div id="content">
                <div id="main">
                    <hr />
                </div>
                <div id="sub">
                    <hr />
                </div>
                <div id="local">
                    <hr />
                </div>
                <div id="nav">
                    <hr />
                </div>
            </div><!-- end content -->
            <div id="footer">
            </div><!-- end footer -->
        </div><!-- end page -->
        <div id="extra1">&nbsp;</div>
        <div id="extra2">&nbsp;</div>
    </body>

Mollio
Mollio是一個簡單的設置的HTML / CSS模板。這樣做的目的是建立一套使用CSS佈局網頁模板以及一些樣品基本內容,Mollio 提供了不錯的佈景主題與版面配置(type-a 到 type-f 六種),其中包含了有1欄式~3欄式框架與導覽列,並可參照其樣式指南Styleguide (PDF)即可快速了解其架構。

FEM CSS Framework
FEM是採用960px寬度,12欄網格系統,以及一些CSS常用方式,以方便網頁布局。另外也是基於960 Grid System,但使其更加靈活與快速的佈局網頁。每欄網格兩邊各有邊距10px,若需要時亦可拿來使用。
另外也增加了一些一般性的風格、基本樣式表單、表格、菜單、讓製作更加容易。

Emastic
特點
*輕量級
*個性化的頁面寬度(em,px,%)
*網格中可使用固定和流動列
*採用em讓布局更有彈性
*基線網格排版
網頁中也有良好的範例與教學,可參照網頁上教學

Templates

下一頁