电子商务网站建设与网页设计（微课版）4

使用Dreamweaver添加网页元素CHAPTERFOURDreamweaver是Adobe公司推出的一款网页编辑软件，用于对网站的设计、编辑和开发。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，并拥有可视化编辑界面，所以在电子商务网站的设计与制作中也被广泛应用。本书将以DreamweaverCS6版本为操作平台进行学习。本项目主要学习如何在网站中添加文本、表格、图像和Flash等网页基本元素。能够对网页中的文字进行编辑，在网页中插入图像并美化。能够将图片及Flash动画插入到网页中，并进行相应的编辑操作。学习目标Contents目录认识DreamweaverCS6工作界面1添加网页基本元素——文本和图像2添加网页基本元素——列表3添加网页基本元素——表格4添加网页基本元素——超链接5一、认识DreamweaverCS6工作界面文档窗口面板组“属性”面板文档工具栏菜单栏一、认识DreamweaverCS6工作界面菜单栏文档窗口“属性”面板面板组工具栏一、认识DreamweaverCS6工作界面1菜单栏文件：用于查看当前文档或对当前文档进行操作。编辑：用于对文档的各种基本编辑操作。查看：用于设置文档的各种视图，还可显示或隐藏不同类型的页面元素和工具栏。插入：提供了工具栏的扩充选项，用于将对象插入到当前文档中。修改：用于更改选定页面元素或项的属性。使用此菜单可以编辑标签属性，更改表格元素，为库和模板执行不同的操作。一、认识DreamweaverCS6工作界面2工具栏工具栏有两种显示方式，一种是以菜单方式显示，另一种是以面板方式显示。一、认识DreamweaverCS6工作界面3文档窗口启动DreamweaverCS6，即可打开其起始页。单击起始页中“新建”栏中的HTML选项，可以新建HTML文档，并进入文档窗口。一、认识DreamweaverCS6工作界面3文档窗口01“代码”视图02“拆分”视图03“设计”视图04实时视图一、认识DreamweaverCS6工作界面4“属性”面板“属性”面板位于状态栏的下方，显示当前处于选中状态的对象的各种属性及参数。单击“窗口”|“属性”命令或按【Ctrl+F3】组合键，可以打开或关闭“属性”面板。一、认识DreamweaverCS6工作界面5面板组Contents目录认识DreamweaverCS6工作界面1添加网页基本元素——文本和图像2添加网页基本元素——列表3添加网页基本元素——表格4添加网页基本元素——超链接5二、添加网页基本元素——文本和图像添加文本添加图像二、添加网页基本元素——文本和图像1添加文本要完成某一内容的描述，至少要用到大标题、小标题和段落文字等元素。在网页中添加文本也要遵循这一原则。二、添加网页基本元素——文本和图像1添加文本二、添加网页基本元素——文本和图像2添加图像Contents目录认识DreamweaverCS6工作界面1添加网页基本元素——文本和图像2添加网页基本元素——列表3添加网页基本元素——表格4添加网页基本元素——超链接5三、添加网页基本元素——列表添加无序列表添加自定义列表添加有序列表三、添加网页基本元素——列表1添加无序列表三、添加网页基本元素——列表2添加有序列表三、添加网页基本元素——列表3添加自定义列表Contents目录认识DreamweaverCS6工作界面1添加网页基本元素——文本和图像2添加网页基本元素——列表3添加网页基本元素——表格4添加网页基本元素——超链接5四、添加网页基本元素——表格Contents目录认识DreamweaverCS6工作界面1添加网页基本元素——文本和图像2添加网页基本元素——列表3添加网页基本元素——表格4添加网页基本元素——超链接5五、添加网页基本元素——超链接认识路径添加锚记链接添加文档链接添加空链接五、添加网页基本元素——超链接1认识路径相对路径用于描述链接源与链接目标之间的相对位置，在网站内部各页面的链接中使用相对路径最合适。相对路径B绝对路径提供了链接目标文档完整的URL地址，是包含服务器协议的完全路径，如/index.html。绝对路径A五、添加网页基本元素——超链接2添加文档链接五、添加网页基本元素——超链接3添加锚记链接五、添加网页基本元素——超链接4添加空链接项目习题打开“素材文件\项目四\4-11.html”，给网页左侧的图片“京东金融”添加超链接，链接网址为。0102在