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

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

Last updated 5 years ago

Was this helpful?

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

10-67 CSS 權重觀念

CSS Reset

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

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>

關鍵字不那麼建議加了
替代方案：加強網頁的結構，h1 該下就下
先讀取 CSS，再載入 JS
icon 重要性
- 一般形象網站，不會有人想把網站放在桌面上
- 若是電商、資訊新聞網、功能型 PWA APP、股票，可能會建置 apple-touch-icon
社群
- 若日本網站，就會考慮增加 twitter og
建置網站時，專業企劃與工程師需要思考此網站的「族群社群趨向」、「使用者載具習慣」，並思考head上需要結合什麼社群標籤與必要的功能
<link href="圖片路徑" rel="apple-touch-icon" /> 是啥
- 可通用在 android、iPhone 上
- 操作「加入主畫面」，會在主畫面產生 icon 連結的圖片

10-70 head 常用語法

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

outline
inset

10-72 最後一版PSD練習

試著切圖，做出 html 和 css

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 而中間的軸線可以用 "絕對定位與相對定位" 來做這邊有一個範例你可以參考看看

測驗

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

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

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

Last updated 5 years ago

Was this helpful?