關(guān)于靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)的注意流程以及步驟

時(shí)間：2023-07-23 09:09:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-23 09:09:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

關(guān)于靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)的注意流程以及步驟：

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

開(kāi)發(fā)流程

需求分析：對(duì)要開(kāi)發(fā)的產(chǎn)品進(jìn)行定位對(duì)比如產(chǎn)品類(lèi)型，產(chǎn)品功能，面向的客戶(hù)群，達(dá)到的目的等。

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

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

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

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

測(cè)試驗(yàn)收：項(xiàng)目經(jīng)理和相關(guān)測(cè)試人員根據(jù)項(xiàng)目前期策劃為指導(dǎo)對(duì)產(chǎn)品進(jìn)行測(cè)試驗(yàn)收，測(cè)試產(chǎn)品的交互效果，功能實(shí)現(xiàn)效果等。

頁(yè)面開(kāi)發(fā)常見(jiàn)概念和布局流程

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

制作方法：margin居中。

布局流程：

1.確定頁(yè)面的版心。

2.分析頁(yè)面中的行模塊，以及每個(gè)行模塊中的列模塊。

3制作HTML頁(yè)面，CSS文件。

4.css初始化，然后開(kāi)始利用盒子模型原理，通過(guò)DIV+CSS布局來(lái)控制網(wǎng)頁(yè)的各個(gè)模塊。

head內(nèi)部配置

文件結(jié)構(gòu)：

文件基本結(jié)構(gòu)包括：css文件夾，inages文件夾，index.html。

標(biāo)簽頁(yè)icon圖標(biāo)

大部分網(wǎng)頁(yè)在標(biāo)簽頁(yè)標(biāo)題位置會(huì)添加網(wǎng)站的icon圖標(biāo)。

圖標(biāo)的文件名要求以favicon.ico命名，文件需要與index.htmhttps://www.lgstatic.com/lg-www-fed/common/static/favicon_faed927.icol文件同級(jí)存儲(chǔ)。

使用方法，通過(guò)link標(biāo)簽進(jìn)行引用，設(shè)置的惡屬性包括：

<link rel="dhortcut icon" href="favicon.ico" type="image/x-icon">CSS分級(jí)引入

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

css常見(jiàn)分層組織：清除默認(rèn)樣式的css，每個(gè)頁(yè)面自己獨(dú)有的css。

清除默認(rèn)樣式：

使用范圍：所有的網(wǎng)站都能使用。

制作方法：自己工作中進(jìn)行積累，或者使用網(wǎng)絡(luò)已有資源。

命名習(xí)慣：reset.css

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

注意、；reset.css寫(xiě)完后不允許更改。

公共樣式：

適用范圍：?jiǎn)为?dú)的一個(gè)網(wǎng)站所有的頁(yè)面，幾個(gè)頁(yè)面。

制作方法：從設(shè)計(jì)圖觀察，找到所有頁(yè)面或者多個(gè)頁(yè)面公共部分，劃分成不同的模塊分別進(jìn)行.css文件書(shū)寫(xiě)。

命名習(xí)慣：common.css或者模塊名.css

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

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

首頁(yè)布局

header區(qū)域

header:網(wǎng)頁(yè)頂部結(jié)構(gòu)常用命名，通常包括logo，導(dǎo)航nav等內(nèi)容。

布局類(lèi)型：通欄背景，內(nèi)容包括版心居中的主要內(nèi)容，內(nèi)容包括左右浮動(dòng)兩部分。

整體結(jié)構(gòu)：100%的div>版心的div

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

logo：使用h1>a結(jié)構(gòu)，可以適當(dāng)添加SEO搜索的關(guān)鍵字。

nav導(dǎo)航：常用ul>li>a列表結(jié)構(gòu)搭建。

login-banner區(qū)域

login:登錄

布局類(lèi)型：通欄背景，內(nèi)部包含版心居中的主要內(nèi)容，內(nèi)容包含左右浮動(dòng)兩部分

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

search區(qū)域

search：搜索框部分。

布局類(lèi)型：通欄背景，內(nèi)部包含居中的主要內(nèi)容。

搜索框區(qū)域表單：需要添加form標(biāo)簽，保證數(shù)據(jù)能提交數(shù)據(jù)庫(kù)。

