企业官网建设流程全解析

简介：这份压缩包面向网页设计与 Web 入门学习者，围绕三个可浏览页面的实现，集中呈现文字排版、图片展示和超链接跳转等基础能力，适合课堂示例、课后练习以及 HTML/CSS 起步阶段的结构参考。包内共 8 个文件，以 3 个 HTML 页面为主体，搭配 4 张 webp 和 1 张 jpg 图片素材，压缩包约 176KB，体积轻便，便于直接查看页面组织、素材引用和基础样式效果。已有 4973 人学习下载，具备一定参考热度。内容覆盖页面分区与语义化结构、标题和段落等文本元素、图片的 src 与 alt 属性、a 标签的 href 与 target 用法，也涉及通过锚点或脚本实现页间跳转；同时可观察 CSS 选择器对背景、字号和链接颜色的设置，以及头部、主体和页脚等模块的组织方式，便于理解页面结构、样式与交互之间的配合。

1. 从「三张网页」到可交付站点：先把需求边界钉住

「三个页面、能放文字和图片、链接点得动」——这是很多 web 课程设计里最常见的一类题目，也是最容易被低估的交付。真正打开浏览器验收时，评阅人不会只看首页有没有图，而是会从导航点进内容页，再点一张卡片看锚点有没有跳对，最后把窗口缩到手机宽度看排版有没有散。这套方案要解决的就是把「三张网页」做成一个链接闭环、资源路径正确、手机端能看的三页静态站点，适合正在交 web 课程设计、毕设前置 demo 或转行作品集第一版的人。

2. 信息架构与目录设计：三页分工、资源路径和跳转闭环

三页站点的第一道分水岭不在写代码，而在页面角色有没有分清楚。首页、内容页、关于页如果都放一段文字加一张图，导航也能点，但读者点两下就不知道下一步该去哪，评阅时也看不出设计意图。我一般先把三页的职责写成一句话：首页负责「第一眼和入口」，内容页负责「展开说明和图片」，关于页负责「补充信息和联系入口」。三页共用同一套头部和页脚，任何一页都能回到另外两页，这样才算把「超链接可以跳转」做成闭环，而不是三个孤立的 HTML 文件。

先把页面角色、主要出口和验收点列成一张表，后面写 HTML 时就不容易跑偏。

表格里最容易被忽略的是「主要出口」这一列。很多三页作业只有导航能跳，页面正文里没有任何入口，读者看完一段就停住了。首页的三张卡片指向内容页的三个锚点，内容页每个段落底部放「返回首页」和「去关于页」，关于页再放「回到内容页」，这样一条浏览路径就能走通：首页 → 内容页 → 关于页 → 首页。锚点不是装饰，它是三页结构里最便宜也最有效的页内跳转手段，既满足了「超链接可以跳转」，又不用为了每个要点再拆第四个页面。

2.1 页面角色划分：首页、内容页、关于页各放什么

首页不要把所有内容都堆上去。首屏只放一个 h1、一段 80 到 120 字的说明、一张主图和两个按钮，下面的卡片区再给出三个入口。h1 写站点主题，不要写「欢迎来到我的网站」这种空话，直接写「把文字、图片和超链接组织成一条清楚的浏览路径」，评阅人一眼就知道这页要干什么。两个按钮一个是主按钮「查看内容页」，一个是次按钮「了解本站」，分别指向 content.html 和 about.html，用<a>而不是<button>，因为它们的本质是跳转。

内容页承担展开任务，建议用三个 section，每个 section 对应首页的一张卡片。section 的 id 用英文小写，比如structure、image、link，首页卡片的 href 写成content.html#structure。这样点击卡片时浏览器会直接滚到内容页对应段落，URL 里带一个#structure，答辩时也能讲清楚「这是页内锚点，不是新开页面」。每个 section 里放一段说明、一张配图、一行返回链接，段落不要长，三到五行就够，长文反而会让三页结构显得头重脚轻。

