怎么制作浮动图片?(如何制作飘窗)

【网站建设】-【模板管理】,先对模板进行备注,以防修改错内容导致首页模板错乱;(注:如学校限制在线修改模板,建议将模板下载到本地进行修改,操作方式参考这篇文章:http://pro.webplus.net.cn/_s80/2020/0316/c1234a38667/page.psp)

添加窗口:编辑“main.htm”默认首页代码(本地修改可通过Dreamweaver等软件打开修改main页面);

添加在页面代码中添加一个窗口,一般放在<body>下面,类似下图;(注意!页面代码中不能用重复的面板号和窗口号,添加前可以搜索下代码中是否包含即将添加的面板号和窗口号,如有重复,修改为其他数字即可)

保存main页面;本地修改的需要重新打包文件,点击【模板管理】,再上传修改后的模板

内容制作:飘窗中展示的内容一般为图片,还支持添加外链跳转,准备好需要展示的内容,在【栏目管理】,创建一个新栏目,再回到【内容管理】-【文档管理】中,在对应文件夹内添加文章,设置好文章封面(即飘窗展示图),如果飘窗图片需要点击跳转,可添加外链;

内容绑定:在【模板管理】中,对main页面进行配置,找到新增加的窗口;


找到新增加的窗口,拖动“新闻列表”组件进行绑定:

在展示配置窗口里面,进行如下配置:(其中里面的缩略图宽度和窗口宽度是根据文章的图片来设定的)


在内容定义里面,把对应的栏目添加上去。

当一切配置好之后,点击确定,刷新预览页面即可。(注意:有时后台预览图片正常滚动,前台图片不动,此时将后台站点的首页预览地址,加下紧急队列即可,添加紧急队列,参考此篇文章:http://pro.webplus.net.cn/_s80/2016/1108/c1234a22705/page.psp)