网页设计与网站建设_06网页组成元素选编.ppt

《网页设计与网站建设》;第6章 网页组成元素;;案例导入：设计个人博客网站。该网站实例包含了若干个网页，在网页中输入文本、插入图像、建立超链接等多种网页元素，本实例涉及的知识点：页面属性的设置、文本的修饰、插入图像、插入翻转图像实现图像特效、设置网页超级链接、插入多媒体对象、使用表单收集反馈信息等。;6.1　Dreamweaver CS5 工作界面 ;“菜单”栏 ;6.2 定义本地站点; 6.2.1创建站点　　 在Dreamweaver CS5中可以有效地建立并管理多个站点。 　　在创建站点前，先在本地硬盘上建一个以英文或数字命名的空文件夹，比如在D盘新建了一个文件夹为myweb，并在此文件夹中建立子文件夹images，用于存放图像素材，然后再创建本地站点。 ;方法一：启动Dreamweaver CS5，选择“站点”菜单→“新建站点”命令；方法二：单击“窗口”菜单→“文件”命令??快捷键F8），打开“文件”面板，选择“站点”选项，单击下拉框中的“管理站点”命令，如图所示，再单击“新建”按钮。;弹出“站点设置对象 ”对话框，在对话框左侧有“站点”、“服务器”、“版本控制”和“高级设置”等四选项卡，可以在选项卡之间切换。首先选择“站点”选项卡，如图所示。;　　1）在文本框中，输入一个站点名字用于在Dreamweaver中标识该站点。这个名字可以是任何用户需要的名字（建议不使用汉字命名），此处输入为“myweb”，“本地站点文件夹”这一栏设置为站点根文件夹。 2）点击“高级设置”选项卡出现高级设置界面，设置默认图像文件夹，此处选择D:\myweb\images（?注意：图像文件夹应包含在站点根文件夹中），链接相对于选择“文档”，“Web URL”可不填。; 6.2.2 管理站点 单击“站点”菜单→“管理站点”命令，弹出“管理站点”对话框，进行新建、编辑、删除、复制站点等操作。 下面以修改站点的名称，改变站点的对应的本地根文件夹路径为例进行讲解。 1）　单击“管理站点”对话框中“编辑”按钮，如下图所示。 2）　弹出“站点设置对象myweb”的对话框，单击“站点”选项卡，修改了站点的名称、站点的路径等。 ;6.2.3 创建网页;　方法三：选择“文件”菜单→“新建”命令，弹出“新建文档”对话框，如图所示，打开“空白页”选项卡，在“页面类型”选项组中选择“HTML”，再在“布局”选项组中选择相应的某项，单击“创建”按钮，即可创建网页，默认名称为“Untitled-1”。; 2．保存网页 　　网页在编辑过程或编辑完成后，要及时保存。用户可选择“直接保存”、“另存为”、“保存为模板”等命令。 　　（1）直接保存文件。选择“文件”菜单→“保存”命令，如果是第一次保存，会弹出“另存为”对话框，在“保存在”下拉列表中选择保存文件的位置，在“文件名”文本框中输入保存文件的名称；如果不是第一次保存，则会直接覆盖保存。网页保存的快捷键为Ctrl+S。 　　（2）“另存为”其它文件。选择“文件”菜单→“另存为”命令，弹出“另存为”对话框，将已经保存的文件另存到其他位置，或重新命名保存。 　　（3）保存为模板。选择“文件”菜单→“另存为模板”命令，弹出“另存为模板”对话框，输入模板的名称，单击“保存”将文件保存为模板。; 　　网页制作的第一步是设置页面属性，以例6.1为例，其操作步骤如下： “修改”菜单→“页面属性”命令，或单击“属性”面板中的“页面属性”按钮。弹出“页面属性”对话框： 选择“外观（CSS）”选项卡，设置页面字体、字体大小和颜色、背景颜色和图像、页边距等。 选择“链接”选项卡，设置链接颜色、已访问链接、变换图像链接等。 选择“标题/编码”选项卡，在“标题”框输入文本，中文网页一般设置网页的编码格式为“简体中文（GB2312）”。 选择“跟踪图像”选项卡，单击跟踪图像框右侧的“浏览”按钮，选择图片文件，拖动透明度滑块来设置跟踪图像的透明度。 ;;6.4 文本的修饰;选择、复制、移动文本拷贝HTML，直接将文件的HTML源代码拷贝至剪贴板。 CTRL+Z是撤消,CTRL+Y重做 检查拼写错误：文本菜单→“检查拼写”命令。 查找和替换文字“编辑”菜单→“查找和替换”命令 设置文本属性 选中文本，在“属性”面板进行文本属性的设置,或是使用插入栏→“文本”选项中的某个按钮进行修饰；更多的可选择“格式”菜单→“样式”命令进行修饰。 设置文本属性时，有两种选项，即HTML和CSS样式，两者之间是可以切换的。 ;设置段落 设置段落格式时，在“属性”面板中应选用HTML选项卡，然后才能定义段落格式。 选中文本，“属性”面板中,对段落进行修饰,可设置