筆記整理1 -- HTML基礎知識與DW簡單使用
筆記整理1 -- HTML基礎知識與DW簡單使用
- 概念
- 客戶端和服務器端
- 文件名、基本名、擴展名
- 資源文件和站點
- 什麼是HTML
- 關於W3C
- W3C的規範
- 網頁的製作
- 網頁的基本框架
- 通過記事本寫網頁
- Dreamweaver 設計器簡介
- 網站與網頁
- 基本概念
- 圖片
- 關於圖片的基本概念
- 位圖
- 矢量圖
- 分辨率
- 常見的圖片格式
- JPG/JPEG
- GIF
- PNG
- 格式轉換
- 圖片的優化
- 切片
- ps和fw常用快捷鍵
- Dreamweaver的使用
- 插入圖片
- 插入文字
- 插入超鏈接
- 插入表格
- 合併單元格和拆分單元格
- 標籤選擇
概念
學習html首先了解客戶端和服務器端，文件名和擴展名，同時瞭解打開網頁的執行過程、站點、什麼是HTML。
客戶端和服務器端
客戶端：瀏覽者使用的計算機。
- 注意：管理員其實也是瀏覽者，所以管理員使用的也是客戶端（在服務器上直接操作除外）。
服務器端：存放網頁文件的計算機。
打開網頁的執行過程：
- 客戶端給服務器端發送一個請求，服務器響應將頁面代碼發送給客戶端，這些代碼通過瀏覽器解析執行就生成了我們看到的頁面。
文件名、基本名、擴展名
文件名：由基本名和擴展名組成。
- 比如：demo.txt 其中demo是基本名，txt是擴展名。
擴展名：用於區分文件類型。
- 網頁的擴展名包括：
- 靜態網頁的擴展名：html、htm
- （其他知識點：asp、aspx、php、jsp）
資源文件和站點
一個網站中包括HTML頁面，css，JS，圖片，flash動畫或gif動畫等，這些都屬於資源文件。
為了便於管理，我麼將這些這些靜態資源放置到一個文件夾下。這個文件夾稱為站點。
- 做網站的第一步要先建站點。
什麼是HTML
HTML（HyperText Mark-up Language 超文本標記語言）
HTML語言的規則：
- 命令都要放到<>
- 大部分標記都是成對出現
- 標籤大部分都是開始結束
- HTML語言不區分大小寫
關於W3C
W3C world wide web consortium 萬維網協會
W3C的規範
W3C的規範有很多，重要的規範如下：
- 一個頁面只能有一個根元素
- 標記必須成對出現（不允許空標記）
- 空標記有時帶斜槓是為了遵循W3C定義的規範 比如：
網頁的製作
網頁的基本框架
一個頁面必須具備如下框架：
通過記事本寫網頁
步驟：
- 在站點文件夾新建一個txt文件，在文件中輸入如下代碼
歡迎進入html世界 這是我的第一個網頁 1 2 3 4 5 6 7 8 9 10
- 更改文件擴展名為html或htm，保存並雙擊網頁，通過瀏覽器打開，打開時可能出現亂碼。
Dreamweaver 設計器簡介
Dreamweaver簡稱dw，是前端開發中一個非常強大的工具。（文章的最後有一些具體使用）
作用：
1、具備很多提示
- 參數設置：編輯–參數（快捷鍵:Ctrl+U）
- 更改自動補全的執行時間：參數設置–代碼提示–結束標籤
2、管理站點文件夾
- Dreamweaver 和文件夾建立關聯：站點–新建站點–設置站點名稱和本地文件夾路徑
- —注意：刪除dw站點，站點文件夾並不會刪除源文件夾。
網站與網頁
基本概念
網站：所有網頁的集合
首頁（主頁）：當輸入網址後打開的頁面，名稱一般為index或default
- 如果一個網站中沒有首頁，則這個網站將無法顯示。
子頁面：除了首頁以外的頁面。
子頁命名規則：小寫的英文字母或數字，不能是中文。（圖片也不能用中文）
頁面尺寸：以不出現水平滾動條為準，目前的頁面寬度以17寸屏（1024*768）為準。
圖片
關於圖片的基本概念
位圖
位圖像素：由屏幕上的像素點來描述圖像。
- 放大失真，會出現馬賽克模糊。
- 位圖顏色較為豐富。
操作位圖的軟件：PS 和 FW
矢量圖
矢量圖形：使用線和麵組成圖形，所以稱為矢量。
- 放大不失真，體積小。
- 顏色數沒有位圖豐富。
操作位圖的軟件：ai，FW
- 注意：矢量圖不能直接放在網頁上，必須經過圖像處理軟件轉換成網頁支持的圖片格式（jpg、gif、png）。
分辨率
分辨率：在單位長度上的像素數，用來衡量位圖質量好壞的指標，分辨率越大，圖片質量越好。通常以“像素/英寸”，網上一般72（像素/英寸）。
- 網站默認尺寸單位為像素。
常見的圖片格式
JPG/JPEG
有損壓縮，顏色數達到一千六百多萬種，是目前使用量很大的一種圖片格式。
- 不支持透明，不支持動畫。
GIF
顏色數很少，只有256種。
- 支持透明，支持透明，圖片質量很差，現在已經用的很少。
二者比較：
- gif顏色數目少，最多256種，一般用於圖標、標識；jpg顏色細膩豐富，支持顏色多達1600多萬種。用於質量要求較高的圖像，如人物照片、風景等
- gif體積小，jpg體積大
- gif支持透明，jpg沒有透明色
- gif支持動畫，jpg不支持
PNG
無損壓縮，體積小，質量好。
- 支持格式透明，此格式越來越被廣泛應用。
- 在項目中用jpg和png格式圖片。
格式轉換
打開源圖–文件–另存為–選擇格式–保存
圖片的優化
使用工具ps和fw
- 改大小（尺寸）：修改–畫布–大小 或者 直接點擊屬性面板中的“圖像大小”按鈕–更改像素尺寸
- 降分辨率：直接點擊屬性面板中的“圖像大小”按鈕–取消圖像重新取樣選項–更改分辨率
- 降質量（壓縮）：文件–圖像預覽–降低品質（品質降低應適當，否則會失真）
- 做切片：詳細如下
切片
做切片：拿到一個效果圖後，將有用的部分給切下來。
- 注意：拿到效果圖的時候，先看效果圖的尺寸，將效果圖的尺寸調整到主流瀏覽器再做切片。
步驟：
- 選擇web-切片工具
- 文件–導出，類型選擇“僅圖像”，切片選擇“導出切片”，取消包括無切片區域
- 切片後一般要拿到Dreamweaver中拼版
- 拼版：用table標記拼版，具體在表格拼版中介紹
- 小技巧：為了切片準確，可以跳出標尺，通過保持拉出輔助線，FW中，顯示/隱藏標尺快捷鍵是ctrl+alt+R
ps和fw常用快捷鍵
- ctrl+加號：圖片放大
- ctrl+減號：圖片縮小ctrl+減號：圖片縮小
- 雙擊手型工具：將圖片自適應大小顯示雙擊 手型 工具：將圖片自適應大小顯示
- Tab鍵全部顯示/隱藏工具面版（在fw和dw中，F4也可以顯示/隱藏工具面版）
- 按住空格鍵快速切換到手型工具
- ctrl鍵快速切換到選擇工具
Dreamweaver的使用
插入圖片
方法一：點擊插入圖片按鈕
方法二：直接將站點中的圖片拖放到相應位置
插入文字
- 注意事項：
- 1.輸入空格：切換到全角，再輸入空格
- 2.回車：換段
- 3.shift+回車：換行
插入超鏈接
方法一：選擇文字或圖片，在屬性面板上選擇鏈接的地址
方法二：用
指向文件工具連接到指定文件處鏈接文件在新的瀏覽器中打開，在目標選項中選擇_blank
插入表格
- 表格的單位：
- 1.像素：絕對單位
- 2.百分比：相對單位
- 最外層表格單位是像素，套用的可以是像素也可以是百分比。
- 邊框：一般調成0
- 單元格填充：內容距邊的距離（默認=1px）一般設置為0
- 單元格間距：單元格與單元格的距離（默認=2px）一般設置為0
合併單元格和拆分單元格
選中單元格，在屬性面板上會出現合併單元格和拆分單元格按鈕
標籤選擇
標籤選擇用來快速選擇HTML對象。
