导航:首页 > 万维百科 > html怎么做全屏网页设计

html怎么做全屏网页设计

发布时间:2020-09-25 12:02:19

1、如何制作HTML页面

1、首先我们需要在桌面上,新建一张记事本

2、然后我们需要打开记事本,编写代码

3、然后我们需要把记事本修改后缀名为.html

4、然后我们需要在桌面上就会有一张网页,这一点很重要。

5、最后我们需要需要在浏览器上运行该网页

2、怎么把做好的HTML网页制作成可以访问的网站

您好,首先无论怎样您需要以下几个步骤:
1、购买域名(聚名网直接注册购买都行,这是网站必须的一步,不懂的直接去平台问)
2、购买空间服务器(阿里云就有,直接搭建好空间后把程序放进去)
3、去备案域名并解析它,就可以访问了。

3、如何用html编写一个简单的网页

HTML源码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<meta charset="utf-8" />

</head>

<body style="text-align:center;background-color: bisque;padding-top: 100px;">

<h5>hello word</h5>

<select id="ab">

<option value="0">html</option>

<option value="1">css</option>

<option value="0">js</option>

</select>

<div id="div1" data-zg="中国人" data-zgr="我们是祖国的儿女,我爱祖国">

我们爱祖国!!我们爱祖国!

</div>

</body>

</html>

效果预览图浏览器显示:

(3)html怎么做全屏网页设计扩展资料:

HTML超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。

2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。

3、平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

4、通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

4、怎么制作一个固定大小的html页面

1、如图,我们对div设置固定宽度和高度。

2、图像预览效果如下所示。

3、然后在div里面插入一张图片,如图。

4、插入图片后,在预览中看到的效果,明显图片已经将父级的背景尺寸给盖住了,图片偏大了。

5、然后这个时候,将图片的宽度设置为何父级一样的宽度,代码就是width:100%;这里的100%会自动跟随父级的宽度选择。

6、这时候回到浏览器中,可以看到图片的宽度和父级div的宽度一致了,然后修改的就是高度的范围了。

7、如果也将图片的高度设置为父级的100%,那么图形就会发生形变,所以在这里需要将父级的高度去掉,这样子集的高度就自动化了。

8、很多时候,将图片在框中显示的时候,在底部会出现一个小边框,这时候将图片设置为display:block;转为块状就可以了。

5、制作网页如何能让页面全屏!

如果您想要让指定网页页面全屏显示的话,您可以在该页面的html源代码文件中,添加下面的代码就能实现了:
<form>
<div align="center">
<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, ''big'', ''fullscreen=yes'')">
</div>
</form>

如果这个方法不满意,你可以做一个flash。把网页嵌到里面。

6、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">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//如果浏览器为其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}

function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}

function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</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">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
//如果浏览器为IE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox
setActiveStyleSheet("default2.css");
}else{
//如果浏览器为其他
setActiveStyleSheet("newsky.css");
}
}

function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</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文件即可。

7、HTML网页设计怎样设置网页主体宽高?

问题说得太笼统了。网页主体指的是?整体布局?这个很难说的,例如,我设置了 html, body 都为100%,然后我设置一个盒子是 80% ,那么这个 80% 的盒子控制主体, 又例如: 最外层的div我也是设置100%,然后我每部分分别设置它需要的宽,那就是每部分控制的。
你要设置那就要根据你的项目的实际情况来决定。

8、用html如何制作一个简单的网页代码?

1、首先,在计算机桌面上创建一个新文件夹,然后在该文件夹中创建一个新的文本文档。

2、然后双击打开带有记事本的文本文档,如下图所示,我们编写一个简单的html代码。

3、单击“另存为”的功能选项,显示默认保存为编码为ANSI。

4、我们将更改编码和文件名,将其更改为如图所示的图像并保存。

5、然后返回到新创建的文件夹,发现有一个额外的html文件。

6、最后,使用浏览器打开html文件,效果如图所示,简单的网页被成功编写。

9、html网页设计里面怎么平铺背景图片

html网页设计里面平铺背景图片的代码如下:
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
网页背景默认是平铺整个屏幕的,可能有以下原因导致不能平铺:

1、图片不够大,又background属性不能拉伸图片;
2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> ;
3、body的background属性去掉,要不然会被遮住。

10、html 怎么让背景图铺满整个页面

我自己试出来的,希望有用
例子,用css
<body background="images\002.png"
style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;"
>

与html怎么做全屏网页设计相关的知识