静态网页设计与制作分析

静态网页设计与制作分析

摘要:

伴随着信息网络技术的发展,人类已经进入信息时代。人们的各项工作都离不开网络。企业网是展示企业形象的重要窗口,是传播企业文化、企业信息、辅助业务办公、服务生产经营的重要手段。本文介绍了企业网的搭建过程和几个重要网页部件的功能。

关键词:

静态网页;Sharepoint2010;Web部件

1.静态网页概述

所谓的网页就是在浏览器上看到的一幅幅画面,又称web页,实际上它是一个文件,存放在和internet相连的某个服务器上。而静态网页指的是网页内容固定不变,当浏览者通过互联网的HTTP协议向Web服务器请求替换网页内容时,服务器仅仅是将原来已经设计好的静态HTML文档传送给用户的流量器,其页面的内容使用仅仅是标准的HTML代码。静态网页文件通常以htm、html等为后缀名。企业的各级网页都是以静态网页形式呈现,方便人们了解企业动态,掌握企业信息。

2.网页的搭建过程

(1)规划网页。根据所要搭建网页的主要内容,来进行网页规划。网页规划包含的内容很多,如网页的结构、栏目的设置、网页的风格、颜色的搭配、版面布局、文字图片的运用等。网页结构要合理,栏目设置要规范,重要内容要一目了然。只有在制作网页之前把这些方面都考虑到了,才能做出一个具有吸引力,具有特色的网页。(2)搭建网页。企业网的后台服务器都是搭建好的,网站维护人员只需要做前台的维护。搭建网页也是在前台用Sharepoint2010进行网页的搭建。在“新建SharePoint网站”页面中,设置标题、URL名称、网站模板等属性。标题将显示在新网站每一页的IE标题栏中,后期可修改,一般使用中文。网站的URL名称,都是汉语名称的缩写,简短且易于记忆,必须使用英文。根据业务需要选择网站模板,不同的网站模板在新网站创建过程中将自动生成不同的可用列表和功能。在“新建SharePoint网站”页面中,点击“创建”按钮,新网站创建完成,并自动进入新网站默认首页面。新网站页面是一个空白页,后期需要添加web部件,进行页面的编辑。在新网站默认首页面URL末尾追加“?news=edit”回车,进入网页编辑界面。当网站创建完成后,需要手动激活两个Feature功能。在网站功能列表中,找到“公共组件内网01.资源文档库”、“工作组协作列表”功能并点击右侧的激活,完成功能激活,系统将自动创建网站所需通用文档库及相关文件。将制作好的图片资源上传至新网站的文档库中。用SharePoint2010打开新建网页,在所有文件夹中找到PageAssets文档库Images文件夹,把制作好的所以图片资源拷贝到文件夹内。样式代码追加到新网站PageAssets文档库Styles文件夹page.css文件中。用MicrosoftSharePointDesigner2010软件,在“Styles”文件夹内,选中page.css文件右键选择在高级模式下编辑文件,打开文件并进行代码编辑。将制作好的样式代码拷贝粘贴到page.css文件内,一般加入样式注释,以备后期维护方便。在文件标签上右键选择保存,样式代码上传完毕。将制作好的页头和页脚HTML代码替换新网站WebPropertyDocument文档库下的channelhead.html和channelfoot.html文件内。网页的页头和页脚就制作好了。在网页中部添加需要的取静态页面(带宏替换)Web部件和新闻列表Web部件,配置部件属性,指定路径到对应的html文件。页面保存并,这样一个网页就搭建好了。

3.常用部件简单说明

(1)取静态页面(带宏替换)Web部件。取静态页面(带宏替换)Web部件可将静态文件中的代码整合到页面指定位置,用于制作静态内容。用SharePointDesigner2010打开站点,选择左侧菜单中所有文件,点击_EX_STATICPAGES_,在文档库区域中右键新HTML,修改文件名为英文字符即可。右键静态文件,选择打开,将静态代码添加进去,保存关闭即可。添加的静态代码为HTML代码片段,原则上不允许向其中添加<html><head><body>等网页结构标签或声明语句。代码片段中仅填写结构代码,建议将样式、图片等资源放置在站点PageAssets的对应文件或文件夹中,如Styles中的page.css,Images文件夹等。进入页面编辑状态,在指定Web部件区域添加。如下图:如果引用其他站点中的静态文件,点击文本框右侧的蓝色区域,弹出文本编辑器,在其中添加引用静态文件的绝对或相对地址。保存部件配置,保存页面,即可看到静态内容替换效果。(2)新闻列表Web部件。新闻列表Web部件实现动态读取指定新闻频道内的新闻并以列表形式在页面中展示。添加新闻列表WEB部件方法同内容编辑器WEB部件。点开“新闻列表”右侧下拉箭头,选择编辑web部件。新闻列表Web部件包括内容设置、显示设置、筛选和排序、图片新闻显示设置等7类属性。设置好相应的属性,就可以显示对应的新闻栏目了。(3)IP过滤Web部件。我们可以采用两种方式控制用户对网站中某项内容的访问:权限管理或访问IP限制。权限管理的控制最为准确,因为网站使用用户的账号来辨别其是否有权限打开受限内容。但在面对“我希望本单位所有的员工都有权访问这个页面”这样的需求描述时,用给帐号授权的方式去控制访问就变得有些困难,所以我们把它改造为“我希望在本单位内可以上网的电脑都有权访问这个页面”,这个时候用IP地址进行辨别就派上了用场。IP过滤Web部件通过对客户端的IP地址进行辨别,判断用户是否打开这个页面,更加适用于一种面向“结构”的访问约束。所谓面向的“结构”,如一个部门、一个单位、众多组织,或如上面所提到的,一个边界十分清晰的空间。我们所要准备的东西只是拿到“结构”内的IP地址分配情况,开始配置。IP过滤Web部件只能在内网中使用,只能拖拽到Web部件页中。进入页面编辑状态,在指定Web部件区域添加。布局中勾选“隐藏”。自定义属性中的参数“允许的IP范围”填写可访问页面的IP段,IP段一定要有头有尾,中间用“-”连接,IP段和IP段之间用分号隔开,最后一个IP段后不再使用分号。这样就设定了两个IP段可以访问,其它地址的电脑无法访问网页。

4.结束语

全球性的网络化、信息化进程正改变着人们的工作方式。Internet技术的应用为人们带来了极大的方便。网络办公已经深入到了企业的各个角落。现在的企业网功能丰富,为人们的工作提供了便利。

【参考文献】

[1]唐永明.浅议网页设计与制作.科技信息,2009年第20期.

[2]詹青龙,郭永灿.网页设计与制作,清华大学出版社,2010年.

[3]黄晓乾,陈超.网页设计原则与制作技巧.中国科技信息,2010年.

作者:宋英茹 单位:大港油田第二采油厂