自定义shareoint主页 [英] customize shareoint home page
问题描述
我想在共享点中自定义主页，例如 https://www.templatemonster.com/demo/45726.html 使用f12开发人员工具时，内容会居中，我发现它是
< div class ="container_12">
< div class ="row">
< div class ="grid_12">
< h1>< a href =" index.html" WeatherChannel</a></h1>
< div class ="fright">
< div class ="clearfix">
< ul class ="top_menu clearfix">
< li>< a href =#">登录</a> |</li>
< li>< a href =#"> Join</a> |</li>
< li>< a href =#"> Settings</a></li>
</ul>
< div class ="temp clearfix">< a href =#" class ="cels"> C°/a> a href =#" class =远" F°/a d/div.
</div>
</div>
</div>
</div>
< div class ="row">
< div class ="grid_12">
< nav class =全角">
< ul class ="sf-menu clearfix sf-js-enabled">
< li class =当前">< a href ="index.html"< Home</a</li>
< li>< a href =" index-1.html"天气指南< span>& nbsp;& nbsp;»</span</a>
< ul style =""
< li>< a href =#">每日简报</a</li>
< li>< a href =#">海洋</a>
</li>< li>< a href =#"> Climate</a>
</li>< li>< a href =#"> Space Weather</a>
</li>< li>< a href =#">火灾天气</a>
</li>< li>< a href =#"> Aviation</a>
</li>< li>< a href =#">海啸</a>
</li>< li>< a href =#">预测模型</a>
</li>< li>< a href =#">水</a>
</li>< li>< a href =#"> GIS</a>
</li>< li>< a href =#"> Storm Spotters</a>
</li>< li>< a href =#">事实和图形</a>
</li>/ul
</li>
< li>< a href =" index-2.html>世界天气新闻</a</li>
< li>< a href =" index-3.html"气象图</a></li>
< li>< a href =" index-4.html" Footage</a</li>
< li>< a href =" index-5.html"联系人</a></li>
</ul>
</nav>
< div class =搜索块">
< form id =" search1" class ="search" action ="search.php" method ="GET"
< label for ="s">输入位置</label>
< input id ="s"； type ="text"名称="s" value =".
< a onclick =" document.getElementById('search1').submit()" class ="button1"/a.
</form>
</div>
</div>
</div>
< div class =行滑块包装器">
< div class ="grid_12">
< div class ="camera_wrap camera_emboss" id ="camera_wrap_3"； style =" display:block;底边距:83px;高度:329像素；< div class ="camera_fakehover">< div class ="camera_src camerastarted"
< div data-thumb ="images/thumb-slide-1.jpg" data-src ＝"images/slide-1.jpg"； data-time ＝"1500". data-trasperiod ="4000" data-target ="_ blank"
</div>
< div data-thumb ="images/thumb-slide-2.jpg" data-src ="images/slide-2.jpg"
</div>
< div data-thumb ="images/thumb-slide-3.jpg" data-src ＝"images/slide-3.jpg"； data-time ＝"1500". data-trasperiod ="4000" data-link =" https://www.google.com/" data-target ="_ blank"
</div>
< div data-thumb ="images/thumb-slide-4.jpg" data-src ＝"images/slide-4.jpg"； data-time ＝"1500". data-trasperiod ="4000" data-link =" https://www.google.com/" data-target ="_ blank"
</div>
< div data-thumb ="images/thumb-slide-5.jpg" data-src ＝"images/slide-5.jpg"； data-time ＝"1500". data-trasperiod ="4000" data-link =" https://www.google.com/" data-target ="_ blank"
</div>
</div>< div class ="camera_target">< div class ="cameraCont"< div class ="cameraSlide cameraSlide_0 cameracurrent"； style ="显示:块； > img src ="images/slide-1.jpg?1495972302131" class =" imgLoaded" data-alignment =" data-portrait ="宽度="940"高度="330" style ="高度:330像素； margin-margin-width:940px；< div class =" camerarelative"； style =" width:940px;高度:329像素；"/div"/"div class" ="cameraSlide cameraSlide_1 cameranext"； style ="display:none;">< img src ="images/slide-2.jpg?1495972308730&"; class =" imgLoaded" style ="高度:329像素；边距-< div类="相对于相机" style =" width:940px;高度:329像素；"/div"/"div" ="div class ="cameraSlide cameraSlide_2">"div class =" camerarelative; style =" width:940px;高度:329像素；"/div"/"div" ="div class =" cameraSlide cameraSlide_3">"div class =" camerarelative" style =" width:940px;高度:329像素；"/div"/"div class" ="cameraSlide cameraSlide_4">"div class =" camerarelative" style =" width:940px;高度:329像素；</div></div< div class ="cameraSlide cameraSlide_5"; style ="显示:无；< div class ="camerarelative"； style =" width:940px;高度:329像素；"/div"/"/div"/"div class =" camera_target_content">"div class =" cameraContents" < div class ="cameraContent cameracurrent" style ="display:block;"< div class ="camera_caption fadeIn"； style =" opacity:1;÷ div;
< div class ="slider-text">
div class ＝内部" iaculis lacinia est proin. < a href =#">阅读更多</a>
</div>
</div>
</div></div</div>< div class ="cameraContent">< div class ="camera_caption fadeIn"； style =""÷ div"
< div class ="slider-text">
< div class =内部"" Reiciendis culpa a omnis. Voluptatem. < a href =#">阅读更多</a>
</div>
</div>
</div</div></div>< div class ="cameraContent"< a class ="camera_link" href =" https://www.google.com/" target ="_ blank">/a< div class ="camera_caption fadeIn"； style =""÷ div"
< div class ="slider-text">
< div class =内部""实验室无液体的液体无定形天蛾(alita aliquam). < a href =#">阅读更多</a>
</div>
</div>
</div</div></div>< div class ="cameraContent"< a class ="camera_link" href =" https://www.google.com/" target ="_ blank">/a< div class ="camera_caption fadeIn"； style =""÷ div"
< div class ="slider-text">
div class ＝内部"劳丹草. < a href =#">阅读更多</a>
</div>
</div>
</div</div></div>< div class ="cameraContent"< a class ="camera_link" href =" https://www.google.com/" target ="_ blank">/a< div class ="camera_caption fadeIn"； style =""÷ div"
< div class ="slider-text">
< div class =内部"" Perspiciatis expedita nihil repellat non. < a href =#">阅读更多</a>
</div>
</div>
</div></div</div<</div></div>< div class ="camera_bar"; style ="display:none;高度:7像素；>< span class ="camera_bar_cont"； style ="opacity:0.8;右:0px；底部:0px; background-color:rgb(34、34、34)；< span id ="pie_0&"； style ="opacity:0.8; background-color:rgb(238，238，238);右:0px；底部:2px；显示:块；"/span>/span>/div/div class ="camera_prev"< span>/span</div< div class ="camera_next">"span"
"div" div class ="camera_thumbs"< div> div class ="camera_command_wrap">< div class =" camera_prevThumbs hideNav">< div</div</div ;/div></div>< div class ="camera_thumbs_cont"; style =""÷ div"< ul style =" width:925px; margin-margin-right:自动；边距-"li类" ＝"pix_thumb pix_thumb_0 cameracurrent camera_visThumb">"span class ＝"border-1-wrap"">"img src ＝" images/thumb-slide-1". jpg" class ="camera_thumb"样式=不透明度:1"；"span class =" s-bord-1""//span> span class ="s-bord-2"</span>"span class =" s-bord-3">/span< span class ="s-bord-4"</span</span</li>< li class ="pix_thumb pix_thumb_1 camera_visThumb">< span class ="border-1-wrap">< img src ="images/thumb-slide-2.jpg" class ="camera_thumb"样式＝不透明度:0.7；"＞ span class ＝"s-bord-1"＞/span＞ span class ＝"s-bord-2"＞/span>"span class =" s-bord-3">/span< span class ="s-bord-4"</span</span</li>< li class ="pix_thumb pix_thumb_2 camera_visThumb">< span class ="border-1-wrap">< img src ="images/thumb-slide-3.jpg" class ="camera_thumb"样式＝不透明度:0.7；"＞ span class ＝"s-bord-1"＞/span＞ span class ＝"s-bord-2"＞/span>"span class =" s-bord-3">/span< span class ="s-bord-4"</span></span</li< li class ="pix_thumb pix_thumb_3 camera_visThumb">"span class =" border-1-wrap">"img src =" images/thumb-slide-4.jpg" class ="camera_thumb"样式＝不透明度:0.7；"＞ span class ＝"s-bord-1"＞/span＞ span class ＝"s-bord-2"＞/span>"span class =" s-bord-3">/span< span class ="s-bord-4"</span</span</li< li class ="pix_thumb pix_thumb_4 camera_visThumb">"span class =" border-1-wrap">"img src =" images/thumb-slide-5.jpg" class ="camera_thumb"样式＝不透明度:0.7；"＞ span class ＝"s-bord-1"＞/span＞ span class ＝"s-bord-2"＞/span>"span class =" s-bord-3">/span< span class ="s-bord-4"</span></span</li</ul>/div</div</div</div</div</div</div< div class =''camera_loader'' style =" display:block; </div;</div> </div> </div> </div>
我应该在共享点上将该内容放在什么位置，或者如何使我的页面看起来像这
在SharePoint 2013中，我们可以使用设计管理器自定义您的母版页.
以下文章供您参考:
在SharePoint 2013中创建新的母版页
http://blog.navantis.com/creating-a- new-master-page-in-sharepoint-2013/
有关如何在SharePoint 2013中创建新的自定义母版页的指南
https://collab365.community/creating-a-new-定制的master-page-in-sharepoint-2013/
如果您只想创建一个主页，我们可以使用SharePoint Designer创建自定义页面，并添加HTML + CSS + JavaScript代码来满足您的要求，然后将其设置为主页.
最好的问候，
丹尼斯
hi I want to customize my home page in sharepoint like https://www.templatemonster.com/demo/45726.html which content come in center when I use f12 developer tools I find that it is
<div class="container_12">
<div class="row">
<div class="grid_12">
<h1><a href="index.html">WeatherChannel</a></h1>
<div class="fright">
<div class="clearfix">
<ul class="top_menu clearfix">
<li><a href="#">Sign In</a>|</li>
<li><a href="#">Join</a>|</li>
<li><a href="#">Settings</a></li>
</ul>
<div class="temp clearfix"><a href="#" class="cels">C°</a><a href="#" class="far">F°</a></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid_12">
<nav class="full-width">
<ul class="sf-menu clearfix sf-js-enabled">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="index-1.html">Weather guides<span> »</span></a>
<ul style="">
<li><a href="#">Daily Briefing</a></li>
<li><a href="#">Marine</a>
</li><li><a href="#">Climate</a>
</li><li><a href="#">Space Weather</a>
</li><li><a href="#">Fire Weather</a>
</li><li><a href="#">Aviation</a>
</li><li><a href="#">Tsunami</a>
</li><li><a href="#">Forecast Models</a>
</li><li><a href="#">Water</a>
</li><li><a href="#">GIS</a>
</li><li><a href="#">Storm Spotters</a>
</li><li><a href="#">Facts and Figures</a>
</li></ul>
</li>
<li><a href="index-2.html">World weather news</a></li>
<li><a href="index-3.html">Weather charts</a></li>
<li><a href="index-4.html">Footage</a></li>
<li><a href="index-5.html">Contacts</a></li>
</ul>
</nav>
<div class="search-block">
<form id="search1" class="search" action="search.php" method="GET">
<label for="s">Enter Location</label>
<input id="s" type="text" name="s" value="">
<a onclick="document.getElementById('search1').submit()" class="button1"></a>
</form>
</div>
</div>
</div>
<div class="row slider-wrapper">
<div class="grid_12">
<div class="camera_wrap camera_emboss" id="camera_wrap_3" style="display: block; margin-bottom: 83px; height: 329px;"><div class="camera_fakehover"><div class="camera_src camerastarted">
<div data-thumb="images/thumb-slide-1.jpg" data-src="images/slide-1.jpg" data-time="1500" data-trasperiod="4000" data-target="_blank">
</div>
<div data-thumb="images/thumb-slide-2.jpg" data-src="images/slide-2.jpg">
</div>
<div data-thumb="images/thumb-slide-3.jpg" data-src="images/slide-3.jpg" data-time="1500" data-trasperiod="4000" data-link="https://www.google.com/" data-target="_blank">
</div>
<div data-thumb="images/thumb-slide-4.jpg" data-src="images/slide-4.jpg" data-time="1500" data-trasperiod="4000" data-link="https://www.google.com/" data-target="_blank">
</div>
<div data-thumb="images/thumb-slide-5.jpg" data-src="images/slide-5.jpg" data-time="1500" data-trasperiod="4000" data-link="https://www.google.com/" data-target="_blank">
</div>
</div><div class="camera_target"><div class="cameraCont"><div class="cameraSlide cameraSlide_0 cameracurrent" style=" display: block; "><img src="images/slide-1.jpg?1495972302131" class="imgLoaded" data-alignment="" data-portrait="" width="940" height="330" style=" height: 330px; margin- margin- width: 940px;"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_1 cameranext" style="display: none;"><img src="images/slide-2.jpg?1495972308730" class="imgLoaded" style=" height: 329px; margin- "><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_2"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_3"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_4"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_5" style=" display: none;"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div></div></div><div class="camera_target_content"><div class="cameraContents"><div class="cameraContent cameracurrent" style="display: block;"><div class="camera_caption fadeIn" style=" opacity: 1;"><div>
<div class="slider-text">
<div class="inside">Vestibulum iaculis lacinia est proin. <a href="#">Read More</a>
</div>
</div>
</div></div></div><div class="cameraContent"><div class="camera_caption fadeIn" style=""><div>
<div class="slider-text">
<div class="inside">Reiciendis culpa a omnis. Voluptatem. <a href="#">Read More</a>
</div>
</div>
</div></div></div><div class="cameraContent"><a class="camera_link" href="https://www.google.com/" target="_blank"></a><div class="camera_caption fadeIn" style=""><div>
<div class="slider-text">
<div class="inside">Laborum aliquid asperiores dicta aliquam. <a href="#">Read More</a>
</div>
</div>
</div></div></div><div class="cameraContent"><a class="camera_link" href="https://www.google.com/" target="_blank"></a><div class="camera_caption fadeIn" style=""><div>
<div class="slider-text">
<div class="inside">Laudantium laboriosam adipisci. <a href="#">Read More</a>
</div>
</div>
</div></div></div><div class="cameraContent"><a class="camera_link" href="https://www.google.com/" target="_blank"></a><div class="camera_caption fadeIn" style=""><div>
<div class="slider-text">
<div class="inside">Perspiciatis expedita nihil repellat non. <a href="#">Read More</a>
</div>
</div>
</div></div></div></div></div><div class="camera_bar" style="display: none; height: 7px;"><span class="camera_bar_cont" style="opacity: 0.8; right: 0px; bottom: 0px; background-color: rgb(34, 34, 34);"><span id="pie_0" style="opacity: 0.8; background-color: rgb(238, 238, 238); right: 0px; bottom: 2px; display: block;"></span></span></div><div class="camera_prev"><span></span></div><div class="camera_next"><span></span></div></div><div><div class="camera_thumbs"><div><div class="camera_command_wrap"><div class="camera_prevThumbs hideNav"><div></div></div><div class="camera_nextThumbs"><div></div></div><div class="camera_thumbs_cont" style=""><div><ul style="width: 925px; margin- margin-right: auto; margin-"><li class="pix_thumb pix_thumb_0 cameracurrent camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-1.jpg" class="camera_thumb" style="opacity: 1;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li><li class="pix_thumb pix_thumb_1 camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-2.jpg" class="camera_thumb" style="opacity: 0.7;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li><li class="pix_thumb pix_thumb_2 camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-3.jpg" class="camera_thumb" style="opacity: 0.7;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li><li class="pix_thumb pix_thumb_3 camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-4.jpg" class="camera_thumb" style="opacity: 0.7;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li><li class="pix_thumb pix_thumb_4 camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-5.jpg" class="camera_thumb" style="opacity: 0.7;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li></ul></div></div></div></div></div></div><div class="camera_loader" style="display: block; "></div></div>
</div>
</div>
</div>where should I put this in sharepoint or how make my page like this
Hi,
In SharePoint 2013, we can use Design Manager to customize your master page.
The following articles for your reference:
Creating a New Master Page in SharePoint 2013
http://blog.navantis.com/creating-a-new-master-page-in-sharepoint-2013/
A guide explaining how to create a new customized Master Page in SharePoint 2013
https://collab365.community/creating-a-new-customized-master-page-in-sharepoint-2013/
If you only want to create one Home page, we can create a custom page using SharePoint designer and add HTML+CSS+JavaScript code to achieve your requirement, then set it to home page.
Best Regards,
Dennis
这篇关于自定义shareoint主页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
