0

我已经开始在一个网站上制作一个由赠款资助的纪录片。在纪录片中，其中一个角色正在建立一个关于某个主题的网站。对于真正的网站，他们想把他的电脑（这是项目艺术家手绘的图形）放在网站设计和内容周围作为框架。

换句话说，当用户访问实际网站时，他们会看到角色的“屏幕”，里面有真正的设计。在某种程度上，它是在我的适当网页设计中模拟具有网页设计的计算机。

提示“盗梦空间”得分。

好的，现在是有趣的部分。你到底会怎么做呢？我需要：

  1. 显然，最大化框架内的屏幕空间。但是，我还需要一种方法让整个套件和 caboodle 能够针对不同的显示器很好地调整大小。
  2. 以这样的方式创建这个东西，它可以很好地加载帖子和视频。从本质上讲，我需要它在遇到的每一个设备上都不要马虎。显然，我会放弃移动的概念，所以只谈桌面。

我还必须在WordPress中完成这一切，特别是使用 Genesis。

让我知道你的想法！如果有帮助的话，jQuery 在这里是完全可以接受的，就像你有的任何脑筋急转弯的想法一样。

谢谢！

/编辑 #3 -- 已解决/

网站链接：http: //www.blackbirdsfell.com

4

3 回答 3

4

在大多数浏览器中按 F11 会进入全屏模式。这将隐藏任务栏和浏览器 URL 栏。

为了创建其他所有内容，只需使用几个 DIVS。1 个 div 用于 url 栏，3 个 div 用于中心。1 个在中心（这是网站设计），另外 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 回答
1

想看看这个吗？

您可以调整所有框架的宽度，它还可以加载动态内容。

一个 DEMO http://layout.jquery-dev.net/demos/nested_simple.html

来源http://layout.jquery-dev.net/demos.cfm

于 2013-06-06T03:34:58.910 回答
-3

我只是使用 iFrame 来显示实际内容，然后将插图放在父页面上。您也可以在插图中构建“导航”（后退按钮？和工作页面标题？），这将非常简单且非常酷。

您可能需要一些 JS 来处理内容的大小调整（在 iframe 中），并且插图可能需要稍微拆分一下，以便可以正确调整部分的大小？

于 2013-06-05T23:50:40.217 回答