Question

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

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

提示“开始”得分。

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

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

我还必须在 WordPress 中完成所有操作，特别是使用Genesis。

让我知道你的想法！如果它有帮助，jQuery在这里是可以接受的，就像你有任何头脑发达的想法一样。

谢谢！

/ 编辑＃3 - 已解决 /

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

Answer 1

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

为了创造其他一切，只需使用几个DIVS。网址为1 div，中心为3 div。 1位于中心（这是网站设计），另外2位创建计算机效果，下面是最后一位。这将是任务栏。以百分比设置所有尺寸并使宽度为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;会强制底栏始终保持在底部。我认为这将有助于销售效果，所以也增加了。

Answer 2

想看看这个吗？

您可以调整所有帧的宽度，也可以加载动态内容。

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

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

Answer 3

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

您可能希望某些JS参与处理内容的大小调整（在iframe中）并且插图可能需要稍微拆分以便部分可以正确调整大小？

在网站的屏幕中创建假电脑屏幕

3 个答案: