ibb娱乐彩票
上海代寫論文網專業提供代寫畢業論文、代寫本科論文服務
您現在的位置:首頁 > 計算機論文 > 網站設計論文 >
web技術下企業網站前端設計研究
發布時間:2018-06-22

摘要

  Abstract:For the network technology Co., Ltd., the establishment of good management of corporate websites, has become the key to the success of E-commerce applications. Based on the creation of the enterprise Website, through the design process analysis, layout analysis and navigation analysis, make the basic framework of website design. Based on PS, HTML+ Java Script and other technologies to complete the company's homepage design.

  Keyword:front-end technology; HTML; CSS; JavaScript;

  隨著移動互聯網技術的快速發展, 基于Web前端開發的網站技術也日趨完善[1]。然而, 當前已有的企業網站主要有以下缺點:Web網站內容單薄, 更新滯后;結構層次重點失衡, 用戶體驗效果不佳[2];部分網頁制作粗糙, 或過于花哨[3]。為了有效實現企業網站的莊重和設計感, 在以下方面深入設計和研究:在排字方面, 以簡潔大眾化的字體為主[4];在圖像切換效應方面, 基于圖像形式, 通過完整的網站任務, 如復雜的交互、網頁動畫、UI設計、后期維護, 主頁簡單、快速和有效地完成網站提供或用戶需要的服務、功能和目標[5]。

  當前已有的網站建設大多基于Web前端開發, 其中涉及的開發工具如Web Storm, Adobe Dreamweaver, 涉及的應用包括了層疊樣式表 (Cascading Style Sheets, CSS) 規則、Java Script和Jquery庫。基于以上工具和軟件實現某企業網站的設計, 成為基于Web前端開發的研究關鍵。

  首先, 通過使用CSS樣式設置頁面的格式, 實現頁面的內容與表現形式分離。頁面內容存放在HTML文檔中, 而用于定義表現形式的CSS規則存放在另一個文件中或HTML文檔的某一部分, 通常為文件頭部分。將內容與表現形式分離, 不僅可使維護站點的外觀更加容易, 而且還可以使HTML文檔代碼更加簡練, 縮短瀏覽器的加載時間。

  其次, Java Script是在HTML的基礎上, 以實現開發交互式的Web頁面。Java Script的出現使得它可以實現實時、動態和交互式Web頁面和用戶之間的關系。這是Java Script和HTML DOM構成網頁的行為。Java Script程序實際上是一個文本文件文檔, 當使用嵌入在HTML文檔的需求。因此, 可以使用任何文本編輯器軟件開發Java Script程序。Java Script來提高Web頁面的交互性;Java Script可以響應用戶的操作, 提交表單做立即檢查, 不需要浪費時間CGI身份驗證。

  最后, 通過j Query這一Java Scrip庫, 它以寫更少的代碼、做更多的事情為宗旨。j Query是一個快速、簡潔的Java Script庫, 使用戶能夠方便地遍歷HTML Documents、操作文檔對象模型 (Document Object Model, DOM) 、處理事件、實現動畫效果和提供Ajax交互, 此外, j Query兼容CSS3.0及各種瀏覽器。

  1、企業網站框架分析

  設計一個主網頁和6個副網頁, 總網頁主要是給瀏覽者簡單地介紹公司的業務, 美觀形象。副網頁以導航欄關于企業、企業營銷、網站建設、設計服務、人才招募、聯系我們, 深入介紹公司的業務。目前, 國內大型商業網站基本上是多行多列模式布局。例如中央人民政府、中關村在線、淘寶網、騰訊、網易、新浪、搜狐、人民網等網站采用“多行三列模式”。公安部、財政部、阿里巴巴、網上超市1號店、去哪兒網、趕集網等網站采用“多行四列模式”。

  試圖通過“三行模式或三列模式”展開設計, 此模式的特點是把整個頁面水平、垂直分成3個區域, 其中“三行模式”將頁面頭部、主體及頁腳3部分;“三列模式”將頁面分成左、中、右3個部分。

  多行三列模式的CSS定義

多行三列模式的CSS定義

  如圖1所示, 通過CSS規則建立三行三列的基本設計框架。實現網站的基本框架建設, 加入Java Script編寫模塊內容。

