一、網(wǎng)頁制作是什么意思

網(wǎng)頁制作是以前端代碼為主，運用Html、CSS、以及Javascript、jQuery以及交互動畫等前端代碼，將網(wǎng)頁設(shè)計師所設(shè)計出來的設(shè)計稿，按照W3C規(guī)范制作成網(wǎng)頁格式。網(wǎng)頁制作在網(wǎng)站建設(shè)的流程上是在網(wǎng)頁設(shè)計之后，通常是由WEB前端工程師來完成。前端工程師除了要配合網(wǎng)頁設(shè)計師外，還要配合做后端工程師，做好網(wǎng)頁端的數(shù)據(jù)收集處理等工作。

二、網(wǎng)頁制作流程

1、需求溝通

與產(chǎn)品經(jīng)理、網(wǎng)頁設(shè)計師進行需求溝通，深入了解網(wǎng)頁策劃情況、交互過程、設(shè)備適配要求等具體實現(xiàn)要求。

2、源文件切圖

分析網(wǎng)頁設(shè)計源文件，對源文件中需要使用圖片的位置進行文件切割或者圖片制作，形成Html代碼編寫時可調(diào)用的圖片。（注：也可能是網(wǎng)頁設(shè)計師切圖）

3、Html代碼編寫

根據(jù)網(wǎng)頁設(shè)計效果圖及網(wǎng)頁設(shè)計師的頁面標(biāo)注，按照W3C規(guī)范，采用DIV+CSS技術(shù)對網(wǎng)頁設(shè)計圖進行"復(fù)原"，制作成Html文件。

4、交互效果實現(xiàn)

對網(wǎng)頁樣式和js交互效果進行代碼編寫，如添加鼠標(biāo)移上移出效果、頭圖自動播放效果等，讓用戶在使用網(wǎng)頁的過程中具有"交互"感。

5、適配性調(diào)試

對網(wǎng)頁進行硬件及軟件兼容性調(diào)試，使制作好的網(wǎng)頁滿足預(yù)設(shè)的用戶終端(PC、平板、手機)及瀏覽器(IE 9/10/11、Chrome、Firefox、Safari)下正常訪問。

6、反饋與修改

根據(jù)產(chǎn)品經(jīng)理、網(wǎng)頁設(shè)計師以及客戶的反饋，對制作好的網(wǎng)頁(Html)進行調(diào)整，以達(dá)到最優(yōu)的瀏覽以及交互效果。

三、網(wǎng)頁制作的規(guī)范

1、元素類型標(biāo)準(zhǔn)：

(1)、網(wǎng)頁的元素以及文件限定如下：

● 普通頁面：.html；

● 腳本文件：.js；

● 樣式表文件：.css；

● 動畫互動元素：.swf/.gif；

● 圖片元素：.jpg/.gif/.png；

● 視頻元素：.asf/.mpg/.rm/.mpeg/.rmvb/.flv；

● 音頻元素：.mp3/.wma；

(2)、元素文件大小標(biāo)準(zhǔn)：

● 首頁頁面大小不超過300K，其他子頁面大小不超過500K；

● 圖片元素，切圖后保證單張圖片體積大小應(yīng)在100K 以內(nèi)，圖片格式包括：.jpg /.gif/.png；

● 單個flash 元素不超過1M，flash 格式包括：.swf；

● 單個視頻元素不超過4M，視頻格式包括：.asf/.mpg/.rm/.mpeg/.rmvb/.flv；

● 單個音頻元素不超過2M，音頻格式包括：.Mp3/.Wma；

● 動畫互動元素菜單類大小必須限制在100K 以下。游戲類大小必須限制在1M 以下，超過500K后必須制作loading 效果。

(3)、元素切割方式標(biāo)準(zhǔn)：

● 設(shè)計稿切圖工具選擇：制作前應(yīng)根據(jù)設(shè)計師源文件，選擇適合切圖的工具，如PSD 文件選擇Photoshop CS；

● 設(shè)計稿頁面導(dǎo)出文件設(shè)置：頁面切圖應(yīng)導(dǎo)出.gif 或.jpg 兩種文件格式，不推薦png、bmp等；

● 格式圖片：像素圖、矢量色塊化圖、黑白圖選擇gif 格式；顏色漸變的、圖片內(nèi)容結(jié)構(gòu)豐富的、色彩飽和度高的選擇jpg 格式。

● 一致性原則：按鈕圖片切圖后，應(yīng)保證按鈕圖片背景的透明性以及和整體頁面的融合性。確保與設(shè)計稿沒有偏差。

● 可循環(huán)重復(fù)使用的背景圖片不應(yīng)切割成大圖。

