Ⅰ 網頁設計和網站開發用到的技術有哪些
A—AJAX
AJAX全稱為「AsynchronousJavaScriptandXML」(非同步JavaScript和XML),是一種創建互動式網頁應用的網頁開發技術。根據Ajax提出者JesseJamesGarrett建議,AJAX:
使用XHTML+CSS來表示信息;
使用JavaScript操作DOM(DocumentObjectModel)進行動態顯示及交互;
使用XML和XSLT進行數據交換及相關操作;
使用XMLposite)的技術正在出現,如AFLAX。
B—Browser
網頁瀏覽器是個顯示網頁伺服器或文件系統內的文件,並讓用戶與此些文件交互的一種軟體。它用來顯示在萬維網或區域網
等內的文字、圖像及其他信息。這些文字或圖像,可以是連接其他網址的超連結,用戶可迅速及輕易地瀏覽各種信息。大部分網頁為HTML
格式,有些網頁需特定瀏覽器才能正確顯示。個人電腦上常見的網頁瀏覽器按照2010年1月的市場佔有率依次是微軟的Internet
Explorer、Mozilla的Firefox、Google的GoogleChrome、蘋果公司的Safari和
Opera軟體公司的Opera。瀏覽器是最經常使用到的客戶端程序。Web開發人員應該確保其程序在各個主流瀏覽器中都能正常工作。
C—CSS
層疊樣式禪褲表,又稱:串樣式列表,英文:CascadingStyleSheets,簡寫為CSS,由W3C
定義和維護的標准,一種用來為結構化文檔(如HTML文檔或XML應用)添加樣式(字體、間距和顏色等)的計算機語言。目前最新版本是
CSS2.1,為W3C的候選推薦標准。下一版本CSS3仍然在開發過程中。
D—DOM
文檔對象模型(DocumentObjectModel,簡稱DOM),是W3C組織推薦的處理可擴展置標語言
的標准編程介面。DocumentObjectModel的歷史可以追溯至1990年代後期微軟與Netscape的「瀏覽器大戰
」(browserwars),雙方為了在JavaScript與JScript
一決生死,於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物,計有VBScript、ActiveX、以及微軟自家的DHTML
格式等,使不少網頁使用非微軟平台及瀏覽器無法正常顯示。消襲雹DOM即是當時蘊釀出來的傑作。
E—Events
事件是可以被控制項識別的操作,如按下確定按鈕,選擇某個單選按鈕或者復選框。每一種控制項有自己可以識別的事件,如窗體的載入、單擊、雙擊等事件,編輯框(文本框拿帆)的文本改變事,等等,現代的Web應用程序很大程度上依靠事件驅動。
事件有系統事件和用戶事件。系統事件由系統激發,如時間每隔24小時,銀行儲戶的存款日期增加一天。用戶事件由用戶激發,如用戶點擊按鈕,在文本框中顯示特定的文本。事件驅動控制項執行某項功能。觸發事件的對象稱為事件發送者;接收事件的對象稱為事件接收者。
使用事件機制可以實現:當類對象的某個狀態發生變化時,系統將會通過某種途徑調用類中的有關處理這個事件的方法或者觸發控制項事件的對象就會調用該控制項所有已注冊的事件處理程序等。
F—Firebug
Firebug是網頁瀏覽器MozillaFirefox
的一個擴展,是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何網站的CSS、HTML、DOM、與JavaScript
代碼。Firebug也有提供其他網頁開發工具,例如Yahoo!的網頁速度優化建議工具YSlow。Firebug是哈維(Joe
Hewitt)撰寫的。他是最初Firefox創始者之一。
G—Grid
網格,也稱柵格,不過從定義上說,柵格更為准確些。網上找個一個對網頁柵格系統比較恰當的定義
:以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。網頁柵格系統是從平面柵格系統中發展而來。對於網頁設計來說,柵格系統的使用,不僅可以讓
網頁的信息呈現更加美觀易讀,更具可用性。而且,對於前端開發來說,網頁將更加的靈活與規范。如果有很多CSS框架支持柵格功能,可參考文章《
介紹27款經典的CSS框架》。
H—HTML
超文本置標語言(英文:HyperTextMarkupLanguage,HTML)是為「網頁創建和其它可在網頁瀏覽器
中看到的信息」設計的一種置標語言。HTML被用來結構化信息——例如標題、段落和列表等等,也可用來在一定程度上描述文檔的外觀和語義。由
蒂姆·伯納斯-李給出原始定義,由IETF用簡化的SGML(標准通用置標語言)語法進行進一步發展的HTML,後來成為國際標准,由
萬維網聯盟(W3C)維護。
最新版本是HTML5它是HTML下一個的主要修訂版本,現在仍處於發展階段。目標是取代1999年所定訂的HTML4.01和
XHTML1.0標准,以期能在互聯網應用迅速發展的時候,使網路標准達到符合當代的網路需求。廣義論及HTML5時,實際指的是包括HTML、
CSS和JavaScript在內的一套技術組合。
I—IE
WindowsInternetExplorer(舊稱MicrosoftInternetExplorer,簡稱
InternetExplorer,縮寫IE),是微軟公司推出的一款網頁瀏覽器
。截至2010年9月止,統計的數據顯示InternetExplorer的市場佔有率
高達59.65%。雖然它依然是使用最廣泛的網頁瀏覽器,但與2003年最高峰時相比,市場佔有率相差超過30%。
InternetExplorer對一些標准化技術都有一定程度上的支持,但亦有很多運行上的差距和兼容性的故障
,這導致技術開發者的批評日益增加。批評增加的情況,在很大程度上是歸因於Internet
Explorer的競爭對手相對地已提供完全的技術支持,標准規格(Standards-compliant)的應用亦越來越廣泛起來。因為
InternetExplorer在全球廣為應用,網路開發者們在尋求跨平台的代碼時常常會發現Internet
Explorer的漏洞、私有的功能集合和對標准支持的不完善。
2011年3月14日發布的InternetExplorer
9瀏覽器大幅提高對CSS3和HTML5等W3C規范的支持程度,這個版本也是Internet
Explorer瀏覽器第一個採用GPU加速的版本,正式版於Acid3測試中獲得95/100分,相比以往版本有很大進步。可以認為,從
InternetExplorer9開始,InternetExplorer瀏覽器對W3C規范的支持將不再是問題。
J—JavaScript
JavaScript是一種廣泛用於客戶端Web開發的腳本語言
,常用來給HTML網頁添加動態功能,比如響應用戶的各種操作。它最初由網景公司的BrendanEich
設計,是一種動態、弱類型、基於原型的語言,內置支持類。JavaScript是Sun公司的注冊商標。Ecma國際
以JavaScript為基礎制定了ECMAScript
標准。JavaScript也可以用於其他場合,如伺服器端編程。完整的JavaScript實現包含三個部分:ECMAScript,
文檔對象模型,位元組順序記號。
Netscape公司在最初將其腳本語言命名為LiveScript來Netscape在與Sun合作之後將其改名為JavaScript。
JavaScript最初受Java
啟發而開始設計的,目的之一就是「看上去像Java」,因此語法上有類似之處,一些名稱和命名規范也借自Java。但JavaScript的主要設計原則
源自Self和Scheme
.JavaScript與Java名稱上的近似,是當時網景為了營銷考慮與Sun公司達成協議的結果。為了取得技術優勢,微軟推出了JScript
來迎戰JavaScript的腳本語言。為了互用性,Ecma國際(前身為歐洲計算機製造商協會
)創建了ECMA-262標准(ECMAScript)。現在兩者都屬於ECMAScript的實現。盡管JavaScript作為給非程序人員的
腳本語言,而非作為給程序人員的編程語言來推廣和宣傳,但是JavaScript具有非常豐富的特性。
K—KeywordOptimization
關鍵詞優化,也叫搜索引擎優化(SearchEngineOptimization,簡稱SEO)是一種利用搜索引擎
的搜索規則來提高目的網站在有關搜索引擎內的排名的方式。由於不少研究發現,搜索引擎的用戶往往只會留意搜索結果最前面的幾個條目,所以不少網站
都希望通過各種形式來影響搜索引擎的排序。當中尤以各種依靠廣告維生的網站為甚。
所謂「針對搜索引擎作優化的處理」,是指為了要讓網站更容易被搜索引擎接受。搜索引擎會將網站彼此間的內容做一些相關性的數據比對,然後再由瀏覽器將這些內容以最快速且接近最完整的方式,體現給搜索者。
搜索引擎優化對於任何一家網站來說,要想在網站推廣中取得成功,搜索引擎優化都是至為關鍵的一項任務。同時,隨著搜索引擎不斷變換它們的排名演算法規
則,每次演算法上的改變都會讓一些排名很好的網站在一夜之間名落孫山,而失去排名的直接後果就是失去了網站固有的可觀訪問量。所以每次搜索引擎演算法的改變都
會在網站之中引起不小的騷動和焦慮。可以說,搜索引擎優化是一個愈來愈復雜的任務。
L—Less
Less
最早是一個ruby的gem,讓CSS具有動態語言的特性,這些特性包括變數,操作符,嵌套規則。其實Less真正的作用是將使用高級特性的CSS轉換成
標準的CSS。這些都是在Web客戶端發起請求時通過mandlineinterface),或者產生圖形用戶界面(GUI)程序。PHP最早由Rasmus
Lerdorf在1995年發明,而現在PHP的標准由PHPGroup和開放源代碼社區維護。PHP以PHP
License作為許可協議,不過因為這個協議限制了PHP名稱的使用,所以和開放源代碼許可協議GPL不兼容。
PHP的應用范圍相當廣泛,尤其是在網頁程序的開發上。一般來說PHP大多運行在網頁伺服器上,通過運行PHP代碼來產生用戶瀏覽的網頁。PHP可
以在多數的伺服器和操作系統上運行,而且使用PHP完全是免費的。根據2007年4月的統計數據,PHP已經被安裝在超過2000萬個網站和100萬台服
務器上。
Q—Query
查詢,有很多種意思。例如查詢語言用來和存儲數據的擴展系統交互,一個很好的例子就是SQL用來操作關系資料庫。另一種意思是,一個查詢字元串,作為URL的一部分用於Web應用程序中傳遞數據,查詢字元串的格式一般是鍵值對形式。
R—RegularExpressions
正則表達式(英語:RegularExpression、regex或regexp,縮寫為RE),也譯為正規表示法、常規表示法
,在計算機科學中,是指一個用來描述或者匹配一系列符合某個句法規則的字元串的單個字元串。在很多文本編輯器
或其他工具里,正則表達式通常被用來檢索和/或替換那些符合某個模式的文本內容。許多程序設計語言都支持利用正則表達式進行字元串操作。例如,在
Perl中就內建了一個功能強大的正則表達式引擎。正則表達式這個概念最初是由Unix中的工具軟體(例如sed和grep)普及開的。
S—SourceControl
源代碼管理,也稱版本控制,是一種軟體工程技巧,藉此能在軟體開發的過程中,確保由不同人所編輯的同一程式檔案都得到同步。軟體設計師
常會利用版本控制來追蹤、維護源碼、文件以及設定檔等等的更動,並且提供控制這些更動控制權的程序。在最簡單的情況下,軟體設計師
可以自己保留一個程式的許多不同版本,並且為它們做適當的編號。這種簡單的方法已被用在很多大型的軟體專案中。這是一個可以達到目的的方法,但不夠有效
率。除了得同時維護很多幾乎一樣的程式碼備份外;而且極度依賴軟體設計師的自我修養與開發紀律,但這卻常是導致錯誤發生的原因。
有時候,一個程式同時存有兩個以上的版本也有其必要性,例如:在一個為了部署的版本中程式錯誤
已經被修正、但沒有加入新功能;在另一個開發版本則有新的功能正在開發、也有新的錯誤待解決,這使得同時間需要不同的版本並修改。此外,為了找出只存在於
某一特定版本中的程式錯誤、或找出程式錯誤出現的版本,軟體除錯者也必須藉由比對不同版本的程式碼以找出問題的位置。
T—TDD
測試驅動開發(Test-drivendevelopment)是現代計算機軟體開發方法的一種。利用測試來驅動軟體
程序的設計和實現。測試驅動開始流行於20世紀90年代。測試驅動開發是極限編程
中倡導的程序開發方法,方法主要是先寫測試程序,然後再編碼使其通過測試。測試驅動開發的目的是取得快速反饋並使用「illustratethe
mainline」方法來構建程序。
測試驅動開發的比喻。開發可以從兩個方面去看待:實現的功能和質量。測試驅動開發更像兩頂帽子思考法的開發方式,先戴上實現功能的帽子,在測試的輔
助下,快速實現正確的功能;再戴上重構
的帽子,在測試的保護下,通過去除冗餘和重復的代碼,提高代碼重用性,實現對質量的改進。可見測試在測試驅動開發中確實屬於核心地位,貫穿了開發的始終。
U—UnitTesting
單元測試(又稱為模塊測試)是針對程序模塊(軟體設計的最小單位)來進行正確性檢驗的測試工作。程序單元是應用的最小可測試部件。在
過程化編程中,一個單元就是單個程序、函數、過程等;對於面向對象編程,最小單元就是方法,包括基類(超類)、抽象類、或者派生類(子類)中的方法。
通常來說,程序員每修改一次程序就會進行最少一次單元測試,在編寫程序的過程中前後很可能要進行多次單元測試,以證實程序達到軟體規格書(
en:Specification)要求的工作目標,沒有臭蟲;雖然單元測試不是什麼必須的,但也不壞,這牽涉到項目管理的政策決定。
V—VIM
Vim是從vi發展出來的一個文本編輯器。代碼補完、編譯及錯誤跳轉等方便編程的功能特別豐富,在程序員中被廣泛使用。和Emacs
並列成為類Unix系統用戶最喜歡的編輯器。Vim的第一個版本由BramMoolenaar在1991年發布。最初的簡稱是Vi
IMitation,隨著功能的不斷增加,正式名稱改成了ViIMproved。現在是在開放源代碼方式下發行的自由軟體。
W—WordPress
WordPress是一種使用PHP語言開發的博客平台,用戶可以在支持PHP和MySQL資料庫
的伺服器上架設自己的網志。也可以把WordPress當作一個內容管理系統(CMS)來使用。WordPress是一個免費的開源
項目,在GNU通用公共許可證
下授權發布。目前最新版本為2011年2月24日發布的3.0.5官方簡體中文版,另外還有包括英文在內的多種語言可選。
X—XSS
跨網站指令碼(Cross-sitescripting,通常簡稱為XSS)是一種網站應用程式的安全漏洞攻擊,允許惡意使用者將程式碼注入到網頁上,其他使用者在觀看網頁時就會受到影響。這類攻擊通常包含了HTML以及使用者端腳本語言。
Y—YUI
Yahoo!UILibrary(YUI)是一個開放源代碼的JavaScript函數庫,為了能建立一個高互動的網頁,它採用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。
Z—Zindex
Z-Index
是CSS屬性,設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。該屬性設置一個定位元素沿z軸的位置,z軸定義為垂直延伸到顯示區的軸。如果為正數,則離用戶更近,為負數則表示離用戶更遠。
Ⅱ 網頁製作都包括哪些技術
以下是網頁設計需要學習的知識希望能幫助到你
第一階段(美學設計與軟體技能)
一、設計預科
1、商務辦公:windows、word、excel、ppt辦公應用;辦公軟體在專業中的應用
2、美術設計基礎:設計素描、水粉、速寫的原理及實踐,投影、視圖、透視,燈光表現,寫生
3、美術設計提高:設計素描、水粉提高課程、光和影的寫實手法、審美觀念的提高、色彩搭配的提高,配色原理的提高。
4、手繪圖標:二維剪影圖標、三維寫實圖標案例實訓,了解創意在設計中的具體運用;理解創意思維的形態置換原理;掌握將創意思維轉化為圖形樣式的能力
5、階段考核:完成描素、色彩圖各一張
二、設計軟體
1、Photoshop:Adobe公司大師級圖像軟體入門講解。掌握該軟體在平面廣告、網頁設計、UI設計以及室內設計等專業中的相關操作。
2、Illustrator:Adobe公司專業級矢量軟體入門講解。掌握該軟體在創意廣告設計、印刷出版與web網路創作、多媒體和UI圖標界面設計的相關操作。
3、Dreamweaver:講解DW的人性化功能以及在頁面架構和前端開發應用領域的使用技巧,HTML基礎應用,快速入門,CSS樣式表的應用,模板布局的使用技巧,如何管理網站並上傳。
4、Fireworks:講解FW在網頁切片、圖層、幀、gif動畫、畫布設置中的應用以及配合其他軟體進行使用
第二階段(WEB界面與整站項目設計)
一、三大構成
1、平面構成與設計:點的構成形式、線的構成形式、面的構成形式,訓練各種熟練的構成技巧和表現方法,培養審美觀及美的修養岩鏈和感覺,提高創作活動和造型能力-活躍構思。
2、色彩構成與設計:學習色彩與視覺的原理、三要素及色彩對比、色彩推移、綜合對比及色調變化、表現手法、色彩視覺心理與性格的對比;提高綜合審美能力。
3、立體構成與設計:立體構成的概念特徵及作用、材料要素及加工工具、視覺效果和心理感受、立體構成的設計應用、立體構成與建築設計、立體構成與工業產品設計等方面應用
二、WEB界面設計
元素設計
1、網頁Banner排版與設計
1)Banner版面設計的規則與規范,版面的排版。色相的選擇,色調的調整。讓banner製作更速成化。
2)Banner廣告強化設計,主要講解banner製作標准及要求、純文字banner實例、金融業banner實例、快銷品banner實例、文字橫排/豎排/斜排的風格差異、服裝類banner實例、化妝品banner實例、數碼類banner實例、配飾類banner實例
2、網頁元素
及規范:頁面設計基本流程與設計規范的概念性講解,重點了解WEB界面設計規范及頁面元素;網頁配色技巧、色彩與構圖的概念及技巧;網頁導航與按鈕設計
三、WEB整站設計實亮判訓
1、網站設計流程
與策劃:網站設計流程,網站設計理念創新,網頁結構圖與原型圖繪制等;如何從零開始策劃一個網站,包括主題定位、欄目規劃等,如何去策劃盈利模式。
2、電商平台類
網站項目實訓:商業案例實訓如京東、小米等平台,重點學習網站整體架構設計、欄目規劃、頁面製作及系列產品總體界面風格設計,布局技巧及細節設計技巧,各類網頁交互設計應用、響應式設計應用的展示
3、企業類
網站項目實訓:如蘋果、騰訊企業類平台,重點學習頁面主題設計如TOP部分設計,BANNER設計,產品頁設計敬棗改,新聞頁設計,首頁設計,類各設計技巧如網頁的尺寸、頁面的留白、圖層與圖像的關系、網頁導航設計、字體的排版設計、廣告條(banner)製作、正文內容的詳細設計
4、分類網站項目實訓及階段考核:教師指導你完成階段設計作品,以備應聘時使用;從立案到素材、材料收集整理,再到風格定位、欄目規劃,獨立完成分類及個人網站設計,其中需容入不同的分類信息、作品等;
第三階段(WEB前端布局與交互開發)
一、WEB前端HTML5/CSS3
布局與樣式
1、HTML標簽:HTMl5簡介與入門、文本、圖像、鏈接、表格、列表、智能表單、結構化標簽等內容
隨堂項目:
1.文章頁面的結構化布局。包括文章標題、正文、圖片、頁面背景、作者、發表時間等信息
2.利用table標簽課程表的實現
3.利用form、input表單標簽實現簡單登錄注冊頁面
2、CSS基礎語法
常見樣式:CSS3簡介、css3引入方式、常見樣式、文字與文本、顏色、背景色、精靈圖片等
隨堂項目:首頁導航欄的製作
3、CSS選擇器:css選擇器:標簽選擇器、類選擇器、ID選擇器、後代選擇器、群組選擇器、偽類選擇器、結構化偽類選擇器、屬性選擇器、兄弟選擇器、子元素選擇器
4、CSS盒子模型:盒模型簡介、盒模型組成部分、盒模型常用場景、彈性盒模型
隨堂項目:導航欄的製作,利用盒子模型拉開間距、hover效果添加後的內邊距設定
5、浮動與定位:浮動:float、clear、恢復塌陷的父容器高度。定位:一動不動的(static),跟著別人跑的(absolute),以自己為中心的(relative),固定的(fixed)
隨堂項目:導航欄左右布局的定位、二級菜單的實現、回到頂部的按鈕
6、響應式布局與頁面優化處理:移動頁面與PC端頁面布局時候需要注意點、媒體查詢在響應式布局中的應用、響應式布局中彈性盒模型的設計技巧、各種瀏覽器對於CSS樣式的支持情況、頁面優化需要注意的地方、解決跨瀏覽器兼容性問題
隨堂項目:移動端的用戶注冊頁面、PC端的用戶注冊頁面。
7、靜態頁面切圖項目實戰:
1)企業站實訓:1.首頁導航、二級菜單2.banner輪播圖3.產品展示4.成功案例5.新聞中心6.聯系方式7.友情鏈接8.版權申明9.總結
2)商城實訓:1.首頁(頭部導航、分類搜索、秒殺產品、猜你喜歡、推薦商品)2.用戶中心(訂單、個人信息、收貨地址、賬單)3.商品詳情頁(展示圖、描述信息、促銷價格、細節展示、產品詳情)4.登錄&注冊頁面
二、WEB前端JavaScript交互
1、核心語法:
1)JavaScript的前世今生、javascript語法、介紹html5認識JavaScript、javascript中的對象、數組、變數、.流程式控制制(ifelseswitchcasewhilefor)
2)隨堂項目:九九乘法表、閏年計算、誰是高富帥(ifelse..Switchcase)
2、BOM與DOM操作:DOM操作:讓一成不變的網頁動起來;BOM操作:瀏覽器也有話要說
隨堂項目:網頁時鍾的製作、回到頂部
3、事件編程:
1)javascript的事件機制:讓網頁回應你的問候;常見的JS事件:單擊、雙擊、移動、懸停、焦點的獲取與失去、瀏覽器的關閉與載入
2)隨堂項目:1.選不中的按鈕的實現2.做一個計算器怎樣3.商品圖片放大鏡效果
4、正則表達式:
1)正則表達式的語法、利用正則表達式做字元匹配、面向對象編程:脫離過程走向對象
2)
隨堂項目:郵箱格式的驗證、編寫一個獲取常見輸入數據的格式驗證類。
5、面向對象編程
1)面向對象編程簡介、對象的創建、繼承的實現、原型與原型鏈。
2)隨堂項目:仿windows屏保氣泡
6、JQuery
1)JQuery基礎語法、JQuery選擇器、JQuery的BOM與DOM操作、事件編程、常見動畫與自定義動畫編程、常見Jquery插件使用。
2)隨堂項目:打地鼠游戲、抽獎輪盤製作
7、JQuery
項目實戰:圖片輪播、利用jQuery製作拼圖、貪吃蛇等項目實訓
8、Ajax技術
1)Ajax技術介紹、json格式與XML格式詳解、Ajax的post與get兩種提交方式詳解、伺服器端的數據反饋機制說明、如何利用jQuery實現Ajax提交、跨域訪問的實現
2)
隨堂項目:用戶注冊、登錄的Ajax無刷新實現、淘寶收貨地址中省市級聯的實現
8、Bootstrap:bootstrap介紹、bootstrap的柵格系統、CSS樣式、組件、bootstrap的javascript插件
隨堂項目:利用bootstrap構建移動商城首頁、用戶注冊、登錄等頁面
9、ECMAScript6
:1.webpack介紹2.webpackg管用配置3.模塊處理mole6.3種載入器loaders的使用4.編譯器babel5.插件plugins6.熱更新次操作7.打項目最終包
隨堂練習:新前端開發環境搭建