DreamWeaver-cs6学习笔记第10课处理导航汇总
- 格式:doc
- 大小:1.38 MB
- 文档页数:8
Dreamweaver学习总结(1-6章)首页一般命名为index基础知识认识网页的组成元素导航栏:一般在左部或顶部。
表单:输入信息搜索/点击提交。
制作软件的流程网页三剑客:dreamweaver、flash、fireworks。
用户界面设置网页外观属性网页的标题:网页文字默认样式:文字字体(在编辑字体里可以添加字体)、大小、颜色,页面背景颜色、背景图片,边距等。
站点创建站点:《我的足球网》:1、在D盘下建一个文件夹jcww2、站点…新建站点3设置默认图片文件夹.在jcww下新建一个文件夹用来保存图片,明明一定要用英文eg:images点文件…管理站点…编辑…高级设置以后向网页中添加图片时,添加其他文件夹里的图片也会自动复制到images中。
4.管理站点:在站点下可以新建文件夹对信息进行分类,eg:创建一个news文件夹。
制作网页的基本操作添加文本:1.可以直接输入,2.导入:文件…导入即可以导入文档3.复制…粘贴4.添加特殊文本:一、水平线:插入…Html…水平线(点击可以在属性栏设置长宽高等,线的颜色在代码中修改,选中水平线…代码…在这行后加个空格…根据出来的提示选择color…会出现一个调试版选择一个颜色…保存预览即可看见)二、自动更新时间:插入…日期三、怎么连续输入空格:1.插入…HTML…特殊字符…不换行的空格2.Ctrl+Shift+Space3.设置首选参数,允许连续空格(编辑…首选参数…常规…允许连续多个空格)四、添加版权声明符号:插入…Html…特殊字符…版权(添加其他字符也是这样做)编辑文本一、编辑…查找和替换二、Ctrl+Z撤销文本样式设置文本段落设置:项目列表按钮列表项目中可以更改样式编号列表按钮列表项目中可以更改样式缩进:选中文本…HTMl样式…缩进图标左缩又缩段落样式:左对齐右对齐等,CSS样式…使用HTML段落样式:Html中可以设置标题效果(预设置好的)同样是在页面属性中设置。
第2章Dreamweaver CS6基本操作本章重点:本章主要介绍创建站点、管理站点、设置网页的文本以及设置网页的超级链接。
学习目的:初步认识Dreamweaver CS6,为深入了解该软件做好基础。
参考时间:90分钟主要知识学习时间2.1 Dreamweaver CS6的工作界面20分钟2.2 创建站点10分钟2.3 管理站点内容10分钟2.4 网页文件的基本操作10分钟2.5 设置网页文本10分钟2.6 为网页添加图像10分钟2.7 设置超级链接10分钟2.8 插入Flash10分钟在该下拉菜单中包括了“新建”、“打开”、“关闭”、“保存”和“导入”等常用命在该下拉菜单中包括了“拷贝”、“粘贴”、“全选”、“查找和替换”等用于基本编辑在该下拉菜单中包括了设置文件的各种视图命令,如“代码”视图和“设计”视图等,还用于将各种网页元素插入到当前文件中,包括“图像”、“媒体”和“表格”等。
Dreamweaver CS6的工作界面菜单栏“插入”下拉菜单“文件”下拉菜单“编辑”下拉菜单“查看”下拉菜单修改:为 AP Div”等。
格式:命令:站点:有面板、检查器和窗口的访问。
的访问。
“窗口”下拉菜单“代码”按钮:单击该按钮,仅在文件窗口中显示和修改HTML源代码。
“拆分”按钮:单击该按钮,可在文件窗口中同时显示HTML源代码和页面的设计效果。
“设计”按钮:单击该按钮,仅在文件窗口中显示网页的设计效果。
“在浏览器中预览/调试”按钮单击该按钮,在弹出的下拉菜单中选择一种浏览器,用于预览和调试网页。
提示:在下拉菜单中选择“编辑浏览器列表”命令,弹出“首选参数”对话框,在该对话框中可以设置主浏览器和次浏览器。
“文件管理”按钮:单击该按钮,在弹出的下拉菜单中包括“消除只读属性”、“获取”、“上传”和“设计备注”等命令。
“检查浏览器兼容性”按钮:钮,在弹出的下拉菜单中包括“检查浏览器兼容“标题”文本框:标题。
状态区位于文件窗口的底部,提供与用户正在创建的文件有关的其他信息。
第10课 处理导航1、超链接基础知识:①超链接(或链接)是对Internet 上或者你自己的计算机内的可用资源的引用。
超链接创建通过HTML 或者你使用的程序设计语言指定的交互式行为,并通过浏览器或者其他应用程序启用。
HTML 超链接由锚记元素<a>及一个或多个属性组成如图示: ②内部超链接是把用户带到相同文档、相同文件夹或硬盘驱动器中存储的另一个文档的超链接,而外部超链接是把用户带到硬盘驱动器、Web 站点或Web 主机外面的文档资源。
都是通过<a>锚记元素嵌入在HTML 中,这个元素指定超链接的目的地的地址或目标,并且可以使用几个属性指定它的工作方式。
③相对超链接就是引用相对于当前文档存储的目标,往往包括资源名称,也许还包括存储它的文件夹比如logo.jpg 或images/logo.jpg 。
绝对超链接引用绝对路径的资源,常用于引用站点外面的资源,包括目标完整URL ,如/index.jspa ,它可以把用户指引到特定的文件或者只是站点内的某个文件夹。
相对链接书写起来更快、更容易,但是如果文档保存在Web 站点中的不同文件夹中或者不同位置,它们可能不会工作。
绝对链接则没有此限制,但文档或文件夹或重命名时则会失败。
那么,为站点内的资源使用相对链接,为站点外的资源使用绝对链接。
2、创建内部超链接:①在“链接”框中输入文档名进行链接:打开文档,选取要添加链接的文本如Home (如是从模板创建的文档,此文本不是可编辑区域而不能选取,则需要打开模板选取要添加链接的文本如Home 进行设置后更新)或图像,在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”,将此符号换成“../index.html ”回车则可。
但是还没有主页;②在“链接”框后浏览窗中选择文档名进行链接:打开文档,选取要添加链接的文本如Home (如是从模板创建的文档,此文本不是可编辑区域而不能选取,则需要打开模板选取要添加链接的文本如Home 进行设置后更新)或图像,在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”,点此框后的“浏览文件图标”,从站点根文件夹中选择文件,确保“相对于”框中设置为“文档”,确定则可,则“#”变成文件名了。
第10课 处理导航1、超链接基础知识:①超链接(或链接)是对Internet 上或者你自己的计算机内的可用资源的引用。
超链接创建通过HTML 或者你使用的程序设计语言指定的交互式行为,并通过浏览器或者其他应用程序启用。
HTML 超链接由锚记元素<a>及一个或多个属性组成如图示: ②内部超链接是把用户带到相同文档、相同文件夹或硬盘驱动器中存储的另一个文档的超链接,而外部超链接是把用户带到硬盘驱动器、Web 站点或Web 主机外面的文档资源。
都是通过<a>锚记元素嵌入在HTML 中,这个元素指定超链接的目的地的地址或目标,并且可以使用几个属性指定它的工作方式。
③相对超链接就是引用相对于当前文档存储的目标,往往包括资源名称,也许还包括存储它的文件夹比如logo.jpg 或images/logo.jpg 。
绝对超链接引用绝对路径的资源,常用于引用站点外面的资源,包括目标完整URL ,如/index.jspa ,它可以把用户指引到特定的文件或者只是站点内的某个文件夹。
相对链接书写起来更快、更容易,但是如果文档保存在Web 站点中的不同文件夹中或者不同位置,它们可能不会工作。
绝对链接则没有此限制,但文档或文件夹或重命名时则会失败。
那么,为站点内的资源使用相对链接,为站点外的资源使用绝对链接。
2、创建内部超链接:①在“链接”框中输入文档名进行链接:打开文档,选取要添加链接的文本如Home (如是从模板创建的文档,此文本不是可编辑区域而不能选取,则需要打开模板选取要添加链接的文本如Home 进行设置后更新)或图像,在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”,将此符号换成“../index.html ”回车则可。
但是还没有主页;②在“链接”框后浏览窗中选择文档名进行链接:打开文档,选取要添加链接的文本如Home (如是从模板创建的文档,此文本不是可编辑区域而不能选取,则需要打开模板选取要添加链接的文本如Home 进行设置后更新)或图像,在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”,点此框后的“浏览文件图标”,从站点根文件夹中选择文件,确保“相对于”框中设置为“文档”,确定则可,则“#”变成文件名了。
③拖动“链接”框后的指向文件到要链接的文件进行链接:选择要链接的文本(可以从一个字符到整个段落)或图像,打开文件面板,找到要链接的文件,将“属性”检查器中“HTML ”项的指向文件符拖到要链接的文件处则可。
如何要链接的文件还包含在某个文件夹中,则可把“指向文件”图标拖到该文件夹上并且按住它,还可上下移到找到该文件。
④注意:如果是编辑模板则会弹出更新窗,?但是我的会重复弹出更新窗?;?链接的文件要在站点的根目录下才行?。
通常,利用超链接格式化的图像将显示蓝色边框,类似于加蓝色下划线的文本链接。
但是布局中带有的预先定义的CSS 包括一个a img 规则,它把这个默认的边框设置为“无”。
如果在浏览时单击链接要弹出新的页面而不是新页面替换原来页面,则要在在“属性”检查器中“HTML ”项的“目标”框中输入_blank3、创建外部链接:选取要创建链接的文本或图像,在“属性”检查器中“HTML ”项的“链接”框中输入文件的路径及名或者是URL (可从浏览器中搜索复制而来)。
4、建立电子邮件链接:①电子邮件链接不是把你带到另一个页面,而是打开访问者的电子邮件程序。
它可以为访问者创建自动的、预先编写好地址的电子邮件消息,用于接收客户反馈、产品订单或者其他重要的通信。
电子邮件链接的代码稍微不同于正常的超链接,DW 可以为你自动创建正确的代码。
②选取要创建链接的文本(不能是图像),点菜单“插入-电子邮件链接”(也可是“插入”面板的“常用”功能中点)弹出“电子邮件链接”窗,在“文本”框中自动出现选择的文本,在“电子邮件”框中输入电子邮件地址(如412385328@)后点确定则可,保存后在浏览器中预览测试,弹出窗口警告:因为默认邮件客户端没有正确安装,所以无法执行该操作。
③基于客户的功能与服务器端功能:5、把页面元素作为目标:⑴命名锚记:①命名锚记的了解:●这种可叫内部目标链接,它含有两部分是链接本身和目标元素,随便先创建哪个部分都可以,可以在想创建链接的任何地方使用命名锚记。
●输入或选取要链接的文本如Return to Top(或标签选择器),在“链接”框中输入“#top”,通过使用#top,就创建了指向当前页面内的目标的链接。
但这个目标还不存在,DW把目标元素称为命名锚记(提示:在官官相护浏览器中,只需要输入#以启用该功能。
无论何时引用未命名锚记,浏览器都将跳转到页面顶部。
但有些浏览器将完全忽略它们。
因此使用目标元素也很重要)。
●把光标定位在标题元素上,把命名锚记置于页面顶部很重要,否则当浏览器跳转到目标时页面的一部分可能会变得模糊不清,在这种情况下,最佳的解决方案是给模板添加命名锚记,那么无论你想在哪里添加一个返回页面顶部的链接,都能够在整个站点内使用够不够锚记。
②创建命名锚记:打开模板文档,在<div.header>中插入光标(鼠标在该区域单击则可),点菜单“插入-命名锚记”(也可从“插入”面板的“常用”中点“命名锚记”),在弹出的“命名锚记”窗中“锚记名称”框中输入top确定出现锚记图标(其代码为:<a name="top" id="top"></a>),保存更新则可。
③警告:相关的锚记代码应该不会对任何文本内容或页面布局产生任何影响。
不过,在藉此类型的结构中,人们知道会发生一些奇怪的事情,如果你的页面布局由于在一个位置插入锚记代码而受到不行的影响,就尝试在另的位置插入它,也可将原来设置好的Return to Top复制过来则可(因为连同链接也一起复制)。
⑵使用ID属性:①如果要转到的地方附近有一个方便的元素可以给它添加ID属性,就不需要添加额外的代码。
②打开文档,在要创建ID元素的位置插入光标,并选取其标签选择器。
③打开“属性”检查器的“HTML”项中“ID”框的下拉菜单如图示,没有可于表格的ID,将光标插入此框后输入ID名称,在标签选择器栏选定的标签则变为其后带有“#”和ID名(如)。
④注意:可以把ID应用于任何HTML元素,在样式表中根本不必引用它们;在创建ID时,记住它们必须是唯一。
6、插入Spry菜单栏:⑴、了解Spry菜单栏:①完成的页面中的菜单允许直接导航到站点中的特定内容,这些链接被显示为垂直菜单中的子菜单。
尽管当前的菜单没有这种功能,如果你熟悉JavaScript和CSS,也可以自己把它添加到现有代码中。
但是当DW在预先构建的构件中提供了所需的一切时,构件就在浏览器中执行一组特定的功能,通过结合有HTML代码、CSS和JavaScript的程序员(另称为Ajax和Adobe的Spry框架)来支持它们。
②了解Ajax和Spry:⑵、插入并设置Spry菜单栏:①插入Spry菜单栏:打开文本,在要插入菜单的位置单击定位光标,点“插入”面板选“Spry”的“Spry菜单栏”,弹出“Spry菜单栏”窗中“请选择所需的布局”后确定则可见菜单栏如右图,上方有蓝条“MenuBar1”(有的前面还有蓝条“Spry菜单栏”)。
②为菜单外观设置做准备:选择Spry菜单构件上的蓝条(也可单击标签选择器<ul id=”MenuBar1”class=”MenuBarVertical”>或< ul#MenuBar1 .MenuBarVertical>),属性检查器显示的界面如下图。
在自定义菜单栏前,先保存文件,如DW要求复制相关文件,单击“确定”按钮则可。
DW将在站点的根文件夹中插入一个名为“SpryAssets”的文件夹,其中包含用于任何Spry 构件的必要组件。
菜单栏所需的自定义的CSS和JavaScript文件也将被添加到这个文件夹中。
当把文件添加到文件夹中时,DW将自动把Web页面链接到它们。
③在“属性”检查器中修改菜单栏:点击第一列的“项目1”,在“文本”框中选取文本“项目1”并输入菜单文本如“Green News”替换它,并可在“链接”框中创建链接(如选择站点根目录下的news.html,则在链接框中显示“../news.html”,如果直接在链接框中输入“news.html”则不会出现“../”也是可以的。
这是由于此时处理的文件存储在站点的根文件夹中,并且不需要这个路径成分),删除其子项目;将第一列的“项目2”修改,如果没有指向的文件,也可先手动输入;将第一列的“项目3”修改(如Green Events),设置两个子项目(如2010 Events Calendar和2010 Class Schedule)并将其链接设置为对应文件中的ID(如events.html#calendar和events.html#classes);设置完成后测试。
(?我的不成功?)⑶、直接修改Spry菜单:A、在文档窗口中修改菜单项:①将菜单禁用样式变为列表项:光标停在菜单栏的文本处,然后单击菜单栏上的蓝条MenuBar1(或者选择标签选择器“<ulid=’MenuBar1’class=’MenuBarVertical’>”,然后在“属性”检查器点“禁用样式”(则在“设计”视图中看到显示的列表不具有CSS格式化效果)按钮,则菜单由右图左边形式变为右边样式。
显示的列表不具有CSS格式化效果。
注意列表是怎样以不同的方式格式化的(从列表项前的符号可看出),从而使菜单的主项目与与子级项目相关联。
②在文档窗口中直接添加主项目或子项目:(也可在“属性”检查器中可以添加主或子项目)在最后一个菜单项的末尾处插入光标后回车,这个新行被格式化为列表项,输入链接文本(如Green Club),选取它并在“属性”检查器中“HTML”项的“链接”框中输入“#”创建链接点位符。
如在Green Club下创建子项目,则再回车-输入文本如Member Login-选择文本后创建链接点位符-选中文本点“内缩区块”图标。
类似还可创建三级子项目,但是每下一级项目,列表项前的符号也不相同,选中此菜单文本则在标签选择器中可见多一个<ul><li>标签项。
③启用样式(与禁用样式类似):但是在主菜单后面没有显示子菜单图标。
光标停在②中创建的菜单项上时,标签选择器显示“<a href=’#’>”,而前面的则显示“<aclass=’MenuBarItemSubmenu’href=’../events.html’>”。