1 / 139

网页制作

网页制作. 第三章 动态网页制作技术. 3.1 使用层与行为制作可移动的面板. 第三章 动态网页制作技术. 3.2 使用 CSS 制作一个背景图片居中固定的页面. 第三章 动态网页制作技术. 〓 制作过程详解 〓 1. 新建文件（ css_bjgd.html ） 2. 在新建网页文件中输入一篇较长的文章，需要产生下拉条。 3. 设置 CSS 样式 ① 调出 CSS 样式面板 方法一：菜单 【 窗口 】 —>【CSS 样式 】 方法二：快捷键 Shift+F11 打开 CSS 样式面板

loren
Download Presentation

网页制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页制作

  2. 第三章 动态网页制作技术 3.1 使用层与行为制作可移动的面板

  3. 第三章 动态网页制作技术 3.2 使用CSS制作一个背景图片居中固定的页面

  4. 第三章 动态网页制作技术 〓制作过程详解〓 1.新建文件（css_bjgd.html） 2.在新建网页文件中输入一篇较长的文章，需要产生下拉条。 3. 设置CSS样式 ① 调出CSS样式面板 方法一：菜单【窗口】—>【CSS样式】 方法二：快捷键Shift+F11 打开CSS样式面板 ② 设置CSS样式(.hg) 单击【新建CSS样式】按钮 ，在弹出的【新建CSS规则】对话框中设置各参数，具体见下图：

  5. 第三章 动态网页制作技术 〓制作过程详解〓 设置完毕后，单击‘确定’ —>在弹出的【.hg的CSS样式定义】对话框中做如下设置：

  6. 第三章 动态网页制作技术 〓制作过程详解〓 设置完毕后，单击‘确定’

  7. 第三章 动态网页制作技术 〓制作过程详解〓 ③ 运用CSS样式(.hg) 选择文本，在【属性】面板中单击【样式】后的下拉条， 选择【.hg】样式。 ④ 新建CSS样式(body) 单击【新建CSS样式】按钮 ，在弹出的【新建CSS规则】对话框中设置各参数，具体见下图：

  8. 第三章 动态网页制作技术 〓制作过程详解〓 设置完毕后，单击【确定】按钮，在弹出的【body的CSS样式定义】对话框中做如下设置： 单击【确定】完成设置。 4、保存文件，并浏览效果。

  9. 第三章 动态网页制作技术 3.3 利用层制作网页动画---相思落叶动画

  10. 第三章 动态网页制作技术 〓制作过程详解〓 1.新建文件（相思落叶.html） 2.创建表格 单击【常用】选项卡中的【表格】按钮，创建一个1行1列的表格，并且在其中插入素材图片yz.gif。 3.创建层 单击【布局】选项卡中的【绘制层】按钮 创建层，将光标放置在层中，单击【常用】选项卡中的【图像】按钮 ，选择素材图片 ly1.gif,依据图像大小设置层大小。并将该层拖到落叶的起始位置。 4.设置层的记录路径 ①执行【窗口】—>【时间轴】命令，或者按Alt+F9快捷键打开【时间轴】控制面板。

  11. 第三章 动态网页制作技术 〓制作过程详解〓 ②选择刚新建的层并且右击，选择【记录路径】命令。 ③选中层，按下鼠标，并且向左下角拖动层，这时在拖动的过程中会显示灰色的路径。(注意：将层拖动至图片外围，这样才会有落叶消失的效果。) 5.创建N个层 依据步骤3、4中的方法，再创建N个层，在不同的层中分别插入ly1.gif和ly2.gif图片，使画面效果更加丰富。 6.设置时间轴的属性 在【时间轴】面板中启动【自动播放】和【循环】。 7.保存文件，浏览文件动画效果。

  12. 第三章 动态网页制作技术 作业 依据本案例制作原理制作动画效果页面。

  13. 第三章 动态网页制作技术 3.4 制作产品展示窗口

  14. 第四章 动态网页制作技术 〓制作过程详解〓

  15. 第三章 动态网页制作技术 〓制作过程详解〓 1.新建文件（产品展示.html） 2.页面属性设置 设置页面上、下、左、右边距为0，背景图像为bj.gif。 3.新建样式 .style2 ①调出CSS面板：【窗口】—>【CSS样式】 ②点击CSS面板中的【新建CSS规则】图标—>【新建CSS规则】对话框中设置【选择器类型】为“类”、【名称】为.style2、【定义在】为“仅对该文档”。—>【确定】 ③【.style2的规则定义】对话框—>【类型】选项卡—>设置：【大小】为12px，【粗细】为粗体，【颜色】为#FFFFFF—>【确定】

  16. 第三章 动态网页制作技术 〓制作过程详解〓 4.插入主菜单表格 ①新建一个2行6列的表格。(参数为：宽度为780像素，边框、边距、间距均为0，居中对齐，背景颜色为#FFFFFF。) ②在第1行最后一个单元格设置该单元格对齐方式为：水平【居中对齐】，垂直【顶端】；设置背景图片为“images\HY_06.gif”。 在该单元格中插入一个2行1列的表格。(参数为：宽度为80%，边框、边距、间距均为0) 设置插入表格第1行高为21，第2行高为5。第1行输入文字“HOME-MAIL-FAVORITES”，采用样式“style2”。 ③在第1行第1个单元格插入图片“images\HY-01.gif” 在第1行第2个单元格中插入图片“images\HY-02.gif” 在第1行第3个单元格中插入图片“images\HY-03.gif”

  17. 第三章 动态网页制作技术 〓制作过程详解〓 在第1行第4个单元格中插入图片“images\HY-04.gif” 在第1行第5个单元格中插入图片“images\HY-05.gif” ④表格第2行“合并单元格” 5.插入Banner表格 ①新建一个1行1列的表格(宽度为780像素，边框、边距、间距均为0，居中对齐，背景颜色为#FFFFFF) ②设置表格高度为200。 ③插入图片“images\HY-07.gif”。 6.插入产品显示部分表格 ①新建一个1行4列的表格(宽度为780像素，边框、边距、间距均为0，居中对齐，背景颜色为#FFFFFF)

  18. 第三章 动态网页制作技术 〓制作过程详解〓 ②在第一个单元格中插入表格9行2列（宽度为170，边框、边距、间距均为0，居中对齐）；设置该表格在单元格中为水平顶端对齐； 依次做如下操作： 单元格(1,1)插入图片“images\hy-17.gif” 单元格(1,2)插入图片“images\hy-10.gif” 第2行合并单元格 单元格(3,1)(4,1)(5,1)(6,1)(7,1)均插入图片“images\ hy-26.gif” 单元格(3,2)(4,2)(5,2)(6,2)(7,2)分别输入文字“台式电脑” “笔记本电脑”“MP3”“MP4”“手机”。 第8行合并单元格，行高设置为50 第9行合并单元格，插入图片“images\hy-39.gif”

  19. 第三章 动态网页制作技术 〓制作过程详解〓 ③设置第2个单元格宽度为29。 ④设置第3个单元格宽度为484，【垂直】为“顶端”。 插入一个7行3列的表格(宽度100%，边框、边距、间距均为0，居中对齐)。 对该表格做如下设置： 第1行：合并单元格，行高60，插入图片“images\CPZS.gif”(高30,宽548)。 第2行：合并单元格，行高80，【垂直】为“顶端对齐”，插入图片“images\zs.gif” (高62,宽548)。 第3行单元格分别插入图片TU001.jpg，TU002.jpg，TU003.jpg。 第4行单元格分别输入文字：台式电脑1、台式电脑2、笔记本电脑 (字体大小为9pt,居中对齐、颜色为#999999)。

  20. 第三章 动态网页制作技术 〓制作过程详解〓 第5行单元格分别插入图片TU005.jpg，TU006.jpg，TU007.jpg 第6行单元格分别输入文字：MP3、MP4、手机(字体大小为9pt,居中对齐、颜色为#999999)。 7.插入版权信息部分表格 ①插入一个1行1列的表格（宽度780像素，居中对齐，边框、边距、间距均为0，背景颜色为#FFFFFF） ②输入文字，居中对齐，字体大小为12px，颜色#2E2E2E。 8.保存文件，浏览网页。

  21. 第三章 动态网页制作技术 3.5 制作产品放大页面

  22. 第三章 动态网页制作技术 〓制作过程详解〓

  23. 〓制作过程详解〓 1.打开产品展示.html文件。 2.插入层layer1 ①在【插入】菜单栏中，单击【插入】—>【布局】—>【绘制层】，插入一个层。 ②将光标移到层内，在【插入】菜单栏中，单击【常用】—>【图像】按钮，插入图片“images\TU0006.jpg” ③调整层的大小及位置，使其完全覆盖在表格内的同样的缩小的图片上。 3.插入层layer2 ①在【插入】菜单栏中，单击【插入】—>【布局】—>【绘制层】，插入一个层。

  24. 〓制作过程详解〓 ②将光标移到层内，在【插入】菜单栏中，单击【常用】—>【图像】按钮，插入图片“images\TU0006.jpg” ③调整层的大小，使其比层layer1大，同时，调整图片大小与层大小相同。 4.添加层“layer1”的行为onMouseOver ①执行【窗口】—>【层】命令，打开【层】面板，在面板上选中 “layer2”层，单击【名称】左边的眼睛形状的图标，在下面窗口中就会显示一个眼睛形状的图标，如果显示的“眼睛”是睁开状态，再次单击图标，使得其处于闭合状态，用来隐藏图片。 ②执行【窗口】—>【行为】命令，打开【行为】面板，选中面板中的“layer1”层，单击【行为】面板中的【添加行为】按钮 ，在弹出的下拉菜单中执行【显示-隐藏层】命令。

  25. 〓制作过程详解〓 ③弹出【显示-隐藏层】对话框，在上面选中层“layer2”，在对话框中单击【显示】按钮，就会在选中的层后面自动添加“(显示)”，单击【确定】按钮。(如下图)

  26. 〓制作过程详解〓 ④此时可以看到在【行为】面板中添加了onLoad事件和【显示-隐藏层】动作，选中该行为，单击事件后面的下拉菜单，从中选择 OnMouseOver事件。(如下图)

  27. 〓制作过程详解〓 4.添加层“layer2”的行为onMouseOut ①在【层】面板中选中“layer2”层，此时页面上该层处于选中状态，单击【行为】面板中的【添加行为】按钮，在弹出的下拉菜单中执行【显示-隐藏层】命令。 ②弹出【显示-隐藏层】对话框，在上面选中层“layer2”，在对话框中单击【隐藏】按钮，就会在选中的层后面自动添加“(隐藏)”，单击【确定】按钮。(如下图)

  28. 〓制作过程详解〓 ③此时可以看到在【行为】面板中添加了onLoad事件和【显示-隐藏层】动作，选中该行为，单击事件后面的下拉菜单，从中选择 OnMouseOut事件。 5.保存文件为“产品放大展示.html”并预览。

  29. 第四章 动态网页制作技术 3.6 制作产品介绍窗口 最终效果(产品介绍窗口.html、 产品介绍.html)

  30. 〓制作过程详解〓 1.打开“产品展示.html”文件并另存为 “产品介绍.html”。 2.新建“产品介绍窗口.html”页面 ①新建空白页面，保存文件名为“产品介绍窗口.html”。 ②设置【页面属性】中的【左边距】、【右边距】、【上边距】和【下边距】均为0像素。 ③设置【标题】为“手机详细介绍”。 3.插入表格 ①在【插入】菜单栏中，单击【常用】—>【表格】，插入一个表格。 ②在弹出的【表格】属性对话框中设置：行15，列2，宽度300像素。

  31. 〓制作过程详解〓 4.调整表格 ①将第1行中所有单元格合并为一个单元格，再单击【图像】菜单按钮，插入图片“HY数码商城\TU007.jpg”。 ②将第2行、第7行和第11行的所有单元格分别合并成一个单元格。然后设置相同的属性参数：高30，背景颜色#ACEBFF。 ③依次在第2行、第7行和第11行的单元格中输入产品信息的类型(依次为：三星SCH-W120基本属性、三星SCH-W120外观设计、三星SCH-W120显示屏幕)。 ④新建名为“.style1”的CSS样式。 【新建CSS规则】—>【选择器类型】为类，【名称】为.style1，【定义在】仅对该文档—>【确定】。

  32. 〓制作过程详解〓 ⑤在【.style1的CSS规则定义】对话框的【类型】中做如下设置： 【大小】为14像素，【粗细】为粗体。 ⑥将第2行、第7行和第11行的单元格中的文本采用“.style1”样式。 ⑦设置第3行第1列单元格的宽度为100，高度为22，第3行第2列单元格的宽度为200。然后分别设置第4行至第6行、第8行至第10行、第12行至第14行中的单元格高度为22。接着设置第4行、第6行、第9行、第13行的背景颜色为#EEEEEE。 ⑧在刚设置的单元格中输入产品具体文本信息。 (具体文本信息如右图所示)

  33. 〓制作过程详解〓 ⑨新建名为“.style2”的CSS样式。 【新建CSS规则】—>【选择器类型】为类，【名称】为.style2，【定义在】仅对该文档—>【确定】。 ⑩在【.style2的CSS规则定义】对话框的【类型】中做如下设置： 【大小】为14像素，【文本颜色】为#333333。 设置完后，将产品具体文本信息的文本均采用“.style2”样式。 5.添加行为 ①打开文件“产品介绍.html”。 ②选中手机图片，执行【窗口】—>【行为】命令(或快捷键Shift+F4)，在打开的【行为】面板中，单击【添加行为】按钮，执行快捷菜单中的【打开浏览器窗口】命令。

  34. 〓制作过程详解〓 ③在弹出的【打开浏览器窗口】中，单击【要显示的URL】右侧的【浏览】按钮，选择“产品介绍窗口.html”文件，设置窗口宽度和窗口高度为320*360像素，启用【需要时使用滚动条】属性，【窗口名称】为“产品详细介绍”。 ④完成后可以看到【行为】面板中添加了【打开浏览器窗口】，它的默认事件是onLoad，将其更改为onClick，也就是鼠标单击对象。接着为选中的手机图片添加空链接，即：在【属性】面板的【链接】输入框中输入“#”。 6.保存文件，并浏览。

  35. 作业： 1、制作产品放大效果页面。 2、制作产品介绍窗口页面。 (注：以上作业可自由收集素材制作)

  36. 行为集锦 1、交换图像 (1)【插入】——>【图像】——>选定01.jpg (2)【窗口】——>【行为】 (3)【行为】面板——>选择【交换图像】行为——>【交换图像】对话框中‘设置原始档为’图片02.jpg——>设置行为的触发事件为：onMouseOut 恢复交换图像；onMouseOver 交换图像。

  37. 行为集锦 2、为文字添加背景音乐 选定网页中一段文字，在【行为】面板中选择【播放声音】行为，在【播放声音】对话框中设置音乐文件。设置播放声音的触发事件是onClick。

  38. 行为集锦 3、改变属性 插入层，设置层的背景色为#CAEEE0。 选中层，【行为】面板中选择【改变属性】行为，弹出【改变属性】对话框，设置：元素类型为LAYER，元素ID为layer“Layer1”，属性选择style.backgroundcolor，新的值为#66CCCC。改变行为“改变属性”的触发事件为“OnMouseOver”。

  39. 选中第一个层，【行为】面板中选择【改变属性】行为，弹出【改变属性】对话框，设置：对象类型为LAYER，命名对象为layer “Layer1”，属性选择style.backgroundcolor IE4，新的值为#CAEEE0。改变行为“改变属性”的触发事件为“OnMouseOut”。

  40. 行为集锦 4、改变属性 选择<body>标签，在【行为】面板中选择【检查插件】行为，设置插件选择为【flash】设置“如果有，转到URL”页面文件设置“否则，转到URL”页面文件

  41. 行为集锦 5、表单检查 在素材网页文件中输入文字“请输入1~9的数字：”，插入文本框控件以及提交按钮； 选择文本框控件，在【行为】面板中选择【表单检查】，设置“可接受：数字从1到9”，点击【确定】。

  42. 行为集锦 6、导航栏图像行为 在素材网页文件左侧的导航栏中选择导航栏图像，在【行为】面板中选择【设置导航栏图像】，在弹出的对话框中设置“状态图像”为1.gif、“鼠标经过图像”为2.gif、“按下图像”为3.gif、“按下时鼠标经过图像”为4.gif；设置“按下时前往的URL”为link.html。

  43. 3.7 使用时间轴、层、行为制作可控的动态诗卷 最终效果(timeline.html)

  44. 〓制作过程点睛〓 1.新建文件（timeline.html） 2.绘制层(apDiv1) 使用【绘制层】功能在页面绘制一个层，名称为apDiv1，设置层的背景图片，使层的大小与背景图片的大小相同。 3.在层(apDiv1)中插入层(apDiv2) 调整层(apDiv2)略小于层(apDiv1)。 4.新建CSS样式(.divbk) 新建一个新的CSS类样式，其参数为：上下左右边框样式为“实线”、宽度为“2px”、颜色为“#ffffff” 5.应用CSS样式(.divbk) 在层(apDiv2)中应用CSS样式(.divbk)

  45. 〓制作过程点睛〓 6.插入层(apDiv3) 在层(apDiv2)中插入层(apDiv3)，调整该层略小于层(apDiv2),并将其放在层‘apDiv2’左侧。 在层(apDiv3)中插入一首篇幅长的诗（注：插入文字后会将层撑大，不要调整层大小。） 7.添加样式代码(.text) 切换到‘代码’视图，添加代码 .text { writing-mode:tb-rl; } 切换到‘设计’视图，选中层(apDiv3)，在【属性】面板的【类】选项中将‘text’样式附加到该层。

  46. 〓制作过程点睛〓 8.向层(apDiv3) 中添加动态行为 选中层(apDiv3)，右击层边框任意位置，在弹出的菜单中选择【添加到时间轴】(或 执行菜单【修改】—>【时间轴】—>【增加对象到时间轴】)。 这样操作后，在【属性】面板下方会自动出现【时间轴】面板，同时层(apDiv3)也被添加到时间轴中。 9.设置层(apDiv3)的时间轴属性 ①用鼠标按住‘apDiv3’右侧的句柄(关键帧)，向右方拖动到75帧，代表这段动画为75帧长。 ②用鼠标点击第20帧位置，右键单击，在弹出的菜单中选择【增加关键帧】，则在该位置增加一个关键帧。 ③选中该关键帧，在网页‘设计’视图区域拖动层(apDiv3)到任意位

  47. 〓制作过程点睛〓 置，会发现有一条线和层连着，这条就是层的运动路径。 ④运用同样方法可以分别在第40帧、第60帧处添加关键帧。 ⑤在第75帧设置关键帧，将层(apDiv3)拖动到右侧。 ⑥完成以上关键帧的创建后，可通过拖动时间轴上的红色格子看到动画效果。 ⑦设置【时间轴】面板中Fps为15，并选中【自动播放】和【循环】。 ⑧选择层(apDiv2)，在【属性】面板中设置【溢出】为‘hidden(隐藏)’。 (注：该设置的效果为隐藏所有超出该层的数据(包括子图层)。) 10. 添加停止\播放按钮 ①在网页任意位置插入文字“播放”和“停止”，并分别选中，在【属性】面板中将其超级链接设置为“#”(即：空链接)。

  48. 〓制作过程点睛〓 ②选择‘停止’，使用快捷键Sthift+F4打开【行为】面板，在弹出的菜单中选择【时间轴】—>【停止时间轴】，弹出【停止时间轴】对话框，在其中选择默认的‘所有时间轴’—>【确定】。 ③选择‘播放’，使用快捷键Sthift+F4打开【行为】面板，在弹出的菜单中选择【时间轴】—>【播放时间轴】，弹出【播放时间轴】对话框，在其中选择默认的时间轴—>【确定】。 11. 保存文件，并预览。

  49. HTML——CSS样式 一、CSS基本概念 CSS是Cascading Style Sheet的缩写，一般称为“层叠样式表”或“级联样式表”。使用CSS能简化网页的格式代码，加快下载显示速度，也减少需要上传的代码数量，从而大大减少了重复劳动的工作量。 层叠样式表（CSS）是一系列格式设置规则，主要用于控制Web页面内容的外观。 使用CSS设置页码格式时，会将页面内容与表现形式分开。页面内容（HTML代码）驻留在HTML文件自身中，而用于定义代码表现形式的CSS形式则驻留在另一个文件（外部样式表）或HTML文档的另一个部分（通常为文件头部分）中。

More Related