單屏網頁設計_大屏幕單屏網頁如何製作

1、我們通常說網站單屏和多屏，具體的意思是怎麼樣的？

描述不是很詳細
如果你說的是網頁不是顯示器的話

就是說
當你打開網頁什麼也不動眼前看到的是網頁所有內容
這個是單屏
而那些需要拉滾動條才能繼續看該頁面其他內容的就是多屏了

2、哪位大神能夠告訴我，單屏+響應式網頁設計，在做psd源文件時需要建多大？

以pc端的最大寬度，1200px應該是比較合適的，如果有全屏海報的話，海報的最大寬度設計為1920px

3、html 實現網頁單屏顯示滿屏顯示，不出現滾動條。

1、打開html開發工具，新建一個html代碼頁面，在html代碼頁面輸入大量的文本內容，確保在瀏覽器上能有滾動條出現。

2、引入一個jquery.js庫。在title標簽後面創建一個script標簽，然後引入jquery.js文件。

3、新建一個script標簽，在這個標簽裡面創建使用$(window).scroll()監聽滾動條滾動事件（案例中判斷當滾動條滾動高度超過100的時候就出現一個彈出框）。

4、保存html代碼後使用瀏覽器打開，然後滾動Y軸滾動條。

5、發現滾動到一定位置後會出現一個alert彈出框表示監聽滾動條成功。

(3)單屏網頁設計擴展資料

HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。

HTML文本由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某台計算機上的文件。

這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。

HTML其實是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為以下幾種：

基本文本、文檔編輯軟體，使用微軟自帶的記事本或寫字板都可以編寫，WPS來編寫，也可以。不過存檔時請使用htm或html作為擴展名，這樣就方便瀏覽器認出直接解釋執行了。

半所見即所得軟體，如：FCK-Editer、E-webediter等在線網頁編輯器；尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開發，Sublime Text2收費但可以無限期試用）。

所見即所得軟體，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網頁，如：AMAYA（出品單位：萬維網聯盟）。

任何地方進行修改只需要刷新即可顯示。缺點是生成的代碼結構復雜，不利於大型網站的多人協作和精準定位等高級功能的實現。

4、做單屏滾動的時候怎樣適配所有解析度不同的電腦？

網友們上網通常會採用800×600、1024×768兩種解析度，網頁不是用來給自己看的，所以必須讓自己做的網頁能夠兼顧這兩種情況，讓不同解析度設置的網友都能夠看到一個排版美觀正確的網頁。下面就介紹幾種常用的方法，特別說明一下除非網站是藝術類的，有特別需求，通常都會首先照顧解析度設置為800×600的大眾化標准。
一、自然拉伸
如果你的網站結構沒有用到大量的圖形來銜接，主要由表格來定結構，那麼你就可以使用該方法。非常適用於主要由表格、文字來表達信息的簡單的網頁頁面。製作表格時，只要你把表格的寬度屬性定義為100% ，表格就會根據解析度的不同自行調整寬度。

二、固定居中
在800×600解析度下製作的網頁在1024×768解析度的機器上打開，整個網頁就會跑到左邊；1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧？做起來費勁。所以目前普遍採用的方法是固定居中法！
現在大多數網民都還在用800*600的解析度，所以我們一般可以以此解析度為主。只要在網頁原代碼的<body>後緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下，第一個要注意的是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設的是百分比，那麼使用大於800×600的像素時，網頁就會拉寬，這樣網頁可能會變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時不會出現滾動條。還有一點要注意的是不能用DW中的層來定位。

三、兵分兩路
如果你的網頁不經常更新，而且對頁面效果極其在意，那好，你就設計兩個頁面，分別對應800×600和1024×768兩種解析度。然後根據不同的解析度進行跳轉就行了。
例如：
<script LANGUAGE="JavaScript">
function redirectPage() {
var url_else = "http://www.163.com/";
var url_800x600 = "http://www.sohu.com/";
var url_1024x768 = "http://www.sina.com.cn/";
var url_1366x768 = "http://www.qq.com";
if ((screen.width == 800) && (screen.height == 600))
window.location.href= url_800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url_1024x768;
else if ((screen.width == 1366) && (screen.height == 768))
window.location.href= url_1366x768;
else
window.location.href= url_else;
}
</script>

5、大屏幕，單屏網頁如何製作？

