网页设计大屏_制作3840*1080大屏网页

1、19寸的显示屏网页设计时应该选择多大的尺寸？

你的是宽屏？？还是？？一般设置 1005px

2、网站设计中页面首屏应该多大

因为报纸的运输和分发过程是折叠起来的，所以报纸折叠后展示在读者面前的那一部分内容就显得尤其重要，读者会根据头版的内容决定是否购买。因此处于头版的内容意味着一个，编辑认为它们是最重要的，头版的内容也决定了立场和定位。“above the fold”的概念延伸到互联网领域，则用来指代web网页中第一个展示在访客面前不需要滚动能够浏览的信息。与报纸的“头版”不同的是互联网的首屏区域是动态的，因为互联网用户复杂的屏幕分辨率环境，导致他们看到的首屏内容有很大差距。很多网站设计就是因为对首屏的忽视导致很严重的体验问题。屏幕分别率分布图其中屏幕高度在768以内的用户有41.57%，18.78%(1024X768)+2.91%(1280X768)+19.88%(1366X768)41.57%，这就是为什么一定要关注首屏。我们的设计师们都用上20寸以上的大屏幕的时候41%的用户还在用768的显示设。首屏设计的要点展示重点既然知道了首屏的重要性，那么就要将页面，甚至网站的主题通过醒目的方式展示出来，让访客能够第一眼了解你想表达的信息。有些站长可能认为首屏并没有那么重要，因为用户可以滚动屏幕最终看到我们期望他们看到的内容。如果你有这样乐观的想法，建议你看一下尼尔森的研究报告：(雅各布61尼尔森(Jakob Nielsen)，著名网页易用性专家。被誉为可用性测试鼻祖。Jakob Nielson是尼尔森—诺曼集团的主要负责人之一，他被《美国新闻与世界报道》杂志誉为“Web可用性方面的世界顶尖专家”。根据他的报告得出的结论，即使是在用户滚动屏幕的前提下，用户的注意力分部占比任然是相当悬殊的：61Above the fold 首屏以上: 80.3%61Below the fold 首屏以下: 19.7%展示差异因为首屏的重要性，站长会用来展示整个网站的主题，那么就可能造成网站所有页面的首屏都是一样的，这就可能导致用户误以为自己的点击没有产生预期的页面跳转，以为自己还停留在原始页面。多次尝试都没有效果之后，最终跳失是很又可能的。

3、制作3840*1080大屏网页,设计中用多少号字体合适

你确定是3840*1080？
而不是1080*3840？
默认字体12或者14就行。

4、如何设计自适应屏幕大小的网页 Responsive Web Design

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
如何设计自适应屏幕大小的网页(转)
一、”自适应网页设计”的概念
2010年，Ethan Marcotte提出了”自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如何设计自适应屏幕大小的网页(转)
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如何设计自适应屏幕大小的网页(转)
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如何设计自适应屏幕大小的网页(转)
如果屏幕宽度在400像素以下，则6张图片分成三行。
如何设计自适应屏幕大小的网页(转)
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

5、在LED大显示屏的上显示页面与普通WEB页面在制作上有什么区别

6、关于网页制作大小与分辨率的关系

呵呵，我来回答你的问题吧。
1：分辨率的问题。现在PC端大部分的网站都采用固定宽度、高度自适应、并居中的布局方法，宽度一般都是1000PX左右。这已经兼容绝大部分的分辨率了，至于极个别的分辨率的兼容性，要么舍弃掉，要么就对该分辨率重新设计一个版面。总的来说，PC端的分辨率，楼主不需要其有多大的疑虑，感觉有点太过忧虑。当你对网页制作更加深入以后，你会发现你的担心是多余的。

2：你说自动铺满全屏。他没采用第一种布局方式，而是采用定位的方式布局的。

3：网页在浏览器和DW软件显示有差异，你无需管网页在DW软件中的显示结果，显示结果均由浏览器显示结果为基准。因为用户使用浏览器访问你的网站。至于为什么会有差异，DW毕竟只是一个软件而不是浏览器。

7、html页面怎样能够自适应电脑屏幕宽度？

在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
第一种方法：做一个网页解决问题（长了点）
如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。
一、消除任意缩放浏览器窗口对网页的影响
一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得"不堪入目"了，这是个很值得注意的问题。
问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。
大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。
自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。另外如果外层表格已做好固定宽度设置，内层表格也可以适当使用百分比设置。清楚这个原则以后，如果出现类似的问题大家也知道怎么解决。
二、让网页居中
说到了窗口大小就会顺着路子想到分辨率的问题，在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费时，看起来也费劲。怎么办呢？
现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主，要想让网页在1024*768时居中，只要在网页原代码的<body>后紧加一句<center>，</body>前加一句</center>就OK了。不过有几个问题这是要注意一下，第一个就是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在<body>中加入leftmargin=0，即<body leftmargin=0>这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。

<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>

　三、定义固定大小的文字
大家都知道,在IE浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大了，这时你的网页也可能变得"不堪入目"。虽然不是你的错，但客户是上帝。
如果使用了网页中的CSS样式表技术，就不会出现上述情况了。使用快捷键"Shift+F11"打开样式表"CSS style"编辑器，在窗口中单击鼠标右键执行"New CSS style..."命令新建一个样式表，然后在给出的列表中选择"类型"选项，定义文字属性参数（一般文字的大小选择12px较为适宜）。完成后选择网页编辑窗中的文本，单击新的样式表名称，可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。
四、让网页适应不同的浏览器
浏览器的格局现在是两分天下，一分是IE，另一分是NetScape，在国内Ie有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站，但只要注意以下几点，做出来的网页在各个浏览器都中能达到比较好的显示效果：
不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内。
内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式。
有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。
对于只有几个像素宽度或高度的层，改用图片来实现。
避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。
第二种方法：做两个适合不同分辨率的页面，一个是800×600，一个是1024×768，在800×600的页面中加入一下代码就可以实现跳转了：
　
解决分辨率问题在Dreamweaver中没有此项功能，我们只能手动加入一段Javascript代码。首先在change－ie.html或change－nc.html页面代码中的< head>和< /head>中加入以下代码：
< script language=JavaScript>
< !－－
function redirectPage(){
var url800x600=〃index－ie.html〃; //定义两个页面，此处假设index－ex.html和1024－ie.html同change－ie.html在同一个目录下
var url1024x768=〃1024－ie.html〃;
if ((screen.width==800) ＆＆ (screen.height==600))　//在此处添加screen.width、screen.height的值可以检测更多的分辨率
window.location.href= url800x600;
else if ((screen.width==1024) ＆＆ (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
// －－>
< /script>
然后再在< body…>内加入onLoad=〃redirectPage()〃
最后，同样地，在< body>和< /body>之间加入以下代码来显示网页的工作信息：
< script language=JavaScript>
< !－－
var w=screen.width
var h=screen.height
document.write(〃系统已检测到您的分辨率为:〃);
document.write(〃< font size=3 color=red>〃);
document.write(w＋〃×〃＋h);
document.write(〃< /font>〃);
document.write(〃正在进入页面转换,请稍候…〃);
// －－>
< /script>

判断读者浏览器类型和屏幕分辨率，自动调用不同CSS

我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少？如果使我们的浏览者能够更好的去浏览到我的网页，这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率，这里头有几种最常用的方法：

1、硬行把网页先用表格框起来，框的分辨率应该是在760－780象素，其余的空间可以给一个背景图或者空白.
2、用自动缩放的方法也可以实现，这种方法比较古老，而且很简单，这个不多说了；

3、用自动判断的方法。

今天，就第三种方法来说说，如何来判断出浏览者的屏幕分辨率，根据不同的分辨率给予读者不同的浏览内容：

网络上也有一些能自动判断出你的浏览器是什么类型或者什么版本的代码，集成过来。

一、既判断分辨率，也判断浏览器，使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

为了大家明白，这里简单解析一下：

引用内容

var IE1024="";

var IE800="";

var IE1152="";

var IEother="";

引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

var Firefox1024="";

var Firefox800="";

var Firefox1152="";

var Firefoxother="";

引号里面分别填写，用户使用FireFox（一个也很流行的浏览器）的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

var Other1024="";

var Other800="";

var Other1152="";

var Otherother="";

引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

二、不判断分辨率，只判断浏览器实现根据浏览器类型自动调用不同CSS。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

解释：（和前面的差不多）

如果浏览器为IE，则调用default.css

如果浏览器为Firefox，则调用default2.css

如果浏览器为其他，则调用newsky.css

使用方法：

很简单，放在 “</head>” 前面即可。

页面在不同屏幕分辨率下存在的问题及解决办法
（未考虑800*600或更低分辨率的情况）
一问题
在不同分辨率下，页面布局存在不同程度的差异，特别是页面上的表单控件，其宽度默认是固定值“width:150px”，当分辨率较高时，表格中的空白显得过多，页面布局显得很不协调，在宽屏显示器上尤为明显。
二解决办法
方法1. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件。样式文件命名格式如：forms[_屏幕宽度].css，样式文件中只需重新定义文本框和下拉框的宽度即可。
在包含的头文件headr.inc中加入js代码：
if(screen.width > 1024){
document.write('<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_'+ screen.width +'.css">');
}
forms_1280.css文件内容：
/* 分辨率宽度为1280的时候，文本框和下拉框的宽度属性(width)单独定义
* 参考计算方法为：（分辨率宽度-174）/4 * 0.7
* 左侧菜单栏宽度为174px；右侧页面表格是4列；控件宽度为单元格的70%
* (1280-174)/4*0.7 = 193
*/
input.text
{
background:#FFFFFF;
border:1px solid #B5B8C8;
padding:3px 3px;
height:22px;
line-height:18px;
vertical-align:middle;
padding-bottom:0pt;
padding-top:2px;
width: 193px;
color: #333;
}
select.select{
width: 193px;
}
优点：实现很简单，代码量少；并且可针对不同分辨率做更细粒度的页面控制。
缺点：无明显缺点。
方法2 将整个页面的宽度设置为固定值，并使其居中显示。
优点：可以很大程度的消除不同分辨率下的显示差异。
缺点：分辨率宽度大于这个固定值的时候，页面两边会出现空白。
方法3 用js判断分辨率，修改body的zoom属性（IE特性），即可实现对整个页面进行缩放，类似IE8或其它浏览器提供的缩放功能。
优点：实现简单，页面能进行缩放。
缺点：缩放是宽度和高度的等比缩放，高分辨率下字体、图片看起来会变小，问题解决的不彻底。

三总结
推荐方法1。页面布局的变化和分辨率的宽度有密切关系，和高度关系不大；常用的分辨率宽度也就几种，做几个简单的css文件即可。

8、1366*768的分辨率，设计网页尺寸是多大？

无论电脑分辨率或多或少，做网页应该按照这个标准，只需要考虑web页面的宽度，高度依赖于内容的布局。

现在大多数电脑方便的1280年，1366年，1440年，1660年，1920年，所以web页面通常设计成一个新的帆布1920px宽，与核心内容控制在1280年，以确保大多数电脑打开网站，可以显示所有的内容的网站。

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

1366：768分辨率：18．5英寸16：9显示

其他不同大小的普通屏幕的最佳分辨率（最佳分辨率可能因显示器的大小而异）

监视器：1440x900（16：10）

20寸显示器：1600x900（16：9）1600x1200（4：3）

21．5”显示器：1920x1080（16：9）

22英寸显示：1680x1050（16：10）1920x1080（16：9）1920x1200（16：10）

23“显示器：1920x1080（16：9）1920x1200（16：10）”

23．6“显示器：1920x1080（16：9）”

24英寸显示：1920x1200（16：10）1920x1080（16：9）

9、设计网页尺寸该用多大的宽度才合适？

网页多宽才合适，这个问题可能并没有一个标准，也没有对错之分，可能我们在使用网页尺寸的时候更多的想的并因该是用多大的宽度，而是我们的访问者更适合多大的网页宽度！1、结论：固定宽度只适合功能型网站，不适合希望用户认真阅读的浏览型网站。UCD大社区是浏览型网站，它的定位是“知识库”，希望你停留在这里认真浏览和阅读。2、大屏幕不是用来显示更宽文字内容的，大屏幕下必然会面临鼠标长途奔袭的问题。建议用大屏幕的人：为自己的身体健康着想，在大屏幕下阅读的时候，养成缩小窗口的习惯。共勉 :)3、希望用户认真阅读的网站，主要内容区域的宽度必须固定，不能过长，否则会伤害到阅读者的眼睛，而且不适合阅读的流畅性。固定宽度在650左右最合适。有兴趣的人可以去搜索相关报告，为什么是650左右。（Google是按照英文算的宽度，我们可以按照中文相对调整）4、一个页面只有一个主要内容区域，其他所有都是辅助内容，能隐藏就隐藏，能忽视就忽视。在用户浏览的时候，辅助内容不要紧挨着主要内容。那样会干扰阅读，侧面影响内容摄取的质量。特别是当辅助内容不能很少的时候。5、浏览型网站尽量别用三栏，三栏太难设计，一个合理的页面不需要一下子摆出来那么多内容。6、所以：对于浏览型网站，在大屏幕下，浏览区域和辅助区域需要有分隔。即使因为不用固定宽度会带来视觉上的不协调。7、虽然屏幕越来越大，对于一些网站来说1024的宽度不一定会是主流，但至少需要向下兼容这个宽度，把他们作为一个很重要的人群考虑。8、宽度问题其实是一个蛮值得讨论的问题。在屏幕越来越大，尺寸越来越多样的时候，这个问题会越来越凸显。
但如果纠结于“不要有空白”、“功能和内容不能分开”，没有任何意义。有些可用性原则，没有挑战余地。就好像公共场所的门必须向外打开一样。9、对于这个问题，设计者应该为用户考虑更有益的方式。而不是听用户说他们想要什么样的方式。因为：大多数嗓门大的用户，并不知道什么样的方式对自己最有益。0、为了保证更好的阅读体验，UCD大社区的设计者们正在考虑：是否不再录入那些阅读体验很差的网站的文章，或者将这些文章的默认链接改为我们的快照页面(点大社区文章标题前的“望远镜”ICON就是快照页面)。

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

网页设计大屏

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