1

我们有一个 Web 应用程序，并且正在使用框架集进行布局。（示例）。但是我读到框架已被弃用，并且基于网站的网站也不符合 ADA 标准，谷歌或任何其他搜索引擎不会获取任何内容，因为这些系统只会找到设置框架的页面，而不是框架本身的内容. 所以我的问题是框架的替代品是什么？谢谢，拉维

4

2 回答 2

1

使用 div 标签。尝试这样的事情：

<div id="header">
    HEADER STUFFS
</div>
<div id="below-header">
    <div id="menu">
        MENU STUFFS
    </div>
    <div id="content">
        CONTENT STUFFS
    </div>
</div>

使用以下 CSS：

#header {
    height: HEADER HEIGHT;
}
#below-header {
    position: absolute;
    top: HEADER HEIGHT;
    right: 0;
    bottom: 0;
    left: 0;
}
    #menu {
        width: MENU WIDTH;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
    }
    #content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: MENU WIDTH;
    }

当然换成自己喜欢的。您可以使用百分比作为宽度和高度。

然后，真正的挑战是如何在按下菜单中的链接时将内容加载到 content-div 中。为此，我建议使用 AJAX（最好使用 jQuery 之类的库，因为它更容易）。另一种解决方案是制作许多具有相同标题和菜单但内容不同的页面，但我不建议这样做。你会后悔一辈子。

一个简单的脚本是：

$(function() {
    $("a").each(function() {
        var pat = /^https?:\/\//i;
        var url = $(this).attr("href");
        if(!pat.test(url)) {
            $("body").on("click", "a", (function(e) {
                e.preventDefault();
                $.get(url, function(data) {
                    $("#content").html(data);
                });
            });
        }
    });
}

这里所有的相对链接都设置为将内容加载到内容 div 中而不重新加载页面。所以：

<a href="contact.html">Contact us!</a>

将 contact.html 的内容加载到内容 div 中，并且：

<a href="http://www.google.com">Google.com</a>

会将页面重定向到 google.com。

其他要考虑的事情是在更改内容时更改 url。但这是一个完全不同的故事。

希望这可以帮助。

于 2013-01-12T20:39:06.223 回答
0

框架肯定已被弃用，正如您正确指出的那样，主要网站非常积极地劝阻。如今，许多网站将 CSS 与 Javascript 结合使用（特别是通过使用jQuery（尤其是 UI 部分）和Dojo等库），以便拥有用于提供的那种动态布局框架。

当需要重新加载页面的某些部分而不重新加载整个页面时尤其如此，在这种情况下，通常使用 AJAX 来加载页面的某些部分。有很多很棒的教程我不会在这里列出（谷歌是你的朋友！）关于如何完成这个并实现类似于过去提供的框架的布局。

这绝对是一个最通用的答案，因为我不知道您的编码技能水平或预算（时间或金钱），因为也有许多简单的方法可以建立一个简单的网站（Sites.google.com等）其他）。

于 2013-01-12T20:10:58.187 回答