网页设计与制作技术第二章ppt课件

.,第二章使用Dreamweaver制作基本网页,基本网页制作,DreamweaverCS3的安装DreamweaverCS3用户界面在网页中使用文本在网页中使用图像在网页中创建超链接在网页中使用多媒体元素,DreamweaverCS3的安装,DreamweaverCS3的用户界面,主要有标题栏、菜单栏、插入栏、文档工具栏、属性面板和浮动面板组等部分组成,回菜单,视图模式,【设计】视图:完全可编辑的可视化表示形式,回菜单,视图模式,【代码】视图:用于编写和编辑HTML、JavaScript服务器语言代码,回菜单,本地站点的创建,在动手制作网页之前，都应该按照先前的网站规划建立一个本地站点，以便对各种资源进行管理。【站点】/【新建站点】命令,回菜单,管理站点,在菜单栏中，选择【站点】/【管理站点】命令，打开【管理站点】对话框,回菜单,DreamweaverCS3中插入文本的方法有两种：1、直接在文档窗口，将鼠标光标定位在需要添加文本的位置输入即可。2、复制其它文字处理程序中的现有文本，然后到网页文档中粘贴即可。同时也可以使用【属性】面板中的栏，像WORD中一样为输入的文本设置粗体和斜体的样式，以及段落对齐方式。,在网页中使用文本,回菜单,列表的使用,列表可以将具有相似特性或某种顺序的文本进行排列，列表常用在列举等类型的文本中，通过列表可以使信息的层次关系更明确,回菜单,列表的HTML代码,有序列表的HTML代码如下：诺基亚6708手机备用手写笔(1支)标准电池(1块)旅行充电器立体声耳机,无序列表的HTML代码如下：录音功能智能语音识别语音命令PC同步功能红外线和USB传输,回菜单,CSS样式格式化文本,用户使用【CSS】样式面板可以创建CSS样式，查看CSS样式属性以及将CSS样式应用于当前文档中,回菜单,在网页中使用图像,在DreamweaverCS3中插入图像的方法主要有直接插入图像和使用占位符插入图像两种。将图像插入网页文档时，为了确保引用的正确性，通常需要将该图像文件保存在当前的站点中。如果图像文件不在当前站点中，DreamweaverCS3会询问是否要将此文件复制到当前站点中。,回菜单,图像占位符,在网页制作时如果还没有找到合适的图像文件时，可先插入图像占位符留一个位置，等确定后再在此位置插入图像。,回菜单,图文混排的对齐方式,图文混排就是指图像和文字在网页中的对齐方式。可以通过图像【属性】面板中的【对齐】下拉列表进行设置。,回菜单,标签属性,回菜单,在网页中创建超链接,路径一般有下面3种。1、绝对路径绝对路径提供完全的路径，主要用于创建外部链接。创建此类链接时目标端点必须是完整的URL地址，如2、相对路径相对路径适用于网站内部链接，它利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所在的服务器地址的影响。书写时省略了绝对地址中的相同部分。3、根路径根路径是以“”开始，接着写文件夹名，如“zsmindex.htm”。根路径只能由服务器来解释。当站点规模非常大，在一个服务器上同时放置几个站点时需用到根目录相对地址。,回菜单,设置文字超链接,可以直接拖拽【属性】面板中的【指向文件】按钮，指向要链接的文件,回菜单,创建图像超链接,同一张图像上创建多个热点区域，然后分别为这些区域设置链接的目标端点。客户通过单击图像中的不同区域，从而链接到不同的页面和网址。,回菜单,超链接标记属性,链接在网页中的标记其实很简单，只有一个即标记。被标签括起来的部分就充当超级链接的载体，可以是图片也可以是文字。标签相关属性如下.,回菜单,超链接属性的设置,利用CSS层叠样式可以使网页中的超级链接具有更丰富的色彩，更加个性化。a:link：超链接还没被访问时的状态。a:visited：超链接被访问后的状态。a:hover：鼠标移动到的超级链接文本上的状态。a:active：超级链接处于活动状态。,回菜单,制作多媒体动态网页,添加音乐添加Flash动画网页中插入视频其它网页动态特效,回菜单,添加背景音乐,1、选择“插入记录”/“标签”命令，打开【标签选择器】对话框。2、选择“HTML标签”/“页元素”，在右边窗口中选中“bgsond”元素3、单击【插入】打开【标签编辑器】对话框,插入Flash动画,单击【常用】插入栏中的媒体按钮，在弹出的下拉列表菜单中选择Flash。接着在打开【选择文件】对话框中选择要插入的swf文件,滚动字幕效果的公告栏,Marquee的功能可使文字或图片产生移效果。Marquee有几个重要属性。Behavior滚动方式：scroll轮回滚动；altemate滚动一次Direction移动方向