靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)

時(shí)間：2023-09-16 19:18:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-16 19:18:01 來源：網(wǎng)站運(yùn)營

靜態(tài)網(wǎng)頁項(xiàng)目開發(fā)基礎(chǔ)

開發(fā)流程

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

版心

• 閱讀報(bào)紙時(shí)我們會(huì)發(fā)現(xiàn)，雖然其中內(nèi)容很多很豐富，但是經(jīng)過合理的排版布局，版面整體依然清晰、易讀
• 同樣,在制作網(wǎng)頁過程中，如果要讓頁面結(jié)構(gòu)清晰、有條理，也需要對網(wǎng)頁內(nèi)容 進(jìn)行“排版”
• 版心:是指網(wǎng)頁中主要內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，從 而讓用戶的視線更集中
• 常見的版心寬度值包括960px、980px、 1000px、 1200px 等
• 制作方法:使用標(biāo)準(zhǔn)流中的margin居中方法

頁面布局流程

• 為了高網(wǎng)頁制作的效率，布局時(shí)通常要遵守一定的布局流程，具體如下:
• 確定頁面的版心(可視區(qū)域)
• 分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊
• 制作HTML頁面，CSS文件
• 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)
  
• 圖標(biāo)的文件名要求已favicon.ico命名，文件需要與index.html文件同級存儲(chǔ)
  
• 使用方法，通過/標(biāo)簽進(jìn)行引用，設(shè)置的屬性包括：
  
• <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"
  

css分級引入

• css文件設(shè)置需要根據(jù)功能進(jìn)行分層管理:目的是為了提取出多個(gè)頁面公共的部分，提供多個(gè)HTML同時(shí)引用。公共的部分也可以劃分范圍，有的是所有網(wǎng)站能用的，有的是某幾個(gè)網(wǎng)站公共的部分
• css常見的分層組織:清除默認(rèn)樣式的css,網(wǎng)站的公共樣式css,每個(gè)頁面自己獨(dú)有的css
• 注意書寫順序，引入多層css時(shí)，需要按照后面的層疊前面的css進(jìn)行設(shè)置，使用頁面獨(dú)有的樣式層疊公共的樣式

清除默認(rèn)樣式

• 使用范圍:所有網(wǎng)站都能使用
• 制作方法:自己工作中進(jìn)行積累，或者使用網(wǎng)絡(luò)上已有的資源
• 命名的習(xí)慣: reset.css
• 引入時(shí)必須作為第一層引入，網(wǎng)頁中獨(dú)有的樣式可以層疊掉reset中的樣式。 注意: reset.css 文件寫完后不允許再次更改

公共樣式

• 使用范圍:單獨(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ú)有樣式

• 使用范圍:單獨(dú)的一一個(gè)HTML頁面
• 制作方法:找到頁面獨(dú)有的而其他頁面沒有的樣式，單獨(dú)書寫在一個(gè).css文件中，只有對應(yīng)的HTML文件能夠引用
• 命名習(xí)慣: -般文件名與HTML的文件名保持一致， 例如index.css,如果拆分的更細(xì)致可以使用多個(gè)單詞的拼寫，例如index_ banner.css 等
• 引入順序:在所有公共樣式后面
• 注意:使用單獨(dú)樣式文件去層疊前面公共樣式時(shí)，需要注意選擇器權(quán)重

整個(gè)css分層引入的順序

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
• 注意:為了避免更改公共的版心樣式，/ 需要重新添加一個(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)的兩部分
• 注意:實(shí)際網(wǎng)頁中，部分表單效果通常使用其他標(biāo)簽+ css樣式的效果進(jìn)行模擬，比如按鈕、下拉菜單等

search 區(qū)域

• search :搜索框部分。
• 布局類型:通欄背景，內(nèi)部包含居中的主要內(nèi)容
• 搜索框區(qū)域表單:需要添加/標(biāo)簽保證數(shù)據(jù)能夠提交數(shù)據(jù)庫
• 補(bǔ)充:文本框/標(biāo)簽可以通過一個(gè)placeholder屬性，設(shè)置默認(rèn)提示文本，點(diǎn)擊文本框輸入文字后，placeholder 屬性的內(nèi)容會(huì)自動(dòng)消失

content區(qū)域

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

補(bǔ)充：box-shadow

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

多余文字顯示成...省略號(hào)

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

• 首頁制作完畢后 ，分析與其他頁面的公共之處，按照模塊進(jìn)行拆分復(fù)制選擇
• 方法：直接復(fù)制index.html文件，刪除不需要的結(jié)構(gòu)，保留公司頁需要的公共結(jié)構(gòu)部分，同時(shí)刪除不需要的css文件引入的/標(biāo)簽，保留需要的公共樣式文件
• 注意：記得更改nav導(dǎo)航中當(dāng)前選中頁的class
• 公共結(jié)構(gòu)搭建完畢后，可以繼續(xù)書寫公司頁面獨(dú)有的結(jié)構(gòu)和樣式