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;"
>