静态网页综课件.ppt

《静态网页综课件.ppt》由会员分享，可在线阅读，更多相关《静态网页综课件.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、静态网页综1第1页，此课件共32页哦l本章综合应用前面各章所介绍的网页设计技术设计三个应用实例：显示隐藏层页面、公告板的制作以及一个综合静态主页。其中包含了布局表格、文本和各种媒体元素的添加、CSS样式表的使用、层与时间轴、行为等各种网页设计技术，读者可以由此体会静态网页的设计流程以及各种技术在实际网页设计过程中的使用方法。2第2页，此课件共32页哦14.1 制作显示隐藏层页面制作显示隐藏层页面 l与显示隐藏层相关的实例有很多，本节介绍两个：利用层、时间轴以及行为技术制作幻灯片页面；利用图像热点结合显示隐藏层行为制作识别显示页面。l14.1.1 制作幻灯片l使用Dreamweaver可以制作出

2、幻灯片效果，即多张图片在同一位置以固定速度切换显示，循环播放。其效果虽没有在FLASH等软件中制作的出色，但优势也很明显：制作简单，浏览速度快，无需插件支持。本节例子的效果是：在浏览器中的图片每隔2秒种切换成另外一张，3张花瓣图片循环播放。图14.1是其中的一个幻灯片页面。3第3页，此课件共32页哦14.1 制作显示隐藏层页面制作显示隐藏层页面l实现上述效果的步骤如下：l 准备3张大小相同的花瓣图片，或者在设计过程中把图片的大小调整为相同。l 在文档窗口创建一个层，在层中插入第一张花瓣图片。l 仿照步骤再创建2个层，分别插入其他2张花瓣图片。l 把文档中的3个层的坐标设置为相同。先定位一个层，

3、然后在其它两个层的属性面板中，将其“左”和“上”的值设置为和第一个层相同。4第4页，此课件共32页哦14.1 制作显示隐藏层页面制作显示隐藏层页面l 选择主菜单【窗口】|【时间轴】，打开时间轴面板，把3个层分别拖入到时间轴不同的动画通道，放置时第二个层和第一个层、第三个层和第二个层首尾相接，如图14.2所示。l 由于每个层中的图片要设计显示2秒种，可把时间轴中FPS的值设定为8，把每个动画栏的长度设定为16帧。如图14.2所示。l 选择主菜单【窗口】|【行为】，打开行为面板。5第5页，此课件共32页哦14.1 制作显示隐藏层页面制作显示隐藏层页面l 选中时间轴行为通道上第一帧，点击行为面板(添

4、加行为)为第一帧的行为通道添加如图14.3所示的显示隐藏层动作：在第一帧时使layer1显示，其余两个层隐藏。l 仿照步骤依次在时间轴行为通道的第16帧添加行为：显示layer2，隐藏其余2层；在行为通道的第31帧添加行为：显示layer3，隐藏其余2层。l 选中时间轴面板上“自动播放”和“循环”两项，按下F12，在浏览器中预览效果。6第6页，此课件共32页哦14.1 制作显示隐藏层页面制作显示隐藏层页面l14.1.2 制作识别显示页面l识别显示页面效果如图14.4所示。当鼠标移动到图片中不同字样上时，显示相应的图片，鼠标移开字样范围时，所有图片隐藏。实现步骤如下：l 在页面中插入一张设计好的

5、带有“狮子、老虎、大象”字样的图片。l 选中图片，在其属性面板中，选择热点创建工具中的圆形工具。分别在图片中相应字样的圆形区域，创建3个圆形热点，热点大小覆盖其圆形区域。如图14.5所示。7第7页，此课件共32页哦14.1 制作显示隐藏层页面制作显示隐藏层页面l 在页面中创建一个层，在层中插入狮子图片。l 仿照步骤再创建2个层，分别插入老虎和大象的图片。l 设置3个层的大小相同，层中图片大小也调整为相同。l 把3个层的位置分别移动到相应热点区域下方。设置3个层间距大致相同，水平对齐(可在它们的属性面板中把“上”坐标的值设置相同)。设置完成后3个层在文档窗口中大小和位置如图14.6所示。8第8页

6、，此课件共32页哦14.1 制作显示隐藏层页面制作显示隐藏层页面l 为方便记忆，分别将狮子、老虎和大象图片所在的层命名为：lion、tiger、elephant。l 选中狮子字样上的热点区域，打开行为面板，点击(添加行为)，为该热点添加“显示隐藏层”行为，在行为面板中设置3个层的显示隐藏关系为：lion层显示，其余2层隐藏。如图14.7所示。l 仿照步骤，分别给另外两个热点区域添加行为，老虎字样热点显示tiger层，隐藏其余2层；大象字样热点显示elephant层，隐藏其余2层。9第9页，此课件共32页哦14.1 制作显示隐藏层页面制作显示隐藏层页面l 触发该动作的事件设定为onMouseOv