关于页不需要写太多个人经历，放三段就够：这个站点做什么、三页各自负责什么、怎么联系。联系方式用mailto:链接，比如mailto:hello@example.com，把地址替换成自己的邮箱。不要放真实手机号、真实学校名或真实公司名，课程设计里用示例邮箱完全够用。关于页底部再放「返回首页」和「回到内容页」，让浏览路径回到主线。

页面角色定清楚之后，再检查一遍：首页有没有指向另外两页的入口，内容页能不能回到首页和关于页，关于页能不能回到首页和内容页。三页之间至少要有六条站内链接，加上卡片锚点和页脚返回顶部，链接数量就够了。不要为了凑链接在页脚堆十几条无效链接，空href="#"在验收时会被当成未完成。

2.2 目录与资源路径：css、js、images 三层放法

三页站点的目录不要平铺。HTML 放根目录，样式放css/，脚本放js/，图片放images/，这是最稳妥的放法，后面换机器、换服务器都不容易出路径问题。目录结构可以写成下面这样，文件名全部用小写英文和连字符，不要用中文、空格和特殊符号。

# 三页静态站点的推荐目录结构 project/ ├── index.html # 首页：首屏、按钮、三张卡片入口 ├── content.html # 内容页：三个带 id 的 section ├── about.html # 关于页：说明、邮箱、返回路径 ├── css/ │ └── style.css # 全站唯一样式文件 ├── js/ │ └── main.js # 移动菜单、当前页高亮、返回顶部 └── images/ ├── hero.jpg # 首页首屏主图 ├── card-1.jpg # 内容页第一段配图 ├── card-2.jpg # 内容页第二段配图 └── card-3.jpg # 内容页第三段配图

这份目录里最关键的是「同级引用」四个字。三个 HTML 都在根目录，所以首页引用样式写css/style.css，引用图片写images/hero.jpg，引用脚本写js/main.js。内容页和关于页与首页同级，路径写法完全一样，不需要写../css/style.css。一旦看到../，先停下来确认文件到底在哪一层，很多 404 就是复制粘贴时多了一层或少了一层。

资源路径还有三个细节。第一，文件名大小写要统一，Hero.jpg和hero.jpg在 Windows 本地可能都能打开，传到区分大小写的服务器上就会裂图。第二，图片扩展名要和实际格式一致，不要把 PNG 文件改成.jpg后缀，浏览器可能照样显示，但压缩工具和部分服务器会出问题。第三，不要写绝对路径，C:\Users\xxx\Desktop\project\images\hero.jpg这种路径换一台机器就失效，答辩现场最容易翻车。路径统一用相对路径，从当前 HTML 所在目录出发写。

如果后面要部署到静态托管，根目录下的index.html会被默认打开，另外两页通过文件名访问。部署前在本地根目录启动一个静态服务，用http://localhost:8000/index.html走一遍，比双击 HTML 更接近真实环境。

2.3 导航与跳转关系：主导航、锚点和页脚入口怎么闭环

导航不要只写三个文字链接。主导航要能看出当前在哪一页，当前页链接加aria-current="page"，样式上给一个下划线或主色，读者才知道自己没点错。三个页面的头部结构必须完全一致，只改title和 main 里的内容，否则会出现「首页导航有四个链接、内容页只有三个」这种低级不一致。

跳转关系可以按入口位置列成一张表，写 HTML 时逐条对照。

表格里content.html#structure这种写法要特别小心：#后面的 id 必须和内容页 section 的id="structure"完全一致，大小写、连字符都不能差。锚点目标不存在时，浏览器不会报错，只会停在页面顶部，验收时看起来像「点了没反应」，其实是 id 写错了。页脚返回顶部用href="#top"，同时给body加id="top"，三页都能用，不需要额外脚本也能跳。

外部链接只在确实需要时加target="_blank"，并且补rel="noopener"。三页课程设计里不建议放太多外部链接，一是外链失效会影响验收，二是评阅人更关心站内闭环。把站内六条主路径走通，比堆十个外链更有说服力。

3. 视觉与交互实现：统一版式、图片规范和移动端适配

