導航:首頁 > 萬維百科 > 網頁設計截圖設計

網頁設計截圖設計

 發布時間：2020-10-23 17:39:35

1、網頁製作問題，請問截圖里的模塊是什麼，怎麼做出來

以下是我在一個網頁製作教程網找到的一個例子，很強大，其實也沒什麼難的，就是<div>層和js控制實現的，裡面的圖片路徑都是網路上的一些圖片，當然你也可以改成你本地的圖片！
<!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></head>
<body>
<a target=_self href="javascript:goUrl()">
<span class="f14b">
<script type="text/javascript">
imgUrl1="http://www.webjx.com/img/200406301.jpg";
imgtext1="網頁教學網製作素材"
imgLink1=escape("http://www.webjx.com/htmldata/sort/8.html");
imgUrl2="http://www.webjx.com/img/200406302.jpg";
imgtext2="網頁教學網網頁製作專區"
imgLink2=escape("http://www.webjx.com/htmldata/sort/3.html");
imgUrl3="http://www.webjx.com/img/200406303.jpg";
imgtext3="網頁教學網網頁特效專區"
imgLink3=escape("http://www.webjx.com/htmldata/sort/5.html");
imgUrl4="http://www.webjx.com/img/200406304.jpg";
imgtext4="網頁教學網視頻教程"
imgLink4=escape("http://www.webjx.com/htmldata/sort/15.html");
imgUrl5="http://www.webjx.com/img/200406305.jpg";
imgtext5="網頁教學網網頁製作書籍"
imgLink5=escape("http://www.webjx.com/htmldata/sort/7.html");
var focus_width=280
var focus_height=158
var text_height=18
var swf_height = focus_height+text_height
var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5
var links=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5
var texts=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.webjx.com/js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
</script> </span></a><span id=focustext class=f14b> </span>
</body>
</html>
看一下就明白了，再多改改運行一下，就會了！

2、網頁製作，要用表格設計網頁，將素材（圖片，視頻，文字）分別放入表格中的單獨格子。最好是截圖。謝謝。

<

3、網頁設計中，有一個詞tab 與tab標簽到底指的是什麼？有什麼區別？求截圖！~~多謝！

這個就是tab標簽

都是用腳本實現的

4、怎樣製作可以數字變化的網頁截圖再變成新的網頁

網頁變化導致的吧

5、利用div設計網頁框架結構代碼截圖

|

<!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=utf-8" />

<title>鏃犳爣棰樻枃妗?/title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <div id="head">

    <div id="top">

      <div id="top_logo"><img src="Images/logo.jpg" width="203" height="52" /></div>

      <div id="top_flower"><img src="Images/Top_Flower.jpg" width="128" height="83" /></div>

      <div id="top_title"><img src="Images/top_title.jpg" width="385" height="67" /></div>

      <div id="right_conter"><a href="#">Sign in</a>  &nbsp;|  &nbsp;<a href="#">Join Now!</a>&nbsp;  |  &nbsp;<a href="#">Help</a></div>

    </div>

 <div id="Visiting">First Time Visiting?</div>

 <div id="loginbar">

   <form id="form1" name="form1" method="post" action="">

     <div id="loginbar_conter">

          <div id="loginbar_conter_left">Sign up for special sales letter and shop with Myeglobal.com

            <label>

            <input name="textfield" type="text" id="input" value="your email address" size="25" />

            </label>

