PIXNET Logo登入

♥ღ紫玫瑰淯嵐分格ღ♥部落格

跳到主文

♥ღ紫玫瑰ღ♥在20130916痞客邦開分格ღ♥

部落格全站分類:收藏嗜好

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 3月 31 週四 201601:19
  • [教學]成為CSS高手之路(八)~製作拍立得相片效果

19.jpg
引用→http://kav68795.pixnet.net/blog/post/26490122
 
(繼續閱讀...)
文章標籤

紫玫瑰淯嵐 發表在 痞客邦 留言(0) 人氣(68)

  • 個人分類:軟體/字型/CSS
▲top
  • 3月 31 週四 201601:16
  • [教學]成為CSS高手之路(七)~牛刀小試篇(B)-用DIV+CSS製作文繞圖設定

1.jpg
引用→http://kav68795.pixnet.net/blog/post/26116510
 
(繼續閱讀...)
文章標籤

紫玫瑰淯嵐 發表在 痞客邦 留言(0) 人氣(23)

  • 個人分類:軟體/字型/CSS
▲top
  • 3月 31 週四 201601:14
  • [教學]成為CSS高手之路(六)~牛刀小試篇(A)-在圖片上套用邊框以及利用濾鏡將圖片轉灰階

引用→http://kav68795.pixnet.net/blog/post/26103954
今天設計嵐來介紹『成為CSS高手之路』系列文章第六篇,經過前面五篇的基本功訓練,有閱讀並且練習的人應該對於CSS有了基本的認識,接著開始我們正式進入實際運用的介紹,當然,我們還是要由淺入深,先從最簡單的圖片效果開始介紹,慢慢的再進展到更進階的CSS設定。
‧CSS相關系列文章請參閱:成為CSS高手之路(五)~CSS在DW中的設定與語法宣告方式Part III-套用外部的CSS檔案
      系列文章之六設計嵐介紹兩個可以運用在圖片上的CSS效果做個暖身,分別為『圖片套用邊框』以及『將全彩圖片轉成灰階』兩種效果,各位可以試著做做看:
一、在圖片上套用邊框:
1.利用Dreamweaver開啟新頁面並且插入一張圖片。
1.jpg 
2.『CSS樣式』面板→新增CSS規則。
2.jpg  
3.選用『類別』的選取器類型,並且幫規則命名(ex.imgborder),然後按下確定。
3.jpg 
4.切換至『邊框』分類,分別設定邊框樣式(Style)、粗細(Width)以及色彩(Color),完成後按下確定。
4.jpg 
5.選取欲套用規則的圖片→屬性面板→類別→選擇『imgborder』規則作套用。
5.jpg 
6.按下F12使用瀏覽器進行預覽,便會看到圖片周圍出現邊框。
6.jpg 
p.s.各位可以隨需求修改規則中的邊框樣式、粗細以及色彩。
7.切換至『分割』模式進行程式碼的確認,畫面如下:
7.jpg 
     在<style>和</style>之間會出現如上圖紅框的語法,其中.imgborder為類別名稱、border後面則列出所有設定值。
8.而選取圖片後也會看見如下程式碼:
8.jpg 
在<img>標籤中會出現上塗紅框處語法表示此圖片套用了imgborder的類別規則。
二、將圖片轉成灰階色彩
1.一樣在Dreamweaver中開啟新頁面並且插入圖片。
9.jpg 
2.『CSS樣式』面板→新增CSS規則。
2.jpg 
3.選擇『類別』選取器,並且命名規則名稱(ex.imgcolor),完成按下確定。
10.jpg 
4.在『擴充功能』分類中選擇Filter(濾鏡),選擇Gray(灰階),並且按下確定。
11.jpg 
5.接著選取欲套用規則的圖片→屬性面板→類別→套用imgcolor規則。
12.jpg 
6.儲存後按下F12用瀏覽器預覽便會發現影像變成灰階嚕。
13.jpg 
7.切換至『分割』模式,會在<style>和</style>之間發現以下語法:
14.jpg 
其中.imgcolor為類別名稱、filter代表套用濾鏡,冒號後面則為套用的濾鏡名稱。
8.而選取圖片觀看程式碼則會在<img>標籤中看到以下紅框處語法:
15.jpg 
紅框處表示此圖片套用了imgcolor這個類別規則。
     以上的示範說明,有使用Dreamweaver製作網頁的人可以直接設定,如果是經營部落格的格主,也可以參考上述的語法,在部落格的樣式設定或是文章內容圖片上作應用喔。
