顯示具有 練習web 標籤的文章。 顯示所有文章
顯示具有 練習web 標籤的文章。 顯示所有文章

2013年9月1日 星期日

Pure CSS 實作練習：homepage

又到了練習的時間了...，其實這昨天就弄好了只是沒力寫文。
這篇是延續好久好久以前寫的兩篇筆記，只是看看文章而已會讓我覺得學習中斷，感覺不是很好，後來我還是覺得想弄點什麼東西出來。
之前的兩篇是這個：

先來看看練習的結果：
主要是要練習 pureCSS 的 Grid，然後整格排版設計是參考某家搜尋網站的首頁做改造：P，icon 部分搭配的是 Font-Awesome ，Font-Awesome 的使用方式跟在用 bootstrap 的時候一樣，所以非常順手。至於配色就別跟我這個前端挑了（><），這個練習的重點是在做前端不是Art (Orz)。



閱讀更多 »
於 沒有留言:
標籤： , , ,

2012年4月28日 星期六

練習的PHP網站-填答問題用的測驗網站


http://winsystem.zymichost.com/


剛好遇上期中考所以就來弄一個答題的小網站，
這次的練習有點趕，所以css跟一些免費icon的部分都是來自網路templeates
純粹套圖跟結合php進去，很簡單的網站，很純粹的只有計算分數跟寫入填寫人的資料跟時間紀錄而已，為了讓php&mysql都放上網站，所以申請了zymic免費空間..學一下怎麼使用免費的mysql資料庫.，在link_db.php的地方實在有點複雜..... 



















































不過填答的input欄位都是鎖死的，這部分並沒有用程式去跑，這照理說應該是要這樣。
可能需要時間好好改良一下。
最後填答完按下送出後會出現兩張table，左側為記錄$_POST來的每個答案，右側為正解。
另外此頁結果的頁面為result.php 在填答問題的那一頁分別使用
form action="result?參數="
再用
if ($_GET[參數=?]) 去判斷使用者所填答的考卷是那一份，
分別做不同的計算 再將成績與資料寫進資料庫。 






result.php 部分"

if(isset($_GET['score1'])) //如果來自問卷一
{
$name=$_POST['m_name'];
$date = $_POST['date'];
$score1= 0; //問卷一分數由0開始計算
$q1 = $_POST['q1']; //存取填答人所填答的資料
$q2 = $_POST['q2'];
…
if($q1=="product") //判斷每題的答案
{
$score1+=2; //一題答對就加兩分
}
if($q2=="pricing")
{
$score1+=2;
}
$sql = "INSERT INTO user(M_NAME,M_DATE,M_SCORE1) VALUES ('$name','$date','$score1')";
$result = mysql_query($sql);
}
else if(isset($_GET['score2'])) //如果來自問卷二
{
$name=$_POST['m_name'];
$date = $_POST['date'];
$score2= 0; //問卷二分數由0開始計算
$q1 = $_POST['q1']; //以下做法都相同於上面
$q2 = $_POST['q2'];
…
}




我下載的freeicon來自這個網站: http://www.freeiconsweb.com/
CSS範本 : http://www.freecsstemplates.org
於 3 則留言:
標籤：

2012年3月3日 星期六

jQuery練習-demo-isotope同位素網站

isotope這個網站做的東西我覺得很有趣
isotope是元素表吧?!
總之我覺得這個jquery還蠻不錯的，所以就來demo一下
好久沒有這麼熱血一整天弄個東西出來
繼上次以來已經好幾的月了


我先講一下isotope這個套件
其實我最喜歡的就是他這個過濾的功能 用元素表來表示過濾的功能真貼切
這樣的過濾功能能做的就是分類顯示甚麼東西 真的是很實用
isotope英文版的網站在此: http://isotope.metafizzy.co/index.html


isotope網站http://isotope.metafizzy.co/index.html
















ps 雖然網站提供下載使用，並不提供商業用途。
後來我用這個範例提供的basic.html去改變我要的樣子
用班上的人員分組來做過濾的功能
最後在用fancybox的套件來做個人單頁點案後的資料顯示
真的是挺有趣的 呵呵xd
這訣竅就是慢慢用GOOGLE翻譯跟測測什麼id或class影響了什麼
以各種分類來說 
每個人員都是一個<div class="elmenent + 分類名稱">
若以木竹組來說則為  <div class="elmenent  wood">
wood必須事先在css中定義。


練習結果: http://yiying2.ueuo.com/isotope_practice/demos/basic.html
如果無法正確顯示請使用較新版的瀏覽器。

http://yiying2.ueuo.com/isotope_practice/demos/basic.html練習結果
















於 沒有留言:
標籤： , , ,

2012年1月7日 星期六

mobile_web練習二


http://yiyingwu.zxq.net/p1_mobile/index.html




http://yiyingwu.zxq.net/p1_mobile/index.html 
(練習網址，請將瀏覽器縮成約略手機螢幕的比例，如上圖xdd )

