超完美CSS設計風格指南 (1版)

類似書籍推薦給您

商品描述 ★一口氣搞懂Web開發現場應該要懂的CSS相關知識 ★解決您在開發時遇到的困難 ★解決團隊協作開發的溝通問題 隨著前端開發的複雜度增加，出現各種以React、Vue.js 等處理CSS的方法，HTML套用樣式的手法也是五花八門。因此，開發人員肯定會對CSS感到頭大，該怎麼應用CSS？該使用哪種工具才好？ 本書為網站製作和前端開發領域的設計師與開發人員提供了易於理解的CSS設計指引，您可藉由本書學到最新的觀念與CSS方法論，做出符合專案需求的最佳CSS設計。 <序> 本書是講述CSS設計的參考書。正在煩惱該如何編寫CSS的人，翻閱後若覺得有所幫助，筆者將會欣喜萬分。 何謂編寫CSS？ 投入前端工程開發的人肯定皆會接觸CSS，但涉入多麼深的程度就因人而異。筆者任職的PixelGrid，職員僅數十名，主要業務為網站架設與APP實作。雖然PixelGrid主打前端工程的相關技術，但專門編寫CSS的人員卻不多，大家多多少少都會編寫CSS。除了對屬性（property）有一定程度的瞭解外，對於怎麼編寫CSS、如何管理完成的CSS，具有一定程度上的知識。 現在回頭想想，我並不曉得自己是如何學會編寫CSS的，市面上沒有系統性解說相關思維的書籍。雖然CSS的參考資料多不勝數，有介紹各種屬性呈現的效果⋯⋯等等，但該考慮什麼事情、該注意什麼來編寫CSS、該如何管理完成的CSS，就幾乎沒有相關的統整教材。然後，關於這種編寫CSS的能力，不易簡單描述應該具備什麼知識，即便事前記住網站的內容，也難以三言兩語說明清楚。 目錄大綱 第1章 關於編寫CSS 第2章 缺少CSS設計會遇到的困擾 第3章 先來瞭解BEM 第4章 BEM的B＝區塊 第5章 BEM的E＝元素 第6章 BEM的M＝修飾符 第7章 BEM的其他內容 第8章 SMACSS：基礎規範 第9章 SMACSS：布局規範 第10章 SMACSS：主題規範 第11章 功能類別 第12章 命名空間式前綴詞 第13章 設計區塊間的留白：前篇 第14章 區塊間的留白設計：中篇 第15章 區塊間的留白設計：後篇 第16章 在專案中應對自如 第17章 推薦設計指引 第18章 使用建置製作CSS：不直接使用完成的CSS 第19章 使用建置製作CSS：Sass 第20章 使用建置製作CSS：Autoprefixer 第21章 使用建置製作CSS：PostCSS 第22章 進階元件：通用型區塊、限定型區塊 第23章 進階元件：區塊嵌套 第24章 功能優先

Illustrator超完美入門 (2版)

類似書籍推薦給您

