PC端靜態(tài)網(wǎng)頁開發(fā)及項目，注意流程以及步驟

時間：2023-07-16 17:36:01 | 來源：網(wǎng)站運營

時間：2023-07-16 17:36:01 來源：網(wǎng)站運營

PC端靜態(tài)網(wǎng)頁開發(fā)及項目，注意流程以及步驟：

開發(fā)流程

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

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

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

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

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

測試驗收：項目經(jīng)理和相關(guān)測試人員根據(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)部配置

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

文件基本結(jié)構(gòu)包括：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)頁頂部結(jié)構(gòu)常用命名，通常包括logo，導航nav等內(nèi)容。

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

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

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

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

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

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

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

banner：焦點圖部分為滾動輪播圖效果，點擊滾動特效等待學完JavaScript后制作。

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

補充：box-shadow

CSS3新增的盒子屬性box-shadow

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

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

.hot_recruit部分

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

布局類型：tab欄選項卡結(jié)構(gòu)，整體為上下對齊的版心結(jié)構(gòu)。

標題部分：浮動設置，當前展示的部分標簽使用current的類名進行標記，設置特殊樣式。

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

補充：多余文字顯示成...省略號形式，通過三行代碼實現(xiàn)。

補充：多余文字顯示成...省略號。

.word_cut{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

<!-- 文字溢出以小圓點形式 -->

}復制代碼

footer區(qū)域

footer:頁面底部的常用名

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

其他登錄方式:左浮動，注意其中鼠標移上顯示定位元素效果。

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

backtop區(qū)域

返回頂部的設置。通常使用a標簽進行結(jié)構(gòu)搭建。

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

動畫效果：后期用javascript實現(xiàn)。

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

首先制作完畢之后，分析其他頁面的共同之處，按照模塊進行拆分復制選擇。

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

注意：記得更改nav導航中當前選中頁的class.

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

作者：小輝同學的筆記本 鏈接：https://juejin.im/post/6894045433220464654

來源：掘金 如有侵權(quán)聯(lián)系刪除




最新Java教程全套




第1階段 ：Java基礎

1.認知基礎課程2. java入門階段3. 面向?qū)ο缶幊?. 飛機小項目5. 面向?qū)ο蠛蛿?shù)組6. 常用類7. 異常機制8. 容器和數(shù)據(jù)結(jié)構(gòu)9. IO流技術(shù)10. 多線程11. 網(wǎng)絡編程12. 手寫服務器13. 注解和反射14. GOF23種設計模式15. 正則表達式16. JDBC數(shù)據(jù)庫操作17. 手寫SORM框架18. JAVA10新特性19.數(shù)據(jù)結(jié)構(gòu)和算法20. JVM虛擬機講解21. XML技術(shù)解析

第2階段：數(shù)據(jù)庫開發(fā)全套課程

1.Oracle和SQL語言2.Mysql快速使用3.PowerDesigner使用4.JDBC數(shù)據(jù)庫5.Mysql優(yōu)化6.oracle深度講解

第3階段：網(wǎng)頁開發(fā)和設計

1.HTML基礎2.CSS基礎3.JavaScript編程4.jQuery5.easyUI

第4階段：Servlet和JSP實戰(zhàn)深入課程

1.Servlet入門和Tomcat2.request和response對象3.轉(zhuǎn)發(fā)和重定向_Cookie4.session_Context對象5.JSP6.用戶管理系統(tǒng)7.Ajax技術(shù)8.EL和JSTL標簽庫9.過濾器10.監(jiān)聽器

第5階段：高級框架階段

1.Mybatis2.Spring3.Spring MVC4.SSM框架整合5.RBAC權(quán)限控制項目6.Hibernate37.Hibernate48.jFinal9.Shiro安全框架10.Solr搜索框架11.Struts212.Nginx服務器13.Redis緩存技術(shù)14.JVM虛擬機優(yōu)化15.Zookeeper

第6階段：微服務架構(gòu)階段

1.Spring Boot2.Spring Data3.Spring Cloud

第7階段：互聯(lián)網(wǎng)架構(gòu)階段

1.Linux系統(tǒng)2.Maven技術(shù)3.Git4.SVN5.高并發(fā)編程6.系統(tǒng)和虛擬機調(diào)優(yōu)7.JAVA編程規(guī)范8.高級網(wǎng)絡編程9.Netty框架10.ActiveMQ消息中間件11.單點登錄SSO12.數(shù)據(jù)庫和SQL優(yōu)化13.數(shù)據(jù)庫集群和高并發(fā)14.Dubbo15.Redis16.VSFTPD+NGINX

第8階段：分布式億級高并發(fā)電商項目

1.基于SOA架構(gòu)介紹2.VSFTPD和Nginx和商品新增3.商品規(guī)格參數(shù)管理4.Jsonp5.CMS模塊6.廣告位數(shù)據(jù)緩存7.SolrJ和SolrCloud8.商品搜索9.商品詳情10.單點登錄11.購物車12.訂單系統(tǒng)13.分庫和分表14.分布式部署

第9階段：畢設項目第1季

1. 電子政務網(wǎng)2. 企業(yè)合同管理系統(tǒng)3. 健康管理系統(tǒng)4. 商品供應管理系統(tǒng)5. 土地檔案管理系統(tǒng)6. 聊天室設計和實現(xiàn)7. 碼頭配套和貨柜管理系統(tǒng)8. 百貨中心供應鏈系統(tǒng)9. 病歷管理系統(tǒng)10. 超市積分管理系統(tǒng)11. 動漫論壇12. 俄羅斯方塊13. 個人博客系統(tǒng)14. 固定資產(chǎn)管理系統(tǒng)15. 影視創(chuàng)作論壇16. 屏幕截圖工具17. 超級瑪麗游戲18. 飛機大戰(zhàn)游戲19. 雷電

第10階段：畢設項目第2季

1. 微博系統(tǒng)2. 寫字板3. 坦克大戰(zhàn)4. 推箱子5. 電腦彩票系統(tǒng)6. 記賬管理系統(tǒng)7. 新聞發(fā)布系統(tǒng)8. 醫(yī)院掛號系統(tǒng)9. 倉庫管理系統(tǒng)10. 停車場管理系統(tǒng)11. 網(wǎng)絡爬蟲12. 酒店管理系統(tǒng)13. 企業(yè)財務管理系統(tǒng)14. 車輛管理系統(tǒng)15. 員工信息管理系統(tǒng)16. 旅游網(wǎng)站17. 搜索引擎18. 進銷存管理系統(tǒng)19. 在線考試系統(tǒng)20. 物流信息網(wǎng)21. 住院管理系統(tǒng)22. 銀行柜員業(yè)務績效系統(tǒng)

“ 全套視頻教程 ”

作者：小輝同學的筆記本 來源：掘金 如有侵權(quán)聯(lián)系刪除