使用菜单而不使用框架构建网站答案

【问题标题】：Building website with menu without using frames使用菜单而不使用框架构建网站
【发布时间】：2012-07-07 09:13:29
【问题描述】：

在 Dreamweaver 中，我使用框架来定义左栏菜单，单击每个菜单选项卡会更改显示在右框架上的 HTML 页面。但是，kompozer 等网页设计工具不支持框架。

在不使用框架的情况下设计带有此类菜单栏的 HTML 个人网页的最佳方法是什么？
如果 HTML 还不够，您会建议具有 Java 背景和 HTML 和 CSS 基本知识的人学习哪些其他脚本语言。
您会推荐哪些网页设计工具来构建个人网站？

【问题讨论】：

呃，divs 是个好东西吗？
所以基本上你的问题是......“我如何建立一个网站？”恐怕这太宽泛了，无法回答。有吨的方法来完成你想要完成的事情。学习 HTML、CSS 和至少一点 JavaScript 将对构建网站大有帮助。

【解决方案1】：

1.框架
我不建议您使用框架来创建您正在寻找的设计。使用divs 创建的页面布局可能是可行的方法。这样的事情会做：

<html>
    <head>
        <title>My Title</title>
        <style type="text/css">
            div { margin:0; padding:0; }
            #container { margin:0 auto; width:960px; }
            #menu { float:left; width:200px; }
            #content { float:right: width:760px; }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="menu"><!-- Your menu --></div>
            <div id="content"><!-- Your content --></div>
        </div>
    </body>
</html>

2。脚本语言
HTML 和 CSS 足以创建您正在寻找的内容，但是如果您想为您的布局、菜单和内容提供单独的模板，您将不得不寻找可以用作 templating engine 的服务器端语言.

3.工具
由于您有 Java 背景，我绝对建议您学习使用您选择的文本编辑器创建 HTML 和 CSS。它们是易于学习的语言，并且与 JavaScript 一起构成了任何想要创建网站的人的基础。

【讨论】：

【解决方案2】：

第一季度 1 - 在不使用框架的情况下设计带有此类菜单栏的 html 个人网页的最佳方法是什么？

这在很大程度上是个人喜好问题，作为一名开发人员，我已经有一段时间没有使用 Dreamweaver 了，因为虽然它提供了设计概述，但与其他 IDE 相比，它作为编程工具的功能有所欠缺。

与其使用框架来构建页面，不如考虑使用 HTML 和 CSS 结构创建列。

<div id="canvas">
    <div class="row">
       <div class="column1">

       </div>
       <div class="column2">

       </div>
       <br class="clearFix" />
    </div>
</div>

还有 CSS：

.canvas   { height: 100%; width: 100%; overflow: hidden }
.row      { width: 960px; margin: 0 auto; }
.column1  { width:70%; height: 1024px; float:left; } // Could use PX instead of %
.column2  { width:30%; height: 1024px; float:left; } // As above
.clearFix { clear: both; }

也许可以查看诸如Aptana Studio 之类的 IDE，用于 PHP、HTML、CSS、Javascript。这将帮助您理解您编写的代码，并且您的“设计”视图成为在呈现 HTML 和 CSS 方面比 Dreamweaver 更准确的浏览器。

第二季度 2 - 如果 html 还不够，您会建议有 Java 背景并具有 html 和 css 基本知识的人学习其他哪些脚本语言。

Javascript

Javascript 将帮助您将一些动态内容添加到您的网站，与 JS 扩展如 JQuery 和 JQuery-UI 结合使用，它是一个非常强大的选择和操作 DOM 元素的工具。

看看Code Academy。大约 8 个月前，我偶然发现了这个 gem，并推荐给很多人学习 Javascript。（他们还提供 Python、Ruby、HTML 5、CSS 2 / 3 课程）

PHP

PHP 是一种服务器端语言，可帮助您处理网站可能具有的任何后端功能，例如表单提交、数据库管理等。

从 PHP 5 开始，OOP 功能也得到了极大的增强。来自 Java 背景，您不会感到如此迷茫，我猜想学习 PHP OOP。如果您打算编写更深入、更具吸引力的代码，这种语言将帮助您加载。

第三季度 3 - 您会推荐哪些网页设计工具来构建个人网站？

如果你想建立一个网站并且你已经具备了这些能力，那么坚持你目前所知道的，但尝试不同的工具并找到一种语言来学习（我再次引用CodeAcademy，真的是这样好）。

【讨论】：

【解决方案3】：

制作菜单的好方法是使用the div tag 或the nav tag（HTML 5 中的新功能）。然后您需要使用CSS (Cascading Style Sheets) 设置菜单及其条目的位置和外观。

如果您不想将整个菜单复制到所有页面，您可以使用模板系统，如Smarty（需要 PHP），它可以让您将菜单代码存储在单独的文件中并包含它需要的地方。

关于网页设计工具，如果你想像 Word 文档一样编辑 HTML（所见即所得），我推荐KompoZer（跨平台，开源）。如果您想直接编辑 HTML，任何具有语法突出显示的体面的编辑器都可以。我使用Geany（跨平台，开源）和Sublime Text（付费，以键盘为中心）。

【讨论】：