導航:首頁 > 萬維百科 > 網頁設計調整位置的代碼

網頁設計調整位置的代碼

發布時間:2020-10-20 08:34:12

1、網頁設計如何定義圖片的位置和大小

網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計. 網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Firefox等.
高度:
高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。
寬度:
1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。 2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005 3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001 註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。
所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.
如果是800的解析度一般都設成770。但也有設成760的.
這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.

網頁設計標准尺寸:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.
頁面標准按800*600解析度製作,實際尺寸為778*434px 頁面長度原則上不超過3屏,寬度不超過1屏 每個標准頁面為A4幅面大小,即8.5X11英寸
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px 另外120*90,120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K
標准網頁廣告尺寸規格
一、120*120,這種廣告規格適用於產品或新聞照片展示。 二、120*60,這種廣告規格主要用於做LOGO使用。 三、120*90,主要應用於產品演示或大型LOGO。 四、125*125,這種規格適於表現照片效果的圖像廣告。 五、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。

六、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。 七、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。 八、88*31,主要用於網頁鏈接,或網站小型LOGO。 廣告形式 像素大小 最大尺寸 備注 BUTTON 120*60(必須用gif) 7K 215*50(必須用gif) 7K 通欄 760*100 25K 靜態圖片或減少運動效果 430*50 15K 超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果 巨幅廣告 336*280 35K 585*120 豎邊廣告 130*300 25K 全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式 圖文混排 各頻道不同 15K 彈出窗口 400*300(盡量用gif) 40K BANNER 468*60(盡量用gif) 18K 懸停按鈕 80*80(必須用gif) 7K

流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀) 網頁中的廣告尺寸 1.首頁右上,尺寸120*60 2.首頁頂部通欄,尺寸468*60 3.首頁頂部通欄,尺寸760*60 4.首頁中部通欄,尺寸580*60 5.內頁頂部通欄,尺寸468*60 6.內頁頂部通欄,尺寸760*60 7.內頁左上,尺寸150*60或300*300 8.下載地址頁面,尺寸560*60或468*60 9.內頁底部通欄,尺寸760*60 10.左漂浮,尺寸80*80或100*10

2、網頁設計中怎麼調整層關系

設置z-index值,值越大越在上層,最小為-1

3、網頁製作中插入表格怎麼調整位置

通常有以下幾種方法:
1、CSS法
可以在<table>標簽中設置margin屬性,即:style="margin:5px 0 5px 0;"(順序:上、右、下左,亦可簡寫為style="margin: 5px 0;"),這段CSS的作用是在當前表格外部的上下各留出5px的空白。
2、空對象法
(1)空行。還可以在表格後敲回車換行,產生<p></p>標簽,或者按Shift+回車軟換行,產生<br>標簽,都可產生一個空行。
(2)空表格。插入一個1行1列的表格,設置單元格的寬度、高度,在單元格中不輸入內容。當單元格高度小於12px時,一定要將空格符 刪掉,否則達不到設定高度,這一點非常重要。即:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5"></td>
</tr>
</table>
(3)空DIV。類似於空表格,插入一個DIV,設置其寬度、高度,超出隱藏即可。
<div style="width:100px;height:5px;overflow:hidden;clear:both;"
3、透明圖片法
可以在PS中新建一個5x5px的畫布,背景設為透明,保存為透明GIF圖片,然後在需要留間距的表格後面插入這個透明圖片,將其寬度、高度可以任意調整,直到滿意為直。
<img src="null.gif">

4、HTML中如何設置插入圖像的位置?

<img src="ad-02.jpg" width="400px"; height="200px"; style="position:absolute; left:100px; top:100px; ">修改left 和top的值。

5、製作網頁時怎麼一邊寫代碼一邊調試

一、iOS+Safari1、打開手機web檢查器。通過【設置】>【Safari】>【高級】>【Web檢查器】打開。見下圖(點擊查看大圖),並且你會看到該選項下面對電腦操作的相應描述,照做就好。2.鏈接電腦(Mac)2.1先在手機Safari中打開你想調試的網頁,並用數據線連接到電腦(我這里是Mac)2.2再在電腦上打開Safari點擊【Develop】菜單,就會看到如下圖所示(點擊查看大圖):3.3點擊2.2中的網站名就會在電腦上打開Safari的控制台,如下圖(點擊查看大圖):3.調試網頁如上3.3圖所示,此時你可以查看手機網頁的DOM結構,並且和電腦端網頁調試無異,當滑鼠滑過這些DOM節點的時候手機上的相應布局也會高亮起來,如下圖(點擊查看大圖):二、Android+Chrome1.設置手機1.1【設置】>【關於手機】>【版本號(Buildnumber)】,對版本號這一項連點7下(這是官方文檔里的說法)就會提示「你已成為開發者」。1.2再返回【設置】>【開發者選項】>【USB調試】打開手機USB調試。2.設置電腦(Mac)這塊比較麻煩,因為要裝一下Android的SDK。2.1下載AndroidSDK,並解壓,我把整個adt目錄放在了/Users/David/adt/這里。2.2設置環境變數。打開終端在David路徑下(形如DaviddeMacBook-Pro:~David$)輸入open.bash_profile,如果文件存在則會打開,如果不存在則再輸入touch.bash_profile創建並打開這個文件。在文件里輸入exportPATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools,關閉保存。最後在終端里輸入source.bash_profile來更新環境變數使其生效。終端里輸入adb出現命令幫助信息就是成功了。2.3在終端里輸入adbforwardtcp:9222localabstract:chrome_devtools_remote。3.鏈接電腦3.1在手機上的Chrome里打開想要調試的網頁,用數據線連接手機和電腦(我的是Mac。唉~我只是強調平台的不同,不要誤會)。3.2打開電腦上的Chrome,在地址欄里輸入about:inspect選中【DiscoverUSBDevices】前面的復選框。出現下圖畫面(點擊查看大圖):4.調試網頁4.1你可以點擊圖3.2中檢測到的設備上正在運行的網站下面那個【inspect】,或者在瀏覽器中輸入localhost:9222打開手機正在瀏覽的網頁列表,如下圖:4.2點擊上圖中的網站縮略圖,就會跳轉到Google的一個代理鏈接(鏈接可能被牆……,掛代理)就會打開如下圖所示的控制台(點擊查看大圖):4.3這就和電腦上網頁調試沒什麼差別了,滑鼠經過DOM節點,手機上的布局同樣也會高亮起來:

6、急急急,求大神,網頁製作插入圖片如何改變位置?

設置下它的CSS樣式吧,水平居左對齊:text-align:left;垂直居頂部對齊:vertical-align:top,這樣就會在左上角了呢

7、請問在網頁製作中怎麼調整文字的位置?

找開Dreamweaver後出現可以編輯界面的時候下面有個屬性欄,在屬性欄就可以調整文字的位置

8、網頁設計中如何調整行間距?

字體的行間距你可以用line-height這個屬性去設置

9、如何調整背景色位置(網頁製作)

你這個不就是在用DW寫代碼嗎?把backgound-color屬性值改為藍色就可以了

10、網頁製作模塊的位置怎麼調啊

方法一:設置個樣式:
<style type="text/css">
body{padding:0; margin:0 auto;}
</style>

方法二:如果上面方法不行的話,就在這樣:
<html>
<head>
<style type="text/css">
#body{width:100%; height:auto; padding:0; margin:0 auto;}
</style>
</head>

<body>
<div id="body">(頁面內容)</div>
</body>
</html>

與網頁設計調整位置的代碼相關的知識