[教學]網頁版型切圖與輸出(Fireworks+Dreamweaver版)

資料來源 

今天來分享一篇教學，說明網頁設計相當重要的基本功-版型切圖的原則與流程，由於網頁的版型變化相當多元且能夠進行版型設計與切圖的軟體也很多，日後設計嵐會一一分別做說明，今天先以設計嵐自己最常使用的『Fireworks+Dreamweaver』搭配來說明。

設計與開發-網站介紹

http://www.desteps.com/

jQuery Mobile十大常用技巧

2012-10-08 09:21 廖煜嵘 译 51CTO.com 字号：T | T

目前,在移Web开发领域中,除了使用如Android,iOS系统原生提供的API进行开发外,对于Web开发人员来说,最方便快捷的方法莫过于使用比如jQuery Mobile,Sencha Touch这样基于HTML 5的Web框架进行开发了,因为只要熟悉CSS,JavaScript则可以很轻松地运用这些移动Web开发框架进行开发。

AD：51CTO学院：IT精品课程在线看！

在本文中，将介绍使用jQuery Mobile开发的一些常用的技巧，阅读对象为已经使用过jQuery Mobile进行开发的移动Web开发者。

1、禁止截断过长的列表和按钮内容

在jQuery mobile中，如果列表或者按钮中文字的内容过长，jQuery Mobile会自动截断其超过长度的内容，但如果不希望这样的话，可以在CSS样式中增加如下设置即可，比如下面的是针对按钮的CSS样式设置：

.ui-btn-text {  
white-space: normal;  
} 

下面的是针对列表的CSS样式设置 

 .ui-li-desc {  
white-space: normal;  
}  

如果要恢复对文字的截断,则继续设置CSS为white-space: nowrap;

2、实现页面加载时的随机页面背景过渡效果

jQuery Mobile中,当需要实现页面加载时,可以有很多的页面加载事件可供使用。比如下面的CSS和JavaScript代码，可以实现页面加载时的随机页面背景过渡效果。

CSS代码： 

 my-page  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }  
   
.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }  
   
.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }  
   
.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }  

　Javascript代码：

$('.my-page').live("pagecreate", function() {  
　var randombg = Math.floor(Math.random()*4); //获得0到3之间的随机数  
　    $('.my-page').removeClass().addClass('bg' + randombg);  
});  

3、禁用button

在有的情况下，可能会需要禁止按钮的加载事件，这个时候可以继续通过如下的设置实现：

$('#home-button').button("disable");  

如果要恢复可用，则设置为：

　$('#home-button').button("enable");  

4、去掉页面加载时的提示信息

如果在加载页面时，不需要显示页面加载信息时，可以通过设置一个属性来取消显示加载提示信息，如下：　

　$.mobile.pageLoading(true); 

如果要继续保持显示页面加载信息，则为：

　$.mobile.pageLoading(); 

5、创建自定义主题

jQuery Mobile本身提供了A-E五种不同的主题，但可以自定义主题，步骤如下：

1. 从jQuery Mobile的任意一个定义主题的CSS文件中，复制其内容到自己定义的CSS文件中。
2. 给要自定义的CSS主题一个恰当的名称并且重新命名CSS文件，注意命名必须是(a-z)英文字母，比如你是从jQuery Mobile的主题c的样式文件中复制的，则可以将主题命名为Z,则复制过来的内容中，比如要将.ui-btn-up-c改为.ui-btn-up-z,.ui-body-c改为.ui-body-z，如此类推。
3. 改变新建立的自定义主题的颜色和CSS文件。
4. 最后，需要在页面中，应用新定义的主题样式，如下：

   
   　<div data-role="page" data-theme="z"></div> 
   
   

6、使用自定义字体

在移动Web应用中，有的时候需要更换字体，这样的话，可以通过使用@font-face方法实现，并且性能是十分好的。具体关于@font-face的使用，请参考http://www.sitepoint.com/the-fontface-jquery-plugin/这篇文章。

7、创建一个没有文本只有图片的按钮

有时，可能想用一个没有文本内容仍具有按钮特性的一个按钮。如果要在按钮上隐藏文本，设置data-iconpos="notext"，例如：

<a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a> 

8、打开一个无需使用Ajax页面过渡的超链接

如果不需要使用Ajax打开一个页面的链接，可以设置链接的rel属性，如下：

<a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a> 

9、移除项目列表中的箭头

默认情况下，jQuery Mobile框架会为每一个列表项添加一个箭头，想要禁用箭头显示，需要在想要移除列表项设置data-icon="false"。

<li data-icon="false"><a href="contact.html">Contact Us</a></li>  

10、设置页面的背景颜色

怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的？听起来很简单，其实需要花几分钟时间才能解决。通常情况下，需要在body元素中设置背景颜色，但是用jQuery Mobile框架，需要设置在ui-page类中。

.ui-page{  
     background:#eee;  
} 

資料來源

使用jQuery Mobile和CSS3实现响应式设计

2012-05-27 18:28 IBM/DW IBM/DW 字号：T | T

jQuery Mobile 框架是一个 JavaScript 库，您可以用它来轻松地创建了一个移动版本的网站，将现有的 Web 页面转换成触摸友好的网站和应用程序。jQuery Mobile 框架允许用户通过 Web 浏览器直接连接到触摸友好的应用程序，这无疑将改变移动应用程序在手机及平板设备上的访问和分布方式。还有许多其它的移动开发选项，但它们与 jQuery Mobile 正采用的方法的不同之处是，它们的目标是针对各种移动平台。

AD：51CTO学院：IT精品课程在线看！

智能手机和平板设备的采用率不断暴涨，jQuery Mobile 框架可以帮助开发人员满足日益增长的移动 Web 体验需求。提供移动 Web 体验要求 Web 开发人员和设计人员掌握一套新的技能。 在 2010 年，Nielsen 预计每两个美国人中就有一个会拥有智能手机，与 2008 年的结果(每 10 个人里只有一个拥有智能手机)相比，这是一个巨大的增长;并且，在 2011 年 6 月，AMI-Partners 预测 “平板在企业(员工人数介于 1 和 1000 之间)中的采用率到 2015 年将增长 1000%”。由于这些设备采用率的增加，对于能创建移动 Web 体验的 Web 开发人员和设计人员的需求将会非常强劲。jQuery Mobile 框架对于创建移动 Web 体验而言是一个优秀的解决方案，因为它增加了移动网站的生成速度，并可支持多种移动平台。

陷阱和解决方案

jQuery Mobile 框架对于创建手机或平板版本的 Web 页面而言是一个优秀的解决方案，但它完全依赖于对网站的内容附加特定的数据角色属性。在比较少见的情况下，有可能无法将这些属性附加到 HTML 标记，并可能要求您创建一个单独的移动网站。然而，本文将通过一些预见和规划，向您展示如何结合使用 jQuery Mobile 框架和级联样式表版本 3 (CSS3) 的媒体查询，来创建一个响应式设计，并确定布局如何对用户的设备作出反应。目的是创建一个单一的网站，可以针对用户设备的屏幕分辨率显示适当的布局，从而 动态地响应用户的设备。

响应式设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着，无论用户是在移动、平板还是桌面设备上浏览 Web 页面，设计都将根据该设备的屏幕分辨率显示特定的布局，从而适当地响应设备。虽然 jQuery Mobile 框架提供了一种方法，可快速、轻松地创建移动版本的网站，但它目前没有(而且很有可能永远也不会)提供一种固有的方法来根据设备的屏幕分辨率动态响应用户 的设备。事实上，jQuery Mobile 网站作出声明，原有的 Media Query Helper Classes 特性 在 beta 中已被弃用，并且已从最新的版本中删除。实际上，该框架的创建者反而推荐使用 CSS3 媒体查询。CSS3 媒体查询和 jQuery Mobile 框架的结合使用，可以实现一个能适应移动、平板和桌面环境的响应式设计。该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。就对不同屏幕分辨率的反应方式而言，该文档实际上与您在本文中将会创建的示例相当类似。

凭借对媒体类型的使用，CSS 自版本 2.1 起包括了与设备相关的编码措施。使用媒体类型的一种常见方式是为桌面计算机屏幕和 Web 页面的打印版本分别定义单独的样式表。CSS3 通过引进媒体查询，将设备相关的编码措施这个概念再推进了一步。媒体查询可以用于确定与 Web 页面交互的设备类型，并使开发人员能够确定正在查看 Web 页面的设备的物理属性。无需多说，媒体查询已经成为交付特定于设备的样式表的一种流行方式，正如您在 清单 1 中所看到的，这些代码会根据屏幕分辨率交付特定于手机和平板设备的样式表。

清单 1. 使用媒体查询交付特定于设备的样式表

<link   
  rel="stylesheet"   
  type="text/css"   
  media="screen and (max-device-width: 799px)"   
  href="mobile-tablet.css" /> 

本示例中的 media 属性包含一个被设置为 screen 的媒体类型值，以及一个媒体查询(在括号中)。这个特定的媒体查询，检查用户当前设备的屏幕分辨率是否小于或等于 799px。如果是，则交付这个手机/平板样式表;否则，不交付这个样式表。您可以在单个 Web 页面中包括多个样式表链接，每一个样式表链接都有自己的媒体查询，根据您所需要的多种不同的分辨率，有所不同地呈现您的页面。我注意到，最常见的基于分辨 率的样式表似乎有三种，一种用于手机和平板设备、一种用于较低分辨率的桌面显示器，还有一种用于较高分辨率的桌面显示器。如果您准备使用清单 1 中的代码，分辨率小于 799px 的所有设备将使用这个样式表，所以这是一个完美的示例，说明如何可以针对手机和平板设备使用一种样式表，而台式计算机则使用不同的样式表。

