阿洪之聲: 網頁設計

Subscribe:

顯示具有 網頁設計 標籤的文章。顯示所有文章

2016年11月5日星期六

gettext 製作 PHP 多國語系網站

資料來源

本篇文章會教您如何使用 php + gettext 實做多國語系的網站！

在製作多國語言網站時，可以將所有頁面設定為同一個翻譯檔，也可以個別設定翻譯檔。

在開始製作多國語言網站時，請先在您專案的跟目錄新增 lang 資料夾，然後裡面再新增語系資料夾，例如 zh_TW、en_US，然後在您新增的各語系資料夾內再新增 LC_MESSAGES 資料夾，這個資料夾是在放語言檔的。(完整路徑範例為 /lang/zh_TW/LC_MESSAGES)

Bootstrap 教程

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。

相關資源

2015年9月27日星期日

Web Matrix (Part 2) ASP.NET Razor資料庫應用程式開發

資料來源

其實Razor並不算是一種新的語言，它在@符號後面所接的其實都還是C#語法。而且ASP.NET Razor對於ASP.NET MVC有著很密切的關係，它之所以出現是為了改進ASP.NET MVC的View的程式撰寫風格，也許不要說是改進，也可以當作多了一種View的撰寫方式。在Web Matrix所提供的ASP.NET Razor可以說是個預覽版，未來的ASP.NET MVC 3會含括此功能在裡面。
而關於 ASP.NET Razor 的設計目標有下面幾個：

希望程式碼撰寫是一連貫，一氣呵成的。
學習門檻低，容易上手
不是一套新的程式語言，希望使用既有的ASP.NET／C#基礎即可快速的上手。
使用任一種純文字檔編輯器都可進行開發。
也支援使用Visual Studio 2010來開發，使用Visual Studio 2010強大的Intellisense的支援。
同樣可進行View的Unit Test。

OK!再回到筆者今天的主題，先使用這個預覽的版本來體驗一下資料庫應用程式的開發方式，就順著下面的步驟來時做看看。
1.首先是先安裝OData Helper 1.0元件，這是存取資料庫必要的元件，請開啟Admin畫面將OData Helper 1.0安裝進來。
圖(一)、安裝OData Helper 1.0元件

2.點選左下方的Database，Web Matrix此時會切換到資料庫功能的頁籤。若預設一開始您也是選擇Empty Site，在沒有改名子的情況下，會有一個Empty Site.sdf的SQL Compact資料庫。請在Tables的節點選滑鼠右鍵"New Table"或點選上方的工具列的 New Table建立一個Employes的Table，並同時建立[id]、Name、Title 等三個欄位，如圖二。
圖(二)、建立SQL Compact 資料庫

3.接著任一建立幾筆資料，如圖三。
圖(三)、任一建立三筆資料

4.回到Files頁籤，並新增一個EmployeesList.cshtml 程式檔案，並撰寫如下程式。要注意的地方是，如果要撰寫多行的Razor，可以使用 @{.. } 包起來，而在這個大括號中，

的HTML的Tag還是會直接被丟回前端，不會處理。只有@開頭的會在Server Side處理完畢再丟回用戶端。
圖(四)、撰寫ASP.NET Razor的 foreach，列出所有員工資料

註：這裡先不考慮Web Form的做法。如果使用ASP (但使用.NET的功能) 寫法可能是這樣：

   1:  <%@ Page Language="C#" %>

   2:  <%

   3:      SqlConnection cnn = new SqlConnection("Data source=.;Initial Catalog=Empty Site;UID=sa;password=testxxx");

   4:      SqlCommand cmd = new SqlCommand("select * from Employees", cnn);

   5:      SqlDataAdapter SqlDA = new SqlDataAdapter(cmd);

   6:  %>

   7:  <!DOCTYPE html>

   8:  <html lang="en">

   9:      <head>

  10:          <meta charset="utf-8" />

  11:          <title></title>

  12:      </head>

  13:      <body>

  14:          <form id="form1" runat="server">

  15:          <div>

  16:              <h1>員工資料檔</h1>

  17:              <ul>

  18:                  <%

  19:                  DataSet ds = new DataSet();

  20:                  SqlDA.Fill(ds, "Employees");

  21:                  DataTable dtEmp = ds.Tables["Employees"];

  22:                  foreach(DataRow q in dtEmp.Rows){ %>

  23:                      <li><%=q.id %>. <%=@q.Name %></li>

  24:                  <%

  25:                  }

  26:                  %>

  27:              </ul>

  28:          </div>

  29:          </form>

  30:      </body>

  31:  </html>