(繼續閱讀...)
文章標籤

紫玫瑰淯嵐 發表在 痞客邦 留言(0) 人氣(6)

  • 個人分類:軟體/字型/CSS
▲top
  • 3月 31 週四 201601:11
  • 成為CSS高手之路(五)~CSS在DW中的設定與語法宣告方式Part III-套用外部的CSS檔案

引用→http://kav68795.pixnet.net/blog/post/26066542
  今天設計嵐繼續針對『成為CSS高手之路』系列文章發表第五篇~套用外部CSS檔案的方式進行說明,如果是第一次學習CSS相關課程的人不妨先針對此系列文先前的文章進行閱讀,循序漸進的學習效果更好喔!

  • 成為CSS高手之路(一)~CSS入門QA教室




  • 成為CSS高手之路(二)~認識基本HTML語法




  • 成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)




  • 成為CSS高手之路(四)~CSS在DW中的設定與語法宣告方式Part II-整頁套用的CSS規則(下)



  •       而今天系列文章之五所要介紹的套用外部CSS檔案的方式,是先將CSS的格式語法寫在一個獨立的檔案中,並且儲存成CSS格式的檔案,然後再將此檔案以連結或匯入的方式套用在不同的網頁中,讓這些網頁同時擁有相同的CSS格式設定,相當方便快速,而且日後有需要,只要修改CSS檔就可以同時更新所有的網頁格式設定了,這對於需要統一格式設定以及同時管理大量網頁的設計師來說,是個省時簡便的好方法。
     1.首先設計嵐先準備兩個網頁檔案,並且輸入簡單文字作區分,但是不作任何的格式設定。
    ◎以下為a1.html畫面:
    1.jpg 
    ◎以下為a2.html畫面:
    2.jpg 
    2.在此設計嵐依然是以在Dreamweaver中可以完成設定的步驟作介紹,好讓初學者可以無痛上手。
    3.首先設計嵐先在a1.html的編輯畫面中,點選CSS樣式面板→新增CSS規則鍵。
    3.jpg 
    4.然後設定規則名稱以及選取器類型,重點在於下方的『規則定義』的項目中選擇『新增樣式表檔』選項。
    4.jpg 
    5.接著出現儲存畫面,請將CSS檔案儲存在專案資料夾中並且以英文數字命名,然後按下『儲存』鈕。
    5.jpg 
    6.接著出現設定畫面,請依照所需進行相關格式設定,完成後按下確定鍵。
    6.jpg 
    7.由於這個CSS檔是在a1.html編輯畫面下建立的,Dreamweaver會自動載入此檔案,再加上當初設定時,選取器類型設定為『類別』,所以要套用時,請到『屬性』面板→HTML→類別欄位中,就會有剛剛儲存的CSS檔案可供選擇(如下圖紅框處)。
    7.jpg 
    8.套用之後的畫面如下,a1.html就自動套用所有格式嚕。
    8.jpg 
    9.接著針對a2.html頁面套用同樣的外部CSS檔,由於CSS檔案是獨立的一個檔案,所以要先進行附加的動作。『屬性』面板→HTML→類別→附加樣式表。
    9.jpg 
    10.按下瀏覽選擇要連結的CSS檔案。
    11.jpg  
    11.選擇樣式表檔案→確定。
    12.jpg 
    12.附加完成後便可以在選項中選擇要套用的樣式表了。
    13.jpg 
    13.套用完成後a2.html也同樣擁有相同的格式了。
    14.jpg  
    14.切換到程式碼模式下,會看到a1.html的語法如下:
    15.jpg 
          在<head>與</head>標籤中會有一行以<link href="連結的CSS檔案" type="text/css"/>的程式碼,表示這是以『連結』的方式套用進來的CSS樣式表。
          而在<body>標籤中則會加入套用的CSS樣式的類別名稱,如<body class="類別名稱">,這是因為當初是以『類別』的方式定義此規則。
    15.同樣的在a2.html的程式碼中也會有同樣的程式碼。
    16.jpg 
    16此外,在『CSS樣式』面板,在set.css項目上點兩下可以開啟此外部CSS檔的原始碼畫面,懂語法的人也可以在此修改。
    17.jpg 
    外部CSS檔的程式碼畫面:
    18.jpg 
    17.而在一開始設計嵐有提到此方法最大的好處在於只要針對外部樣式表作修改,所有連結的頁面都會自動更新,如果要修改我們可以在『CSS樣式』面板→類別名稱上連點兩下。
    19.jpg 
    18.進入設定畫面進行修改,完成按下『確定』(在此設計嵐簡單修改網頁背景色)。
    22.jpg 
    19.修改完畢後a1.html和a2.html都會同步作更新喔!
    20.jpg 
    21.jpg 
    p.s.在步驟10中,如果選擇以『匯入』方式附加樣式表,則程式碼則必須放在<style>和</style>標籤中,且以@IMPORT的指令帶入:(如下)
    <head>
    <title>頁面標題</title>
    <style>
    @IMPORT url(set.css);
    </style>
    </head>
    而匯入與連結的差別在於如果CSS的規則設定有衝突時,匯入(@IMPORT)會被優先套用。 
          以上就是以外部CSS檔案附加的方式進行CSS格式的套用,也是一種常用且重要的CSS基本功喔,有心成為CSS高手的人要熟悉這樣的用法。
    (繼續閱讀...)
    文章標籤

    紫玫瑰淯嵐 發表在 痞客邦 留言(0) 人氣(3)

    • 個人分類:軟體/字型/CSS
    ▲top
    • 3月 31 週四 201601:09
    • 成為CSS高手之路(四)~CSS在DW中的設定與語法宣告方式Part II-整頁套用的CSS規則(下)

    2.jpg
    http://kav68795.pixnet.net/blog/post/25925686
     
    (繼續閱讀...)
    文章標籤

    紫玫瑰淯嵐 發表在 痞客邦 留言(0) 人氣(3)

    • 個人分類:軟體/字型/CSS
    ▲top
    • 3月 31 週四 201601:07
    • 成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)

    1.jpg
    http://kav68795.pixnet.net/blog/post/25894399
     
    (繼續閱讀...)
    文章標籤

    紫玫瑰淯嵐 發表在 痞客邦 留言(0) 人氣(2)

    • 個人分類:軟體/字型/CSS
    ▲top
    • 3月 31 週四 201601:03
    • 成為CSS高手之路(二)~認識基本HTML語法

    1-1.jpg
    http://kav68795.pixnet.net/blog/post/25870612
     
    (繼續閱讀...)
    文章標籤

    紫玫瑰淯嵐 發表在 痞客邦 留言(0) 人氣(22)

    • 個人分類:軟體/字型/CSS
    ▲top
    • 3月 31 週四 201601:00
    • 成為CSS高手之路(一)~CSS入門QA教室

    4.jpg
    引用→http://kav68795.pixnet.net/blog/post/25869462#comment-61597150
     
    (繼續閱讀...)
    文章標籤

    紫玫瑰淯嵐 發表在 痞客邦 留言(0) 人氣(7)

    • 個人分類:軟體/字型/CSS
    ▲top
    1

    個人資訊

    紫玫瑰淯嵐
    暱稱:
    紫玫瑰淯嵐
    分類:
    收藏嗜好
    好友:
    累積中
    地區:

    送好友回格

    文章分類

    toggle 紫玫瑰文章 (6)
    • ❉保健常識❉ (1)
    • ➽紫愛心事➽ (2)
    • ☘紫唯愛一生☘ (2)
    • &#128159;優美收藏&#128159; (0)
    • ✾親子教養有感✾ (1)
    • ❦日常生活禮儀❦ (1)
    toggle 素材 (4)
    • ₪優美圖₪ (1)
    • 人物節日素材 (1)
    • 娃娃動圖 (1)
    • PNG+閃圖 (3)
    toggle 特效圖 (2)
    • 透明swf圖 (2)
    • swf動圖 (2)
    toggle 小格玩意 (4)
    • 霝兒製作游標 (7)
    • 翔霏製作游標 (1)
    • 點我回家 (37)
    • ☆游標☆ (5)
    toggle Flash特效 (3)
    • ♣陳墨文框 (16)
    • ♣依の框♣ (29)
    • ♣荳荳圖框 (16)
    toggle 痞客邦程式 (3)
    • 痞客邦部落 (4)
    • 軟體/字型/CSS (8)
    • 軟體應用語法 (6)
    toggle ۞雅緻版型۞ (4)
    • 月版型 (43)
    • 星兒版型 (131)
    • 翔霏版型 (10)
    • 陳墨版型 (7)
    toggle ♫紫玫瑰音樂響宴♫ (4)
    • ♬韓劇音樂♬ (11)
    • ♩華語男女歌手♩ (3)
    • ♪♫♬西洋音樂♪♫♬ (3)
    • ♫大陸男女歌手♫ (4)
    • 未分類文章 (1)

    熱門文章

    • (35)(韓劇太陽的後裔OST)t尹美萊t윤미래–Always/紫玫瑰淯嵐
    • (20)(韓劇太陽的後裔OST)DAVICHI-이사랑這份愛/紫玫瑰淯嵐
    • (5)❀紫玫瑰❀
    • (5)9大1分鐘教育培育出色寶寶
    • (3)霝兒自製游標5(自製版型用6枚 )
    • (3)筆耕墨耘之不愛文字框
    • (3)荳荳圖框- 3 心是蓮花開
    • (2)筆耕墨耘之流年文字框
    • (2)筆耕墨耘之尋找文字框
    • (2)依の框 (24)

    最新文章

    • NO.67順勢而行-痞客邦版型語法
    • 美好的未來 - 星兒的版型製作 No.145
    • 星星的美夢 - 星兒的版型製作 No.144
    • NO.66浪漫之都-痞客邦版型語法
    • NO.65-2018世足賽-痞客邦版型語法
    • 2018世界盃足球賽 - 星兒的版型製作 No.143
    • 花枝一味俏妝容 - 星兒的版型製作 No.142
    • NO.64端午-痞客邦版型語法
    • 粽意飄香 - 星兒的版型製作 No.141
    • NO.63啟程-痞客邦版型語法

    最新留言

    • [20/03/09] 墨語(福氣) 於文章「NO.67順勢而行-痞客邦版型語法...」留言:
      早安:謝謝您的分享~...
    • [18/09/21] 痞客邦 於文章「NO.66浪漫之都-痞客邦版型語法...」留言:
      嗨~親愛的部落客與同好夥伴...
    • [18/09/21] 痞客邦 於文章「NO.66浪漫之都-痞客邦版型語法...」留言:
      嗨~親愛的部落客與同好夥伴...
    • [18/07/21] v608896 於文章「NO.67順勢而行-痞客邦版型語法...」留言:
      x2pc6oSEJtD奢侈品仿牌,保固說到做到,誠信經營,單...
    • [18/07/19] 月 於文章「NO.67順勢而行-痞客邦版型語法...」發表了一則私密留言
    • [18/07/10] 月 於文章「NO.67順勢而行-痞客邦版型語法...」發表了一則私密留言
    • [18/07/10] 月 於文章「NO.67順勢而行-痞客邦版型語法...」留言:
      晚安來拜訪您囉, 月換了另一種文章內捲軸的語法... 現...
    • [18/07/05] 月 於文章「NO.66浪漫之都-痞客邦版型語法...」留言:
      來拜訪姊姊了, 祝您順心...
    • [18/07/01] 太陽公公 於文章「星星的美夢 - 星兒的版型製作 No.1...」留言:
      謝謝分享...
    • [18/07/01] 月 於文章「NO.66浪漫之都-痞客邦版型語法...」發表了一則私密留言

    動態訂閱

    誰來我家

    カーソルスイッチ