S8网站制作资料课件

Dreamweaver网站制作6学时学时界面介绍l启动启动Dreamweaverl新建一个空新建一个空HTML文档文档l界面：界面：四个重要面板：四个重要面板：l插入面板插入面板lCSS面板面板l资源面板资源面板l属性面板属性面板F4:快速隐藏快速隐藏/显示全部面显示全部面板板历史记录历史记录窗口菜单的窗口菜单的“工作区布局工作区布局”l多种视图：多种视图：设计视图设计视图代码视图代码视图拆分视图拆分视图实时视图实时视图实时代码实时代码构建站点文件夹l新建站点文件夹新建站点文件夹mywebl在在myweb下面建立新文件夹下面建立新文件夹images用来存用来存放素材（图片、音乐、视频）放素材（图片、音乐、视频）l将自己准备的素材复制到将自己准备的素材复制到images文件夹中文件夹中l慎重，一旦放到站点文件夹中的文件，就不能随意删除、移动和重命慎重，一旦放到站点文件夹中的文件，就不能随意删除、移动和重命名，请注意检查，站点文件夹中不能包含中文文件名和文件夹名！名，请注意检查，站点文件夹中不能包含中文文件名和文件夹名！l以上操作只需要做一次，以后只需要保护好你的整个以上操作只需要做一次，以后只需要保护好你的整个myweb文件夹，文件夹，并在每次上机的时候将它复制到并在每次上机的时候将它复制到D盘根目录。盘根目录。在DW中新建站点l启动启动DW，选择菜单，选择菜单【站点站点】、【管理站点管理站点】，将原有的站点删除，再选择，将原有的站点删除，再选择【新建站新建站点点】以上操作在每次实验课开始时都要做一次，原因是学生机房以上操作在每次实验课开始时都要做一次，原因是学生机房C盘是重启恢复的盘是重启恢复的【文件】面板l仔细观察当前的仔细观察当前的【文件文件】面板必须是如下的面板必须是如下的样子：样子：为什么要建立站点l可以让可以让DW帮你管理站点文件夹内部文件之间复杂帮你管理站点文件夹内部文件之间复杂的引用关系，并且在删除时提醒用户是否被引用，的引用关系，并且在删除时提醒用户是否被引用，重命名文件时自动更新链接的文件。重命名文件时自动更新链接的文件。l保存文件时自动定位到站点文件夹内保存文件时自动定位到站点文件夹内l插入图片时可以直接拖拽到文档中插入图片时可以直接拖拽到文档中l建立超级链接时可以直接拖拽建立超级链接时可以直接拖拽新建第一个网页l新建新建HTML（布局为（布局为“无无”）文档）文档l【文件文件】、【另存为另存为】,保保存到站点根目录下面存到站点根目录下面(d:myweb)，文件名为，文件名为zwjs.htmll【插入插入】、【表格表格】900PX，3行行2列，边框、列，边框、边距为边距为0关于表格的操作l表格设置工具表格设置工具在表格内部单击右键，在表格快捷菜单中操作在表格内部单击右键，在表格快捷菜单中操作在表格的在表格的HTML属性面板中设置属性面板中设置l表格边框线为表格边框线为0，是用来布局的表格，是用来布局的表格l合并、拆分单元格合并、拆分单元格l设置单元格宽度和高度设置单元格宽度和高度特别提示l表格的同一行高度必须一致表格的同一行高度必须一致l同一列宽度必须一致同一列宽度必须一致l所以定义了一个单元格的高度和宽度之后，与之所以定义了一个单元格的高度和宽度之后，与之同行的其他单元格高度就不可再定义，与之同一同行的其他单元格高度就不可再定义，与之同一列的其他单元格的宽度就不可再定义了！列的其他单元格的宽度就不可再定义了！l插入表格：插入表格：900PX，3行行2列，边框、边距为列，边框、边距为0l合并拆分并插入内容为：合并拆分并插入内容为：合并拆分单元格用快捷菜单中的单元格用快捷菜单中的“表格表格”宽、高设置在属性面板的设置在属性面板的HTML属性中属性中选中单元格标签选中单元格标签选择标签选择标签td可选中单元格，对齐方式可在可选中单元格，对齐方式可在HTML属性面板直接属性面板直接设置设置插入内容插入内容l插入文本插入文本l插入图片插入图片l插入插入flash动画动画l插入插入FLV视频文件视频文件l插入水平线：插入水平线：l插入超级链接：文字和图像热区插入超级链接：文字和图像热区l插入电子邮件插入电子邮件l插入版权等特殊符号插入版权等特殊符号粘贴文本并编辑粘贴文本并编辑插入图片插入图片插入插入SWF文件，在属性面板设置高、宽和透明文件，在属性面板设置高、宽和透明插入水平线，在属性面板设置宽高，在代码视图设置颜色插入水平线，在属性面板设置宽高，在代码视图设置颜色设置电子邮件地址的链接设置电子邮件地址的链接输入超级链接的文本并建立超级链接输入超级链接的文本并建立超级链接网页格式化网页格式化-全局格式设置全局格式设置通过代码视图插入标签：在通过代码视图插入标签：在body后面插入标签后面插入标签“bgsound”(背景音乐背景音乐),了解标签编辑对话框了解标签编辑对话框网页格式化网页格式化-全局格式设置全局格式设置l网页属性设置网页属性设置l选择菜单选择菜单“修改修改”“页面属性页面属性”命令，可弹出命令，可弹出“页面属性页面属性”对话框。对话框。第二课CSS(串联式样式表)Cascading Style SheetsCSS概述lCSS是是Cascading Style Sheets的缩写，的缩写，中文可以翻译成中文可以翻译成串联式串联式 样式表样式表。lHTML主要侧重于定义主要侧重于定义内容内容，而没有过多，而没有过多设计设计HTML的排版和界面效果。的排版和界面效果。CSS解决解决了网页界面排版的难题。了网页界面排版的难题。lHTML的标记主要是定义网页的内容，而的标记主要是定义网页的内容，而CSS决定这些网页内容如何显示（布局）。决定这些网页内容如何显示（布局）。计算机中“样式”的含义l样式是一组格式的集合。一次定义格式集合样式是一组格式的集合。一次定义格式集合可多次使用。可多次使用。l当某种格式组合需要多次重复使用时，将这当某种格式组合需要多次重复使用时，将这组格式定义好，保存起来，给定一个名称，组格式定义好，保存起来，给定一个名称，即样式名。即样式名。l样式有样式名。样式有样式名。l样式中的格式修改后，应用了样式的对象将样式中的格式修改后，应用了样式的对象将自动更新。自动更新。CSS基本语法l一个样式一个样式(Style)的语法由三部分构成：的语法由三部分构成：selector property:valueSelector(选择器选择器)，是被设置格式的对象名，是被设置格式的对象名，可以是可以是HTML标标记、类名称或记、类名称或ID等等属性属性(Property)，是是CSS样式控制的核心，如字体、背景、样式控制的核心，如字体、背景、便捷等，便捷等，CSS共有共有100多个标准属性多个标准属性属性值属性值(Value)l.AA1font-size:12pt;color:blueAA1是样式名称，是样式名称，“.”代表用户自定义名称，代表用户自定义名称，设置了段落的文字大小为设置了段落的文字大小为12号，颜色号，颜色color为蓝为蓝色色blue。定义CSS样式关键词：stylelCSS样式以关键词样式以关键词“style”开始定义。开始定义。全部100多个CSS属性lcolor background background-attachment background-color background-image background-position background-repeat font font-family font-size font-style font-variant font-weight direction letter-spacing line-height text-align text-decoration text-indent text-transform vertical-align white-space word-spacing border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width margin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left padding-right padding-top display list-style list-style-image list-style-position list-style-type作业：阅读教材分类含义l类型类型：设置设置字符字符格式。字体、字号、文字颜色、字型等。格式。字体、字号、文字颜色、字型等。l背景背景：定义网页定义网页背景背景属性。背景图片、背景颜色等。属性。背景图片、背景颜色等。l区块区块：设置设置段落段落格式。首行缩进、段落对齐方式、行距格式。首行缩进、段落对齐方式、行距等。等。l方框方框：定义元素在定义元素在页面页面中的放置方式，在页面中占据的中的放置方式，在页面中占据的大小、填充、浮动方式、边界等。大小、填充、浮动方式、边界等。l边框边框：定义定义边框边框线型、线宽、边框线颜色等。线型、线宽、边框线颜色等。l列表列表：专门为列表指定列表类型和符号图像。专门为列表指定列表类型和符号图像。实例实例l介绍介绍CSS面板全部、当前的含义面板全部、当前的含义l再次用再次用CSS面板建立一个内部样式面板建立一个内部样式ABCfont-family:宋体宋体;font-size:12pt;color:bluel用用CSS属性面板将该样式应用到正文中（三个以上段落）属性面板将该样式应用到正文中（三个以上段落）l查看代码视图，阅读样式定义和样式应用相关代码查看代码视图，阅读样式定义和样式应用相关代码l用用CSS面板修改样式面板修改样式ABC的文本颜色的文本颜色CSS的三种定义和应用方式内联样式内联样式(Inline Style)：直接在直接在HTML标记中用标记中用STYLE 定义，定义，应用于当前标记内（只用一次）应用于当前标记内（只用一次）内部样式表内部样式表(Internal Style Sheet)：在在HTML文文档的档的HEAD标记内定义，标记内定义，应用于当前应用于当前HTML文档（可文档（可用多次）用多次）外部样式表外部样式表(External Style Sheet)：以文件的形以文件的形式单独保存，式单独保存，可应用到任何可应用到任何HTML文档（可用多次）文档（可用多次）l格式：格式：l说明说明该定义只在当前行有效该定义只在当前行有效内联样式：直接在HTML标记中用STYLE 定义，应用于当前标记内 l应用方法：测试文字 l内部样式表内部样式表(Internal Style Sheet)：在在HTML文文档的档的HEAD标记内定义，应用于整个标记内定义，应用于整个HTML文档文档内部样式表定义内部样式表定义内联样式与内部样式实例1.从记事本复制五个段落、粘贴到网页的设从记事本复制五个段落、粘贴到网页的设计视图。计视图。2.在代码视图查看段落标记，重新分段。在代码视图查看段落标记，重新分段。3.对标题段落设置内联样式，使标题居中，对标题段落设置内联样式，使标题居中，字符为红色。字符为红色。4.用用CSS面板新建内部样式，为面板新建内部样式，为P标记设置标记设置居中格式，字符为蓝色。居中格式，字符为蓝色。5.观察内部样式和内联样式的代码位置。观察内部样式和内联样式的代码位置。l定义：在记事本中输入下面代码，以文件名定义：在记事本中输入下面代码，以文件名sample.css保存。保存。l应用：应用：在当前在当前HTML文档中所有使用文档中所有使用H1样式的文字将按样式的文字将按CSS定义的格式显示。定义的格式显示。外部样式表定义外部样式表定义各种CSS优先顺序l样式的优先级依次是内联、样式的优先级依次是内联、内部、内部、外部、外部、浏览器缺浏览器缺省。即：省。即：内联样式表内联样式表(Inline Style)(优先级最高优先级最高)内部样式表内部样式表(Internal Style Sheet)外部样式表外部样式表(Extenal Style Sheet)浏览器缺省浏览器缺省(browser default)(优先级最低优先级最低)假设内联样式中有假设内联样式中有font-size:30pt,而内部样式中有而内部样式中有font-size:12pt，那么内联式样式就会覆盖内部样式。，那么内联式样式就会覆盖内部样式。样式的转换l内联样式转换成内部样式内联样式转换成内部样式在有内联样式的对象上单击右键，选择菜单：在有内联样式的对象上单击右键，选择菜单：CSS样式、将内联样式、将内联CSS转换为规则。转换为规则。l内部样式转换成外部样式内部样式转换成外部样式右击右击CSS面板中的内部样式名，选择面板中的内部样式名，选择“移动移动CSS规则规则”，在对话框中指定，在对话框中指定“新样式表新样式表”。DW中CSS的用法l新内联样式新内联样式指定标签后直接在属性面板指指定标签后直接在属性面板指定、编辑样式定、编辑样式l通过面板，可以用四种方式通过面板，可以用四种方式定义定义CSS类：类：给内部样式指定一个名称，给内部样式指定一个名称，以便多次引用该定义效果以便多次引用该定义效果ID：ID是网页中对象的名称，是网页中对象的名称，可以通过可以通过ID直接为某个指定对直接为某个指定对象设置象设置CSS样式。样式。ID名以名以#开开始。始。标签标签：对某个：对某个HTML标记重定标记重定义义复合内容复合内容：特殊的几个选项：特殊的几个选项CSSl内联、内部、外部样式的优先顺序和转换内联、内部、外部样式的优先顺序和转换l类、标签、复合内容、类、标签、复合内容、ID的用法的用法l在面板上新建、编辑、删除、套用样式的方在面板上新建、编辑、删除、套用样式的方法法l快速了解和修改当前样式的定义内容快速了解和修改当前样式的定义内容表格布局的特点l使用简单使用简单l可以定量布局可以定量布局l格式设置不够灵活多样格式设置不够灵活多样l效果设置效率低效果设置效率低DIV+CSSl定量布局定量布局l可以实现灵活多样的布局可以实现灵活多样的布局l效果设置效率高效果设置效率高lCSS应用比较复杂应用比较复杂插入方法l插入插入DIV标签，在对话框中为标签，在对话框中为DIV指定一个指定一个IDl选中选中DIV，在，在CSS面板新建面板新建CSS样式，弹出对话框，设置样式，弹出对话框，设置CSS详细内容详细内容Mydiv1的格式设置l类型、背景、区块、边框、列表类型、背景、区块、边框、列表l特别注意：方框和定位格式的含义，包含了特别注意：方框和定位格式的含义，包含了DIV的高、宽、的高、宽、填充、边距等重要属性填充、边距等重要属性l边距（边距（margin)是指与相邻对象之间的距离，按顺时针方是指与相邻对象之间的距离，按顺时针方向上、右、下、左值为向上、右、下、左值为0 auto 0 auto，可以，可以设置居中设置居中简单实例三个DIV（2个相对定位，一个绝对定位）l#ABC（相对定位）（相对定位）l#XYZ（相对定位）（相对定位）l#apDIV1绝对定位绝对定位DIV标签的嵌套和相对位置lDiv可以多层嵌套，它们之间构成相对位置关系。可以多层嵌套，它们之间构成相对位置关系。l下页是实验下页是实验3完成的网页包含的完成的网页包含的DIV以及它们的嵌以及它们的嵌套关系套关系l一般情况：一般情况：要将标签要将标签B插入标签插入标签A内部，选择内部，选择“在标签结束之前在标签结束之前”，标签指定为，标签指定为A要将标签要将标签B插入标签插入标签A后面，选择后面，选择“在标签之后在标签之后”，标签指定为标签指定为A标签栏l了解一个对象所在的容器了解一个对象所在的容器选定它，看标签栏从右到左显示的标签，即该对选定它，看标签栏从右到左显示的标签，即该对象所在的多重容器。象所在的多重容器。设置该对象的属性，标签栏上最右边的容器的优设置该对象的属性，标签栏上最右边的容器的优先级别最高，然后是从右向左依次降低优先级先级别最高，然后是从右向左依次降低优先级阶段总结l学会用标签选中对象学会用标签选中对象l学会在代码视图了解对象所在的学会在代码视图了解对象所在的DIV名称和名称和格式设置格式设置l学会准确选中、编辑、修改对象的学会准确选中、编辑、修改对象的CSS属属性性l学会在代码视图删除对象学会在代码视图删除对象第三课l导航工具：菜单导航工具：菜单l网页行为网页行为lIndex.html的设计的设计菜菜 单单l菜单用在网页中用来导航菜单用在网页中用来导航l在文档中插入菜单，必须先保存在文档中插入菜单，必须先保存文档。文档。l插入、布局对象、插入、布局对象、spry菜单菜单l菜单属性面板是用来修改菜单基菜单属性面板是用来修改菜单基本属性的，单击菜单的标题栏，本属性的，单击菜单的标题栏，可以即显示属性面板可以即显示属性面板l在在CSS面板上编辑外部样式可以面板上编辑外部样式可以设置菜单各种外观。设置菜单各种外观。Spry菜单栏lSpry菜单菜单有水平和垂直两菜单菜单有水平和垂直两种排列方式。种排列方式。l添加添加Spry菜单栏时会自动生成菜单栏时会自动生成代码行及一些辅助文件（如代码行及一些辅助文件（如.js，.css，.gif等），默认情况下会等），默认情况下会在站点文件夹下创建在站点文件夹下创建SpryAssets文件夹，并将这些文件夹，并将这些辅助文件存入其中，不能删除。辅助文件存入其中，不能删除。l如果要对外观进行设置，必须了如果要对外观进行设置，必须了解有关菜单的各个解有关菜单的各个CSS样式，如样式，如右图。右图。菜单外观修改l一级菜单宽度：一级菜单宽度：ul.MenuBarVertical：整体菜单的宽度：整体菜单的宽度ul.MenuBarVertical li：列表内容的宽度：列表内容的宽度l菜单背景颜色和文字颜色、字号等字符格式：菜单背景颜色和文字颜色、字号等字符格式：ul.MenuBarVertical a的背景颜色的背景颜色l菜单中文字对齐格式菜单中文字对齐格式ul.MenuVertical li 区块区块 居中对齐居中对齐l菜单高度控制：菜单高度控制：设置设置ul.MenuBarVertical的文字大小，行高将根据字号自动调的文字大小，行高将根据字号自动调整，还可以修改整，还可以修改ul.MenuBarVertical a的的padding值值l二级菜单宽度：二级菜单宽度：ul.MenuBarVertical ul：子菜单整体宽度：子菜单整体宽度ul.MenuBarVertical ul li：子菜单列表内容宽度：子菜单列表内容宽度特别提示l一个站点内所有网页的水平菜单只能一个站点内所有网页的水平菜单只能保持同一种外观格式！保持同一种外观格式！l一个站点内所有的垂直菜单也只能是一个站点内所有的垂直菜单也只能是同一个外观格式！同一个外观格式！l因为一个站点中用来格式化菜单的外因为一个站点中用来格式化菜单的外部部CSS样式文件只有两个：样式文件只有两个：SpryMenuBarVertical.css和和SpryMenuBarHorizontal.css删除菜单时的常见错误结论：菜单实例结论：菜单实例MenuBar1已经被删除，已经被删除，但文档最后关于它的代码没有删除但文档最后关于它的代码没有删除添加行为实现网页特效lDreamweaver行为行为Dreamweaver行为是指当被一个行为是指当被一个特定事件（如单击鼠（如单击鼠标）触发时，标）触发时，执行一个动作（如打开一个浏览器窗口）（如打开一个浏览器窗口）的的JavaScript代码。代码。行为由行为由事件和动作构成，事件是用户浏览网页时执行构成，事件是用户浏览网页时执行了某种操作，由浏览器定义、产生的。动作是预先编了某种操作，由浏览器定义、产生的。动作是预先编写好的写好的JavaScript代码，这些代码执行指定的任务，代码，这些代码执行指定的任务，当事件发生后，触发浏览器做出相应的反应，执行这当事件发生后，触发浏览器做出相应的反应，执行这段代码，这就是整个行为发生的过程。段代码，这就是整个行为发生的过程。通过在页面中添加行为，可以实现许多网页特效，增通过在页面中添加行为，可以实现许多网页特效，增强页面的交互性。强页面的交互性。添加行为实现网页特效l在网页中添加和编辑行为的一般步骤在网页中添加和编辑行为的一般步骤 在在“行为行为”面板（选择菜单面板（选择菜单“窗口”“行为”命令打开面板）命令打开面板）中，单击加号（中，单击加号（+）按钮并从按钮并从“添加行为添加行为”下拉菜单中选择一个动下拉菜单中选择一个动作作弹出对话框显示该动作的参数和说明。弹出对话框显示该动作的参数和说明。若要删除某个行为，可将其选中然后单击减号（若要删除某个行为，可将其选中然后单击减号（-）按钮或按）按钮或按Delete键。键。l常用：常用：弹出信息弹出信息交换图片交换图片DW提供的基本布局方案l由若干个由若干个div构成。构成。l固态固态：指定宽度为像素：指定宽度为像素l液态液态：指定宽度为百分比：指定宽度为百分比l通常布局模板中都有一个包含整个网页内容通常布局模板中都有一个包含整个网页内容的的container div对象，其他对象，其他div包含在该对包含在该对象里面，构成相对位置象里面，构成相对位置课堂实例l按本周实验课的作业要求建立站点，并完成按本周实验课的作业要求建立站点，并完成自我介绍网页的制作。自我介绍网页的制作。l顶端为滚动图片展示顶端为滚动图片展示Index.html的建立设计index.htmll资料如何分类：目录资料如何分类：目录l用什么导航工具：菜单或者列表用什么导航工具：菜单或者列表l具体设计导航菜单（列表）的文字具体设计导航菜单（列表）的文字l文件名规则文件名规则Index.html的导航是将点内的所有文件通过超级的导航是将点内的所有文件通过超级链接连接到一起，做超级链接时被链接的文件可链接连接到一起，做超级链接时被链接的文件可能已经建好也可能还没有建，此时你都可以先按能已经建好也可能还没有建，此时你都可以先按你自己的命名规则链接文件名称，之后再建立该你自己的命名规则链接文件名称，之后再建立该文件。文件。将设计文本化补充细节l在图片或在图片热区上插入超级链接，要在图片在图片或在图片热区上插入超级链接，要在图片的属性面板中完成，使用插入菜单无法实现。的属性面板中完成，使用插入菜单无法实现。l在网页中插入在网页中插入FLV视频视频l插入菜单中的插入菜单中的“命名锚记命名锚记”是为了在同一文档中是为了在同一文档中定位，与超级链接配合实现同一文档中的跳转定位，与超级链接配合实现同一文档中的跳转l怎样将一个怎样将一个DIV在在BODY中居中：中居中：将左将左padding与左与左margin的和设置为：的和设置为：（屏幕宽度（屏幕宽度-DIV的的width值）值）/2将将DIV的的Margin值左右都设置为值左右都设置为Auto个人网站导航的策划l布局工具：布局工具：选用选用DW提供的布局提供的布局DIV+Spry菜单菜单选用框架选用框架+ul列表（或者直接输入文本）列表（或者直接输入文本）表格布局通常用于导航简单的末端网页中表格布局通常用于导航简单的末端网页中l选用选用DW提供的布局提供的布局DIV+Spry菜单菜单第一个建立的网页应该是第一个建立的网页应该是index.html在在index.html中，设置好导航的所有超级链接（跳转的中，设置好导航的所有超级链接（跳转的其他网页需要预设文件名），以后将不要更改其他网页需要预设文件名），以后将不要更改将完成后的将完成后的index.html另存为其他需要这些导航的文件，另存为其他需要这些导航的文件，然后修改这些网页的非导航部分的内容。然后修改这些网页的非导航部分的内容。人有了知识，就会具备各种分析能力，明辨是非的能力。所以我们要勤恳读书，广泛阅读，古人说“书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知识面。有许多书籍还能培养我们的道德情操，给我们巨大的精神力量，鼓舞我们前进。