网页设计与制作项目教程（第四版） 模块02构建网页的图文信息

网页设计与制作项目教程（第四版）模块02构建网页的图文信息教学课件教学目标LearningObjectives•学习目标：•能力目标：核心要求本章要求学生从简单的“单一页面”向“小型站点”过渡，重点在于理解资源路径和链接逻辑。○掌握站点的概念及管理操作；○掌握项目列表与编号列表的应用；○掌握图像在网页中的插入与优化；○深入理解并应用各类超链接。○熟练使用DW快速插入网页各类元素；○能独立设计并实现图文并茂的静态网站。素养目标ProfessionalQuality创新思维通过学习HTML标记，培养审美能力，鼓励探索多样化的图文设计方案。问题解决能针对链接失效、图像不显示等实际问题，通过查阅资料和尝试，有效提升纠错能力。团队协作鼓励经验分享，模拟团队分工合作场景，提升沟通协调能力。持续学习关注网页设计新技术迭代，主动保持个人技能的市场竞争力。教学要求与知识要点知识要点能力要求关联知识站点的概念理解相关原理与概念文字的应用掌握在网页中插入文字，编辑文字格式图像的应用掌握图像在网页中的插入和编辑超链接的应用掌握文档链接、锚点链接、邮件/热点链接等任务引领一：古诗鉴赏界面任务说明：创建一个本地站点，通过表格布局网页，在其中展示古诗《宿建德江》的内容，要求实现背景、图文及Logo的和谐排版。展示：Logo、导航、诗词内容、背景图核心思路1.建立站点规范文件管理

2.设定页面属性（标题/背景）

3.表格定位内容

4.文本格式精修步骤1：新建本地站点•操作步骤：•1.打开Dreamweaver软件。•2.选择菜单栏“站点”->“新建站点”。•3.或者：通过右侧“文件”面板点击“管理站点”新建。为什么先建站点？站点是DW管理项目资源的容器。只有先定义站点，软件才能根据站点根目录生成正确的“相对路径”，确保网页在上传服务器后依然能找到图片和链接。步骤2：站点参数配置•参数设置：•站点名称：填写古诗鉴赏•本地站点文件夹：点击右侧文件夹图标，选择存储目录。•4.点击“保存”。路径注意确保本地文件夹路径中不含中文字符和特殊空格，避免在部分服务器环境下出现乱码错误。步骤3：创建文件与页面属性•1.菜单：“新建”->“HTML”，保存为index.html。•2.菜单：“文件”->“页面属性”(Ctrl+J)。•3.分类-外观：选择背景图像，设置上边距：

0px。•4.分类-标题/编码：标题设为古诗鉴赏。逻辑解析上边距0：消除网页顶部默认留白，使背景图或顶部导航紧贴浏览器边缘。

