SharePoint Online 创建门户网站系列之首页布局

简介: 前 言   SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Online的资源库,在Designer中创建页面,添加Html页面,修改引用。

  SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Online的资源库,在Designer中创建页面,添加Html页面,修改引用。

下面,让我们一步步来演示这一过程。

一、 拿到效果图,进行切图

  SharePoint Online的布局,通常由美工制作效果图,并且切图为Html+图片+样式+脚本的方式,到我们开发人员手里,就方便页面的创建了。

  这里,我已经由效果图完成切图,由于Designer 2013不支持设计视图了,所以这里用Designer 2007进行展示了,如下图:

clip_image001

二、 使用Designer在网站中创建页面

  然后使用Designer打开SharePoint Online站点,进入所有文件 - 页面下,如下图:

clip_image002

  在Ribbon菜单上的新建选项中,新建一个页面,如下图:

clip_image003

  然后,同之前介绍母版页的操作一致,使用高级模式打开新建的Home页面,主要在PlaceHolderMain节点中添加所有Html内容,如下图:

clip_image004

三、 上传资源文件,同时修改引用路径

  将Html复制到页面中,我们可以将图片、样式、脚本等分别上传SharePoint Online的素材库,如下图:

clip_image005

  上传完毕所有素材文件,然后替换所有图片引用路径、脚本引用路径和样式引用路径,然后,就可以预览我们的页面了,如下图:

clip_image006

  当然,上图中所有栏目的内容还都是静态Html,我们还需要一步步,将内容的部分替换为动态发布的内容,这些我将在接下来的博客中一一介绍给大家。

  到此,我们的首页布局基本完成,可以开始加入动态内容了,同事,我们可以在Designer中右键这个页面,然后设置成首页;当然,我们也可以进入网站设置 – 外观 – 欢迎页面中设置首页,这样,我们通过域名访问,即默认跳到我们的首页中了。

clip_image007

四、 关于首页布局创建的若干建议

  样式表、脚本文件外部引用;使用Div+Css进行布局更佳;SPO支持Html5的响应式布局;浏览器兼容性由布局决定;

  首页布局的制作,在门户制作中比较简单,通常美工的作用非常大,如果有一些不明确的Css定义,会给我们接下来的工作带来很大麻烦。

  特别要说的是,不要让美工全局定义标签的样式,比如Div{margin:auto;}这样,尽量让自定义的样式有独特性,以免和SharePoint Online自带样式冲突。

  好了,首页布局的介绍就到这里,下一篇文章我们将单独介绍导航的应用。

目录
相关文章
如何在 SAP 电商云 Spartacus UI 里新建一个页面
如何在 SAP 电商云 Spartacus UI 里新建一个页面
103 0
如何在 SAP 电商云 Spartacus UI 里新建一个页面
|
Web App开发 前端开发 JavaScript
SharePoint Online 设置网站集
  前言   本文介绍如何在Office 365中设置SharePoint Online网站集,当我们创建好SharePoint Online站点,开始使用之前,一定会有一些基本的设置,本文就为大家介绍这些基本的设置。
1434 0
|
存储
SharePoint Online 创建网站集
  前言   本文介绍如何在Office 365中创建SharePoint网站集。   正文   通过登录地址登录到Office 365环境中,我们可以在左上角的按钮中点开,进入管理员,也可以直接在页面中点击管理;   登录地址:https://login.
1668 0
SharePoint Online 创建门户网站系列之定制栏目
前 言   SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受。   下面,我们就开始学习如何定制SPO的二级页面和详细页面。
1386 0
|
JavaScript 前端开发 数据格式
SharePoint Online 创建门户网站系列之创建栏目
前 言   SharePoint Online的栏目,简单描述即显示在首页上的各个模块信息,这里,我们主要介绍我们首页上的栏目,包括简介类型、新闻列表类型、图片类型;   下面,让我们开始在SharePoint Online的门户网站中创建栏目吧 。
1328 0
|
存储 JavaScript 数据可视化
SharePoint Online 创建门户网站系列之图片滚动
前 言   创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式、自带WebPart方式和JavaScript读取后台数据前台做展示的三种;   但是,对于复杂的展示来说,这些方式还是会比较难以实现,虽然对于首页的图片轮播来说,通过JavaScript方式已经完全能够胜任,但是,我还是想通过这个栏目,为大家介绍如何使用沙盒解决方案创建WebPart,来完成更加复杂的前台展示。
1517 0
|
JavaScript 前端开发
SharePoint Online 创建门户网站系列之导航
前 言   关于SharePoint Online中的导航,基本是由Html + Css + JavaScript组成效果以及样式,然后在后台列表或者SharePoint Online元数据导航当做数据源进行展示,通常数据源为列表的我们称之为自定义导航。
1420 0