网页设计与制作项目教程（第四版） 模块11项目部署与展望

网页设计与制作项目教程（第四版）模块11项目部署与展望教学课件教学目标：学习与能力学习目标能力目标•掌握网站部署到互联网的全过程。•掌握本地测试与可移植性检查。•掌握空间/域名申请及数据库配置。•掌握FTP文件上传步骤。•独立完成“我心飞扬”项目网站部署。•解决部署中遇到的实际环境路径问题。•确保网站稳定运行并具备易维护性。教学要求：知识要点与关联知识知识要点能力要求关联知识网站总体设计思想掌握结构化设计、模块化复用开发注意事项了解可移植性、路径规范、环境解耦项目最终效果预览熟悉栏目结构、动态交互表现项目成果：站点结构总览栏目构成：•公开栏目：首页、爱好分享（影音/文学）、热门图文。•交互功能：给我留言（发表/查看）。•管理后台：实现数据的实时持久化存储。各页面预览：响应式视觉呈现步骤1：本地测试与标题修正1.打开资源面板，进入模板项。2.双击模板。3.在页面属性中尝试设置统一标题：。4.保存并更新：观察各生成页的变化。测试发现模板更新未在各页生效？因为标签默认位于模板的“可编辑区域”，内容页拥有该区域的最高解释权，模板无法强制覆盖。步骤2：手工修正各页SEO标题命名规律：“子栏目名-栏目名-网站名称”网页文件名设定标题内容index.html首页-我心飞扬songmovie.html影音风云榜-爱好分享-我心飞扬classicbooks.html走进世界文学-爱好分享-我心飞扬hot.html热门图文-我心飞扬注：iframe框架内的各内容页无需修改标题，因其不直接显示在浏览器标题栏。深度理论：网站可移植性的三大金律1.东西都在所有素材（图片、音频、JS等）必须位于站点根目录内部，严禁引用站点外的本地资源。2.指向都对路径严禁使用绝对路径（D:\...），必须全部使用相对路径（./或../）。3.不依赖本机配置与组件不能固化在本地Windows环境。数据库是最典型的本机依赖点。专家提示：为何绝对路径是部署的死穴？场景模拟：你在HTML里写了。后果：当网站上传到互联网服务器时，服务器根本没有D盘下的对应文件夹。浏览器会因为找不到资源而显示“红叉”。金标准：任何时候都应使用相对于HTML文件位置的路径，如。部署实操：申请Web空间与域名•访问“主机申请”栏目。•免费资源：获取教学专用的二级域名。•关键数据：记录下FTP地址、用户名、密码。•映射关系：域名指向服务器主目录。部署实操：申请远程MySQL数据库•访问。•输入数据库名、用户名、密码、Email。•激活：在注册邮箱中单击确认链接。•特性：仅供测试使用，不宜存放商用敏感数据。为什么申请？本地WampServer的数据库无法公网访问。申请远程数据库是动态网站上线的核心环节。操作原子化：数据库数据迁移1.登录db4free提供的PhpMyAdmin。2.点击“导入”菜单。3.选择本地导出的备份文件。4.点击执行：在远程服务器重构表结构与记录。操作原子化：修改PHP连库信息•打开Dreamweaver中的。•在“数据库”面板修改连接。•服务器：填入申请的远程数据库IP或主机名。•用户名/密码：替换为远程数据库凭证。专家警告版本偏差：db4free使用MySQL8.x，而本地教程基于5.x。若出现授权错误，需检查驱动兼容性。上传发布：使用Windows资源管理器1.打开“此电脑”，地址栏输入：

2.在弹出框输入FTP用户名与密码。3.定位到服务器的wwwroot文件夹。4.将本地站点所有文件全选并拖拽至窗口。为何选此法？除了DW软件，Windows自带的FTP功能最直观，适合没有专业传输工具的紧急维护场景。专家提示：部署成功的最后一步上传后图片不显示怎么办？•1.检查文件名是否包含中文字符或空格。•2.检查字母大小写（Windows不敏感，但绝大多数Linux服务器严格区分Index.html与index.html）。•3.确认所有资源是否都在服务器的或对应子目录下。展望：从前端设计到“全栈工程师”视觉美感提升优秀的技术需要配以精美的视觉。建议进阶学习Photoshop或UI设计，提升用户第一印象。职业竞争力不仅会HTML/CSS，还能通过PHP编写逻辑，成为具备全局设计能力的“全栈工程师”。回味思考：客观题检测(1)1.网站可移植性要求，素材应放置在何处？答案：C.网站站点（根目录）内2.上传网站到服务器最常用的通信协议是？答案：C.FTP(FileTransferProtocol)3.相对路径与绝对路径的主要区别是？答案：文件访问的起点定位方式不同（相对于本页vs相对于盘符）回味思考：客观题检测(2)4.具备前端页面设计与后端程序编码能力的开发人员被称为？答案：C.全栈工程师5.在部署过程中避免依赖本机配置的主要目的是？答案：确保网站在不同环境下的兼容性与可运行性回味思考：深度逻辑解析Q：完善后的“我心飞扬”上传空间后，如何保证数据库功能正常？逻辑解析：

1.数据同步：必须导出本地SQL