您的位置：首页 > 其它

umbraco教程 之手把手教你用umbraco7.4.3做一个小网页【图解】

2016-07-08 15:51 746 查看
手把手教你做个umbraco 7.4.3版本的小网页。

网页效果如下图



网页的标题还有正文是可以通过后台来更改的，这样我们就可以通过后台来控制网页文字的显示内容了。

总共分三步：

1、制作doucument types

2、制作templates

3、制作content

具体步骤：

创建一个包涵一个标题和正文的doucument type

1、创建一个【Document Type】



2、创建【Document Type】以后，在Enter a name 的地方填写document type的名字【newsDetail】，如下图所示



3、点击【Add new tap】添加一个tap，并给tap命名news。



4、点击【Add property】添加属性，出现Property settings界面，如下图所示



5、在【Property setting】页面输入相关信息，点击【Add editor】添加一个编辑器，点击【Add editor】以后出现select editor界面，因为是要做标题所以我们选textbox这个编辑器，然后点击【submit】。如下图所示。（此处我们把这个作为标题）



6、添加完标题以后，再次点击【add Property】我们用同样的方法添加一个正文，因为正文可能包括文字图片等信息，所以我们在select editor界面选择RichText 这个编辑器。如下图所示：



7、好了，document type制作完毕，包含了一个标题和正文。如下图所示：



创建一个Templates

1、在创建document type以后，系统会默认创建一个对应的templates模版。下图中红框内的部分是我们要手动写的html代码，css样式我们也可以写在html代码里面，但是此处我们专们写个css文件。

html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>东方价值线资讯</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/ty_rule.css" rel="stylesheet">
</head>
<body>
<div id="agreement" class="agreement">

<h1>这是标题</h1>

这是正文。

</div>

</body>
</html>


2、把html代码贴到templates里面，如下图



3、

这一步正重要哦

我们选中html中“这是标题”然后点击下图红框内的按钮【Insert umbraco page field】添加标题内容，在弹出的【choose value】界面选择我们上面创建的document type中的【newsDatailTitle】（这个名字是我们在定义document type 时自己起的名字）然后点击【insert】，如下图所示。然后我们用同样的方法选中html中的“这是正文”，然后插入一个【newsDetailBody】。





4、上一步骤完成以后效果如下图所示：



5、我们添加一个css文件，如下图所示





css文件内容如下

@charset "utf-8";
/* CSS Document */

*{margin:0 auto; padding:0;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
*{padding: 0;margin: 0 auto;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
li{list-style: none;}
body{background:rgb(253,253,253) repeat;color: rgb(41, 41, 41);}
.agreement{ width:100%;display:block;font:15px '微软雅黑'; line-height:1.5em; width:100%; padding:3%;box-sizing:border-box;}
.agreement h1{text-align:center; border-bottom:1px dashed #d9d9bd; line-height:2.5em;font-weight: bold;font-size: 1.25em;}
.agreement h2{font-family:'微软雅黑';}/*arial, sans-serif*/
.agreement h1,.agreement h2,.agreement p,.agreement li{margin:0px 0px 15px 0px;word-wrap:break-word;}
.agreement p{padding-left:1%;}
.agreement li p{padding-left: 2%;}
article{padding-left:2.5em;}
.green{color:rgb(32, 147, 97); font-style:oblique;}
.red{color:red;}
.note{color: rgb(146,146,146);font-family: '微软雅黑';}
.bold{font-weight: bold;}




制作content

1、根据下图点击【newsDetail】创建一个内容页





2、给内容页起个名字“news1”，然后填写标题和正文内容，最好点击save and publish按钮，保存并发布内容页。如下图



3、点击【properties】属性选项卡，然后点击红框部分就可以浏览我们所做的网页了



4、大功告成，具体效果如下图



通过【制作content】这一步我们可以写出很多个相同结构的页面哦。

以上只是一个告诉你如何制作并发布一个动态页面。如果你是做一个动态网站，可以发散你的思维，你就可以制作出一个漂亮功能强大的网站了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  umbraco cms 文章发布系统
相关文章推荐
新的分享
章节导航