圖1 三行三列模式
圖1 三行三列模式

  2、企業網站導航分析

  導航菜單是網站重要的組成部分。導航菜單的設計關系著網站的可用性和用戶體驗, 有吸引力的導航能夠吸引用戶去瀏覽更多的網站內容。設計一個優秀的頁面導航會給網站增色不少。網站菜單表現形式豐富多樣。從菜單層次看, 可以分為一級、二級和多級菜單。從排列方式上看, 可分為水平導航、垂直導航菜單。從技術實現角度上看, 導航菜單通常采用無序列表、表格、超鏈接和樣式表相結合的方法來實現, 也可以使用如CSS3 Menu, j Query等第三方插件技術來實現。借助Java Script設計網站下拉菜單的案例比較多見, 而采用純CSS設計網站下拉菜單需要對樣式進行詳細的定義才能實現。不過要考慮到不同瀏覽器之間的兼容性。編寫下拉菜單的HTML代碼。

  逐步設置樣式, 讓菜單越來越美。

  (1) 定義ul的樣式, 設置邊距和填充均為0px。

  ul{margin:0px;padding:0px;}/*考慮到不同瀏覽器的兼容性, 去除列表項前的符號*/

  (2) 定義列表樣式, 由垂直排列改為水平排列。

  u l l i{heig ht:30 px;w idt h:115px;l i s t-s t yle:none;float:left;

  display:inline;font:0.9em Arial, Heletica, sans-serif;}

  這條規則定義了li標記、行內浮動、行內顯示、寬度、高度、字體等樣式。

  (3) 定義超鏈接樣式。

定義超鏈接樣式

  這一條規則的作用就是加上背景和菜單間的隔離線, 把默認有下劃線藍色的文字變成白色無下劃線。

  (4) 定義嵌套列表項和子菜單超鏈接的規則。

  ul li ul li{height:25px;}

  ul li ul li a{background:#666;line-height:24px;}

  此處第1條是設置子菜單的列表項目高度為25px, 以區別菜單為主菜單列表項;第2條規則是子菜單項中的超鏈接背景改為#666, 并將行高調整為24px。

  (5) 定義鼠標滑過某個菜項時的樣式。

  ul li a:hover{backg rou nd:#666;border-bot tom:1px dashed#FF0000;}

  3、企業網站總體設計

  通過主題設計和版式設計完成總計架構的設計:主題突出, 清楚簡潔, 利用簡單明確的文字和圖片, 對于一些LOGO使用徽標。借助版式編排布局的合理性, 充分利用與平面設計效果。企業網站的總體建設頁面如圖2—3所示。在總體設計方面, 通過Java Script和調用j Query庫實現前端的頁面研發。

圖2 框架
圖2 框架

圖3 設計
圖3 設計

  4、結語

  介紹了Java Script, CSS, j Query以及前端布局的制作做法, 詳細說明了企業網站前端的主要設計流程, 以及網站中的主要功能。目前不足之處在于部分框架的布局的局限, 下一步工作將著重加強前端技術的研究和應用。

  參考文獻
  [1]李幫誠.Web前端開發技術與研究[J].電腦知識與技術, 2016 (29) :47-49.
  [2]王政.Web前端開發技術以及優化研究[J].電腦知識與技術, 2013 (22) :5037-5038.
  [3]電腦培訓學校叢書編委會.網頁設計與網站建設培訓教程[M].北京:機械工業出版社, 2003.
  [4]王聰.社交網絡服務系統Web前端設計與實現[D].成都:電子科技大學, 2012.
  [5]儲久良.Web前端開發技術[M].北京:清華大學出版社, 2013.

對應分類:
版權所有:上海論文網專業權威的論文代寫、論文發表的網站,秉承信譽至上、用戶為首的服務理念,服務好每一位客戶
本站部分論文收集于網絡,如有不慎侵犯您的權益,請您及時致電或寫信告知,我們將第一時間處理,郵箱:shlunwen@163.com
ibb娱乐彩票
<meter id="7xttx"></meter>
  1. <code id="7xttx"><delect id="7xttx"><p id="7xttx"></p></delect></code>
  2. <acronym id="7xttx"></acronym>

    <address id="7xttx"></address>
    揭东县| 明水县| 南江县| 清丰县| 乃东县| 嘉善县| 滨州市| 富阳市| 阿拉尔市| 鄂伦春自治旗| 黑山县| 尼勒克县| 密云县| 叶城县| 南康市| 旬邑县| 岗巴县| 内丘县|