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

開發(fā)流程

需求分析：對要開發(fā)的產(chǎn)品進行定位對比如產(chǎn)品類型，產(chǎn)品功能，面向的客戶群，達到的目的等。

整體規(guī)劃：根據(jù)需求分析的結論，確定網(wǎng)站中要展示的內(nèi)容，層次，展示形式等，然后給出對應內(nèi)容的文案。

界面設計：由設計師根據(jù)整體規(guī)劃的結果，將網(wǎng)站的各個頁面進行設計，最終給出設計圖，顏色，數(shù)據(jù)信息等。

前端程序設計:前端開發(fā)人員將根據(jù)得到的設計圖，進行代碼的編寫，實現(xiàn)網(wǎng)頁的界面和功能。

前后端系統(tǒng)整合：后端開發(fā)人員進行數(shù)據(jù)設計，將程序功能與界面進行整合，前后端配合進行功能調(diào)試。

測試驗收：項目經(jīng)理和相關測試人員根據(jù)項目前期策劃為指導對產(chǎn)品進行測試驗收，測試產(chǎn)品的交互效果，功能實現(xiàn)效果等。
頁面開發(fā)常見概念和布局流程

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

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

head內(nèi)部配置

文件結構：
文件基本結構包括：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等內(nèi)容。
布局類型：通欄背景，內(nèi)容包括版心居中的主要內(nèi)容，內(nèi)容包括左右浮動兩部分。
整體結構：100%的div>版心的div

注意：為了避免更改公關版心樣式，div需要重新添加一個class屬性值。
logo：使用h1>a結構，可以適當添加SEO搜索的關鍵字。
nav導航：常用ul>li>a列表結構搭建。
login-banner區(qū)域
login:登錄

布局類型：通欄背景，內(nèi)部包含版心居中的主要內(nèi)容，內(nèi)容包含左右浮動兩部分
注意：實際網(wǎng)頁中，部分表單效果通常使用其他標簽+css樣式的效果進行模擬，比如按鈕，下拉菜單等。

search區(qū)域

search：搜索框部分。

布局類型：通欄背景，內(nèi)部包含居中的主要內(nèi)容。
搜索框區(qū)域表單：需要添加form標簽，保證數(shù)據(jù)能提交數(shù)據(jù)庫。
補充：文本框input標簽可以通過一個placeholder屬性，設置默認提示文本，點擊文本框輸入文字之后，placeholder屬性內(nèi)容會自動消失。
content區(qū)域
content:網(wǎng)頁的主要內(nèi)容區(qū)域，用于展示更多的產(chǎn)品，信息等。

布局類型：通欄，底部設置邊框，內(nèi)容為版心居中。

content內(nèi)部包括四個部分：main主要區(qū)域列表焦點圖，.hot_recruit熱門職位，hot-company熱門公司，hot_links熱門鏈接。
main部分
布局類型：左窄右寬的兩列布局，通過浮動實現(xiàn)。

aside:側邊欄常用命名，整體為無序列表結構，表現(xiàn)為一種特殊的下拉菜單效果，鼠標移上li之后顯示內(nèi)部的子級元素。下拉菜單列表中，推薦使用定義列表結構搭建。

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

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

CSS3新增的盒子屬性box-shadow
box-shadow:水平陰影位置 垂直陰影位置 模糊距離 陰影尺寸 陰影顏色 內(nèi)、外陰影；
box-shadow:3px 3px 5px 4px rgb(0,0,0);
.hot_recruit部分

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

布局類型：tab欄選項卡結構，整體為上下對齊的版心結構。
標題部分：浮動設置，當前展示的部分標簽使用current的類名進行標記，設置特殊樣式。
詳細內(nèi)容布局類型：平均分步型，使用浮動制作。
補充：多余文字顯示成...省略號形式，通過三行代碼實現(xiàn)。
補充：多余文字顯示成...省略號。

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

footer區(qū)域

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

backtop區(qū)域

返回頂部的設置。通常使用a標簽進行結構搭建。
定位方式：固定定位，位置保持與版心固定的位置，避免由于分辨率標題元素位置差異太大。

動畫效果：后期用javascript實現(xiàn)。
快速搭建公共結構
首先制作完畢之后，分析其他頁面的共同之處，按照模塊進行拆分復制選擇。
方法：直接復制index.html文件，刪除不需要的結構，保留公司頁需要的公共結構結構，同時刪除不需要的css文件引入的link標簽，保留需要的公共樣式。
注意：記得更改nav導航中當前選中頁的class.
公共結構搭建完畢后，可以繼續(xù)書寫公司頁面獨有結構和樣式。

作者：小輝同學的筆記本
鏈接：https://juejin.cn/post/6894045433220464654
來源：掘金
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。

想要了解更多可以點擊下方視頻了解更多哦~

尚學堂最新2020版Java300集教程課程