如何自定義HTML模板

所以你買了一個(gè)HTML模板和現(xiàn)在你要自定義它之前你可以把它放到網(wǎng)上，但你不熟悉的代碼，你不知道如何去做。嗯，放心，因?yàn)樵谶@個(gè)教程中，我們將指導(dǎo)你通過整個(gè)過程。
我們要工作了你從來沒有見過一行HTML假設(shè)，更別說編輯之一，所以不管你有多新工作的代碼你會(huì)發(fā)現(xiàn)究竟是什么做的每一步。
讓我們從頭開始。

HTML是什么？

從技術(shù)上講，這個(gè)問題的答案是“超文本標(biāo)記語言”。 然而，有關(guān)自定義模板的目的，你可以考慮HTML作為一系列的打開和關(guān)閉標(biāo)簽這樣：

標(biāo)簽說明<和>的跡象，和關(guān)閉標(biāo)簽通常包括/。 對(duì)標(biāo)簽的內(nèi)容在他們之間這樣：

<約翰史密斯H1＞，前端開發(fā)者
有時(shí)，然而， 也有單獨(dú)的標(biāo)簽，沒有關(guān)閉的伙伴，這樣：

不同的HTML標(biāo)簽，使不同類型的內(nèi)容出現(xiàn)在網(wǎng)頁上。上面的例子

標(biāo)簽將創(chuàng)建一個(gè)大標(biāo)題閱讀“約翰史密斯，前端開發(fā)”，并舉例標(biāo)簽會(huì)使圖像文件”執(zhí)行。JPG”出現(xiàn)在頁面上。
編輯HTML模板的所有你需要知道的是哪些標(biāo)簽代表的部分頁面，你想改變，如何在代碼中找到它們，以及如何編輯他們給你想要的。

給自己一個(gè)代碼編輯器
是的，在記事本或類似的程序編輯HTML是完全可能的，但事情會(huì)更順利，如果你使用一個(gè)適當(dāng)?shù)拇a編輯應(yīng)用程序。一個(gè)主要的原因是你會(huì)得到彩色突出你的代碼，你很快就會(huì)看到，這將使它更容易閱讀和編輯。

大多數(shù)的HTML模板，會(huì)在一個(gè)ZIP文件-如果是這樣的話，去提取你的現(xiàn)在。然后看看里面的模板的文件夾，直到找到你的“指數(shù)。HTML”或“索引.htm”文件。
在我們的例子中，簡(jiǎn)歷模板“指標(biāo)。html”文件在“01。HTML網(wǎng)站目錄。

現(xiàn)在，打開那個(gè)文件在Chrome。即使Chrome不默認(rèn)或選瀏覽器請(qǐng)使用它吧，因?yàn)槲覀円褂靡恍┕ぞ呔哂袃?nèi)置的幫助你編輯過程。
確定你想要改變的部分
如果這是你第一次編輯模板，盡量不要卷入的想法的調(diào)整顏色和布局還。你必須深入CSS，負(fù)責(zé)頁面的造型語言。專注于一件事的時(shí)候，你是新的模板定制，這是個(gè)好主意，和HTML是最開始的地方。
讓球滾動(dòng)，把你在Chrome和找出這寫元素和圖像在頁面上你需要改變模板一看。如果你愿意，你可以準(zhǔn)備一個(gè)清單，你可以通過檢查每個(gè)項(xiàng)目作為你的編輯。
在我們的簡(jiǎn)歷模板的情況下我們要改變：
•姓名
•職業(yè)
•個(gè)人圖片
•社交媒體的鏈接
•聯(lián)系方式
•簡(jiǎn)歷部分：“專業(yè)型”、“工作經(jīng)驗(yàn)”、“技術(shù)”和“教育”
•版權(quán)信息
現(xiàn)在我們有一個(gè)清單的變化，我們可以將代碼中的相應(yīng)的HTML標(biāo)簽定位。讓我們的名字開始。

發(fā)現(xiàn)檢驗(yàn)員標(biāo)簽
右鍵單擊該名稱，即“約翰史密斯”默認(rèn)情況下，選擇檢查：

一個(gè)小組就應(yīng)該在瀏覽器中打開：

“檢查”面板
這個(gè)小組給你看代碼的交互方式。鼠標(biāo)懸停在該行顯示

…

