需要掌握哪些技能 有很多人寫(xiě)網(wǎng)頁(yè)，但不是每個(gè)人都是一個(gè)優(yōu)秀的前端工程師。要成為一名優(yōu)秀的前端工程師，您必須優(yōu)化網(wǎng)站的用戶(hù)體驗(yàn)，包括Web設(shè)計(jì)和實(shí)現(xiàn)。

作為UI設(shè)計(jì)人員，當(dāng)您完成草稿并開(kāi)發(fā)對(duì)接時(shí)，您需要標(biāo)記設(shè)計(jì)草稿并剪切地圖，并將標(biāo)簽剪切文件提供給開(kāi)發(fā)。這是犯錯(cuò)誤的時(shí)候。你怎么削減尺寸？

網(wǎng)頁(yè)剪切如何工作？什么是專(zhuān)業(yè)的網(wǎng)站圖表規(guī)范？

在網(wǎng)站建設(shè)制作中，我們經(jīng)常聽(tīng)到最終稿，我們會(huì)剪切地圖，然后切割的工作是什么，讓我們的專(zhuān)業(yè)前端工程師告訴你。

切割圖是網(wǎng)站生產(chǎn)過(guò)程中的術(shù)語(yǔ)。這是前端工程師必備的基本技能。切割表是將設(shè)計(jì)文檔轉(zhuǎn)換為HTML的過(guò)程。

在網(wǎng)站建設(shè)制作過(guò)程中，網(wǎng)頁(yè)剪切是指將精心設(shè)計(jì)的PSD文檔轉(zhuǎn)換為html的工作。使用DIV + CSS以網(wǎng)頁(yè)的形式表達(dá)設(shè)計(jì)文檔，網(wǎng)頁(yè)的切入點(diǎn)指的是設(shè)計(jì)。根據(jù)布局要求，Photoshop的切片工具將文檔中的圖片與文檔分開(kāi)，靜態(tài)頁(yè)面使用DIV + CSS創(chuàng)建。

規(guī)范1，文件規(guī)范。

1，將html，css，js，images存檔到系統(tǒng)開(kāi)發(fā)目錄。

2. Html文件以英文名稱(chēng)命名，后綴為.htm。同時(shí)，相應(yīng)的接口放在同一目錄中。如果名稱(chēng)是中文，則需要將同一文件重命名為htm。用于后端添加和功能查找。

3，CSS，js命名也是如此。

如何命名id和class？

這個(gè)名字可以根據(jù)你的喜好命名，所以有些人會(huì)使用英文，拼音或幾個(gè)字母。雖然可以這么說(shuō)，但是會(huì)讓你和其他人在后期修改網(wǎng)站。找到一個(gè)標(biāo)簽非常麻煩。我的個(gè)人名字是基于級(jí)別的。這是一個(gè)例子：

例如，頭部我使用了名稱(chēng)頭部，然后頭部可以分為兩部分：存儲(chǔ)徽標(biāo)并存儲(chǔ)導(dǎo)航欄。我將使用head_1和head_2來(lái)表示這兩個(gè)部分，然后存儲(chǔ)徽標(biāo)的部分可以分為左側(cè)和右側(cè)。徽標(biāo)面是廣告或搜索欄。我將其命名為：head_1_left和head_1_right。這種css代碼有時(shí)我們不需要轉(zhuǎn)向html頁(yè)面進(jìn)行修改，直接根據(jù)樣式的名稱(chēng)可以看出。

其次，合理使用標(biāo)簽有助于網(wǎng)站包含和SEO優(yōu)化

我們來(lái)舉個(gè)例子吧。有時(shí)在新聞內(nèi)容部分的html中，很多人會(huì)直接在div的中間寫(xiě)文本，然后控制這個(gè)div的樣式：＆lt; div＆gt;新聞內(nèi)容＆lt;/div＆gt;雖然這是完全可以實(shí)現(xiàn)的，但在搜索引擎眼中，這不是文本內(nèi)容而是代碼，因此我們記得在編寫(xiě)時(shí)使用p標(biāo)記，因?yàn)閼?yīng)該編寫(xiě)上述新聞內(nèi)容。是：＆lt; div＆gt;＆lt; p＆gt;新聞內(nèi)容＆lt;/p＆gt;＆lt;/div＆gt;一方面，當(dāng)我們合理地使用標(biāo)簽時(shí)，我們可以感覺(jué)到您正在用心去做這個(gè)網(wǎng)頁(yè)的布局。更重要的是使這個(gè)網(wǎng)站以后的優(yōu)化更有效。讓我們總結(jié)一下你想要添加的標(biāo)簽：

