如何让网站适各种分辨率的浏览器Word格式.docx
- 文档编号:22485621
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:10
- 大小:19.62KB
如何让网站适各种分辨率的浏览器Word格式.docx
《如何让网站适各种分辨率的浏览器Word格式.docx》由会员分享,可在线阅读,更多相关《如何让网站适各种分辨率的浏览器Word格式.docx(10页珍藏版)》请在冰豆网上搜索。
两种分辨率各做一个吧?
做起来费时,看起来也费劲。
怎么办呢?
现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主,要想让网页在1024*768时居中,只要在网页原代码的<
body>
后紧加一句<
center>
,<
/body>
前加一句<
/center>
就OK了。
不过有几个问题这是要注意一下,第一个就是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。
例如width=770。
如果你的表格宽度设的是百分比,那么使用大于800×
600的像素时,网页就会拉宽,这样网页可能会变形。
在<
中加入leftmargin=0,即<
bodyleftmargin=0>
这种情况下,800×
600支持的表格宽度为780像素时不会出现滚动条。
还有一点要注意的是不能用DW中的层来定位。
<
html>
head>
/head>
bodytopmargin=0leftmargin=0>
tablecellspacingcellpaddingwidth=760>
tr>
td>
/td>
/tr>
/table>
/html>
三、定义固定大小的文字
大家都知道,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,呈现在他们面前的网页有时也会不不相同。
比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时你的网页也可能变得"
虽然不是你的错,但客户是上帝。
如果使用了网页中的CSS样式表技术,就不会出现上述情况了。
使用快捷键"
Shift+F11"
打开样式表"
CSSstyle"
编辑器,在窗口中单击鼠标右键执行"
NewCSSstyle..."
命令新建一个样式表,然后在给出的列表中选择"
类型"
选项,定义文字属性参数(一般文字的大小选择12px较为适宜)。
完成后选择网页编辑窗中的文本,单击新的样式表名称,可以看到选中的文本发生了变化。
预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。
四、让网页适应不同的浏览器
浏览器的格局现在是两分天下,一分是IE,另一分是NetScape,在国内Ie有绝对的占有率,在这种情况下我们设计的网页只要兼容它就行了,但NetScape在国外还是有很多人使用,毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站,但只要注意以下几点,做出来的网页在各个浏览器都中能达到比较好的显示效果:
不要混合使用层和表格排版,如果是父子关系,如层中表格,不在此原则范围内。
内联式的CSS在NetscapeNavigator中经常会出现问题,使用链式或内嵌式。
有时需要在空层插入表格或者透明图片,以保证在NetscapeNavigator里的效果。
对于只有几个像素宽度或高度的层,改用图片来实现。
避免使用W3C组织不推荐的排版属性,用CSS代替。
第二种方法:
做两个适合不同分辨率的页面
一个是800×
600,一个是1024×
768,在800×
600的页面中加入一下代码就可以实现跳转了:
---------------------------------------------------------------
解决分辨率问题在Dreamweaver中没有此项功能,我们只能手动加入一段Javascript代码。
首先在change-ie.html或change-nc.html页面代码中的<
head>
和<
/head>
中加入以下代码:
<
scriptlanguage=JavaScript>
!
--
functionredirectPage(){
varurl800x600=〃index-ie.html〃;
//定义两个页面,此处假设index-ex.html和1024-ie.html同change-ie.html在同一个目录下
varurl1024x768=〃1024-ie.html〃;
if((screen.width==800)&&(screen.height==600))//在此处添加screen.width、screen.height的值可以检测更多的分辨率
window.location.href=url800x600;
elseif((screen.width==1024)&&(screen.height==768))
window.location.href=url1024x768;
elsewindow.location.href=url800x600;
}
//-->
/script>
然后再在<
body…>
内加入onLoad=〃redirectPage()〃
最后,同样地,在<
body>
/body>
之间加入以下代码来显示网页的工作信息:
varw=screen.width
varh=screen.height
document.write(〃系统已检测到您的分辨率为:
〃);
document.write(〃<
fontsize=3color=red>
document.write(w+〃×
〃+h);
/font>
document.write(〃正在进入页面转换,请稍候…〃);
探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)
(2)
有人建议直接使用JavaScript方式(感谢):
scriptlanguage=javascript>
!
--
functionmHref(){
if(screen.width==1024)location.href="
htm2.htm"
;
elseif(screen.width==800)location.href="
htm1.htm"
elsereturn(false);
}
//-->
/script>
bodyonload="
mHref();
"
>
或者CSS方式(感谢)
1、制作一组css文件,分被用于在不同分辨率下的屏幕布局设置
2、根据css文件,设计页面布局
2、在页面加载过程中取得屏幕分辨率(上面已经贴了代码了),然后根据分辨率,重新设定页面元素应该应用的cssclass。
这个过程中完全不需要服务器代码参与,没有post-back。
另外,要将最佳分辨率下的css模板设置为默认,这样的话可以大大减少重新应用style的可能性。
使用CSS不失为一个办法,就类似的Theme功能,这样做也会有困难:
如何根据分辨率加载不能的css文件呢?
如果一个网站有非常多的页面时,每个文件都需要加入相应的分辨率判定和CSS引导的JavaScript
如果在服务器端采用IHttpHandler或者使用自定义控件,在客户端浏览文件前做出处理,然后由IIS自动处理岂不更好?
以下是我昨晚探索出来的结果,仍需要大力完善,欢迎大家继续探讨。
1、首先按照本贴开头的方法,建立一个GetScreen.aspx取得客户端分辨率并将之赋予Session["
ScreenResolution"
],同时为了自动转向
在本贴开头所示代码中加入以下关键代码:
stringw=Request.Form["
WidthPixel"
];
//得到屏幕分辨率X
stringh=Request.Form["
HeightPixel"
//得到屏幕分辨率Y
Session["
]=w+"
*"
+h;
//赋值给Session
//转向(更多相关代码见下)
if(Session["
UrlReferrer"
]!
=null)
{
Response.Redirect(Session["
].ToString());
2、在Global.asax中:
ScriptRunat="
Server"
Language="
C#"
publicstaticstringstrUrl;
//用于取得用户刚进入时的页面链接
protectedvoidApplication_BeginRequest(Objectsender,EventArgse)
strUrl=Request.RawUrl.ToString();
protectedvoidApplication_EndRequest(Objectsender,EventArgse)
protectedvoidApplication_Start(Objectsender,EventArgse)
{
}
protectedvoidSession_Start(Objectsender,EventArgse)
if(Session["
]==null)
{
Response.Redirect("
/GetScreen.aspx"
);
//如果未取得客户端浏览器分辨率,则定向到GetScreen.aspx,获取之。
}
Session["
]=strUrl;
//将最初请求页面放在Session中,以便在第1条所示代码中重定向
protectedvoidSession_End(Objectsender,EventArgse)
/Script>
3、在需要做分辨率处理的页面中:
Scriptlanguage="
c#"
runat="
server"
privatestringscreenWidth;
voidPage_Load(Objectsender,EventArgse)
screenWidth=Session["
].ToString().Split('
*'
)[0].ToString();
这里在<
Body>
区内作示例:
bodybgcolor="
#0000FF"
background="
MyPicture<
%=screenWidth%>
.gif"
leftmargin="
0"
topmargin="
marginwidth="
marginheight="
优点:
一次检测,多次使用。
缺点:
需要客户端COOKIE的支持,因为使用了Session.
------------------------------------------
备注:
在上述示例中可以更简化一下,那就是:
在第1条中:
设置Session["
ScreenResolutionX"
]和Session["
ScreenResolutionY"
]:
]=Request.Form["
//得到屏幕分辨率X并赋值给Session
//得到屏幕分辨率Y并赋值给Session
在第3条中直接在<
区内使用:
%=Session["
].ToString()%>
另外:
检测分辨率的代码可以更简化一些:
//GetScreen.aspx(注:
未做仔细调试)
scriptrunat="
language="
publicvoidPage_Load(Objectsender,EventArgse)
{
if(Request.QueryString["
action"
]!
=null)
Session["
]=Request.QueryString["
resX"
].ToString();
resY"
ScreenResolutionD"
resD"
if(Session["
{
Response.Redirect(Session["
}
}
HTML>
BODY>
scriptlanguage="
javascript"
res="
&
resX="
+screen.width+"
resY="
+screen.height+"
resD="
+screen.colorDepth;
top.location.href="
GetScreen.aspx?
action=set"
+res;
/BODY>
/HTML>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 网站 各种 分辨率 浏览器