网页设计与制作项目教程（第四版） 模块01认识开发工具了解网站制作完整流程

网页设计与制作项目教程（第四版）模块01认识开发工具，了解网站制作完整流程教学课件教学目标：学习、能力与素养目标•学习目标：掌握网页发布流程；熟悉Dreamweaver制作方法；了解工作界面功能。•能力目标：独立管理站点；创建编辑网页（表格/图片/文字）；实现FTP上传发布。•素养目标：培养信息技术应用能力；增强版权意识与审美能力；建立团队协作与持续学习意识。教学重点本章作为开篇，重点在于建立“站点管理”的核心概念，并将抽象的上传发布流程具象化为实际操作。任务引领：展现首个网页“世界你好！”任务描述：连接互联网，启动浏览器，输入网址，在页面中央显示“世界你好！”图文信息。任务目标通过一个极简的“图+文”页面，让学生初步体验：

1.本地制作

2.远程上传

3.域名访问

这三个关键节点。步骤1：切换软件显示视图•菜单路径：启动Dreamweaver。•具体操作：在窗口右上角视图下拉菜单中，将当前显示视图由“开发人员”切换为“标准”。为什么要切换视图？“标准”视图提供了更多可视化面板（如文件、插入），适合初学者通过交互方式快速排版，而“开发人员”视图侧重于纯代码编写。步骤2：寻找“管理站点”入口•具体操作：在右侧“面板组”中找到“文件”面板，点击面板内的“管理站点”链接。站点管理逻辑站点是DW管理项目资源的最高单位。不建立站点直接写HTML无法有效维护图片、CSS等文件的相对路径。步骤3：新建站点及命名•具体操作：弹出“管理站点”对话框，单击“新建站点”按钮。参数说明注意：站点名称仅用于软件内部标识，不影响网页内容或域名地址。步骤4：配置本地站点文件夹参数•站点名称：填写“世界你好”。•本地站点文件夹：填写D:\task1。•快捷操作：可通过单击右侧的“浏览文件夹”按钮创建并选择。关键参数说明本地文件夹：这是网页文件在电脑上的物理家。严禁使用桌面或C盘，防止系统重装导致丢失，并确保路径中不含中文字符。专家提示：网页开发的黄金路径准则注意：网页制作中，所有文件、文件夹的命名及存放路径必须严格遵循：禁止使用中文：中文路径在部分浏览器或服务器上会产生乱码，导致图片失效。禁止使用空格：路径中的空格会转换为%20，增加不必要的访问风险。推荐使用：英文字母、数字及下划线（_）。步骤1：创建图像目录与首页文件•右击站点主目录->新建文件夹->命名为images。•右击站点主目录->新建文件->命名为index.html。为什么叫index.html？提示：index.html是服务器默认识别的入口文件名。当用户访问域名而未指定页面时，服务器会自动寻找并显示该文件。步骤2：双击文件并切换“设计”视图•操作：双击“index.html”，在文档窗口顶部点击“设计”按钮。视图提示注意：

文件名标签后的星号（*）代表文件未保存。建议随时按Ctrl+S保存。步骤3：插入表格及参数精准设定•菜单路径：点击菜单“插入”->“Table”。•核心参数表：为什么要这样设置？边框0：网页排版中常利用表格定位，设为0可实现隐形排版。

宽度650：确保在不同设备上内容显示宽度固定可控。参数项设定值逻辑意义行数1单行布局列2左右结构表格宽度650像素固定宽度容器边框精细0不显示边框线单元格边距/间距0无内边距/外间隙步骤4：插入图像源文件•操作：点击表格左单元格，菜单“插入”->“Image”。•定位：对话框默认定位在站点D:\task1内。素材提示注意：如果图像在站点文件夹外，系统会提示是否复制到根文件夹。必须点“是”，存入images文件夹。专家提示：资源引用的致命错误情景模拟：如果在插入图片时点击了“否”。后果：网页代码会记录绝对路径（如C:\Users\MyPic.jpg）。表现：在你电脑上预览正常，但上传到服务器后，其他人访问将看到“红叉”。正确做法：始终选择“是”，将文件副本保存在站点主目录下。步骤5：输入文字与格式化属性•操作：点击右单元格，输入“世界你好！”。•格式化：选中文字->底部“属性面板”->“格式”下拉列表->选择“标题1”。属性面板逻辑属性面板会根据选中的元素（文字、图片或表格）动态切换。选中文字时，它显示字体、字号等排版工具。步骤6：表格布局的微调技巧•操作：移动鼠标到表格中间竖线，光标变为左右箭头状时，按下左键拖动。•目标：调整图片和文字的间距，使视觉效果平衡。排版细节虽然表格设置了宽度，但单元格的比例需要手动调优以适应素材的大小。步骤7：本地浏览器预览(F12)•快捷键：

