网页设计与网站建设教学课件

网页设计与网站建设31、别人笑我太疯癫，我笑他人看不穿。(名言网)32、我不想听失意者的哭泣，抱怨者的牢骚，这是羊群中的瘟疫，我不能被它传染。我要尽量避免绝望，辛勤耕耘，忍受苦楚。我一试再试，争取每天的成功，避免以失败收常在别人停滞不前时，我继续拼搏。33、如果惧怕前面跌宕的山岩，生命就永远只能是死水一潭。34、当你眼泪忍不住要流出来的时候，睁大眼睛，千万别眨眼!你会看到世界由清晰变模糊的全过程，心会在你泪水落下的那一刻变得清澈明晰。盐。注定要融化的，也许是用眼泪的方式。35、不要以为自己成功一次就可以了，也不要以为过去的光荣可以被永远肯定。返回返回返回返回返回 通过本讲学习，应该掌握以下内容：通过本讲学习，应该掌握以下内容：1.网页大小设置网页大小设置2.网页背景色设置网页背景色设置3.辅助线添加辅助线添加4.基本图形的制作方法基本图形的制作方法5.弧形文字制作弧形文字制作6.位图处理位图处理7.图形中切片应用图形中切片应用第一讲第一讲 页面设置与基本图形文字处理页面设置与基本图形文字处理（2学时）学时）返回1.1 网页大小及背景色网页大小及背景色1.网页大小：网页大小：780X2.背景色：标准安全色，其它颜色。背景色：标准安全色，其它颜色。1.2 辅助线添加辅助线添加1.辅助线大小设置辅助线大小设置2.辅助线显示与隐藏，自动对齐。辅助线显示与隐藏，自动对齐。返回1.3 基本图形的制作方法基本图形的制作方法1.图形操作对象：矩形、园、多边形等图形操作对象：矩形、园、多边形等2.联合联合3.打孔打孔4.刀子工具刀子工具5.对齐，均分，排列对齐，均分，排列6.缩放，效果缩放，效果7.举例：梅花、心型等图形制作举例：梅花、心型等图形制作返回1.4 弧形文字制作方法弧形文字制作方法1.文字的输入及属性设置文字的输入及属性设置2.路径：钢笔工具，图形边框等路径：钢笔工具，图形边框等3.文字附加到路径。文字附加到路径。4.文字方向倒转。文字方向倒转。5.文字效果：投影等效果。文字效果：投影等效果。6.举例：公章、举例：公章、logo中弧形文字等中弧形文字等7.切片应用切片应用返回1.5位图处理位图处理1.位图导入：主要是位图导入：主要是jpg、gif图形图形2.位图选取：使用选取工具加羽化、反选、位图选取：使用选取工具加羽化、反选、等等3.效果处理：透明度，边缘羽化等效果处理。效果处理：透明度，边缘羽化等效果处理。4.位图的缩放处理。位图的缩放处理。5.举例：广告区背景制作并进行相应切片等举例：广告区背景制作并进行相应切片等返回1.本讲上机实验要点本讲上机实验要点1.页面大小及背景设置。页面大小及背景设置。2.辅助线及对象对齐练习辅助线及对象对齐练习3.Logo标志制作标志制作(含弧形文字处理含弧形文字处理)4.动画或广告区背景图形制作。动画或广告区背景图形制作。5.位图的效果处理位图的效果处理。6.公章图形等制作。公章图形等制作。返回 通过本讲学习，应该掌握以下内容：通过本讲学习，应该掌握以下内容：1.矩形导航条制作矩形导航条制作2.弧形导航条制作弧形导航条制作3.园角矩形导航条制作园角矩形导航条制作4.层叠形导航条制作层叠形导航条制作5.凹入形导航条制作凹入形导航条制作6.导航条中切片应用导航条中切片应用第二讲第二讲 导航条制作导航条制作（4学时）学时）返回2.1矩形导航条制作矩形导航条制作返回2.2弧形导航条制作弧形导航条制作返回2.3园角矩形导航条制作园角矩形导航条制作返回2.4层叠形导航条制作层叠形导航条制作返回2.5凹入形导航条制作凹入形导航条制作返回2.6预置超级链接区（切片）预置超级链接区（切片）对对导导航航条条中中文文字字区区域域进进行行切切片片，为为后后续续操操作作预预留留图图形形超超级级链链接接区区，并并配配合合前前面面完完成成的内容形成部分网页元素制作。的内容形成部分网页元素制作。返回2.7本讲上机实验要点本讲上机实验要点1.矩形导航条制作矩形导航条制作2.弧形导航条制作弧形导航条制作3.园角矩形导航条制作园角矩形导航条制作4.层叠形导航条制作层叠形导航条制作5.凹入形导航条制作凹入形导航条制作返回 通过本讲学习，应该掌握以下内容：通过本讲学习，应该掌握以下内容：1.导航按钮制作、按钮排列方法导航按钮制作、按钮排列方法2.矩形板块制作方法矩形板块制作方法3.园角板块制作方法园角板块制作方法4.条目板块制作方法条目板块制作方法5.版权区域制作方法版权区域制作方法第三讲第三讲 按钮与板块制作按钮与板块制作（2学时）学时）返回3.1导航按钮制作方法导航按钮制作方法1.制作艺术图形，如柱状型，内斜角型制作艺术图形，如柱状型，内斜角型2.转换为按钮，按建转换为按钮，按建3.双击打开，在滑过帧复制首帧，修改图双击打开，在滑过帧复制首帧，修改图形，点击完成。形，点击完成。4.添加并对齐文字，复制多个，并修改文添加并对齐文字，复制多个，并修改文字。字。5.进行对齐，均分等操作进行对齐，均分等操作6.需要时可加上背景图像需要时可加上背景图像返回3.2矩形板块制作方法矩形板块制作方法直接用切片工具进行切片即可直接用切片工具进行切片即可3.园角板块制作方法园角板块制作方法返回3.4条目板块制作条目板块制作返回3.5版权区域制作版权区域制作 画一水平线，然后切片即可，也可以直画一水平线，然后切片即可，也可以直接加上版权信息，但以后修改不是很方便接加上版权信息，但以后修改不是很方便返回3.6本讲上机实验要点本讲上机实验要点1.导航按钮制作导航按钮制作2.矩形板块制作矩形板块制作3.园角板块制作园角板块制作4.条目板块制作条目板块制作5.版权区域制作版权区域制作返回 通过本讲学习，应该掌握以下内容：通过本讲学习，应该掌握以下内容：1.导出网页，确立网站结构导出网页，确立网站结构2.网页居中处理，页面设置网页居中处理，页面设置3.用用CSS设置网页背景设置网页背景4.能将图形设置为单元格背景能将图形设置为单元格背景5.会在单元格中按要求嵌套插入表格会在单元格中按要求嵌套插入表格第四讲第四讲 站点处理与网页修改站点处理与网页修改（2学时）学时）返回4.1 Fireworks文档中网页的导出文档中网页的导出1.点击文件菜单点击文件菜单导出项导出项2.建立合理的站点结构，确定根及子文件夹，建立合理的站点结构，确定根及子文件夹，分别用来存放各类网页及网页用文件。注意：分别用来存放各类网页及网页用文件。注意：不要用中文命名文件夹或文件。不要用中文命名文件夹或文件。3.网页类型改为网页类型改为HTML和图像和图像4.将图像放入子文件夹选上。将图像放入子文件夹选上。5.点击保存。点击保存。6.关闭关闭Fireworks，保存源文件，格式为保存源文件，格式为PNG返回4.2 页面居中及设置处理页面居中及设置处理1.打开打开DW，建立站点，注意只需用高级建立站点，注意只需用高级选项选择根文件夹即可。选项选择根文件夹即可。2.点击修改菜单点击修改菜单页面属性，设置边界为页面属性，设置边界为0及编码为简体中文。及编码为简体中文。3.在标签区找到在标签区找到Table，点击后在属性面点击后在属性面板设置居中。板设置居中。返回4.3 网页背景处理网页背景处理1.用用Fireworks 制作背景用图形，大小制作背景用图形，大小1000*，2.两边做成渐变式柱状或花边式。两边做成渐变式柱状或花边式。3.在在CSS面板中新建面板中新建CSS样式，选中重定样式，选中重定义义HTML标签和仅对该文档，选择标签和仅对该文档，选择Body。4.修改背景图形及有关设置。修改背景图形及有关设置。5.在在1024 768下浏览效果下浏览效果返回4.4 单元格背景图形处理技巧单元格背景图形处理技巧1.选中单元格中的图片，在属性面板中复选中单元格中的图片，在属性面板中复制路径。制路径。2.删除图片引用。删除图片引用。3.在属性面板中的背景图像框中粘贴路径在属性面板中的背景图像框中粘贴路径。4.原单元格中即可放入其它网页元素，如原单元格中即可放入其它网页元素，如文字、动画等。文字、动画等。返回4.5 单元格中嵌套表格的插入单元格中嵌套表格的插入1.选中单元格中的图片，在属性面板中记选中单元格中的图片，在属性面板中记下高度（需要时可记下宽度）。下高度（需要时可记下宽度）。2.删除图片及其引用。删除图片及其引用。3.用工具栏中插入表格工具插入嵌套表格用工具栏中插入表格工具插入嵌套表格。4.设置表格有关属性，如高度，边框颜色设置表格有关属性，如高度，边框颜色等。等。返回4.6本讲上机实验要点本讲上机实验要点1.正确导出网页及建立站点结构。正确导出网页及建立站点结构。2.设置网页居中及边界，编码等属性设置网页居中及边界，编码等属性3.为网页建立柱状和花边背景，并在高分辨为网页建立柱状和花边背景，并在高分辨率下浏览。率下浏览。4.将单元格中的图形设置为其背景。在单元将单元格中的图形设置为其背景。在单元格中插入格中插入Flash动画。动画。5.为单元格插入嵌套表格，设置表格属性。为单元格插入嵌套表格，设置表格属性。返回 通过本讲学习，应该掌握以下内容：通过本讲学习，应该掌握以下内容：1.Flash动画基本工作原理，动画设置方法动画基本工作原理，动画设置方法2.逐帧动画制作方法逐帧动画制作方法3.形状动画制作方法形状动画制作方法4.直线运动动画制作方法直线运动动画制作方法5.引导动画制作方法引导动画制作方法6.遮罩动画制作方法遮罩动画制作方法第五讲第五讲 基本基本Flash动画制作动画制作（4学时）学时）返回5.1 工作原理及动画设置工作原理及动画设置1.简单地讲，场景（即动画播放的舞台）简单地讲，场景（即动画播放的舞台）中每帧的二维对象按照时间的顺序播放中每帧的二维对象按照时间的顺序播放即形成即形成Flash动画动画2.其中帧、关键帧、空白关键帧、过度帧、其中帧、关键帧、空白关键帧、过度帧、延续帧、层等是比较重要的基本概念。延续帧、层等是比较重要的基本概念。3.动画设置的内容主要有：场景大小，背动画设置的内容主要有：场景大小，背景颜色，播放速度等。景颜色，播放速度等。返回5.2逐帧动画制作逐帧动画制作1.准备多张图形或图像（也可自绘），如准备多张图形或图像（也可自绘），如鸟飞过程中不同状态的图像。鸟飞过程中不同状态的图像。2.分别插入到不同的关键帧，或在每一帧分别插入到不同的关键帧，或在每一帧改变图形的形状。改变图形的形状。3.添加一层，在新层中导入一张背景图片添加一层，在新层中导入一张背景图片4.调节播放速度。按调节播放速度。按Ctrl+回车观看效果。回车观看效果。返回5.3形状动画制作形状动画制作1.在不同的关键帧添加非元件或打散的文在不同的关键帧添加非元件或打散的文字。字。2.创建形状补间动画（即中间的帧由计算创建形状补间动画（即中间的帧由计算机补上，称做补间）。机补上，称做补间）。3.调节播放速度。按调节播放速度。按Ctrl+回车观看效果。回车观看效果。返回5.4直线运动动画制作直线运动动画制作1.在相距较大的关键帧放入元件，创建运在相距较大的关键帧放入元件，创建运动补间，调节运动加速度，即可制作运动补间，调节运动加速度，即可制作运动动画。动动画。2.举例：小球弹跳，可在另一层加入桌面举例：小球弹跳，可在另一层加入桌面元件，小球与桌面接触瞬间加入声音。元件，小球与桌面接触瞬间加入声音。3.调节播放速度。按调节播放速度。按Ctrl+回车观看效果。回车观看效果。返回5.5引导动画制作引导动画制作1.制作被引导元件层，指向层名按右键，制作被引导元件层，指向层名按右键，点击添加引导层。点击添加引导层。2.在引导层添加引导线，将被引导层中元在引导层添加引导线，将被引导层中元件移动到引导线的起点和终点，注意：件移动到引导线的起点和终点，注意：是分别在不同的关键帧。是分别在不同的关键帧。3.举例：月亮环绕地球转动。举例：月亮环绕地球转动。返回5.6遮罩动画制作遮罩动画制作1.遮罩动画的理解：遮罩动画的理解：“被遮罩层遮住的部被遮罩层遮住的部分能看见，没有被遮住的部分看不见分能看见，没有被遮住的部分看不见”。2.举例：字幕，打字机等效果。举例：字幕，打字机等效果。返回5.7本讲上机实验要点本讲上机实验要点1.制作逐帧动画，如红绿灯动画。制作逐帧动画，如红绿灯动画。2.制作形状动画，如园形变文字。制作形状动画，如园形变文字。3.制作小球在桌面上跳动动画。制作小球在桌面上跳动动画。4.制作月亮环绕地球转动动画，或其它引导制作月亮环绕地球转动动画，或其它引导动画。动画。5.模拟打字机，字幕效果动画。模拟打字机，字幕效果动画。返回 通过本讲学习，应该掌握以下内容：通过本讲学习，应该掌握以下内容：1.文字格式处理，绕图片环绕处理文字格式处理，绕图片环绕处理2.用用Flash文本制作栏目标题文本制作栏目标题3.字幕制作字幕制作4.用用CSS修改超级链接的默认样式修改超级链接的默认样式5.版权制作版权制作6.网页拉坏的处理方法网页拉坏的处理方法第六讲第六讲 网页元素格式及字幕等处理网页元素格式及字幕等处理（2学时）学时）返回6.1 文字及图片处理文字及图片处理1.用图形处理工具制作图片，放入单元用图形处理工具制作图片，放入单元格中。设置为左对齐，在周围打上文格中。设置为左对齐，在周围打上文字，即可实现文字环绕图片的效果。字，即可实现文字环绕图片的效果。2.文字缩进：需在全角中文状态下击回文字缩进：需在全角中文状态下击回车键。车键。3.文字换行：文字换行：Shift+回车。回车。4.通过属性面板修改字体，大小，颜色通过属性面板修改字体，大小，颜色等。等。返回6.2 Flash文本制作文本制作1.点击媒体选项卡的点击媒体选项卡的Flash文本按钮。文本按钮。2.在弹出的文本框中修改字体、大小、对在弹出的文本框中修改字体、大小、对齐、颜色、文字内容等项。齐、颜色、文字内容等项。3.点应用按钮，观察是否适合或网页是否点应用按钮，观察是否适合或网页是否撑破。撑破。4.调整好以后点确定按钮调整好以后点确定按钮返回6.3 字幕处理字幕处理1.选中欲添加字幕效果的文字或图片。选中欲添加字幕效果的文字或图片。2.点击代码视图按钮切换到代码视图。点击代码视图按钮切换到代码视图。3.在字幕内容之前加入以下代码：在字幕内容之前加入以下代码：4.在字幕内容之后加入以下代码：在字幕内容之后加入以下代码：返回6.4 CSS修改超级链接样式修改超级链接样式1.打开设计面板，选择打开设计面板，选择CSS样式，新建样式，新建CSS样式。样式。2.类型选择类型选择CSS选择器，定义在选择仅对选择器，定义在选择仅对该文档。该文档。3.分别修改分别修改Link,Visited,Hover等项的样等项的样式。如去掉下划线，颜色，添加背景等式。如去掉下划线，颜色，添加背景等返回6.5 版权制作版权制作1.直接在版权区删除图片，设置水平居中，直接在版权区删除图片，设置水平居中，垂直顶对齐。垂直顶对齐。2.打入版权信息文字内容。打入版权信息文字内容。3.设置文字大小、颜色等值。设置文字大小、颜色等值。返回6.6网页拉坏的处理方法网页拉坏的处理方法1.对于设计状态中的假坏，如制作过程中对于设计状态中的假坏，如制作过程中的元素移动现象，点击标签中的标记即的元素移动现象，点击标签中的标记即可恢复。可恢复。2.对于因操作不当，出现的真正拉坏现象，对于因操作不当，出现的真正拉坏现象，若找不到原因，关闭窗口，不保存退出，若找不到原因，关闭窗口，不保存退出，重新打开网页即能恢复。重新打开网页即能恢复。返回6.7本讲上机实验要点本讲上机实验要点1.制作文字环绕图片效果，修改文字格式。制作文字环绕图片效果，修改文字格式。2.制作制作Flash标题文本。标题文本。3.设计字幕效果。设计字幕效果。4.用用CSS修改超级链接样式，将字幕中的条修改超级链接样式，将字幕中的条目设置为超链接。目设置为超链接。5.制作版权。制作版权。返回 通过本讲学习，应该掌握以下内容：通过本讲学习，应该掌握以下内容：1.子页的制作方法子页的制作方法2.子页的导出及保存路径方法子页的导出及保存路径方法3.子子页页与与主主页页的的相相互互链链接接，子子页页之之间间相相互互链接链接4.用用DW自动处理网络相册自动处理网络相册5.层动画的制作方法层动画的制作方法6.基本行为处理基本行为处理第七讲第七讲 子页及相册制作，层动画及行子页及相册制作，层动画及行为处理为处理（2学时）学时）返回7.1 子页的制作方法子页的制作方法1.同布局主页一样在同布局主页一样在FW中进行子页元素中进行子页元素的制作及页面切片处理。的制作及页面切片处理。2.导出子页时在根站点下新建一文件夹，导出子页时在根站点下新建一文件夹，并改名并改名(不用汉字不用汉字)。3.在在DW中对子页进行修改和完善。中对子页进行修改和完善。4.采用同样方法制作其它类型子页。采用同样方法制作其它类型子页。返回7.2 自动相册处理自动相册处理1.准备好相关图片，并存放到同一文件夹准备好相关图片，并存放到同一文件夹中。中。2.在在DW中用菜单：命令中用菜单：命令创建网站相册。创建网站相册。3.设置源图片文件夹和目标文件夹路径。设置源图片文件夹和目标文件夹路径。4.确定后自动启动相关软件进行处理。确定后自动启动相关软件进行处理。5.将目标文件夹中的将目标文件夹中的Index.htm文件链接文件链接到主页等。并在网页中的恰当处设置返到主页等。并在网页中的恰当处设置返回主页超链接。回主页超链接。返回7.3 层动画制作层动画制作1.用工具栏中的描绘层按钮插入一个新层。用工具栏中的描绘层按钮插入一个新层。2.在新层中放入文字在新层中放入文字(或图片、动画等或图片、动画等)。3.单击层手柄选中层，用菜单：修改单击层手柄选中层，用菜单：修改时时间轴间轴录制层路径，并拖动层手柄描绘路径。录制层路径，并拖动层手柄描绘路径。4.在在时间轴面板中钩选上循环和自动播放。时间轴面板中钩选上循环和自动播放。5.关闭时间轴面板。关闭时间轴面板。返回7.4 弹出消息框，背景声音等形为处弹出消息框，背景声音等形为处理理1.打开设计面板，选择形为选项。打开设计面板，选择形为选项。2.单击添加形为中的弹出消息项，输入相单击添加形为中的弹出消息项，输入相关内容。关内容。3.背景声音加入方法：进入代码视图，在背景声音加入方法：进入代码视图，在标记后加入以下代码标记后加入以下代码，声音声音文件路径采用浏览方式输入。文件路径采用浏览方式输入。返回7.5本讲上机实验要点本讲上机实验要点1.在在FW中设计制作一文档，切片后导出为中设计制作一文档，切片后导出为一子页，并放在一子文件夹中，然后在一子页，并放在一子文件夹中，然后在DW中作修改，并与主页相互链接。中作修改，并与主页相互链接。2.制作网站相册，修改相应文字内容及格式，制作网站相册，修改相应文字内容及格式，并与主页相互链接。并与主页相互链接。3.用用“层层”制作动画，内添加图片或制作动画，内添加图片或Flash动动画。画。4.用形为面板制作消息框，用代码视图为网用形为面板制作消息框，用代码视图为网页添加背景声音。页添加背景声音。返回E N D 26、要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。卢梭27、只有把抱怨环境的心情，化为上进的力量，才是成功的保证。罗曼罗兰28、知之者不如好之者，好之者不如乐之者。孔子29、勇猛、大胆和坚定的决心能够抵得上武器的精良。达芬奇30、意志是一个强壮的盲人，倚靠在明眼的跛子肩上。叔本华谢谢！谢谢！56