网页制作教程课件PPT
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
❖
知识就是力量，而这 力量又来自于我们对知识 的渴求！
❖ 1、为什么学习本课程？ ❖ 2、我怎么教你们？ ❖ 3、你们怎么学？ ❖ 4、如何获得学分又获得知识？
基本概念
❖ 1、什么是网页？ ❖ 2、网页有哪些构成要素？ ❖ 3、常用网页设计工具有哪些？ ❖ 4、网站怎么做？
❖ 第一部分： MS FrontPage 2003 应用 ❖ 第二部分： Flash 2004 动画制作 ❖ 第三部分：网站建设一条龙 ❖ 第四部分：实际技能训练 ❖ 第五部分：Dreamweaver简单应用 ❖ 第六部分：免费网页空间申请
❖ </marquee>
4、滚动图片：利用滚动字幕制作滚 动图片，并实现超Βιβλιοθήκη Baidu链接。
❖ <marquee direction=left width="969" >
❖ <table border=0>
❖ <tr>
❖ <td>动态滚动图片</td>
❖ <td><a href =redian.htm><img border="0" src="dog17.gif" ></a></td>
观看教 学网站
第一部分：
Microsoft Office FrontPage 2003
应用
一、如何启动FrontPage 2003
1、开机：进入windows（2000/2003/XP） 2、进入：用鼠标左键单击“开始”按钮，选
择“程序” 下面的 “Microsoft Office ” / “Microsoft Office FrontPage 2003 ” ❖ 3、新建：单击命令菜单栏中的“文件”，选 择“新建”，在屏幕的右面出现一个“新建” 工具栏，选择“新建网页”下的 “空白网 页”，于是一个新的网页 “new_page_1.htm”就产生了。
❖ <marquee direction =up onmouseover="this.stop()" onmouseout="this.start() “ scrollamount="2" >
❖ <a href =redian.htm> 这是我的滚动字幕<br> </a> ❖ <a href =biaoge.htm>这是第二行字幕<br> </a> ❖ <a href =donghuaZZ.htm>这是第三行字幕</a>
二、编辑网页
1、输入汉字：在新建的“new_page_1.htm” 页面上输入汉字信息，并进行字体、字号、 颜色等相关修饰。
2、插入图片：在当前页面上“插入”图片， 请单击“命令菜单”下的“插入”/“图 片”/“来自文件（或剪贴画）”，选择一张 图片，单击“确定”。
二、编辑网页
3、预览：单击屏幕左下角的“预览”按钮，于是新 网页在浏览器下的显示效果就出现了。再单击“设 计”返回页面设计状态，可以继续修改。也可以单 击菜单栏“文件”下的“在浏览器中预览/ Microsoft Internet Explorer”或直接按<F12>键可 以在IE下预览制作的网页。
❖ 2、修改代码（红色是要添加的代码！）
❖
<marquee direction =up>
❖
这是我的滚动字幕<br>
❖
这是第二行字幕<br>
❖
这是第三行字幕
❖
</marquee>
❖ 思考：如果想让文字自上向下滚动怎么办？down
五、制作滚动字幕
❖ 3、鼠标悬停：如何在滚动字幕上实现：当鼠标悬 在上面时就停止滚动，按下时就实现超级链接，离 开时继续滚动，下面粉色代码为实现代码。也可以 直接用下面代码替换原来的代码。
❖ <td><img border="0" src="man4.gif" width="77" height="78"></td>
❖ <td>第7个单元格</td>
❖ <td>第8个单元格</td>
❖ <td><a href =yinyue.htm><img border="0" src="dog15.gif" ></a></td>
❖ 5、主题：选择“格式/主题”，从右侧选择一 种样式，会改变整体网页的背景效果。
❖ 6、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。
❖ 7、交互按钮：单击“插入/交互式按钮”，可 以自制特色按钮。
❖ <td><a href =yinyue.htm><img border="0" src="dog15.gif" ></a></td>
❖ <td><img border="0" src="pirate.gif" width="84" height="115"></td>
❖ <td>第5个单元格</td>
4、保存：单击 “文件”/“保存”，为文件起个名字， 并修改“保存位置”为D盘上“座号姓名”文件夹， 然后单击“确定”。这样所有网页使用的文件都放 在这个文件夹中，便于使用和管理。
例如：888张三
三、修饰网页
❖ 1、网页标题：选定一个网页，单击“格式/ 背景/常规/标题” ，在文本框中输入网页标题。
❖ 4、在弹出的“插入超链接”对话框的“地址”栏 中输入要热点链接的网页地址即可。
❖ 5、小技巧：使热点区域具有文字提示功能：在 “插入超链接”对话框中的“要显示的文字”栏后 面有个“屏幕提示”按钮，然后输入要出现的提示 文字。
五、制作滚动字幕
❖ 1、插入：在网页空白处：单击：“插入/web组件/ 滚动字幕”，输入要显示的信息。
❖ 8、多媒体：单击“插入/图片/flash影片 （swf类型文件）或视频（rm、mp3）”，然 后链接到相应文件即可。
四、图片热点链接
❖ 1、单击“视图”/“工具栏”/“图片”，弹出图片修 饰工具栏；
❖ 2、选中页面上要进行热点链接的图片； ❖ 3、单击图片工具栏上的“多边形热点”，用鼠标
画出要进行热点链接的区域，并使其封闭
❖ 2、背景音乐：为网页添加背景音乐，可以单 击“格式/背景/常规/背景音乐” ，再单击“浏 览”找到你喜欢的音乐。
❖ 3、超链接：选择一段文字，单击右键，选择 “超链接”，选定要链接的网页，确定。
❖ 4、网页过渡：从一个网页过渡到另一个网页 的效果，可以单击“格式/网页过渡/过渡效 果” 。
三、修饰网页
知识就是力量，而这 力量又来自于我们对知识 的渴求！
❖ 1、为什么学习本课程？ ❖ 2、我怎么教你们？ ❖ 3、你们怎么学？ ❖ 4、如何获得学分又获得知识？
基本概念
❖ 1、什么是网页？ ❖ 2、网页有哪些构成要素？ ❖ 3、常用网页设计工具有哪些？ ❖ 4、网站怎么做？
❖ 第一部分： MS FrontPage 2003 应用 ❖ 第二部分： Flash 2004 动画制作 ❖ 第三部分：网站建设一条龙 ❖ 第四部分：实际技能训练 ❖ 第五部分：Dreamweaver简单应用 ❖ 第六部分：免费网页空间申请
❖ </marquee>
4、滚动图片：利用滚动字幕制作滚 动图片，并实现超Βιβλιοθήκη Baidu链接。
❖ <marquee direction=left width="969" >
❖ <table border=0>
❖ <tr>
❖ <td>动态滚动图片</td>
❖ <td><a href =redian.htm><img border="0" src="dog17.gif" ></a></td>
观看教 学网站
第一部分：
Microsoft Office FrontPage 2003
应用
一、如何启动FrontPage 2003
1、开机：进入windows（2000/2003/XP） 2、进入：用鼠标左键单击“开始”按钮，选
择“程序” 下面的 “Microsoft Office ” / “Microsoft Office FrontPage 2003 ” ❖ 3、新建：单击命令菜单栏中的“文件”，选 择“新建”，在屏幕的右面出现一个“新建” 工具栏，选择“新建网页”下的 “空白网 页”，于是一个新的网页 “new_page_1.htm”就产生了。
❖ <marquee direction =up onmouseover="this.stop()" onmouseout="this.start() “ scrollamount="2" >
❖ <a href =redian.htm> 这是我的滚动字幕<br> </a> ❖ <a href =biaoge.htm>这是第二行字幕<br> </a> ❖ <a href =donghuaZZ.htm>这是第三行字幕</a>
二、编辑网页
1、输入汉字：在新建的“new_page_1.htm” 页面上输入汉字信息，并进行字体、字号、 颜色等相关修饰。
2、插入图片：在当前页面上“插入”图片， 请单击“命令菜单”下的“插入”/“图 片”/“来自文件（或剪贴画）”，选择一张 图片，单击“确定”。
二、编辑网页
3、预览：单击屏幕左下角的“预览”按钮，于是新 网页在浏览器下的显示效果就出现了。再单击“设 计”返回页面设计状态，可以继续修改。也可以单 击菜单栏“文件”下的“在浏览器中预览/ Microsoft Internet Explorer”或直接按<F12>键可 以在IE下预览制作的网页。
❖ 2、修改代码（红色是要添加的代码！）
❖
<marquee direction =up>
❖
这是我的滚动字幕<br>
❖
这是第二行字幕<br>
❖
这是第三行字幕
❖
</marquee>
❖ 思考：如果想让文字自上向下滚动怎么办？down
五、制作滚动字幕
❖ 3、鼠标悬停：如何在滚动字幕上实现：当鼠标悬 在上面时就停止滚动，按下时就实现超级链接，离 开时继续滚动，下面粉色代码为实现代码。也可以 直接用下面代码替换原来的代码。
❖ <td><img border="0" src="man4.gif" width="77" height="78"></td>
❖ <td>第7个单元格</td>
❖ <td>第8个单元格</td>
❖ <td><a href =yinyue.htm><img border="0" src="dog15.gif" ></a></td>
❖ 5、主题：选择“格式/主题”，从右侧选择一 种样式，会改变整体网页的背景效果。
❖ 6、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。
❖ 7、交互按钮：单击“插入/交互式按钮”，可 以自制特色按钮。
❖ <td><a href =yinyue.htm><img border="0" src="dog15.gif" ></a></td>
❖ <td><img border="0" src="pirate.gif" width="84" height="115"></td>
❖ <td>第5个单元格</td>
4、保存：单击 “文件”/“保存”，为文件起个名字， 并修改“保存位置”为D盘上“座号姓名”文件夹， 然后单击“确定”。这样所有网页使用的文件都放 在这个文件夹中，便于使用和管理。
例如：888张三
三、修饰网页
❖ 1、网页标题：选定一个网页，单击“格式/ 背景/常规/标题” ，在文本框中输入网页标题。
❖ 4、在弹出的“插入超链接”对话框的“地址”栏 中输入要热点链接的网页地址即可。
❖ 5、小技巧：使热点区域具有文字提示功能：在 “插入超链接”对话框中的“要显示的文字”栏后 面有个“屏幕提示”按钮，然后输入要出现的提示 文字。
五、制作滚动字幕
❖ 1、插入：在网页空白处：单击：“插入/web组件/ 滚动字幕”，输入要显示的信息。
❖ 8、多媒体：单击“插入/图片/flash影片 （swf类型文件）或视频（rm、mp3）”，然 后链接到相应文件即可。
四、图片热点链接
❖ 1、单击“视图”/“工具栏”/“图片”，弹出图片修 饰工具栏；
❖ 2、选中页面上要进行热点链接的图片； ❖ 3、单击图片工具栏上的“多边形热点”，用鼠标
画出要进行热点链接的区域，并使其封闭
❖ 2、背景音乐：为网页添加背景音乐，可以单 击“格式/背景/常规/背景音乐” ，再单击“浏 览”找到你喜欢的音乐。
❖ 3、超链接：选择一段文字，单击右键，选择 “超链接”，选定要链接的网页，确定。
❖ 4、网页过渡：从一个网页过渡到另一个网页 的效果，可以单击“格式/网页过渡/过渡效 果” 。
三、修饰网页