基础建站基础课程

1、学习目标：建设一个完整的网站（企业，政府，学校，个人）学习目标：建设一个完整的网站（企业，政府，学校，个人）学习内容：学习内容：HTMLHTML语言语言 div+css div+css （前台建站）网站内容管理系统（前台建站）网站内容管理系统 CMS CMS（后台系统）（后台系统）学习时间：学习时间：5+5+15+5+1（5 5天前台建设，天前台建设，5 5天后台管理系统，天后台管理系统，1 1天测试）天测试）教学模式：线上线下结合教学模式：线上线下结合1+11+1。项目教学法：围绕建设一个网站项目展开教学。项目教学法：围绕建设一个网站项目展开教学课程目标：了解熟悉课程目标：了解熟悉 HTML

2、 HTML语言语言 为仿站，搜索引擎优化做辅助铺垫，为仿站，搜索引擎优化做辅助铺垫，搜索引擎优化（搜索引擎优化（SEOSEO）中涉及到很多）中涉及到很多htmlhtml语言语言 相关术语，相关术语，部分优化策略与网站建设相关联（部分优化策略与网站建设相关联（SEOSEO与网站建设不可分开）与网站建设不可分开）学习要求：学生能基本认识常用的学习要求：学生能基本认识常用的HTMLHTML语言，熟悉网站语言，熟悉网站cmscms系统，系统，为理解为理解SEOSEO策略以及策略以及SEOSEO后台操作辅垫。后台操作辅垫。Page 3HTMLDIVCSS复原网页div+cssPage 4Page 5查看

3、源代码：网页右键选择查看源代码查看源代码：网页右键选择查看源代码网页后缀网页后缀 / / 格式格式 / / ：. html. htmlPage 6标签主要功能可以定义标签主要功能可以定义网页的说明，关键字，编码信网页的说明，关键字，编码信息，方便浏览器，搜索引擎所息，方便浏览器，搜索引擎所搜索等等信息。它的内容不显搜索等等信息。它的内容不显示在浏览器的窗口中，只供检示在浏览器的窗口中，只供检索！也叫做索！也叫做htmlhtml网页元信息。网页元信息。Page 7Page 8标题标标题标 - src（图片的路径）（图片的路径）段落标签段落标签链接标签链接标签 href（链接地址）（链接地址）图像

4、标签图像标签加粗标签加粗标签换行标签换行标签 水平线水平线 水平线可以定义长度等属性水平线可以定义长度等属性倾斜标签倾斜标签加下划线加下划线 上标标签上标标签 下标标签下标标签视频标签视频标签注释标签注释标签无序列表无序列表 有序列表有序列表知识点：知识点： 单标签单标签 双标签；图片路径；视频标签；注释双标签；图片路径；视频标签；注释; ; 列表；列表；Page 9Page 10属性：属性值属性：属性值语法语法颜色属性颜色属性 colorcolor：redred长度属性长度属性 widthwidth：5px5px高度属性高度属性 heightheight：5px5px对齐方式对齐方式 ali

5、gnalign：left(left(左左) ) center center（中）（中） right right（右）（右）字体属性字体属性 font font 字体大小字体大小 font-sizefont-size：1818StyleStyle属性属性 提供了一种改变所有提供了一种改变所有HTMLHTML元素样式的通用方法。元素样式的通用方法。列表适用属性：列表适用属性：改变项目符号改变项目符号:type=”:type=” 黑色实心圆圈黑色实心圆圈 “Disc”Disc” 黑色空心圆圈黑色空心圆圈 “Circle”“Circle” 黑色空心方形黑色空心方形 “Square ”“Square ”

6、Title:Title:图片提示文字的意思图片提示文字的意思altalt关键词关键词 img src=/Page 11分类分类: :第一类第一类: :无序列表无序列表文章的一个标题文章的一个标题文章的一个标题文章的一个标题文章的一个标题文章的一个标题文章的一个标题文章的一个标题第二类第二类: :有序列表有序列表文章的一个标题文章的一个标题文章的一个标题文章的一个标题文章的一个标题文章的一个标题文章的一个标题文章的一个标题列表文件可以进行设置，列表文件可以进行设置，属性改变项目符号属性改变项目符号 disc disc表示属性特点是黑色实心圆圈，表示属性特点是黑色实心圆圈，Disc Disc 项目

