请选择 进入手机版 | 继续访问电脑版

叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 15063|回复: 4

首页管理(下拉:banner列表-logo上传-导航条管理)

[复制链接]

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
发表于 2020-12-17 12:34:06 | 显示全部楼层 |阅读模式
模块列表:
网站首页模块,基本都在“模块修改”里面上传,不要删掉后台的上传入口,找到对应内容后,点击编辑更改即可。不要自己添加调用标签,没有用的。自己删掉上传入口,网站上对应的模块也不会消失的,删网站模块得发我们来操作。图片尺寸全靠QQ截图来量,图做的小了会空放大模糊,做的大了,会有两侧部分不显示。

banner列表:
网站首页顶部banner,宽度1920像素,高度用qq截图量,或者做和之前一样尺寸的。这个宽度确保24寸显示器刚好全部显示,比这小的显示中间部分画面,比这大的两侧空白,高度不限,但两张高度必须完全一样。主要画面尽量往中间靠,不要紧贴左右两边,容易显示被遮挡显示不完整。banner上的文字如果保留模板默认的在后台填写,则banner高度由所有文字的总高度决定,两张banner上的大小文字,必须全部行数一样,才能保证两张高度一样。为了保险起见,最好用qq截图量一下,原来多高就做多高的。banner都不限上传张数,一般最多3张,多了会打开变慢。

图片要求:用jpg格式,一般不要超过300k,最大不要超过500k,画质一般选10,最低可以选8。除了通栏的图宽度都是1920像素,其它模块图片,都要实际截图量尺寸(ctrl+alt+A),做差不多大的图,过大也会打开慢。png格式通常都很大,除了水印和logo,一般都不用的。

网站首页及公司简介里面通栏广告图、多张切换图、循环重复模块,一般都是在“banner上传”里面更改的,点击编辑即可。即使误删了,上传图片的时候选择对应的分类,就可以了。
涉及的背景图可以在昵图网http://www.nipic.com上搜相关关键词,在“共享图”类目下找图,发我们链接,我们来下载原图,处理好尺寸就可以上传了。 9.jpg


小图标可以在图标库网站上http://www.fontawesome.com.cn/faicons/找图,找到了复制图标名称填上即可。
22.jpg
33.jpg

注意:1、不管是“首页管理”还是“banner列表”编辑器里面上传的内容不要带有冗码,比如从word直接拷贝进去,从别的网站直接拷贝,带有大量冗码,会导致排版错乱或颜色混乱,如图所示
QQ截图20220601104554.png
点击编辑器左上角html字样“源代码”按钮,删除文字之外的代码,或者复制的内容直接粘贴在这里,然后再次点击html“源代码”回到正常界面,这时保存,就可以了。或者把word之类上面的文字内容拷贝到文本文档里,再从文本文档全选-复制,粘贴到编辑器里面,这样可以可以清除冗码。
已经错乱的效果,也可以在编辑器里面全选-剪切,点开左上角源代码,粘贴,再点击源代码回到正常状态,最后点保存,也可以恢复正常效果。
2、有的排成一行的模块,如果内容的行数不一,会导致高矮不齐。如果是排列成两行,行数不一样造成的高矮不齐,会导致模块排列错位,只有通过更改内容统一模块高度才能解决排列错位问题。
3、首页导航条下方的banner,一般是不限上传多少张的,如果要增加banner,点击右上角  添加banner  选择该分类即可。我们只设计两张,如果增加的banner要我们来设计,是100元每张简单设计,通常来说不要超过三张,总大小不超过1M为好,过大了banner这里会打开缓慢。