2、文件命名標(biāo)準(zhǔn)：

所有的文件命名要求只能包含：小寫字母、數(shù)字、下劃線。

(1)、目錄文件命名標(biāo)準(zhǔn)：

● images：目錄存放靜態(tài)圖片；

● js：目錄存放JavaScript 腳本文件；

● swf：目錄存放Flash 文件；

● css：目錄存放css 樣式文件；

● Xml：目錄存放XML 文件，如Flash 的配置文件 json；

注意：文件夾名、文件名及文件擴展名均為英文小寫字母，一個項目最多2 個css 文件，基礎(chǔ)css 和擴展css，css 文件不要寫在頁面中要統(tǒng)一放在.css文件中。

(2)、頁面文件命名標(biāo)準(zhǔn)：

● 圖片命名原則：類型描述*.gif(jpg) 如：top_btn_help.gif；

● 表格圖片命名：同上，與標(biāo)記命名相同；

● 網(wǎng)站欄目文件命名標(biāo)準(zhǔn)：欄目名稱-網(wǎng)站名稱，例如：作品展示-優(yōu)化猩。

3、Html文件head區(qū)代碼規(guī)范：

(1)、版權(quán)注釋

<!--- The site is designed by --->

(2)、網(wǎng)頁顯示字符集

簡體中文：<meta http-equiv="content-type" content="text/html  charset=gb2312"> ；

英文：<meta http-equiv="content-type" content="text/html  charset=iso-8859-1">；

(3)、制作者信息

<meta name="author" content="mail@mail.com">

(4)、網(wǎng)頁標(biāo)題

<title>內(nèi)容標(biāo)題 - 欄目名稱 - 網(wǎng)站名稱</title>

(5)、網(wǎng)頁描述

<meta name="description" content="當(dāng)前網(wǎng)頁描述">

(6)、網(wǎng)頁關(guān)鍵詞

<meta name="keywords" content="關(guān)鍵字,關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3">

(7)、網(wǎng)頁css調(diào)用

<link href="xxx/xxx.css" rel="stylesheet" type="text/css">

(8)、網(wǎng)頁javascript調(diào)用

<script language="javascript" src="xxx/xxxxx.js"></script>

4、網(wǎng)頁制作標(biāo)準(zhǔn)檢驗站點

(1)、Html檢驗

http://validator.w3.org/

(2)、CSS 檢驗

http://jigsaw.w3.org/css-validator/

四、網(wǎng)頁制作注意事項

1、盡量把頁面的背景圖及小圖標(biāo)整合到一張圖片，用CSS定位方法。這樣以減少http請求，從而降底網(wǎng)站的下載速度。

2、尊從內(nèi)容與頁面樣式的脫離，如需要，同樣也要做到布局與COLOR的脫離。

首先是頁面代碼，做到精簡，邏輯性清楚；公用部位可以引入進來，比如頭部，腳部。其次CSS邏輯清析，精簡?？稍诓桓淖児δ艿那疤醿?nèi)，做到能更換頁面布局及換色。

3、將腳本放在底部。這樣頁面就可以逐步呈現(xiàn)，而且頁面中的可視組件可以盡早下裁。

4、頁面文字處理，如最大顯示長度，超過后加"…"省略號區(qū)域；在測試中經(jīng)常也會碰到英文無空格情況，得用overflow: hidden的方法隱藏溢出部分。

5、在頁面中盡量完成每步交互效果，包括既時響應(yīng)的。

6、每個連接，按鈕要做上鼠標(biāo)hover時的一個變化效果。

7、圖片應(yīng)該有alt屬性，以備圖片阻止時，文字的替換。

8、提交程序員的DEMO必須是連貫的，交互效果是齊全的，而且經(jīng)過自已在IE 9/10/11、Chrome、Firefox、Safari等瀏覽器整體測試完成的。

五、網(wǎng)頁制作常用工具

制作網(wǎng)頁常用的軟件有這些：Frontpage、Dreamweaver、自助建站平臺、Fireworks。其中Dreamweaver支持JS,Java,ActiveX等特性，另也支持網(wǎng)頁在編輯器中轉(zhuǎn)換。

1、Dreamweaver

Adobe Dreamweaver，簡稱"DW"，中文名稱"夢想編織者"，最初為美國公司開發(fā)，2005年被Adobe公司收購。Dreamweaver是一款有著強大網(wǎng)頁排版的軟件，我們可以快速直接的進行各種頁面的設(shè)計排版。我們可以通過特有的行為、模板。時間軸等技術(shù)，快速地創(chuàng)建各種具有專業(yè)水平的網(wǎng)頁，而且不需要編寫任何代碼。