7、符号项目符号列表：列表：苹果苹果香蕉香蕉柠檬柠檬桔子桔子Circle Circle 项目符项目符号列表：号列表：o o苹果苹果o o香蕉香蕉o o柠檬柠檬o o桔子桔子Square Square 项目符项目符号列表：号列表：苹果苹果香蕉香蕉柠檬柠檬桔子桔子Page 12Page 13声明网页标准；声明网页标准；meta http-equiv=Content-Type content=text/html; charset=utf-8/声明网页的编码格式为声明网页的编码格式为utf-8;utf-8;网页的编码格式我们相关的有两种：网页的编码格式我们相关的有两种：一种是国际标准一种是国际标准utf-

8、8utf-8，它支持，它支持英文，中文，日语，韩语等等英文，中文，日语，韩语等等另一种是另一种是 Gb2312/gbk Gb2312/gbk 国标中文；国标中文；Page 14表格最外层是标签表格最外层是标签 行用行用 单元格用单元格用 borderborder边框边框 alignalign表格对其方式表格对其方式水平方向跨列：水平方向跨列：Colspan=”2” Colspan=”2” 单元格扩大为两倍单元格扩大为两倍垂直方向跨行：垂直方向跨行：Rowpan=”2” Rowpan=”2” 选定单元格后面全部单元格统一后移一个单元格。选定单元格后面全部单元格统一后移一个单元格。单元格与单元格之

9、间的间距：单元格与单元格之间的间距：sellspacing=”sellspacing=”单元格内部文字与单元格之间的空隙：单元格内部文字与单元格之间的空隙：cellpadding=” cellpadding=” BgcoloBgcolor r=” =” 颜色属性颜色属性Page 151 1、符合、符合W3CW3C标准。微软等公司均为标准。微软等公司均为W3CW3C支持者。这一点是最重要的，因为这保证您的网站支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。不会因为将来网络应用的升级而被淘汰。2 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是、支持浏

10、览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7IE7或者是火狐，您或者是火狐，您的网站都能很好的兼容。的网站都能很好的兼容。 3 3、搜索引擎更加友好。相对与传统的、搜索引擎更加友好。相对与传统的table,table, 采用采用DIV+CSSDIV+CSS技术的网页，对于搜索引擎的技术的网页，对于搜索引擎的收录更加友好。收录更加友好。 4 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在现在YAHOO,MSNYAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的等

11、国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0WEB2.0网站，均采用网站，均采用DIV+CSSDIV+CSS的框架模式，更加印证了的框架模式，更加印证了 DIV+CSSDIV+CSS是大势所趋。是大势所趋。 现很多个人站长新建站点都采用现很多个人站长新建站点都采用了了DIV+CSSDIV+CSS来构建自己的网站页面，可见来构建自己的网站页面，可见DIV+CSSDIV+CSS替代替代tabletable已经不是遥远梦想。已经不是遥远梦想。5 5、通过制作发行同样的页面使用、通过制作发行同样的页面使用TABLETABLE做的页面与做的页面与DIV+CSSDIV+CSS制作的页面大小

12、对比，制作的页面大小对比，DIV+CSSDIV+CSS的的XHTMLXHTML页面大小至少小页面大小至少小TABLETABLE制作页面制作页面1/41/4。从而使的浏览。从而使的浏览DIV+CSSDIV+CSS的页面更加快捷快速。的页面更加快捷快速。Page 16Page 17CSSCSS是层叠样式表的简称是层叠样式表的简称层叠样式表层叠样式表( (英文全称：英文全称：Cascading Cascading StyleStyle Sheets) Sheets)是一种用来表现是一种用来表现HTMLHTML（标准通用标记语言的一个应用）或（标准通用标记语言的一个应用）或XMLXML（标准通用标记（

