POST TIME:2020-03-28 18:52
今天在網上看到一篇關于織夢模板修改基礎知識的講解教程,這篇教程通過介紹HTML和CSS的基礎知識來講解織夢CMS的模板結構,非常適合一些新手站長。于是經過整理和修改,現在發出來,提供給大家參考,希望對大家的所幫助。
一、模板中的HTML知識
1、下面我們來講解HTML重要的組成部分——元素
我們打開Dedecms根目錄/templets/default/index.htm文件,這個index.htm文件就是織夢CMS官方默認模板的首頁模板。我們打開以后可以看到的是HTML頁面以DOCTYPE開始,它的作用是聲明文檔的類型,且它之前不能有任何內容(包括換行符和空格),否則將使文檔聲明無效。
接著是<html>標簽,以</html>結束。其中包含了很多代碼;這就是一個元素。元素的定義是用標簽來表示的功能和內容就是HTML的“元素”。
它的格式是:<標簽名>[內容]</標簽名>,我們DEDE模板調用標簽和這個挺相似的;<head>,<body>元素都是嵌套在<HTML>元素中的,所以<html> 就是HTML頁面的根元素且是必須存在的,大家可以看一下我們的首頁模板,是不是這樣的。
2.接下來我就來講一下HTML中非常重要的標簽
HTML標簽大多是成對出現的,例:<body></body>,還有一種是空標簽,例:<br />標簽,作用是換行,標簽大致可分為
塊級標簽: “塊級標簽”通常會在web頁面中開始新的一行,并且常常會包含其他標簽。模板頁里的<div>、<p>及<ul>等標簽都屬于此類標簽。
行內標簽:通常是不會重新開一行,而且只能包含文本或者其他內置標簽。模板頁里的<a>、<strong>等標簽都屬于此類標簽。
HTML 標簽對大小寫是不敏感的:<a> 和 <A> 的作用是相同的。推薦為小寫, 養成一個好的習慣很重要。一個HTML頁面里必須有的四個標簽<html> <head> <title> <body> 。
在<head>標簽中填寫與該文件(HTML)的相關信息,<body>標簽中填寫的實際內容就是要在瀏覽器顯示我們要看到的內容。在<head>標簽中,只能有一個代表文件標題的標簽,就是<title>標簽,就是我們瀏覽器中做上角顯示的內容。
下面我們主要來講下首頁模板被圍在<body>元素中的標簽都是做什么的?
<div>標簽:DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,也稱作 “層”。我們常用DIV+CSS來進行HTML布局,可以看到我們首頁模板有很多<div>標簽。所以這個標簽對我們應用HTML很重要。
<dl> <ul> 我們做列表的時候會用到,他們都是列表標簽。
<a>是鏈接的標簽,大家應該會知道。
<hX> 標簽表示為該內容為標題,X級別用數字1-6來表示。1代表最高級,6代表最底。<hX>標簽應用很廣泛,這里我告訴大家一個是,當用圖象<img>當標題的話,也要用<h>~</h>括上,這樣一來。在不能顯示圖像的情況下,可以用<img>標簽的alt屬性所指定的文字把標題顯示出來。
<p> 標簽表示該內容為一個段落;
<span>標簽表示在行內定義一個區域,也就是一行內可以被<span>劃分成好幾個區域,從而實現某種特定效果。
<strong>特別強調。
標簽我們先介紹到這;當你將一個 HTML 文件存盤時,您即可以使用 HTM 也可以使用 HTML 作為擴展名。
3.下面我們來講講如何刪除首頁上的部分內容。我選擇刪除投票調查那部分,如圖:
我們現在在模板里把投票調查那部分代碼找到。找到后,選擇刪除就OK了。如圖:
二、模板中的CSS知識:
1.CSS就是一種叫做樣式表(stylesheet)的技術。也有的人稱之為層疊樣式(CascadingStylesheet)
在講下面內容之前,我們先打開首頁模板中用到的CSS文件。
在首頁模板代碼模式下,可以看到
<link href="{dede:global.cfg_templeturl/}/style/織夢模板.css" rel="stylesheet" media="screen" type="text/css" />
這個是連接外部CSS的方式。我們可以在織夢模板根目錄templetsstyle目錄下找到 織夢模板.css文件;
@import url("layout.css");
@import url("page.css");
CSS中加載另外2個CSS文件,可能一會我們會用到這2個文件.
2.CSS的基本語法格式
CSS基本是是按照以下的的語法格式進行表示的:
選擇符{屬性:值}
*{
padding:0px;
margin:0px;
}
注意樣式與樣式之間要用分號隔開。選擇符是用來指定針對哪一個標簽應用樣式表的部分。也就是那個*.
padding和margin屬性,指的是表明選擇器所使用的標簽。0px,就是值,也就是我們所要表達的意思了。
這個是不需要指定的。
指定標簽:用id屬性和classs(類名)屬性指定標簽為對象的應用樣式。定義ID選擇符,名稱前要加一個#,而類名則是.
在同一個HTML中類名可以指定多個,但ID名只能指定一處,這點注意。
3.下面我們針對首頁模板進行下CSS的應用
我們對頭條文章的標題的字號變的大一點,字體變成紅色,,并設為斜體。