</div>

       <div id="login_btn">

            <label>

            <input type="image" name="imageField" src="Images/btn1.jpg" />

            </label>

          </div>

       <div id="login_right">

            <label> </label>

         or know more about Myeglobal.com</div>

        </div>

      </form>

    </div>

  </div>

  <div id="banner">

     <div id="banner_pic"><a href="#1"><img src="Images/banner1.jpg" width="229" height="236" border="0" /></a><a href="#2"><img src="Images/banner2.jpg" width="231" height="236" border="0" /></a><a href="#3"><img src="Images/banner3.jpg" width="229" height="236" border="0" /></a></div>

  <div id="banner_right">

      <div id="banner_right_pic"><img src="Images/left_pic1.jpg" width="244" height="181" /></div>

   <div id="banner_right_btn"><a href="#">click here to dress yourself up</a></div>

  </div>

  </div>

  <div id="wrapper">

    <div id="main">

      <div id="left">

        <div id="main_conter1">

          <div id="main_title1">

            <div id="main_title1_conter"><a href="#">BRIDAL FASHION</a><a name="1" id="1"></a></div>

            <div id="main_title1_text">From classic A-line to modern mermaid style and ball gowns too, no matter you're glamorous or romantic, we sorted through 1000s of dress designs to pick the wedding dresses you're dreaming for.</div>

          </div>

          <div class="main_list">

            <ul>

              <li><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1417970"><img src="Images/proct1.jpg" alt="CindyWedding" width="128" height="166" border="0" /></a>

                  <p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1417970">Ball Gown Spaghetti Straps

                    Bridal Gown</a></p>

                <span>Price:US$101.20</span></li>

              <li><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1432184"><img src="Images/proct2.jpg" alt="romanticdresses" width="128" height="166" border="0" /></a>

                  <p> <a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1432184">Classic Sweatheart Neck Wedding Gown</a></p>

                <span>Price: US$88.00</span><br />

              </li>

              <li><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1435490"><img src="Images/proudct3.jpg" alt="romanticdresses " width="128" height="166" border="0" /></a>

                  <p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1435490">Sweetheart Pricess Wedding Dresses</a></p>

                <span>Price: US$83.60</span><br />

                  <img src="Images/5off.gif" width="28" height="17" /></li>

              <li><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1435520"><img src="Images/proudct4.jpg" alt="romanticdresses " width="128" height="168" border="0" /></a>

                  <p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1435520">Custom Strapless Ruffles Wedding Gown</a></p>

                <span>Price: US$88.00</span></li>

            </ul>

            <ul>

              <li> <a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1438611"><img src="Images/proct13.jpg" alt="CindyWedding" width="126" height="166" border="0" /></a>

                  <p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1438611">New Princess Style Strapless Wedding Dress</a></p>

                <span>Price:US $95.70</span><br />

              </li>

              <li> <a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1438627"><img src="Images/proct14.jpg" alt="CindyWedding" width="126" height="166" border="0" /></a>

                  <p> <a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1438627">Strapless Custom Made Wedding Dress</a></p>

                <span>Price: US$95.70</span></li>

              <li><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1438739"><img src="Images/proct15.jpg" alt="lovesky " width="128" height="166" border="0" /></a>

                  <p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1438739">Simple V Neck Ruffly Bridal Dresses</a></p>

                <span>Price: US$91.85</span> </li>

              <li><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1440235"><img src="Images/proct16.jpg" alt="lovesky " width="127" height="166" border="0" /></a>

                  <p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&amp;pid=1440235">Elegant Empire Waistline Bridal Dress</a></p>

                <span>Price: US$84.50</span></li>

            </ul>

          </div>

          <div class="main_conter1_more"><br />

          </div>

        </div>

        <div id="main_conter2">

          <div id="main_title2">

            <div id="main_title2_conter"><a href="#">FORMAL EVENT</a><a name="2" id="2"></a></div>

            <div id="main_title2_text">Got a sociality event invitation? Find your perfect formal gown from DressilyMe formal affair selection. It ranges from black tie affair to cocktail party, and hundreds of designs you're guaranteed to be attractive.</div>

            <div class="main_list">

              <ul>

                <li><a href="http://www.myeglobal.com/proctdetail-1427112-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html"><img src="Images/proct5.jpg" alt="romanticdresses " width="128" height="166" border="0" /></a>

                    <p><a href="http://www.myeglobal.com/proctdetail-1427112-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Elegant Deep-V Raised Waistline Dress</a></p>

                  <span>Price: US$82.50</span></li>

                <li><a href="http://www.myeglobal.com/proctdetail-1427153-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html"><img src="Images/proct6.jpg" alt="romanticdresses " width="128" height="166" border="0" /></a>

                    <p> <a href="http://www.myeglobal.com/proctdetail-1427153-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Custom Stylish V Neck Floor Length Dress</a></p>

                  <span>Price: US$82.50</span> </li>

                <li><a href="http://www.myeglobal.com/proctdetail-1429448-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html"><img src="Images/proct7.jpg" alt="romanticdresses " width="128" height="166" border="0" /></a>

                    <p><a href="http://www.myeglobal.com/proctdetail-1429448-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Glamorous Black Basque Evening Dress</a></p>

                  <span>Price: US$83.60</span><br />

                    <img src="Images/5off.gif" width="28" height="17" /></li>

                <li><a href="http://www.myeglobal.com/proctdetail-1431618-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html"><img src="Images/proct8.jpg" alt="romanticdresses " width="128" height="168" border="0" /></a>

                    <p><a href="http://www.myeglobal.com/proctdetail-1431618-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Custom Sweethear Ruffly Cocktail Dress</a></p>

                  <span>Price: US$83.60</span><br />

                    <img src="Images/5off.gif" width="28" height="17" /></li>

              </ul>

              <ul>

                <li><a href="http://www.myeglobal.com/proctdetail-1436892-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html"><img src="Images/proct9.jpg" alt="CindyWedding " width="128" height="166" border="0" /></a>

                    <p><a href="http://www.myeglobal.com/proctdetail-1436892-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Strapless Knee Length A-line Cocktail Dress</a></p>

                  <span>Price: US$55.00</span><br />

                </li>

                <li><a href="http://www.myeglobal.com/proctdetail-1437023-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html"><img src="Images/proct10.jpg" alt="CindyWedding " width="128" height="166" border="0" /></a>

                    <p> <a href="http://www.myeglobal.com/proctdetail-1437023-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Elegant Queen Anne Neckline Formal Gown</a></p>

                  <span>Price: US$71.50</span></li>

                <li><a href="http://www.myeglobal.com/proctdetail-1437032-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html"><img src="Images/proct11.jpg" alt="CindyWedding " width="128" height="166" border="0" /></a>

                    <p><a href="http://www.myeglobal.com/proctdetail-1437032-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Satin Halter Neck Mermaid Dresses</a></p>

                  <span>Price: US$71.50</span><br />

                </li>

                <li><a href="http://www.myeglobal.com/proctdetail-1437045-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html"><img src="Images/proct12.jpg" alt="CindyWedding " width="128" height="166" border="0" /></a>

                    <p><a href="http://www.myeglobal.com/proctdetail-1437045-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Spaghetti Straps Evening Dress With Sashes</a></p>

                  <span>Price:US $71.50</span></li>

              </ul>

            </div>

            <div class="main_conter2_more"></div>

          </div>

        </div>

        <div id="main_conter3">

          <div id="main_title3">

            <div id="main_title3_conter"><a href="#">GIRLS'PROM DRESSES</a><a name="3" id="3"></a></div>

            <div id="main_title3_text">Ask any girl what is the most important aspect in their long plans for prom night and chances are that you will always hear prom dress. Now it is the time to go prom dress shopping simply online from DressilyMe prom collection.</div>