标题：修改的是标签，显示在浏览器标签栏上。</div>专家提示：关于像素单位注意px的书写规范：•在Dreamweaver的可视化对话框中，通常使用汉字“像素”。•但在CSS样式表或代码视图中，必须使用英文单位“px”。•两者物理意义完全相同，但在代码中px必须紧跟数字，中间不能有空格（如：10px是对的，10px是错的）。步骤4：插入表格进行排版布局•1.切换到“设计”视图。•2.菜单：“插入”->“表格”。•3.参数设定：•4.对齐方式：居中。布局原理边框0：使表格作为隐形支架。三行分别承载：Logo、导航文字、正文。居中对齐确保在宽屏下依然美观。○行数：3，列数：1○表格宽度：500像素○边框粗细、单元格边距/间距：均设为0步骤5：填充图文并优化细节•1.第一行：菜单“插入”->“Image”，放入logo.jpg和menu.jpg。•2.第二行：输入文字“首页—>古诗大全—>宿建德江”。•3.第三行：插入古诗正文文字。•4.文本美化：选中诗名，通过属性面板设为“标题1”。操作逻辑先通过表格固定容器大小，再向格子内填充内容。插入图片时，务必确保图片已保存在站点目录内。相关知识：网站vs网页首页规范：首页是进入网站看到的第一个页面。文件名必须命名为index.html或default.html。服务器会自动识别此名称。网站（Website）：一个整体，是由许多网页集合而成的“家庭”。网页/页面（WebPage）：一个个体。通过浏览器看到的单一画面就是一个HTML文件。相关知识：管理与编辑本地站点管理入口：菜单“站点”->“管理站点”。•编辑：选中站点点击“编辑”图标，可修改本地路径或服务器信息。•删除：点击“删除”图标（减号），仅在DW中移除管理记录，不删除本地物理文件。专家提醒删除站点前，确认本地文件已经妥善保存。删除操作无法在DW中撤销（需重新导入）。编辑站点删除站点核心操作：网页文档属性设置注：背景图片如果过小，会产生拼贴效果；如果过大，加载会变慢。•1.设置标题(Title)：•2.空白边距：可设置左、右、上、下边距。•3.背景色与背景图：背景图默认会向水平和垂直方向“平铺”。○方法A：页面属性(Ctrl+J)对话框设置。○方法B：直接在“属性”面板顶部文本框设置。文字属性的调整通过底部的“属性面板”实时修改：•更改字号：选择标准字号（12-36px）或自定义。•文字颜色：使用调色板选择十六进制颜色代码。•加粗/斜体：增加文本视觉权重。属性面板不显示？若找不到面板，点击菜单：“窗口”->“属性”重新呼出。利用列表整理内容：分类1.列表类型：类型说明标签(Code)编号列表数字顺序(1,2,3...)项目列表图形符号(圆点、方块)2.操作方法：选中多行文字，在属性面板单击图标。制作嵌套列表操作流程：•1.正常建立第一级列表。•2.在子项下方输入内容。3.选中要降级的文字，在属性面板点击“缩进”图标。结构逻辑嵌套列表通过内部再次包含实现。缩进图标本质是向代码添加了或新的列表层级。水平线与特殊符号•1.水平线(HR)：用于划分视觉区域。•2.特殊字符：键盘无法直接输入的符号（如©,®,™,§）。○设置：宽度、高度、对齐方式。○代码显色：○菜单：“插入”->“HTML”->“字符”。任务引领二：名车风采图文页任务挑战：实现更复杂的图文混排，包括Logo、导航菜单、汽车展示图及滚动的品牌标志（Marquee）。操作原子拆解1.创建站点：名车风采

2.4行1列大表格

3.第一行插入嵌套表格（Logo+导航）