也可以在单个样式表的 CSS 内直接使用多个媒体查询。清单 2 显示了用于一组导航项的 CSS 类示例，稍后您将在本文中创建它。当设备的屏幕分辨率是 800px 宽或以上时，导航的宽度设置为 300px;当屏幕分辨率为 799px 或以下时，导航的宽度设置为 100%。

清单 2. 使用媒体查询来交付特定于设备的 CSS

@media all and (min-width: 800px) {  
  #nav {  
    width: 300px;  
  }  
}  
 
@media all and (max-width: 799px) {  
  #nav {  
    width: 100%;  
  }  
} 

关于媒体查询还有另一件很酷的事情，那就是如果您在一个现代 Web 浏览器(包括清单 2 中的 CSS 以及相关的 HTML 元素)中查看一个 Web 页面，该 Web 页面实际上也将响应浏览器的大小。因此，如果浏览器宽度被设置为 799px 或以下，导航的宽度将是 100%;如果浏览器的宽度被设置为 800px 或更大，导航的宽度将被设置为 300px。

成为响应式

媒体查询是一种条件语句，用来确定将什么 CSS 应用到 Web 页面。与 jQuery Mobile 框架一起使用，您可以创建一些强大的移动网站，同时保持独立的桌面布局。jQuery Mobile 框架本身可以用于快速、轻松地创建触摸友好的网站。该框架有大量组件，可以很容易地添加按钮、工具栏、对话框、列表视图等等。然而，当涉及到处理 Web 页面布局时，CSS 仍然是首选的语言。幸运的是，如本文前面所介绍的，CSS3 已引入媒体查询，它为开发人员提供根据设备分辨率改变 Web 页面布局的功能。

结合使用 jQuery Mobile 框架，您可以创建一些响应式布局。出于本文的目的，我用一个简单的示例，其中包括一组导航项和一个网格。导航项和网格将被根据不同屏幕分辨率安排不同的布 局。在 jQuery Mobile 框架在 Web 页面中运行之前，您需要做的第一件事是嵌入与 jQuery Mobile 框架关联的 JavaScript 文件和 CSS(参见 清单 3)。

清单 3. 嵌入 jQuery Mobile 框架

<link rel="stylesheet"   
  href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> 

jQuery Mobile 框架包括一个 listview 组件，您将使用它显示您的导航项。要创建一个列表视图，只需将一个 data-role 属性添加到其值为 listview 的导航列表 ul 元素中。jQuery Mobile 框架还包括一些有用的工具，允许您创建多列的网格布局。在 清单 4 中，我已经包含了一个两行三列的网格，这是使用 ui-grid-b、ui-block-a 和 ui-bar 类组合构造的。

清单 4. 将一个 listview 和网格添加到内容区域字母被附加到某些类名称的末尾：这些是主题相关的字母，是 jQuery Mobile 框架用来确定使用哪个主题呈现组件。

现在您已经创建了您的 Web 页面，您可以使用 CSS3 创建一个可以根据用户的屏幕分辨率进行动态调整的响应式布局。要实现这一点很简单：只需使用您之前在本文中了解到的媒体查询来确定屏幕分辨率，然后编写专门处理不同场景的 CSS。清单 5 使用一个媒体查询检查 800px 或以上的屏幕分辨率，使用另一个媒体查询检查 799px 或以下的屏幕分辨率。第一个媒体查询将导航和网格浮动到左侧，它们可以自己定位为彼此相邻，以填满在更高分辨率的屏幕上的更宽的空间。第二个媒体查询没有 使用浮动，并将导航和网格的宽度设置为 100%，并最终将导航定位在网格的上方，以适应屏幕分辨率较小的设备，如智能手机和平板电脑。

清单 5. 使用媒体查询创建响应式布局

@media all and (min-width: 800px) {  
  #nav {  
    width: 300px;  
    float: left;  
    margin-right: 20px;  
  }  
  #grid {  
    width: 450px;  
    float: left;  
  }  
}  
 
@media all and (max-width: 799px) {  
  #nav {  
    width: 100%;  
  }  
  #grid {  
    width: 100%;  
  }  
} 

具有较高屏幕分辨率的设备将显示一个类似于图 1 的并排布局。

图 1. 分辨率较大的设备如何呈现 Web 页面

具有较小屏幕分辨率的设备将显示一个类似于 图 2 的并排布局。

