# 十、最後，讓你的網頁變得更專業
## 10-67 CSS 權重觀念
CSS Reset
* [CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)
* [Reset CSS - 重置歸零 - 網頁排版在各瀏覽器快速一致化 - 【飛肯設計學苑】教學](http://www.flycan.com/article/css/reset-css-562.html)
* [Day21：小事之 CSS Reset 與 CSS normalize - iT 邦幫忙:: 一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10196528?sc=iThelpR)
* [CSS Reset | 2018's most common CSS Resets to copy/paste, with documentation / tutorials](https://cssreset.com/)
* HTML標籤：1分
* class：10分
* 口訣 iice。inline > id > class > element
## 10-68 如何規劃你的網頁
* 拿到設計稿，不要直接寫程式碼，想一下架構會長怎樣
* 例如
* 下拉選單，美術沒提供
* 不是預設字體，要跟美術討論替代自行
* logo 背景要切透明
* 還有
* 把設計稿印下來，手寫內容
* .topbar > .pull-left + .pull-right
* h1>a, .search>inp
* .menu>ul>li\*5>a
* wrap
* topbar
* header
* banner
* content
* footer
* [高雄前端社群 #4 psdtohtml workshop](https://www.slideshare.net/sfismy/4-psdtohtml-workshop)
## 10-69 head 進階資訊設定
```markup
HTML、CSS教學
```
* 關鍵字不那麼建議加了
* [SEO 優化：不要使用 Meta Keywords 關鍵字 - 香腸炒魷魚](https://sofree.cc/meta-keywords/)
* 替代方案：加強網頁的結構，h1 該下就下
* 先讀取 CSS，再載入 JS
* [應該避免的過時語法 - Web 開發 | MDN](https://developer.mozilla.org/zh-TW/docs/Web_%E9%96%8B%E7%99%BC/Historical_artifacts_to_avoid)
* [Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) icon 的多種尺寸，為了符合不同裝置的螢幕解析度
* icon 重要性
* 一般形象網站，不會有人想把網站放在桌面上
* 若是電商、資訊新聞網、功能型 PWA APP、股票，可能會建置 apple-touch-icon
* 社群
* 若日本網站，就會考慮增加 twitter og
* 建置網站時，專業企劃與工程師需要思考此網站的「族群社群趨向」、「使用者載具習慣」，並思考head上需要結合什麼社群標籤與必要的功能
* `` 是啥
* 可通用在 android、iPhone 上
* 操作「加入主畫面」，會在主畫面產生 icon 連結的圖片
## 10-70 head 常用語法
## 10-71 十種初學者常犯的錯誤
* [六角學院 - 貼文](https://www.facebook.com/hexschool/posts/726743214141661)
* outline
* inset
* [陰影效果及光暈效果的 box-shadow (CSS property) \[1\*\] @ 網頁藝術思考 - CSS 網頁設計藝術, 友善的無障礙網頁 :: 痞客邦 ::](http://boohover.pixnet.net/blog/post/35116159-%E9%99%B0%E5%BD%B1%E6%95%88%E6%9E%9C%E5%8F%8A%E5%85%89%E6%9A%88%E6%95%88%E6%9E%9C%E7%9A%84-box-shadow-\(css-property\))
* [CSS3 box-shadow\_box-shadow, css3 屬性詳解 教程\_w3cplus](https://www.w3cplus.com/content/css3-box-shadow)
## 10-72 最後一版PSD練習
* 試著切圖，做出 html 和 css
* [CSS3 字體](http://www.w3school.com.cn/css3/css3_font.asp) 想使用特殊字體
* [Clearfix 使用偽元素](https://codepen.io/Wcc723/pen/EQgeve?editors=1100)
## 10-73 最後一版PSD作業細節
請各位同學切版完後，將網頁壓縮起來 mail 到我們的信箱：，
我們會再為您進行程式碼檢視，以確保您學習的網頁排版觀念是否正確 :D
## 10-74 最後一版PSD評分標準
一、語意命名設計
* HTML 語意標籤設計
* CSS Class 命名設計
* head 資訊設計
二、網頁排版設計
* Div 網頁結構規劃
* 兼容熱門瀏覽器
* 行內與區塊元素設計
* Margin、Padding 觀念運用
* Float、Position 運用熟練度
三、元素
* 表格設計
* 表單設計
* hover、fucus 狀態設計
* 文字排版設計
四、CSS 圖形設計
* CSS Background 運用熟練度
* 切圖類型設計（JPG、GIF、PNG）
* CSS3 圓弧、陰影、漸層效果取代圖片
## 10-75 網頁排版練習作業 - 個人履歷網頁設計
若你已經完成上述 PSD 作業， 我們還有另外一個 版型提供您練習。
此版型是個人履歷網頁版型， 方便讓你回顧目前所會技能，每當你學會一個技術後，便可更新此網頁履歷，讓它與你一塊成長 :D
時間軸效果
> 左右的排列可以使用 float 而中間的軸線可以用 "絕對定位與相對定位" 來做 這邊有一個範例你可以參考看看
>
>
* [utom/sketch-measure: Make it a fun to create spec for developers and teammates](https://github.com/utom/sketch-measure) sketch 標注功能
## 測驗
## 10-76 Iconfinder：免費下載 icon 服務平台
* [iconfinder](https://www.iconfinder.com/)
## 10-77 unsplash、Flickr：免費高解析圖庫下載資源
* [Beautiful Free Images | Unsplash](https://unsplash.com/)
* [於 Flickr 發表的 flicker 相片 | Flickr](https://www.flickr.com/photos/tags/flicker/)