Illustrator超完美入門【CC適用】 系列名：影像編修繪圖 ISBN13：9789865029876 出版社：碁峰資訊 作者：高野雅弘 譯者：陳亦苓 裝訂／頁數：平裝／248頁 規格：24.7cm*18.2cm*1.4cm (高/寬/厚) 版次：2 出版日：2021/11/04 中國圖書分類：電腦應用及其程式 內容簡介 　　★★★★★銷售TOP 1，日本壓倒性高評價！★★★★★ 　　 　　榮登台灣與日本各大網路書店暢銷榜 　　世界最簡單、詳盡全面的入門書最新版 　　從零開始徹底學習！從基礎操作到實務運用， 　　徹底網羅必備技巧，一本超實用的Illustrator學習聖經！ 　　Illustrator CC適用/Windows & Mac適用 　　來自「人氣設計師」的129堂必修課！ 　　本書從基礎開始，逐一解說Illustrator的各項功能、 　　使用方法及設計方式，規劃「從做中學」的完美課程， 　　扎實學會Illustrator必備功能與應用。 　　首次接觸Illustrator者，可從第1章開始依序閱讀， 　　內容設計由淺入深，培養出正確的使用方式與應用技能。 　　如果是原本就有Illustrator基礎的設計人， 　　本書將成為你手邊超好用的工具書，內容依應用分類， 　　可依目的迅速查詢所需技巧，隨時融入你的設計之中。 目錄 Lesson 1 Illustrator的基礎知識 用5分鐘學會Illustrator的基本概要 1-1 Illustrator是什麼？ 1-2 工具面板的基本操作 1-3 面板／面板槽的基本操作 1-4 Illustrator可使用的檔案格式 (本書所採取的工作區配置) Lesson 2 Illustrator操作入門 一開始就該記住的基本操作 2-1 建立新文件 2-2 儲存檔案 2-3 變更顯示比例 (GPU效能功能) 2-4 變更顯示範圍 2-5 工作區的操作 2-6 更改操作介面的顏色 2-7 瞭解智慧型參考線 2-8 充分運用尺標與參考線、格點 2-9 精通列印功能 2-10 物件的選取、刪除、移動 2-11 操作的復原與重做 Lesson 3 基本圖形的繪製方法與變形操作 首先從基本圖形的畫法開始學起！ 3-1 繪製橢圓形及正圓形 3-2 繪製正多邊形 3-3 繪製矩形與圓角矩形 3-4 瞭解即時形狀（Live Shapes） 3-5 繪製菱形及等腰直角三角形 3-6 繪製尺寸精準的圖形 3-7 使用「變形」面板來變形物件 (其他的繪圖類工具) 3-8 以操作邊框的方式來變形物件 3-9 放大、縮小、旋轉、傾斜及翻轉變形 3-10 「任意變形」工具的用法 3-11 以單一操作分別變形多個物件 3-12 物件的合成（「形狀模式」區） 3-13 Workshop #01 用「路徑管理員」面板製作對話泡泡 3-14 物件的合成（「路徑管理員」區） (「路徑管理員選項」的設定) 3-15 Workshop #02 製作光的三原色圖 3-16 Workshop #03 繪製櫻花 3-17 以「即時尖角」功能來改變轉角形狀 Lesson 4 路徑的描繪與編輯 路徑的基本結構與各式各樣的編輯功能 4-1 了解路徑的基本結構 4-2 「鋼筆」工具的基本操作與貝茲曲線 4-3 錨點的增加與刪除 4-4 錨點的基本操作 4-5 合併路徑 4-6 「曲線」工具的用法 4-7 了解「筆畫」的基礎知識 4-8 虛線的正確製作方式 4-9 製作各式各樣的箭頭圖案 4-10 套用變數寬度來替筆畫增添粗細變化 4-11 為物件套用多種筆畫 4-12 將「筆畫」轉換成「填色」物件 4-13 Workshop #04 繪製裝飾用的緞帶圖案 4-14 以「鉛筆」工具進行自由手繪 Lesson 5 物件的編輯與圖層的基礎知識 要能隨心所欲地完成圖稿的必備知識 5-1 對齊物件 5-2 物件的群組化 5-3 在編輯模式中編輯群組物件 5-4 將多個路徑整合為單一路徑 5-5 了解物件的「排列順序」 5-6 圖層的基礎知識 5-7 圖層的基本操作 5-8 將物件移至別的圖層 5-9 切換圖層的顯示／隱藏 5-10 鎖定圖層使之無法選取、編輯 5-11 將圖層切換為外框顯示 5-12 選取「填色」或「筆畫」顏色相同的物件 (透明度平面化) Lesson 6 顏色與漸層的設定 為物件設定色彩的各種方法與功能 6-1 了解「填色」與「筆畫」的基本概念 6-2 「顏色」面板的基本操作 6-3 「色票」面板的基本操作 6-4 整體色色票的運用 6-5 設定協調的色彩 6-6 將物件的顏色轉為黑白或反轉 6-7 精通「檢色滴管」工具 6-8 漸層的製作方法 6-9 用「漸層」工具調整漸層的起點、終點，以及角度 6-10 利用漸層網格替物件套用複雜的漸層效果 6-11 活用「重新上色圖稿」功能 (活用「Adobe Color」) Lesson 7 變形、合成、特殊效果 讓你充分活用Illustrator的便利功能 7-1 了解「透明度」面板 7-2 套用「不透明度遮色片」讓物件漸漸變透明 7-3 以漸變模式合成重疊物件的色彩 7-4 以「漸變」工具漸變多個物件的顏色與形狀 7-5 使用液化變形類工具來扭曲物件 7-6 了解效果 7-7 活用各種效果 7-8 建立簡單的圖樣 7-9 只變形已套用至物件的圖樣 (色票資料庫的運用) 7-10 編輯已登錄的圖樣色票 7-11 運用「操控彎曲」工具將物件變形為自然的形狀 7-12 用「圖表」類工具來製作圖表 7-13 了解筆刷 7-14 建立圖樣筆刷 7-15 建立線條圖筆刷 Lesson 8 影像的置入與編輯 在Illustrator中處理點陣影像的必備知識 8-1 置入影像 8-2 置入做為底稿的影像 8-3 置換影像 8-4 將連結影像嵌入 8-5 編輯、更新以連結方式置入的原始影像 8-6 查看所有置入影像的狀態 8-7 隱藏影像中不需要的部分（剪裁遮色片） 8-8 將影像加工成馬賽克風格 8-9 將影像轉換成插圖 8-10 裁切影像 Lesson 9 文字操作與段落設定 從各種相關面板的基本操作到應用技巧 9-1 了解「字元」面板 9-2 輸入文字 9-3 編輯文字 9-4 變更字體與字體大小 9-5 調整文字的行距 9-6 調整文字的字距 9-7 了解「段落」面板 9-8 在單一文字區域中設定分欄 9-9 連接了多個文字區域的文字緒 9-10 設定繞圖排文 9-11 切換垂直文字與水平文字 9-12 輸入各種特殊字元 9-13 在文件內尋找、取代文字 9-14 在文件內尋找、取代字體 9-15 將文字轉換成路徑 9-16 以繪圖樣式裝飾文字 9-17 建立複合字體 ...

