導航:首頁 > 萬維百科 > 網頁設計怎麼來的

網頁設計怎麼來的

發布時間:2021-03-19 18:53:04

1、網頁設計 類似百度搜索頁面是怎麼做出來的

網頁設計這個一般都是要求會前端代碼,html css js flash 還有些其他的腳本插件什麼的。

如果代碼寫的熟練可以不用DW。寫網頁的工具很多,用txt文本文檔也可以。


好了,貼上搜索框代碼,使用需要後台程序支持,直接點了可是什麼都沒有哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索框</title>
<style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
      }
      body,
      input,
      button {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      .container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

      a { color: #4183c4; text-decoration: none; font-weight: bold; }
      a:hover { text-decoration: underline; }

      h3 { color: #666; }
      ul { list-style: none; padding: 25px 0; }
      li {
        display: inline;
        margin: 10px 50px 10px 0px;
      }
      input[type=text],
      input[type=password] {
        font-size: 13px;
        min-height: 32px;
        margin: 0;
        padding: 7px 8px;
        outline: none;
        color: #333;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in 0;
        vertical-align: middle;
      }
      .button {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 8px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,0.9);
        white-space: nowrap;
        background-color: #eaeaea;
        background-image: -moz-linear-gradient(#fafafa, #eaeaea);
        background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
        background-image: linear-gradient(#fafafa, #eaeaea);
        background-repeat: repeat-x;
        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom-color: #c5c5c5;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        vertical-align: middle;
        cursor: pointer;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
      }
      .button:hover,
      .button:active {
        background-position: 0 -15px;
        border-color: #ccc #ccc #b5b5b5;
      }
      .button:active {
        background-color: #dadada;
        border-color: #b5b5b5;
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.15);
      }
      .button:focus,
      input[type=text]:focus,
      input[type=password]:focus {
        outline: none;
        border-color: #51a7e8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5);
      }
     
      label[for=search] {
        display: block;
        text-align: left;
      }
      #search label {
        font-weight: 200;
        padding: 5px 0;
      }
      #search input[type=text] {
        font-size: 18px;
        width: 705px;
      }
      #search .button {
        padding: 10px;
        width: 90px;
      }

    </style>
</head>
<body>
<div class="container">
  <div id="search">
    <label for="search"></label>
    <input type="text" name="q">
    <input class="button" type="submit" value="Search">
  </div>
</div>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

2、網頁設計應該怎麼來學習!

現在的網站趨勢是高清型的,老闆喜歡門戶型的網站動機是因為他們的思路太活躍的結果,一味的干凈要看結構是不是設計合理,需要反映的要素反映了,這些要素能不能講故事,內涵還是要看能不能反映技術特徵,現在網頁使用群體因為搜索的普遍對深度要求很高,我6年以前就提出了搜商的概念,就是針對網頁信息量的深度的,你可追加提問。

3、網頁設計,到底該怎麼弄呢

用你教師教的和你copy所想的結合表達出來就行了。另外介紹幾個在國內還算可以的網站給你看下,希望對你有幫助!
www.redocn.com
www.68design.net
www.zcool.com.cn
www.sj63.com

4、怎樣做網頁設計

一、准備知識,包括學會使用各種網頁製作的工具軟體。

二、認真思考自己要做的網站內容及用途來確定製作網頁的風格。但總體網頁設計要遵循一些必要的隱性要求:

1.簡潔性:能讓瀏覽者一目瞭然,不使瀏覽者感到繁瑣並且無法找到其所需內容。2.突出主題:一個沒有主題的網頁同樣會使人失去瀏覽的興趣。3.實用性:一個網頁即使漂亮倘若對瀏覽者一無所用也無法吸人眼球。有一句話說:只有被需求才能生存。

三、搜集資料,比如網頁中可能要用到的圖片,文字及其它內容。善於使用搜索引擎如百度,谷歌,來查詢自己所需的資料。
善於使用網路上已有的信息及內容,比如一些開源的代碼等。(網路是一個大雜燴,各種信息魚目混珠,各色人物魚龍混雜,要學會辨別。)

四、關注自己所製作網頁的內容與社會時代的相符性,及時更新網頁版面。

五、將目光放長遠,不斷學習。如果你要學習網頁建站代碼的知識,你來這個群一起來學習。這個的第一組數字是431。第二組的數字是011,第三組的數字是879。就是這三組數字結合起來就可以進來學習了。每天都有網頁代碼建站的課程知識。如今互聯網的發展極其神速,各種技術日新月異。只有不斷的學習進步,才能跟得上時代的潮流,你的網站才能立於不敗之地!

【學習網頁建站需要掌握的軟體】

1.DreamWeaver

自製動態HTML動畫的網頁

