Dreamweaver网页设计作业成品如何优化？-网页设计-锦华智联科技

这份作业成品将包含以下特点,完全符合学生作业的要求：

（图片来源网络，侵删）

技术栈全面：综合运用了 HTML5、CSS3、以及一点基础的 JavaScript。
布局清晰：使用经典的 Flexbox 布局，是现代网页设计的标准。
视觉效果：包含了导航栏悬停效果、图片轮播、卡片阴影等，让页面看起来更专业。
响应式设计：适配桌面和移动端，这是现代网页的必备技能。
结构完整：包含网站头部、导航、主要内容区、侧边栏和页脚，结构清晰。
易于理解：代码注释清晰，方便你学习和理解每一部分的作用。

作业成品：个人作品集网站

这是一个简洁、现代的个人作品集网站，适合展示设计师、摄影师或开发者的作品。

最终效果预览

桌面端效果：
移动端效果：

第一部分：项目文件结构

在你的电脑上创建一个文件夹,my_portfolio，然后在里面创建以下文件和子文件夹，这能让你养成良好的文件管理习惯。

（图片来源网络，侵删）

my_portfolio/
├── images/
│   ├── hero-bg.jpg       // 首页大图背景
│   ├── project-1.jpg     // 项目缩略图1
│   ├── project-2.jpg     // 项目缩略图2
│   └── project-3.jpg     // 项目缩略图3
│
├── css/
│   └── style.css         // 我们的主样式表
│
├── js/
│   └── script.js         // 我们的JavaScript文件
│
├── index.html            // 网站的主页
└── about.html            // “关于我”页面 (可选，用于展示多页面能力)

第二部分：HTML 代码 (`index.html`)

这是网页的骨架,在 Dreamweaver 中，你可以切换到 “代码” 视图来编写和查看代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">张三的个人作品集</title>
    <!-- 引入外部 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入一个流行的图标库 (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 1. 网站头部 -->
    <header>
        <div class="container">
            <a href="index.html" class="logo">张三的作品集</a>
            <nav>
                <ul>
                    <li><a href="#home" class="active">首页</a></li>
                    <li><a href="#about">关于我</a></li>
                    <li><a href="#projects">我的项目</a></li>
                    <li><a href="#contact">联系我</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <!-- 2. 首页大图区域 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>你好，我是张三</h1>
                <p>一名充满热情的前端开发 & UI/UX 设计师</p>
                <a href="#projects" class="cta-button">查看我的作品</a>
            </div>
        </section>
        <!-- 3. 关于我 -->
        <section id="about" class="about">
            <div class="container">
                <h2>关于我</h2>
                <p>我专注于创建美观、实用且用户友好的网页，我相信，好的设计不仅仅是关于外观，更是关于创造无缝的用户体验，我熟练掌握 HTML, CSS, JavaScript 以及各种现代前端框架。</p>
            </div>
        </section>
        <!-- 4. 项目展示区 -->
        <section id="projects" class="projects">
            <div class="container">
                <h2>我的项目</h2>
                <div class="project-grid">
                    <div class="project-card">
                        <img src="images/project-1.jpg" alt="项目一">
                        <h3>电商网站重设计</h3>
                        <p>为一家本地服装店重新设计了其在线购物体验，提升了 30% 的转化率。</p>
                        <a href="#">查看详情 <i class="fas fa-arrow-right"></i></a>
                    </div>
                    <div class="project-card">
                        <img src="images/project-2.jpg" alt="项目二">
                        <h3>移动 App UI 设计</h3>
                        <p>为一款健身追踪 App 设计了完整的用户界面，注重简洁和易用性。</p>
                        <a href="#">查看详情 <i class="fas fa-arrow-right"></i></a>
                    </div>
                    <div class="project-card">
                        <img src="images/project-3.jpg" alt="项目三">
                        <h3>企业官网开发</h3>
                        <p>使用 HTML, CSS 和 JavaScript 为一家科技公司开发了响应式官网。</p>
                        <a href="#">查看详情 <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 5. 联系方式 -->
        <section id="contact" class="contact">
            <div class="container">
                <h2>联系我</h2>
                <p>有项目想合作？或者只是想打个招呼？随时联系我！</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-dribbble"></i></a>
                    <a href="mailto:your.email@example.com"><i class="fas fa-envelope"></i></a>
                </div>
            </div>
        </section>
    </main>
    <!-- 6. 网页页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 张三. All rights reserved.</p>
        </div>
    </footer>
    <!-- 引入外部 JavaScript 文件 -->
    <script src="js/script.js"></script>
</body>
</html>

第三部分：CSS 代码 (`css/style.css`)

这是网页的“化妆师”，负责所有的颜色、字体、布局和动画效果。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #343a40;
    --text-color: #333;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
h1, h2, h3 {
    margin-bottom: 15px;
    line-height: 1.2;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
section {
    padding: 60px 0;
}
/* --- 导航栏 --- */
header {
    background: var(--white);
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}
.logo {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--secondary-color);
}
nav ul {
    list-style: none;
    display: flex;
}
nav ul li {
    margin-left: 25px;
}
nav ul li a {
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active {
    color: var(--primary-color);
}
/* --- 首页大图 --- */
.hero {
    height: 100vh; /* 视口高度 */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero-bg.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
}
.hero-content h1 {
    font-size: 3.5em;
    margin-bottom: 20px;
}
.hero-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
}
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.3s ease;
}
.cta-button:hover {
    background: #0056b3;
    transform: translateY(-3px);
}
/* --- 关于我 --- */
.about {
    background: var(--light-bg);
    text-align: center;
}
.about .container p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1em;
}
/* --- 项目展示 --- */
.projects h2 {
    text-align: center;
    margin-bottom: 50px;
}
.project-grid {
    display: flex;
    flex-wrap: wrap; /* 允许项目换行 */
    justify-content: space-around;
    gap: 30px; /* 卡片之间的间距 */
}
.project-card {
    flex: 1 1 300px; /* 卡片宽度至少300px，可伸缩，占据可用空间 */
    background: var(--white);
    border-radius: 8px;
    overflow: hidden; /* 让图片圆角生效 */
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.project-card img {
    height: 200px;
    object-fit: cover; /* 确保图片填充区域且不变形 */
}
.project-card-content {
    padding: 20px;
}
.project-card h3 {
    font-size: 1.3em;
}
.project-card p {
    color: #666;
    margin: 15px 0;
}
.project-card a {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    color: var(--primary-color);
}
.project-card a i {
    margin-left: 5px;
}
/* --- 联系我 --- */
.contact {
    text-align: center;
    background: var(--secondary-color);
    color: var(--white);
}
.contact h2, .contact p {
    color: var(--white);
}
.social-links {
    margin-top: 30px;
}
.social-links a {
    color: var(--white);
    font-size: 1.5em;
    margin: 0 15px;
    transition: color 0.3s ease;
}
.social-links a:hover {
    color: var(--primary-color);
}
/* --- 页脚 --- */
footer {
    background: #222;
    color: #ccc;
    text-align: center;
    padding: 20px 0;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        text-align: center;
    }
    nav ul {
        margin-top: 15px;
    }
    nav ul li {
        margin: 0 15px;
    }
    .hero-content h1 {
        font-size: 2.5em;
    }
    .project-grid {
        flex-direction: column; /* 在小屏幕上项目垂直排列 */
        align-items: center;
    }
}