7、er。l11 由于要求当鼠标移开时，隐藏所有图层，则需要再给每一个热点区域添加一个隐藏所有层的行为，触发的事件是onMouseOut。设置后选中任意一个热点，行为面板显示为如图14.8所示。l12 页面载入时，所有3个层都是不可见的，故在层面板中设置初始状态所有层的显示属性为“隐藏”。如图14.9所示。l13 按下F12键，在浏览器中观察效果。10第10页，此课件共32页哦14.2 制作站点公告板制作站点公告板 l14.2.1 自动公告板l自动公告板是能够在页面中自动滚动发布信息的元素，在第十章时间轴中，曾介绍过自动公告板的制作方法，对于自动公告板，在页面载入时会自动播放时间轴。但是移动可能影

8、响浏l览者阅读公告内容。因此需要通过设置，在浏览者要阅读公告内容时，让滚动文字停止，阅读完成后继续滚动播放。故还应对第10章中的例子做相应的补充。操作步骤如下：11第11页，此课件共32页哦14.2 制作站点公告板制作站点公告板l 在第十章中例子的基础上，选中子层layer2。l 打开行为面板，为子层layer2添加行为：当onMouseOver事件触发时，停止时间轴；当onMouseOut事件触发时，播放时间轴。添加后选中layer2，行为面板如图14.10所示。l 按下F12在浏览器中预览。当鼠标放到运动文字上时，时间轴停止，鼠标移开文字继续运动。12第12页，此课件共32页哦14.2 制

9、作站点公告板制作站点公告板l14.2.2 手动公告板l在自动公告板的基础上，还可以制作出功能较强的手动公告板。手动公告板的特点是：用户可以通过交互控制公告文字的移动方向。如图14.11所示。当鼠标放到图中男孩头像上时，公告文字自下向上垂直运动；当鼠标放到图中女孩头像上时，公告文字自上向下垂直运动；当鼠标移出头像范围时，公告文字停止运动。13第13页，此课件共32页哦14.2 制作站点公告板制作站点公告板l实现手动公告板的步骤如下：l 在页面中插入一个两行一列的表格进行定位。表格的第一行输入文字“本站公告”，在文字两侧分别插入准备好的男孩和女孩头像图片。l 在表格的第二行插入一个层，用鼠标或键盘

10、把层的水平中心定位到和第一行对应的位置。设置适当的层背景色。l 把鼠标定位到现有层的内部，使用插入层的方法插入一个新层。使新层成为现有层的子层。调整子层的位置大小，使子层位于父层的中心对称位置，略小于父层。l 在子层中添加要显示在公告板中的文字。将其拖动到时间轴当中。14第14页，此课件共32页哦14.2 制作站点公告板制作站点公告板l 选中该动画栏中的第一个关键帧，将层移动到父层的下方(子层顶部和父层底部重合)，再选中其最后一个关键帧，把层移动到父层的上方(子层的底部和父层的顶部重合)，移动时可使用键盘上“”“”方向键，以保证创建的移动路径垂直。l 时间轴面板中显示当前时间轴为“Timeli

11、ne1”，该条时间轴控制的自下向上的垂直运动，若使上述子层还可以自上向下运动，则要再添加一条时间轴。可在原有时间轴的通道区任意位置点击右键，在弹出的快捷菜单中选择【添加时间轴】命令，添加一个新的时间轴编辑面板区“Timeline2”，如图14.12所示。15第15页，此课件共32页哦14.2 制作站点公告板制作站点公告板l 把子层拖入到时间轴“Timeline2”当中，仿照步骤的方法创建自上向下的运动。只需要把第一个关键帧上子层的位置和最后一个关键帧互换即可。页面中的两条时间轴：Timeline1用来控制子层自下向上运动，Timeline2控制子层自上向下运动。l 打开行为面板，选择男孩头像图

12、片，添加以下行为：onMouseOver时触发动作播放时间轴Timeline1；onMouseOver时触发动作停止时间轴Timeline2；onMouseOut时触发动作停止时间轴Timeline1。即当鼠标移到男孩头像图片上时，播放向上运动的时间轴，同时停止向下运动的时间轴。当鼠标移出图片范围时，停止向上运动的时间轴。16第16页，此课件共32页哦14.2 制作站点公告板制作站点公告板l 选择女孩头像图片，为该图片添加以下行为：onMouseOver时触发动作播放时间轴Timeline2；onMouseOver时触发动作停止时间轴Timeline1；onMouseOut时触发动作停止时间轴