13、标准通用标记语言的一个子集）等文件样式的计算机语言。语言的一个子集）等文件样式的计算机语言。CSSCSSSTYSTYLELECSS CSS 的作用：的作用：有利于有利于SEOSEO，修饰文字段落，定位布局。，修饰文字段落，定位布局。一一 行内表行内表现式现式二二 内部嵌内部嵌入式入式三三 外部链外部链接式接式补充：首行缩进补充：首行缩进 text-indent:2em; text-indent:2em;第三种：外部链接式第三种：外部链接式把把css css 样式文件单独放在样式文件单独放在一个样式文件夹里，然后一个样式文件夹里，然后再再htmlhtml文件中来调用这个文件中来调用这个csscs

14、s样式的文件。样式的文件。如何调用如何调用csscss文件文件在右面找到在右面找到csscss文件拖动文件拖动到到头部标题头部标题/title下面下面第一种行内式：第一种行内式：行内式，是写在行内式，是写在HTML HTML 标签的开始标签的开始标签里面的标签里面的p style=”第二种内部嵌入式：第二种内部嵌入式：在在区区域写上域写上stytype=next/ cssPcolor:red;font-Pcolor:red;font-size:20px;line-size:20px;line-height:25px;height:25px;第二种嵌入式：第二种嵌入式： 内容内容style ty

15、pe=”text/css”P color:red;P color:red;这是一段话这是一段话第三种外链式：第三种外链式：html:html:牛逼哄哄想嫩啥牛逼哄哄想嫩啥css:css:p color:red;ront-p color:red;ront-size:20px size:20px html:html:class=”xpf”class=”xpf”css:css:.xpfcolor:red;ron.xpfcolor:red;ront-size:20px t-size:20px html:html:id=”xpf”id=”xpf”css:css:#xpf#xpfcolor:red;ron

16、color:red;ront-size:20px t-size:20px 第一种行内式：第一种行内式：p style= 段落段落扩展：扩展：font-size:20pxfont-size:20px表示字体大小表示字体大小20px20px，color:red color:red 字体颜色红色字体颜色红色 line-height:25px line-height:25px 表示行间距行高表示行间距行高1.1.行内式的优先级高于内嵌式。行内式的优先级高于内嵌式。（属性选择取决于就近原则）（属性选择取决于就近原则）2.2.三种表现形式三种表现形式 万网万网w3c w3c 标准推标准推荐使用荐使用 第三

17、种形式第三种形式 也就是外链也就是外链式。式。为什么使用第三种，百度这种搜为什么使用第三种，百度这种搜索引擎更喜欢简洁的网页文件。索引擎更喜欢简洁的网页文件。复杂的页面不利于搜索引擎的抓复杂的页面不利于搜索引擎的抓取。取。什么是选择器：什么是选择器：1.1.在在HTMLHTML中中 等等叫标签，在等等叫标签，在csscss中中pcolorpcolor：redred是选择器是选择器 2.2.一个选择工具一个选择工具作用：作用：指定样式它所控制的对象指定样式它所控制的对象 选择对象改变属性选择对象改变属性分类：常用的三类选择器分类：常用的三类选择器第一类：是标签选择器第一类：是标签选择器直接把直接

18、把htmlhtml作为选择器的作为选择器的, ,如：如：pcolorpcolor：redred第二类：第二类：ClassClass类选择器类选择器在在HTMLHTML段落中写段落中写 在在csscss中写中写.quangecolor:blue.quangecolor:blue（取名：英文（取名：英文小写小写 不能用数字开头不能用数字开头 ）（以点开头）（以点开头.quangecolor:blue .quangecolor:blue ）第三类：第三类：IDID选择器选择器 注意：注意：idid号也是用英文小写开头，不能以数字开头，并且号也是用英文小写开头，不能以数字开头，并且idid号具有唯一性

