SharePoint创建门户网站
SharePoint Online 创建门户网站系列之准备篇
门户是SharePoint自推出以来，就非常适合的一种站点类型，在Server版本中，发布站点的应用非常广泛。这里，我们以一个个简单的例子，然后以一个固定的项目Demo，为大家演示如何一步步在SharePoint Online中创建门户网站。一、 设计工具SharePoint Designer简介 打开Designer，首先需要点击红框的按钮打开站点，输入站点的地址即可；一般来说，网站地址是打开的首页(如：https://linyus-public.sharepoint.com/Pages/default.aspx)的Pages前面的部分，即https://linyus-public.sharepoint.com； Designer可以打开*站点或者子网站进行修改和编辑等操作，如果需要修改的内容在哪个部分，就打开所在网站即可。 输入网站地址，点击确定以后，会弹出Office 365的登陆框，输入账号和密码确认以后，即可登录，登陆后如下图： Designer的操作基本和Office 2013的风格一致，所有的功能都在软件最上面的Ribbon菜单中，如果发现需要的功能找不到，可以直接去Ribbon上寻找即可； 至于Designer的功能有诸如修改母版页、页面布局、页面、添加WebPart Zone和WebPart、添加列表表单和数据视图等，这里不一一描述，会在后续的博客中分别介绍到。二、 创建网站
SharePoint Online 创建门户网站系列之母版页
虽然SharePoint中母版页看起来只是头部Banner和底部版权信息这两个部分，但是实质在SharePoint Online中的页面模型中占有重要地位，而且SPO对母版页有着完善的签入签出机制和版本控制，方便使用。 同时，除了保持网站所有页面的一致性，还方便所有页面中使用的脚本、样式表引用，可以同时影响所有页面。一、 SharePoint Online母版页的签入签出和版本控制 查找母版页和页面库位置，首先进入“网站设置”，如下图： 到网站设置页面以后，点击“母版页和页面布局”，进入库管理母版页和页面布局，如下图： 在“母版页样式库”中，查看签入签出和版本控制功能，如下图： 点击“库设置”，可以进入到库的基本设置中关闭签入签出和版本控制功能；
SharePoint Online 创建门户网站系列之首页布局
SharePoint Online中创建首页布局，一般都是首先将美工提供的效果图，切图成为Html + Css + Script的形式，然后，将所有资源文件传到SharePoint Online的资源库，在Designer中创建页面，添加Html页面，修改引用。下面，让我们一步步来演示这一过程。一、 拿到效果图，进行切图 SharePoint Online的布局，通常由美工制作效果图，并且切图为Html+图片+样式+脚本的方式，到我们开发人员手里，就方便页面的创建了。 这里，我已经由效果图完成切图，由于Designer 2013不支持设计视图了，所以这里用Designer 2007进行展示了，如下图：二、 使用Designer在网站中创建页面 然后使用Designer打开SharePoint Online站点，进入所有文件 - 页面下，如下图： 在Ribbon菜单上的新建选项中，新建一个页面，如下图：
SharePoint Online 创建门户网站系列之导航
关于SharePoint Online中的导航，基本是由Html + Css + JavaScript组成效果以及样式，然后在后台列表或者SharePoint Online元数据导航当做数据源进行展示，通常数据源为列表的我们称之为自定义导航。 下面，让我们分别介绍SharePoint Online的元数据导航和自定义导航。一、SharePoint Online默认导航 如果想使用SharePoint Online默认导航，可以用F12的方式，看看控件在母版页中的位置，如下图： 在Designer里找到导航控件，然后移动到母版页中你导航的位置，即可；<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Horizontal" StaticDisplayLevels="1" DynamicHorizontalOffset="0" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=38" StaticPopoutImageTextFormatString="" SkipLinkText="" StaticSubMenuIndent="0" /> 我个人习惯，在移动了导航之后，在原来位置上加一个标记，方便以后修改，如下图： 这样，我们可以看到导航已经变为我们修改后的SharePoint导航了，如下图：
SharePoint Online 创建门户网站系列之图片滚动实现教程
创建SharePoint Online栏目我们之前已经介绍过了，具体就是内容编辑器方式、自带WebPart方式和JavaScript读取后台数据前台做展示的三种； 但是，对于复杂的展示来说，这些方式还是会比较难以实现，虽然对于首页的图片轮播来说，通过JavaScript方式已经完全能够胜任，但是，我还是想通过这个栏目，为大家介绍如何使用沙盒解决方案创建WebPart，来完成更加复杂的前台展示。 下面，让我们开始在SharePoint Online的门户网站中创建沙盒解决方案吧 。一、 SharePoint Online 为滚动图片创建图片库 为产品展示创建一个图片库，用来存储信息，如下图： 创建一个多行文本字段，用来存储描述，记得最好先英文，改中文，如下图： 上传几张产品展示的图片，我这里没有什么图片，就随便上传了几张平遥古镇的图片，如下图：
SharePoint Online 创建门户网站系列之创建栏目实现教程
SharePoint Online的栏目，简单描述即显示在首页上的各个模块信息，这里，我们主要介绍我们首页上的栏目，包括简介类型、新闻列表类型、图片类型； 下面，让我们开始在SharePoint Online的门户网站中创建栏目吧 。一、 SharePoint Online 为栏目创建列表 创建新闻中心列表，如下图： 我们创建一个内容（多行文本）字段，用来保存新闻的内容： 创建联系我们列表，如下图： 字段：联系人、电话、手机、邮编、网址，类型均为单行文本；二、 SharePoint Online 在首页显示栏目
SharePoint Online 创建门户网站系列之定制栏目实现教程
SharePoint Online自带的库就带有二级页面和详细页面，也就是Allitems页面和DispForm页面，但是实在不够美观，尤其对于门户网站这一企业门面来说，更是无法接受。 下面，我们就开始学习如何定制SPO的二级页面和详细页面。一、 SharePoint Online定制列表的二级页面 在“新闻中心”的列表页创建一个视图，用来当做二级页面，如下图： 视图类型，选择 基于所有项目创建一个新的视图，如下图： 输入视图名称为“新闻中心”，同时设置为默认视图，如下图： 选择栏，我们选择标题，当然后面如果有其他需要，我们还可以继续修改，如下图：