时间:2020-01-27 13:31作者:admin来源:未知人气:362我要评论(0)
SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Online的资源库,在Designer中创建页面,添加Html页面,修改引用。
下面,让我们一步步来演示这一过程。
一、 拿到效果图,进行切图
SharePoint Online的布局,通常由美工制作效果图,并且切图为Html+图片+样式+脚本的方式,到我们开发人员手里,就方便页面的创建了。
这里,我已经由效果图完成切图,由于Designer 2013不支持设计视图了,所以这里用Designer 2007进行展示了,如下图:
二、 使用Designer在网站中创建页面
然后使用Designer打开SharePoint Online站点,进入所有文件 - 页面下,如下图:
在Ribbon菜单上的新建选项中,新建一个页面,如下图:
然后,同之前介绍母版页的操作一致,使用高级模式打开新建的Home页面,主要在PlaceHolderMain节点中添加所有Html内容,如下图:
三、 上传资源文件,同时修改引用路径
将Html复制到页面中,我们可以将图片、样式、脚本等分别上传SharePoint Online的素材库,如下图:
上传完毕所有素材文件,然后替换所有图片引用路径、脚本引用路径和样式引用路径,然后,就可以预览我们的页面了,如下图:
当然,上图中所有栏目的内容还都是静态Html,我们还需要一步步,将内容的部分替换为动态发布的内容,这些我将在接下来的博客中一一介绍给大家。
到此,我们的首页布局基本完成,可以开始加入动态内容了,同事,我们可以在Designer中右键这个页面,然后设置成首页;当然,我们也可以进入网站设置 – 外观 – 欢迎页面中设置首页,这样,我们通过域名访问,即默认跳到我们的首页中了。
四、 关于首页布局创建的若干建议
样式表、脚本文件外部引用;使用Div+Css进行布局更佳;SPO支持Html5的响应式布局;浏览器兼容性由布局决定;
总 结
首页布局的制作,在门户制作中比较简单,通常美工的作用非常大,如果有一些不明确的Css定义,会给我们接下来的工作带来很大麻烦。
特别要说的是,不要让美工全局定义标签的样式,比如Div{margin:auto;}这样,尽量让自定义的样式有独特性,以免和SharePoint Online自带样式冲突。
相关阅读 SharePoint中Office文件无法打开的解决方案如何快速生成SharePoint测试大文件如何查询SharePoint Library中空文件夹?如何快速备份SharePoint Farm Solution如何解决Event Viewer中SharePoint Error - Event ID 8321SharePoint 2016 CU安装失败,"Exception: The upgraded database schema doesn't match the TargetSchema"的解决方案InfoPath Error “此文档库已经被重命名或删除,或者网络问题导致文件无法保存…” 的解决方案SharePoint 2013 App概述How to Shrink SharePoint Content Database Log File?Project Web App Feature无法开启的解决方案
热门文章 SharePoint 2016 图文安装教程 后面有激活序列号、密钥分享[SharePoint入门教程]一SharePoint发展、工具及术语如何用 SharePoint Online创建团队网站?SharePoint Iframe 报错“此内容不能显示在一个框架中”
最新文章
SharePoint中Office文件无法打开的解决方案如何快速生成SharePoint测试大文件
如何查询SharePoint Library中空文件夹?如何快速备份SharePoint Farm Solution如何解决Event Viewer中SharePoint Error - Event ID 8321SharePoint 2016 CU安装失败,"Exception: The upgraded database s
人气排行 SharePoint 2016 图文安装教程 后面有激活序列号、密钥分享[SharePoint入门教程]一SharePoint发展、工具及术语如何用 SharePoint Online创建团队网站?SharePoint Iframe 报错“此内容不能显示在一个框架中”SharePoint 2013 安装图解 SharePoint安装步骤图解教程SharePoint 如何开启访问请求[SharePoint入门教程]一SharePoint概述[SharePoint入门教程]一创建SharePoint母版页
盖楼回复X
(您的评论需要经过审核才能显示)
查看所有0条评论>>