19、，你的号具有唯一性，你的idid号，号，不能跟我的不能跟我的id id 号一样；号一样；不管不管classclass类名称，还是类名称，还是idid号，都不能用数字开头，一般以小写字母开头；号，都不能用数字开头，一般以小写字母开头； 标签选择器：标签选择器：直接以标签做为选择器直接以标签做为选择器 直接以标签作为选择器直接以标签作为选择器 例如：例如：【html:html:neirong neirong css:css:.p color:red;ront-size:20px .p color:red;ront-size:20px 】类选择器：类选择器：（classclass）取名）取名 【ht

20、ml:html:class=”class=”名称名称” ” css:css:. .名称名称color:red;ront-size:20px color:red;ront-size:20px 】不同的对象可以有相同的类名称，同一个对象可以有多个名字不同的对象可以有相同的类名称，同一个对象可以有多个名字IdId选择器（符）：选择器（符）：唯一性唯一性 id id选择器的书写形式：【选择器的书写形式：【htmlhtml：id=”id=”名称名称” ” css css：# #名称名称color:red;ront-size:20px color:red;ront-size:20px 】通配符选择符：通配

21、符选择符：用用* *表示表示 * * 表示所有的表示所有的HTMLHTML元素【元素【* *color:red;ront-color:red;ront-size:20pxsize:20px】并列选择器并列选择器: :群组选择器群组选择器 并列选择器可以把不同的选择器并列一起来控制，每个并列选择器可以把不同的选择器并列一起来控制，每个选择器中间可以用英文都好隔开。选择器中间可以用英文都好隔开。并列选择器是以三种基础选择器为基础的。【并列选择器是以三种基础选择器为基础的。【H1,h2,h3,.fei,#fei H1,h2,h3,.fei,#fei 】/ 无意义标签，可以从当选择器做到精确控制对象。

22、无意义标签，可以从当选择器做到精确控制对象。我是我是肖鹏飞肖鹏飞，来自美丽的，来自美丽的安徽安徽，欢迎到我的家乡做客欢迎到我的家乡做客css注释：注释：/* 这里这里是注释内是注释内容容 */*表示通配符：可表示通配符：可以代表任意元素以代表任意元素并列选择器可以同并列选择器可以同时选择多种元素内时选择多种元素内容容span精确选择到精确选择到某个字某个字乱码：乱码：检检查一下指查一下指定编码格定编码格式式Page 25作用：作用：用来网页布局用来网页布局border border 用来指边框用来指边框 border border 里面有三个属性值。分别是：粗细（里面有三个属性值。分别是：粗细

23、（2px 2px 两个像素两个像素）；）； 颜色（颜色（red red 红色红色）；线型（）；线型（solid solid 实线实线）（）（dotted dotted 虚线虚线）；）；书写形式：书写形式：HTMLHTML：内容内容 CSS CSS ：.xpfborder:red 2px solid;.xpfborder:red 2px solid;内容内容1.1.改变四个方向的边框属性改变四个方向的边框属性上边框：上边框：border-top下边框：下边框：border-bottom左边框：左边框：left右边框：右边框：right改变任意一个方向的书写形式：改变任意一个方向的书写形式：HTM

24、L：内容内容CSS：.xpfborder-left:2px red solid;可以同时改变四个方向的属性，两个属性之间用很好隔开可以同时改变四个方向的属性，两个属性之间用很好隔开默认布局：默认布局：在在divdiv布局里面默认的布局方式布局里面默认的布局方式 为上下布局（文档流）为上下布局（文档流）扩展：扩展：相对值绝对值相对值绝对值Width:200px绝对值绝对值Width：50%相对值相对值200%200%在浏览器中默认大小扩大两倍（相对值）在浏览器中默认大小扩大两倍（相对值）Font-size Font-size 字体的大小字体的大小BackgroungBackgroung：red

25、red 背景颜色背景颜色 【URLURL（）（）】背景图片背景图片backgroundbackground：背景背景 URL URL：路径路径 补充：补充：href href 链接链接 src src ；url url 路径路径默认情况下图片会在水平垂直方向平铺，如果要取消用默认情况下图片会在水平垂直方向平铺，如果要取消用repeatrepeat。他有三个常用。他有三个常用值，分别为：值，分别为：no-repeatno-repeat禁止平铺禁止平铺 repeat-xrepeat-x水平平铺水平平铺 repeat-yrepeat-y垂直平铺垂直平铺 。Position Position 定位定位