第四部分：JavaScript 代码 (`js/script.js`)

这是网页的“大脑”，负责处理交互，比如平滑滚动。

// 等待整个 HTML 文档加载完成后再执行脚本
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('nav ul li a');
    // 为每个导航链接添加点击事件监听器
    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            // 阻止默认的跳转行为（页面瞬间跳转）
            event.preventDefault();
            // 获取 href 属性中的目标ID（"#home"）
            const targetId = this.getAttribute('href');
            // 获取目标元素
            const targetElement = document.querySelector(targetId);
            // 如果目标元素存在，则平滑滚动到该元素
            if (targetElement) {
                // 使用 scrollIntoView({ behavior: 'smooth' }) 实现平滑滚动
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start' // 滚动到元素的顶部
                });
            }
            // (可选) 更新活动链接的样式
            // 移除所有链接的 'active' 类
            navLinks.forEach(l => l.classList.remove('active'));
            // 给当前点击的链接添加 'active' 类
            this.classList.add('active');
        });
    });
});

第五部分：如何使用和提交

准备素材：
（图片来源网络，侵删）
- 从网上下载三张不同风格的图片,替换 images 文件夹中的 project-1.jpg, project-2.jpg, project-3.jpg。
- 再下载一张高质量的风景或人物图片作为 hero-bg.jpg。
配置 Dreamweaver：
- 打开 Adobe Dreamweaver。
- 点击 文件 -> 打开，选择你创建的 index.html 文件。
- 在右侧的 文件 面板中，确保你看到了整个项目的文件结构。
预览和调试：
- 切换到实时视图，你可以实时看到网页的编辑效果。
- 切换到实时代码视图，可以边看效果边修改代码。
- 点击工具栏上的实时按钮，在浏览器中预览你的网页，并测试在不同设备尺寸下的表现。
提交作业：
- 将整个 my_portfolio 文件夹压缩成一个 .zip 文件。
- 将这个 .zip 文件提交给你的老师。

作业亮点总结

技术点全面：HTML5 语义化标签、CSS3 Flexbox/Grid 布局、响应式设计、JavaScript 事件处理。
视觉效果好：悬停效果、平滑滚动、阴影和渐变，让页面不单调。
结构清晰：代码有良好的注释，文件结构规范，易于老师阅读和评分。
实用性高：这是一个可以直接作为个人简历网站使用的模板，体现了学以致用。

这份作业成品不仅能让你轻松完成 Dreamweaver 的课程作业，更是一个可以放进你个人作品集的优秀案例，祝你作业顺利！

Dreamweaver网页设计作业成品如何优化？