4.第三行设置滚动标志步骤：利用嵌套表格实现精准导航•操作步骤：•1.光标定位于4行1列大表格的第一行。•2.菜单：“插入”->“表格”(1行2列)。•3.左单元格插logo.jpg。•4.右单元格依次插入多个导航图片（ppzq.jpg,mczx.jpg等）。为什么要嵌套？大表格负责整体结构，小表格负责局部对齐。这种“盒中盒”的模式可以防止插入多个小图片时把整个网页撑变形。相关知识：网页三剑客图像格式格式优点适用场景JPEG/JPG色彩极其丰富（24位），压缩率高。照片、复杂色彩的背景。GIF支持透明、支持动画。小图标、动态表情、色彩单调的图。PNG无损压缩，支持半透明效果。网页Logo、需要叠加背景的复杂形状。操作：在网页中插入图像•方法1(菜单)：菜单“插入”->“Image”。•方法2(资源面板)：打开“资源”面板(F11)，找到已在站点内的图片，直接“拖拽”到指定位置。图像不显示？通常是由于路径错误。解决方案：永远通过“选择图像源文件”对话框选择文件，不要手动在代码里乱改路径。专家提示：图像与站点的血缘关系核心准则：图像必须身处站点内•如果你插入了一张桌面上的图片，DW会弹出提示：“该文件不在站点内，是否复制？”•此时必须点击“是”，并存入站点的images文件夹。•如果你点“否”，网页引用的是你电脑的绝对路径（如C:\Users\Desktop...），上传到服务器后，其他人访问将看到“红叉”。优化：图文混排的对齐方式•问题：默认情况下，图像底部与文字基线对齐，导致大量空白，效果差。•操作：选中图片->右键->“对齐”->“左对齐”。•结果：文字会自动环绕在图片右侧。调节大小可通过鼠标拖拽图片边框缩放，或在属性面板修改宽(W)和高(H)像素值。超级链接：网页的灵魂超链接（Hyperlink）将孤立的网页有机地联系在一起。链接不仅可以指向HTML页面，还可以指向图片、压缩包、邮件地址等。链接的三种路径：•绝对地址：完整的网址(如)。•文件相对地址：相对于当前HTML所在位置。•根目录相对地址：从站点根目录开始算起。操作：链接到本地/外部网页本地链接：选中文字/图片->属性面板“链接”框点击图标->选择index.html。•外部链接：选中文字->在链接框手动输入地址。避坑指南输入外部链接时，必须加上协议标识http://。如果只输入，浏览器会误以为是本地文件夹。○http://www.lnqg.特殊链接：电子邮件与下载链接•电子邮件链接：•下载链接：○格式：mailto:账号@域名○作用：点击后自动唤起系统默认邮件客户端。○方法：将链接目标指向非网页格式文件（如.rar,.zip,.exe）。○效果：浏览器检测到无法直接打开，即弹出下载窗口。进阶：利用图像热点设置区域链接热点（Hotspot）：在一张大图上划分特定的“作用区域”，每个区域指向不同地址。操作流程：•1.选中图片->属性面板左下角“地图(Map)”。2.选择形状：矩形、圆形或多边形。•3.在图上拖动绘制区域。•4.在弹出的小属性面板输入“链接”。常见应用：世界地图点击各洲跳转•原子化知识：热点属性与目标窗口目标窗口(Target)的四个关键值：替换文本(Alt)当图片加载失败时显示的文字。同时，搜索引擎机器人会抓取Alt文字来理解图片内容，对SEO非常重要。•_blank：在新窗口打开（最常用）。•_self：在当前窗口打开（默认）。•_parent：在父框架打开。•_top：在整个窗口打开。相关知识：设置文件头标签(Head)文件头信息对搜索引擎优化(SEO)至关重要。检索机器人通过主页头标签判断网页用途。•1.说明元标签(Description)：插入网页概括性描述。•2.关键字元标签(Keywords)：定义网页核心搜索词。○代码：○代码：<metaname=″keywords″content=″名车，路虎，兰博基尼。″/><metaname=″keywords″content=″名车，路虎，兰博基尼。″/>进阶：自动刷新与页面特效注：页面转换效果在现代浏览器中支持度有限，主要在IE环境下有效。•1.自动刷新(Refresh)：•2.页面转换效果(RevealTrans)：○应用：变更地址后几秒钟自动跳转到新页。○代码：○进入网页(enter)或离开网页(exit)时产生的过渡特效。<metahttp-equiv=″enter″content=″RevealTrans(Duration=10,Transition=20)″/><metahttp-equiv=″enter″content=″RevealTrans(Duration=10,Transition=20)″/>项目渐近：“我心飞扬”之热门图文本阶段目标：建立二级目录结构，利用表格嵌套实现复杂的“热门图文”栏目排版。核心要点1.建立hot.html网页。

2.嵌套表格应用：父表格控制主布局，子表格处理具体图文列表。

3.设置标题2格式。拓展训练：产品介绍网页实战要求：制作一个电子商务网站常见的产品介绍页，利用表格嵌套实现规律的产品矩阵排列。布局解析在每个单元格内再次插入小表格。子表格设置宽度100%确保自适应单元格大小。回味思考：客观题精选(1)•1.在DW中，要使图像底部与文本基线对齐，应采用什么对齐方式？

答案：A.基线(Baseline)•2.DW执行“文件>保存”时，网页文件常用后缀是？

答案：A.HTML•3.网页中最流行的、压缩率最高、色彩丰富的图像格式是？

答案：D.JPG(JPEG)回味思考：客观题精选(2)•4.在超级链接设置中，表示“在新窗口打开网页”的target值是？

答案：A._blank•5.“属性面板”对话框中修改“页面字体”，其影响范围是？

答案：B.只有当前页面的文本将以该字体显示•6.管理和维护本地站点，需执行哪个菜单命令？

答案：B.“站点>管理站点”思考题深度解