26、 位置有两个字位置有两个字 ( (距离左侧一个值；距离右侧一个个值距离左侧一个值；距离右侧一个个值 两个数值两个数值直接写属直接写属性值，当只有一个的时候距离上方；左边的距离都是由这一个值决定的性值，当只有一个的时候距离上方；左边的距离都是由这一个值决定的) )BackgroungBackgroung和和BorderBorder一样有多个值，可以同时写在属性的一样有多个值，可以同时写在属性的 后面用空格分开，不后面用空格分开，不同的属性同的属性要用分号分开。要用分号分开。背景图片在背景图片在DIV元素里的位置有元素里的位置有9种分别是：种分别是： 水平：水平： left center righ

27、t 垂直：垂直：top center bottom浮动：浮动：float float ； floatfloat：left left 左浮动左浮动 ； floatfloat：rightright右浮动右浮动浮动：浮动：就是让就是让DIVDIV在页面飘起来，像飘在水上一样在页面飘起来，像飘在水上一样所谓的向所谓的向左浮动左浮动，就是先浮起来，然后向左漂移。，就是先浮起来，然后向左漂移。所谓所谓先浮起来先浮起来，就是从第一层背景色的位置向上浮动到第二层的背景图片；，就是从第一层背景色的位置向上浮动到第二层的背景图片；我们给红色的盒子向左浮动之后，蓝色的盒子不见了；因为：红色盒子从第一层到我们给红色的

28、盒子向左浮动之后，蓝色的盒子不见了；因为：红色盒子从第一层到了第二层，第一层空出来了；按照浏览器的规则，空出来的第一层由后面相邻的元了第二层，第一层空出来了；按照浏览器的规则，空出来的第一层由后面相邻的元素来补充。素来补充。要同时实现多个元素在水平方向排列，我们可以给每个元素同时加上左浮动，或者要同时实现多个元素在水平方向排列，我们可以给每个元素同时加上左浮动，或者右浮动。右浮动。两个小盒子在大盒子内部两个小盒子在大盒子内部父子选择器：父子选择器：在大标签下面的几个小标签可以同时选择，从而改变属性。在大标签下面的几个小标签可以同时选择，从而改变属性。例如：例如：.div1 ul li acol

29、or:red;.div1 ul li acolor:red;他表示他表示div div 这个元素下面的这个元素下面的ul ul 下面的下面的li li 下面的下面的a a .div1,.div2color:red;.div1,.div2color:red;他表示他表示 div1 div1和和div2 div2 两个对应的对象两个对应的对象外边距：外边距：以盒子的边框为界；两以盒子的边框为界；两个盒子向外的距离。个盒子向外的距离。外边距我们用外边距我们用margin margin 表示，外表示，外边距有四个方向，边距有四个方向，分别为：分别为：Margin-top Margin-top 上外边距

30、上外边距Margin-bottomMargin-bottom下外边距下外边距Margin-leftMargin-left左外边距左外边距Margin-rightMargin-right右外边距右外边距补充：补充：marginmargin：100px100px 表示上下表示上下左右四个方向外边距都是一百左右四个方向外边距都是一百内边距：内边距：以盒子的边框为界；向内以盒子的边框为界；向内与内容之间的距离，内容可以是文与内容之间的距离，内容可以是文字图片盒子等元素。字图片盒子等元素。内边距用内边距用 padding padding 来表示；内边距来表示；内边距也有四个方向，也有四个方向，分别为：分

31、别为：padding-toppadding-top上内边距上内边距Padding-bottomPadding-bottom下内边距下内边距Padding-leftPadding-left左内边距左内边距Padding-rightPadding-right右内边距右内边距补充：补充：paddingpadding：100px 100px 表示上下左表示上下左右四个方向外边距都是一百，内边右四个方向外边距都是一百，内边距给了多少，盒子对应的宽度高度距给了多少，盒子对应的宽度高度就相应的增加了多少。就相应的增加了多少。扩展知识：扩展知识：盒子居中把盒子的外边距设置为自动盒子居中把盒子的外边距设置为自动

