七、切圖技巧
Photoshop 下載流程
常用的切圖工具
PS
以拉
Sketch
注意事項
操作細節
滾輪上下移動
ctrl 滾輪縮放
alt 滾輪左右移動
課程需要用到的圖片
7-41 備註
7.42 Photoshop 切圖流程
有範例網站 psd 檔要下載
左邊是工具列
右邊有圖層,按眼睛可切換圖層
左邊有個刀,第一列第三個,切片工具
按住它,圈選起來
「檔案」「儲存為網頁用」
預設 PNG,先選 PNG24
放到資料夾的 img 資料夾
指定的圖片,切片 / 全部使用者切片
改檔名
「切片選取工具」
滑鼠左鍵兩下,改名
7.43 background 在 html 元素上載入背景圖片,設定寬高
什麼時機會用到 html 的 img,什麼時候會用到 css 的 background-image?
7.44 background-repeat:將圖片重複顯示,repeat-x
切問卷的區塊,先把其他文字和 input 區塊的眼睛按掉
7.45 background-color:與背景圖片的混用
背景長條圖高度不告,用 PS 滴管工具得到最尾巴顏色,當作剩餘的背景顏色
讓 logo 變成背景圖片
問答區老師的回覆
background 是總和
background-image 一定是會蓋在 background-color 上面的
7.46 background-position:移動 background 的位置
可以用 right bottom,pixel,也可以用啪數
7.47 background 縮寫教學
建議擺放順序
背景圖片
要不要重複
背景顏色
背景圖的位置
7.48 圖片取代文字技巧 - 以 logo 為例
同學的提問
SEO 的文章有人說不用搞這種 hack,甚至不需要 h1
老師意見
老師認為實務觀察,這種 hack 不會降低 SEO
有些電商頁面 h1 會放在新聞標題、產品頁面的產品名稱
用 schema.org 放語意標籤
h1 好處
SEO
用 background-image css 設定,RWD 想切換圖片時很方便
為什麼不用 text-indent: -9999px
white-space 的意思
怎麼處理元素內的 white-space。一行、正常、保留
color: rgba(255, 255, 255, 0%)
text-indent 是不是能達成書本首行縮排二字的效果
7.49 圖片種類介紹(gif、jpg、png)
gif 動態效果、透明背景、只有 256 色
jpg 是壓縮過的檔案
png 透明。png 8 是 256 色,png 24 比較多
png 會透出背景顏色
7.50 圖文並排範例
範例
如何讓連結內的圖片和文字把都垂直置中
兩個都 float 浮起來
把圖片放在背景圖案,用成 inline-block 後再垂直置中
在圖片下 vertical-align: middle
清除圖片底下的空白
7.51 第六節作業
HW7-51 設計表頭區塊作業
麻煩老師過目我的 HW7-51 作業練習了,謝謝老師 (已使用 CodePen 內建 css reset)
https://codepen.io/ayugioh2003/pen/xjLrdp
想請問老師一些問題
想跟老師確認我的看法,圖和文之所以無法對齊,是不是因為 img 是 inline 元素,會受 normal 和文字 baseline 的影響,因此 img 底下的空白空間就是文字 baseline 到底線的距離
根據第一點的造成此現象的可能原因,整理出能讓圖片與文字對齊的幾種方式:一、 跳脫 normal flow,讓 img 和包裹著文字的 span 浮動起來。二、讓 img 對齊 baseline 以外的線,使用
vertical-align: middle
之類的語法img 浮動後,我還是覺得 twitter 圖案有點飄起來,老師覺得有嗎,還是覺得還好?
命名的慣例,是只能靠經驗累積嗎,我覺得在命名時有點燒腦。像這份作業我有參考 PS 圖層的名稱
當滑鼠經過"聯絡我們"這些連結時,下面成功添加了 border-bottom 樣式,但更下方的 div 卻會受影響,稍微往下移動。我後來有試過將 "聯絡我們"這些連結的父元素 div.nav 添加高度,就可以避免問題。我想問的是,這是正確的解法嗎,還是有其他不用設定高度的解法
相關連結
其他同學的連結
background:linear-gradient(#00654c,#009771);
border-radius: 5px;
box-shadow: 2px 2px 2px grey;
第六章測驗
Last updated