1.39k likes | 1.57k Views
网页制作. 第三章 动态网页制作技术. 3.1 使用层与行为制作可移动的面板. 第三章 动态网页制作技术. 3.2 使用 CSS 制作一个背景图片居中固定的页面. 第三章 动态网页制作技术. 〓 制作过程详解 〓 1. 新建文件( css_bjgd.html ) 2. 在新建网页文件中输入一篇较长的文章,需要产生下拉条。 3. 设置 CSS 样式 ① 调出 CSS 样式面板 方法一:菜单 【 窗口 】 —>【CSS 样式 】 方法二:快捷键 Shift+F11 打开 CSS 样式面板
E N D
第三章 动态网页制作技术 3.1 使用层与行为制作可移动的面板
第三章 动态网页制作技术 3.2 使用CSS制作一个背景图片居中固定的页面
第三章 动态网页制作技术 〓制作过程详解〓 1.新建文件(css_bjgd.html) 2.在新建网页文件中输入一篇较长的文章,需要产生下拉条。 3. 设置CSS样式 ① 调出CSS样式面板 方法一:菜单【窗口】—>【CSS样式】 方法二:快捷键Shift+F11 打开CSS样式面板 ② 设置CSS样式(.hg) 单击【新建CSS样式】按钮 ,在弹出的【新建CSS规则】对话框中设置各参数,具体见下图:
第三章 动态网页制作技术 〓制作过程详解〓 设置完毕后,单击‘确定’ —>在弹出的【.hg的CSS样式定义】对话框中做如下设置:
第三章 动态网页制作技术 〓制作过程详解〓 设置完毕后,单击‘确定’
第三章 动态网页制作技术 〓制作过程详解〓 ③ 运用CSS样式(.hg) 选择文本,在【属性】面板中单击【样式】后的下拉条, 选择【.hg】样式。 ④ 新建CSS样式(body) 单击【新建CSS样式】按钮 ,在弹出的【新建CSS规则】对话框中设置各参数,具体见下图:
第三章 动态网页制作技术 〓制作过程详解〓 设置完毕后,单击【确定】按钮,在弹出的【body的CSS样式定义】对话框中做如下设置: 单击【确定】完成设置。 4、保存文件,并浏览效果。
第三章 动态网页制作技术 3.3 利用层制作网页动画---相思落叶动画
第三章 动态网页制作技术 〓制作过程详解〓 1.新建文件(相思落叶.html) 2.创建表格 单击【常用】选项卡中的【表格】按钮,创建一个1行1列的表格,并且在其中插入素材图片yz.gif。 3.创建层 单击【布局】选项卡中的【绘制层】按钮 创建层,将光标放置在层中,单击【常用】选项卡中的【图像】按钮 ,选择素材图片 ly1.gif,依据图像大小设置层大小。并将该层拖到落叶的起始位置。 4.设置层的记录路径 ①执行【窗口】—>【时间轴】命令,或者按Alt+F9快捷键打开【时间轴】控制面板。
第三章 动态网页制作技术 〓制作过程详解〓 ②选择刚新建的层并且右击,选择【记录路径】命令。 ③选中层,按下鼠标,并且向左下角拖动层,这时在拖动的过程中会显示灰色的路径。(注意:将层拖动至图片外围,这样才会有落叶消失的效果。) 5.创建N个层 依据步骤3、4中的方法,再创建N个层,在不同的层中分别插入ly1.gif和ly2.gif图片,使画面效果更加丰富。 6.设置时间轴的属性 在【时间轴】面板中启动【自动播放】和【循环】。 7.保存文件,浏览文件动画效果。
第三章 动态网页制作技术 作业 依据本案例制作原理制作动画效果页面。
第三章 动态网页制作技术 3.4 制作产品展示窗口
第四章 动态网页制作技术 〓制作过程详解〓
第三章 动态网页制作技术 〓制作过程详解〓 1.新建文件(产品展示.html) 2.页面属性设置 设置页面上、下、左、右边距为0,背景图像为bj.gif。 3.新建样式 .style2 ①调出CSS面板:【窗口】—>【CSS样式】 ②点击CSS面板中的【新建CSS规则】图标—>【新建CSS规则】对话框中设置【选择器类型】为“类”、【名称】为.style2、【定义在】为“仅对该文档”。—>【确定】 ③【.style2的规则定义】对话框—>【类型】选项卡—>设置:【大小】为12px,【粗细】为粗体,【颜色】为#FFFFFF—>【确定】
第三章 动态网页制作技术 〓制作过程详解〓 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”
第三章 动态网页制作技术 〓制作过程详解〓 在第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)
第三章 动态网页制作技术 〓制作过程详解〓 ②在第一个单元格中插入表格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”
第三章 动态网页制作技术 〓制作过程详解〓 ③设置第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)。
第三章 动态网页制作技术 〓制作过程详解〓 第5行单元格分别插入图片TU005.jpg,TU006.jpg,TU007.jpg 第6行单元格分别输入文字:MP3、MP4、手机(字体大小为9pt,居中对齐、颜色为#999999)。 7.插入版权信息部分表格 ①插入一个1行1列的表格(宽度780像素,居中对齐,边框、边距、间距均为0,背景颜色为#FFFFFF) ②输入文字,居中对齐,字体大小为12px,颜色#2E2E2E。 8.保存文件,浏览网页。
第三章 动态网页制作技术 3.5 制作产品放大页面
第三章 动态网页制作技术 〓制作过程详解〓
〓制作过程详解〓 1.打开产品展示.html文件。 2.插入层layer1 ①在【插入】菜单栏中,单击【插入】—>【布局】—>【绘制层】,插入一个层。 ②将光标移到层内,在【插入】菜单栏中,单击【常用】—>【图像】按钮,插入图片“images\TU0006.jpg” ③调整层的大小及位置,使其完全覆盖在表格内的同样的缩小的图片上。 3.插入层layer2 ①在【插入】菜单栏中,单击【插入】—>【布局】—>【绘制层】,插入一个层。
〓制作过程详解〓 ②将光标移到层内,在【插入】菜单栏中,单击【常用】—>【图像】按钮,插入图片“images\TU0006.jpg” ③调整层的大小,使其比层layer1大,同时,调整图片大小与层大小相同。 4.添加层“layer1”的行为onMouseOver ①执行【窗口】—>【层】命令,打开【层】面板,在面板上选中 “layer2”层,单击【名称】左边的眼睛形状的图标,在下面窗口中就会显示一个眼睛形状的图标,如果显示的“眼睛”是睁开状态,再次单击图标,使得其处于闭合状态,用来隐藏图片。 ②执行【窗口】—>【行为】命令,打开【行为】面板,选中面板中的“layer1”层,单击【行为】面板中的【添加行为】按钮 ,在弹出的下拉菜单中执行【显示-隐藏层】命令。
〓制作过程详解〓 ③弹出【显示-隐藏层】对话框,在上面选中层“layer2”,在对话框中单击【显示】按钮,就会在选中的层后面自动添加“(显示)”,单击【确定】按钮。(如下图)
〓制作过程详解〓 ④此时可以看到在【行为】面板中添加了onLoad事件和【显示-隐藏层】动作,选中该行为,单击事件后面的下拉菜单,从中选择 OnMouseOver事件。(如下图)
〓制作过程详解〓 4.添加层“layer2”的行为onMouseOut ①在【层】面板中选中“layer2”层,此时页面上该层处于选中状态,单击【行为】面板中的【添加行为】按钮,在弹出的下拉菜单中执行【显示-隐藏层】命令。 ②弹出【显示-隐藏层】对话框,在上面选中层“layer2”,在对话框中单击【隐藏】按钮,就会在选中的层后面自动添加“(隐藏)”,单击【确定】按钮。(如下图)
〓制作过程详解〓 ③此时可以看到在【行为】面板中添加了onLoad事件和【显示-隐藏层】动作,选中该行为,单击事件后面的下拉菜单,从中选择 OnMouseOut事件。 5.保存文件为“产品放大展示.html”并预览。
第四章 动态网页制作技术 3.6 制作产品介绍窗口 最终效果(产品介绍窗口.html、 产品介绍.html)
〓制作过程详解〓 1.打开“产品展示.html”文件并另存为 “产品介绍.html”。 2.新建“产品介绍窗口.html”页面 ①新建空白页面,保存文件名为“产品介绍窗口.html”。 ②设置【页面属性】中的【左边距】、【右边距】、【上边距】和【下边距】均为0像素。 ③设置【标题】为“手机详细介绍”。 3.插入表格 ①在【插入】菜单栏中,单击【常用】—>【表格】,插入一个表格。 ②在弹出的【表格】属性对话框中设置:行15,列2,宽度300像素。
〓制作过程详解〓 4.调整表格 ①将第1行中所有单元格合并为一个单元格,再单击【图像】菜单按钮,插入图片“HY数码商城\TU007.jpg”。 ②将第2行、第7行和第11行的所有单元格分别合并成一个单元格。然后设置相同的属性参数:高30,背景颜色#ACEBFF。 ③依次在第2行、第7行和第11行的单元格中输入产品信息的类型(依次为:三星SCH-W120基本属性、三星SCH-W120外观设计、三星SCH-W120显示屏幕)。 ④新建名为“.style1”的CSS样式。 【新建CSS规则】—>【选择器类型】为类,【名称】为.style1,【定义在】仅对该文档—>【确定】。
〓制作过程详解〓 ⑤在【.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。 ⑧在刚设置的单元格中输入产品具体文本信息。 (具体文本信息如右图所示)
〓制作过程详解〓 ⑨新建名为“.style2”的CSS样式。 【新建CSS规则】—>【选择器类型】为类,【名称】为.style2,【定义在】仅对该文档—>【确定】。 ⑩在【.style2的CSS规则定义】对话框的【类型】中做如下设置: 【大小】为14像素,【文本颜色】为#333333。 设置完后,将产品具体文本信息的文本均采用“.style2”样式。 5.添加行为 ①打开文件“产品介绍.html”。 ②选中手机图片,执行【窗口】—>【行为】命令(或快捷键Shift+F4),在打开的【行为】面板中,单击【添加行为】按钮,执行快捷菜单中的【打开浏览器窗口】命令。
〓制作过程详解〓 ③在弹出的【打开浏览器窗口】中,单击【要显示的URL】右侧的【浏览】按钮,选择“产品介绍窗口.html”文件,设置窗口宽度和窗口高度为320*360像素,启用【需要时使用滚动条】属性,【窗口名称】为“产品详细介绍”。 ④完成后可以看到【行为】面板中添加了【打开浏览器窗口】,它的默认事件是onLoad,将其更改为onClick,也就是鼠标单击对象。接着为选中的手机图片添加空链接,即:在【属性】面板的【链接】输入框中输入“#”。 6.保存文件,并浏览。
作业: 1、制作产品放大效果页面。 2、制作产品介绍窗口页面。 (注:以上作业可自由收集素材制作)
行为集锦 1、交换图像 (1)【插入】——>【图像】——>选定01.jpg (2)【窗口】——>【行为】 (3)【行为】面板——>选择【交换图像】行为——>【交换图像】对话框中‘设置原始档为’图片02.jpg——>设置行为的触发事件为:onMouseOut 恢复交换图像;onMouseOver 交换图像。
行为集锦 2、为文字添加背景音乐 选定网页中一段文字,在【行为】面板中选择【播放声音】行为,在【播放声音】对话框中设置音乐文件。设置播放声音的触发事件是onClick。
行为集锦 3、改变属性 插入层,设置层的背景色为#CAEEE0。 选中层,【行为】面板中选择【改变属性】行为,弹出【改变属性】对话框,设置:元素类型为LAYER,元素ID为layer“Layer1”,属性选择style.backgroundcolor,新的值为#66CCCC。改变行为“改变属性”的触发事件为“OnMouseOver”。
选中第一个层,【行为】面板中选择【改变属性】行为,弹出【改变属性】对话框,设置:对象类型为LAYER,命名对象为layer “Layer1”,属性选择style.backgroundcolor IE4,新的值为#CAEEE0。改变行为“改变属性”的触发事件为“OnMouseOut”。
行为集锦 4、改变属性 选择<body>标签,在【行为】面板中选择【检查插件】行为,设置插件选择为【flash】设置“如果有,转到URL”页面文件设置“否则,转到URL”页面文件
行为集锦 5、表单检查 在素材网页文件中输入文字“请输入1~9的数字:”,插入文本框控件以及提交按钮; 选择文本框控件,在【行为】面板中选择【表单检查】,设置“可接受:数字从1到9”,点击【确定】。
行为集锦 6、导航栏图像行为 在素材网页文件左侧的导航栏中选择导航栏图像,在【行为】面板中选择【设置导航栏图像】,在弹出的对话框中设置“状态图像”为1.gif、“鼠标经过图像”为2.gif、“按下图像”为3.gif、“按下时鼠标经过图像”为4.gif;设置“按下时前往的URL”为link.html。
3.7 使用时间轴、层、行为制作可控的动态诗卷 最终效果(timeline.html)
〓制作过程点睛〓 1.新建文件(timeline.html) 2.绘制层(apDiv1) 使用【绘制层】功能在页面绘制一个层,名称为apDiv1,设置层的背景图片,使层的大小与背景图片的大小相同。 3.在层(apDiv1)中插入层(apDiv2) 调整层(apDiv2)略小于层(apDiv1)。 4.新建CSS样式(.divbk) 新建一个新的CSS类样式,其参数为:上下左右边框样式为“实线”、宽度为“2px”、颜色为“#ffffff” 5.应用CSS样式(.divbk) 在层(apDiv2)中应用CSS样式(.divbk)
〓制作过程点睛〓 6.插入层(apDiv3) 在层(apDiv2)中插入层(apDiv3),调整该层略小于层(apDiv2),并将其放在层‘apDiv2’左侧。 在层(apDiv3)中插入一首篇幅长的诗(注:插入文字后会将层撑大,不要调整层大小。) 7.添加样式代码(.text) 切换到‘代码’视图,添加代码 .text { writing-mode:tb-rl; } 切换到‘设计’视图,选中层(apDiv3),在【属性】面板的【类】选项中将‘text’样式附加到该层。
〓制作过程点睛〓 8.向层(apDiv3) 中添加动态行为 选中层(apDiv3),右击层边框任意位置,在弹出的菜单中选择【添加到时间轴】(或 执行菜单【修改】—>【时间轴】—>【增加对象到时间轴】)。 这样操作后,在【属性】面板下方会自动出现【时间轴】面板,同时层(apDiv3)也被添加到时间轴中。 9.设置层(apDiv3)的时间轴属性 ①用鼠标按住‘apDiv3’右侧的句柄(关键帧),向右方拖动到75帧,代表这段动画为75帧长。 ②用鼠标点击第20帧位置,右键单击,在弹出的菜单中选择【增加关键帧】,则在该位置增加一个关键帧。 ③选中该关键帧,在网页‘设计’视图区域拖动层(apDiv3)到任意位
〓制作过程点睛〓 置,会发现有一条线和层连着,这条就是层的运动路径。 ④运用同样方法可以分别在第40帧、第60帧处添加关键帧。 ⑤在第75帧设置关键帧,将层(apDiv3)拖动到右侧。 ⑥完成以上关键帧的创建后,可通过拖动时间轴上的红色格子看到动画效果。 ⑦设置【时间轴】面板中Fps为15,并选中【自动播放】和【循环】。 ⑧选择层(apDiv2),在【属性】面板中设置【溢出】为‘hidden(隐藏)’。 (注:该设置的效果为隐藏所有超出该层的数据(包括子图层)。) 10. 添加停止\播放按钮 ①在网页任意位置插入文字“播放”和“停止”,并分别选中,在【属性】面板中将其超级链接设置为“#”(即:空链接)。
〓制作过程点睛〓 ②选择‘停止’,使用快捷键Sthift+F4打开【行为】面板,在弹出的菜单中选择【时间轴】—>【停止时间轴】,弹出【停止时间轴】对话框,在其中选择默认的‘所有时间轴’—>【确定】。 ③选择‘播放’,使用快捷键Sthift+F4打开【行为】面板,在弹出的菜单中选择【时间轴】—>【播放时间轴】,弹出【播放时间轴】对话框,在其中选择默认的时间轴—>【确定】。 11. 保存文件,并预览。
HTML——CSS样式 一、CSS基本概念 CSS是Cascading Style Sheet的缩写,一般称为“层叠样式表”或“级联样式表”。使用CSS能简化网页的格式代码,加快下载显示速度,也减少需要上传的代码数量,从而大大减少了重复劳动的工作量。 层叠样式表(CSS)是一系列格式设置规则,主要用于控制Web页面内容的外观。 使用CSS设置页码格式时,会将页面内容与表现形式分开。页面内容(HTML代码)驻留在HTML文件自身中,而用于定义代码表现形式的CSS形式则驻留在另一个文件(外部样式表)或HTML文档的另一个部分(通常为文件头部分)中。