F12(或点击状态栏预览按钮)。•浏览器选择：推荐使用GoogleChrome。预览逻辑注意：首次使用会提示定义主要浏览器。在“首选项”中选中GoogleChrome并设为“主浏览器”。步骤1：配置FTP服务器信息•在“文件”面板点击“定义服务器”。核心参数：FTP概念FTP(文件传输协议)是将本地电脑文件“推”到远程服务器的标准。服务器就像一台24小时开机的远程计算机。•连接方法：FTP•FTP地址：•端口：21•用户名：demo/密码：helloworld步骤3：展开双向视图并上传文件•操作：点击“文件”面板顶部的“展开以显示本地和远程站点”图标。•动作：选中本地index.html和images文件夹，点击向上箭头的“上传”图标。相关文件提示注意：上传时若询问“相关文件是否应包含在传输中？”，务必点“是”。这会确保HTML引用的图片也被同步上传。步骤4：远程浏览效果验证•验证：打开浏览器，输入WebURL。•成功：全球用户均可通过该网址访问你的作品。最终确认如果网页可以显示但图片不显示，请检查远程服务器的images文件夹是否包含图片素材。相关知识：系统化的开发八步走1.确定主题内容鲜明，办出特色2.搜集材料文字/图片/影音(注意版权)3.规划网站结构/风格/布局/颜色4.制作网页先大后小，先简单后复杂5.选购空间虚拟主机/VPS/云服务器6.域名解析URL定位，记忆方便7.上传测试FTP传输，检查路径8.维护更新保持内容新鲜感协议名(https)常用http,https,ftp域名()通过DNS映射到IP地址端口号(443)http默认为80，https为443路径(question)服务器内存放资源的目录文件名(13.html)首页通常命名为index.html参数串(?word=...)向服务器传递的查询数据深度解析：URL(统一资源定位符)拆解网页空间类型：优缺点深度对比类型优势劣势推荐场景虚拟主机价格低廉，共享维护资源受限，抢夺流量初学者、个人小站VPS独立IP，独占宽带需一定运维技术中型商业网站云服务器安全稳定，无缝迁移价格最高商用最佳选择专家提示：合规化经营底线注意：目前我国实行严格的网站备案和域名实名制度：备案手续：在服务商处免费办理，周期约20个工作日。未备案后果：无法使用中国境内服务器及解析，网站会被强制关闭。教学建议：课程练习可先使用本书提供的临时免费空间资源。Dreamweaver核心：属性面板(1/2)快捷操作注意：若面板未出现，可点击菜单“窗口”->“属性”或按Ctrl+F3呼出。灵活运用：代码、拆分与设计视图开发策略•代码视图：关注结构细节。•设计视图：关注布局直观。•拆分视图：

专家推荐！既能改代码又能看效果，特别适合学习。项目渐近：网站“我心飞扬”之温馨提示实战要求：制作2行2列的百分比表格，左下格插入图，其余格输入温馨提示文字。本阶段挑战1.熟悉百分比宽度设置；

2.掌握合并单元格操作；

3.实践“首页-我心飞扬”文档标题设定。操作原子化：合并单元格•步骤：选中第1行的两个单元格。•动作：在选中的格上右击->选择“表格”->“合并单元格”。逻辑解析合并操作在底层会生成`colspan="2"`的HTML代码。这在制作网站头部区域（通栏背景或大标题）时非常常用。参数原子化：百分比宽度设置•设置：表格宽度值为100。•单位：

百分比。响应式思想萌芽为什么要用百分比？

像素是绝对的，而百分比是相对的。100%宽度意味着表格将自动铺满整个浏览器窗口，无论屏幕大小。拓展训练：获取免费教学网页空间•访问地址：

•操作：注册账号，申请本书配套的虚拟主机资源。•记录：请务必妥善记录FTP账号、密码及临时域名。实践环节注意：只有拥有真实的远程空间，你才能理解DNS解析和服务器响应的延迟感，这是本地模拟无法替代的。回味思考：客观题检测(1)1.在Dreamweaver中，设置表格边框精细为0的目的是？答案：A.隐藏表格边框2.插入站点外的图片时，若点“否”不复制到根目录，会导致？答案：D.上传发布后图片显示异常（死链）回味思考：客观题检测(2)3.网页预览的默认快捷键是？答案：F124.网站项目开发的第一个步骤通常是？答案：C.确定网站主题回味思考：客观题检测(3)5.对于初学者，性价比最高的网页空间选择是？答案：C.虚拟主机6.FTP协议的默认服务端口号是？答案：21思考题：资源调用的规范性Q：目标文件在站点外，应如何操作？注意什么？为什么？逻辑解析：

1.操作：插入时务必选择“是”，将其复制到站点根目录（如images文件夹）。

2.注意：保持文件夹结构清晰。

3.原因：网页是基于相对路径寻找资源的。绝对路径（如C:\Users...）在服务器上不存在。只有存入站点，才能保证代码生成的是`images/pic.jpg`这种通用路径。思考题：发布流程与工具Q：使本机网站在互联网发布需要哪一步？工具支持什么协议？逻辑解析：

1.步骤：申请空间域名->配置FTP->上传文件。

2.协议：必须支持FTP(FileTransferProtocol)。

3.软件支持：Dreamweaver已深度集成此功能，无需第三方工具即可完成配置与传输。实战操作：市场调研与工具对比实战任务：网页空间调研1.访问“西部数码”或“阿里云”官网。

2.对比虚拟主机、VPS和云服务器的入门价格。

3.重要环节：记录下不同空间对PHP/MySQL等环境