H1：網(wǎng)頁(yè)的主題，只有一個(gè)可以出現(xiàn)在頁(yè)面中。權(quán)重僅次于網(wǎng)站標(biāo)題，因此請(qǐng)嘗試將網(wǎng)站建設(shè)的主關(guān)鍵字放入其中。如果關(guān)鍵字包在像本文標(biāo)題這樣的句子中，我們可以按如下方式編寫(xiě)：

＆lt; p＆gt;談?wù)撆斫”救说剑t;/p＆gt;

＆lt; h1＆gt;網(wǎng)頁(yè)布局＆lt;/h1＆gt;

＆lt; p＆gt;＆lt;/p＆gt;時(shí)需要注意的一些事項(xiàng)。

H2-h3：在網(wǎng)頁(yè)中使用h3就足夠了。 h4-h6將不再使用。這兩個(gè)標(biāo)簽需要合理排列，h2表示頁(yè)面中的列，h3表示此列中的子節(jié)或文章。

p：p標(biāo)簽是段落標(biāo)簽，我們也可以說(shuō)它是內(nèi)容標(biāo)簽。此標(biāo)記內(nèi)的內(nèi)容是真實(shí)內(nèi)容。

Alt：搜索引擎不看圖片。我們必須向他解釋圖片代表什么，所以我們要注意向每張圖片解釋一下。

標(biāo)題：此標(biāo)記用于標(biāo)記，很少被人使用。但是我們必須考慮到搜索引擎的優(yōu)化，所以我們必須注意搜索引擎的簡(jiǎn)單而準(zhǔn)確的描述，例如，文章的標(biāo)題是“當(dāng)彭健自己排版時(shí)要注意的事項(xiàng)” 網(wǎng)站”。然后我們的代碼應(yīng)該寫(xiě)成

＆lt; a title=“網(wǎng)頁(yè)布局注意事項(xiàng)”href=“'＆gt;談?wù)撆斫≡?strong>網(wǎng)站建設(shè)排版＆lt;/a＆gt;時(shí)應(yīng)注意的一些事情。

用最準(zhǔn)確和簡(jiǎn)短的描述寫(xiě)下標(biāo)題的含義。

Nane：很少有人注意到這個(gè)標(biāo)簽。這個(gè)名稱(chēng)標(biāo)簽可以說(shuō)是一個(gè)直接與搜索引擎對(duì)話的標(biāo)簽。他也用在一個(gè)，他告訴搜索引擎這個(gè)超鏈接里面是什么。就像上面的標(biāo)題我們可以寫(xiě)：

＆lt; a name=“網(wǎng)頁(yè)布局注意事項(xiàng)”title=“網(wǎng)頁(yè)布局注意事項(xiàng)”href=“'＆gt;談?wù)勁斫≡诰帉?xiě)網(wǎng)站＆lt;/a＆gt;時(shí)應(yīng)注意的一些事項(xiàng)。

強(qiáng)：這是一個(gè)重要的標(biāo)簽。這看起來(lái)與b標(biāo)簽相同。許多在不知道代碼的情況下做seo的人都知道每篇文章都必須加粗重要的關(guān)鍵字，但他們總是認(rèn)為這個(gè)粗體是b標(biāo)簽。事實(shí)上，這個(gè)大膽是一個(gè)強(qiáng)大的標(biāo)簽。我們可以將這個(gè)標(biāo)簽添加到我們網(wǎng)頁(yè)的重要關(guān)鍵詞中，然后像普通詞一樣在css中設(shè)置它，它不會(huì)影響正常瀏覽，但實(shí)際上他已經(jīng)優(yōu)化了。

上面的一些摘要是作者自己對(duì)頁(yè)面布局的逐步總結(jié)。當(dāng)我們成為一名網(wǎng)絡(luò)前端工程師時(shí)，您可以簡(jiǎn)單地理解代碼，但是當(dāng)我們想成為一名使用網(wǎng)站建設(shè)的前端工程師時(shí)，我們還必須考慮到程序員看到您排版的感覺(jué)。并且網(wǎng)站對(duì)搜索引擎優(yōu)化很困難。