5.點選上方工具列的 Run—> Internet Explorer，即可看見執行結果。

圖(五)、執行結果

如何! ASP.NET Razor是不是非常的容易，使用既有所學的即可輕易上手。如同前面所提的，編譯器會很聰明的將 ,

… 等相關HTML標籤直接略過，不會處理！

不過當然！到這裡就結束就太遜了，如果想要做Grid的效果該怎麼做呢？剛才我們已經將OData Helper 1.0安裝進來了，若您有特別細心一點應該會發現當安裝完成的一瞬間，bin的資料夾下馬上會出現一個 Microsoft.Web.Helpers.OData.dll 檔案，如圖(六)：

圖(六)

也就是說您也可以自行到CodePlex下載，再自行將DLL複製到bin下面也可以運作，程式會自動抓bin下面的Assembly。

圖(七)、CodePlex下載畫面：

網址如下：

http://odatahelper.codeplex.com/releases/view/50077

現在這樣的元件已經越來越多了，我想著個元件也會含括在MVC 3裡，未來開發MVC 3的應用程式只會越來越方便且快速。現在請各位在新增一個EmployesGrid.cshtml檔案，並撰寫如下程式碼：

與前面相較，只增加了 var grid = new WebGrid(query); 與Grid資料的展現 @grid.GetHtml() ，如此簡單的程式碼即可執行出如下的效果，如下圖：

各位看，是否非常的容易呢！而且cshtml也可以與Visual Studio 2010完美的結合，我想這就留給下一次吧。 :)
參考資料：
Introducing “Razor” – a new view engine for ASP.NET
http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx

Introducing WebMatrix
http://weblogs.asp.net/scottgu/archive/2010/07/06/introducing-webmatrix.aspx

Announcing the OData Helper for WebMatrix
http://channel9.msdn.com/Blogs/jsenior/Announcing-the-OData-Helper-for-WebMatrix

ASP.NET MVC 3: Layouts with Razor
http://weblogs.asp.net/scottgu/archive/2010/10/22/asp-net-mvc-3-layouts.aspx

ucing ASP.NET MVC 3 (Preview 1)
http://weblogs.asp.net/scottgu/archive/2010/07/27/introducing-asp-net-mvc-3-preview-1.aspx

張貼者： Gelis 於上午6:18

2015年7月31日星期五

普通table表格樣式及代碼大全(全)(一)

資料來源

單實線邊框表格

虛線邊框表格

點線邊框表格

點線邊框表格

雙實線邊框表格

雙實線邊框表格

槽線邊框表格

槽線邊框表格

脊線邊框表格

內凹效果邊框

外凸效果邊框

內虛外實邊框

外虛內實邊框

無邊框表格

隱藏下邊框

隱藏上邊框

隱藏左邊框

隱藏右邊框

隱藏左右邊框

隱藏上下邊框

只顯示上邊框

只顯示下邊框

只顯示左邊框

只顯示右邊框

不顯示任何邊框

單行單列

一行多列

一行多列

一行多列

一行多列

一列多行

一列多行

一列多行

一列多行

多行多列	多行多列	多行多列
多行多列	多行多列	多行多列
多行多列	多行多列	多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

多行多列

合并列的表格
合并列的表格	合并列的表格	合并列的表格
合并列的表格	合并列的表格	合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并列的表格

合并行的表格	合并行的表格	合并行的表格
	合并行的表格	合并行的表格
	合并行的表格	合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

合并行的表格

復雜表格	復雜表格			復雜表格
復雜表格	復雜表格	復雜表格	復雜表格	復雜表格
		復雜表格	復雜表格	復雜表格
		復雜表格	復雜表格	復雜表格
	復雜表格	復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

復雜表格

隱藏	橫向	分隔線
隱藏	橫向	分隔線
隱藏	橫向	分隔線

隱藏橫向分隔線
隱藏橫向分隔線
隱藏橫向分隔線

隱藏	縱向	分隔線
隱藏	縱向	分隔線
隱藏	縱向	分隔線

隱藏縱向分隔線
隱藏縱向分隔線
隱藏縱向分隔線

隱藏	縱橫	分隔線
隱藏	縱橫	分隔線
隱藏	縱橫	分隔線

隱藏縱橫分隔線
隱藏縱橫分隔線
隱藏縱橫分隔線

標題
文本內容——標題位于表體外的表格

標題

文本內容——標題位于表體外的表格

標題

文本內容——標題位于表體內的表格

標題

文本內容——標題位于表體內的表格

標題

文本內容——標題位于邊框上的表格

