织梦模板修改基础教程

今天在网上看到一篇关于织梦模板修改基础知识的讲解教程,这篇教程通过介绍HTML和CSS的基础知识来讲解织梦CMS的模板结构,非常适合一些新手站长。于是经过整理和修改,现在发出来,提供给大家参考,希望对大家的所帮助。

  今天在网上看到一篇关于织梦模板修改基础知识的讲解教程,这篇教程通过介绍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)的技术。也有的人称之为层叠样式(Cascading Stylesheet 以下简称CSSHTML只不过是构成一个文本文件的一系列标签,指定标签是如何显示的就需要用到样式表了。在制作HTML时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中属性值,那么整个站点的所有页面都会随之发生变动。

 

在讲下面内容之前,我们先打开首页模板中用到的CSS文件。

 

在首页模板代码模式下,可以看到

<link href="{dede:global.cfg_templeturl/}/style/织梦模板.css" rel="stylesheet" media="screen" type="text/css" />

这个是连接外部CSS的方式。我们可以在织梦模板根目录templets\style目录下找到 织梦模板.css文件;

@import url("layout.css");

@import url("page.css");

CSS中加载另外2CSS文件,可能一会我们会用到这2个文件.

 

2.CSS的基本语法格式

 

CSS基本是是按照以下的的语法格式进行表示的:

选择符 {属性: }

*{

padding:0px;

margin:0px;

}

注意样式与样式之间要用分号隔开。选择符是用来指定针对哪一个标签应用样式表的部分。 也就是那个*.

paddingmargin属性,指的是表明选择器所使用的标签。0px,就是值,也就是我们所要表达的意思了。

这个是不需要指定的。

指定标签:用id属性和classs(类名)属性指定标签为对象的应用样式。定义ID选择符,名称前要加一个#,而类名则是.

在同一个HTML中类名可以指定多个,但ID名只能指定一处,这点注意。

 

3.下面我们针对首页模板进行下CSS的应用

 

我们对头条文章的标题的字号变的大一点,字体变成红色,,并设为斜体。

 

 
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

织梦DEDECMS 栏目文章文章命名规则修改, 每次添加栏目的时候 都要改文章命名规则,十分麻烦, 修改下面这个地方就可以一改永亦,织梦模板网为您解答 找到\include\common.inc.php 搜索 $cfg_df_namerule 把: $cfg_df_namerule = {typedir}/{Y}/{M}{D}/{aid
当我们通过{dede:arclist keyword=关键词}来调用文章列表时,你会发现只在其中一个栏目里生效,在其他栏目,仍然显示上一次的关键词。 原因是由于arclist的缓存导致的。 只需修改/include/taglib/arclist.lib.php文件,大概在384行: $taghash = md5(seriali
我们在使用织梦dedecms数据库内容替换时候,经常遇到 安全码 显示的无法识别或者不清晰,这个安全码的位置是在核心 - 批量维护 - 数据库内容替换,如果识别不了,这个页面还没有改变验证码的地方,只能重新刷新页面,如果我们不想要这个安全码的话,要怎么操
今天一个客户在安装织梦dedecms时候,安装完成后登录后台就出现Safe Alert Request Error step 2,常用dedecms的朋友都知道,这是织梦的安全机制,在程序觉得有sql注入等攻击时候,会有这种提示。 1、起初我以为是文件没传全,让这个朋友重新传了文件上去安
很多人在修改织梦会员中心模板的时候 会遇到 明明修改了,为什么还是原来样式?确认文件没有修改错误的情况下,可能是缓存问题,你 只要把 /data/tplcache/ 里面的文件全部删除,重新访问即可。
dede织梦搜索伪静态,伪静态设置成功后,访问URL地址效果如下: 搜索页 http://www.baidu.com/search/织梦.html 搜索分页 http://www.baidu.com/search/织梦-2.html 本教程也适用于手机端。 开启伪静态: 后台-系统参数-核心设置-开启伪静态 后台-系统参数-