Banner显示效果说明:响应式网站在手机上没有banner能显示全部的。传统网站在手机上按比例缩小,什么都看不清楚,响应式架构虽然通过调整结构不需要按比例缩小了,但是banner是没法调架构的,相比于按比例缩小造成什么都看不清,不如选择不缩小,这样至少可以看清中间部分。响应式设计里面,不再有按比例缩小的操作,个别网站有按比例缩小的banner,但那只是个别,我们按主流标准开发,不以个别为标准。如果就要小屏幕及手机端banner全部显示,可以取消banner切换效果,只显示一张banner(可以选择是电脑和手机都只显示一张,还是只有手机端打开才只显示一张),收费30元。也可以尝试重新找按比例缩小的特效换上去,但是由于特效代码兼容问题,要安装很多很多特效才有可能找到一个这个网站兼容的特效,这种修改收费500元,如果最终找不到兼容的,退款400元,恢复原样。banner显示多少以及每个人QQ截图量的尺寸,都和3个要素同时有关:浏览器显示是否100%、屏幕尺寸、显示器分辨率设置,尤其分辨率设置这块,不同的设置显示的范围也是立即变化的。banner设计不要粗暴的罗列产品,这种画面有下面的产品推荐就够了,建议放背景图,这样不管全部显示,还是两侧部分遮挡,都不妨碍图片整体上的美感,banner的作用是吸引客户继续看下去,提升客户继续看网站的兴趣,不会有客户只看见了banner就准备付款下单的,罗列产品只会适得其反,到时两侧产品被遮挡一半,效果立即就差多了。
https://www.ez-leaf.com/soho-k.html 这是传统非响应式网站,都是手机端banner按比例缩小的,不管上面文字看不清。
https://www.templatemonster.com/html5-website-templates/  这是美国模板开发领域排名第一的怪兽公司官网,为了banner上文字和画面看的清,全部取消了banner按比例缩小的传统开发规则。
不止是首页banner,内页banner以及首页模块背景图,都是以背景图的方式显示,都不会根据屏幕大小按比例缩放,只会屏幕越小两侧遮挡越多。手机端横屏竖屏,平板横屏竖屏,笔记本,小尺寸显示器,分辨率设置过小等等,都是一样的原理。
如果想要手机端100%绝对完美,唯一办法就是单独做个手机站,同理,如果需要平板端绝对完美,也得专门做个pad端网站。像淘宝网、京东商城等上市公司都是单独做一个手机网站的。
PS:外贸业务客户群都是办公群体,几十上百万的订单主要还是电脑端完成的,少有手机上点点就下单的,所以显示效果以电脑端为主。办公电脑中以台式电脑居多,笔记本办公占少数,而台式电脑的各种尺寸显示器中,以24寸为主流,更大或更小的是少数,所以最终banner完整显示效果以台式电脑24寸显示器为准


回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
 楼主| 发表于 2020-12-17 14:10:45 | 显示全部楼层
logo  
不要尺寸过大,上传多大的显示多大,用QQ截图量logo位置的尺寸,差不多大小就可以了。选中要上传的logo后,要点击“上传”按钮,再点击下方“保存”按钮。
icon
位于网站顶部状态栏,谷歌会对有icon图标的网站优先照顾排名,并且显示在搜索结果的左侧,形象也美观些。ico图标支持jpg \png\gif等常规图片格式,尺寸最小32像素边长就可以了,大一点也行,不要特别大,形状得正方形,不要用很长的logo。
4.jpg

百度搜索结果也有显示
5.jpg

回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
 楼主| 发表于 2020-12-17 14:14:44 | 显示全部楼层
导航条管理
在这里可以自己更改导航栏目的名称,可以控制栏目的排序。可以自己增加或者减少导航栏目。导航栏目名称可以随便写什么,它只是用来看的,点击跳转只根据链接。导航链接不要自己随便乱写名字,它只会跳转到真实存在的页面上,不会智能揣测你心里面想要的页面,它也识别不了你自己创的链接地址是什么意思。products栏目是自动调取产品分类的,分类改了,这个栏目下的下拉菜单就变过来了,不在导航条管理里面改。
增加导航栏目,只支持三种页面类型:单页,产品列表页,新闻列表页。

一、增加一个单页栏目。
1、先增加一个单页面,拷贝页面链接。
6.jpg
2、增加一个导航栏目或者增加一个已有导航栏目的下拉菜单,粘贴之前复制的网址,点保存。
7.jpg
8.jpg
二、添加一个新闻列表页。
1、新闻里面新建一个新闻分类,拷贝分类链接。
9.jpg
2、增加一个导航栏目或者已有导航的下拉菜单里面,粘贴链接地址。