13、Timeline2。即当鼠标放到女孩头像图片上时，播放向下运动的时间轴，同时停止向上运动的时间轴。当鼠标移出图片范围时，停止向下运动的时间轴。设置完成后男孩和女孩图片上各有3个行为。如图14.13所示。17第17页，此课件共32页哦14.2 制作站点公告板制作站点公告板l 通过降低FPS的值和增加时间轴中动画栏长度的方法，减慢两条时间轴播放的速度。例如，设置FPS的值为8，动画栏的长度设置为55帧。l11 选中两条时间轴上的“循环”按钮，使动画可以循环播放。l12 按下F12键在浏览器中预览页面。18第18页，此课件共32页哦14.3 制作静态主页制作静态主页 l主页是一个网站的核心，主页设计

14、的优劣关系到网站能否吸引浏览者目光。主页中包含了网站的主要内容介绍和指向各个子页面的链接。在主页设计完成后，可以将其页面风格固定的部分转换成模板，从而可以基于模板创建其他风格相同的子页面，所以主页的设计和制作在整个网站的设计中占据着重要地位。示例主页如图14.14所示。从上到下依次可分为：顶部图片、导航菜单、主体页面和版权声明4个部分。19第19页，此课件共32页哦14.3 制作静态主页制作静态主页l14.3.1 使用布局视图规划页面l在制作页面之前，使用布局视图对页面进行规划是十分必要的。对于收集和制作好的素材，将来如何分配，在布局规划的时候要做好准备。使用布局视图规划页面的步骤如下：l 打

15、开【插入】面板的【布局】项，单击【布局】按钮，切换到布局视图，插入面板中(绘制布局表格)按钮和(绘制布局单元格)按钮为可用状态。如图14.15所示。20第20页，此课件共32页哦14.3 制作静态主页制作静态主页l 使用(绘制布局表格)按钮，在文档区中绘制布局：首先绘制一个容纳所有页面内容的布局表格，然后从上到下依次绘制顶部图片区域、导航菜单区域、主区域和版权声明区域。l 由于在顶部图片区域中需要插入的5张图片(如图14.14所示)：左侧2张较大图片和右侧3张较小图片行数不同，故先用(绘制布局表格)按钮在顶部图片区域绘制两个布局表格。l 在主区域中用(绘制布局表格)按钮绘制出左、中、右3个布局

16、表格。布局完成后，如图14.16所示。21第21页，此课件共32页哦14.3 制作静态主页制作静态主页l14.3.2 添加顶部图片l添加顶部图片的步骤如下：l 在页面布局视图状态下，使用(绘制布局单元格)按钮为顶部的5张图片分别创建如图14.17所示的布局单元格。左侧布局表格中创建左右两个单元格，右侧布局表格中创建上、中、下三个单元格。l 在布局单元格中，选择主菜单【插入】|【图像】，分别插入素材图片。l 调整图片的大小，使整个顶部图片区域高度一致，图片之间无缝隙。图14.14中左侧两图片高度为66px，右侧每个小图片高度为22px。22第22页，此课件共32页哦14.3 制作静态主页制作静态

17、主页l14.3.3 设计导航菜单l导航菜单采用的是单线表格的形式，第一个单元格中放置显示当前日期的JavaScript脚本代码，其余每个单元格中放置一个站点栏目文字。表格中的文字用CSS样式表定义字体、大小、颜色以及对齐方式等属性。制作导航菜单的步骤如下：l 切换到标准视图，把鼠标定位在用做导航菜单的表格当中。然后点击属性面板中“拆分单元格”按钮，在拆分单元格对话框中把该单元格拆分成9列。23第23页，此课件共32页哦14.3 制作静态主页制作静态主页l 根据页面的宽度设置各个单元格的大小，由于第一列单元格中需要放置文字较多的“当前日期时间”，故选中该单元格后，在其属性面板中设置列宽为较大值(

18、图14.14中列宽为240px)，其余各列宽度可设置为相同值(图14.14中列宽为60px)。l 把鼠标定位在导航表格第一列中，选择主菜单【插入】|【HTML】|【脚本对象】|【脚本】，在弹出的插入脚本对话框中输入显示当前日期时间的脚本内容。点击“确定”插入脚本。24第24页，此课件共32页哦14.3 制作静态主页制作静态主页l 在其余列中分别输入导航菜单中设计的各个栏目名称：如网页特效、作品展示等等。对于表格中内容的样式，可使用第8章中介绍的重定义HTML标签的方法，对单元格标记定义CSS样式。例如，图14.18中标记中的样式定义为：字体：宋体；字体大小：12px；字体颜色：red；对齐方式

