导航:首页 > 万维百科 > 单屏网页设计

单屏网页设计

发布时间:2020-07-31 11:51:00

1、我们通常说网站单屏和多屏,具体的意思是怎么样的?

描述不是很详细
如果你说的是网页 不是显示器的话

就是说
当你打开网页 什么也不动 眼前看到的是网页所有内容
这个是单屏
而那些需要拉滚动条 才能继续看该页面其他内容的 就是多屏了

2、哪位大神能够告诉我,单屏+响应式网页设计,在做psd源文件时需要建多大?

以pc端的最大宽度,1200px应该是比较合适的,如果有全屏海报的话,海报的最大宽度设计为1920px

3、html 实现网页单屏显示 满屏显示,不出现滚动条。

1、打开html开发工具,新建一个html代码页面,在html代码页面输入大量的文本内容,确保在浏览器上能有滚动条出现。

2、引入一个jquery.js库。在title标签后面创建一个script标签,然后引入jquery.js文件。

3、新建一个script标签,在这个标签里面创建使用$(window).scroll()监听滚动条滚动事件(案例中判断当滚动条滚动高度超过100的时候就出现一个弹出框)。

4、保存html代码后使用浏览器打开,然后滚动Y轴滚动条。

5、发现滚动到一定位置后会出现一个alert弹出框表示监听滚动条成功。



(3)单屏网页设计扩展资料  


HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

HTML文本由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。

这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

HTML其实是文本,它需要浏览器的解释,它的编辑器大体可以分为以下几种:

基本文本、文档编辑软件,使用微软自带的记事本或写字板都可以编写,WPS来编写,也可以。不过存盘时请使用htm或html作为扩展名,这样就方便浏览器认出直接解释执行了。

半所见即所得软件,如:FCK-Editer、E-webediter等在线网页编辑器;尤其推荐:Sublime Text代码编辑器(由Jon Skinner开发,Sublime Text2收费但可以无限期试用)。

所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟)。

任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现。

4、做单屏滚动的时候怎样适配所有分辨率不同的电脑?

网友们上网通常会采用800×600、1024×768两种分辨率, 网页不是用来给自己看的,所以必须让自己做的网页能够兼顾这两种情况,让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法,特别说明一下除非网站是艺术类的,有特别需求,通常都会首先照顾分辨率设置为800×600的大众化标准。
一、 自然拉伸
如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为100% ,表格就会根据分辨率的不同自行调整宽度。

二、 固定居中
在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费劲。所以目前普遍采用的方法是固定居中法!
现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主。只要在网页原代码的<body>后紧加一句<center>,</body>前加一句</center>就OK了。不过有几个问题这是要注意一下,第一个要注意的是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在<body>中加入leftmargin=0,即<body leftmargin=0>这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。

三、 兵分两路
如果你的网页不经常更新,而且对页面效果极其在意,那好,你就设计两个页面,分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。
例如:
<script LANGUAGE="JavaScript">
function redirectPage() {
var url_else = "http://www.163.com/";
var url_800x600 = "http://www.sohu.com/";
var url_1024x768 = "http://www.sina.com.cn/";
var url_1366x768 = "http://www.qq.com";
if ((screen.width == 800) && (screen.height == 600))
window.location.href= url_800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url_1024x768;
else if ((screen.width == 1366) && (screen.height == 768))
window.location.href= url_1366x768;
else
window.location.href= url_else;
}
</script>

5、大屏幕,单屏网页如何制作?

DIV+CSS+JS搞定。如果你想学做的话,其实可以推荐你用g-o-o-g-l-浏览器查看迅雷那个网站的源代码,学习一下。

6、网页设计中的引导页究竟怎样做

如何设计引导页:

1.了解引导页类型,清洗引导类型

前置型引导页:启动应用程序后,进入主功能前的一系列图片或者动画效果,停留数秒后消失。在用户初次实用移动产品时,给予一些必要性的帮助,以便用户快速了解产品类型,功能,具体操作

过程中引导:在用户使用产品过程中给出一系列帮助内容,主要方式有空白页的内容引导,loading等等状态引导,拆分包袱的逐步引导,巧设默认值的功能引导,tips引导,浮点引导,遮罩聚焦式引导,触发式引导,任务演练式引导等。

网页设计中的引导页究竟怎样做?由于主要讲前置型引导,这里插播两个例子:

A.例如Facebook开启定位的引导,但用户需要发送当前位 置的时候,应用会弹出图中的引导形式,告诉用户开启定位的作用,用户在这种使用场景下会很乐意开启定位,从而提高了开启定位的转换率,又不会觉得这个引导影响了自己的体验。

B.比如Google搜索中,在用户进行拖动操作的时候,顶部的状态栏变成了一句温馨的提示,非但不打扰用户,反而有 一定帮助,用户会觉得很贴心。

2.认识引导页存在问题,避免走错方向

随着访客的审美疲劳,频繁出现的引导页已经失去了对引导页的新鲜感和喜爱感。要么就是过多展示没有实际功效的内容作为噱头,而且这个噱头并没有吸引足够的目光。在很多情况下却起到了相反的效果。

毕竟首页作为引流的窗口重要性显而易见,引导页前置需要访客花时间等待主页面的启动,如果是一个体积过大时间过长的引导页,或是引导页上面的“skip”按钮不够明显,很可能导致部分访客流失,之前也讲到,技术原因造成的访问延时,引导页能够起到缓解用户情绪的作用,如果是引导页的不正确使用造成的访客流失,那就是引导页干的坏事。

