PC端靜態(tài)網(wǎng)頁應(yīng)用開發(fā)

時(shí)間：2023-05-31 05:09:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-31 05:09:02 來源：網(wǎng)站運(yùn)營

PC端靜態(tài)網(wǎng)頁應(yīng)用開發(fā)：

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

版心

在制作網(wǎng)頁的過程中，要讓頁面結(jié)構(gòu)清晰、有條理，需要對(duì)網(wǎng)頁內(nèi)容進(jìn)行“排版”。

版心：網(wǎng)頁中主要內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，從而讓用戶的視線更集中

常見的版心寬度值包括960px、980px、1000px、1200px。

制作方法：使用標(biāo)準(zhǔn)流中的margin:auto居中方法。

頁面布局流程

1.確定版心（可視區(qū)域）

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

3.制作HTML頁面,css文件。

4.css初始化，開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊。

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

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

圖片的文件名要以favicon.ico命名，文件需要與index.html文件同級(jí)存儲(chǔ)。

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

css分級(jí)引入

css文件設(shè)置需要根據(jù)功能進(jìn)行分組管理：目的是為了提取出多個(gè)頁面的公共部分，提供多個(gè)HTML同時(shí)引用。

公共部分頁可以劃分范圍，有的是所有網(wǎng)站能用的，有的是某幾個(gè)網(wǎng)站公共的部分。

常見css的分層組織：

清除默認(rèn)樣式css、網(wǎng)站的公共樣式、每個(gè)頁面自己獨(dú)有的css

注意書寫順序，引入多層css時(shí)，需要按照后面的層疊前面的css進(jìn)行設(shè)置，使用頁面獨(dú)有的樣式層疊公共的樣式。

清除默認(rèn)樣式

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

命名：reset.css

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

注意：reset.css文件寫完后不要在更改

公共樣式

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

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

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

多個(gè)網(wǎng)站頁面的公共部分書寫完之后不要后期更改，一旦更改，多個(gè)引用的HTML頁面都會(huì)發(fā)生變化。

注意類名的使用，公共文件中的類名一般不要在其他的css文件中再用。

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

頁面獨(dú)有樣式

使用范圍：?jiǎn)为?dú)的一個(gè)HTML頁面

制作方法：找到頁面獨(dú)有的而其他頁面沒有的樣式，單獨(dú)書寫在一個(gè).css文件中，只有對(duì)應(yīng)的HTML文件能夠引用

命名習(xí)慣：一般文件名與HTML文件名保持一致。

引入順序：在所有公共樣式后面

注意：使用單獨(dú)樣式文件去層疊前面公共樣式時(shí)，需要注意選擇器權(quán)重

開發(fā)項(xiàng)目

header區(qū)域

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

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

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

注意：為了避免更改公共的版心樣式，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登陸

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

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

search區(qū)域

搜索框部分

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

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

文本框input標(biāo)簽可以通過一個(gè)placeholder屬性，設(shè)置默認(rèn)提示文本。

content區(qū)域

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

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

多余文字顯示城。。。省略號(hào)

.word_cut{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

footer區(qū)域

footer：頁面底部的常用名。

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

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

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

copyright版權(quán)區(qū)域

版權(quán)區(qū)域一般是一些文字性信息，樣式比較簡(jiǎn)單

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

backtop區(qū)域

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

定位方式：固定定位，位置保持與版心固定的位置，避免由于分辨率不同元素位置差異太大

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

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

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

方法：直接復(fù)制index.html文件，刪除不需要的結(jié)構(gòu)，保留公司頁需要的公共結(jié)構(gòu)部分

同時(shí)刪除不需要的css文件引入的link標(biāo)簽，保留需要的公共樣式文件

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

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

下一章 移動(dòng)web開發(fā)基礎(chǔ)