注意！靜態(tài)網(wǎng)頁開發(fā)的流程及步驟

時間：2023-08-17 18:12:01 | 來源：網(wǎng)站運營

時間：2023-08-17 18:12:01 來源：網(wǎng)站運營

注意！靜態(tài)網(wǎng)頁開發(fā)的流程及步驟：

PC端靜態(tài)網(wǎng)頁開發(fā)及項目

開發(fā)流程

1. 需求分析：對要開發(fā)的產品進行定位對比如產品類型，產品功能，面向的客戶群，達到的目的等。
2. 整體規(guī)劃：根據(jù)需求分析的結論，確定網(wǎng)站中要展示的內容，層次，展示形式等，然后給出對應內容的文案。
3. 界面設計：由設計師根據(jù)整體規(guī)劃的結果，將網(wǎng)站的各個頁面進行設計，最終給出設計圖，顏色，數(shù)據(jù)信息等。
4. 前端程序設計：前端開發(fā)人員將根據(jù)得到的設計圖，進行代碼的編寫，實現(xiàn)網(wǎng)頁的界面和功能。
5. 前后端系統(tǒng)整合：后端開發(fā)人員進行數(shù)據(jù)設計，將程序功能與界面進行整合，前后端配合進行功能調試。
6. 測試驗收：項目經(jīng)理和相關測試人員根據(jù)項目前期策劃為指導對產品進行測試驗收，測試產品的交互效果，功能實現(xiàn)效果等。

頁面開發(fā)常見概念和布局流程

• 版心：是指網(wǎng)頁中主要內容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，從而讓用戶的視線更集中。常見寬度：100px,1200px
• 制作方法：margin居中。

布局流程：

• 1、確定頁面的版心。
• 2、分析頁面中的行模塊，以及每個行模塊中的列模塊。
• 3、制作HTML頁面，CSS文件。
• 4、css初始化，然后開始利用盒子模型原理，通過DIV+CSS布局來控制網(wǎng)頁的各個模塊。

head內部配置

文件結構：

文件基本結構包括：css文件夾，inages文件夾，index.html。

標簽頁icon圖標

大部分網(wǎng)頁在標簽頁標題位置會添加網(wǎng)站的icon圖標。

圖標的文件名要求以favicon.ico命名，文件需要與index.htmhttps://www.lgstatic.com/lg-www-fed/common/static/favicon_faed927.icol文件同級存儲。

使用方法，通過link標簽進行引用，設置的屬性包括：

<link rel="dhortcut icon" href="favicon.ico" type="image/x-icon">

CSS分級引入

css文件設置需要根據(jù)功能進行分層管理：目的是為了提取出多個頁面公共部分，提供謳多個HTML同時引用。公共部分也可以劃分范圍，有的是所有網(wǎng)站能用，有的是某幾個網(wǎng)站的公共部分。

css常見分層組織：清除默認樣式的css，每個頁面自己獨有的css。

清除默認樣式：

• 使用范圍：所有的網(wǎng)站都能使用。
• 制作方法：自己工作中進行積累，或者使用網(wǎng)絡已有資源。
• 命名習慣：reset.css

引入時必須作為第一層引入，網(wǎng)頁中獨有的樣式可以層疊掉reset中的樣式。

注意：reset.css寫完后不允許更改。

公共樣式：

• 適用范圍：單獨的一個網(wǎng)站所有的頁面，幾個頁面。
• 制作方法：從設計圖觀察，找到所有頁面或者多個頁面公共部分，劃分成不同的模塊分別進行.css文件書寫。
• 命名習慣：common.css或者模塊名.css

多個網(wǎng)站頁面的公共部分書寫完之后不允許后期更改，一旦更改，多個運用的HTML頁面都會發(fā)生變化。需要注意類名的使用，公共文件的類名一般不要在其他的css文件中再用。

引入順序：一般在reset.css后面，單獨樣式文件前面。

首頁布局

header區(qū)域

• header：網(wǎng)頁頂部結構常用命名，通常包括logo，導航nav等內容。
• 布局類型：通欄背景，內容包括版心居中的主要內容，內容包括左右浮動兩部分。
• 整體結構：100%的div>版心的div

注意：為了避免更改公關版心樣式，div需要重新添加一個class屬性值。

