重學前端之PC端靜態(tài)網(wǎng)頁應用開發(fā)
時間：2023-09-06 20:12:01 | 來源：網(wǎng)站運營
時間：2023-09-06 20:12:01 來源：網(wǎng)站運營
重學前端之PC端靜態(tài)網(wǎng)頁應用開發(fā)：前端學習路徑及基礎學習教程目錄
1、網(wǎng)頁項目開發(fā)流程需求分析
對要開發(fā)的產品進行定位，比如產品類型、產品功能、面向的客戶群、達到的目的等。
整體規(guī)劃
根據(jù)需求分析的結論，確定網(wǎng)站中要展示的內容、層次、展示形式等，然后給出對應內容的文案。
界面設計
由設計師根據(jù)整體規(guī)劃的結果，將網(wǎng)站的各個頁面進行設計，最終給出設計圖、顏色、數(shù)據(jù)信息等。
前端程序設計
前端開發(fā)人員將根據(jù)得到的設計圖，進行代碼的編寫，實現(xiàn)網(wǎng)頁的界面、功能。
前后端系統(tǒng)整合
后端開發(fā)人員進行數(shù)據(jù)庫設計 ，將程序功能與界面進行整合，前后端配合進行功能調試。
測試驗收
項目經理及相關測試人員，根據(jù)項目前期策劃為指導，對產品進行測試驗收，測試產品的交互效果、功能實現(xiàn)效果等。
2、頁面開發(fā)的常見概念及布局流程版心
閱讀報紙時我們會發(fā)現(xiàn)，雖然其中內容很多很豐富，但是經過合理的排版布局，版面整體依然清晰、易讀。
同樣，在制作網(wǎng)頁過程中，如果要讓頁面結構清晰、有條理，也需要對網(wǎng)頁內容進行“排版”。
版心：是指網(wǎng)頁中主要內容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，從而讓用戶的視線更集中。
常見的版心寬度值包括960px，980px，1000px，1200px等。
制作方法：使用標準流中的margin居中方法。
頁面布局流程
為了提高網(wǎng)頁制作的效率，布局時通常要遵守一定的布局流程，具體如下：
1、確定頁面的版心（可視區(qū)域）
2、分析頁面中的行模塊，以及每個行模塊中的列模塊。
3、制作HTML頁面，CSS樣式。
4、CSS初始化，然后運用盒子模型的原理，經過DIV+CSS布局來制作網(wǎng)頁的各個模塊。
幾種常見的布局類型
一列固定寬度且居中
兩列左窄右寬型
通欄平均分布型
一個網(wǎng)頁中可能以上幾種布局類型都有。
3、項目實戰(zhàn)-head內部配置文件結構
網(wǎng)站中會包含多個.html文件和.css文件以及圖片等多媒體文件，我們需要使用不同的文件夾分類進行管理。
文件夾最基本的結構包括：
<head>的配置
<title>網(wǎng)頁標題</title>
標簽頁icon圖標
大部分網(wǎng)站在標簽頁標題位置會添加網(wǎng)站的icon圖標。
圖標的文件名要求以favicon.ico命名，文件需要與index.html文件同級存儲。
使用方法，通過<link>標簽進行引用，設置的屬性包括：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
CSS分級引入
CSS文件設置需要根據(jù)功能進行分層管理：目的是為了提取出多個頁面公共的部分，提供多個HTML同時引用。公共的部分也可以劃分范圍，有的是所有網(wǎng)頁能用的，有的是某幾個網(wǎng)頁公共的部分。
CSS常見的分層組織：清除默認樣式的CSS，網(wǎng)站的公共樣式CSS，每個頁面自己獨有的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后面，單獨的樣式文件前面。
頁面獨有樣式
使用范圍：單獨的一個HTML頁面
制作方法：找到頁面獨有的而其他頁面沒有的樣式，單獨書寫在一個.css文件中，只有對應的HTML文件能夠引用。
命名習慣：一般文件名與HTML的文件名保持一致，例如index.css，如果拆分的更細致可以使用多個單詞的拼寫，例如index_banner.css等。
引入順序：在所有公共樣式后面。
注意：使用單獨樣式文件去層疊前面公共樣式時，需要注意選擇器權重。
整個CSS分層引入的順序
<link rel="stylesheet" href="css/reset.css" type="text/css"><link rel="stylesheet" href="css/common.css" type="text/css"><link rel="stylesheet" href="css/index.css" type="text/css">4、項目實戰(zhàn)-base.css首頁index.html結構布局
header區(qū)域
header：網(wǎng)頁頂部結構常用命名，通常包含logo、導航nav等內容。
布局類型：通欄背景，內部包含版心居中的主要內容，內容包含左、右浮動的兩部分。
整體結構：100%的div>版心的div
注意：為了避免更改公共的版心樣式，<div>需要重新添加一個class屬性值。
logo：使用h1>a結構，可以適當添加SEO搜索的關鍵字。
nav導航：常用ul>li>a列表結構搭建。
5、項目實戰(zhàn)-header整體布局6、項目實戰(zhàn)-logo和選擇城市7、項目實戰(zhàn)-導航nav8、項目實戰(zhàn)-導航右側9、項目實戰(zhàn)-login-banner大結構login-banner區(qū)域
login：登錄
布局類型：通欄背景，內部包含版心居中的主要內容，內容包含左、右浮動的兩部分。
注意：實際網(wǎng)頁中，部分表單效果通常使用其他標簽+css樣式的效果進行模擬，比如按鈕、下拉菜單等。
10、項目實戰(zhàn)-login-form部分一11、項目實戰(zhàn)-login-form部分二12、項目實戰(zhàn)-login-form下拉菜單13、項目實戰(zhàn)-search區(qū)域search：搜索框部分
布局類型：通欄背景，內部包含居中的主要內容 。
搜索框區(qū)域表單：需要添加<form>標簽，保證數(shù)據(jù)能夠提交數(shù)據(jù)庫。
補充：文本框<input>標簽可以通過一個plackholder屬性，設置默認提示文本，點擊文本框輸入文字后，plackholder屬性的內容會自動消失。
14、項目實戰(zhàn)-content區(qū)域content：網(wǎng)頁的主要內容區(qū)域，用于展示更多的產品、信息等。
布局類型：通欄，底部設置邊框，內容為版心居中。
content內部包括四個部分：
.main主要區(qū)域列表焦點圖，
.hot-recruit熱門職位，
.hot_company熱門公司，
.hot_links熱門鏈接
15、項目實戰(zhàn)-main區(qū)域大結構布局類型：左窄右寬的兩列布局，通過浮動實現(xiàn)
aside：側邊欄常用命名，整體為無序列表結構，表現(xiàn)為一種特殊的下拉菜單效果，鼠標移上<li>后顯示內部的子級元素。下拉菜單的列表，可以使用定義列表結構搭建。
注意：側邊欄aside這種結構中的數(shù)據(jù)是動態(tài)變化的，前端做好HTML結構和CSS樣式，讓HTML結構足夠清楚，方便后期開發(fā)。
焦點圖部分為滾動輪播圖效果，點擊滾動效果后期JS配合完成。
16、項目實戰(zhàn)-aside側邊欄部分17、項目實戰(zhàn)-banner焦點圖部分18、項目實戰(zhàn)-熱門職位選項卡1熱門職位部分是一種tab選項卡結構，并且與后面的熱門公司和熱門鏈接有類似的結構和樣式，需要做好公共樣式，經過公共類名設置CSS，熱門職位獨有的樣式需要使用單獨的類名設置，避免影響其他兩個部分。
布局類型：tab欄選項卡結構，整體為上下對齊的版心結構。
標題部分：浮動制作，當前展示的部分標簽使用current的類名進行標記，設置特殊樣式。
詳細內容布局類型：平均分步型，使用浮動制作。
補充：多余文字顯示成……省略號形式，通過三行代碼實現(xiàn)。
19、項目實戰(zhàn)-熱門職位選項卡220、項目實戰(zhàn)-熱門職位列表內容1多余文字顯示成……省略號
.word_cut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}21、項目實戰(zhàn)-熱門職位列表內容222、項目實戰(zhàn)-查看更多按鈕23、項目實戰(zhàn)-快速生成熱門公司部分24、項目實戰(zhàn)-熱門公司列表部分25、項目實戰(zhàn)-熱門鏈接部分26、項目實戰(zhàn)-footer區(qū)域大結構27、項目實戰(zhàn)-其他登錄方式28、項目實戰(zhàn)-二維碼定位效果29、項目實戰(zhàn)-service部分30、項目實戰(zhàn)-copyright部分31、項目實戰(zhàn)-返回頂部32、項目實戰(zhàn)-快速搭建公共頁面首頁制作完畢后，分析與其他頁面的共同之處，按照模塊進行拆分復制選擇。
方法：直接復制index.html文件，刪除不需要的結構，保留公司頁需要的公共結構部分。同時刪除不需要的CSS文件引入的<link>標簽，保留需要的公共樣式文件。
在線咨詢