图 2. 分辨率较小的设备如何渲染 Web 页面

当然，这是一个极其简单的示例，但它显示了使用 jQuery Mobile 框架和 CSS3 创建一个响应式布局是多么容易。这种可能性令人兴奋，而这仅仅是一个帮助您入门的垫脚石。将几个简单的数据角色属性添加到您的 HTML，您就可以创建 Web 页面的移动版本;通过包括 CSS3 媒体查询，您就可以让您的设计根据屏幕分辨率响应用户的设备。当有人使用桌面计算机查看您的 Web 页面时，您甚至可以修改 jQuery Mobile 的主题，使 Web 页面在更高的分辨率中看起来并不像一个移动的 Web 页面。您需要做的只是使用媒体查询来检查更高的分辨率，然后更改那些 jQuery Mobile 组件的 CSS，基本上覆盖用于创建主题的默认样式。

结束语

响应式设计的目的是尽可能以最好的布局显示您的数据，以实现用户友好的 Web 页面。jQuery Mobile 框架和 CSS3 的结合，可以创建一套功能强大的布局，您可以用它们来响应每个用户的设备。

下载源码：jquery-mobile-responsive-design.zip

資料來源

從PHP網頁將資料匯出成Excel檔

[Dreamweaver]從PHP網頁將資 料匯出成Excel檔

雖然網路上已經有重點說明，但對於習慣使用DW的我，還是不能符合需求....

自己試了很久....才試出我要的方式 -- 呼叫資料庫的資料，按連結轉成excel檔

做法：

資料庫名稱test，資料表ta和tb

          資料表ta

aid	aclass	aname
1	1	蘋果
2	1	鳳梨
3	2	波蔡
4	2	小白菜
5	3	豬肉
6	3	牛肉
7	4	金魚
8	4	吳郭魚

       

         資料表tb

aclass	classname
1	水果
2	蔬菜
3	肉類
4	魚類

1.將表格和頁首設定好，並做一個連結，作為下載excel的按鈕

---

 
  td> 

編號	種類	名稱< /td>

 

匯出excel

---

2.連到資料庫，新增資料集Recordset1，用進階選項，SQL內填入：

SELECT ta.aid, ta.aname, tb.classname FROM ta LEFT JOIN tb ON ta.aclass = tb.aclass GROUP BY ta.aid, ta.aname

新增一樣的資料集，名稱為Recordset2

---

if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

 

mysql_select_db($database_testbata, $testbata);
$query_Recordset1 = "SELECT ta.aid, ta.aname, tb.classname FROM ta LEFT JOIN tb ON ta.aclass = tb.aclass GROUP BY ta.aid, ta.aname";
$Recordset1 = mysql_query($query_Recordset1, $testbata) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

 

mysql_select_db($database_testbata, $testbata);
$query_Recordset2 = "SELECT ta.aid, ta.aname, tb.classname FROM ta LEFT JOIN tb ON ta.aclass = tb.aclass GROUP BY ta.aid, ta.aname";
$Recordset2 = mysql_query($query_Recordset2, $testbata) or die(mysql_error());
$row_Recordset2 = mysql_fetch_assoc($Recordset2);
$totalRows_Recordset2 = mysql_num_rows($Recordset2);

?>
...

---

3.將資料顯示於table內，重複區域

---

...

 
  

編號	種類	名稱< /td>
>

...

---

4.複製下面語法至內最後面

---

if ($_GET['act']=='download') {
  downloadxls();
  die();
}
function downloadxls(){
$filename="test.xls";
header("Content-disposition: filename=$filename");
header("Content-type: application/octetstream");
header("Pragma: no-cache");
header("Expires: 0");
}

---

5.複製table語法貼於function內；剪下php內的Recordset2部分，貼於function內；並做修改

---

function downloadxls(){

$query_Recordset2 = "SELECT ta.aid, ta.aname, tb.classname FROM ta LEFT JOIN tb ON ta.aclass = tb.aclass GROUP BY ta.aid, ta.aname";  
$Recordset2 = mysql_query($query_Recordset2);
$totalRows_Recordset2 = mysql_num_rows($Recordset2); 
$filename="test.xls";
header("Content-disposition: filename=$filename");
header("Content-type: application/octetstream");
header("Pragma: no-cache");
header("Expires: 0");
 
echo "& lt;td>名稱

編號

種類

";
for ($i=0;$i<$totalRows_Recordset2;$i++)
{
$row_Recordset2 = mysql_fetch_array($Recordset2);
echo " ".$row_Recordset2['aid']."".$row_Recordset2['aname']."".$row_Recordset2['classname']." ";
$j=$i+1;

}
echo "

";
}

---

範例檔案

資料來源