DreamWeaver是一個很酷的網頁設計軟體,它包括可視化編輯、HTML代碼編輯的軟體包,並支持ActiveX、JavaScript、Java、Flash、ShockWave等特性,而且它還能通過拖拽從頭到尾製作動態的HTML動畫,支持動態HTML(Dynamic HTML)的設計,使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。
DreamWeaver還採用了Roundtrip HTML技術。這項技術使得網頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換,HTML句法及結構不變。這樣,專業設計者可以在不改變原有編輯習慣的同時,充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰性和生命力的是它的開放式設計,這項設計使任何人都可以輕易擴展它的功能。

2.Fireworks

第一款徹底為Web製作者們設計的軟體

Fireworks的來頭實在不小,它的出現使Web作圖發生了革命性的變化。Fireworks是專為網路圖像設計而開發,內建豐富的支持網路出版功能,比如Fireworks能夠自動切圖、生成滑鼠動態感應的javascript。而且Fireworks具有十分強大的動畫功能和一個幾乎完美的網路圖像生成器(Export功能)。它增強了與dreamweaver的聯系,可以直接生成dreamweaver的Libaray甚至能夠導出為配合CSS式樣的網頁及圖片!

3.flash 、photoshop

flash是動畫設計軟體,photoshop是圖片處理軟體,這些圖片設計處理軟體也屬於常用的網頁製作軟體。為了豐富網頁的內容,增加網頁美觀性,網頁製作中經常還需要應用各種圖片,這些圖片需要用專門的圖像處理軟體來設計。

學習Dreamweaver、flash、fireworks、ps等軟體綜合運用,讓創意為用戶服務,培養學員獨立思考、創作的良好習慣和先進的設計理念,培養創新型網頁設計師!

5、網頁模板是怎麼設計出來的

網頁模板是在來,flash.dreamweaver.fireword.網頁三自劍客裡面作出來的,一般的動畫是在flash裡面作的,而鏈接是在dreamweaver.裡面作的,修圖用的是fereword.裡面作的,這三個軟體都有不同的功能,如果你想在現成的圖片你可在在網上載下來,然後在加到自已的網站上,如果想自己作那人你只有熟練的撐握這三個軟體才行.網頁的模板也可以用後台支持,不過很費神.

6、網頁設計怎麼做?

靜態的:html、css、js差不多可以了
動態的:上面基礎加上jsp/asp/php 還有後端java/c#等

7、怎麼來搞網頁設計呢??知道的告訴我好嗎?拜託各位大神

做網站的步驟一、做好網站頁面文件二、申請域名(即網址:這個要花錢),有專門的網路公司賣域名三、購買空間(即存放你網站文件的磁碟空間),有專門的網路公司賣域名,這個也要花錢,這個就可以你的電腦關了機,別人也能看到你的網站,因為網站文件並沒有存在你的電腦上。如果你的電腦做為伺服器,那麼你關了別人就看不到了四、網路公司告訴你FTP地址:帳號及密碼,你通過在IE地址欄里輸入:FTP//地址。上傳你做好的網。頁文件,即可輸入通過你購買的域名來訪問了。五、需要在互聯網信息中心備案,備案地址: http://www.miibeian.gov.cn/ ,也可以要求你購買空間的網路公司幫你備案。以上是做整個網站的步驟。最難的在第一步,下面說第一步,就是如何學習做網站一、首先要有一個網頁製作軟體,目前用的多的是dreamweaver,免費下載地址: http://www.onlinedown.net/soft/22017.htm ,通過這個的學習,你可以製作出靜態的網頁了。這是所見即所得的軟體,不難學。二、圖片處理軟體的學習,用PHOTOSHOP對圖片進行處理,然後用上面的dreamweaver把圖片放在你要的地方三、動畫製作:用FLASH可以製作動畫,然後用上面的dreamweaver把圖片放在你要的地方四、如果要做動態的(所說的動態,不是指上面的FLASH動畫,是指和用戶交互的,比如用戶留言,能馬上顯示在頁面上),還需要學習ASP,JSP,PHP或者.net這幾種中的一種就可以做出動態的網站,當然也可以學習幾種。五、資料庫:可以用ACCESS或者SQL SERVER,和上面的ASP結合使用。這樣你就可以製作出完全屬於你自己管理的網站了

麻煩採納,謝謝!

8、網頁設計,怎麼做?

一、確定網站主題

網站主題就是你建立的網站所要包含的主要內容,一個網站必須要有一個明確的主題。特別是對於個人網站,你不可能像綜合網站那樣做得內容大而全,包羅萬象。

二、搜集材料
明確了網站的主題以後,你就要圍繞主題開始搜集材料了。常言道:「巧婦難為無米之炊」。要想讓自己的網站有血有肉,能夠吸引住用戶,你就要盡量搜集材料,搜集得材料越多,以後製作網站就越容易。

