十、最後，讓你的網頁變得更專業

10-67 CSS 權重觀念

CSS Reset

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

10-69 head 進階資訊設定

<head>
    <meta charset="UTF-8">
    <title>HTML、CSS教學</title>

    <link rel="shortcut icon" href="favicon.ico">   <!-- 32*32px -->
    <meta name='description' content='網站描述文字' />

    <!-- FB -->
    <meta property="og:title" content="FB的標題" />
    <meta property="og:description" content="FB的描述">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="FB上的網址" />
    <meta property="og:image" content="FB的圖片" />

    <link href="圖片路徑" rel="apple-touch-icon" />

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!-- 讓IE用最新版本渲染 -->

    <link rel="stylesheet" href="CSS檔案路徑">
    <script type="text/javascript" src="JS檔案路徑"></script>
</head>

  • 關鍵字不那麼建議加了

  • SEO 優化：不要使用 Meta Keywords 關鍵字 - 香腸炒魷魚

  • 替代方案：加強網頁的結構，h1 該下就下

  • 先讀取 CSS，再載入 JS

  • 應該避免的過時語法 - Web 開發 | MDN

  • Configuring Web Applications icon 的多種尺寸，為了符合不同裝置的螢幕解析度

  • icon 重要性

    • 一般形象網站，不會有人想把網站放在桌面上

    • 若是電商、資訊新聞網、功能型 PWA APP、股票，可能會建置 apple-touch-icon

  • 社群

    • 若日本網站，就會考慮增加 twitter og

  • 建置網站時，專業企劃與工程師需要思考此網站的「族群社群趨向」、「使用者載具習慣」，並思考head上需要結合什麼社群標籤與必要的功能

  • <link href="圖片路徑" rel="apple-touch-icon" /> 是啥

    • 可通用在 android、iPhone 上

    • 操作「加入主畫面」，會在主畫面產生 icon 連結的圖片

10-70 head 常用語法

10-71 十種初學者常犯的錯誤

10-72 最後一版PSD練習

10-73 最後一版PSD作業細節

請各位同學切版完後，將網頁壓縮起來 mail 到我們的信箱：service@hexschool.com，

我們會再為您進行程式碼檢視，以確保您學習的網頁排版觀念是否正確 :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 而中間的軸線可以用 "絕對定位與相對定位" 來做 這邊有一個範例你可以參考看看

https://codepen.io/NilsWe/pen/FemfK?q=timeline&limit=all&type=type-pens

測驗

10-76 Iconfinder：免費下載 icon 服務平台

10-77 unsplash、Flickr：免費高解析圖庫下載資源

Previous九、CSS3技巧Next十一、開發多頁式實戰講解

Last updated