导航:首页 > 万维百科 > 网页设计截图设计

网页设计截图设计

 发布时间：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我

与网页设计截图设计相关的知识