如何在Dreamweaver中创建单列流体网格布局 - 傻瓜

在Dreamweaver中创建复杂的流体网格设计之前，请考虑尝试更简单的流体网格设计。首先创建一个简单的一列流体网格布局，按照以下简单说明进行操作：

1. 选择文件→新建。 <新建文档>窗口打开。

   注意： 在开始处理新的流体网格布局之前，请确保已完成网站设置过程。 从屏幕左侧，选择流体网格布局。

2. - >
   “新建文档”窗口选项更改为流体网格选项。

   指定三种布局中每一种所需的列数。

   

3. 要添加或删除列，请依次选择每列上的文本字段并输入所需的列数。

   指定您希望每个布局覆盖的浏览器窗口的百分比。

4. <！ - 2 - >

   依次在每个布局下选择文本字段，然后输入一个数字，表示在浏览器窗口中查看设计时希望布局覆盖的空间的百分比。例如，默认情况下，桌面布局设置为占用可用空间的90％，但是您可以将其更改为95％，以便为自己提供更多的设计空间并减少空白空间。

   更改列宽的百分比以更改每列之间的页边空白量。

5. 默认情况下，Dreamweaver将每个边距设置为占可用空间的25％。

   使用下拉列表指定文档类型。

6. 默认情况下，使用HTML5文档类型创建流体网格布局。除非您需要更改文档类型以与您网站中使用的其他格式更兼容，否则HMTL5是响应式网页设计的推荐选项。点击创建。 <保存为>对话框打开，准备保存CSS文件。

   为您的CSS文件输入一个名称，然后单击保存。

7. 在Dreamweaver工作区中打开一个新的HTML文件，但尚未保存。您指定的CSS文件已保存，其名称在“文件”面板中可见。

   注意：

8. 与在Dreamweaver中创建其他类型的页面的过程不同，首先保存CSS文件，然后在稍后的步骤中保存HTML文件。

   选择文件→保存

   打开另存为对话框。 为您的HTML文件输入一个名称，然后单击确定。 “另存为”对话框关闭，并在Dreamweaver中显示通知，通知您流体网格布局需要两个附加文件：样板文件。 CSS和回应。分钟。 JS。

9. 单击确定复制样板。CSS和回应。分钟。 JS文件到您的网站文件夹。

   所有这三个文件都被添加到“文件”面板中，并返回到在Dreamweaver工作区中打开的新命名的HTML文件。

10. 通过在工作区顶部的“标题”字段中输入文本，给页面一个标题。然后，完成为流体网格布局创建一组新文件的过程。