Creating 万博体育官网网址 Web Content in Dreamweaver

介绍

Dreamweaver是一个流行的web开发的创作工具Adobe通常用作WYSISYG(你所见即所得)编辑器,这意味着它允许人们创建web页面不花尽可能多的时间标记或代码本教程概述了如何在Dreamweaver中创建万维网络内容。

注意

除非指定,Dreamweaver CC 2014或更新的指令。

图像替代文本

每一个< img >元素应该有替代文本介绍了内容或函数图像的屏幕阅读器用户要提供图像替代文本,请选择图像并在中输入替代文本Alt键领域,位于属性面板底部的页面。

截图

如果属性面板不可见,选择窗口>属性

重要

在Dreamweaver中插入图像时,会为其提供null替代文本(ALT = “”) 默认情况下如果图像是装饰性的,或者如果附近的文本中提供了图像的替代文本,则可以将此字段留空否则,请确保添加适当的替代文本。

图像Dreamweaver的旧版本

在旧版本(CS6和更早版本)中,当图像插入文档时,Dreamweaver会提示用户输入替代文本与字段对话框替代文字详细描述

截图

适当的和等效替代文本类型替代文字区域如果图像未传达内容且未提供页面功能,请选择<空>替代文字菜单。

截图显示空的替代文本被选中

还包括一个选项来添加一个所示的对话框长描述(LONGDESC复杂图像的img标签的属性我们不推荐使用LONGDESC它属性不支持和已被删除从HTML5但是,如果您仍然选择使用它,请在中输入一个URL详细描述领域记住,图像仍然需要描述性的替代文本如果没有被选中详细描述那么LONGDESC属性不是添加到图像中。

表格标签

大多数类型的表单元素(文本框,文本区域,复选框,单选按钮等)都需要描述性的标签向页面添加表单控件时,Dreamweaver将自动添加一个<标签>具有通用文本的元素(例如,“文本字段”)更新标签文本,以便它是独一无二的,描述性的。

注意

如果控制在插入代码框架,只有表单控件将会出现,而不是标签。

如果表单控制已经应该是标签的文本描述,选择标签文本和选择插入>形式>标签然后去属性标签面板,选择对于下拉菜单,然后选择与之匹配的值ID要标记的表单控件。

截图扩展菜单
重要

<标签>element不能用于为单个表单控件提供多个标签,也不能将单个标签与多个表单控件相关联如果您的表单控件有多个标签(反之亦然),请参阅我们的文章高级表格标签

如果标签文本与表单控件相邻,请选择文本和表单控件,然后插入标签Dreamweaver将包装一个<标签>标签的文本和表单不添加一个属性包装标签。

在旧版本的Dreamweaver中表单标签

当添加表单控件在Dreamweaver的旧版本,一个对话框将提示您添加一个表单标签:

标签对话框截图的形式

如果需要,输入一个id值在第一个字段(一个通用id将被添加如果这是留空)请记住,此值必须是一个单词(无空格)且页面上唯一其次,适当的标签形式输入标签对话框然后,您可以选择标签样式我们建议您离开的默认值标签上商标使用”的属性选择该对话框还提供了指定选项访问密钥标签索引这是典型的滥用和应留空。

重要

老版本的Dreamweaver错误地提供标签将按钮和图像输入元素插入网页时的对话框这些表单元素都不应该给出标签A screen reader will read the value attribute of the button input element and will read the alt attribute of the image input element, both of which can be provided using the属性面板。

自定义字段

<自定义字段><图例>elements提供了一种向一组表单控件添加更高级别标签的机制该<自定义字段>整个分组和标识<图例>确定分组的描述性文本这是通常用于组单选按钮和复选框加上<自定义字段><图例>Dreamweaver、突出的元素和选择插入>形式>自定义字段所选内容将包含在<自定义字段>然后会出现一个对话框,您可以在其中输入传说

截图

数据表

涉及三个原则数据表屏幕阅读器用户:

  1. 指定表头(<TH>).
  2. 分配一个范围行和/或列标题。
  3. 如果合适,给表a <标题>。

当插入一个表,一个对话框下选项选择表是否没有标题(没有一个),行标题(),列标题(最佳),或行和列标题().

表格对话框的屏幕截图可以选择更改表大小,选择标题结构,添加标题和添加摘要

Dreamweaver将指定具有正确范围的表头(例如,< th范围=“上校”>).

该对话框还包含表格的字段字幕,表示表格的标题或说明虽然并非所有数据表都需要标题,但它们通常很有帮助一个表总结通常应该留空 -总结属性是不支持的,而不是html 5规范的一部分。

注意
  • 如果表是用于布局,选择没有一个在标题选项下,不添加字幕
  • 如果您通过选择表明您的表具有行标题和列标题,然后Dreamweaver将左上的细胞一个列标题是否这个细胞行标题,标题,更新它匹配你的数据表的结构。

将scope属性添加到文档中已存在的表的唯一方法是手动添加它们代码视图对于复杂的表跨行或列的标题和范围是不够的,你必须手动添加标题和ID属性如果可能的话,简化你的表ID是可以避免的。

标题

合乎逻辑的标题结构大大提高了网页的可访问性标题屏幕阅读器用户经常使用的页面导航和定位要向页面添加标题,请选择插入>标题,然后选择所需的水平改变文本标题,或改变航向的水平,选择文本并选择所需的标题级别的格式菜单的属性面板。

扩展格式对话框选项包括:无,段落,标题级别1-6和预格式化。

页面标题

简洁,独特,描述性的页面<TITLE>对于可访问性非常重要许多用户,特别是屏幕阅读器用户依赖于页面标题识别页面上的内容创建新文档时,会出现一个对话框在页面中输入页面标题标题字段。

截图

如果你不添加一个<TITLE>,或者如果您使用的是较旧版本的Dreamweaver,则会为该页面提供通用<TITLE>“无题文件”你可以改变的文档标题在文档的领域属性面板。

截图

列表和强调文本

Dreamweaver包括选项来创建无序/项目符号列表(<UL>),有序/编号清单(< ol >)您还可以指定,强调文本(<强>大胆的和< em >斜体)这些变化可以使属性面板
(B,I,项目符号列表和编号列表图标的屏幕截图).

HTML5 Sectioning Elements

Dreamweaver HTML5允许您创建以下章节元素(在插入菜单):导航(<导航>),主要在旁边文章部分,和页脚就像ARIA地标,这些元素识别可以帮助屏幕阅读器用户定向和导航页面的页面区域。