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

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

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

1、需求溝通

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

2、源文件切圖

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

3、Html代碼編寫

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

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

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

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

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

6、反饋與修改

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

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

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

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

● 普通頁面：.html；

● 腳本文件：.js；

● 樣式表文件：.css；

● 動(dòng)畫互動(dòng)元素：.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；

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

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

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

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

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

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

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

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

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

● 可循環(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；

注意：文件夾名、文件名及文件擴(kuò)展名均為英文小寫字母，一個(gè)項(xiàng)目最多2 個(gè)css 文件，基礎(chǔ)css 和擴(kuò)展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)檢驗(yàn)站點(diǎn)

(1)、Html檢驗(yàn)

http://validator.w3.org/

(2)、CSS 檢驗(yàn)

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

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

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

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

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

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

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

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

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

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

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

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

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

1、Dreamweaver

Adobe Dreamweaver，簡稱"DW"，中文名稱"夢想編織者"，最初為美國公司開發(fā)，2005年被Adobe公司收購。Dreamweaver是一款有著強(qiáng)大網(wǎng)頁排版的軟件，我們可以快速直接的進(jìn)行各種頁面的設(shè)計(jì)排版。我們可以通過特有的行為、模板。時(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è)計(jì)的軟件，同時(shí)也是專業(yè)的網(wǎng)頁圖形設(shè)計(jì)及制作的解決方案。作為一款為網(wǎng)絡(luò)設(shè)計(jì)而開發(fā)的圖像處理軟件，F(xiàn)ireworks還能夠自動(dòng)切割圖像、生成光標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript程序等等，而且Fireworks具有強(qiáng)大的動(dòng)畫功能和一個(gè)相當(dāng)完美的 網(wǎng)絡(luò)圖像生成器。

4、Swish

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

5、Vscode

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

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

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

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

7、Hbuilder

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

8、WebStorm

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

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

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

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

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

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

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

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

總結(jié)

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

參考鏈接：

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

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

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

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

修改于2023-08-14