3.把控引导内容

心理学上发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。如果表达起来困难,可以辅助一小段文字进行解释或补充。因此在最终文案的确定上,要突出重点,多余的文字尽可能地进行删减。如果文案删减后字数还是过多,因考虑对文字进行分层,通过空格或逗号或换行的方式进行视觉优化。

精准贴切的文案也十分重要,将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计,文案与照片的吻合度,直接影响到情感传达的效果。

建议将引导页采用纯色简单直接,尽量和主界面构架形式一直,让用户有快的感觉,有些工具型应用的引导页单屏滚动多在0.5秒内,眼睛一睁一闭,引导页就过去了。

如果应用功能主要是在横屏的情况下完成,建议引导页以横屏方式呈现,以引导用户提前切换手持设备姿势,快速进入到你的应用界面中。

4.用户引导规范,制定符合自己产品特性

每个移动应用都有一套自己的用户引导规范,在制定用户引导规范的时候。

用户引导规范的指定可以按照不同的形式进行指定,一种是从用户引导的样式角度出发,把产品涉及到的各种用户引导样式一一罗列出来,并说明每种引导样式的适用范围、触发机制以及消除机制等。这种形式的优点是各种引导样式结构清晰,一目了然。另一种形式是从产品功能的角度出发,由于产品每个功能的重要程度和优先级不同,对应的需要突出强调的程度也不一样,所以将用户引导样式分为强中弱三 大类,对于产品主要功能,优先级很高的采用强引导样式,对于次要功能,优先级稍差的采用适中的引导样式,对于辅助功能,优先级最低的采用弱的引导样式。同 时强中弱三大类里面又分别包括几种引导样式。这种形式的优点是从产品角度出发,根据功能的重要程度的优先级选择对应的引导样式,方便快捷。

5.场景模拟,保证用户引导的有效性,减少干扰,提升用户体验

用户在使用产品的时候都是有一定的使用场景的,根据用户的使用场景触发响应的用户引导,用户引导在使用过程中弹出时是用户意想不到的,很有可能打扰了用户使用的流畅性,因为这是用户没有预期出现的东西,在一定程度上有惊慌失错感,保证在用户需要的时候弹出最符合用户体验,也是用户最愿意接受的时候。这样的出现既不会特别突兀,不至于弄的用户不知所措,又能在响应的场景下帮助到用户。

6.避免引导页铺天盖地的在任何类型的APP上引用

(信息类应用是一个内容为王的地方,尤其是被信息内容充满的应用和注重效率的工具应用,比如说搜索应用,不断追求信息以一种更快速更详尽多方式呈现给用户,所以才会有rss,基于AJAX技术的页面布局。任何一些阻碍用户高效获取信息的细节都将导致用户流失,而引导页就是头号杀手。

7.视觉聚焦

在单个引导页中,信息不宜过多,只阐述一个目的,所有元素都围绕这个目的进行展开。视觉聚焦包括两部分,一是文案的处理,要注意层次,主标题与副标题要形成对比;二是引导页中的界面、场景、文案具象化元素,要有一个视觉聚焦点,多个视觉元素的排布采用中心扩散的方式,聚焦点的视觉面积最大,同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律,从上到下,从左到右,从大到小。因此可以根据这个视线流的规律来进行引导页的设计。

9.著建特色,从竞品中凸显差异化

之前对于表现方式的归类已经讲到了动画及页面切换方式,如果增加了页面动效,利用动效,包括放大、缩小、平移、滚动、弹跳,表现形式更加多样化,会让引导页更有趣,注意力更为集中。

7、移动端单屏滚动网页怎么实现,网页里有CSS3动画效果

移动端的单屏滚动网页及动画效果,1.http://www.swiper.com.cn/demo/senior/index.html
http://www.swiper.com.cn/usage/animate/index.html,可以参考这种,案例跟api都有。易懂,(推荐使用)
2.zepto.js 的touch事件。

8、制作网站首页时需要考虑两个方面内容

在HTML开发中,制作网站时首先需要考虑内容是页面内容和页面布局。

首页是整个网站页面最完整的内容,将网站的每一栏内容设置为一个,这样的功能如果排版不当,那么首页就会出现混乱。

因此,主页的布局是整个网站的首要任务,所以主页的布局必须简单有序,主要和次要,把重要和需要的内容放在首页的位置。



(8)单屏网页设计扩展资料

首页常用的网页布局:

1、单屏网站设计

单屏网站设计,由头部banner内容底部构成,有时候也只有头部banner底部,而把内容放在内页展示。这样做就必须在一个页面上获得所有必要的信息,同时,需要确保页面具有视觉吸引力和用户友好性。

Banner广告图的设计是整个网站中的重中之重,广告图设计打造品牌、突出产品亮点、利用新颖的设计吸引用户。

2、长页面网站设计

长页面网站设计,由头部banner内容一、内容二、内容三……底部构成,在首页布局上,尽可能得展示公司的产品服务优势,打造产品卖点,因为其营销性质,也称为营销型网站设计。

长页面网站设计,比起单屏网站来讲,内容更丰富,深受众多企业的喜爱,不仅是一种很好的宣传方式,也能吸引很多有效的消费群体。

9、网站设计单屏需要多少费用

一般不会按照几屏来收费的。你这个需求一般是宣传页或者企业网站,估计你只要一个静态页就可以了,这个收费不会很贵,一般几百元就可以了,上了千的基本上就没意思了。

与单屏网页设计相关的知识