網(wǎng)頁設(shè)計效果
提問問題
列表
-
html css JS 怎么設(shè)計點擊回頂部效果？
查看答案>>
-
網(wǎng)頁設(shè)計 鼠標滑過 圖片自動放大怎么做的代碼，或者如何做？
查看答案>>
-
Dreamweaver軟件是什么？它的主要功能有什么？
查看答案>>
-
網(wǎng)頁設(shè)計 圖片滾動代碼
查看答案>>
-
網(wǎng)頁設(shè)計和web前端開發(fā)哪個好
查看答案>>
-
學(xué)習(xí)網(wǎng)頁設(shè)計步驟
查看答案>>
-
網(wǎng)頁設(shè)計中如何讓圖片輪播
查看答案>>
-
關(guān)于網(wǎng)頁設(shè)計尺寸和字號大小
查看答案>>
-
h5頁面上的動畫效果是怎么制作的
查看答案>>
-
網(wǎng)頁設(shè)計一般需要用那些軟件？
查看答案>>
html css JS 怎么設(shè)計點擊回頂部效果？
點擊回頂部，或是回某個位置，主要是設(shè)置scrollTop。下面是一個簡單回頂?shù)睦樱合旅娴睦邮蔷徛仨?。如果將快速回頂，可以直接讓scrollTop = 0；就可以了。<style> body{height:5000px;} input {position:fixed; bottom:0px; right:0px;} </style> <script> window.onload=function(){ var oBtn = document.getElementById('btn'); var timer = null; var bFlag = false; oBtn.onclick=function(){ moveScroll(0,3000); }; window.onscroll=function(){ if(bFlag) { clearInterval(timer); } bFlag=true; }; function moveScroll(target,time) { var start = document.documentElement.scrollTop || document.body.scrollTop; var dis = target - start; var count = Math.floor(time/30); var n=0; clearInterval(timer); timer = setInterval(function(){ n++; bFlag=false; document.documentElement.scrollTop = start + dis*n/count; document.body.scrollTop = start+dis*n/count; if(n==count) { clearInterval(timer); } },30); } }; </script>
網(wǎng)頁設(shè)計 鼠標滑過 圖片自動放大怎么做的代碼，或者如何做？
鼠標經(jīng)過圖像后彈出一個浮動層然后放大該圖像，基于JavaScript的一個實現(xiàn)。需要事先準備好被放大的圖片和縮略圖，程序加載完圖像后才能看到效果，這也是一個不完美的地方，僅供參考學(xué)習(xí)。參考一下下面的網(wǎng)址，看下那種比較適合你。http://js.alixixi.com/a/2016303062402.shtmlhttp://www.codefans.net/jscss/code/2563.shtmlhttp://www.51xuediannao.com/js/jquery/jquery_fangda/
Dreamweaver軟件是什么？它的主要功能有什么？
Adobe Dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，DW是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁?！ 」δ埽航柚蚕硇陀脩艚缑嬖O(shè)計,在AdobeCreativeSuite4的不同組件之間更快、更明智地工作。使用工作區(qū)切換器可以從一個工作環(huán)境快速切換到下一個環(huán)境?！ 【唧w功能： 1、利用AdobeDreamweaverCS6軟件中改善的FTP性能，更高效地傳輸大型文件。更新的“實時視圖”和“多屏幕預(yù)覽”面板可呈現(xiàn)HTML5代碼，使您能檢查自己的工作?！ ?、自適應(yīng)網(wǎng)格。使用響應(yīng)迅速的CSS3自適應(yīng)網(wǎng)格版面，來創(chuàng)建跨平臺和跨瀏覽器的兼容網(wǎng)頁設(shè)計。利用簡潔、業(yè)界標準的代碼為各種不同設(shè)備和計算機開發(fā)項目，提高工作效率。直觀地創(chuàng)建復(fù)雜網(wǎng)頁設(shè)計和頁面版面，無需忙于編寫代碼?！ ?、改善FTP性能。利用重新改良的多線程FTP傳輸工具節(jié)省上傳大型文件的時間。更快速高效地上傳網(wǎng)站文件，縮短制作時間。 4、Catalyst集成。AdobeBusinessCatalyst集成，使用Dreamweaver中集成的BusinessCatalyst面板連接并編輯您利用AdobeBusinessCatalyst（需另外購買）建立的網(wǎng)站。利用托管解決方案建立電子商務(wù)網(wǎng)站?！ ?、增強型jQuery移動支持。使用更新的jQuery移動框架支持為iOS和Android平臺建立本地應(yīng)用程序。建立觸及移動受眾的應(yīng)用程序，同時簡化您的移動開發(fā)工作流程。 6、更新的PhoneGap支持。更新的AdobePhoneGap支持可輕松為Android和iOS建立和封裝本地應(yīng)用程序。通過改編現(xiàn)有的HTML代碼來創(chuàng)建移動應(yīng)用程序。使用PhoneGap模擬器檢查您的設(shè)計。 7、CSS3轉(zhuǎn)換。將CSS屬性變化制成動畫轉(zhuǎn)換效果，使網(wǎng)頁設(shè)計栩栩如生。在您處理網(wǎng)頁元素和創(chuàng)建優(yōu)美效果時保持對網(wǎng)頁設(shè)計的精準控制?！ ?、更新的實時視圖。使用更新的“實時視圖”功能在發(fā)布前測試頁面?！皩崟r視圖”現(xiàn)已使用最新版的WebKit轉(zhuǎn)換引擎，能夠提供絕佳的HTML5支持?！ ?、CSS3/HTML5支持。通過CSS面板設(shè)置樣式，該面板經(jīng)過更新可支持新的CSS3規(guī)則。設(shè)計視圖現(xiàn)支持媒體查詢，在您調(diào)整屏幕尺寸的同時可應(yīng)用不同的樣式。使用HTML5進行前瞻性的編碼，同時提供代碼提示和設(shè)計視圖渲染支持?！ ?
網(wǎng)頁設(shè)計 圖片滾動代碼
素材的準備。為了更好的表現(xiàn)網(wǎng)站的風(fēng)格和特色，具備一些更富表現(xiàn)力和吸引力的圖片是必不可少的。同理，準備了一些與網(wǎng)頁主題密切相關(guān)的圖片，用于做為實現(xiàn)圖片滾動效果的素材。打開Dreamweaver8，新建一網(wǎng)頁文件，并保存為名為“index.html"文件。切換至代碼編輯界面，輸入如下代碼：<body><div id="photo-list"> <ul id="scroll"> <li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div></body>對應(yīng)效果如圖所示：新建一CSS樣式表文件，并將該文件保存到與“index.html”相同的目錄下，文件名稱為“MyStyle.css"。在新建的樣式表文件"MyStyle.css”文件中輸入如下代碼：* { padding:0; margin:0;} /*設(shè)置所有對像的內(nèi)邊距為0*/body { text-align:center;} /*設(shè)置頁面居中對齊*/#photo-list {/* 6張圖片的寬度（包含寬度、padding、border、圖片間的留白）計算：6*(100+2*2+1*2+9) - 9 之所以減去9是第6張圖片的右邊留白 */ width:681px; /* 圖片的寬度（包含高度、padding、border） 計算：100+2*2+1*2 */ height:106px; margin:50px auto; overflow:hidden; /*溢出部份將被隱藏*/ border:1px dashed #ccc; } #photo-list ul { list-style:none;} #photo-list li { float:left; padding-right:9px;} #photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}對應(yīng)文件內(nèi)容如圖所示：在網(wǎng)頁文件"index.html"中添加對該樣式表的引用：<link rel="stylesheet" type="text/css" href="MyStyle.css">此時網(wǎng)頁效果如圖所示：新建一個JS文件，并將該文件另存為“MoveEffect.js"。在”MoveEffect.js“文件中輸入如下所示代碼： var id = function(el) { return document.getElementById(el); }, c = id('photo-list'); if(c) { var ul = id('scroll'), lis = ul.getElementsByTagName('li'), itemCount = lis.length, width = lis[0].offsetWidth, //獲得每個img容器的寬度 marquee = function() { c.scrollLeft += 2; if(c.scrollLeft % width <= 1){ //當 c.scrollLeft 和 width 相等時，把第一個img追加到最后面 ul.appendChild(ul.getElementsByTagName('li')[0]); c.scrollLeft = 0; }; }, speed = 50; //數(shù)值越大越慢 ul.style.width = width*itemCount + 'px'; //加載完后設(shè)置容器長度 var timer = setInterval(marquee, speed); c.onmouseover = function() { clearInterval(timer); }; c.onmouseout = function() { timer = setInterval(marquee, speed); }; };然后在主頁文件"index.html”中添加對該“MoveEffect.js”文件的引用。<script type="text/javascript" src="MoveEffect.js"></script>代碼如圖所示：打開“index.html”網(wǎng)頁文件，最終效果如果所示：
網(wǎng)頁設(shè)計和web前端開發(fā)哪個好
一個是偏向于設(shè)計，一個是偏向于代碼。如果是網(wǎng)頁設(shè)計，剛開始可能是模仿別人的網(wǎng)頁，但是到了最后會出現(xiàn)慢慢的偏重于美術(shù)，心理學(xué)，色彩，繪畫等。這些藝術(shù)方面，表面你能看到的，如果你是學(xué)計算機的接觸過網(wǎng)頁設(shè)計，并喜歡網(wǎng)頁設(shè)計，我建議不要偏向這個方面，因為到后來讓你自己獨立設(shè)計網(wǎng)頁時，色彩搭配是很難的，還有整體布局，以及是否符合當下潮流等。現(xiàn)在的網(wǎng)頁千變?nèi)f化，設(shè)計也要不斷學(xué)習(xí)，并且能跟得上。 對于web前端開發(fā)這個就是把別人設(shè)計好的自己用div+css+js去實現(xiàn)的，一個簡單的網(wǎng)頁可能就是div+css把它寫出來，但是這里面是充滿經(jīng)驗的。web前端的發(fā)展過程中到了最后就是頭疼的兼容性問題，因為要確保一個頁面在任何瀏覽器當中能正常顯示是很不容易的，瀏覽器廠商那么多，各自還有自己的專屬屬性，而且有的還要求在手機中能夠顯示，能夠自適應(yīng)屏幕等。單純的css無法來控制，就需要學(xué)習(xí)javascript, web前端看似簡單其實要學(xué)習(xí)的東西很多，經(jīng)驗也特別重要，接觸后臺后你會更明白前端的重要性。
學(xué)習(xí)網(wǎng)頁設(shè)計步驟
首先要了解HTML（超文本設(shè)計語言），記住使用原理；接著用兩三天的時間學(xué)習(xí)CSS（層疊樣式表單）；進而再花些時間了解一下javascript軟件。掌握這些基礎(chǔ)性知識后，就可試著用“記事本”編寫網(wǎng)頁，在初試階段千萬不要用那些可視化工具，如FrontPage、Dreamweaver，否則將不利于鍛煉實際能力。
網(wǎng)頁設(shè)計中如何讓圖片輪播
網(wǎng)頁設(shè)計中讓圖片輪播，需要用到的JS和比較好的div+css布局意識，主要還是需要了解left，top在css中的意思，這里我提交一段我以前寫的代碼； html中的代碼：<div id="box"> <div id="woZaiHouDun" class='hide' > <a id="btnLeft" href='javascript:void(0);'> </a> <a id="btnRight" href='javascript:void(0);'> </a> <ul> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> </ul> </div>js中的代碼：ar t=null;function woZaiHouDun(){ var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px'; var oBtnLeft = document.getElementById('btnLeft'); var oBtnRight = document.getElementById('btnRight'); var iTarget = 0; var ispeed = -3; oBtnLeft.onclick = function(){ ispeed = 3; } oBtnRight.onclick = function(){ ispeed = -3; } t=setInterval(function(){ iTarget = oUl.offsetLeft -ispeed; if( iTarget < - oUl.offsetWidth/2){ oUl.style.left =0 +'px'; iTarget = oUl.offsetLeft -ispeed; } if( iTarget > 0){ oUl.style.left =- oUl.offsetWidth/2 +'px'; iTarget = oUl.offsetLeft -ispeed; } oUl.style.left =iTarget +'px'; },30)}這樣是能實現(xiàn)輪播的。
關(guān)于網(wǎng)頁設(shè)計尺寸和字號大小
首先網(wǎng)頁在普通的電腦上面顯示1900px的寬度會拉伸很多，這在網(wǎng)站的整體效果來說，訪客的體驗是不好的。字體大小也是根據(jù)網(wǎng)頁的布局來設(shè)置的并沒有一成不變的。
也就是說，大家會考慮設(shè)計用1500px的寬度主要是用戶大多都是19寸的顯示器么？那么1400的寬度被拉伸到1900px分辨率降低是自然情況么？那TB和JD為什么用19寸的顯示器和24寸的顯示器都沒有分辨率下降的問題，是因為他們用代碼寫的么？謝謝了
如果能做自適應(yīng)一般是沒有人寫死寬度為多少Px
自適應(yīng)是什么啊 是PS保存WBE格式那個還是DW里面那個設(shè)置啊
網(wǎng)頁開發(fā)中為了保證兼容大部分顯示正常就采用自適應(yīng)。你可以百度下。
h5頁面上的動畫效果是怎么制作的
很多軟件都可以做啊。比如FLASH,AE,PS，當然FLASH顏色有點失真設(shè)計時候注意顏色別太豐富，AE無法做透明的，還有要注意體積，至于PS開時間軸后就只靠畫比較看繪畫能力。
網(wǎng)頁設(shè)計一般需要用那些軟件？
Dreamweaver、PS、FlashDreamweaver用來設(shè)計網(wǎng)頁的元素，我們平?？吹降木W(wǎng)頁中的文字、表格、特殊效果等都是可以通過Dreamweaver來實現(xiàn)。Dreamweaver是基本的網(wǎng)頁代碼編輯軟件。它有一非常好的地方：所見即所得模式，可以讓不會代碼的人也能設(shè)計出簡單的網(wǎng)頁。PS是Photoshop的簡稱，主要用來處理圖片。一個網(wǎng)頁中如果只是文字和表格閱讀質(zhì)量就會下降，所以配上好的圖片就非常重要了。PS是專業(yè)的圖像處理軟件，幾乎可以做出你想要的任何圖片效果。Flash用于制作動畫。如果你設(shè)計的網(wǎng)頁中需要出現(xiàn)動畫，那么Flash是最好的選擇，入門級操作就可以做出非常流暢的動畫。設(shè)計網(wǎng)頁除了軟件之外，其它的只是也是必不可少的。代碼方面，可能要掌握HTML語言、JS、Java、CSS等多門編程語言。
熱門問答
- 模版還是模板
- 免費建站
- 淘寶網(wǎng)頁是哪個公司做的
- 免費制作企業(yè)
- 簡單個人網(wǎng)站模板
- 制作網(wǎng)站的的網(wǎng)站
- 怎么學(xué)網(wǎng)頁設(shè)計
- html模板文件
- 手機網(wǎng)站的優(yōu)化
- 什么是排版設(shè)計
- 廣告公司網(wǎng)站制作
- 網(wǎng)站優(yōu)化是什么
- 怎么用手機制作簡歷
- 武漢建設(shè)網(wǎng)站
- 網(wǎng)站建設(shè)公司怎么樣
- seo優(yōu)化培訓(xùn)
- 網(wǎng)站的建設(shè)哪家好
- 制作簡歷圖片
- 什么是網(wǎng)絡(luò)推廣優(yōu)化
- 網(wǎng)頁制作學(xué)那些
