版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目6制作新闻系统模板解析项目导入云林科技将在网上实时发布公司的各种新闻，因此需要开发一个新闻系统，唐经理把任务交给技术部赵工来完成，并提出如下需求：首先，因为此系统面向所有的互联网用户，所以其界面要美观、大方，并且要有一定的专业性；其次，要求新闻发布和管理很轻松，管理员只需设置标题、内容和图片等，系统就能自动生成对应的新闻网页。新闻系统界面设计如图6-1所示。
图6-1新闻系统界面设计【项目分析】为了更好地完成云林科技的新闻系统，技术部将此项目分成前端界面设计和系统后台管理设计与制作两部分来完成。本项目将学习新闻系统界面设计，包括用到的HTML5页面布局技术、CSS3页面美化技术、模板解析技术以及各种浏览器兼容技术等。再综合运用这些知识来完成云林科技的新闻系统的前端界面设计。【知识目标】学习HTML5和常用布局方法。学习CSS3和页面显示控制技术。
学习自定义模板解析技术。
学习模板解析案例的具体实施方法。【能力目标】能够熟练使用HTML5的常用布局方法。能够熟练使用CSS3页面美化方法。能够掌握自定义模板解析技术。能够综合运用上述技术来实施新闻系统的前端界面设计。【素质目标】具有知识产权的保护意识。6.1HTML简介HTML不是一种编程语言，而是一种标记语言，其用一套标记来描述网页。网页文件本身是一种文本文件，通过在文本文件中添加标记，告诉浏览器如何显示其中的内容，如文字如何处理、画面如何安排、图片如何显示等。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其内容，对书写出错的标记将不指出其错误且不停止其解释执行过程，仅通过显示效果来分析出错的原因和部位。
一个网页对应多个HTML文件，HTML文件以“.htm”或“.html”为扩展名。HTML网页是由元素和标签构成的。
元素是符合文档类型定义（DocumentTypeDefinition，DTD）的文档组成部分，元素指的是从开始标签到结束标签的所有代码，如title（文档标题）、img（图像）、table（表格）等，元素名不区分大小写。HTML用标签来规定元素的属性和它在文档中的位置。标签分为单独出现的标签和成对出现的标签（以下简称成对标签）两种。大多数的标签是成对出现的，由开始标签和结束标签组成。开始标签的格式为<元素名>，结束标签的格式为</元素名>。成对标签用于规定元素所含的范围。1．<html>标签<html>标签是文档标识符，它是成对出现的，开始标签<html>和结束标签</html>分别位于文档的最前面和最后面，明确地表示文档是以HTML编写的。该标签不带有任何属性。2．<head>标签
一般把HTML文档分为文档头部和文档主题两个部分。文档主题部分就是在浏览器用户区看到的内容。而文档头部用来规定该文档的标题（出现在浏览器窗口的标题栏中）和文档的一些属性。
HTML文档的标签是可以嵌套的，即在一对标签中可以嵌套另一对子标签，用来规定母标签所含范围的属性和其中某一部分内容。嵌套在<head>标签中使用的子标签主要有<title>、<meta>、<link>和<style>。（1）<title>标签是成对出现的，用来规定HTML文档的标题。（2）<meta>标签可提供有关页面的元信息，其属性定义了与文档相关联的名称/值对，如其charset属性可定义文档的字符集：<metacharset="utf-8">。（3）<link>标签：定义两个连接文档之间的关系，只能存在于<head>部分，不过它可出现任意次数。（4）<style>标签：定义HTML文档的样式信息，规定HTML元素如何在浏览器中呈现。它有3个重要的属性：属性type，其值为“text/css”，定义内容类型；属性media，其值为screen、tty、tv、projection、handheld、print、braille、aural、all，表示样式信息的目标媒介；属性scoped，其值为“scoped”，是HTML5的新属性，表示所规定的样式只能应用到style元素的父元素及其子元素。3．<body>标签
<body>标签是成对标签。在<body></body>之间的内容将显示在浏览器窗口的用户区内，它是HTML文档的主体部分。
在<body>标签中可以规定整个文档的一些基本属性，如表6-1所示。属性描述bgcolor指定HTML文档的背景色text指定HTML文档中文字的颜色link指定HTML文档中待连接超链接对象的颜色alink指定HTML文档中连接中超链接对象的颜色vlink指定HTML文档中已连接超链接对象的颜色background指定HTML文档的背景文件表6-1
<body>标签的基本属性4．文档类型标签<!DOCTYPE>
<!DOCTYPE>声明必须位于HTML文档的第一行，也就是位于<html>标签之前。该标签告知浏览器文档所使用的HTML规范。在HTML文档中规定<!DOCTYPE>是非常重要的，这样浏览器就能了解预期的文档类型。5．注释标签<!--...-->
注释标签<!--...-->用于在源代码中插入注释。注释不会显示在浏览器中。6．布局标签
HTML页面主要用表6-2所示的标签来进行布局。标签描述<div>定义HTML文档中的分隔（division）或部分（section）<span>定义行内元素<header>定义网页或文章的头部区域<footer>定义网页或文章的尾部区域。可包含版权、备案等内容<section>通常标注为网页中的一个独立区域<article>定义页面独立的内容区域<aside>定义页面的侧边栏内容<details>定义周围主内容之外的内容块，如注解<summary>定义details元素可见的标题<nav>标注页面导航链接。包含多个超链接的区域表6-2
常用的布局标签7．文章标签
常用的文章标签如表6-3所示。标签描述<h1>～<h6>定义标题。在HTML5中不支持<h1>～<h6>的“align”属性<p>定义段落。在HTML5中不支持其“align”属性<br/>插入简单的换行符，它没有结束标签<hr/>定义内容中的主题变化，并显示为一条水平线<pre>定义预格式化的文本<address>定义文档作者或拥有者的联系信息<time>定义日期或时间。其属性“datetime”用于定义元素的日期和时间表6-3
常用的文章标签8．列表标签
在HTML页面中，列表主要分为两种类型，一种是有序列表，另一种是无序列表。前者用数字或字母来标记项目的顺序，后者则使用符号来记录项目的顺序。常用的列表标签如下。（1）<ul>
定义无序列表。可使用CSS来定义列表的类型。（2）<ol>
定义有序列表。有序列表可以是数字或字母顺序。可使用<li>标签来定义列表项，使用CSS来设置列表的样式。其属性“start”规定有序列表的起始值；属性“reversed”规定列表顺序为降序；属性“type”的值有“1”“A”“a”“I”“i”，规定在列表中使用的标记类型。（3）<li>
定义列表项，有序列表和无序列表中都使用<li>标签。9．图像标签
图像标签用于定义图像，注意加上“alt”属性。10．超链接标签
超链接标签用于定义超链接，用于从一个页面链接到另一个页面。它最重要的属性是“href”，该属性指定链接的目标。
属性“target”，其值有“_blank”“_parent”“_self”“_top”，表示在何处打开目标URL，它仅在“href”属性存在时使用。
在所有浏览器中，链接的默认外观是：未被访问的链接带有下画线且是蓝色的，已被访问的链接带有下画线且是紫色的，活动链接带有下画线且是红色的。
层叠样式表（CascadingStyleSheets，CSS）是一种用来表现HTML或可扩展标记语言（ExtensibleMarkupLanguage，XML）等文件样式的计算机语言，是能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML的表现而言，CSS能够对网页的布局、字体、颜色、背景和其他效果进行像素级的精确控制，并且拥有对网页对象和模型样式编辑的能力，能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言之一。CSS能够根据不同使用者的理解能力，简化或者优化写法，有较强的易读性。6.2
CSS简介1．CSS使用方法
在网页上使用CSS有以下3种方法。（1）外联式
外联式也称为外部样式，就是将网页链接到外部样式表。当样式需要应用到很多页面时，外部样式表将是理想的选择。使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。（2）嵌入式
嵌入式也称为内页样式，就是在网页上创建嵌入的样式表。当单个文件需要特别样式时，就可以使用嵌入式样式表。（3）内联式
内联式也称为行内样式，就是将内嵌样式应用到各个网页元素上。当特殊的样式需要应用到个别元素时，就可以使用内联式。使用内联式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。
CSS的优先级：内联式>嵌入式>外联式>浏览器默认设置。2．CSS语法
CSS规则由选择器、样式属性和属性值组成，其语法格式如下。选择器1,选择器2,选择器3,…{属性1:值1;属性2:值2;属性3:值3…}
选择器通常只有一个，也可以有多个；若有多个，则相互之间用逗号分开。
选择器通常有以下几种。（1）通配选择器“*”：代表所有对象，即页面上所有对象都会应用该选择器定义的样式，一般用于网页字体、字体大小、字体颜色、网页背景等公共属性的设置。（2）标签选择器：即用HTML中的标签名称作为选择符，页面中的所有同类标签都会应用该选择器定义的样式。（3）id选择器：为HTML标签添加id属性，CSS样式中以“#”加上id名称作为选择器，页面中id值相同的所有标签都会应用该选择器定义的样式。注意，id是区分大小写的。（4）class选择器：为HTML标签添加class属性，CSS样式中以“.”加上class名称作为选择器，页面中class值相同的所有标签都会应用该选择器定义的样式。注意，class是区分大小写的。（5）伪类及伪对象选择器：主要用于超链接标签的样式设置，即在原有选择符的基础上添加样式。3．布局
在HTML5中通过布局标签可以将整体的布局拆分成各个部分的布局。（1）多列
通过CSS3可以创建多列来对文本进行布局。常见的多列属性如表6-4所示。属性描述column-count规定元素应该划分的列数column-fill规定如何填充列，是否进行协调column-rule设置列的宽度、样式和颜色规则column-gap规定列之间的间隔column-span规定元素应横跨多少列column-width规定列的宽度表6-4
常见的多列属性（2）display
display规定元素应该生成的框的类型，它可能的值有很多。常见的display属性如表6-5所示。属性描述none隐藏对象inline指定对象为内联元素block指定对象为块元素list-item指定对象为列表项目table指定对象作为块元素级的表格table-caption指定对象作为表格标题table-cell指定对象作为表格单元格table-row指定对象作为表格行table-column指定对象作为表格列flex将对象作为弹性盒显示。这是CSS3中新增的inline-flex将对象作为内联块级弹性盒显示。这是CSS3中新增的表6-5
常见的display属性（3）flex
flex为flex-grow、flex-shrink和flex-basis的简写属性，用于设置或检索弹性盒模型对象的子元素如何分配空间。如果缩写为“flex:1”，则其计算值为“110%”。如果缩写为“flex:auto”，则其计算值为“11auto”。如果缩写为“flex:none“，则其计算值为“00auto”。如果缩写为“flex:0auto”或者“flex:initial”，则其计算值为“01auto”，即“flex”初始值。如果元素不是弹性盒模型对象的子元素，则flex属性不起作用。flex-flow是flex-direction和flex-wrap属性的复合属性，用于设置或检索弹性盒模型对象的子元素排列方式。flex-direction属性定义flex容器的主轴方向来决定flex子项在flex容器中的位置。order属性用于设置或检索弹性盒模型对象的子元素出现的顺序。6.3.1模板解析原理
模板解析的核心可以简单概括为变量替换：将不包含任何PHP代码的网站界面指定为模板文件，并将这个模板文件中有活动的内容，如数据库输出、用户交互等部分，定义成使用特殊定界符包含的变量，然后放在模板文件中相应的位置或者存入数据库中；当用户浏览时，由PHP程序打开该模板文件或者从数据库中读取，并将模板文件中定义的变量替换。这样，模板中的特殊变量被替换为不同的动态内容就能输出需要的页面。6.3
模板解析技术1．定义变量
在模板中定义一个变量，变量名以英文字母开头，如“varname”，语法格式如下。<!--keyword:varname-->
注意，上面的符号中，<、!、-、:等都是英文半角下的符号，下面没有特别说明的，也是相同的设置。6.3.2
模板解析语法
系统中内置了一些变量，部分如下。site_name：网站标题。search_keyword：网站的搜索关键字、站点描述。main_item_list：网站导航栏。about：网站页脚信息。index_websiteservice：网站客服信息。2．定义链接
在模板中定义一个获得栏目分类的链接，栏目分类为中文，如“图片新闻”，语法格式如下。<!--keyfun::L:图片新闻-->3．定义列表
在模板中定义一个获得栏目分类的列表，栏目分类为中文，如“国内要闻”，语法格式如下。<!--keyfun::I:国内要闻,0,1,0,0,0,11-->
注意，在上述定义中，栏目分类后的参数是可选的。第一个参数是返回信息标志，若为1，则直接返回相关信息；若为0，则直接显示信息。默认为0。第二个参数是分页显示标志，若为1，则不显示分页信息；若为0，则显示分页信息。默认为1。第三个参数是时间显示标志，若为1，则显示时间；若为0，则不显示时间。默认为0。第四个参数是限制查询标志，若为1，则添加limit限制查询；若为0，则不限制。默认为0。第五个参数是查询结果的索引值，可为非负整数，默认为0，表示从第一条数据开始查询。此参数需第四个参数为1时才有效。第六个参数是查询结果返回的数量，可为非负整数，默认为11，表示最多返回11条数据。此参数需第四个参数为1时才有效。
接到项目后，赵工分析了项目要求，把此项目整体分成两个任务来实现：制作新闻系统界面（包括首页与内页，并进一步做成模板页面）和编写PHP代码来解析模板。【项目实现】新闻系统界面设计1．任务分析
新闻系统的界面主要包括首页和内页，其中首页最重要，是该系统的门面；内页一般是根据首页的风格来制作的，但它与首页也有些不同，所以某些模块需要进行个性化设计。制作模板，一般根据需求，先用Photoshop之类的软件设计效果图，客户满意并确认后再据此制作HTML页面，进一步制作成模板页面。任务一制作新闻系统界面
2．代码实现
新闻系统界面设计采用自定义模板解析技术，下面讲解具体实现过程。为了方便学习，现将新闻系统界面文件清单列出（详情请参见电子素材），如表6-6所示。编号文件名（含相对路径）功能1css/common.css样式表2js/LoadPrint.jsJavaScript输出程序3image/banner.jpg网站横幅图片4image/menu_bg.jpg菜单背景图片5image/icon1.jpg信息列表图片6image/noimage.gif图片新闻无图片时的默认图片7webuser.php数据库基本设置，界面与应用程序共用8mysql.php连接MySQL服务器，界面与应用程序共用9charset.php设置字符集，界面与应用程序共用10fun.php自定义函数库11templates.php模板解析主程序12index.php网站首页模板解析程序13p.php网站内页模板解析程序及接口程序14show.php网站信息页模板15tp_home.htm网站首页模板16tp_main.htm网站内页模板表6-6
新闻系统界面文件清单1．任务分析
根据模板设计实现的一般过程，需要解决两大问
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 煤化工 PLC 系统操作安全培训
- 2026北师大二下分苹果互动课件
- 新苏教版科学五年级上册1-4《七色光》表格式教学设计
- 从传统化疗到靶向治疗
- Unit 1 Friendship Section 4 Extending and developing competencies Focusing on culture 教学设计2026-2027学年沪教版英语七年级上册
- 2026四下数学第五单元课件
- 2026年秋季学期《开学第一课》观后感（高中生10篇）
- 雨水调蓄池防水施工细则
- 2027届河南省新乡市卫辉市化学九年级第一学期期末联考试题含解析
- 2027届江苏省仪征市第三中学九年级化学第一学期期中综合测试试题含解析
- 小学四年级体育全年级全册教案
- 说课的技巧和方法专题讲座
- 《销售管理实务》（李宁）011-5 教案 第2课 熟悉销售人员必备的职业素养
- 第四章-农田草害课件
- 道路运输驾驶员继续教育培训
- 国网公司电气《安规》
- 煤矿建设安全规范
- 大连海事大学3300航海英语题库词汇总结归纳
- prs7910数据网关机技术使用说明书
- GA 1801.1-2022国家战略储备库反恐怖防范要求第1部分：石油储备库
- GB/T 701-2008低碳钢热轧圆盘条
评论
0/150
提交评论