DreamweaverCS创建基本文本网

TRAININGCOURSEDreamweaverCS创建基本文本网页从入门到实战的完整教学指南DW课程系列网页设计基础技术培训代码编辑可视化设计文本网页实战教学CSVERSIONCONTENTS课程目录CourseOverview·五章系统学习01软件入门与环境配置认识DreamweaverCS工作界面与核心面板·定义本地站点与文件管理规范02文本编辑基础操作输入文本与段落格式化技巧·标题层级与特殊字符插入方法03样式美化与CSS应用使用属性检查器设置文本格式·CSS样式面板创建与应用类样式04列表结构与超链接有序无序列表创建与嵌套·内部锚点与外部链接设置05综合实战与发布完整文本网页制作流程演练·页面验证与本地预览测试CHAPTER01软件入门与环境配置熟悉DreamweaverCS工作区与站点管理01SECTION工作界面核心区域解析WorkspaceCoreAreasBreakdown本页深入讲解工作界面核心区域解析的核心要点。文档窗口主要编辑区域，提供代码视图、设计视图与拆分视图三种模式切换，满足不同阶段编辑需求。插入面板按类别组织常用对象按钮，包括常用、布局、表单、文本等分类，点击即可快速插入对应HTML元素。属性检查器随选中对象动态变化，选中文本时显示字体、大小、颜色、对齐等格式选项，是文本编辑核心控制面板。文件面板以树状结构展示站点所有文件，支持拖拽移动、重命名与右键快捷操作，是站点资源管理中心枢纽。DreamweaverCS工作界面总览T技术培训TRAININGSITECONFIGURATION定义本地站点的重要性Dreamweaver本页深入讲解定义本地站点的重要性的核心要点。项目基础映射站点定义是Dreamweaver项目管理的基础，它建立本地根文件夹与远程服务器的映射关系，确保链接路径正确解析。01路径失效风险未定义站点直接编辑会导致相对路径失效、图片无法显示、CSS文件加载失败等问题，严重影响开发效率与调试体验。02快速配置向导通过站点新建站点向导可快速配置站点名称、本地根文件夹、默认图像文件夹等关键参数，建议每个项目独立建站点。03文件同步管理站点面板自动跟踪文件变更并提示同步，配合版本控制习惯可避免文件覆盖丢失，养成规范化项目管理意识。04TRAININGHTMLDOCUMENT新建HTML文档规范本页深入讲解新建HTML文档规范的核心要点。文档类型选择通过文件新建对话框选择HTML文档类型，推荐默认HTML5标准以获得最佳语义化支持与浏览器兼容性。标题填写规范文档标题应在创建时即填写有意义的名称，该标题会写入head标签并在浏览器标签页显示，影响SEO与用户体验。文件命名规则保存文件时使用英文小写字母加连字符命名如about-us.html，避免中文空格与特殊字符导致服务器解析错误。首页入口命名首页文件统一命名为index.html或index.htm，这是Web服务器默认识别的入口文件名，其他页面可按内容语义命名。FILEMANAGEMENT站点架构基础文件管理与目录结构本页深入讲解文件管理与目录结构的核心要点。01目录规划建议在站点根目录下建立images、css、js三个子文件夹分别存放图片样式表与脚本文件，保持项目结构清晰可维护。02资源引用所有资源文件应放在站点根文件夹内，外部引用文件需先复制到站点目录再链接，避免部署时出现断链问题。03批量操作文件面板支持批量重命名移动与删除操作，修改文件名后Dreamweaver会自动更新所有引用该文件的链接路径。04清理维护定期清理未使用的孤立文件可减少站点体积，通过站点检查链接功能可快速定位断链与冗余资源提升项目整洁度。CHAPTER02文本编辑基础操作掌握文本输入、段落处理与标题层级设置SectionDividerTRAININGTEXTINPUT在设计视图中输入文本本页深入讲解在设计视图中输入文本的核心要点。所见即所得编辑设计视图提供类似Word的所见即所得编辑体验，直接键入文字即可生成对应HTML段落标签，无需手动编写代码。回车与换行的区别回车键产生新段落p标签，Shift加回车产生换行br标签，两者视觉效果不同但HTML结构差异显著需注意区分。空格输入技巧全角状态下输入空格可产生可见空白，半角空格在HTML中会被合并为一个，如需多个连续空格请使用全角或实体字符。粘贴文本规范粘贴外部文本时建议使用选择性粘贴纯文本去除原始格式，避免带入不兼容的样式代码污染当前文档结构。T靛蓝瓷技术培训TRAINING排版基础段落对齐与缩进控制本页深入讲解段落对齐与缩进控制的核心要点。对齐·缩进·间距段落对齐方式：属性检查器提供左对齐、居中、右对齐与两端对齐四种段落对齐方式，对应CSStext-align属性的四个常用值。文本缩进设置：文本缩进可通过属性检查器的左缩进与右缩进数值框精确设置，单位为像素或百分比，适合制作引用块与诗文体。首行缩进规范：首行缩进在中文排版中极为常见，可通过CSStext-indent:2em实现两个汉字宽度的缩进，比手动敲空格更规范可靠。段落间距控制：段落间距由margin与padding控制，Dreamweaver页面属性对话框可全局设置body默认边距，避免每段单独调整的低效操作。INDIGOPORCELAINTRAINING11/20TRAININGHTMLFUNDAMENTALS特殊字符与HTML实体CharacterEntities本页深入讲解特殊字符与HTML实体的核心要点。01插入特殊符号键盘上没有的符号如版权号、注册商标、欧元等需通过HTML实体插入，Dreamweaver提供插入菜单下的特殊字符选项。02语法字符转义小于号、大于号和&号在HTML中有语法含义，若要在页面显示这些字符本身必须使用对应实体转义，防止解析错误。03不换行空格不换行空格常用于防止专有名词被拆行，如"Windows10"确保两者始终在同一行显示，提升阅读连贯性与专业感。04双视图操作代码视图中可直接输入实体编码，设计视图中则通过插入面板选择，两种方式等效但适用场景不同，熟练者可灵活切换。T技术培训SKILLSTEXTEDITING文本查找与替换技巧Search&ReplaceMastery本页深入讲解文本查找与替换技巧的核心要点。基础查找替换Ctrl+F打开查找替换对话框，支持在当前文档或整个站点范围内搜索文本字符串，是批量修正错别字的高效工具。正则表达式匹配启用正则表达式选项可进行模式匹配替换，如将所有br替换为p标签，适合文档结构重构与格式统一化处理。安全预览策略替换前建议先用"查找全部"预览匹配结果数量与位置，确认无误后再执行替换，避免误改重要内容造成不可逆损失。HTML标签批量修改查找替换同样适用于HTML标签与属性值的批量修改，如统一所有外链target属性为新窗口，提升操作效率与一致性。H靛蓝瓷技术培训TRAININGWORKFLOW撤销重做与历史记录本页深入讲解撤销重做与历史记录的核心要点。01撤销与重做操作Ctrl+Z撤销上一步操作，Ctrl+Y重做已撤销操作。Dreamweaver支持多级撤销栈，可回退数十步编辑历史而不丢失数据。02历史记录面板历史记录面板以时间线形式列出所有操作步骤，点击任意条目可跳转到该状态，比反复撤销更精准地恢复到特定节点。03备份与版本管理重大修改前建议手动保存副本或使用另存为创建备份版本，即使撤销栈耗尽也能从备份文件恢复工作内容，保障安全。04记录机制理解复制粘贴、格式应用、标签修改等操作均被记录，但纯光标移动与视图切换不计入历史，理解此机制可更高效利用撤销功能。CHAPTER03样式美化与CSS应用从内联格式到外部样式表的进阶排版CSSSTYLING创建类样式与ID样式本页深入讲解创建类样式与ID样式的核心要点。类样式（Class）以点号.开头，可应用于任意多个元素，是最常用的可复用样式单元，适合按钮、提示框等重复组件的统一外观定义。ID样式以井号#开头，理论上每页唯一，常用于页面主要结构区域的定位与样式绑定，特异性高于类样式，优先级更强。新建CSS规则对话框可选择选择器类型、定义位置与名称，确认后自动生成选择器框架供填写属性，简化创建流程。语义化命名命名应语义化而非表现化——用error而非red-text，当设计变更时类名仍有意义，维护成本远低于纯视觉描述命名。H技术培训TRAININGCSSSTYLESHEETMANAGEMENT外部样式表链接与管理本页深入讲解外部样式表链接与管理的核心要点。核心机制与实践要点样式表附加方式通过CSS样式面板附加样式表，将外部CSS文件链接到当前文档，link标签自动插入head区域，实现样式与结构彻底分离。共享与全局维护外部样式表可被多个页面共享，修改一处即全站生效，是大型网站保持视觉统一与降低维护成本的核心机制。Link与Import选择附加时可选择链接或导入两种方式，link为推荐标准做法，import在某些旧浏览器中有性能与加载顺序问题，需谨慎使用。加载顺序与优先级样式表加载顺序影响优先级，后加载的样式覆盖先加载的同名规则，合理规划文件拆分与引入顺序可避免意外覆盖。INDIGOPORCELAINTRAINING20TTECHTRAININGCSSFUNDAMENTALSINLINESTYLES内联样式的使用与限制本页深入讲解内联样式的使用与限制的核心要点。STYLEATTRIBUTE—PRIORITY&MAINTAINABILITY内联样式的生成在属性检查器中直接设置的格式若未关联CSS规则，Dreamweaver会生成style属性的内联样式，优先级最高但难以维护。功能局限性内联样式无法被外部样式表覆盖，也不支持伪类与媒体查询，仅适合临时测试或邮件模板等特殊场景，不应作为常规手段。迁移策略已有内联样式的元素可通过CSS样式面板导出功能提取为类规则，再删除内联代码，逐步将遗留项目迁移到外部样式表。团队协作规范团队协作与长期项目中应严格禁止内联样式，通过代码审查与Lint工具强制执行样式外置规范，保障代码库整洁可维护。TRAINING页面属性全局样式设置本页深入讲解页面属性全局样式设置的核心要点。全局参数重置修改菜单下的页面属性对话框可设置body默认字体、背景色、链接颜色、边距等全局参数，相当于快速编写基础CSS重置规则。字体与链接定义外观分类下设置默认字体族与大小，确保未指定样式的文本有统一基准；链接分类定义四态颜色，避免浏览器默认蓝紫配色。标题层级与边距标题分类可预设h1至h6的字体大小与颜色，建立页面标题层级体系；边距分类将bodymargin设为零，消除浏览器默认空白。样式输出管理页面属性生成的样式写入内部style标签或关联的外部文件，取决于CSS样式面板当前配置；建议统一输出到外部样式表便于管理。CHAPTER04列表结构与超链接组织信息层次与构建页面导航网络23TRAINING无序列表ul的创建与样式本页深入讲解无序列表ul的创建与样式的核心要点。核心知识点·四大模块01快速生成结构选中多行文本后点击属性检查器的无序列表按钮，Dreamweaver自动包裹ul和li标签，每行转为一个列表项，快速生成结构。02自定义项目符号默认项目符号为实心圆点，可通过CSSlist-style-type改为空心圆、方块或自定义图片，适配不同设计风格需求，增强视觉表现。03多层次嵌套结构列表项内可嵌套段落、链接甚至其他列表，形成多层次信息结构，适合功能特性罗列、步骤说明等场景的内容组织与呈现。04符号位置控制list-style-position控制符号位于内容框内侧还是外侧：inside时文本换行与符号对齐，outside时符号悬挂于文本左侧更整齐。CODEHTMLLISTS有序列表ol与编号控制本页深入讲解有序列表ol与编号控制的核心要点。01基础语义与自动编号olli有序列表用ol和li标签表达有先后顺序的信息，如操作步骤、排行榜、时间线等，浏览器自动渲染递增数字编号，无需手动标注。02type属性切换编号格式typetype属性可切换编号格式：阿拉伯数字为默认，大小写字母与罗马数字满足不同排版传统需求，适应多样化文档风格。03start与reversed控制startreversedstart属性指定起始编号值，如从第五步开始则设为5；reversed布尔属性使编号倒序递减，适合倒计时或优先级排序场景。04CSS自定义计数器counter-resetcounter-incrementCSScounter-reset与counter-increment可实现更复杂的自定义编号体系，如多级章节编号，超越原生ol属性的表达能力。TRAINING列表嵌套与缩进调整本页深入讲解列表嵌套与缩进调整的核心要点。缩进操作在列表项末尾按Tab键或点击增加缩进按钮可将后续内容降级为子列表；Shift+Tab或减少缩进则提升层级回到父级。HTML结构嵌套列表的结构是li内部再包含ul或ol，子列表必须完整位于某个li标签内，不可平级放置在闭合标签之后。样式区分不同层级可用不同项目符号或编号格式区分，如外层用数字、内层用字母，通过CSS针对嵌套深度设置差异化样式，增强可读性。深度控制过深嵌套（超过三层）会降低可读性，应考虑拆分页面或使用手风琴等交互组件替代，保持信息层次清晰不过载，提升用户体验。HYPERLINKTRAINING超链接创建与目标设置LinkCreation&TargetSettings本页深入讲解超链接创建与目标设置的核心要点。创建链接选中文本或图片后在属性检查器Link框输入URL即可创建链接，支持相对路径、绝对路径与协议前缀省略等多种写法灵活适配。target属性target属性控制链接打开方式：self当前窗口为默认、blank新标签页、parent父框架、top顶层窗口，按需选择避免误跳转干扰用户。拖拽建链指向文件图标可拖拽到文件面板中的文档或设计视图中的锚点快速建立链接，比手动输入路径更准确且不易拼写错误。title属性title属性为链接提供额外描述文本，鼠标悬停时显示提示，对屏幕阅读器用户理解链接目的地至关重要，不应留空或重复链接文字。TRAININGNAVIGATION锚点链接与页内导航AnchorLinks&InNavigation本页深入讲解锚点链接与页内导航的核心要点。01快速跳转锚点链接实现同一页面内的快速跳转，常用于长文章目录、FAQ折叠、返回顶部等场景，提升用户浏览效率与整体体验。02ID标识设定在目标位置选中元素后，于属性检查器ID字段填写唯一标识符，该ID即为锚点名称，无需额外插入命名锚点标签，符合现代标准。03Href配置链接href填写井号加ID名即可指向该锚点，点击后页面平滑滚动至目标位置，现代浏览器原生支持此行为，无需额外脚本。04标准兼容旧版Dreamweaver使用name属性命名锚点，HTML5已废弃该属性，改用全局id属性，新项目应统一使用id方案保证标准兼容性。Chapter05综合实战与发布整合所学技能完成完整文本网页项目PRACTICEHANDS-ONLAB实战制作个人简介网页本页深入讲解实战制作个人简介网页的核心要点。01搭建HTML骨架新建index.html并定义站点，在h1中输入姓名作为页面主标题，下方用p标签撰写简短自我介绍段落，设置合适字号与行高。02划分内容章节用h2划分教育背景、工作经历、技能特长三个章节，每个章节下用无序列表罗列具体条目，保持信息层次清晰易读便于浏览。03添加交互链接为联系方式添加mailto邮件链接与tel电话链接，社交媒体账号用外部链接并设target为blank，在新标签