32、 auto; auto;Margin:auto;Margin:auto;盒子里面的文字居中盒子里面的文字居中Text-alignText-align：left/center/right;left/center/right;盒子内部文字垂直方向居中；盒子内部文字垂直方向居中；让文字的行高与盒子的高度保持一致；行高用让文字的行高与盒子的高度保持一致；行高用line-heightline-height表示；表示；伪类选择器：伪类选择器：当鼠标放上去改变字体颜色，增加下划线；当鼠标放上去改变字体颜色，增加下划线；Text-decoration Text-decoration 有下划线有下划线 none

33、 none 无下划线无下划线HoverHover相当于鼠标；基础选择器相当于鼠标；基础选择器+hover+hover .div1 ul li a:color:red;text-decoration:none; .div1 ul li a:color:red;text-decoration:none; 蓝色字体表示把列表文字的下划线去掉蓝色字体表示把列表文字的下划线去掉 .div1 ul li a:hovercolor:red;text-decoration:underline; .div1 ul li a:hovercolor:red;text-decoration:underline; 蓝色

34、字体表示把列表文字有下划线蓝色字体表示把列表文字有下划线 List-style:none; List-style:none; 蓝色字体表示把列表前面的园点去掉。蓝色字体表示把列表前面的园点去掉。Page 33盒子原来的高度为盒子原来的高度为300px300px，给了，给了100px100px上上内边距之后，高度也内边距之后，高度也增加相应的距离成了增加相应的距离成了400px;400px;要保持原来盒子的总要保持原来盒子的总高度不变，我们需要高度不变，我们需要在盒子高度里面减去在盒子高度里面减去相应的值；相应的值；Text-decorationText-decoration 有下划线有下划线

35、none none 无下划线无下划线DivDiv：宽度：宽度 高度高度 背景颜背景颜色色 边框边框 浮动浮动 内外边距内外边距文字水平垂直居中，以上文字水平垂直居中，以上属性属性 在在 li li 里面一样适应。里面一样适应。* *margin:0;padding:0;margin:0;padding:0; 把内外边距全部清除，把内外边距全部清除，让他方便漂浮。让他方便漂浮。水平居中：水平居中：text-aligntext-align：centercenter垂直居中：垂直居中：行高等于元素高度。行高等于元素高度。行高用行高用line-heightline-height表示；表示；文字加粗：文

36、字加粗：Font-weightFont-weight：boldbold；文字定位：文字定位：水平：水平：left center rightleft center right；垂直：行高垂直：行高 具体数值：具体数值：123px 456px123px 456px切换面板：切换面板：插入插入spryspry选项卡式面板，选项卡式面板，去掉列表符号：去掉列表符号：自定义列表符号：自定义列表符号：list-style-image:URL“”list-style-image:URL“”Page 34Page 36下载网页，新建文件夹，在文件夹中建立几个文件夹，将源代码复制到下载网页，新建文件夹，在文件夹

37、中建立几个文件夹，将源代码复制到dwdw上，在上，在dwdw上修上修改路径。修改的路径包括图片改路径。修改的路径包括图片imgimg；jsjs；style ,cssstyle ,css； 轮播图；轮播图；导入视频导入视频网站复制还原具体步骤：网站复制还原具体步骤：首页还原：首页还原：1.1.下载网页到电脑上，下载网页到电脑上，2 2新建文件夹修改名字，新建文件夹修改名字，3.3.在新建文件夹中新建三个文在新建文件夹中新建三个文件夹分别为件夹分别为images cssimages css（stylestyle） js js（scriptscript）文件。）文件。4.4.将网页中的文件分类拉近新