標題
文本內容——標題位于邊框上的表格

表中表

文本內容——表中表效果

表中表
文本內容——表中表效果

利用Div標籤與CSS建立基本單欄網頁版型

資料來源
利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議網站為例

1. 一、Div標籤與CSS

在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為風格設定，一個建築網頁架構，一個塑造網頁美感。

2. 二、單欄版型的範例

進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。

第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/

2015年7月30日星期四

讓你的 HTML Table Responsive 吧！

資料來源

客戶表示：哎呀，我的這個表格在手機版字都擠在一起不好閱讀阿！
Web Dev：那…我們是不是要另外 layout 一個專屬行動裝置的表格？
凱西：唷齁！其實有很多別的方法可以嘗試呢！

這篇文章主要是討論多欄位的 HTML Table 實現 Responsive 的實作。
以下所探討的各種關鍵，在 25lab 都可以找到相對應的 Sample 可以觀看。

在桌機的閱讀模式下，網頁的觀看通常是寬大於高的。
所以在 Table 的排版上，常常會以橫向的 thead 與 th 去排列所有的欄位。
舉例來說，就是像下圖這樣充滿知性的樣子（感謝Bruce的Sample）：

但！當你的網頁要 Responsive 時，你會怎麼做呢？
行動裝置通常拿在手上觀看時，都是直式的螢幕畫面，
你的 Table 就會變成連火星人都看不懂的宇宙模式。
這時候只想大叫：神阿！誰來救救我吧！我受夠 Table 了。

在我過去寫前台網頁的一年內，我幾乎都是做一個手機版的 Table，
將上方多欄位的 th 改成一行一行的 tr，也就是的 X軸和 Y軸交換過來。
然後在 960寬以上的螢幕，顯示出原本知性的 Table,
960寬以下的螢幕，顯示出我偷偷做好的另一個 Table。
大概就會長得像下面這樣（再次感謝 Bruce Sample）：

你這樣聽起來可能沒有很麻煩，但你只要打開程式碼一看。
你就會知道你要把一個一個 td 重新排過多麼令人想吐。

這讓我不禁想要好好的思考，
揪竟要怎麼讓 Table Responsive 才能省工又 Make Sense?
最後得出了幾個關鍵，就來跟大家分享一下啦！

＃關鍵一：隱藏某些項目

如果你的資料並不是每個欄位都很必要，其實可以在不同尺寸的行動裝置，隱藏某些欄位。

＃關鍵二：讓你的 Table 可以水平 scroll

這有兩種作法－
簡單的是，在你的 table 外面包一個 DIV，over-flow:scroll-x;
麻煩的是把 thead 換至左方 fixed, 水平 scroll 原有的 content。
( 使用這個方法的話，每個欄位的 th 與 td 需套上 white-space: nowrap; 所以你的 Content 完全無法有換行。)

＃關鍵三：破壞 Table 的排版

將每個 tr row 分為一個一個的區塊，每個區塊都有一樣的 thead 內容。
這樣的缺點就是網頁可能會拉的很長、且thead內容會重複很多次，但是優點是所有的資料都會完整的呈現。
( 使用此方法，你需利用到 element 的 attr 以及偽元素的使用:before)

＃關鍵四：其實可以不用那麼依賴 Table

你知道，使用 CSS 跟 DIV 就可以排出一模一樣的 Table 嗎？

你可以深入學習，所有的 display type。
運用 display : table; display : table-row; display : table-cell;
就可以創造出純 DIV 的 Table UI。

並沒有所謂怎樣的作法最好，而是看你的需求，
哪一個可以避免你製作兩種版面，且又符合你的需求。

2015年6月26日星期五

Bootstrap 超好用工具 – Start Bootstrap 免費版型&資源網站

資料來源：我是小米

http://startbootstrap.com/

初期使用bootstrap的人可能會很苦手不知要怎麼下手版型，Google關鍵字「Bootstrap Theme」其實可以找到許多資源網站，一般免費的Theme 網站大都也是提供基礎的配色跟樣式，但那對初學者來說已經很夠用。目前看過最喜歡也最實用的是 Start Bootstrap 這個網站，不但有基本分類而且也有提供Unstyle的版型，基本Layout都排好了，比如Single Page、Portfolios、Ecommerce….等，且沒有太多花俏的樣式增加修改的難度；另外此網站還蒐集並整理了其他網路上Bootstrap的資源，有官方資源、免費版型樣式、付費版型樣式、範例網站、jQuery外掛…等等，非常詳盡且方便。