• logo：使用h1>a結構，可以適當添加SEO搜索的關鍵字。
• nav導航：常用ul>li>a列表結構搭建。

login-banner區(qū)域

• login：登錄
• 布局類型：通欄背景，內部包含版心居中的主要內容，內容包含左右浮動兩部分

注意：實際網(wǎng)頁中，部分表單效果通常使用其他標簽+css樣式的效果進行模擬，比如按鈕，下拉菜單等。

search區(qū)域

• search：搜索框部分。
• 布局類型：通欄背景，內部包含居中的主要內容。
• 搜索框區(qū)域表單：需要添加form標簽，保證數(shù)據(jù)能提交數(shù)據(jù)庫。

補充：文本框input標簽可以通過一個placeholder屬性，設置默認提示文本，點擊文本框輸入文字之后，placeholder屬性內容會自動消失。

content區(qū)域

• content：網(wǎng)頁的主要內容區(qū)域，用于展示更多的產品，信息等。
• 布局類型：通欄，底部設置邊框，內容為版心居中。
• content內部包括四個部分：main主要區(qū)域列表焦點圖，.hot_recruit熱門職位，hot-company熱門公司，hot_links熱門鏈接。

main部分

• 布局類型：左窄右寬的兩列布局，通過浮動實現(xiàn)。
• aside：側邊欄常用命名，整體為無序列表結構，表現(xiàn)為一種特殊的下拉菜單效果，鼠標移上li之后顯示內部的子級元素。下拉菜單列表中，推薦使用定義列表結構搭建。

注意：側邊欄aside這種結構中的數(shù)據(jù)是可能動態(tài)發(fā)生變化的，我們需要搭建好HTML結構和正確的css樣式，讓HTML結構足夠清晰，方便后期后端開發(fā)人員傳入數(shù)據(jù)。

• banner：焦點圖部分為滾動輪播圖效果，點擊滾動特效等待學完JavaScript后制作。
• 布局方式：整體使用定位制作，與淡入淡出輪播圖不同的是圖片所在的無序列表中，圖片需要浮動顯示，而不是定位到同一點。特殊的需要添加魔術替換圖片。

補充：box-shadow

CSS3新增的盒子屬性box-shadow

• box-shadow：水平陰影位置 垂直陰影位置 模糊距離 陰影尺寸 陰影顏色 內、外陰影；
• box-shadow：3px 3px 5px 4px rgb(0,0,0);

.hot_recruit部分

熱門職位部分是一種tab選項卡結構，并且與后面的熱門公司和熱門鏈接有類似的結構和樣式，需要謹慎提取公共樣式通過公共類名設置CSS，熱門職位獨有的樣式需要獨立的類名設置，避免影響其他的兩個部分。

• 布局類型：tab欄選項卡結構，整體為上下對齊的版心結構。
• 標題部分：浮動設置，當前展示的部分標簽使用current的類名進行標記，設置特殊樣式。
• 詳細內容布局類型：平均分步型，使用浮動制作。

補充：多余文字顯示成...省略號形式，通過三行代碼實現(xiàn)。

補充：多余文字顯示成...省略號。

.word_cut{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; <!-- 文字溢出以小圓點形式 -->}

footer區(qū)域

• footer：頁面底部的常用名
• 布局類型：通欄背景，內部包含版心居中的主要內容，內容包含左右浮動的兩部分。
• 其他登錄方式：左浮動，注意其中鼠標移上顯示定位元素效果。
• 其他鏈接服務：使用定義列表制作結構。

backtop區(qū)域

返回頂部的設置。通常使用a標簽進行結構搭建。

• 定位方式：固定定位，位置保持與版心固定的位置，避免由于分辨率標題元素位置差異太大。
• 動畫效果：后期用javascript實現(xiàn)。

快速搭建公共結構

首先制作完畢之后，分析其他頁面的共同之處，按照模塊進行拆分復制選擇。

方法：直接復制index.html文件，刪除不需要的結構，保留公司頁需要的公共結構結構，同時刪除不需要的css文件引入的link標簽，保留需要的公共樣式。

注意：記得更改nav導航中當前選中頁的class.

公共結構搭建完畢后，可以繼續(xù)書寫公司頁面獨有結構和樣式。

作者：小輝同學的筆記本
鏈接：https://juejin.cn/post/6894045433220464654
來源：掘金