38、将网页中的文件分类拉近新建的不同文件夹中。建的不同文件夹中。5 5打开网页查找源代码，打开网页查找源代码，6.6.将源代码复制，粘贴到将源代码复制，粘贴到dwdw上，上，7.7.把网页保把网页保存在新建文件夹中要求与新建的存在新建文件夹中要求与新建的css js imagescss js images在同一路径下。在同一路径下。8.8.在在dwdw中查看刚保存的中查看刚保存的网页文件，网页文件，9.9.修改保存的网页路径，修改保存的网页路径，10.10.再一次保存全部。再一次保存全部。11.11.打开网页查看效果。打开网页查看效果。模板：模板：文章详情页和图片详情页用的是一个模板。文章详情页和

39、图片详情页用的是一个模板。文章详情页图片详情页模板，文章列表页模板，图片列表页模板，频道封面页模板文章详情页图片详情页模板，文章列表页模板，图片列表页模板，频道封面页模板其他网页从第五步开始与首页一样其他网页从第五步开始与首页一样Page 371.1.绑定域名绑定域名+ +空间空间 2.2.修改路径修改路径 ，修改导航，修改导航 3.3. 添加调用列表页模板添加调用列表页模板+ + 导航导航4.4.添加调用文章列表添加调用文章列表5.5.调用详情页内容调用详情页内容6.6.修改列表页和列表标题修改列表页和列表标题7.7.培训视频，学院图集培训视频，学院图集 / / 换导航换模板内容换导航换模板

40、内容8.8. 当前位置调用当前位置调用9.9.调用图列中模板内容调用图列中模板内容10.10.调用分页标签调用分页标签 上一篇下一篇上一篇下一篇1111修改调用首页文章图片列表内容修改调用首页文章图片列表内容12.12.调用所有网页中最新图文热点推荐调用所有网页中最新图文热点推荐13.13.联系我们，在线报名，证书查询联系我们，在线报名，证书查询020Page 381.1.注册域名并解析注册域名并解析2.2.登录主机控制面板登录主机控制面板 （）3.3.打开打开flashxpflashxp连接主控面，连接主控面， （FT

41、BFTB地址，用户名，密码）地址，用户名，密码）4.4.将复原的网页文件夹移动将复原的网页文件夹移动 到到uploadsuploads下面的下面的templetstemplets5.5.压缩压缩uploadsuploads文件夹文件夹6.6.上传上传uploadsuploads到到flashxpflashxp7.7.安装网站程序（域名安装网站程序（域名/install/install /index.php /index.php）7.7.主控面主控面-文件管理文件管理-压缩包（压缩包（uploadsuploads）-解压解压 -安装网站程序安装网站程序-设置配置参数设置配置参数-安装后登录后台安

42、装后登录后台 （域名（域名/dede/dede）扩展：扩展：1.1.添加导航栏目添加导航栏目 2.2.修改网页标题修改网页标题 3.3.换模板（自定义替换默认）换模板（自定义替换默认） 4.4.修改格式修改格式扩展：扩展：换模板：系统换模板：系统-系统基本参数系统基本参数-默认网站风格默认网站风格- 选择自定义模板名称选择自定义模板名称 生成生成-更新主页更新主页-选择主页模板选择主页模板-开始生成开始生成 -浏览浏览-OK-OK修改网页格式：修改网页格式：html-htmhtml-htm : :模块模块-文管器文管器-templets-templets-自定义模板自定义模板 名称名称-选择网

43、页选择网页-改名改名-OK-OKPage 39Page 40Page 41Page 42Page 43都有哪些模板：都有哪些模板：1.1.主页模板（主页模板（index.htmindex.htm）2.2.文章频道封面（文章频道封面（index-article.htmindex-article.htm）3.3.默认文列模板（默认文列模板（list-article.htmlist-article.htm）4.4.文章内容页模板（文章内容页模板（article-article.htmarticle-article.htm）5.5.图列模板（图列模板（list-img.htmlist-img.htm）

44、6.6.导入的头部模板（导入的头部模板（head.htmhead.htm）要修改的几种路径：要修改的几种路径：1.style 1.style 路径路径2.srcipt 2.srcipt 路径路径3.images 3.images 路径路径4.embed 4.embed （swfswf）5.5.iframeiframePage 44Page 451.1.删除模板源代码中首页导航删除模板源代码中首页导航2.2.在网栏管中增加导航栏目在网栏管中增加导航栏目3.3.调用织梦到模板中调用织梦到模板中1.1.删除源代码中导航的时候留下首页和第二个导航不删删除源代码中导航的时候留下首页和第二个导航不删2.2

