1、建設網站是使用單頁面,還是使用多頁面設計
?
2、如何規劃和設計較復雜的網頁
網頁的規劃和設計是兩個相對獨立的內容。
一般網頁製作都會經歷一個:規劃 - 設計 - 製作 的過程。
規劃,規劃也叫網站策劃,你需要整理出網站的內容分類,通常是從主導航入手,然後逐層細化和歸類。主要的原則是流暢,清晰,這直接涉及最終的用戶體驗。一般規劃還可以使用草圖文案和原型圖設計。規劃工作完成時,你要整理出完整的頁面列表和內容形式,比如列表,圖文列表等。
設計,設計階段是簡單說是美化原型圖,讓網頁更具美感。設計的原則自然是遵循網頁設計規范,保持設計源文件的清晰度和圖層合理性,這一步,你除了需要具備基礎的網頁設計理論外,還需要作圖能力,當然,還需要你大致懂得網頁效果圖和實際網頁的關系(字體,圖片,圖標等!)
製作,製作部分一般稱為開發,開發分為前端和編程兩部分。
前端開發,是把網頁效果圖製作成html文件。這一步,你需要使用到html、css、js等基礎的網頁編程語言。前端開發的原則是代碼嚴謹(標簽使用得當,js無錯誤等),頁面兼容大部分瀏覽器和屏幕。
編程開發,是製作頁面動態數據交互,也就是通常所說的增刪改查。這一步的工作相對復雜,主要需要注意程序的高效性,安全性和交互的合理性。
其實,你所說的復雜,可以從兩個方面理解,一是頁面結構的復雜,二是程序功能的復雜。
網頁結構的復雜,就是網頁設計的比較「繁瑣」。頁面內容較多,頁面中的各種交互較為復雜。這種時候,你需要有靈活的代碼邏輯,也需要你能夠從整體上把握網頁的構成和框架,只有這樣,你才可以把復雜的網頁一步一步、一層一層簡化掉,也就是化整為零。通常,一個網頁的設計和製作也基本是1-2-3-4-5這樣的製作,一個頁面,氛圍2個區域,然後逐層細分。當你熟練的使用position等特殊的css技巧後,你會發現,其實做網頁和ps作圖差不多。
程序設計的復雜性,這個就仁者見仁了,程序設計的復雜和網站規劃相關,也和程序開發的模式有關,網站規劃的時候,你就要把每個功能推敲好,具體這個模塊或功能適合怎樣的表現,大致能使用到那些技術,有無其他介面等。其實有時候,規劃初期可能有20幾個功能,經過推敲後變成了10個,而最終開發的時候,可能因為模塊的操作的相似性又會被程序人員開發成5個功能塊,當然這是一種開發模式。總而言之,程序設計的復雜性,首先需要考慮有無必要復雜,然後設計復雜程序,然後簡單的驗證程序的可用性,最終確定程序設計方案。
3、網頁製作,如何規劃頁面.
一、復雜方法
在手工製作個人網站的時代,我們可以總結出的網站製作步驟基本為:設計、切割、代碼生成、發布。而在此之前,應該規劃出網站的結構,包括頁面數、欄目設置等。
1.設計
進行頁面總體規劃,包括風格、布局等。網站製作要有整體風格,各部分要保持協調,整個頁面看起來才不顯得凌亂。然後用平面設計軟體製作整個頁面,常用的軟體有Adobe Photoshop、CorelDraw、Macromedia Fireworks等。Photoshop是平面設計的大拿,筆者也一直用它做頁面設計,它從6.0版開始特別增強了對網頁製作的支持,顯得非常方便。現在流行的Fireworks是Macromedia網頁製作三劍客的重劍手,由於它與Dreamweaver及Flash無縫集成,越來越受到網站製作人的歡迎。
2.切割
做完第1步,我們得到的只是一個圖片文件,還沒集成網頁上應該有的元素。接下來要將圖片按製作需求切割成小圖。切割功能前面提到的兩個設計軟體中已經集成了(如Photoshop中提供的切片工具),不需要專門的軟體來處理。
3.代碼生成
這是整個製作過程中最重要的一環。我們要用HTML語言將切割下來的組件按整體設計「拼裝」回去。眾所周知,HTML語言是一種標記型語言,不須要編譯就可以直接在瀏覽器中執行。所以理論上,我們可以用記事本等文本編輯工具來寫代碼。手寫代碼雖然被看作是一種很「酷」的行為,但是很耗時間,而且很難精確地控制格式。這時,便該專門的HTML編輯軟體出場了。
HTML編輯軟體大體上可分為兩類:一類是代碼型,典型代表為Homesite、Hotdog等;一類是所見即所得型,典型代表為Frontpage。也有兩者兼具的,就是大名鼎鼎的Macromedia Dreamweaver。代碼型實際上就是一個文本編輯器,不同的是,它可以有專門的代碼提示功能,用起來比較方便。所見即所得是目前大家最推崇的方式,因為可視化的編輯基本丟棄了代碼,方便快捷。
說到Dreamweaver,筆者就不多介紹了,我相信大部分的網站製作人都使用它在工作。Dreamweaver提供了代碼編寫模式和設計模式(即所見即所得),並且首次將「層」概念引入網頁製作。Dreamweaver幾乎可以滿足所有人的需求,甚至還提供了ASP、PHP等腳本語言的代碼提示。
4.發布
將製作好的頁面放到伺服器上,以便更多的人能瀏覽。發布通常採用FTP的方式,將文件上傳到伺服器。目前的網頁製作工具基本上都有發布工具,可以通過各種方式發布你的頁面,如Dreamweaver中的「站點管理器」。用戶亦可使用FTP客戶端軟體進行這步操作。
4、網站設計是單頁還是多頁好
單頁網站優勢:
單頁網站最直接的好處是以簡單,容易和可操作的方式展示給用戶。
單頁站點可以讓用戶沉浸在簡單的線性體驗。整個頁面有簡單的頭部,中部,尾部。事實上,單頁網站的滾動特性使得它們非常適合於習慣了該手勢的移動用戶。有些專家認為,與較大的多頁網站相比,單頁網站的轉化率更高。
劣勢:
單頁網站最大的劣勢就是陷入把過多的內容放置在一個頁面里。因為一個頁面不可能容納所有的一切。而是需要有視覺層次和大量的規范制約。隨著內容類別的增加(例如博客,新聞,服務,產品),單頁網站的可用性越高。從技術的角度來看,單頁網站的搜索優化比多頁網站少。當一個頁面上的內容和圖像很多時,他們會載入很慢。對搜索的內容查詢。雖然單頁網站可能會提高您的主要關鍵字的相關性,但更有可能會稀釋其在自己的網頁上排名更高或次之的子主題和字詞的相關性。
多頁網站:多頁網站通常由擁有廣泛產品或服務的大公司所有。 他們的用戶也可能是相當多樣化,這些網站的要點是:需要盡可能大容量;由於內容的數量,他們需要層次分明;很多時候,它們由許多微型網站和子部分組成,以分解信息和內容,並提供多個入口點;它們提供對多個頁面和改變內容的SEO的更好控制。
優勢:
多頁網站對於需要傳統導航的用戶來說很有意義。他們需要給用戶提供更多的信息。例如,對於電子商務網站,用戶不想花費一個頁面了解您公司的故事或員工。而是想要找到想要的產品,付費然後使用。在這種情況下,到不同頁面的導航欄就會非常有效。
劣勢:如果設計的網站越復雜,傳統導航就越難展示和查找。
總結:採取內容優先的方法。 找出用戶關心的內容,然後相應地設計您的界面。
確保你的網站適合純粹的單頁體驗。 如果你不能把所有內容簡潔的放入一個頁面,請考慮混合網站。 如果需要用戶知道多個類別,請使用多頁網站。
不要忽視SEO, 可以用單頁網站建立搜索引擎優化。
用戶不總是喜歡閱讀, 這就是為什麼信息圖表和視頻是新用戶體驗的一部分。 任何大小的網站都需要使用戶可以快速瀏覽。
把事情簡單化, 設計的一致性實際上對用戶來說操作更簡單。
網站的清晰度很重要。
5、對網頁設計師而言,是選擇單頁面還是多頁面的設計
單頁面適用於展現內容較少、表現相對單一,但又很個性化的網站。例如設計師的個人主頁、單個產品展示等。
6、剛學html,關於網頁前端設計怎麼實現這種效果? 在同一個頁面有兩個登陸窗口,以及上面下拉出現很多
http://www.17sucai.com/preview/208672/2014-11-25/js模擬上古世界官網多級下拉導航菜單/index.html
http://www.17sucai.com/preview/289750/2015-11-25/簡潔大方的登錄頁面/index.html