三、每个产品分类单独做一个导航栏目,或者自定义产品栏下拉菜单。(产品栏下拉菜单默认是调用产品分类的,不支持自定义)
1、在产品分类列表中拷贝一级分类链接。
10.jpg
2、新建好导航栏目,或者在下拉菜单中,粘贴这个链接地址。

四、如果过去某个栏目删了,现在想启用,只要增加这个栏目,并且写上对应的链接地址就可以了,页面本身还在,不需要再次制作,地址都是下面这样的,照抄上去就行。
11.jpg
注意:网站内部链接填相对链接就可以了,外部链接才需要填绝对链接。带上域名的是绝对链接,比如https://abcd.com/about.html 。不带域名的是相对链接,比如 about.html,一个完整的网址,只截取域名后面部分,就是相对链接。而链接到新浪网、淘宝网等不是你自己的网站上,就是外部链接。像产品详情页、新闻详情页等其它页面,都可以在前台打开该页面,复制域名后台的相对链接到后台粘贴就可以了。


回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
 楼主| 发表于 2022-7-12 09:15:18 | 显示全部楼层
网站底部二维码
二维码在首页管理里面上传,把原演示二维码改掉就可以了,不要删掉再添加。具体怎么制作二维码,看需求。
1、如果要放微信加好友二维码、微信收款二维码、支付宝收款二维码等这些自己有的,只要把尺寸处理成合适的大小就可以直接上传了。
2、如果要放的是我们示范的那种手机扫码在手机上打开网站,可以在“草料二维码”网站https://cli.im/url 上生成就可以了。选择网址静态码,点击生成二维码,选择二维码下面的“样式美化”,再点击上方的“模板”,选择看好的样式,在右侧二维码上右击另存为到本地使用。这个尺寸较大,要处理小一点。
3、已有二维码,不会ps图片,需要裁图、处理大小这些操作,可以把图片发给我们来处理。
1.png

4.png
回复

使用道具 举报

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
 楼主| 发表于 2023-6-21 16:24:23 | 显示全部楼层
附加说明:
现在终端显示器的尺寸纷繁复杂,笔记本就分为12寸、14寸还有16寸的。台式电脑有20寸、24寸、36寸的。还有手机端不光大小不同,还分横屏和竖屏。平板电脑尺寸也各不同,也分横屏和竖屏。就算同样的尺寸,还有不同的分辨率设置,就算前两个一样,有的用户还喜欢改掉100%的缩放设置,放大了看,可以浏览器放大,可以电脑系统设置放大,这些都影响显示效果。
响应式网站虽然可以兼容各种尺寸,只是基本兼容,不是完美兼容,完美可能永远都不会存在,因为人的审美是不完美的,不统一的。因此,网站开发界就确定了两个不约而同的标准:

1、网站最完美的呈现效果,按使用最多的显示器尺寸进行开发,使用最多的是24寸台式电脑显示器,分辨率设置最多的是按推荐的1920*1080,浏览效果按照大多数人的标准,浏览器按100%的缩放值,电脑系统按照100%的缩放值。
2、现在开发的响应式网站banner,基本都采用上层写文字,下层放图片,在屏幕变小的情况下,看清楚大于看全面,因此,文字按比例缩小,并全部显示,但下层图片不按比例缩小,只显示中间部分,两侧挡住多少就看屏幕有多小。

因此,在非标准情况下,显示效果就五花八门了,但是网站只能以大多数为标准去改,不以客户自己使用的显示器为标准去改。尤其是在放大的情况下,显示的内容就会少,挡住的就多,可以把自己电脑尽量调整到接近标准设置。

有少部分用户喜欢放大了看,有的是给浏览器放大了,按住ctrl键,滚动鼠标滚轮,就可以调浏览器的放大缩小,但是往往不知道什么程度是100%显示。以360安全浏览器为例,可以点击右上方菜单栏,光标移到“网页缩放”,就可以看到当前的缩放比例,如图所示:

33.jpg
有的用户不光浏览器看东西要放大,电脑上所有东西都要放大,因此在电脑系统设置里面就调大了缩放比例,如果想恢复,以Windows10系统为例,回到电脑桌面,空白处右击,点“显示设置”,如图,就可以看到当前设置的值了。
11.jpg




回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-3-29 10:37 , Processed in 0.292474 second(s), 27 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表