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

网页框架设计图

发布时间:2021-02-12 18:39:25

1、请问一个大型网站的框架是怎么做出来的,是用photoshop先把整个的首页设计好吗?

(先要dreamweaver打出框架,再把你ps好的图片放到你设想好的位置。dreamweaver才是网页设计软件,能将图片,flash等其他元素组合在一起,还能添加链接等等。)
photoshop就是处理图片,最多能够切片,能更好应用于dreamweaver,
而dreamweaver打框架是复杂的过程,不是三言两语能说清楚的,到网上去找视频看,慢慢学。

2、在网页设计中,什么是子框架,父框架和兄弟框架,麻烦各位高手指导下,最好给两张图,谢谢了

A与B,来C的关自系:A为BC的父框架,BC为A的子框架;

B,C的关系:BC互为兄弟框架。(希望能帮助到你)。

另外,关于css的特征继承的问题:

如果父框架规定,而子框架没有规定的css属性,子框架就继承父框架;

如果父框架,子框架都规定了这个属性,那么网页就读取子框架的属性;

 

3、如何制作框架网页

小编以前也不会框架网页的,但是前段时间小编需要考试。遇到了有关框架网页的问题,也就去学习了。接下来小编就用接下来的实例来教大家如何制作框架网页。希望能够帮助到你们。
我们今天就以下面的例题来学习一下。
请建立一个目录框架网页,并按照要求将此文件保存名为page2.html。
要求:在目录框架网页建立一个4行1列的表格(高300像素、宽100像素),表格居中,边框为黄色、背景为绿色;表格中的文字为华文楷体、14磅、加粗、黑色;单元格内容水平方向居右对齐,垂直方向相对底边对齐;在主框架网页中新建网页并插入素材包内的图片8139.jpg;设置"美食介绍"与素材包内sc7.htm 文件的链接,设置"相关新闻"与网站www.sina.com.cn链接,设置"相关图片"与素材包内bg7.jpg文件的链接,设置"网络高手"与邮箱[email protected]链接
第一步:新建网页
首先我们打开软件,选择菜单栏下“修改”——“框架集”——“拆分为左右框架”。进行三个网页的保存。
1.整个框架网页。
选中框架最中间的竖线,当我们看到代码栏中有“<frameset cols="597,598">”代表我们选取成功。
2.框架网页的左侧
选中左侧空白区域即可
3.是框架网页的右侧。
选中右侧空白区域即可
如图:
第二步:制作左边的框架网页
首先插入表格并设置基本属性
1.选择主菜单下的“插入”——“表格”如图。
2.接着设置表格的属性
(4行1列的表格“高300像素、宽100像素”,表格边框为黄色、背景为绿色。)其中的高,边框颜色都是使用代码输入的。如图:
3.至于背景和居中我们可以到属性面板的页面布局进行设计就可以了。如图:
第三步:设置css样式
1.首先打开css面板,选择该面板的下面的“+”号,出现下图所示的效果。
2.设置样式。选择“id”类型,取名为“stlye1”,保存了“仅存为该文档”。如图:
3.设置样式属性。“华文楷体、14磅、加粗、黑色”。如图:
第四步:使用css样式
1.在表格中书写相应的文字。如图:
2.使用样式。选中所有的文字,然后来到属性面板。选择“类”——“stlye1”,我们就设置好css样式了。如图:
第五步:设置文字的位置。
选中文字,来到属性面板,设置“水平”,“垂直”的属性。如图:
第六步:设置文字链接。
选中“美食介绍”,来到属性面板,选择“链接”,将我们要链接的地址输入进去就可以了。接下来依次选中其他文字就可以了。效果如下:
(注意:我们先前选中的网页文件,图片文件是可以直接填写的。而网址我们要在前面加上“http://”,邮箱地址要加上"mail to:")
第七步:设置右侧网页
选中右侧网页,选择“插入”——“图片”,选择我们想要插入的图片我们就完成了。如图:
此时我们就可以打开htm文件,在浏览器中浏览效果了,如图:

4、几种常见网页布局设计

网站是有网页构成,这点相信很多的从事网站建设或者是接触过网站开发的站长应该都清楚,但是你现在的问题是,虽然很多的企业都想要建设网站,但是对于网站的布局了解的并不清楚,下面就跟着我们沃然一起来了解一下网站建设中几种常见的布局吧。
1、区块型

2、国字型
3、门户型
4、Flash型
5、左右框架型
6、拐角型
7、封面型
8、标题正文型
9、上下框架型
10、综合框架型

5、网页设计图片和框架都弄好了,该怎么做了,

写前台代码用DW,然后在你的后台开始搭建。

6、网页设计中怎么用框架集设计网页

首先要了解框架集的概念。

框架集是构造整个框架结构的文档,它不包含具体显示的文本和图像,而只包含如何组织安排各个框架位置、大小和初始页面信息的设计。

它是框架使用中最基础的文档,常称之为整个框架显示时的主文档。


框架集的基本格式如下:

注意到,框架组文档中,用标记符代替了标记符。而标记符则用来指定每一个子窗口的内容。

1)窗口的分割用来分割浏览器窗口,它使用COLS和ROWS这2个属性项把整个窗口按垂直方向或水平方向分割为多个框架。例如:。该标记符把窗口分成3个垂直的框架,指定左框架宽度值为150象素、中间框架占总宽度的50%,余下的宽度留给右框架。


由上例可见,框架尺寸除使用象素值和百分数外,还可以使用*和n* ;使用*表示剩余部分;当使用n*(如2*)时,n值确定框架之间的比例。例如:"*,2*,3*"表示左边(或上边)的框架占窗口宽度(或高度)的1/6,中间框架占1/3,右边(或下边)框架占1/2。


2)标记符的嵌套标记符可以嵌套使用。以构造包含横向和纵向框架的窗口。以下代码用嵌套框架结构建立一个多层框架的窗口。框架的实现

3)框架的初始化标记符用于对各个框架进行初始化设置。使用标记符中的SRC属性指定需要在框架中显示的页面的文 褂肗AME属性指定框架的名称,以便在指定超级链接的目标框架时引用该框架名。标记符的个数应等于框架个数,并依出现的次序和层次先行后列对框架进行初始化。

例如:若要在指定框架显示某页面,则必须在SRC指定的URL位置存在指定的HTML文件。这就意味着要在所设计的框架中完整显示出所有内容,总共要编制页面个数为“框架数+1”。 

7、利用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>

8、网页设计页面线形图和框架结构图的区别

框图的制作是快速而廉价的,特别是当你使用诸如UXPin、Balsamiq、Axure这样的软件来制作的时内候。当容然,线框图也理当是在设计之初就使用这些工具来制作。
比起创建一个完整细致高保真的线框图,搜集反馈信息来得更加重要。为什么这么说呢?
一般而言,大家更注重软件的功能、信息架构、用户体验、用户交互流程图、可用性,这些东西,而不是考虑这些因素的美学特征。同时,在这种情况下,根据需求进行修改也无需涉及代码调整和图形编辑。

9、网页设计如何在框架下面放入完整的背景图片不受框架影响

看好了,有志青年~

<!DOCTYPE HTML>

<body>

<img style="top:0;left:0;height:100%;width:100%;position:fixed" src="我是图片的URL【随便选择一张图片地址替换本段文字】">

<div style="position:relative;">

回<h1><center><font color=#000000>我是内答容【你的内容放在这里】</font></center></h1>


</div>

</body>

</html>

与网页框架设计图相关的知识