DIV+CSS+JS搞定。如果你想學做的話，其實可以推薦你用g-o-o-g-l-瀏覽器查看迅雷那個網站的源代碼，學習一下。

6、網頁設計中的引導頁究竟怎樣做

如何設計引導頁：

1.了解引導頁類型，清洗引導類型

前置型引導頁：啟動應用程序後，進入主功能前的一系列圖片或者動畫效果，停留數秒後消失。在用戶初次實用移動產品時，給予一些必要性的幫助，以便用戶快速了解產品類型，功能，具體操作

過程中引導：在用戶使用產品過程中給出一系列幫助內容，主要方式有空白頁的內容引導，loading等等狀態引導，拆分包袱的逐步引導，巧設默認值的功能引導，tips引導，浮點引導，遮罩聚焦式引導，觸發式引導，任務演練式引導等。

網頁設計中的引導頁究竟怎樣做?由於主要講前置型引導，這里插播兩個例子：

A.例如Facebook開啟定位的引導，但用戶需要發送當前位置的時候，應用會彈出圖中的引導形式，告訴用戶開啟定位的作用，用戶在這種使用場景下會很樂意開啟定位，從而提高了開啟定位的轉換率，又不會覺得這個引導影響了自己的體驗。

B.比如Google搜索中，在用戶進行拖動操作的時候，頂部的狀態欄變成了一句溫馨的提示，非但不打擾用戶，反而有一定幫助，用戶會覺得很貼心。

2.認識引導頁存在問題，避免走錯方向

隨著訪客的審美疲勞，頻繁出現的引導頁已經失去了對引導頁的新鮮感和喜愛感。要麼就是過多展示沒有實際功效的內容作為噱頭，而且這個噱頭並沒有吸引足夠的目光。在很多情況下卻起到了相反的效果。

畢竟首頁作為引流的窗口重要性顯而易見，引導頁前置需要訪客花時間等待主頁面的啟動，如果是一個體積過大時間過長的引導頁，或是引導頁上面的「skip」按鈕不夠明顯，很可能導致部分訪客流失，之前也講到，技術原因造成的訪問延時，引導頁能夠起到緩解用戶情緒的作用，如果是引導頁的不正確使用造成的訪客流失，那就是引導頁乾的壞事。

3.把控引導內容

心理學上發現的7±2效應，一個人的短時記憶至少能回憶出5個字，最多回憶9個，即7±2個。因此展示的文案要控制在9個字以內，超過後用戶容易遺忘、出現記憶偏差。如果表達起來困難，可以輔助一小段文字進行解釋或補充。因此在最終文案的確定上，要突出重點，多餘的文字盡可能地進行刪減。如果文案刪減後字數還是過多，因考慮對文字進行分層，通過空格或逗號或換行的方式進行視覺優化。

精準貼切的文案也十分重要，將專業的術語轉換成用戶聽得懂的語言。尤其對於通過照片來表現主題的引導頁設計，文案與照片的吻合度，直接影響到情感傳達的效果。

建議將引導頁採用純色簡單直接，盡量和主界面構架形式一直，讓用戶有快的感覺，有些工具型應用的引導頁單屏滾動多在0.5秒內，眼睛一睜一閉，引導頁就過去了。

如果應用功能主要是在橫屏的情況下完成，建議引導頁以橫屏方式呈現，以引導用戶提前切換手持設備姿勢，快速進入到你的應用界面中。

4.用戶引導規范，制定符合自己產品特性

每個移動應用都有一套自己的用戶引導規范，在制定用戶引導規范的時候。

用戶引導規范的指定可以按照不同的形式進行指定，一種是從用戶引導的樣式角度出發，把產品涉及到的各種用戶引導樣式一一羅列出來，並說明每種引導樣式的適用范圍、觸發機制以及消除機制等。這種形式的優點是各種引導樣式結構清晰，一目瞭然。另一種形式是從產品功能的角度出發，由於產品每個功能的重要程度和優先順序不同，對應的需要突出強調的程度也不一樣，所以將用戶引導樣式分為強中弱三大類，對於產品主要功能，優先順序很高的採用強引導樣式，對於次要功能，優先順序稍差的採用適中的引導樣式，對於輔助功能，優先順序最低的採用弱的引導樣式。同時強中弱三大類裡面又分別包括幾種引導樣式。這種形式的優點是從產品角度出發，根據功能的重要程度的優先順序選擇對應的引導樣式，方便快捷。