昨天看到一個不錯的範本就co下來解析解析一下
跟上一次練習的mobile web功能不太一樣，這個範本多了怎麼放google MAP，而且css也好理解很多... 謝天謝地，終於比較懂了點。上次在網路上看到範本太驚人的深奧了。

原來google的地理位置在url連結裡有，害我點了好久都找不到，像這樣
http://maps.google.com/maps?q=%E5%9C%8B%E7%AB%8B%E9%AB%98%E9%9B%84%E5%A4%A7%E5%AD%B8&hl=zh-TW&ie=UTF8&ll=22.731461,120.281925&spn=0.051377,0.066175&sll=37.0625,-95.677068&sspn=44.928295,67.763672&vpsrc=6&hq=%E5%9C%8B%E7%AB%8B%E9%AB%98%E9%9B%84%E5%A4%A7%E5%AD%B8&radius=15000&t=m&z=14&iwloc=B
原來連結已經透露地理位置了。

不過有些功能還是很不能理解，可能真的要有智慧型手機才能真的知道mobile web需要功能是什麼吧。寒假再來好好研究。


於 沒有留言:
標籤： , , ,

2011年10月29日 星期六

看看jquery的Mobile長甚麼樣子

 










(ps.素材是借網路的)

有些網站都建議可以把每一個連結的頁分開，就是可以從index.html連到別的html，聽起來似乎是很正規的作法結果我竟然看不懂這種做法，還好後來google到全部寫在一個html的Demo，稍微懂了點....真是太好了....。


好久沒來打一下心得，不過這陣子真是忙到翻掉，忙就算了還不知道自己得到了甚麼，真是讚阿= = ....。
好吧不管了，來說一下jquery可以應用在手機版網頁的事情，如果去灌一下dreamweaver cs5.5的人都知道為甚麼adobe竟然會有.5的這種奇怪的版本，沒有錯就是為了迎合大眾需求特地多了一個專門為行動裝置而設計的，當然啦...關於5.5的新書只是在最後一節多了這一個部分，還蠻....，恩= = ，真是買不下去，有種為了趕著印刷才放在最後一章節的感覺.... (感覺而已....)，挨不過，也沒甚麼時間看這種書說實在.... 。
而且我雖然打開了jquerymobile還是看不懂那個範本才真的是好笑了...，別人只要花一小時看的東西我竟然看了好幾個小時，挨，漸漸了解資質差就是要認命這件事情。不過今天晚上總算有摸出一點脈絡了，謝天謝地阿....


怎麼開始呢?

優雅的點開notepad++或dreamweaver，這個...大部分的模板幾乎是這個樣子。剛開始跟一般網頁架構的確是沒兩樣呦。
<!DOCTYPE html>
<html>
<head>
<title>頁面標題</title>
<link rel="stylesheet" href="載入mobile的css" />
<script src="載入jquery的js"></script>
<script src="載入jqueryMobile的js"></script> 
</head>
<body> 
//body部分目前先省略
</body>
</html>
 ps:

 簡單來說要做jQueryMobile，一定要有這3個東西在你的頁面~
 jQuery Mobile的CSS sytlesheet
 jQuery庫
 jQuery的Mobile.js




body部分
key完以上這段，來說明一下body裡面要放甚麼。通常body裡面，會是這樣的結構

<body> 
<div data-role="page">

 <div data-role="header">
  <h1>Page Title</h1>
 </div><!-- 這是header -->

 <div data-role="content">
  <p>Page content goes here.</p>
 </div><!-- 這是content -->

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div><!-- 這是footer -->
</div><!-- 這樣是一個page -->






於 沒有留言:
標籤： ,

2011年8月21日 星期日

Flash小網站練習(楠梓)













更改後 以as改變跑馬燈方向:
http://yiying.ueuo.com/nzindex_5run.html
練習檔:  http://yiying.ueuo.com/nzindex_test3.html 
暑假練習檔目錄http://yiying.ueuo.com/flwork.html(沒辦法進去多重新整理)
今天只看了工具書的其中一章，是要做跑馬燈的 其實是早上看太多連續劇也心虛了....
然後再去找不錯的flash網站來推測是怎麼做的
其實我想要學的是這個網站 http://www.retec-duplex.co.jp/
我還沒錯完，欸...因為....很多地方還沒想到是怎麼做的...也做不出來，有點煩躁....
埃，總是在僅剩的記憶體跟隨身碟容量爭取flash不要當機的可能...結果還是當了兩三次
真是太可悲了。 (倒地)
不過，今天力氣已經耗盡，眼睛也痠到不行
猜了又猜猜了又猜.....
然後元件總是一層一層又一層的往下接...
接到都忘記我實體命名是甚麼了
cool~ 待續完成 ....