Photoshop超完美入門【CC適用】 (2版)

類似書籍推薦給您

內容簡介 　　★★★★★銷售TOP 1，日本壓倒性高評價！★★★★★ 　　榮登台灣與日本各大網路書店暢銷榜 　　世界最簡單、詳盡全面的入門書最新版 　　從零開始徹底學習！從基礎操作到實務運用， 　　徹底網羅必備技巧，一本超實用的Photoshop學習聖經！ 　　Photoshop CC適用/Windows & Mac適用 　　來自「人氣設計師與講師」的94堂必修課！ 　　從基礎開始，逐一解說Photoshop的各項功能、 　　使用方法及設計方式，規劃「從做中學」的完美課程， 　　提供可用的範例檔，扎實學會Photoshop必備功能與應用。 　　----------------------------------------- 　　首次接觸Photoshop者，可從第1單元開始依序閱讀， 　　內容設計由淺入深，培養出正確的使用方式與應用技能。 　　如果是原本就有Photoshop基礎的設計人， 　　本書將成為你手邊超好用的工具書，內容依應用分類， 　　可依目的迅速查詢所需技巧，隨時融入你的設計之中。 本書特色 　　‧用5分鐘學會Photoshop概要與數位影像的基礎知識 　　‧直接切入一開始就必須瞭解的基本功能操作 　　‧學習立刻就派上用場的常用技巧「調整圖層、色調、明暗、飽和度…」的方法 　　‧學會Photoshop最重要的功能「建立選取範圍」，就可以調整、編修影像 　　‧確實掌握一定要會的「圖層」功能，進入影像合成的核心技巧 　　‧運用各種繪圖功能、漸層與圖樣，打造出色的影像 　　‧熟悉自動取樣修復、去除…等編修影像的基本技巧，提高影像品質 　　‧學習能輕鬆使用特殊效果的強大濾鏡功能 　　‧瞭解向量影像的處理技能，讓「文字、路徑、形狀」功力再升級 　　‧經由綜合練習，學會如何搭配運用多種功能進行實務設計 　　‧打造提升操作便利性與作業效率的設定密技 目錄 Lesson 1 Photoshop的基本知識 5分鐘學會Photoshop的概要與數位影像的基本原則 1-1 Photoshop是什麼？ 1-2 工具列的基本操作 1-3 面板／面板區的基本操作 1-4 數位影像的基本知識 1-5 影像的解析度與文件尺寸 1-6 檔案格式 Lesson 2 Photoshop入門 一開始就必須瞭解的基本操作 2-1 開啟檔案 2-2 儲存檔案 2-3 工作區的操作方式 2-4 更改影像的顯示區域 2-5 修正影像的傾斜狀態 2-6 裁切多餘的部分 2-7 還原、重做操作步驟 2-8 使用參考線與格點 2-9 像素的色彩資訊 2-10 調整版面尺寸 2-11 建立新檔案 Lesson 3 色調調整的基本知識 立刻就能派上用場的常用技巧 3-1 何謂色調調整 (常用的2種色調調整方法) 3-2 調整圖層的基本知識 3-3 調整圖層的基本操作方法 3-4 調整明暗 「色階」 3-5 調整明暗 「曲線」 3-6 調整明暗 「亮度/對比」 (調整部分影像的明暗) 3-7 調整色相/飽和度 「色相/飽和度」 (調整部分影像的飽和度) 3-8 去除色偏 「色彩平衡」 3-9 去除色偏 「相片濾鏡」 3-10 變成單色調影像 「黑白」 3-11 「負片效果」與「臨界值」 3-12 變成插畫風格 「色調分離」 3-13 變成插畫風格 「漸層對應」 3-14 使用「曲線」個別調整色版 (影像調整的基本流程) Lesson 4 建立選取範圍 一起來學習Photoshop最重要的功能！ 4-1 選取範圍的基本知識 4-2 建立矩形或橢圓形的選取範圍 4-3 建立形狀複雜的選取範圍 4-4 自動建立選取範圍 4-5 瞬間選取被攝體 (「快速選取工具」與「魔術棒工具」的選項) 4-6 取消與儲存／載入選取範圍 4-7 認識Alpha色板 4-8 利用Alpha色版編輯選取範圍 (操作「色版」面板) 4-9 利用快速遮色片模式編輯 (Alpha色版與快速遮色片模式的差異與用法) 4-10 選取顏色範圍 「顏色範圍」 4-11 增加選取範圍 「連續相近色」 4-12 將路徑轉換成選取範圍 4-13 精準選取毛髮 4-14 調整選取範圍 「修改」 Lesson 5 圖層的基本操作 確實掌握影像合成的核心功能 5-1 徹底瞭解圖層 5-2 圖層的基本操作 (使用「圖層構圖」比較設計提案) 5-3 影像合成的基本步驟 5-4 填滿圖層的基本概念 5-5 運用智慧型物件 5-6 圖層的不透明度 5-7 編輯圖層遮色片① 5-8 編輯圖層遮色片② 5-9 在選取範圍內貼上影像 5-10 向量圖遮色片的用法 5-11 剪裁遮色片的用法 5-12 圖層樣式的用法 (圖層樣式的相關項目) 5-13 瞭解混合模式 5-14 篩選圖層 Lesson 6 設定色彩與繪圖功能 運用各種繪圖功能及漸層與圖樣 6-1 設定顏色的基本知識 6-2 色彩的設定方法 6-3 「筆刷工具」的用法 6-4 「油漆桶工具」與「填滿」對話視窗 6-5 運用漸層 6-6 使用圖樣繪圖 6-7 各種橡皮擦類工具 Lesson 7 修正影像的基本技巧 提高影像品質的基礎技術 7-1 去除多餘的部分 (操作「仿製來源」面板) 7-2 自動取樣的修復、去除功能 7-3 以包圍方式去除不要的部分 7-4 移動被攝體 7-5 延伸影像 Lesson 8 運用濾鏡 能輕鬆套用特殊效果的優秀功能 8-1 何謂濾鏡 8-2 銳利化「遮色片銳利化調整」 8-3 套用模糊效果「高斯模糊」 8-4 去除細微的灰塵「污點和刮痕」 8-5 在部分影像套用濾鏡 8-6 濾鏡收藏館 Lesson 9 文字、路徑、形狀 瞭解Photoshop的向量功能 9-1 輸入與編輯文字 9-2 變形文字 9-3 形狀與路徑的基本技巧 9-4 路徑繪圖與「筆型工具」 9-5 將選取範圍轉換成路徑 9-6 利用路徑填滿影像 9-7 描繪路徑邊緣 9-8 定義自訂形狀 9-9 運用Illustrator的路徑 9-10 定義圖樣與繪圖 Lesson 10 綜合練習 實際動手操作，練習影像合成技巧 10-1 練習影像合成！ Lesson 11 方便的功能 可以提升操作性及工作效率的設定與功能 11-1 偏好設定的基本知識 11-2 儲存常用的設定 11-3 色彩管理與顏色設定 (「找不到描述檔」與「描述檔不符」) 11-4 使用「Bridge」檢視、整理影像 11-5 利用自動處理更改檔案名稱 11-6 運用快速鍵