補(bǔ)充：文本框input標(biāo)簽可以通過(guò)一個(gè)placeholder屬性，設(shè)置默認(rèn)提示文本，點(diǎn)擊文本框輸入文字之后，placeholder屬性?xún)?nèi)容會(huì)自動(dòng)消失。

content區(qū)域

content:網(wǎng)頁(yè)的主要內(nèi)容區(qū)域，用于展示更多的產(chǎn)品，信息等。

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

content內(nèi)部包括四個(gè)部分：main主要區(qū)域列表焦點(diǎn)圖，.hot_recruit熱門(mén)職位，hot-company熱門(mén)公司，hot_links熱門(mén)鏈接。

main部分

布局類(lèi)型：左窄右寬的兩列布局，通過(guò)浮動(dòng)實(shí)現(xiàn)。

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

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

banner：焦點(diǎn)圖部分為滾動(dòng)輪播圖效果，點(diǎn)擊滾動(dòng)特效等待學(xué)完JavaScript后制作。

布局方式：整體使用定位制作，與淡入淡出輪播圖不同的是圖片所在的無(wú)序列表中，圖片需要浮動(dòng)顯示，而不是定位到同一點(diǎn)。特殊的需要添加魔術(shù)替換圖片。

補(bǔ)充：box-shadow

CSS3新增的盒子屬性box-shadow

box-shadow:水平陰影位置 垂直陰影位置 模糊距離 陰影尺寸 陰影顏色 內(nèi)、外陰影；

box-shadow:3px 3px 5px 4px rgb(0,0,0);

.hot_recruit部分

熱門(mén)職位部分是一種tab選項(xiàng)卡結(jié)構(gòu)，并且與后面的熱門(mén)公司和熱門(mén)鏈接有類(lèi)似的結(jié)構(gòu)和樣式，需要謹(jǐn)慎提取公共樣式通過(guò)公共類(lèi)名設(shè)置CSS，熱門(mén)職位獨(dú)有的樣式需要獨(dú)立的類(lèi)名設(shè)置，避免影響其他的兩個(gè)部分。

布局類(lèi)型：tab欄選項(xiàng)卡結(jié)構(gòu)，整體為上下對(duì)齊的版心結(jié)構(gòu)。

標(biāo)題部分：浮動(dòng)設(shè)置，當(dāng)前展示的部分標(biāo)簽使用current的類(lèi)名進(jìn)行標(biāo)記，設(shè)置特殊樣式。

詳細(xì)內(nèi)容布局類(lèi)型：平均分步型，使用浮動(dòng)制作。

補(bǔ)充：多余文字顯示成...省略號(hào)形式，通過(guò)三行代碼實(shí)現(xiàn)。

補(bǔ)充：多余文字顯示成...省略號(hào)。

.

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

footer區(qū)域

footer:頁(yè)面底部的常用名

布局類(lèi)型：通欄背景，內(nèi)部包含版心居中的主要內(nèi)容，內(nèi)容包含左右浮動(dòng)的兩部分。

其他登錄方式:左浮動(dòng)，注意其中鼠標(biāo)移上顯示定位元素效果。

其他鏈接服務(wù)：使用定義列表制作結(jié)構(gòu)。

backtop區(qū)域

返回頂部的設(shè)置。通常使用a標(biāo)簽進(jìn)行結(jié)構(gòu)搭建。

定位方式：固定定位，位置保持與版心固定的位置，避免由于分辨率標(biāo)題元素位置差異太大。

動(dòng)畫(huà)效果：后期用javascript實(shí)現(xiàn)。

快速搭建公共結(jié)構(gòu)

首先制作完畢之后，分析其他頁(yè)面的共同之處，按照模塊進(jìn)行拆分復(fù)制選擇。

方法：直接復(fù)制index.html文件，刪除不需要的結(jié)構(gòu)，保留公司頁(yè)需要的公共結(jié)構(gòu)結(jié)構(gòu)，同時(shí)刪除不需要的css文件引入的link標(biāo)簽，保留需要的公共樣式。

注意：記得更改nav導(dǎo)航中當(dāng)前選中頁(yè)的class.

公共結(jié)構(gòu)搭建完畢后，可以繼續(xù)書(shū)寫(xiě)公司頁(yè)面獨(dú)有結(jié)構(gòu)和樣式。





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