45、.最后一个列表下面的最后一个列表下面的里面的百度统计也删除里面的百度统计也删除如何调用织梦首页导航：如何调用织梦首页导航：1.1.开始结束标签放在导航开始结束标签放在导航前面和后面前面和后面2.2.站点根网址替换源代码中首页前面的链接站点根网址替换源代码中首页前面的链接3.3.栏目名称替换源代码中对应的名称栏目名称替换源代码中对应的名称4.4.栏目链接对应源代码中名称前的链接栏目链接对应源代码中名称前的链接扩展：扩展：1.1.调用顶级栏目在调用的开始标签里面写上调用顶级栏目在调用的开始标签里面写上 type=”top”type=”top”2.2.添加二级栏目添加二级栏目-调用二级栏目调用二级栏

46、目 调用二级栏目在开始标签中写调用二级栏目在开始标签中写type=”son”type=”son”并且要指定并且要指定 一级栏目的一级栏目的id id 号号 书写方式：在开始标签后面写上书写方式：在开始标签后面写上 type=”son” typeid=”type=”son” typeid=”数字数字”3.3.调用指定栏目调用指定栏目 首先要把开始结束标签中的首先要把开始结束标签中的 channel channel 更换成更换成 type type ，然后直接指定要，然后直接指定要 调取栏目的调取栏目的idid号，书写方式号，书写方式 ：在开始里面写上：在开始里面写上typeid=”typeid=

47、”数字数字”Page 46核心核心-网栏管网栏管-选择栏目选择栏目-更改更改-高级选项高级选项-列表模板列表模板-浏览浏览-选择模板选择模板-确定确定-OK-OK生成生成-更新栏目更新栏目-选择栏目选择栏目-开始生成开始生成-浏览浏览-OK-OK1.1.文列和图列添加模板步骤相同，只是需要在对应的栏目里去添加不同的列表模板，文列和图列添加模板步骤相同，只是需要在对应的栏目里去添加不同的列表模板，2.2.详情页步骤和详情页步骤和文列文列 图列相似，不同之处在于详情页要在文章模板中选择浏览模板，图列相似，不同之处在于详情页要在文章模板中选择浏览模板，3.3.封面模板首先在更改后面选择常规选项，在栏

48、目属性里选择频道封面，然后在高级封面模板首先在更改后面选择常规选项，在栏目属性里选择频道封面，然后在高级 选项封面模板中选择浏览模板，最后在栏目内容里添加内容。选项封面模板中选择浏览模板，最后在栏目内容里添加内容。Page 47Page 481.1.建立新的头部导航模板建立新的头部导航模板2.2.调用头部标签调用头部标签1.1.首页首页-找到头部内容找到头部内容-剪切剪切-打开打开DW-DW-粘贴到粘贴到DWDW中中-修改编码格式修改编码格式-保存（保存（htmhtm格式）格式） 模板模板-默模管默模管-上传上传 -在列表模板中头部调用在列表模板中头部调用2.2.如何头部调用：模板如何头部调用：模板-默模管默模管-列表模板列表模板-修改修改-删除头部删除头部-打开织梦打开织梦-系统标签系统标签- 头部调用头部调用-粘贴在删除的头部位置粘贴在删除的头部位置-保存保存-OK-OK3.3.生成生成-更新主页更新主页-开始更新开始更新-浏览浏览-OK-OK其他模板在进行头部调用只需进行三个步骤：其他模板在进行头部调用只需进行三个步骤：删除头部删除头部-头部调用头部调用-生成生成-OK-OKPage 49Page 501.1.添加文章添加文章2.2.调用文档调用文档1.1.添加文章：添加文章：核心核心-网栏管网栏管-选择栏目选择栏目-内容内容-添加文档添加文档-填写内容填写内容