第零章 HTML啓蒙知識與網站開發流程

時間 2019-11-30

標籤 html 啓蒙知識網站開發流程欄目 HTML 简体版

原文原文鏈接

Web前端啓蒙知識：
一、軟件架構模式
a)B/S架構：Browser-Server 瀏覽器服務器模型
b)C/S架構：Client-Server 客戶端服務器模型
注1：瀏覽器是運行網頁的應用程序
注2：B/S架構的運行模式：請求(request)-響應(response)模式css

二、靜態網頁和動態網頁的區別：是否與服務器交互html

三、網頁的四個組成部分
a)內容——圖片、文字、音頻視頻等。【後期存儲在數據庫中】
b)結構——HTML,定義網頁內容
c)表現——CSS，修飾美化
d)行爲——JavaScript，JQuery。動做和事件前端

四、B/S 結構中的四個部分分別是：
（1）由網頁組成的Web應用程序;
（2）存放 Web 應用程序並提供網頁瀏覽服務的 Web 服務器；
（3）解析網頁並顯示網頁給用戶瀏覽的客戶端瀏覽器；
（4）在客戶端和 Web 服務器端提供通信的 HTTP 網絡協議。數據庫

五、HTML基本框架瀏覽器

<html>
<head>
 <title>標題</title>
</head>
<body>
 內容
</body>
</html>

注：head頭部；body身體——包含網頁內容（能夠是文本、圖像等）服務器

6.HTML基本語法
<開始標籤屬性1="屬性值1;屬性值2" 屬性2="屬性值">元素內容</結束標籤>
注：多個屬性空格隔開，多個屬性值分號分隔。網絡

7.CSS基本語法
選擇器{
屬性:屬性值;
屬性:屬性值屬性值屬性值;
……
}架構

網站開發流程框架

1、開發流程主要包括需求分析、網站製做、網站發佈以及測試。ide

2、需求分析

1) Why——爲何須要建站?即明確組建網站的目的【目的】

l 應用程序的界面通常包括兩類：一種是桌面窗口形式(例如Windows 中的記事本、Office 等)，通常也稱爲 C／S 應用(Client／Server，客戶端／服務器模式)

l 一種是採用網頁的形式(例如表 9—1 例舉的企業內部信息系統)，通常也稱爲 B／S 應用(Browser／Server，瀏覽器／服務器模式)

2) Who——誰來訪問?即肯定網站的目標受衆【客戶】

l 通常須要分析目標受衆的年齡、興趣愛好、經濟情況等方面的問題。

l 美工人員在設計網站界面草圖時，也需考慮時尚、明快的設計樣式，包括整個網站的色彩、Logo、圖標設計等。

3) What——內容是什麼?即肯定網站的內容【功能】

l 內容決定一切，內容價值決定了訪問者的去離。咱們須要結合公司的業務背景，設計相關內容的頁面，充分展現網站的價值，讓訪問者儘快獲取到本身須要的內容。

l 設計的主要頁面有如下幾個：

n 某類商品展現頁(catlist.htm)：展現某類商品下的具體商品。

n 具體商品的詳細介紹頁(info.htm)：包括商品的名稱、性能描述等。

n 購買商品頁(buy.htm)：在線購買的商品狀況，即購物車。

n 註冊頁(register.htm)：註冊爲網站會員。

n 登陸頁(login.htm)：使用帳號登陸網站。

n 幫助頁(help.htm)：客戶服務方面的幫助信息。

注：通常還須要美工人員使用 Photoshop 等工具，設計相應的頁面效果圖並提交給客戶確認。

3、網站製做：

l 完整的網站製做包括如下兩個過程。

n 前臺頁面製做：拿到美工的效果圖之後，編寫 HTML、CSS，將效果圖轉換爲*.html 網頁,其中包括圖片收集、頁面佈局規劃等工做。

n 後臺程序開發：實現網站和數據庫的鏈接、內容動態添加或修改等後臺功能。

四、測試：

l 測試網頁包括測試如下內容。

n 測試網頁是否符合需求。

n 測試並修復網頁可能出現的漏洞(bug)。

u 根據客戶使用的瀏覽器的類型和版本，測試可否同時兼容。通常要求能同時兼容 IE 6.0、 IE 7.0、IE8.0 及 Firefox3.5，並符合 W3C XHTML 1.0 標準。

五、發佈網站

l 網站空間

n 網站空間就是存放網站內容的空間，通常對應爲網站服務器的某個文件夾目錄。

l 域名(網址)

n 本地的網站內容經過 FTP 等方式上傳到虛擬主機空間後，還須要一個可供他人訪問的 URL地址(即網址)。域名解析

六、 Dreamweaver 建立站點

l 創建站點及相關的目錄結構

n 創建站點

n 創建目錄結構

n 中小型網站，通常會建立以下通用的目錄結構。

u images 目錄：存放網站的全部圖片。

u js 目錄：存放 JavaScript 腳本文件，後綴名爲*.js，JavaScript

u css 目錄：存放 CSS 文件，即前面曾說起的外部 CSS 文件，實現內容和樣式的分離。

u 對於網站下的各網頁文件，例如，index.html 等通常放在網站根目錄下。

注意：網站目錄及網頁文件名通常都爲小寫，並採用表明必定含義的英文命名。

l 除非特殊應用外， DIV+CSS 佈局絕對是首選。

七、命名規範

l Web頁面的開發目前尚未相似 Java 或 C#方面的開發規範，但對於以上各DIV塊，習慣採用以下命名規則 (這些命名甚至已列入 W3C 的 HTML 5 草案的規範中)：

container：容器

header：頂部

footer：底部

main：頁面主體

logo：企業標誌圖片

content：頁面主體內容

sidebar：側邊欄

l 各div塊的樣式能夠採用 ID或 class通常大的 div區塊(黑體標識的4個)用 ID。

八、設置浮動：

l 用<div>標籤分區並設置 ID 標識。

l 設置浮動

l 調整寬高及盒子屬性實現實際效果。

本章總結：Ø

l 網站開發流程通常包括需求分析、網站製做、測試網頁、發佈網站幾個環節，其中前期的需求分析很是重要，通常還須要美工人員設計界面草圖及和客戶進行反覆確認。

l 製做網頁前通常須要使用 Dreamweaver 工具搭建站點的目錄結構，除此以外，還可使用Dreamweaver 的智能提示功能，輔助編輯 HTML 代碼。

l 首頁總體佈局的實現思路採用的是內容和樣式分離的思想。

n 根據效果圖規劃並編寫 HTML 組織結構，並儘可能使用語義化的 HTML 標籤。

n 在單獨的 CSS 文件中設置相關的盒子屬性，須要注意各 div 塊的規範命名。

l 首頁頂部實現的關鍵點有如下四點。

n 合理使用左右浮動，實現零散佈局。

n 一圖一文混編，而且在同一行，能夠用 div-dl-dt-dd 分兩類來實現佈局。

n 偏移量技術的典型應用。

n 用 a：hover 僞類實現鼠標懸浮的特效。

l 首頁左部實現的關鍵點有如下三點。

n 只用行高佈局來實現多行文字佈局的瀏覽器兼容。

n 區域銜接原則：在右側或底部添加內邊距來實現。

n 重要標題使用<hl>，以利於搜索引擎優化。

l 首頁中部實現的關鍵點有如下三點。

n 利用 div-dt-dl-dd 的特色實現一圖一文混編並須要多行佈局的應用場景。

n <dt>和<dd>存在默認內邊距與外邊距，佈局時應先清零。

n 把圖片和文字分別放入不一樣的容器<dt>和<dd>，以便對它們進行排版。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。