主選單上有幾種分類可以選：
Admin and Dashboard – 適合管理介面 & 統計數據類型
Full Website – 適合全網站
Landing Page – 適合小型活動或額外的說明公告頁
One Page Websites – 一頁式類型
Portfolios – 適合展示作品集類型
Blogs – 部落格文章
Ecommerce – 小型電子商務、購物網站類型
Unstyled Templates – 各式Layout
Navigation & Navbars – 基本選單版型
startBS_3

Full Websites – 整個網站的雛形都有了
startBS_4

Unstyled Templates – 有各式Layout可以選擇，都是基本沒有添加樣式的版型
startBS_6

One Page Websites – 一頁式類型，除了有幾組有完整的theme以外，其他也有基本unstyle的版型
startBS_7

另外到 Buy Bootstrap Templates也可以看到各種付費版型的列表頁面，這些作品都會直接連結到幾個常見的付費版型網頁
startBS_8

比如Wrap Bootstrap，但其實綜合看下來在這裡出現的付費版型也都幾塊~十幾塊美金而已，說真的不貴，換算台幣也不過兩百多到四百多塊左右，而且有些基本架構或動態都已經很完整，事實上買來使用在專案上也很划算。
startBS_9

另一個前面提過這個網站很棒的地方就是資源蒐集的部份，點選Bootstrap Resources List
startBS_12

左邊分類選單
Official Bootstrap Resources – 官方Bootstrap資源
Premium Bootstrap Themes – 付費Bootstrap版型
Free Bootstrap Themes – 免費Bootstrap版型
Bootstrap Showcases – Bootstrap作品網站
Bootstrap Development Tools – 專門為 Bootstrap 開發的各種輔助工具，比如 UI Bootstrap 中優化及改善基本功能；Bootdey、Bootsnipp 提供已經設計完成的片段樣式下載等
Bootstrap UI Extensions – 介面輔助工具，比如按鈕、社群分享按鈕、整體介面配色等
Bootstrap jQuery Plugins – 提供了表單、表格、選單、Lightbox、Notification…等等外掛
startBS_10

除了分享簡介功能以外，也直接提供了連結網址，非常實用，下次再來介紹其他免費資源~
startBS_11

訂閱：文章 (Atom)

Pages

阿洪之聲

Ads 468x60px

Labels

Popular Posts

推薦網站

2016年11月5日星期六

gettext 製作 PHP 多國語系網站

Bootstrap 教程

2015年9月27日星期日

Web Matrix (Part 2) ASP.NET Razor資料庫應用程式開發

2015年7月31日星期五

普通table表格樣式及代碼大全(全)(一)

利用Div標籤與CSS建立基本單欄網頁版型

1. 一、Div標籤與CSS

2. 二、單欄版型的範例

2015年7月30日星期四

讓你的 HTML Table Responsive 吧！

＃關鍵一：隱藏某些項目

＃關鍵二：讓你的 Table 可以水平 scroll

＃關鍵三：破壞 Table 的排版

＃關鍵四：其實可以不用那麼依賴 Table

2015年6月26日星期五

Bootstrap 超好用工具 – Start Bootstrap 免費版型&資源網站

Blog Archive

標籤

總網頁瀏覽量

多行多列	多行多列	多行多列
多行多列	多行多列	多行多列
多行多列	多行多列	多行多列

合并列的表格
合并列的表格	合并列的表格	合并列的表格
合并列的表格	合并列的表格	合并列的表格

合并行的表格	合并行的表格	合并行的表格
	合并行的表格	合并行的表格
	合并行的表格	合并行的表格

復雜表格	復雜表格			復雜表格
復雜表格	復雜表格	復雜表格	復雜表格	復雜表格
		復雜表格	復雜表格	復雜表格
		復雜表格	復雜表格	復雜表格
	復雜表格	復雜表格

隱藏	橫向	分隔線
隱藏	橫向	分隔線
隱藏	橫向	分隔線

Pages

Ads 468x60px

Labels

Popular Posts

推薦網站

2016年11月5日 星期六

2015年9月27日 星期日

2015年7月31日 星期五

1. 一、Div標籤與CSS

2. 二、單欄版型的範例

2015年7月30日 星期四

＃關鍵一：隱藏某些項目

＃關鍵二：讓你的 Table 可以水平 scroll

＃關鍵三：破壞 Table 的排版

＃關鍵四：其實可以不用那麼依賴 Table

2015年6月26日 星期五

Blog Archive

標籤

總網頁瀏覽量

2016年11月5日星期六

2015年9月27日星期日

2015年7月31日星期五

2015年7月30日星期四

2015年6月26日星期五