三、規劃網站
一個網站設計得成功與否,很大程度上決定於設計者的規劃水平,規劃網站就像設計師設計大樓一樣,圖紙設計好了,才能建成一座漂亮的樓房。網站規劃包含的內容很多,如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等,你只有在製作網頁之前把這些方面都考慮到了,才能在製作時駕輕就熟,胸有成竹。
四、選擇合適的製作工具
盡管選擇什麼樣的工具並不會影響你設計網頁的好壞,但是一款功能強大、使用簡單的軟體往往可以起到事半功倍的效果。

五、製作網頁
材料有了,工具也選好了,下面就需要按照規劃一步步地把自己的想法變成現實了,這是一個復雜而細致的過程,一定要按照先大後小、先簡單後復雜來進行製作。所謂先大後小,就是說在製作網頁時,先把大的結構設計好,然後再逐步完善小的結構設計。

六、上傳測試
網頁製作完畢,最後要發布到Web伺服器上,才能夠讓全世界的朋友觀看,現在上傳的工具有很多,有些網頁製作工具本身就帶有FTP功能,利用這些FTP工具,你可以很方便地把網站發布到自己申請的主頁存放伺服器上。網站上傳以後,你要在瀏覽器中打開自己的網站,逐頁逐個鏈接的進行測試,發現問題,及時修改,然後再上傳測試。全部測試完畢就可以把你的網址告訴給朋友,讓他們來瀏覽。

七、推廣宣傳
網頁做好之後,還要不斷地進行宣傳,這樣才能讓更多的朋友認識它,提高網站的訪問率和知名度。推廣的方法有很多,例如到搜索引擎上注冊、與別的網站交換鏈接、加入廣告鏈等。

八、維護更新
網站要注意經常維護更新內容,保持內容的新鮮,不要一做好就放在那兒不變了,只有不斷地給它補充新的內容,才能夠吸引住瀏覽者

9、網頁設計怎麼學

我從2001年開始從事學做網頁,完全是個人愛好,和自己專業相去甚遠。2005年畢業從事專職網頁設計工作,做過2年網站設計師,一年網頁設計培訓,先是美工程序都自己做,現在專業從事網站程序設計,通過自己走的路我把我的一些學習時的經驗和你說說吧1、無論你將來用什麼語言做網頁,都要先學習HTML(超文本標識語言),一種很簡單的語言,也是網頁設計的基礎,自學一般幾天就可以學會,必須要學,盡管現在有三劍客這樣的可視化的設計軟體。2、掌握HTML以後,其實你就可以設計一些簡單的靜態頁面了,再接下來就是學習可視化設計軟體,比如網頁三劍客中的DREAMWEAVER(推薦),和微軟的FRONTPAGE,都是可視化的頁面結構設計軟體,可視化的意思,就是可以用軟體中現成的按鈕或選項來幫你快速製作網頁,代碼由軟體代替你自動生成,可以大幅提高效率。3、頁面設計學好以後,可以學習FLASH動畫和PHOTOSHOP,都用得到。4、學完這些,恭喜你,你已經可以設計簡單的網站了,但如果想工作,那還不行,因為現在大大小小的網站都是動態頁面,需要學習動態設計語言和資料庫知識。5、動態語言有很多,比如ASP、JSP、PHP、CGI等等,就不一一列舉了,我自己現在用的是ASP和PHP,其中,相對來說ASP和PHP比較容易學習,小型網站多採用ASP,PHP可以通吃一切網站,建議學習PHP,可以根據你的具體情況選擇學習。6、資料庫:小型資料庫主要有ACCESS、中大型有MYSQL、SQLSERVER和ORACLE,建小型網站簡單學學ACCESS就可以了,如果建大型站,就要學後面3種了。建議學習PHP+MYsql組合,大中小型網站通吃,而且網站空間也好買。上面6個步驟學習完成你基本上就可以以網站為工作了,不過現在網路公司一般都是批量批量的做網站,他們不需要你美工和程序一起做,他們將做網頁頁面(PHOTOSHOP+Flash)的稱為網頁設計師,把專業做程序的叫程序設計師,例如我現在就是做PHP+MYSQL的,叫程序設計師,因為人的能力是有限的,讓什麼都自己做實在有些力不從心。不過一般建議大家都會一點,這樣可以相互促進。好了,上面就談談學做網站的經驗和建議,是我學習網站設計以後回過頭再看網頁製作學習的經驗,也是看了一個同行在QQ問問裡面的一篇回答後的總結,希望對你有幫助,有問題可以問我。

與網頁設計怎麼來的相關的知識