Dede网站模板制作指南Word文档格式.docx

Dede网站模板制作指南Word文档格式.docx

《Dede网站模板制作指南Word文档格式.docx》由会员分享，可在线阅读，更多相关《Dede网站模板制作指南Word文档格式.docx（16页珍藏版）》请在冰豆网上搜索。

4.7article_article.htm21

4.8article_image.htm21

艾森梦主网站

1.简介

目的

本文档为织梦网站的制作文档，主要是为了能够把模板之家的优秀网站来整合到织梦模板，以方便快速的来实现制作网站的目的。

适用对象：

Web程序开发者，项目经理，以及相关的测试人员，美工

参考资料

概述

此文档主要分为以下三部分，第一部分网站的安装，第二部分为网站的设计，第三部分其它的相关要求及其注意问题

系统配置

操作系统：

Winxp,win7,win8

可支持的浏览器：

IE,firefox,chrome,safari

2.网站安装

因为目前Dede已经是一个非常成熟的模板系统，所以本文不再介绍它的安装，感兴趣同学可以直接看到本目录下quickstart.pdf文件。

3.网站的设计

模板之家的网站模板架构

一般来说从模板之家下载的模板，其架构如下：

其主要三个文件夹是images,js,styles,主要存放着图片,js文件，和样式表。

我们打开一个index.html文件看一下，对这三个文件的引用，都是这样

linkrel="

stylesheet"

href="

styles/skeleton.css"

/>

styles/style.css"

styles/flexslider.css"

styles/color.css"

styles/layout.css"

他用的是相对的路径，这个需要后把所有路径将来都要替换成绝对路径，如下所示:

/styles/skeleton.css"

所有的images替换举例如下：

原件：

shortcuticon"

images/favicon.ico"

替换为：

/images/favicon.ico"

所有js替换举例如下：

scripttype="

text/javascript"

src="

js/tinynav.min.js"

>

/script>

/js/tinynav.min.js"

上述黑框中主要是把上述三个文件夹放到根目录下的用法,初级版本为了省事我们将暂时先以这种方式来介绍，后续我们将介绍动态的加载方式。

织梦模板

下载下相应的

DedeCMS-V5.7-GBK-SP1.tar或者

DedeCMS-V5.7-UTF8-SP1.tar.gz

解压如下

其templets的：

其中default即为缺省的模板，我们学习的基础可以以default为基础为进行相应的学习。

4.整合

我们将参考default来整合：

js,images,styles:

首先把下载模板的三个文件夹:

●js

●Images

●Styles

放到织梦系统的根目录中，并用相应的工具如：

htmlphp批量替换工具文字:

UltraReplace.exe,执行3.1的动作，把所有html文件的引用js,image,style路径都换掉，如：

制作相应的模板文件：

其主要的模板文件如下：

2014/08/1520:

366,314article_article.htm：

档案模板首页

366,314article_image.htm：

档案图像首页

2014/08/1521:

30328footer.htm：

脚文件

2014/08/1522:

122,754footerslide.htm：

引用的其它底部文件

2014/08/1511:

523,497head.htm：

引用的头文件

526,714head2.htm：

2014/08/1715:

2010,772index.htm：

首页模板

465,187index_article.htm：

首页档案模板

2014/08/1517:

286,098list_article.htm：

列表首页模板

2014/08/1419:

3416,484list_image-Copy.htm

2014/08/1714:

427,580list_image.htm：

列表图像模板

2013/08/1811:

061,090说明.txt

步骤如下：

提取index.html中的通用的头部制作成index.htm的头部文件：

因为头部可能与里边的稍有不同，就是他有一个大的banner文件，我们可以把下边的head.htm嵌入到head2.htm或者单独也可以。

如下：

本示例中是head2.htm

那么其导航栏是：

ulid="

topnav"

class="

sf-menu"

liclass="

current"

ahref="

index.html"

Home<

/a>

/li>

li>

about.html"

About<

ul>

element.html"

Elements<

single.html"

BlogDetails<

support.html"

Support<

#"

Dropdown<

Only<

Exampleof<

TheDropdown<

/ul>

pricing.html"

Pricing<

portfolio.html"

Portfolio<

blog.html"

Blog<

contact.html"

Contact<

!

--topnav-->

我们需要把它变成从织梦模板来引用的自动生成的，除了Home这个词之外我们都可以改变，假设我们新的目录结构如下：

