0

助成金で運営されているドキュメンタリーのウェブサイトに取り組み始めました。ドキュメンタリーの中で、登場人物の 1 人がトピックに関するウェブサイトを構築しています。実際のウェブサイトの場合、彼らは自分のコンピューター (プロジェクトのアーティストによる手描きのグラフィック) をウェブサイトのデザインとコンテンツの周りにフレームとして配置したいと考えています。

別の言い方をすれば、ユーザーが実際の Web サイトにアクセスすると、実際のデザインが入ったキャラクターの「画面」が表示されます。ある意味、それは私の適切な Web デザインの中にある Web デザインでコンピューターをシミュレートしています。

キュー「インセプション」スコア。

さて、楽しい部分です。一体どうやってこれについて行くのですか？する必要がある：

  1. 明らかに、フレーム内の画面領域を最大化します。ただし、キット全体とキャブドルをさまざまなモニターに合わせて適切にサイズ変更する方法も必要です。
  2. 投稿や動画がうまく読み込まれるように作成してください。本質的に、遭遇するすべてのデバイスでずさんにならないようにする必要があります。明らかに、私はモバイルの概念を捨てるので、デスクトップについて話します.

また、すべてをWordPressで、具体的には Genesis を使用して行う必要があります。

どう考えているか教えてください！jQuery は、あなたが持っている頭脳明晰なアイデアと同様に、役立つ場合はここで受け入れられます。

ありがとう！

/編集 #3 -- 解決済み/

サイトへのリンク: http://www.blackbirdsfell.com

4

3 に答える 3

4

ほとんどのブラウザで F11 を押すと、全画面表示モードになります。これにより、タスク バーとブラウザーの URL バーの両方が非表示になります。

他のすべてを作成するには、いくつかの DIVS を使用するだけです。URL バーに 1 div、中央に 3 div。1 つは中央 (これは Web サイトのデザイン) にあり、残りの 2 つは両側にあり、コンピューター効果と下の最後の div を作成します。これがタスクバーになります。すべてのサイズをパーセンテージで設定し、幅を 100% にします。これにより、すべてのモニターサイズに簡単かつ迅速に適合します。

HTML

<div id="top_bar">INSERT TOP PART OF THE COMPUTER SCREEN</div> 
<div id="left_bar">INSERT LEFT PART OF THE COMPUTER SCREEN"</div> 
<div id="main">INSERT WEB DESIGN"</div> 
<div id="right_bar">INSERT RIGHT PART OF THE COMPUTER SCREEN"</div> 
<div id="bottom_bar">INSERT BOTTOM PART OF THE COMPUTER SCREEN"</div>

CSS

*{ margin: 0; padding: 0; } 
#top_bar{ width:100%; } 
#left_bar{ float: left; width: 20%; } 
#main{ float: left; width: 60%; } 
#right_bar{ float: left; width: 20%; } 
#bottom_bar { width: 100%; position:absolute; bottom:0; }

パーセンテージは正しくありません。これは、正しく収まるまでいじる必要があるものです。

position: absolute;とはbottom: 0;、ボトムバーが常に正確に一番下に留まるように強制します。これは効果を売り込むのに役立つと思うので、それも追加しました.

于 2013-06-05T23:56:08.117 に答える
-3

iFrame を使用して実際のコンテンツを表示し、そのイラストを親ページの周囲に配置します。イラストに「ナビゲーション」（戻るボタン？と機能するページ タイトル？）を組み込むこともできます。これは非常にシンプルでクールです。

おそらく、(iframe 内の) コンテンツのサイズ変更を処理するために何らかの JS を使用する必要があり、パーツのサイズを適切に変更できるように、イラストを少し分割する必要がありますか?

于 2013-06-05T23:50:40.217 に答える