如何自定義HTML模板

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

HTML是什么？

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

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

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

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

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

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

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

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

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

一個小組就應該在瀏覽器中打開：

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

…

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

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

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

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

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

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

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

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

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

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

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

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

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

這個標簽，你需要改變的價值SRC你看到里面的屬性IMG標簽你可以通過編輯是在引號。你會改變它的文件名和你自己的形象定位。

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

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

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

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

回到崇高的文本，按Ctrl + F和運行一個找到“Facebook圖標”。你應該在75號線找到它。

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

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

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

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

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

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

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

你會在94號線找到它。突出的默認電子郵件地址“john@sitename.com”，兩個位置：

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

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

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

在檢視面板中你會看到它已經(jīng)強調(diào)了P標簽–這個標簽是負責創(chuàng)建在你的文字段落。

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

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

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

首先，所有你看到的是另一套DIV標簽這是因為實際的標題是嵌套在這些標簽之間的。

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

…＜／H2 >標簽，創(chuàng)建一個2級標題：

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

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

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

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

…

標簽
當你這樣做，確保你的最后一段的段首段標記包含屬性類與價值最后，像這樣：

.....

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

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

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

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

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

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

廣告

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