（1級(jí)標(biāo)題標(biāo)簽），你應(yīng)該看到模板的名稱部分突出在屏幕上看到你。
通過鼠標(biāo)懸停在代碼的不同線和看網(wǎng)頁的點(diǎn)燃區(qū)，這個(gè)面板可以幫助你找出哪些代碼對(duì)應(yīng)什么元素。你只是不停的在不同的代碼行徘徊直到你找燈。

現(xiàn)在展開H1點(diǎn)擊小三角左標(biāo)簽，你應(yīng)該在他們之間看到的內(nèi)容，即約翰史密斯<小>前端開發(fā)<小>。

這種措辭與屏幕上的所見，所以你知道你已經(jīng)找到了正確的代碼部分。

在HTML編輯標(biāo)簽
現(xiàn)在是時(shí)候打開你的HTML文件進(jìn)行編輯。打開“索引。在崇高的文本HTML”文件，你應(yīng)該看到這樣的事情：

你想在這里與你在Chrome檢查員看到什么找到代碼。滾動(dòng)直到你找到它在線路61 - 64。

現(xiàn)在你可以編輯內(nèi)容的標(biāo)簽更改姓名和職業(yè)，你自己。首先，編輯“約翰史密斯”你自己的名字：

然后，在之間<小> <小>標(biāo)簽，改變“前端開發(fā)”自己的職業(yè)。

保存你的文件，然后刷新模板中鉻。你應(yīng)該看到你的變化，像這樣：

重復(fù)編輯其他內(nèi)容

現(xiàn)在你有了基本的過程：

檢查你想更改內(nèi)容
確定相應(yīng)的標(biāo)簽
找到這些標(biāo)簽在您的HTML文件
修改代碼以適應(yīng)
讓我們重復(fù)這個(gè)過程來編輯我們想自定義其他內(nèi)容。

添加自己的圖片
下一步我們將我們自己的圖像左的名字和職業(yè)領(lǐng)域。右鍵單擊圖像檢查，并記錄相應(yīng)的標(biāo)簽：

你可以看到在Inspector窗口這條線是直接在上面我們只是改變了線：
去你的HTML文件，在59行定位標(biāo)簽：

這個(gè)標(biāo)簽，你需要改變的價(jià)值SRC你看到里面的屬性IMG標(biāo)簽?zāi)憧梢酝ㄟ^編輯是在引號(hào)。你會(huì)改變它的文件名和你自己的形象定位。

抓住一個(gè)自己的形象，是150px的150像素大?。ê雎晕募姓f140x140.png，大小其實(shí)是150x150）。

放下你的形象為“_content”子文件夾；它是在同一個(gè)文件夾作為你的“指數(shù).html”的文件。

現(xiàn)在，在您的HTML文件，改變的價(jià)值SRC屬性，將“140x140 .png”文件就添加到“_content”子文件夾。一定要檢查你的文件擴(kuò)展名類型是一樣的一個(gè)對(duì)文件“PNG”/“JPG”：
保存你的文件，刷新瀏覽器，你應(yīng)該看到你的新照片顯示：

編輯社交媒體的鏈接
現(xiàn)在讓我們來編輯模板的右上角的社會(huì)媒體圖標(biāo)鏈接。就像之前，請(qǐng)用鼠標(biāo)右鍵單擊圖標(biāo)檢查。在窗口，看上面的一個(gè)高亮顯示的行，你會(huì)看到它包含文本“Facebook圖標(biāo)”。我們要用這個(gè)在我們的HTML文件中找到的代碼。

回到崇高的文本，按Ctrl + F和運(yùn)行一個(gè)找到“Facebook圖標(biāo)”。你應(yīng)該在75號(hào)線找到它。

這個(gè)一標(biāo)簽在75行是什么造成的圖標(biāo)鏈接，并href你看它里面的屬性決定，將去。你需要改變的價(jià)值href屬性到你的Facebook的URL（例如： https://www.facebook.com/mylink）。

更換#那是有你的URL默認(rèn)。然后做地鐵79號(hào)線的推特一樣，谷歌+在83號(hào)線和87號(hào)線的LinkedIn。

如果有一個(gè)圖標(biāo)你想去除完全，突出它的鏈接啟動(dòng)開幕<一>在關(guān)閉標(biāo)簽和整理<一>標(biāo)簽，然后刪除代碼。