</div>

</body>

</html>

6、請利用HTML標記符設計一個個人網站，網頁要有菜單、圖片、表格、命令按鈕等。 要截圖代碼形式的報告ORZ

不然就是繁瑣，看著都頭疼，花半個小時做還不如玩局游戲，反正都是金幣

7、網頁設計可不可以把別的網站（看著比較好的網站）直接截圖，然後在PS里改改文字然後切片給前端工程師？

可以的，只要注意圖片格式，是gif還是png的。前段工程師往模塊里添加圖片之後，圖或許會有適當的虛，你看看吧。

8、做網頁設計經常要截圖收藏一些網頁 請問有什麼比較好的截圖軟體嗎

你用360的安全瀏覽器吧，在文件菜單里有個功能是將網頁存成圖片，可以整個網頁保存成圖片，很好的一功能！

9、請教一個WORD模板是怎麼設計的，我有截圖，但是不知道怎麼設計，我需要依葫蘆畫瓢設計一個類似的模板！！

第一步：設置模板。打開WORD界面，菜單欄→「文件」→「頁面設置」，在「頁面設置」對話框里先在「頁邊距」中點擊「橫向」那個圖標，然後選點「紙張」按鈕。在這里假設這個模板就是一張橫向A4紙，頁寬、頁高都使用默認的，您可以根據實際需要，選擇A3、B5、16開或者「自定義」紙張大小（輸入實際數字）來確定這個模板大小。這里的A4紙頁邊距我們把它設為上下都是1厘米，左右都是2或3厘米。看截圖樣子，估計您這個「葫蘆」小於A4紙，那您就要根據需要設定紙張大小,頁邊距就可以這樣設。
第二步：繪製表格。在這張紙上,按設置好頁面尺寸，用「繪製表格」先畫出一個滿頁的大表框，用右鍵點擊這個大表框，在下拉菜單里選點「拆分單元格」，根據需要設置列和行,按截圖樣子，要設置為一列十行然後「確定」，這時「十行」表格都是「黑的」（或者手工把整個表格拖黑），然後在它們上面點擊右鍵，出現下拉菜單，把滑鼠指向「單元格對齊方式（G）」，在出現九個圖標裡面選點最下面一排的最左邊一個圖標，目的是讓所有的文字和那些杠杠都在單元格的下方。
第三步：輸入文字。這里的關鍵是文字和杠杠輸入的鍵盤切換方法，先用中文輸入法輸入中文文字和中文標點符號，再切換到英文輸入法（或在「中文輸入法」邊上點擊中文標點符號切換為英文標點符號，就是把空心的句號點擊成實心句號），然後按住上檔鍵不放，再去按那個「—」鍵，就可以輸入那些靠下的杠杠而不是下劃線，要多長就按多長，當然也可以用刪除鍵把它縮短。
第四步：隱藏線條。完成第三步之後，應該說這個模板就完成了，但是它完全是一個表格，要把這個表格的線條「隱藏」起來，才是您需要的模板。方法是：左鍵點擊這個「表格」的任意地方，表格的左上角就有一個帶箭頭十字架的小方框，您就點擊它，整個表格變黑，然後在黑表格里點擊右鍵，在下拉菜單里選點「邊框和底紋（B）」，彈出「邊框和底紋」對話框，在其上方選擇「邊框」按鈕（有時它已經是默認的「邊框」界面），在「邊框」選項里選點「全部（A）」那個圖標，接著點擊「顏色（C）」那個三角形按鈕，出現顏色選項，您選點白色，然後在對話框下方點擊「確定」，OK。

10、ps設計網站頁面解析度應設置成多少像素？網頁寬多少？頁面中有效部分（截圖中的B）寬度多少？

截圖在哪裡？
畫布大小一般正常是1024*768，因為這裡面就是有效部分了，這個不包括背景，因為背景一般是使用純色或者漸變色或者是圖片，因為考慮到個人的屏幕解析度不同的因素，很少在設計網頁的時候連著背景一起設計的。還有不懂的就HI我

與網頁設計截圖設計相關的知識