2、FrontPage

FrontPage是由Microsoft公司推出的新一代Web網(wǎng)頁制作工具，使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大量工作。FrontPage界面與Word、PowerPoint等軟件的界面極為相似，為使用者帶來了極大的方便。

3、Fireworks

Fireworks是由Macromedia公司開發(fā)的圖形處理工具，是第一套專門為制作網(wǎng)頁圖形而設(shè)計的軟件，同時也是專業(yè)的網(wǎng)頁圖形設(shè)計及制作的解決方案。作為一款為網(wǎng)絡(luò)設(shè)計而開發(fā)的圖像處理軟件，F(xiàn)ireworks還能夠自動切割圖像、生成光標(biāo)動態(tài)感應(yīng)的JavaScript程序等等，而且Fireworks具有強大的動畫功能和一個相當(dāng)完美的 網(wǎng)絡(luò)圖像生成器。

4、Swish

Swish軟件可以對指定的文字進行各種特效處理?？刂莆淖值囊苿雍臀恢?，最后可以輸出swf格式的文件，并能導(dǎo)入到Ｆlash動畫中加以編程。雖然目前Swish只提供了一些文字效果的制作，但據(jù)開發(fā)該軟件的公司說以后將有圖片、聲音、按鈕和矢量圖支持。

5、Vscode

這是前端開發(fā)人員必備的開發(fā)工具，安裝簡單，需要什么插件直接在里面安裝。

Visual Studio Code是針對于編寫現(xiàn)代Web和云應(yīng)用的跨平臺源代碼編輯器，可在桌面上運行，并且可用于Windows，macOS和Linux。它具有對JavaScript，TypeScript和Node.js的內(nèi)置支持，并具有豐富的其他語言擴展的生態(tài)系統(tǒng)。

6、微信web開發(fā)者工具

主要用戶開發(fā)微信小程序。微信web開發(fā)者工具是一款便捷實用的微信調(diào)試工具。微信web開發(fā)者工具采用的是集成Chrome DevTools和基本的移動調(diào)試模塊，小伙伴們可以借助微信web開發(fā)者工具更方便、安全的開發(fā)或是針對調(diào)試基于微信開發(fā)的網(wǎng)頁代碼。

7、Hbuilder

Hbuilder這個工具可以和微信web開發(fā)者工具一起使用，開發(fā)微信小程序，還可以開發(fā)app，開發(fā)的程序可以同時在安卓手機和蘋果手機上運行，不需要分別寫兩套代碼。HBuilder是DCloud（數(shù)字天堂）推出的一款支持html5的Web開發(fā)IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。

8、WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。目前已經(jīng)被廣大中國JS開發(fā)者譽為"Web前端開發(fā)神器"、"最強大的HTML5編輯器"、"最智能的JavaScript IDE"等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

六、網(wǎng)頁制作常見問題

1、CSS是什么？用來做什么的？

CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（Cascading Stylesheet）。在網(wǎng)頁制作時采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。

2、如何來判斷一副圖片是否存JPG還是存GIF？

色彩較多的圖片，如果要保持高質(zhì)量，建議用jpg格式，如果色彩比較單一的最好用gif，一般來說，同樣的圖片gif格式圖片要比jpg?。ㄟ@里指色系較少，無多余變化的圖片）。

3、標(biāo)準(zhǔn)行距是多少?

行距除了對于可讀性的影響，行距本身也是具有很強表現(xiàn)力的設(shè)計語言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，體現(xiàn)獨特的審美意趣。例如，加寬行距可以體現(xiàn)輕松、舒展的情緒，應(yīng)用于娛樂性、抒情性的內(nèi)容恰如其分。行距一般用字體大小的150%-200%比較多。

總結(jié)

優(yōu)化猩SEO：隨著技術(shù)的進步，社會分工也在變化，目前的網(wǎng)頁制作和互聯(lián)網(wǎng)早期的網(wǎng)頁制作已發(fā)生很大的變化，現(xiàn)在網(wǎng)頁制作由前端開發(fā)工程師完成，前端開發(fā)工程師連同數(shù)據(jù)調(diào)用一起完成。

參考鏈接：

網(wǎng)頁制作規(guī)范_會飛得豬的博客-CSDN博客

https://blog.csdn.net/wuwenjie_1997/article/details/89287382

網(wǎng)站建設(shè)標(biāo)準(zhǔn)_網(wǎng)站實施規(guī)范_天津市匠人匠心

https://www.wzjs888.com/news/knowledge/1898.html

修改于2023-08-14