Dreamweaver网页制作课堂实录 从零搭建个人主页\n\n一、课堂导入 明确学习目标\n\n上课伊始，教师首先展示了几个使用Dreamweaver制作的优秀网页案例，包括个人简历页、摄影作品展示页和小型企业官网。通过直观的视觉对比，学生们快速理解了“结构清晰、层次分明、视觉统一”的网页设计原则。\n\n本节课的核心目标是 \n1. 掌握Dreamweaver中“站点”的创建与管理；\n2. 学会使用HTML结构与CSS样式布局网页（如头部、导航、内容区、页脚）；\n3. 插入文本、图像、超链接等基本

标题：Dreamweaver网页制作课堂实录：从零搭建个人主页\n\n一、课堂导入：明确学习目标\n\n上课伊始，教师首先展示了几个使用Dreamweaver制作的优秀网页案例，包括个人简历页、摄影作品展示页和小型企业官网。通过直观的视觉对比，学生们快速理解了“结构清晰、层次分明、视觉统一”的网页设计原则。\n\n本节课的核心目标是：\n1. 掌握Dreamweaver中“站点”的创建与管理；\n2. 学会使用HTML结构与CSS样式布局网页（如头部、导航、内容区、页脚）；\n3. 插入文本、图像、超链接等基本元素，实现基础交互。\n\n教师强调：“网页制作不是记代码，而是理解‘结构（HTML）+ 表现（CSS）+ 行为（JavaScript）’的分工。Dreamweaver的可视化操作可以帮助我们快速搭建，但最终仍需回归代码逻辑。”\n\n---\n\n二、操作演示：创建站点与基本结构\n\n1. 定义站点\n教师打开Dreamweaver，点击“站点”>“新建站点”，命名为“mypage”，选择本地文件夹路径（如D:\\webproject），设置默认图像文件夹为“images”。教师提醒：“站点是Dreamweaver管理项目的核心，所有文件必须放在站点文件夹内，否则链接失效。”\n\n2. 新建HTML文档，勾选“HTML5”，同时链接至预先准备的外部CSS文件“style.css”（先创建空文件，稍后编写）。教师切换到“设计”视图，页面中部出现“untitled”默认名。\n\n3. 页面结构编码\n教师拆分视图，一边写HTML一边观察设计轮廓：\n（1）用<header>包裹H1标题“个人信息中心”与菜单导航（链接标签）；\n（2）用

如若转载，请注明出处：http://www.lehui98.com/product/20.html

更新时间：2026-11-01 11:17:20