下面为大家分享网页首页HTML布局模板的创建方法：

1. 页面框架

网页首页的页面框架主要是由以下几个部分构成：Head，Main，Foot。有时为了布局的需要，在“Head”下方还会加上用于页面功能导航的“Men”。

2. 布局原则

在对网页首页进行布局设计时，需要遵循以下原则：首先，根据用户浏览网页时的视觉流向要求，从上到下依次为Head部分、Men区域、Sidebar区域和Content内容部分；其次，要考虑到各个区域之间的切分比例。

3. 页面分割

以常见布局方式为例，我们可以按照以下方法进行页面分割：将页面进行黄金分割，在高度方向上，上部1/3区域分割为Head和Men区域；中部左边1/3区域分割为Sidebar区域，剩余空间留给Content区域；在高度方向上，下部1/3区域分割为Foot区域。

4. 页面结构

页面的各个区域大小的定义方式是不同的。以下是对各个功能区域的切分说明：

• Head区域：宽度设置为100%，高度固定像素值；
• Men区域：与Head区域配置一致，但宽度按照1%设置，高度根据Head的高度进行设定；
• Sidebar区域：宽度结合Content之间的黄金分割比例，使用固定像素值确定，其余部分留给Content区域；
• Content区域： height和width方向均按比例设置；
• Foot区域：宽度设置为100%，高度为固定像素值。

5. 页面展现

网页首页的布局要考虑以下几点：

• 能自适应14768、86两种分辨率；
• 界面层次不超过N层；
• 默认窗口设置下，不出现水平、垂直滚动条；
• 当界面内容超出显示区域时，以浮出层的形式显示；
• 利用屏幕对角线和正上方四分之一处放置重要内容和用户注意力集中区域。

6. 页面美化

在页面设计中，要抓住以下要点：比例协调、布局合理、按钮规范有序、字体大小适中、颜色搭配合理等。

7. 界面风格

• 界面颜色：通常采用柔和色调，如#E1E1E1、#EFEFEF、#CCC等；
• 字体：中文使用宋体，英文使用rial或verdana；
• 文件路径：确保HTML文件路径正确无误。

8. 页面字体

在CSS中对页面字体的属性进行设置：

• 按内容级别设置字体大小；
• Head区域标题文字：px；Men区域导航文字：14px；Sidebar区域文字：1px；Content区域正文：1px或14px，标题；
• Foot区域文字：1px或1px。

通过以上步骤，我们可以创建出一个适用于各种分辨率、风格独特且具有吸引力的网页首页HTML布局模板。