1

ウェブサイトをデザインするのは初めてなので、ページを2つの垂直部分に分割するのに助けが必要です。

基本的には、このページhttp://elishaabargel.com/denimとこのページhttp://elishaabargel.com/denim2を組み合わせて使用​​したいと思います。つまり、左側にフラッシュアニメーションを、右側に技術的な図面やスケッチへのリンクをページの下に配置したいということです。

最初のページには、右側のhtmlコードとcssコードがすでに含まれていますが、表示されません。

これどうやってするの？

4

4 に答える 4

9

ページを 2 つの部分に分割するには、iframe、div、またはテーブルを使用する方法がたくさんあります。最も単純なのはテーブルです。

<table width=100% height=100%><tr><td width=50%>Put page1 here</td><td width=50%>Put page2 here</td></tr></table>

また、2 つの完全にいっぱいのページをロードする場合は、iframe を使用するのが最適な場合があります。

<iframe src="pg1.html" style="position:absolute;top:0;left:0;width:50%;height:100%;"></iframe>
<iframe src="pg2.html" style="position:absolute;top:0;left:50%;width:50%;height:100%;"></iframe>
于 2013-01-12T19:04:38.100 に答える
2

私はこれを少し急いで行いましたが、右側の写真の配置が下ではなく上にあるなど、いくつかのビットが間違っていると確信しています。また、ポップアップは元のポップアップと同じサイズではありません...しかし2 つのパネルの元の問題は修正されます。

<!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 runat="server">
<title>Elisha Bargel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="fashion, design, student, shenkar, college, portfolio, creation, mode">
<meta name="description" content="Fashion designer Elisha Abargel: projects, pictures, contact.">
<style type="text/css">
    #flashContent { width:100%; height:100%; }
    body {background-color: #FFFFFF;}
    h1 {font-family:Cursive; color: #000000;}
    p {font-family:Cursive; font-size: 14pt; font-style: normal; font-weight: normal; color: #000000;}
    .link {color: #000000;}
    .alink {color: #000000;}
    .vlink {color: #000000;}
</style>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <div id="MainTitle" style="text-align: center;"><img alt="" src="http://elishaabargel.com/photos/logo2.jpg"></div>
        <div id="MainLinks" style="text-align: center;"><a href="http://elishaabargel.com/projects.html" style="font-size: 3; font-family: 'courier new'; text-decoration: none;">projects</a> - <a href="http://elishaabargel.com/contact.html" style="font-size: 3; font-family: 'courier new'; text-decoration: none;">contact</a></div>
        <div id="LeftPanel" style="width: 800; height: 100%; float: left;">
            <h1>Denim Project</h1>
            <div id="flashContent">
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="612" id="denimproject" align="middle">
                    <param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" width="800" height="612">
                        <param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#ffffff" />
                        <param name="play" value="true" />
                        <param name="loop" value="true" />
                        <param name="wmode" value="window" />
                        <param name="scale" value="showall" />
                        <param name="menu" value="true" />
                        <param name="devicefont" value="false" />
                        <param name="salign" value="" />
                        <param name="allowScriptAccess" value="sameDomain" />
                    <!--<![endif]-->
                        <a href="http://www.adobe.com/go/getflash">
                            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                        </a>
                    <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
                </object>
            </div>

        </div>
        <div id="RightPanel" style="width: 200; height: 100%; text-align: left; vertical-align: bottom; float: right;">
            <a href="http://elishaabargel.files.wordpress.com/2012/12/sketchesdenim.jpg" target="_blank"><img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/sketchesdenim.jpg"></a><br />
            <a href="http://elishaabargel.files.wordpress.com/2012/12/technicaldrawingsdenim.jpg" target="_blank"><img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/technicaldrawingsdenim.jpg"></a>
        </div>
</div>
</form>

JQueryコードブロックを元に戻して、ポップアップのサイズが正しくないことに対処できると確信しています。

于 2013-01-12T19:15:41.560 に答える