Ø

首页

关于我们

产品

新闻

技术与支持

联系我们

其改变如下：

<

/"

首页<

{dede:

typetypeid='

1'

}<

[field:

typelink/]"

typename/]<

{/dede:

type}

<

{dede:

channeltype="

son"

typeid="

1"

}<

typeurl/]"

>

typename/]<

{/dede:

channel}

5'

5"

13'

13"

17'

17"

20'

20"

我们以关于我们来举例说明上述各项的含义：

其中typeid为你登录后台设定的ID：

如下图所示：

}，这样可以循环把关于我们下边的所有的项目如公司介绍等，自动加载到界面上。

提取index.html中的通用的底部制作成footer.htm的底部文件：

divid="

outerfooter"

divclass="

container"

footercontainer"

twelvecolumns"

footerid="

footer"

global.cfg_powerby/}&

nbsp&

nbsp{dede:

global.cfg_beian/}<

/footer>

toTop"

^BacktoTop<

/div>

其中上述黄色部分来自于织梦模板的后台：

系统->

系统基本参数中的相关的设定，如果想加电话之类的，也可以直接在后边添加。

本例子中底部还有一个通用导航栏我们提取出来做为footerslide.htm

提取aboutus.html中通用的头部分制作head.htm

具体制作方式参考4.2.1

制作侧面通用的部分

这个可以分两部分制作,文档首页的侧边栏和图像首页的侧边栏如index_article.htm的侧边栏

其中的重要部是这部分：

channelrow="

10"

type="

sun"

col="

currentstyle=

"

liclass='

hover'

ahref='

~typelink~'

~rel~>

span>

~typename~<

/span>

"

}

typeurl/]'

[field:

rel/]>

{/dede:

他自动提取各个列表的内容和链接显示在侧面，如下例所示：

asideid="

sidebar"

positionrightfourcolumnsomega"

widget-container"

h2class="

widget-title"

导航<

/h2>

OurAddress<

textwidget"

<

p>

30SouthParkAvenueBlvd<

br/>

SanFrancisco,CA12345<

USA<

/p>

Phone:

+800123456<

Fax:

Email:

mailto:

testmail@"

testmail@<

Web:

/aside>

--endsidebar-->

以及artile_image.htm的侧边栏：

SidebarMenu<

{dede:

"

OurGallery<

gal"

imgsrc="

/images/content/gal1.jpg"

alt="

imgborder"

/images/content/gal2.jpg"

/images/content/gal3.jpg"

/images/content/gal4.jpg"

/images/content/gal5.jpg"

/images/content/gal6.jpg"

/images/content/gal7.jpg"

/images/content/gal8.jpg"

clear"

Index.htm

这是首页的模板，其重要的地方除了头和尾之外，我只修改了让他动态的加载新闻这一项：

其头部的引用需要做如下修改，使其所有的内容都来自织梦模板，可以用标签生成器来生成。

metacharset="

utf-8"

title>

global.cfg_webname/}<

/title>

metaname="

robots"

content="

index,follow"

keywords"

global.cfg_keywords/}"

description"

global.cfg_description/}"

author"

其公司的动态引用我修改如下：

eightcolumnsalpha"

h3class="

titleSection"

CompanyNews<

/h3>

images/content/pic.jpg"

alignleftimgborder"

ho_newsListagy"

arclisttypeid=13row=1}

h2>

arcurl/]"

title/]<

descriptionfunction="

cn_substr（@me,140）"

/]...<

/images/more.gif"

width="

44"

height="

14"

pubdatefunction="

GetDateMK（@me）"

/]<

arclist}

index_article.htm

这个模板用于在创建第一个列表的时候引用，即在后台你选择这一项的时候会用这个模板：

这里我是随便找了一个除index.html的文件，改上相应的头部、侧边栏以及尾部文件，然后最重要的是文件中增加这一句：

padcontent"

{dede:

field.content/}

有了这一句就可以自动显示你的内容了：

如图所示：

你就可以在栏目内容中增加想要显示的内容了。

list_article.htm

这个用于新闻列表的展示等，实现这样的效果：

当你选择这个的时候会引用到：

其重要的自动引用如下：

mbx"

fieldname='

position'

/}<

separatorshadowsmalllist"

<

newsList"

ulclass="

news_List"

listpagesize=12}

b>

/b>

i>

/i>

list}

yc_page"

pagelistlistitem="

info