5.場景模擬，保證用戶引導的有效性，減少干擾，提升用戶體驗

用戶在使用產品的時候都是有一定的使用場景的，根據用戶的使用場景觸發響應的用戶引導，用戶引導在使用過程中彈出時是用戶意想不到的，很有可能打擾了用戶使用的流暢性，因為這是用戶沒有預期出現的東西，在一定程度上有驚慌失錯感，保證在用戶需要的時候彈出最符合用戶體驗，也是用戶最願意接受的時候。這樣的出現既不會特別突兀，不至於弄的用戶不知所措，又能在響應的場景下幫助到用戶。

6.避免引導頁鋪天蓋地的在任何類型的APP上引用

(信息類應用是一個內容為王的地方，尤其是被信息內容充滿的應用和注重效率的工具應用，比如說搜索應用，不斷追求信息以一種更快速更詳盡多方式呈現給用戶，所以才會有rss,基於AJAX技術的頁面布局。任何一些阻礙用戶高效獲取信息的細節都將導致用戶流失，而引導頁就是頭號殺手。

7.視覺聚焦

在單個引導頁中，信息不宜過多，只闡述一個目的，所有元素都圍繞這個目的進行展開。視覺聚焦包括兩部分，一是文案的處理，要注意層次，主標題與副標題要形成對比;二是引導頁中的界面、場景、文案具象化元素，要有一個視覺聚焦點，多個視覺元素的排布採用中心擴散的方式，聚焦點的視覺面積最大，同時與擴散的元素拉開對比。這樣用戶能清晰地看到核心文案信息與文案對應的視覺表現元素。同時結合視線流動的規律，從上到下，從左到右，從大到小。因此可以根據這個視線流的規律來進行引導頁的設計。

9.著建特色，從競品中凸顯差異化

之前對於表現方式的歸類已經講到了動畫及頁面切換方式，如果增加了頁面動效，利用動效，包括放大、縮小、平移、滾動、彈跳，表現形式更加多樣化，會讓引導頁更有趣，注意力更為集中。

7、移動端單屏滾動網頁怎麼實現，網頁里有CSS3動畫效果

移動端的單屏滾動網頁及動畫效果，1.http://www.swiper.com.cn/demo/senior/index.html
http://www.swiper.com.cn/usage/animate/index.html，可以參考這種，案例跟api都有。易懂，（推薦使用）
2.zepto.js 的touch事件。

8、製作網站首頁時需要考慮兩個方面內容

在HTML開發中，製作網站時首先需要考慮內容是頁面內容和頁面布局。

首頁是整個網站頁面最完整的內容，將網站的每一欄內容設置為一個，這樣的功能如果排版不當，那麼首頁就會出現混亂。

因此，主頁的布局是整個網站的首要任務，所以主頁的布局必須簡單有序，主要和次要，把重要和需要的內容放在首頁的位置。

(8)單屏網頁設計擴展資料

首頁常用的網頁布局：

1、單屏網站設計

單屏網站設計，由頭部banner內容底部構成，有時候也只有頭部banner底部，而把內容放在內頁展示。這樣做就必須在一個頁面上獲得所有必要的信息，同時，需要確保頁面具有視覺吸引力和用戶友好性。

Banner廣告圖的設計是整個網站中的重中之重，廣告圖設計打造品牌、突出產品亮點、利用新穎的設計吸引用戶。

2、長頁面網站設計

長頁面網站設計，由頭部banner內容一、內容二、內容三……底部構成，在首頁布局上，盡可能得展示公司的產品服務優勢，打造產品賣點，因為其營銷性質，也稱為營銷型網站設計。

長頁面網站設計，比起單屏網站來講，內容更豐富，深受眾多企業的喜愛，不僅是一種很好的宣傳方式，也能吸引很多有效的消費群體。

9、網站設計單屏需要多少費用

一般不會按照幾屏來收費的。你這個需求一般是宣傳頁或者企業網站，估計你只要一個靜態頁就可以了，這個收費不會很貴，一般幾百元就可以了，上了千的基本上就沒意思了。

導航:首頁 > 萬維百科 > 單屏網頁設計

單屏網頁設計

與單屏網頁設計相關的知識