dwhtml网页设计期末大作业-网页设计-锦华智联科技

第一部分：项目构思与定位

一个好的大作业,成功的一半在于一个好的选题，避免选择过于宏大或无法实现的功能，建议选择一个垂直领域、功能聚焦的项目。

（图片来源网络，侵删）

第二部分：技术栈与工具准备

明确你要使用的技术,期末作业要求使用 Dreamweaver (DW)，但实际开发流程可以更现代化。

（图片来源网络，侵删）

核心三件套:
- HTML5: 网页的骨架，使用语义化标签 (<header>, <nav>, <main>, <section>, <article>, <footer>)。
- CSS3: 网页的皮肤，使用 Flexbox 或 Grid 进行布局，使用动画、过渡效果增强交互。
- JavaScript (ES6+): 网页的灵魂，实现动态交互，如轮播图、表单验证、购物车逻辑等。
开发工具:
- 代码编辑器 (强烈推荐): Visual Studio Code (VS Code)，它免费、强大、插件丰富，远比DW的代码视图好用，你可以用VS Code写代码，然后复制到DW中进行“设计视图”的辅助和最终管理。
- 浏览器: Google Chrome，使用其强大的开发者工具 (F12) 进行调试、检查元素、分析性能。
- 设计工具: Figma 或 Canva (可画)，用于设计网站的整体风格、配色方案、布局草图和图标。
DW 的角色定位:
- 项目管理器: 用它来创建和管理你的整个网站项目，所有文件都放在一个站点下。
- 设计视图辅助: 在写完HTML和CSS后，可以用DW的设计视图快速预览效果，但不要依赖它来写代码。
- FTP上传: 如果需要将网站上传到服务器，DW的FTP功能很方便。

第三部分：详细开发步骤 (以个人作品集为例)

规划与设计

画线框图: 在纸上或Figma中，画出每个页面的基本布局，导航栏在哪，内容区在哪，页脚在哪，这叫“线框图”，不考虑颜色和样式，只考虑结构和信息层级。
设计视觉稿: 在线框图基础上，进行视觉设计，确定：
- 配色方案: 选择2-3种主色和1-2种辅助色，可以使用 Coolors.co 等工具。
- 字体: 选择1-2种字体，一个用于标题，一个用于正文，推荐使用Google Fonts。
- 风格: 简约、现代、活泼、专业？
准备资源:
- 图片: 使用高质量的图片，可以从 Unsplash, Pexels 等免费图库下载，为你的项目准备好Logo、作品图、个人照片等。
- 图标: 使用 Font Awesome 或 Ionicons 等图标库。

搭建项目结构

在DW中新建一个“站点”，创建以下文件夹结构，这是良好习惯的开始。

my-portfolio/
├── assets/              // 存放所有资源
│   ├── css/             // CSS文件
│   │   └── style.css   // 主样式表
│   ├── js/              // JavaScript文件
│   │   └── main.js      // 主脚本
│   ├── images/          // 图片
│   └── fonts/           // 字体文件
├── index.html           // 首页
├── about.html           // 关于我
├── portfolio.html      // 作品集
├── blog.html           // 博客列表
├── contact.html        // 联系方式
└── blog-detail.html    // 博客详情页 (示例)

编写代码 (分模块实现)

HTML 结构 (骨架)

创建通用模板: header, footer, nav 在多个页面是重复的，可以先写一个 index.html，然后将这些通用部分提取出来，或者使用“库”功能（在DW中）或简单的复制粘贴。
语义化: 导航栏用 <nav>区用 <main>，文章用 <article>，侧边栏用 <aside>。

示例 (首页 index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的作品集 - 首页</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>...</nav>
    </header>
    <main>
        <section id="hero">...</section>
        <section id="about-preview">...</section>
        <section id="portfolio-preview">...</section>
    </main>
    <footer>...</footer>
    <script src="assets/js/main.js"></script>
</body>
</html>

CSS 样式 (美化)

重置样式: 在 style.css 最开始，添加一个简单的CSS重置，消除不同浏览器的默认样式差异。

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans SC', sans-serif; line-height: 1.6; }

变量: 使用CSS变量定义颜色、字体等，方便全局修改。

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --text-color: #333;
    --light-bg: #f4f4f4;
}

布局:
- Flexbox: 适合一维布局（一行或一列），导航栏、页脚内的元素对齐。
- Grid: 适合二维布局（行和列），非常适合整个页面的布局，如header、main、footer。

响应式设计: 使用媒体查询 @media，让你的网站在不同尺寸的设备上（手机、平板、电脑）都有良好的显示效果。

@media (max-width: 768px) {
    .nav-links {
        display: none; /* 在手机上隐藏默认导航 */
    }
    .mobile-menu {
        display: block; /* 显示汉堡菜单 */
    }
}

JavaScript 交互 (灵魂)

轮播图: 使用 setInterval 或更现代的 setTimeout 递归来实现自动切换，通过改变图片的 opacity 或 display 属性来实现淡入淡出效果。

导航栏滚动效果: 监听 window.scroll 事件，当页面滚动一定距离后，给 nav 添加一个 scrolled 类，改变其背景色和样式。

window.addEventListener('scroll', function() {
    const nav = document.querySelector('nav');
    if (window.scrollY > 100) {
        nav.classList.add('scrolled');
    } else {
        nav.classList.remove('scrolled');
    }
});

表单验证: 在 contact.html 中，为邮箱输入框添加验证逻辑，检查是否包含符号。

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function() {
    const emailValue = this.value;
    if (!emailValue.includes('@')) {
        this.style.borderColor = 'red';
    } else {
        this.style.borderColor = 'green';
    }
});

作品集弹窗: 点击作品缩略图时，用JS动态创建一个 div 作为遮罩层，并在其中显示大图和描述。

第四部分：加分项与美化技巧

想让你的作业脱颖而出,可以尝试以下技巧：

微交互: 鼠标悬停在按钮上时有轻微的颜色变化或阴影效果；点击链接时有下划线动画。
滚动动画: 使用 Intersection Observer API 或简单的 scroll 事件，让元素在滚动到视口时才执行动画（如淡入、从左侧滑入），提升用户体验。
Loading 页面: 在网站加载时显示一个简单的动画，告知用户“请稍候”。
字体图标: 使用Font Awesome等图标库，而不是图片，更清晰、更灵活。
精心设计的配色和留白: 留白是设计的一部分，不要把页面塞得太满，和谐的配色能瞬间提升网站质感。
响应式是必须的: 确保你的网站在手机上看起来很棒，这通常是评分的重要标准。

第五部分：最终检查与提交

代码审查:
- 检查HTML标签是否闭合,属性是否有引号。
- 检查CSS选择器是否正确,有无拼写错误。
- 检查JavaScript有无语法错误,可以在浏览器控制台查看。
功能测试:
- 所有链接都能正常跳转吗？
- 所有按钮都有预期的效果吗？
- 表单提交后（即使是模拟）有反馈吗？
- 在不同浏览器（Chrome, Firefox, Edge）上测试，确保兼容性。
最终整理:
- 将所有文件整理到DW的站点文件夹中。
- 确保图片路径正确（最好使用相对路径）。
- 可以写一个简单的 README.md 文件，介绍你的项目、功能和技术亮点。
提交:
- 按照老师的要求,将整个网站文件夹压缩成 .zip 文件提交。
- 如果有在线演示地址,一定要附上！

祝你期末大作业顺利取得好成绩！这是一个将你所学知识融会贯通的绝佳机会，好好享受创造的过程吧！

dwhtml网页设计期末大作业