學好跨平台網頁設計--HTML5、CSS3、JavaScript、jQuery與Bootstrap 5超完美特訓班(附範例/RWD影音教學) (3版)

類似書籍推薦給您

學好跨平台網頁設計：HTML5、CSS3、JavaScript、jQuery與Bootstrap 5超完美特訓班（附範例/RWD影音教學）（第三版） 系列名：網頁開發設計 ISBN13：9789865029074 出版社：碁峰資訊 作者：鄧文淵-總監製;文淵閣工作室-編著 裝訂／頁數：平裝／512頁 規格：23cm*17cm*2.3cm (高/寬/厚) 版次：3 出版日：2021/08/04 中國圖書分類：電腦；資料處理 內容簡介 　　最熱門的跨平台網頁設計技術大集合！ 　　6大主題、300個立即可套用範例，全新Bootstrap 5來襲， 　　最適合全面學習、現學現用的21堂經典關鍵課！ 　　HTML5是最主流的跨平台網頁開發技術，書中以HTML5為主體，綜合當今最經典的跨平台網頁程式設計工具，完整解鎖各項技術，提供最佳學習途徑，現學現用！ 　　【結合最新前端技術】 　　全面引進最新的前端框架與技術，無論是HTML5、CSS3、JavaScript、jQuery、jQuery Mobile或是Bootstrap 5，都能銜接學習而快速上手，打造符合新一代標準的跨平台網站。 　　全新Bootstrap 5更是新一代RWD網站開發中的熱門焦點，能讓網頁因應不同大小的螢幕自動改變內容的配置，確保每個平台的使用者都能得到最好的操作體驗。無論是框架的安裝方式、格線系統的使用、網頁的元件、表單及工具的應用，一直到網頁互動程式的開發，Bootstrap 5都能提供簡單但功能強大的幫助！ 　　【徹底掌握開發語法】 　　透過詳細語法解說、大量圖表示意，引領了解各主題的核心概念與重點技術，並利用最適合的開發工具進行範例實作，徹底掌握語法與應用。 　　【立即套用海量範例】 　　提供大量範例應用，每個主題都依功能別加入實用範例，可依架構學習，也可以依功能主題立即尋找可套用的範例。 　　【跨越平台行動優先】 　　面對行動裝置的普及，網頁就必須跨越不同螢幕尺寸，因應不同作業平台。書中將RWD網頁建置技術徹底解構，進而掌握從電腦到手機版網頁的設計心法，讓跨平台網頁製作更簡單！ 　　【超值RWD影音教學】 　　提供RWD(Responsive Web Design，響應式網頁設計)使用Bootstrap 5的實戰影音教學，利用Bootstrap 5引導您從無到有快速打造一個跨平台的RWD網站，快速強化開發實力！ 　　【超值學習資源】範例程式檔、RWD網頁快速開發：使用Bootstrap 5實戰影音教學 目錄 01 HTML基礎入門 HTML5除了簡化了HTML語法的結構，提供了許多功能標籤能夠直接控制音效、影片等多媒體檔案的播放，並且進一步加入控管地理位置的Geolocation API、繪圖的Canvas API、本地端的資料庫、離線的儲存機制 ⋯ 等讓人期待的功能，讓網頁的呈現與應用提升到另一個不同的層次。 1.1 HTML的出現 1.2 HTML5的歷史 1.3 HTML5的新功能 1.4 HTML5的編輯與瀏覽 02 HTML結構與文字段落 HTML是一個很重要的語法，它能整合文字、圖片、聲音、動畫、影片等內容，藉由瀏覽器讓資訊能夠無遠弗屆，深入到每個角落。在這裡先介紹HTML的文字段落與超連結等標籤，扎實打好HTML的基礎。 2.1 HTML文件結構 2.2 段落 2.3 文字格式 2.4 HTML5的語意標籤 03 超連結、圖片、音效與影片 超連結是HTML 中很重要的一個元素，藉由超連結能夠將不同的網站連繫在一起，也能連結到不同的網站，甚至是不同的資源。除了文字之外，圖片、音效與影片更是HTML 中很重要的內容。本章將要說明如何在網頁中加入圖片、音效與影片，並說明HTML5 新增的元素與功能，讓多媒體的資源豐富您的網頁與內容。 3.1 路徑的表示方法 3.2 超連結 3.3 圖片 3.4 音效的使用 3.5 影片的使用 04 表格與表單 表格是網頁中資料展示的重要利器，本章將分析表格中各個部位，並說明相關的標籤與屬性。表單是網站與瀏覽者互動的窗口，不同的資料需要不同的表單元件來傳送。本章除了介紹HTML中原有的表單元件的建置方式，並會進一步說明HTML5新增的表單元件與使用方式。 4.1 表格 4.2 表單 05 CSS基礎入門 CSS(Cascading Style Sheets)樣式表在網頁設計中占了十分重要的地位，HTML是將網頁進行結構化的製作，而CSS可以依照這個結構進行美化，提升網頁載入的速度，有系統的打造網站的風格。 CSS選擇器是套用樣式的基本功夫，除了一般的套用之外，還能使用屬性選擇器、虛擬類別選擇器、虛擬元素選擇器及組合選擇器，讓樣式的套用更靈活。 5.1 認識CSS 5.2 CSS3的新功能 5.3 CSS的套用方式 5.4 CSS基本語法 5.5 CSS基本選擇器 5.6 CSS屬性選擇器 5.7 CSS虛擬類別選擇器 5.8 CSS虛擬元素選擇器 5.9 組合選擇器 5.10 CSS選擇器的套用順序 06 顏色與文字設定 網頁中顏色的使用相當重要，除了能提高閱讀的舒適度，善用顏色的搭配能讓頁面的表現更加分。文字是網頁中最基礎但也最重要的內容，使用CSS 能快速的定義文字大小，粗細、字型、顏色 ... 等樣式，讓文字的呈現不再一成不變。 6.1 顏色的設定 6.2 文字大小、字型及相關的樣式設定 6.3 字型設定 07 段落與表列設定 文字段落的樣式包括了行距、文字間距、對齊、縮排 ... 等，對於網頁資訊的呈現也相當重要。表列資料的呈現分為項目符號及編號，對於資料的表現十分重要。CSS 的設定能更完美的呈現表列資料。 7.1 文字段落相關的樣式設定 7.2 項目符號及編號的設定 7.3 超連結的樣式設定 7.4 CSS3：文字陰影 08 背景與框線設計 在網頁中可以為元素設定背景，可以凸顯前景的內容。設定的方式十分多元，可以使用顏色、圖片，並能設定背景圖片的位置，背景圖片重複的方式，以及透明度，甚至使用漸層顏色。框線與背景設定的條件十分相似，只要是區塊的標籤元素都能設定框線。除了顏色、粗細，還能設定顯示的樣式，設定圓角，加上陰影。 8.1 設定背景顏色及圖片 8.2 設定透明度 8.3 設定漸層 8.4 框線的設定 8.5 表格框線 8.6 CSS3：圓角框線 8.7 CSS3：區塊陰影 09 盒子模型與版面定位 在網頁的版面上可以說是一個個盒子所組成的，只要能熟悉盒子模型的結構，即可準確的規劃版面中每個區塊的尺寸以及與其他區塊之間的排列狀態。float屬性能將元素設置到所在容器的最左方或最右方成為浮動元素，跟在該元素後方的內容就接著流動到剩下來的位置中。position屬性能精確的定位區塊元素的位置，並依不同特性安排區塊元素的展示方法。CSS3的媒體查詢能根據不同媒體、不同的特性給予不同的CSS樣式設定。 9.1 使用元素結構的重要觀念 9.2 認識盒子模型 9.3 float的使用 9.4 position的使用 9.5 媒體查詢 ...