用web設計一個商品展示頁

Ⅲ Dreamweaver中怎麼製作一個商品展示頁面

Dreamweaver中製作一個商品展示頁面步驟：
第一、用ps製作出頁面圖稿。
第二、ps切圖，Dreamweaver軟體布局，用div布局，css樣式美化。
只要有一定的網頁設計基礎，懂得寫代碼規則，製作一個頁面不是很難。

Ⅳ 使用HTMl進行WEb頁面設計

再加個全部內容的連接

Ⅳ 下圖是某商城商品分類頁面，請按圖片用html製作出如下頁面，並將主要代碼寫在答卷上,並寫出你的設計方法

上面那行字，設置屬性text-derection為under-line這樣就會有下劃線....
下面菜單用一個DIV裡面嵌套五個DIV。
每個DIV的寬高設置好。
第一個DIV的漸變效果代碼略復雜，可以找個圖做背景，商品分類和全部分類超鏈接設置屬性disaplay為block，一個左浮動一個右浮動，行高屬性（line-height）設置成與DIV的高度一直，這樣垂直才會居中，下面的應該大同小異。
用DISAPLAY設置為BLOCK之後會變成塊級元素，下面的超鏈接全都要設置成左浮動，像【家用電器】那樣的，你可以直接打空格控制縮進距離，也可以調整左邊距。。。
嗯。。。不懂可以繼續問。。。本人大一，HTML學的還湊合

Ⅵ 求指導怎麼做一個web頁面啊。。用dreamwear.自己設計，用div,css.要交期末作業，太頭大了，嗚嗚

先下個dreamweaver8。網路 DIV + CSS 一些網站提供模板下載，自己看看就懂了。很簡單

Ⅶ 網頁設計【簡單的商城頁面】

資料庫的話，找個商城系統就不用自己在建了，套模板 你會不？就是把下載好的模板，跟商城系統整合到一起嗎，行成一個整體的網站，就是你喜歡的商城風格啦！

Ⅷ 如何設置一個漂亮的網頁

網頁設計的要點是設計第一而技術其次
企業網站設計顯得極為重要，下面是一些網站設計中應注意的原則。 一、 明確建立網站的目標和用戶需求 Web站點的設計是展現企業形象、介紹產品和服務、體現企業發展戰略的重要途徑，因此我們必須明確設計站點的目的和用戶需求，從而做出切實可行的設計計劃。我們會根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，以「消費者（customer)」為中心，而不是以「美術」為中心進行設計規劃。
在設計規劃時我們會考慮：