以as改變跑馬燈方向
第一次用的是移動補間動畫
第二次改為僅有兩個影格
第一個影格 設定變數   if條件式  說明跑馬燈的y軸如果大於...else ..y小於
不過我也沒接好XDDD看不太懂書再寫甚麼...
由於第一個影格有用到speed
所以要再改影格
第二個影格gotoAndPlay(1);

end

於 沒有留言:
標籤： , ,

2011年8月20日 星期六

Flash小網站練習(個人網站)













http://yiying.ueuo.com/newindex.swf
(進不去重新整理，免費空間，多多包容~有時候跑的出來，有時候跑不出來.....)
http://yiying.ueuo.com/flwork.html(目錄)
這次是照flash工具書的範例方法來試試，書本上是做美食網站，不過我沒有美食的照片..而且swf的互相連結出了一點問題(埃..倒地)
最後只好用在同一個swf然後分在不同場景

作品頁的部分是想要練習一下loader_mc 載入圖片
後面的contact跟blog分別是練習一個連到email一個連到網站，方法_blank
做預載圖片要先下Loader類別實體
ver  pic1 : Loader= new Loader(); 
pic1.load(new URLRequest("__圖片路徑_")) ;
//door.btn(門環按鈕的實體名稱)
door.btn.addEventListener(MouseEvent.CLICK,load1);
function load1(e:MouseEvent):void 
{
     loader_mc.addChild(pic1);
}
以此類推。

btn連結到網頁或email比想像中簡單很多耶
1.選btn
2.key as 或 打開程式碼片段 -->動作-->點兩下前往網頁，把路徑改掉，神奇的事就是這麼發生的~

var URL 變數名稱 : URLRequest = new URLRequest("要連去的網址")
navigateToURL(URL的變數,"顯示方式" );
顯示方式有_blank  很多啦... 我都用_blank (以開新視窗顯示連結的網頁)

接下來是選單列的練習跟照片跑馬燈
眼睛痠...

於 沒有留言:
標籤： , ,

2011年3月29日 星期二

實習網頁設計作品-uLin

2011.2月份，我在一家蠻不錯的設計公司實習，這個網站，這是利用實習的機會做的，恩...感覺蠻特別的。
人生第一次實習就選擇自己做一個靜態網站。 學到了很多，平常沒機會踏出的第一步，例如..申請網址，然後把網站放上去，這些看似簡單的事，或許在熟悉網頁的人眼中很無趣，但是對於剛學網頁的我，就像發現新大陸一樣xdd，我想這種感覺是剛學Dreamweaver的人才懂得，就是那種，很茫然，不知道該問誰，試著試著，竟然成功了，然後才開始有點信心...。
參考網址 : http://www.ulindesign.com.tw/





於 沒有留言:
標籤： ,

2011年1月10日 星期一

網頁設計作業-木竹設計組

成果網站: http://yiying.ueuo.com/
這學期修了溫老師的網頁設計， 真不錯 又是一番新的領悟
聽聽不同老師的教法，果然會讓人大徹大悟，知道自己怎麼跌倒的，網頁設計的入門實在是有點困難，修了兩學期的dw才知道自己在幹嘛。接下我要好好的思考怎麼用php了，其實這才是我的新年新希望~







於 沒有留言:
標籤： ,

2010年6月29日 星期二

網頁設計作業-做一個虛構的公司網站

學校的網頁設計課作業，其中不外乎個人網站，期末不外乎商業網站，這一次的期末作業我選擇做一個虛擬的公司，恩..應該說大部分的都選擇做虛擬的xdd，當然，連內容都是虛構的。不過這次有拿網路上的CSS範本來修改，主要是想試試看怎麼改CSS，希望不會做的太糟瞜...
 http://www.wuhahaying.110mb.com/



於 沒有留言:
標籤： ,

2010年6月25日 星期五

網頁設計作業-個人網站


這是其中的作業，但....但.我把原始檔給蓋掉了，太傻眼了。...只有僅剩的print the screen...
現在想起來跟期末作業相比，剛開始切版的時候真的很嫩.... 
於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...

  • 處理 Safari 無法播放 video mp4 的一些問題
    最近開始覺得 Safari 大概是未來的 IE。 在使用 HTML5  的 video 播放影片時，遇到兩種影片播不出來的情況。 情況一 較少人會遇到，就是尚未更新成最新的 OS 作業系統，(我的情況是作業系統 OS X EI Capitan, safari版本: 9...
  • Email 寄信-css/html 排版,跑版問題
    繼上次我寫過一篇筆記 : HTML製作edm的技巧與問題 最近發現即便我遵守一些製作edm或是email信件的規則，一樣會有在各大mail system(各大信箱，ex:Microsoft outlook, gmail, hotmail, Yahoo mail....)出現各...
  • 解決fatal: Not a git repository (or any of the parent directories): .git錯誤
    有一次我在開branch的時候: $ git checkout -b winwu/dev 發生了這個錯誤： fatal: Not a git repository (or any of the parent directories): .git 不過,起因不是重...