三页站点看起来简单，视觉上最容易出现的问题是「每页像不同人做的」。首页标题很大，内容页标题很小；首页卡片有圆角，内容页图片直角；导航在首页居中，在关于页靠左。解决办法不是每页单独调样式，而是先写一层全站共用的样式，把颜色、容器宽度、间距、按钮、卡片这些重复元素收进变量和组件类，三页只写各自的主内容。这样后面改主色或改圆角，一次就能改完，不会出现三页三种蓝。

交互也不需要复杂。三页站点最值得加的三个交互是：移动端菜单开合、当前页导航高亮、页脚返回顶部。前两个解决「手机上导航挤成一行」和「不知道当前在哪页」，第三个解决长内容页滚到底后怎么回去。三个都用原生 JavaScript 写，不引第三方库，代码量小，答辩时也讲得清楚。

3.1 样式分层：变量、重置、布局和组件四层

样式文件按四层写：变量层、重置层、布局层、组件层。变量层放主色、文字色、容器最大宽度、间距和圆角；重置层统一盒模型、去掉 body 默认边距、让图片不撑破容器；布局层写容器和卡片栅格；组件层写按钮、导航、页脚。四层按顺序放在css/style.css里，后面加样式不容易互相覆盖。

/* 1. 变量层：主色、文字色、容器宽度、间距统一在这里改 */ :root { --color-primary: #1f5f8b; --color-text: #1f2933; --color-muted: #5f6b76; --color-bg: #f7f9fb; --max-width: 1100px; --gap: 24px; --radius: 12px; } /* 2. 重置层：统一盒模型，避免 padding 把宽度撑出屏幕 */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--color-text); background: var(--color-bg); line-height: 1.7; } img { display: block; max-width: 100%; height: auto; } /* 3. 布局层：容器限宽居中，卡片栅格自动换列 */ .container { width: min(100% - 32px, var(--max-width)); margin-inline: auto; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); } /* 4. 组件层：按钮、导航、移动端折叠 */ .btn { display: inline-block; padding: 10px 18px; border-radius: 999px; text-decoration: none; } .btn-primary { background: var(--color-primary); color: #fff; } .nav-toggle { display: none; } .nav-list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } @media (max-width: 768px) { .nav-toggle { display: inline-block; } .nav-list { display: none; flex-direction: column; } .nav-list.is-open { display: flex; } }

这段样式里几个参数值得说明。--max-width: 1100px控制桌面端内容宽度，太宽会让文字行长超过舒适阅读范围；--gap: 24px是卡片间距，窄屏可以降到 16px。.container用min(100% - 32px, var(--max-width))，意思是「屏幕再窄也留 32px 边距，屏幕够宽就锁在 1100px」，比写死width: 1100px稳。卡片栅格用repeat(auto-fit, minmax(240px, 1fr))，桌面三列，窄屏自动变一列，不需要写三套媒体查询。.nav-toggle默认display: none，只在 768px 以下显示，这样桌面端不会多出一个菜单按钮。

box-sizing: border-box和img { max-width: 100%; height: auto; }是三页站点的防溢出底线。前者让 padding 算在宽度里面，后者让图片不超过容器。很多手机端横向滚动不是布局写得多复杂，就是这两条没写。

3.2 图片规范：尺寸、格式、alt 和响应式

图片是三页作业里最容易拖后腿的部分。原图直接拖进项目，一张 5MB，三页加载慢；文件名带空格或中文，部署后路径编码出问题；图片没有alt，评阅时被问「这张图什么意思」答不上来。我的做法是先定一张图片规范表，拍照或找图之前就按表处理。

首屏主图不要懒加载，它是第一屏内容，延迟加载会让首屏先空一块。内容页靠下的配图可以加loading="lazy"，减少初始请求。图片标签里写width和height，浏览器提前知道比例，图片加载时不会把文字顶来顶去，这个细节在答辩现场很加分。

<!-- 首屏主图：不懒加载，写宽高防布局抖动 --> <img src="images/hero.jpg" alt="三页站点首页示意图，包含导航、主图和入口按钮" width="1200" height="800"> <!-- 内容页配图：靠下位置，加懒加载 --> <img src="images/card-1.jpg" alt="页面结构示意图，展示头部、主内容和页脚三层" width="800" height="533" loading="lazy">

alt不要写「图片」「配图」「一张图」这种废话，要写这张图在页面里承担的信息。装饰图确实没有信息，才写alt=""。图片压缩到 200KB 以内通常就够了，压缩后检查扩展名和实际格式是否一致，不要把 WebP 文件硬改成.jpg。

3.3 交互脚本：移动菜单、当前页高亮和返回顶部

脚本放在js/main.js，三个页面都在</body>前用<script src="js/main.js" defer></script>引入。defer让脚本在 HTML 解析完再执行，不用把脚本包在DOMContentLoaded里，也不会阻塞首屏。

// 移动端导航开关：按钮控制 aria-expanded 与菜单显示 const navToggle = document.querySelector('.nav-toggle'); const navList = document.querySelector('.nav-list'); if (navToggle && navList) { navToggle.addEventListener('click', () => { const open = navToggle.getAttribute('aria-expanded') === 'true'; navToggle.setAttribute('aria-expanded', String(!open)); navList.classList.toggle('is-open', !open); }); } // 根据当前路径给导航加高亮，避免三页复制后忘改 const current = location.pathname.split('/').pop() || 'index.html'; document.querySelectorAll('.nav-list a').forEach((link) => { const href = link.getAttribute('href'); if (href === current) { link.setAttribute('aria-current', 'page'); } }); // 返回顶部：尊重减少动态效果偏好 const topLink = document.querySelector('[data-back-top]'); if (topLink) { topLink.addEventListener('click', (event) => { event.preventDefault(); const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' }); }); }

第一段用aria-expanded记录菜单状态，值是字符串"true"或"false"，不要写成布尔值直接塞进属性。aria-controls="site-nav"在 HTML 按钮上指向导航容器，读屏软件能建立关联。第二段用location.pathname.split('/').pop()取当前文件名，和导航链接的href比对，匹配就加aria-current="page"。本地用file://打开时路径可能带盘符，仍然能取到文件名，但更建议用本地服务打开。第三段给返回顶部加了prefers-reduced-motion判断，系统设置减少动态效果时直接跳，不播放平滑滚动。

这三个交互都不大，但正好覆盖三页站点的三个常见验收动作：手机上点菜单、看导航当前页、滚到底点返回顶部。脚本里没有绑定具体页面，三页共用一份，改一处三页生效。

4. 三页逐页实现：公共头尾、首页首屏和内容锚点

写 HTML 的顺序建议是先写公共头部和页脚，再写首页 main，最后写内容页和关于页。公共头尾三页一致，先定下来后面只改 main，不会出现「首页导航三个链接、内容页四个链接」的偏差。首页 main 定首屏结构和卡片入口，内容页按首页卡片的锚点 id 写 section，关于页收联系方式和返回路径。这样写下来，三页的链接关系在代码层面就是对齐的。

语义标签不要全用div。头部用header，导航用nav，主内容用main，独立段落用section，卡片用article，页脚用footer。标题层级从 h1 到 h2 再到 h3，每页只有一个 h1。评阅人未必要逐行看代码，但打开开发者工具看结构时，语义标签能让页面骨架一目了然。

4.1 公共头部与页脚：三页复用同一套结构

公共头尾可以按下面这份写，三个页面复制同一份，只改<title>和 main 里的内容。body加id="top"，页脚返回顶部直接指向它。导航容器id="site-nav"和按钮的aria-controls对应，移动端菜单脚本靠这两个属性工作。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>首页 · 三页站点</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <header class="site-header"> <div class="container header-inner"> <a class="brand" href="index.html">三页站点</a> <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">菜单</button> <nav id="site-nav" aria-label="主导航"> <ul class="nav-list"> <li><a href="index.html">首页</a></li> <li><a href="content.html">内容</a></li> <li><a href="about.html">关于</a></li> </ul> </nav> </div> </header> <!-- 每页只替换 main 里的内容，头尾保持同一份结构 --> <footer class="site-footer"> <div class="container footer-inner"> <p>© 2026 三页站点 · 课程设计示例</p> <a href="#top"><main> <section class="hero container"> <div class="hero-text"> <p class="eyebrow">WEB 页面设计 · 三页结构</p> <h1>把文字、图片和超链接组织成一条清楚的浏览路径</h1> <p>首页负责说明站点主题，内容页展开三个要点，关于页补充联系方式和项目说明。每一页都能通过导航回到其他页面。</p> <div class="hero-actions"> <a class="btn btn-primary" href="content.html">查看内容页</a> <a class="btn btn-ghost" href="about.html">了解本站</a> </div> </div> <figure class="hero-media"> <img src="images/hero.jpg" alt="三页站点首页示意图，包含导航、主图和入口按钮" width="1200" height="800"> </figure> </section> <section class="container section"> <h2>三个页面各自解决什么问题</h2> <div class="card-grid"> <article class="card"> <img src="images/card-1.jpg" alt="页面结构示意图，展示头部、主内容和页脚三层" width="800" height="533" loading="lazy"> <h3>结构清楚</h3> <p>导航、主内容、页脚三层固定，读者不需要猜下一页在哪里。</p> <a href="content.html#structure">查看结构说明</a> </article> <article class="card"> <img src="images/card-2.jpg" alt="图片规范示意图，展示统一比例的卡片图" width="800" height="533" loading="lazy"> <h3>图片规范</h3> <p>图片统一尺寸和比例，写清 alt，窄屏不撑破容器。</p> <a href="content.html#image">查看图片规范</a> </article> <article class="card"> <img src="images/card-3.jpg" alt="超链接关系示意图，展示三页之间的跳转方向" width="800" height="533" loading="lazy"> <h3>链接闭环</h3> <p>导航、按钮、卡片锚点和页脚入口都有明确落点。</p> <a href="content.html#link">查看链接说明</a> </article> </div> </section> </main>

首屏h1只出现一次，卡片标题用h3，中间跳过h2是因为卡片区上方已经有h2，层级是 h1 → h2 → h3，不要为了字号把 h3 写成 h2。两个按钮用<a>，主按钮类btn-primary，次按钮类btn-ghost，样式上区分主次，但都是链接。三张卡片的href分别是content.html#structure、content.html#image、content.html#link，后面写内容页时 section 的 id 必须逐字对应。

卡片图加loading="lazy"，因为它们在首屏下方；首屏主图不加，保证第一眼完整。图片width和height写实际比例，CSS 里height: auto会让它在窄屏按比例缩放，不会压扁。

4.3 内容页与关于页：锚点段落、联系链接和返回路径

内容页的 section id 要和首页卡片对齐。每个 section 里放 h2、一段说明、一张图、一行返回链接。三个 section 结构一致，复制后只改 id、标题、文字和图片路径。返回链接不要只写「点击这里」，链接文字要能独立看懂，比如「返回首页」「去关于页」。

<main class="container section"> <h1>内容页：三个要点展开</h1> <p class="lead">这一页承接首页的三张卡片，用页内锚点定位到对应段落。每个 section 的 id 必须和首页卡片的 href 完全一致。</p> <section id="structure" class="content-block"> <h2>1. 结构清楚</h2> <p>头部导航固定三项，主内容按 section 分段，页脚保留返回顶部。读者从首页点进来时，浏览器会直接滚到这一段。</p> <img src="images/card-1.jpg" alt="页面结构示意图，展示头部、主内容和页脚三层" width="800" height <p> <a href="https://download.csdn.net/download/wkt1105436760/16359904" style="color:#ec7500;font-size:14px;"> 本文还有配套的精品资源，点击获取 </a> <img alt="menu-r.4af5f7ec.gif" src="https://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;"> </p>