19、：水平居中、垂直中线对齐。l 选中整个导航菜单所在的表格，设置背景色为红色，间距值为1；再分别选中其9个单元格，在单元格属性面板中为每个单元格添加比表格背景略浅的红色背景图片(或背景颜色)。25第25页，此课件共32页哦14.3 制作静态主页制作静态主页l14.3.4 设计主体页面l主页中的主要内容在主体页面中显示，图14.14中的主页为典型的三分栏结构：左侧部分、右侧部分和中央部分。l1左侧部分l左侧部分分为3个栏目，分别是“极限论坛”、“图片链接”和“文字链接”。设计的过程中以“极限论坛”为例，其余两个栏目的设计可仿照进行。设计和制作“极限论坛”栏目的步骤如下：26第26页，此课件共32页

20、哦14.3 制作静态主页制作静态主页l 切换到布局视图，在左侧区域的布局表格中，用绘制布局单元格工具分别绘制栏目标题单元格和内容单元格。标题单元格和标题图片素材“极限论坛”等高。l 切换到标准视图，选中标题单元格，为其添加带有“极限论坛”字样的背景图片，调整单元格大小使图片中的文字位于单元格中央。如图14.19所示。l 在栏目内容单元格中，分别插入以下表单项目：用户名称和相应的文本字段、用户密码和相应的密码文本域，两个复选按钮“记住密码”和“隐身登陆”，最后放置两个图像域“登陆”和“注册”。在换行时用Shift+回车以节省空间。(注意：栏目中只是按照表单的形式进行显示，具体表单提交后数据的处理

21、参见第17章)27第27页，此课件共32页哦14.3 制作静态主页制作静态主页l 为该栏目内容单元格设置背景色，由于整个主页以红色为主，可以新建一个“类”类型的CSS样式，在样式中定义背景属性为pink(粉红色)。为要添加背景色的单元格设置为该CSS样式类。l2右侧部分l右侧部分分为3个栏目：“公告板”、“本站调查”和“本站成员”。操作步骤如下：l 切换到布局视图，在右侧区域的布局表格中，用绘制布局单元格工具分别绘制栏目标题单元格和内容单元格。标题单元格要和标题图片素材“公告板”等高。28第28页，此课件共32页哦14.3 制作静态主页制作静态主页l 切换到标准视图，选中标题单元格，为其添加带

22、有“公告板”字样的背景图片，调整单元格的大小使图片中的文字位于单元格中央。如图14.20所示。l 仿照步骤和分别设计“本站调查”和“本站成员”两栏目的版面。l 在“公告板”栏目的内容区域，添加本章14.2.1中介绍的“自动公告板”。l 在“本站调查”栏目中输入：“你觉得本站还应该改进哪些内容”字样，然后分别创建3个单选按钮，在其后分别输入相应的文字，再放置两个表单按钮即可。具体设置参考左侧部分的“极限论坛”栏目。l 为右侧3个栏目的内容单元格分别设置CSS样式类，添加粉红背景颜色。29第29页，此课件共32页哦14.3 制作静态主页制作静态主页l3中央部分l中央部分由两个栏目组成，分别是“站点

23、新闻”和“站点导航”，操作步骤如下：l 切换到布局视图，在中央区域的布局表格中，用绘制布局单元格工具分别绘制栏目标题单元格和内容单元格。l 在标题单元格中插入素材图片，根据左右两侧完成后，中央部分剩余的实际宽度调整图片的大小，使用Shift+回车换行输入“站点新闻”字样。如图14.21所示。l 仿照步骤和设计“站点导航”栏目版面。在两个栏目中添加相应的文字内容。l 选择主菜单【修改】|【页面属性】，为整个页面添加雪花图样的背景。30第30页，此课件共32页哦14.3 制作静态主页制作静态主页l14.3.5 版权声明l版权声明部分位于页面的最下方，一般在所有页面元素设计完成之后，才添加版权声明。

24、操作步骤如下：l 在标准视图中选择版权声明部分所在的表格，在其中输入版权声明文字：网页设计与制作课程(示例主页)建议分辨率800*600。l 选中表格，添加和导航菜单背景颜色相同的红色背景(或背景图片)，如图14.22所示。31第31页，此课件共32页哦基础篇小结基础篇小结 l使用Dreamweaver进行静态网页设计制作，包括文本的使用，图像和媒体的插入，表格和框架的应用，层和时间轴的应用，交互式表单，链接的创建和使用，CSS样式表和资源管理，模板和库等内容。第14章介绍了几个应用实例和一个静态主页的制作方法。读者可以从中体会各种技术在网页设计制作中的具体应用和静态网页的制作流程。在拓展篇当中，还将介绍如何使用美化网页的相关工具、动态网页制作等更高级的网页设计和制作技术。32第32页，此课件共32页哦