!『嵐設』免費電子報訂閱募集中!

在下方輸入您的Email訂閱就可收到本部落最新文章資訊喔!

Delivered by FeedBurner

目前分類:CSS串接樣式表 (8)

瀏覽方式: 標題列表 簡短摘要

      我們常常在網頁或是Blog中放置內容圖片,只是純粹放入圖片,有時候會覺得在視覺效果上略顯單調,但是如果想要針對圖片加點設計效果,往往又需要使用美工軟體進行編輯才可以做到,所以今天設計嵐來分享一個簡單的手法,利用CSS語法在圖片上製作具有拍立得效果的外框,瞬間就可以讓沒有特色的圖片擁有吸引眾人目光的魔力喔!

      這項設計手法的教學會有兩篇,本文針對網頁設計者如何在Dreamweaver網頁編輯軟體中進行CSS規則設定與建立,製作出圖片拍立得效果;下一篇文章設計嵐則會針對Blog使用者,分享如何在Blog內容圖片製作拍立得效果,讓大家以後寫文章放圖片的時候,圖片不再單雕乏味喔!

◎完成圖:

19.jpg 

在原本圖片的外圍多出了底色和邊框,還可加上圖片的說明文字喔!

設計嵐 發表在 痞客邦 PIXNET 留言(8) 人氣()

      成為CSS高手之路系列文章第七篇來嚕!!上一篇設計嵐說明了如何針對文字設定邊框以及轉灰階圖片的CSS語法,今天來介紹一個更實用的技巧~文繞圖的設定,這個技巧之所以重要,原因有二:1.網頁內文不作文繞圖排版上很難看 2.使用DIV+CSS排版是目前網頁標準化的一個標準作法,網頁設計師必備技能!!

1.首先設計嵐先用Dreamweaver開一個新網頁並且放入文字以及一張圖片在同一個段落,此時各位會發現,由於圖片有長寬大小,與文字同段落會造成文字上方被撐開而有一大塊空白,在版面上不但造成空間浪費也不好看。

1.jpg 

2.為解決這個問題,在傳統的做法中,有人習慣用表格排版,但表格有其限制比較不靈活;另外則有人使用以下方法:

A.選取圖片→屬性面板→對齊→靠左或靠右對齊。

設計嵐 發表在 痞客邦 PIXNET 留言(4) 人氣()

      今天設計嵐來介紹『成為CSS高手之路』系列文章第六篇,經過前面五篇的基本功訓練,有閱讀並且練習的人應該對於CSS有了基本的認識,接著開始我們正式進入實際運用的介紹,當然,我們還是要由淺入深,先從最簡單的圖片效果開始介紹,慢慢的再進展到更進階的CSS設定。

‧CSS相關系列文章請參閱:成為CSS高手之路(五)~CSS在DW中的設定與語法宣告方式Part III-套用外部的CSS檔案

      系列文章之六設計嵐介紹兩個可以運用在圖片上的CSS效果做個暖身,分別為『圖片套用邊框』以及『將全彩圖片轉成灰階』兩種效果,各位可以試著做做看:

一、在圖片上套用邊框:

1.利用Dreamweaver開啟新頁面並且插入一張圖片。

設計嵐 發表在 痞客邦 PIXNET 留言(2) 人氣()

     今天設計嵐繼續針對『成為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 

設計嵐 發表在 痞客邦 PIXNET 留言(0) 人氣()

      今天『成為CSS高手之路』系列文章之四,繼續針對『整頁套用的CSS規則』作後半段的說明,能夠讓規則套用在整個頁面的方法除了前文『成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)所提到的設定方法之外,還有其他幾種設定方式,其影響範圍也都是一整個頁面的。

 

      以下要介紹以『類別』(CLASS)、『ID』以及『標籤』三種方式所建立的CSS規則,這三種規則的宣告有個共通性-『都必須寫在<head>及</head>之間,且用<style>標籤來定義CSS的內容』,這一點我們在上一篇文章有提過,溫故知新一下,但是這三種方式還是有其宣告與使用上的差異性,以下來分別介紹。 

1.本文範例初始畫面如下: 開啟Dreamweaver建立新頁面後,輸入以下五段文字。

2.jpg    

設計嵐 發表在 痞客邦 PIXNET 留言(2) 人氣()

      今天『成為CSS高手之路』系列文章之三將來說明一下,CSS語法的宣告方式以及在Dreamweaver中要如何設定CSS,雖然有些人覺得應該直接用『寫』得方式來學習CSS,但設計嵐希望CSS被更多人所了解接受(包括初心者),唯有大家不害怕CSS了,也才會願意去深入研究它,所以即使直接使用軟體的設定畫面完成的CSS,只要使用得當,實用性還是相當高的。

      由於CSS的宣告方式很多種不同的方式,為了減輕各位學習上的負擔,以及分別說明各種不同的方式,設計嵐以一種方式一篇文章的方式來解說,大家可以分開閱讀,也比較好掌握重點;首先Part I 設計嵐先來講解第一種方式-『在整個網頁頁面中套用CSS規則』要怎麼設定以及宣告的方式。

     在這一系列的文章中,我們依然用上一篇的範例來做示範說明,下圖為一個純粹使用HTML語法撰寫的頁面:  

 

1.網頁頁面內容圖解說明: (順便溫故知新一下)

設計嵐 發表在 痞客邦 PIXNET 留言(2) 人氣()

      既然要成為CSS高手,HTML語法就不能不稍微了解一下,因為CSS樣式是針對HTML的標籤作為定義的對象;且設定好的CSS樣式也是得套用在HTML文件中,所以,想要真正搞懂CSS,以下這些HTML請確實掌握,這樣成為CSS高手的路會平坦一些。

     但是話說前頭,本文主要是就HTML語法架構做『入門』的說明,如果是已經有一定製作網頁程度或是只願意在『所見即所得』網頁編輯軟體中製作網頁的人,此篇不妨可以先略過,直接進入下一篇的CSS教學文章!

下圖為一個純粹使用HTML語法撰寫的頁面:

 

1-1.jpg 

設計嵐 發表在 痞客邦 PIXNET 留言(2) 人氣()

      從今天開始,設計嵐會在部落格中慢慢的加入『網頁設計』相關的文章,然而可以寫的東西太多了,所以設計嵐盡量從實用性高的部分開始進行,而第一首選就是『CSS串接樣式表』,因為不管是網頁設計或是部落格經營,都可以使用CSS樣式設定。

     為了讓沒有接觸過CSS的初心者可以盡快上手進入CSS的世界,設計嵐在本文將用Q&A方式針對CSS做一個簡介,其後再陸續用其他文章分享各種常用的CSS設定範例教學。

Q:什麼是CSS?

A:所謂的CSS,全名為『Cascading Style Sheets (串接樣式表)』,而其中的『串接』代表的是我們可以將各個樣式分開定義之後,再串接起來套用於網頁中,目前最新版本為CSS2.1,主要的功能在於針對Web文件進行格式上的設定,應用領域相當廣,不論是網站頁面或是部落格,幾乎都是以CSS作為格式設定的主要方式。

下圖即為Pixnet部落格的CSS樣式設定畫面:

設計嵐 發表在 痞客邦 PIXNET 留言(4) 人氣()

找更多相關文章與討論