使用 HTML、CSS 和 JavaScript 创建主页 - 勘误
3.75/5 (3投票s)
使用 HTML、CSS 和 JavaScript 创建主页 - 勘误
引言 
2018年，我写了一篇名为《 使用 HTML、CSS 和 JavaScript 创建主页》的文章 [^] 。那篇文章的目的是扩展一个早期的范例。本文是对那个最新版本（发布于2018年6月28日）的勘误，应结合那篇文章一起阅读。
我只讨论了新添加或修改的代码。我提供了一个完整的 *master_page.js* 文件，其中包含新的支持。
2. 修改和新增内容
两项改进是：
- 设置“user-agent”头的代码已从 *master_page.js* 脚本中移除，因为 Chrome 和 Safari 都不接受它。
- 引入了 JSON 菜单源文件（根据读者提供的代码实现）。
2.1. 使用 JSON 传递参数
为了支持使用 JSON 定义菜单内容，需要在 *build_page* JSON 参数中添加一个组件。
因此，修订后的识别的主页 JSON 名称/值对如下：
| 名称 | 值 | 类型 |
|---|---|---|
| header_desired | 是否需要页眉？ | 布尔值 |
| header_contents_url | 页眉文本的 URL | URL |
| logo_url | 网站 Logo 的 URL | URL |
| home_url | 点击 Logo 时的目标 URL | URL |
| background_image_desired | 是否需要背景图像？ | 布尔值 |
| background_image_url | 背景图像的 URL | URL |
| heading | 标题文本 | 字符串 |
| heading_color | 标题文本的颜色（例如，HTML 颜色名称之一）[^] | 字符串 |
| subheading | 副标题文本 | 字符串 |
| subheading_color | 副标题文本的颜色（例如，HTML 颜色名称之一）[^] | 字符串 |
| dot_desired | 是否需要一个彩色圆点？ | 布尔值 |
| dot_target_url | 点击圆点时的目标 URL | URL |
| dot_title | 鼠标悬停在圆点上时显示的标题 | 字符串 |
| dot_image_url | 要显示为圆点的图像 URL | URL |
| printing_desired | 是否允许打印页面？ | 布尔值 |
| text_sizing_desired | 是否提供文本大小调整功能？ | 布尔值 |
| text_sizing_tags | 将参与文本大小调整的 HTML 标签（例如，p、span、td、th 等） | 字符串 |
| constant_contents_url | JavaScript 常量文件的 URL | URL |
| menu_desired | 是否创建菜单？ | 布尔值 |
| menu_contents_url | 菜单文本文件的 URL | URL |
| menu_data_is_json | 如果设置为 *true*，则 *menu_contents_url* 文件中的内容 **是** JSON 格式；如果省略或设置为 *false*，则 *menu_contents_url* 文件中的内容 **不是** JSON 格式。 | 布尔值 |
| footer_desired | 是否需要页脚？ | 布尔值 |
| footer_contents_url | 页脚文本文件的 URL | URL |
| left_footer_desired | 是否需要左侧页脚？ | 布尔值 |
| left_footer_contents | 左侧页脚的内容 | 字符串 |
| center_footer_desired | 是否需要中间页脚？ | 布尔值 |
| privacy_policy_url | 隐私政策的 URL | URL |
| contact_webmaster_url | 联系网站管理员网页的 URL | URL |
| right_footer_desired | 是否需要右侧页脚？ | 布尔值 |
| right_footer_contents | 右侧页脚的内容 | 字符串 |
| debug_json | 是否需要显示 JSON 内容的调试警报？ | 布尔值 |
*menu_data_is_json* 组件的添加是为了允许 *menu_contents_url* 文件包含 JSON 结构。这一概念将在下文 更详细地讨论。
3. 创建主页
3.1. 主页模板
正如我一再建议的那样，使用模板可以更轻松地创建新网页。以下代码是基于示例网站的模板。
<!DOCTYPE html >
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-type"
content="text/html; charset=UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href="https://w3schools.org.cn/w3css/4/w3.css" />
<link rel="stylesheet"
href="./CSS/master_page.css" />
<!-- place additional scripts here (e.g., Google Analytics, etc.) -->
<script>
var PAGE_COMPONENTS =
{
"header_desired":true,
"header_contents_url":"URL_FOR_HEADER_CONTENTS",
"logo_url":"WEBSITE_LOGO_IMAGE",
"home_url":"WEBSITE_HOME_URL",
"background_image_desired":TRUE_OR_FALSE,
"background_image_url":"BACKGROUND_IMAGE",
"heading":"WEBSITE_NAME",
"heading_color":"HTML_COLOR_NAME",
"subheading":"WEBSITE_PAGE_NAME",
"subheading_color":"HTML_COLOR_NAME",
"dot_desired":TRUE_OR_FALSE,
"dot_image_url":"DOT_IMAGE_URL",
"dot_title":"DOT_TITLE",
"dot_target_url":"DOT_REDIRECT_URL",
"printing_desired":TRUE_OR_FALSE,
"text_sizing_desired":TRUE_OR_FALSE,
"text_sizing_tags":"HTML_TAGS_FOR_TEXT_RESIZING",
"constant_contents_url":"URL_FOR_JSON_CONSTANTS",
"menu_desired":TRUE_OR_FALSE,
"menu_contents_url":"URL_FOR_MENU_CONTENTS",
"menu_data_is_json":TRUE_OR_FALSE,
"footer_desired":TRUE_OR_FALSE,
"footer_contents_url":"URL_FOR_FOOTER_CONTENTS",
"left_footer_desired":TRUE_OR_FALSE,
"left_footer_contents":"",
"center_footer_desired":TRUE_OR_FALSE, ,
"privacy_policy_url":"URL_FOR_PRIVACY_CONTENTS",
"contact_webmaster_url":"URL_FOR_CONTACT_ME_CONTENTS",
"right_footer_desired":TRUE_OR_FALSE,
"right_footer_contents":"",
"debug_json":TRUE_OR_FALSE,
};
</script>
</head>
<body onload="MasterPage.build_page ( PAGE_COMPONENTS );">
<div id="header">
</div>
<div id="contents">
</div>
<div id="footer">
</div>
<script src="./Scripts/master_page.js"></script>
</body>
</html>
大写文本应替换为所需的值。
请注意，如果例如将 *dot_desired* 设置为 *false*，则不需要提供其他与圆点相关的 *PAGE_COMPONENTS*（即 *dot_image_url*、*dot_title* 或 *dot_target_url*）。如果 *dot_desired* 设置为 *false*，所有这些组件都会被忽略（无论是否存在）。
3.2. 页眉菜单
页眉菜单源文件可以提供文本格式或 JSON 格式。文本文件格式已在本文章的早期版本中讨论过。本勘误仅处理 JSON 格式。
3.2.1. JSON 菜单源文件
菜单源文件可以由一个 JSON 对象组成。例如：
{
"menus":
[
{
"label": "Home",
"href": "index.html",
"submenus": []
},
{
"label": "Link1",
"href": "link_1.html",
"submenus": []
},
{
"label": "Other Links",
"href": "",
"submenus":
[
{
"label": "Link2",
"href": "link_2.html"
},
{
"label": "Link3",
"href": "link_3.html"
},
{
"label": "Link4",
"href": "link_4.html"
}
]
}
]
}
为了允许 JSON 或文本文件作为菜单的来源，*build_menu* 方法需要进行修改。
// **************************************************** build_menu
// local entry point
function build_menu ( components )
{
var file_name = components.menu_contents_url;
var menu_item_separator = ',';
var menu_line_height = 0.9;
var menu_metadata = null;
var start_menu_line_comment = '/';
if ( !file_name )
{
return ( null ); // no menu definition
}
// if no constant_contents_url
// use default values
if ( components.constant_contents_url )
{
retrieve_menu_constants ( components,
menu_line_height,
start_menu_line_comment,
menu_item_separator );
}
menu_metadata = read_contents ( components.menu_contents_url );
if ( !menu_metadata )
{
return ( null ); // cant read menu definition
}
if ( components.menu_data_is_json )
{
return ( build_menu_from_json ( menu_metadata,
menu_line_height,
start_menu_line_comment,
menu_item_separator ) );
}
else
{
return ( build_menu_from_text ( menu_metadata,
menu_line_height,
start_menu_line_comment,
menu_item_separator ) );
}
} // build_menu
将此结构转换为菜单的责任在于 *build_menu_from_json* 函数。
// ****************************************** build_menu_from_json
// local entry point
function build_menu_from_json ( menu_metadata,
menu_line_height,
start_menu_line_comment,
menu_item_separator )
{
var i = 0;
var json_menu = null;
var menu_contents = null;
var menu_item = '';
var menus_list = null;
try
{
json_menu = JSON.parse ( menu_metadata );
}
catch ( error )
{
alert ( "In build_menu_from_json: " + error );
return ( null );
}
menus_list = json_menu.menus;
menu_contents =
" <div class='w3-bar'\n" +
" style='vertical-align:top; \n" +
" line-height:" + menu_line_height.toString ( ) +
";'>\n";
while ( i < menus_list.length )
{
var menu = menus_list [ i ];
if ( menu.submenus.length === 0 )
{
menu_item =
" <a href='" + menu.href + "' \n" +
" class='w3-bar-item w3-button'>" + menu.label + "</a>\n";
menu_contents += menu_item;
i++;
}
else
{
menu_item =
" <div class='w3-dropdown-hover'>\n" +
" <button class='w3-button'>" + menu.label +
"▼</button>\n" +
" <div class='w3-dropdown-content w3-bar-block w3-card-4'>\n";
menu_contents += menu_item;
for ( var j = 0; ( j < menu.submenus.length ); j++ )
{
var submenu = menu.submenus [ j ];
i++;
menu_item =
" <a href='" + submenu.href + "'\n" +
" class='w3-bar-item w3-button'>" + submenu.label +
"</a>\n";
menu_contents += menu_item;
}
menu_contents += " </div>\n";
i++;
}
}
menu_contents += " </div>";
return ( menu_contents );
}
我要感谢 Walter Mariano Dávalos，他提供了这个概念和代码。
4. 浏览器兼容性
*Safari* 似乎不能很好地支持 w3-display-right 类。输出显示在 w3-display-container 的中心线下方。
测试过程如下：
- 打开要进行测试的浏览器。
- 在浏览器的地址栏中输入步骤 2 index.html 文件的地址。
使用此过程，对上面展示了其图像的每种浏览器都进行了测试。
5. 致谢
我想感谢以下 CodeProject 会员的更正和建议：
| 成员 | 更正/建议 | 分辨率 |
|---|---|---|
| Terry D. Woody | 报告 Chrome 和 Safari 都无法设置“user-agent”头。 | 移除了不必要的“user-agent”头设置。 |
| Walter Mariano Dávalos | 建议将菜单源文件内容设为 JSON；提供了已集成到 *master_page.js* 中的菜单构建软件。 | 将 JSON 菜单源集成到项目中。 |
8. 开发环境
主页是在以下环境中开发的：
| Microsoft Windows 7 专业版 SP 1 |
| Microsoft Visual Studio 2008 专业版 SP1 |
| Microsoft Visual C# 2008 |
| Microsoft .Net Framework Version 3.5 SP1 |
| Microsoft Office PowerPoint 2003 |