外國網頁設計(15張)建設網站的目的是什麼？ 為誰提供服務和產品？ 企業能提供什麼樣的產品和服務？ 網站的目的消費者和受眾的特點是什麼？ 企業產品和服務適合什麼樣的表現方式（風格）？ 二、網頁設計總體方案主題鮮明 在目標明確的基礎上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色作出定位，規劃網站的組織結構。 Web站點應針對所服務對象（機構或人）的不同而具有不同的形式。有些站點只提供簡潔文本信息；有些則採用多媒體表現手法，提供華麗的圖像、閃爍的燈光、復雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現手法和有效的組織與通信結合起來。 為了做到主題鮮明突出，要點明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現站點的主題；調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。 Web站點主頁應具備的基本成分包括： 頁頭：准確無誤地標識你的站點和企業標志； Email地址：用來接收用戶垂詢； 聯系信息：如普通郵件地址或電話； 版權信息：聲明版權所有者等。 充分利用已有信息，如客戶手冊．公共關系文檔．技術手冊和資料庫等。 三、網站的版式設計 網頁設計作為一種視覺語言，特別講究編排和布局，雖然主頁的設計不等同於平面設計，但它們有許多相近之處。 版式設計通過文字圖形的空間組合，表達出和諧與美。 多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映出來，特別要處理好頁面之間和頁面內的秩序與內容的關系。為了達到最佳的視覺表現效果，我們將反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。 四、色彩在網頁設計中的作用 色彩是藝術表現的要素之一。在網頁設計中，我們的設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合．搭配來構成美麗的頁面。 根據色彩對人們心理的影響，合理地加以運用。如果您的企業有CIS（企業形象識別系統），我們將按照其中的VI進行色彩運用。 五、網頁設計形式與內容相統一 為了將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。 靈活運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感。如對稱原則在頁面設計中， 它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或採用誇張的手法來表現內容往往會達到比較好的效果。 點、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補充構成最佳的頁面效果，充分表達完美的設計意境。 六、三維空間的構成和虛擬現實 網路上的三維空間是一個假想空間，這種空間關系需藉助動靜變化．圖像的比例關系等空間因素表現出來。 在頁面中，圖片、文字位置前後疊壓，或頁面位置變化所產生的視覺效果都各不相同。通過圖片、文字前後疊壓所構成的空間層次不太適合網頁設計，根據現有瀏覽器的特點，網頁設計適合比較規范、簡明的頁面，盡管這種疊壓排列能產生強節奏的空間層次，視覺效果強烈。 網頁上常見的是頁面上、下、左、右、中位置所產生的空間關系，以及疏密的位置關系所產生的空間層次，這兩種位置關系使產生的空間層次富有彈性，同時也讓人產生輕松或緊迫的心理感受。 現在，人們已不滿足於HTML語言編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現實要在Web網上展示其迷人的風采，於是VRML語言出現了。VRML是一種面向對象的語言，它類似Web超級鏈接所使用的HTML語言，也是一種基於文本的語言，並可以運行在多種平台之上，只不過能夠更多地為虛擬現實環境服務。 七、網頁設計中多媒體功能的利用 網路資源的優勢之一是多媒體功能。要吸引瀏覽者注意力，網頁的內容可以用三維動畫、FLASH等來表現。但要由於網路寬頻的限制，在使用多媒體的形式表現網頁的內容時不得不考慮客戶端的傳輸速度。 八。結構清晰並且便於使用。 如果人們看不懂或很難看懂您的網站，那麼，他如何了解你的企業和服務呢？使用一些醒目的標題或文字來突出您的產品與服務。並且即使您擁有最棒的產品，如果客戶從您的網站上不清楚您在介紹什麼或不清楚如何受益的話，他們是不會喜歡您的網站的，這就是網頁設計的失敗。 九。導向清晰。 網頁設計中導航使用超文本鏈接或圖片鏈接，使人們能夠在您的網站上自由前進或後退，而不會讓他們使用瀏覽器上的前進或後退。我們在所有的圖片上使用「ALT」標識符註明圖片名稱或解釋，以便那些不願意自動載入圖片的觀眾能夠了解圖片的含義。 十。快速的下載時間。 很多的瀏覽者不會進入需要等待5分鍾下載時間才能進入的網站，在互聯網上30秒的等待時間與我們平常10分鍾等待時間的感覺相同。因此，我們會建議您在網頁設計中盡量避免使用過多的圖片及體積過大的圖片。我們通常會與客戶合作，將主要頁面的容量控制在50K以內，平均30K左右，確保普通瀏覽者頁面等待時間不超過10秒。 十一。非圖形的內容。 我們在必要時適當使用動態「Gif」圖片，為減少動畫容量，應用巧妙設計的Java動畫可以用很小的容量使圖形或文字產生動態的效果。但是，由於在互聯網瀏覽的大多是一些尋找信息的人們，我們仍然建議您要確定您的網站將為他們提供的是有價值的內容，而不是過度的裝飾。 十二。方便的反饋及訂購程序。 讓客戶明確您所能提供的產品或服務並讓他們非常方便地訂購是您獲得成功的重要因素。如果客戶在您的網站上產生了購買產品或服務的慾望，您是否能夠讓他們盡快實現嗎？是在線還是離線？ 十三、網站測試和改進 測試實際上是模擬用戶詢問網站的過程，用以發現問題並改進網頁設計。
編輯本段網頁設計的要點
網頁設計的兩大要點是：整體風格和色彩搭配。 一、確定網站的整體風格 在這里，我提供給大家一些參考經驗： 1．將你的標志logo，盡可能的放在每個頁面上最突出的位置。 2．突出你的標准色彩。 3．總結一句能反映貴站精髓的宣傳標語！ 4．相同類型的圖像採用相同效果，比如說標題字都採用陰影效果，那麼在網站中出現的所有標題字的陰影效果的設置應該是完全一致的！ 二、網頁色彩的搭配 1．用一種色彩。這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。 2．用兩種色彩。先選定一種色彩，然後選擇它的對比色。 3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。 在網頁配色中，還要切記一些誤區： 1．不要將所有顏色都用到，盡量控制在三至五種色彩以內。 2．背景和前文的對比盡量要大(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。 三、網頁設計的工具 1.dreamweaver,用與編輯HTML、ASP、JSP、PHP時的輔助工具 2.Frontpage 跟dreamweaver一樣，不過個人感覺還是dreamweaver好。 3.FLASH 網頁需要畫面流動時的首選擇 4. PS圖象處理軟體，一般網頁都需要有圖片相搭配，PS是款很強大的工具。 5.FW跟PS一樣都是圖象處理軟體，但FW偏向與對網頁的處理。[個人喜歡PS] 網頁設計必須注意的26個問題 當你在INTERNET這個信息的海洋中盡情遨遊時，會發現許許多多內容豐富、創意新穎、設計獨特的個人網頁，不知道你見到這樣漂亮可人的網頁是否有點心動。一旦你具備了上網的條件，又萌發了製作主頁的念頭，那麼就應該注意網頁設計時應考慮哪些方面的問題，包括網站功能和以及訪問者需要什麼。你的整個設計都應該圍繞這些方面來進行。下面筆者就自己在實踐操作中的使用體會來談談網頁設計時應該考慮哪些問題，希望能給初建網站的用戶帶來一定的作用。 1、頁面內容要新穎 網頁內容的選擇要不落俗套，要重點突出一個「新」字，這個原則要求我們在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個獨一無二的網站。 放眼望去，網上的許多個人主頁簡直就是"雜貨店"，內容包羅萬象,題材千篇一律，人人都是"軟體下載",個個都有"網路導航"，從頭到尾找不出一絲「鮮」意。所以，我們在設計網頁時，要把功夫下在選材上。選材要盡量做到「少」而「精」,又必須突出「新」，如能堅持天天更新的話,我相信這樣的網頁一定會受到大家的歡迎。 2、網頁命名要簡潔 由於一個網站不可能就是由一個網頁組成，它有許多子頁面，為了能使這些頁面有效地被連接起來，用戶最後能給這些頁面起一些有代表性的而且簡潔易記的網頁名稱。這樣既會有助於你以後方便管理網頁，在向搜索引擎提交你的網頁時更容易被別人索引到。在給網頁命名時，最好使用自己常用的或符合頁面內容的小寫英文字母，這直接關繫到頁面上的連接。 3、要及時更新網頁 網頁製作好後，不能說萬事大吉了，其實事後的工作量更大。因為網頁製作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連接應該立即刪除掉，比如用戶無意中點擊了頁面中的一個連接，在苦苦的等待之後，換來的是無法訪問的結果，那麼他們會對你的網頁大失所望，可能以後再也不會光顧你的網頁了。若不能及時更新，也最好在主頁上發布信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。 4、注意視覺效果 設計Web頁面時，一定要用1024*768的解析度來 分別觀察。許多瀏覽器使用1024*768的解析度，盡管在1280*1024高解析度下一 些Web頁面看上去很具吸引力，但在1024*768的模式下可能會黯然失色。作一點小小的努力，設計一個在不同解析度下都能正常顯示的網頁 5、隨時注意網站升級 時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計劃好你的升級計劃。 6、 網頁內容要易讀 網站設計最重要的訣竅，恐怕就是你的網頁要易讀 。這就意味著,你必須花點心思來規劃文字與背景顏色的搭配方案。 注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網頁來很費勁。一般來說，淺色背景下的深色文字為佳 。這個要點要求你最好別把文字的規格設得太小、也不能太大。文字太小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當代中文的閱讀習慣，文本大都居左的。當然，標題一般應該居中，因為這符合讀者的閱讀習慣。 7、善用表格來布局 不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。 8、 少用特殊字體 雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什麼。在你的計算機里看起來相當好的頁面，在另一個不同的平台上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯風格表CSS有助於解決這些問題，但是只有最新版的瀏覽器才支持CSS。 9、多學習和使用HTML 為了成功地設計網站，你必須理解HTML是如何工作的。大多數的網站設計者建議網路新手應從有關HTML的書中去尋找答案，用Notepad製作網頁。因為用HTML設計網站，可以控制設計的整個過程。但是，如果你僅僅是網站設計的新手，你應該尋找一個允許修改HTML的軟體包。HomeSite4是一個很好的Web設計工具。在設計過程中，HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式，以便你在把網站發送到Web之前，預覽你的網站。 10、盡量少用Java程序 不要使用大幅面的Java程序,能夠用javascript替代效果的則盡量不要使用java.因為目前來講java的運行速度實在慢的讓人無法忍受，往往使瀏覽者沒有耐心等頁面全部顯示出來，這樣你的精心設計便毫無效果啦。 11、 少放網站地圖 許多設計者把他們的網站地圖放在網站上，這種做法，卻是弊大於利。絕大部分的訪問者上網是尋找一些特別的信息，他們對於你的網站是如何工作的，並沒有興趣。如果你覺得你的網站需要地圖，那很可能是需要改進你的導航和工具條。 12、要為圖片附加註釋文字 給每個圖形加上文字的說明，在出現之前就可以看到相關內容，尤其是導航按鈕和大圖片更應如此。這樣一來，用戶在訪問你的站點時就有一種親切感覺，認為你心細，比較善解人意，時時刻刻為他人著想，相信你的好心會有好報的。 13、做個網站介紹 一個簡單明了的網站介紹，不僅能讓別人對你的網站能夠提供些什麼有個了解，引發共鳴或是表達你的誠意，常常最能打動讀者，而且還能使訪問者能快速找到想要的東西。但是，許多設計者都沒有這樣做。有效的導航條和搜索工具使人們很容易找到有用的信息，這對訪問者很重要。告訴訪問者你所提供的正是他們想要的信息。 14、考慮瀏覽器的兼容性 當然現在IE所佔的市場份額越來越大，但是我們仍然需要考慮到Netscape以及Opera這些瀏覽器用戶。設計風格的考慮，如色彩的搭配，圖形、線條的使用等等。要時刻為用戶著想，必須最少在幾種不同類型的瀏覽器下測試網站，看看兼容性如何。 15、不宜多用閃爍文字 有的設計者想通過閃爍的文字來引起訪問者的注意是可以被人理解的，但一個頁面中最多不能有三處閃爍文字，太多了給用戶一種眼花繚亂的感覺，反而會影響用戶去訪問該網站的其他內容，正所謂「物極必反」也， 16、每個頁面都要有導航按鈕 應當避免強迫用戶使用工具欄中的向前和向後按鈕。你的設計應當使用戶能夠很快地找到他們所要的東西。絕大多數好的站點在每一頁同樣的位置上都有相同的導航條，使瀏覽者能夠從每一頁上訪問網站的任何部分。 17、避免長文本頁面 在一個站點上有許多隻有文本的冗長頁面，是令人乏味的，人們為了閱讀這些長文本，不得不使用卷滾條，從而也浪費了用戶在網上沖浪的時間。如果你有大量的基於文本的文檔，應當以Adobe Acrobat格式的文件形式來放置，以便你的訪問者能離線閱讀，從而節省寶貴的時間。 18、 網頁風格要統一 你網頁上所有的圖像、文字，包括像背景顏色、區分線、字體、標題、注腳什麼的，要統一風格，貫穿全站。這樣子讀者看起來舒服、順暢，會對你的網站留下一個「很專業」的印象。 19、動畫最多隻用一個 大家都喜歡用GIF動畫來裝飾網頁，它的確很吸引人，但我們在選擇時，是否能確定必須用GIF動畫，如果答否，那麼就選擇靜止的圖片，因為它的容量要小得多。同樣的尺寸的LOGO，GIF動畫的容量有5K，而靜止LOGO的只有3K。雖然只有2K之差，但多起來，就會影響下載的速度，所以，如果有些不是必須的，就選擇最小的。 20、善用圖像 用戶在網上四處漫遊，你必須設法吸引和維護他們對你的主頁的注意力。萬維網的其中一個最重大資源是其多媒體能力，所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。圖像的內容應有一定的實際作用，切忌虛飾浮誇。注意圖畫可以彌補文字之不足，但並不能夠完全取代文字。很多用戶把瀏覽軟體設定為略去圖像，以求節省時間他們只看文字。因此，製作主頁時，必須注意將圖像所連接的重要信息或聯接其他頁面的指示用文字重復表達幾次，同時要注意避免使用過大的圖像，如果不得不放置大的圖像在網站上，就最好使用Thumbnails軟體，把圖像的縮小版本的預覽效果顯示出來，這樣用戶就不必浪費金錢和時間去下載他們根本不想看的大圖像。 21、 網站導航要清晰 所有的超鏈接應清晰無誤地向讀者標識出來，所有導航性質的設置，像圖像按鈕，都要有清晰的標識，讓人看得明白，千萬別光顧視覺效果的熱鬧的，而讓人家不知東西南北。鏈接文本的顏色最好用約定俗成的：未訪問的，藍色；點擊過的，紫色或栗色。總之，文本鏈接一定要和頁面的其他文字有所區分，給讀者清楚的導向 。 22、最好不用記數器 由於計數器也是由程序設計成的，顯示計數器的過程其實就是在執行一個程序的過程，它需要佔用用戶寶貴的上網時間，況且大多數瀏覽者認為計數器毫無意義，它們很容易被做假，瀏覽者也不想看廣告。因此筆者建議不要輕易考慮在你的網站上放置一個醒目的點擊記數器。你設計網站是為了給訪問者提供服務，而不是推銷你自己認為重要的東西。如果你顯示你的網站是多麼受歡迎，你最好提供一個鏈接，顯示訪問日誌。 23、不能忽視錯別字 一個好的網站對設計的每一個細節都不會放過，哪怕是一個微小的拼寫錯誤都是絕對不能出現的。但是遺憾的是，許多設計者都缺少這種技能。確保你拼寫正確，並且格外注意平常容易誤寫的錯別字，要時時刻刻保持一種嚴謹的科學態度。 24、不要用框架 與記數器一樣，框架在網頁上越來越流行。在大多數網站上，在屏幕的左邊有一個框架。但是設計者立刻就發現，在使用框架時產生了許多的問題。使用框架時如果沒有17英寸的顯示屏幾乎不可能顯示整個網站。框架也使得網站內個人主頁不能夠成為書簽。也許更重要的是，搜索引擎常常被框架混淆，從而不能列出你的網站。 25、使用著名的插件 如果網站上有聲音或視頻，要保證使用者通過使用某個知名的插件，能夠聽到或看到。如果訪問者沒有所要求的插件，將不得不到其它站點去下載，這樣訪問者有可能就不會返回了。許多站點使用QuickTime、RealPlay和 Shockwave插件。因為，許多訪問者並不願意浪費很多時間和金錢去下載可能僅使用一次的插件。 26、使網站具有交互功能 一個靜態網頁始終給人一種呆板的感覺，缺少一種活力和生氣。最好在網站上提供一些回答問題的工具以及其他具有交互性能的設計，使得訪問者能從網站上獲得交互的信息，從而使訪問者有一種參與網路建設的新鮮感和成就感。

Ⅸ 網頁設計製作詳細流程

分析如下：

1、首先下載安裝Dreamweaver，打開後，新建一個網頁，一般選擇「HTML」建立網頁。選擇「經典」界面，有助於我們更便捷使用這個軟體。

(9)用web設計一個商品展示頁擴展閱讀：

網頁設計

設計網站要注意兩個要點：整體風格和色彩搭配。

風格

網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。

風格（Style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。

色彩搭配

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。

網頁配色小技巧：

1．用一種色彩：這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感；

2．用兩種色彩：先選定一種色彩，然後選擇它的對比色；

3．用一個色系：簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區：

1．不要將所有顏色都用到，盡量控制在三至五種色彩以內；

2．背景和前文的對比盡量要大（絕對不要用花紋繁復的圖案作背景），以便突出主要文字內容。