6.2网页制作
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
添加FLASH：点击“插入”菜单---“图片”——“Flash影片
”，选中你要添加的Flash动画即可。扩展名：swf 设置FLASH属性：设置质量、大小、背景等。 制作按钮：打开“插入”菜单——“交互式按钮”对话框；
按钮类型：（1）按钮
（2）字体
（3）图像
三、修饰网页(音频、视频)
添加视频：点击“插入”菜单---“图片”——“视频”，选中
4、网站元素级别
网页1 文字 表格 网站 网页2 图片
动画
网页3
视频
二、编辑网页
新建网页：单击命令菜单栏中的“文件”，选择“新
建”，在屏幕的右面出现一个“新建”工具栏， 选择“新建网页”下的 “空白网页”，于是一个 新的网页“new_ page_ 1.htm”就产生了。
二、编辑网页
1、预览：单击屏幕左下角的“预览”按钮，于是新网页在浏 览器下的显示效果就出现了。再单击“设计”返回页面设计 状态，可以继续修改。也可以单击菜单栏“文件”下的“在 浏览器中预览/ Microsoft Internet Explorer”或直接按 <F12>键可以在IE下预览制作的网页。
三、修饰网页(表格)
新建表格：点击“表格”菜单---“插入”---“表格”对话框 删除表格：选中表格---“表格”菜单---“删除单元格”或按
DEL键即可删除
添加单元格、行和列：在“表格”菜单---“插入”---“单元格
”
删除单元格、行和列：将光标放在单元格上，点击“表格”菜单
—-“选择”---“单元格”，再点击“表格”菜单---“删 除单元格”。行和列方法相同。 选择表格、单元格、行、列：将光标放在单元格上，点击“表格” 菜单”—-“选择”---“单元格、行、列、表格”。
复制，后再粘贴即可。
移动：
方法1：选择文字，点击“编辑”菜单---“剪切 ”Ctrl+X 方法2：选择文字，按住鼠标左键拖动放到存放的位置即 可。
二、编辑网页(文本)
设置段落格式： 1、 段落间距：(1)直接按“enter”键换行，距离较大。其代
码<p>；(2)、直接按“shift+enter”键换行，距离很小 。其代码<br>； 2、插入符号：在“插入”菜单---“符号”对话框，可以添加 所需要的符号。
一种简单滚动图片制作方法1：
将下面代码放在<body>和</body>之间就可以了： <p> <marquee width="495" height="150"> 滚动图片 <img src="鸽.gif" > 图片地址和名称 <img border="0" src="旗.gif" > <img border="0" src="猪.gif" > </marquee> </p>
五、使用超级链接
使用超级链接技术可以使多个网页相互链接在一起， 方便浏览。 1、分别按照前面的方法做好主(首)页和与其链接的 子页文件（*.htm），并保存在一个文件夹中。 2、在主页上输入提示进入子页的文字，作为超链接 的按钮文字。 3、选中按钮文字，再单击“插入/超链接”，找到要 链接的文件，确定。 【主页】【框架网页】【滚动新闻】【热点链接】【 布局表格】 【网页主题】【留言薄】
*点击菜单“格式”--“主题” *点击任务窗口---“主题” *点击某个主题右击--“自定义”
3、 设计草图
二、网站
1.制作网站的流程
主题
风格
规划
版面
素材
配色
编辑
测试
上传
网站的设计原则
1）目标明确，重点突出 2）主题鲜明，层次清晰 3）合理设置栏目 4）正确定位整体风格 5）页面布局合理 6）色彩搭配，和谐统一 7）多媒体功能适当应用。
思考题：1、如何从子页中返回主页？
三、修饰网页(文字超链接)
设置超链接颜色：打开“网页属性”——“格式”——超链接
、已访问过的链接、当前超链接。 设置超链接屏幕提示：先选中文字：打开“插入超链接”对话框 ——右上方“屏幕提示”，输入相应的内容即可。 删除链接文字的下划线：选中文字——打开“字体”对话框—— 效果——下划线。 创建电子邮件：先选中文字或其它对象：点击右键——插入超 链接——设置电子邮件地址即可。
即可多次使用，再次点击“格式刷”可取消。
添加边框、底纹：点击“格式”菜单---“边框和底纹”
二、编辑网页(文本)
复制：
方法1： Ctrl+c、Ctrl+v 方法2：选择文字，按住“Ctrl”键 ---拖动鼠标左键放到存放的 位置即可。
剪贴板：先打开“编辑”菜单---“office剪贴板”,选择多个对象
二、编辑网页(文本)
删除文本格式：
方法1：选中文字，在字体对话框里进行更改。这样 速度很慢。 方法2：选中文字，点击“格式”菜单---“删除格式 ”（快捷键ctrl+shift+z） 方法3：撤消（快捷键ctrl+z）
撤销、恢复 ： ctrl+z、 ctrl+y 格式刷：如果要连续使用格式刷，可以双击“格式刷”，
2、保存：单击 “文件”/“保存”，为文件起个名字，并修 改“保存位置”为D盘上“座号姓名”文件夹，然后单击“ 确定”。这样所有网页使用的文件都放在这个文件夹中，便 于使用和管理。例如：888张三
二、编辑网页
3、设置网页属性：在
网页上方右击，选 中“网页属性”； (1)修改标题 (2)修改边距
注意：标题与名称区别
三、修饰网页(图片)
插入图片：点击“格式”菜单——“插入”——“图片” 设置图片属性：大小、位置等。 插入自选图形：点击“格式”菜单——“插入”——“自选图
形”
设置图形属性：填充颜色、边框、阴影样式、三维效果等。 插入艺术字：
编辑文字
三、修饰网页(文字超链接)
1、文字超链接：先选中文字或其它对象： (1)点击右键——超链接 (2)常用工具栏——插入超链接 (3)点击“插入”菜单——超链接（ctrl+K） 2、创建同一文件的超链接 ：
三、修饰网页(表格)
添加、删除标题：将光标放在任意一个单元格上，点击“表
பைடு நூலகம்
格”菜单”—-“插入”---“标题” 合并单元格：选中两个或以上单元格右击——合并单元格或 选中“表格”菜单——“合并单元格”。
拆分单元格：选定要拆分的单元格，选中“表格”菜单——
“拆分单元格”。 文本表格互转：选中对象，点击“表格”菜单——“转换 ”——“将文本转换成表格”
二、编辑网页(文本)
1、直接输入汉字：在新建的“new_ page_ 1.htm”页面上输 入汉字信息，并进行字体、字号、颜色等相关修饰。 2、 导入文字：打开“插入”菜单---“文件”（注意选择文 件的类型），就可以插入你需要的内容。 注意：导入文字内容的格式，如：word、wps、txt、 htm等 注：1、先输入文字，再进行排版。 2、边输文字边排版。
二、编辑网页(文本)
选择文本：
方法1：按住鼠标左键拖动即可 方法2：按住“shift”键选择连续文本 方法3：连续按鼠标左键三次可选中整段文字 方法4：按住“alt”键，点击鼠标左键可选中整段 文字
设置文本格式
方法1：选中文字右击---“字体” 方法2：按住“格式”菜单---“字体” 方法3：在格式工具栏，也可以设置字体
六、使用书签
1、制作书签：在网页中选中某一段落的开头作为书签的起始入口地址，然 后单击“插入”/“书签”，确定。 2、制作目录：将各个做好的书签名字以目录方式做好。 3、使用标签：选中目录某一项，超链接到书签上就可以了。
图片边框宽度为0 (无边框)
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href=“学习.htm"> <img border=“0” src=“鸽.gif” > </a> <a href=“工作.htm"> <img border=“0” src=“旗.gif” > </a> <a href=“生活.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
三、修饰网页(表格)
设置细线边框： 方法：首先打开“表格属性”，将边框颜色与背景颜 色均设置为黑色，边框线设为0。再选中所有“单元 格”，点击“单元格属性”，将单元格的边框颜色 与背景颜色改为白色；最后再次打开“表格属性” ，将单元格间距设为1即。 原理：利用表格的底纹（黑色）与单元格的底纹（ 白色），中间有单元格与单元格之间的距离，然后 就产生了这条细线。
三、修饰网页(图片超链接)
不同元素的链接：
1、利用图片本身属性自带的链接——默认链接选中图 片——图片属性——常规——默认超链接。 2、利用图片工具栏里图形工具建立热点链接。包括： 长方形热点、圆形热点、多边形热点。打开图片工具—— 选中圆形热点——在图像内拖动鼠标——编辑超链接。
三、修饰网页(音频、视频)
3、滚动图片：利用滚动字幕制作滚动图片，并实现 超级链接。
<marquee direction=left width="969" > <table border=0> 显示图片命令 <tr> <td>动态滚动图片</td> <td><a href =redian.htm><img border="0" src="dog17.gif" ></a></td> <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> <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> <td>第10个单元格</td> </tr> </table> </marquee> 图片地址和名称
你要添加的视频文件，再将添加的视频文件拖动放大即可 。 设置视频属性：（1）外观（2）常规（3）视频
添加背景音乐：点击“网页属性”菜单—“常规”——“背景音
乐”。
三、修饰网页
1、主题：选择“格式/主题”，从任务窗口选 择一种样式，会改变整体网页的背景效果。 2、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。 3、在网页中使用网站计数器：在网页上选定 一个位置，单击“插入/WEB组件/组件类别/ 选择计数器”
6.2 网页制作
1、网站规划
网站的风格
根据个人需要设置网站风格，如： 活泼、清纯、庄严。
1
2
网站的结构
网站如一本书，需要有大纲，主 要目录、具体内容
3
网站的配色
颜色的搭配非常重要，怎么配色 才能吸引用户进来观看
2、 色彩搭配
红色 橙色 蓝色 绿色 紫色 黑色 灰色 白色 热情 时尚 宁静 清新 神秘 深沉 高雅 明快 配色方案的操作：
(1)先选中某些文字或其它对象进行标记，制作标签。选定 文字——“插入”菜单——书签（ctrl+k） (2)选定其它文字链接到上面的文字上。选定文字——超链 接属性——本文档中的位置，选中即可。 3、设置超链接字体效果：打开“网页属性”——“高 级”——“启动超链接翻转效果”——“翻转样式”—— 打开后进行设置
四、制作滚动字幕
1、插入：在网页空白处：单击：“插入/web组件/滚动字幕” ，输入要显示的信息。
2、鼠标悬停：如何在滚动字幕上实现：当鼠标悬在上面时就停止滚 动，按下时就实现超级链接，离开时继续滚动，下面粉色代码为 当鼠标悬停 实现代码。也可以直接用下面代码替换原来的代码。 上面时,字幕 <marquee direction =up onmouseover="this.stop()" 停止滚动. onmouseout="this.start()" scrollamount="2" > <a href =学习.htm> 学习<br> </a> <a href =工作.htm>工作<br> </a> <a href =生活.htm>生活</a> </marquee> 超链接地址和名称
”，选中你要添加的Flash动画即可。扩展名：swf 设置FLASH属性：设置质量、大小、背景等。 制作按钮：打开“插入”菜单——“交互式按钮”对话框；
按钮类型：（1）按钮
（2）字体
（3）图像
三、修饰网页(音频、视频)
添加视频：点击“插入”菜单---“图片”——“视频”，选中
4、网站元素级别
网页1 文字 表格 网站 网页2 图片
动画
网页3
视频
二、编辑网页
新建网页：单击命令菜单栏中的“文件”，选择“新
建”，在屏幕的右面出现一个“新建”工具栏， 选择“新建网页”下的 “空白网页”，于是一个 新的网页“new_ page_ 1.htm”就产生了。
二、编辑网页
1、预览：单击屏幕左下角的“预览”按钮，于是新网页在浏 览器下的显示效果就出现了。再单击“设计”返回页面设计 状态，可以继续修改。也可以单击菜单栏“文件”下的“在 浏览器中预览/ Microsoft Internet Explorer”或直接按 <F12>键可以在IE下预览制作的网页。
三、修饰网页(表格)
新建表格：点击“表格”菜单---“插入”---“表格”对话框 删除表格：选中表格---“表格”菜单---“删除单元格”或按
DEL键即可删除
添加单元格、行和列：在“表格”菜单---“插入”---“单元格
”
删除单元格、行和列：将光标放在单元格上，点击“表格”菜单
—-“选择”---“单元格”，再点击“表格”菜单---“删 除单元格”。行和列方法相同。 选择表格、单元格、行、列：将光标放在单元格上，点击“表格” 菜单”—-“选择”---“单元格、行、列、表格”。
复制，后再粘贴即可。
移动：
方法1：选择文字，点击“编辑”菜单---“剪切 ”Ctrl+X 方法2：选择文字，按住鼠标左键拖动放到存放的位置即 可。
二、编辑网页(文本)
设置段落格式： 1、 段落间距：(1)直接按“enter”键换行，距离较大。其代
码<p>；(2)、直接按“shift+enter”键换行，距离很小 。其代码<br>； 2、插入符号：在“插入”菜单---“符号”对话框，可以添加 所需要的符号。
一种简单滚动图片制作方法1：
将下面代码放在<body>和</body>之间就可以了： <p> <marquee width="495" height="150"> 滚动图片 <img src="鸽.gif" > 图片地址和名称 <img border="0" src="旗.gif" > <img border="0" src="猪.gif" > </marquee> </p>
五、使用超级链接
使用超级链接技术可以使多个网页相互链接在一起， 方便浏览。 1、分别按照前面的方法做好主(首)页和与其链接的 子页文件（*.htm），并保存在一个文件夹中。 2、在主页上输入提示进入子页的文字，作为超链接 的按钮文字。 3、选中按钮文字，再单击“插入/超链接”，找到要 链接的文件，确定。 【主页】【框架网页】【滚动新闻】【热点链接】【 布局表格】 【网页主题】【留言薄】
*点击菜单“格式”--“主题” *点击任务窗口---“主题” *点击某个主题右击--“自定义”
3、 设计草图
二、网站
1.制作网站的流程
主题
风格
规划
版面
素材
配色
编辑
测试
上传
网站的设计原则
1）目标明确，重点突出 2）主题鲜明，层次清晰 3）合理设置栏目 4）正确定位整体风格 5）页面布局合理 6）色彩搭配，和谐统一 7）多媒体功能适当应用。
思考题：1、如何从子页中返回主页？
三、修饰网页(文字超链接)
设置超链接颜色：打开“网页属性”——“格式”——超链接
、已访问过的链接、当前超链接。 设置超链接屏幕提示：先选中文字：打开“插入超链接”对话框 ——右上方“屏幕提示”，输入相应的内容即可。 删除链接文字的下划线：选中文字——打开“字体”对话框—— 效果——下划线。 创建电子邮件：先选中文字或其它对象：点击右键——插入超 链接——设置电子邮件地址即可。
即可多次使用，再次点击“格式刷”可取消。
添加边框、底纹：点击“格式”菜单---“边框和底纹”
二、编辑网页(文本)
复制：
方法1： Ctrl+c、Ctrl+v 方法2：选择文字，按住“Ctrl”键 ---拖动鼠标左键放到存放的 位置即可。
剪贴板：先打开“编辑”菜单---“office剪贴板”,选择多个对象
二、编辑网页(文本)
删除文本格式：
方法1：选中文字，在字体对话框里进行更改。这样 速度很慢。 方法2：选中文字，点击“格式”菜单---“删除格式 ”（快捷键ctrl+shift+z） 方法3：撤消（快捷键ctrl+z）
撤销、恢复 ： ctrl+z、 ctrl+y 格式刷：如果要连续使用格式刷，可以双击“格式刷”，
2、保存：单击 “文件”/“保存”，为文件起个名字，并修 改“保存位置”为D盘上“座号姓名”文件夹，然后单击“ 确定”。这样所有网页使用的文件都放在这个文件夹中，便 于使用和管理。例如：888张三
二、编辑网页
3、设置网页属性：在
网页上方右击，选 中“网页属性”； (1)修改标题 (2)修改边距
注意：标题与名称区别
三、修饰网页(图片)
插入图片：点击“格式”菜单——“插入”——“图片” 设置图片属性：大小、位置等。 插入自选图形：点击“格式”菜单——“插入”——“自选图
形”
设置图形属性：填充颜色、边框、阴影样式、三维效果等。 插入艺术字：
编辑文字
三、修饰网页(文字超链接)
1、文字超链接：先选中文字或其它对象： (1)点击右键——超链接 (2)常用工具栏——插入超链接 (3)点击“插入”菜单——超链接（ctrl+K） 2、创建同一文件的超链接 ：
三、修饰网页(表格)
添加、删除标题：将光标放在任意一个单元格上，点击“表
பைடு நூலகம்
格”菜单”—-“插入”---“标题” 合并单元格：选中两个或以上单元格右击——合并单元格或 选中“表格”菜单——“合并单元格”。
拆分单元格：选定要拆分的单元格，选中“表格”菜单——
“拆分单元格”。 文本表格互转：选中对象，点击“表格”菜单——“转换 ”——“将文本转换成表格”
二、编辑网页(文本)
1、直接输入汉字：在新建的“new_ page_ 1.htm”页面上输 入汉字信息，并进行字体、字号、颜色等相关修饰。 2、 导入文字：打开“插入”菜单---“文件”（注意选择文 件的类型），就可以插入你需要的内容。 注意：导入文字内容的格式，如：word、wps、txt、 htm等 注：1、先输入文字，再进行排版。 2、边输文字边排版。
二、编辑网页(文本)
选择文本：
方法1：按住鼠标左键拖动即可 方法2：按住“shift”键选择连续文本 方法3：连续按鼠标左键三次可选中整段文字 方法4：按住“alt”键，点击鼠标左键可选中整段 文字
设置文本格式
方法1：选中文字右击---“字体” 方法2：按住“格式”菜单---“字体” 方法3：在格式工具栏，也可以设置字体
六、使用书签
1、制作书签：在网页中选中某一段落的开头作为书签的起始入口地址，然 后单击“插入”/“书签”，确定。 2、制作目录：将各个做好的书签名字以目录方式做好。 3、使用标签：选中目录某一项，超链接到书签上就可以了。
图片边框宽度为0 (无边框)
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href=“学习.htm"> <img border=“0” src=“鸽.gif” > </a> <a href=“工作.htm"> <img border=“0” src=“旗.gif” > </a> <a href=“生活.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
三、修饰网页(表格)
设置细线边框： 方法：首先打开“表格属性”，将边框颜色与背景颜 色均设置为黑色，边框线设为0。再选中所有“单元 格”，点击“单元格属性”，将单元格的边框颜色 与背景颜色改为白色；最后再次打开“表格属性” ，将单元格间距设为1即。 原理：利用表格的底纹（黑色）与单元格的底纹（ 白色），中间有单元格与单元格之间的距离，然后 就产生了这条细线。
三、修饰网页(图片超链接)
不同元素的链接：
1、利用图片本身属性自带的链接——默认链接选中图 片——图片属性——常规——默认超链接。 2、利用图片工具栏里图形工具建立热点链接。包括： 长方形热点、圆形热点、多边形热点。打开图片工具—— 选中圆形热点——在图像内拖动鼠标——编辑超链接。
三、修饰网页(音频、视频)
3、滚动图片：利用滚动字幕制作滚动图片，并实现 超级链接。
<marquee direction=left width="969" > <table border=0> 显示图片命令 <tr> <td>动态滚动图片</td> <td><a href =redian.htm><img border="0" src="dog17.gif" ></a></td> <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> <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> <td>第10个单元格</td> </tr> </table> </marquee> 图片地址和名称
你要添加的视频文件，再将添加的视频文件拖动放大即可 。 设置视频属性：（1）外观（2）常规（3）视频
添加背景音乐：点击“网页属性”菜单—“常规”——“背景音
乐”。
三、修饰网页
1、主题：选择“格式/主题”，从任务窗口选 择一种样式，会改变整体网页的背景效果。 2、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。 3、在网页中使用网站计数器：在网页上选定 一个位置，单击“插入/WEB组件/组件类别/ 选择计数器”
6.2 网页制作
1、网站规划
网站的风格
根据个人需要设置网站风格，如： 活泼、清纯、庄严。
1
2
网站的结构
网站如一本书，需要有大纲，主 要目录、具体内容
3
网站的配色
颜色的搭配非常重要，怎么配色 才能吸引用户进来观看
2、 色彩搭配
红色 橙色 蓝色 绿色 紫色 黑色 灰色 白色 热情 时尚 宁静 清新 神秘 深沉 高雅 明快 配色方案的操作：
(1)先选中某些文字或其它对象进行标记，制作标签。选定 文字——“插入”菜单——书签（ctrl+k） (2)选定其它文字链接到上面的文字上。选定文字——超链 接属性——本文档中的位置，选中即可。 3、设置超链接字体效果：打开“网页属性”——“高 级”——“启动超链接翻转效果”——“翻转样式”—— 打开后进行设置
四、制作滚动字幕
1、插入：在网页空白处：单击：“插入/web组件/滚动字幕” ，输入要显示的信息。
2、鼠标悬停：如何在滚动字幕上实现：当鼠标悬在上面时就停止滚 动，按下时就实现超级链接，离开时继续滚动，下面粉色代码为 当鼠标悬停 实现代码。也可以直接用下面代码替换原来的代码。 上面时,字幕 <marquee direction =up onmouseover="this.stop()" 停止滚动. onmouseout="this.start()" scrollamount="2" > <a href =学习.htm> 学习<br> </a> <a href =工作.htm>工作<br> </a> <a href =生活.htm>生活</a> </marquee> 超链接地址和名称