現(xiàn)在保存和更新您的網(wǎng)站，然后 當(dāng)你點(diǎn)擊他們應(yīng)該走到正確位置的鏈接。

編輯聯(lián)系人信息
接下來讓我們改變社會(huì)的圖標(biāo)右下方的聯(lián)系信息。

先檢查“電子郵件”，所以我們可以找到這段代碼開始聯(lián)系信息。走線你強(qiáng)調(diào)代碼說明，和線下，所以你可以在你的HTML文件匹配。

在崇高的文本，按下Ctrl + F這個(gè)時(shí)候再次搜索“電子郵件”。你需要找到實(shí)例的“電子郵件”，這是 包圍碼匹配你所看到的在Inspector窗口。

你會(huì)在94號(hào)線找到它。突出的默認(rèn)電子郵件地址“john@sitename.com”，兩個(gè)位置：

然后用你自己的電子郵件地址替換它。在接下來的一行也可以替換你自己的電話號(hào)碼，和下面的線，你可以替換你自己的網(wǎng)站地址：

編輯簡(jiǎn)歷部分
現(xiàn)在讓我們先開始編輯模板的主要簡(jiǎn)歷部分。有幾個(gè)部分，這些部分，所以我們要先檢查每個(gè)人所以你知道要尋找什么，在你的代碼。這也將是一個(gè)讓你學(xué)習(xí)更多關(guān)于移動(dòng)通過Inspector窗口中找到你的網(wǎng)站的不同部分的機(jī)會(huì)。

向下滾動(dòng)到“專業(yè)簡(jiǎn)介”部分，右鍵單擊文本段落的檢查。

在檢視面板中你會(huì)看到它已經(jīng)強(qiáng)調(diào)了P標(biāo)簽–這個(gè)標(biāo)簽是負(fù)責(zé)創(chuàng)建在你的文字段落。

接下來，我們要知道一整段在簡(jiǎn)歷部分文本看起來像在代碼中，而不是單獨(dú)的段落。在Inspector窗口，單擊代碼行以上段落你檢查，你應(yīng)該看到所有的文字照亮：

這告訴你，每一段代碼是用標(biāo)簽＜div class=“CV”項(xiàng)>…。一DIV短了司，這些標(biāo)簽是用來控制布局和造型。

現(xiàn)在檢查CV部分的標(biāo)題，“專業(yè)型”：

首先，所有你看到的是另一套DIV標(biāo)簽這是因?yàn)閷?shí)際的標(biāo)題是嵌套在這些標(biāo)簽之間的。

打電話另一端的小三角，展開它，看到它的內(nèi)容，然后再做同樣的事在下一行直到你看到“專業(yè)型”文本，你要找的。你會(huì)發(fā)現(xiàn)它包裹在

…＜／H2 >標(biāo)簽，創(chuàng)建一個(gè)2級(jí)標(biāo)題：

現(xiàn)在我們知道的代碼看起來像這個(gè)簡(jiǎn)歷部分的每一部分，我們可以回到崇高的文本并開始編輯。

把光標(biāo)定位在你的HTML文件的頂部，你可以從上面開始搜索。新聞按Ctrl + F和“CV項(xiàng)目搜索”。繼續(xù)找，直到你找到的代碼實(shí)例＜div class=“CV項(xiàng)目“>在那是正確的

專業(yè)簡(jiǎn)介＜H2＞你確定代碼。

現(xiàn)在你可以替換文本與自己專業(yè)的剖面。將每一段你的文字

…

標(biāo)簽
當(dāng)你這樣做，確保你的最后一段的段首段標(biāo)記包含屬性類與價(jià)值最后，像這樣：

.....

。這適用于布局造型模板的CSS，將確保下一段文字的間距是正確處理類。

如果您保存您的HTML文件和刷新你的網(wǎng)站，你應(yīng)該看到在前兩節(jié)都已定制。

創(chuàng)新互聯(lián)設(shè)計(jì)文章推薦：

雙流網(wǎng)站建設(shè) 做網(wǎng)站
歙縣網(wǎng)站制作公司

文章題目：如何自定義HTML模板
URL地址：http://www.bm7419.com/news/21052.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)頁設(shè)計(jì)公司、建站公司、虛擬主機(jī)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)