《信息技术》62：网页制作(共34张)课件

1、6.2 网页制作6.2 网页制作1、网站规划网站的风格1网站的结构2网站的配色3根据个人需要设置网站风格，如：活泼、清纯、庄严。网站如一本书，需要有大纲，主要目录、具体内容颜色的搭配非常重要，怎么配色才能吸引用户进来观看1、网站规划网站的风格1网站的结构2网站的配色3根据个人需要2、 色彩搭配红色热情橙色时尚蓝色宁静绿色清新紫色神秘黑色深沉灰色高雅白色明快配色方案的操作：*点击菜单“格式”-“主题”*点击任务窗口“主题” *点击某个主题右击-“自定义”2、 色彩搭配红色热情橙色时尚蓝色宁静绿色清新紫色神秘黑色深3、 设计草图3、 设计草图二、网站1.制作网站的流程主题风格规划配色素材版面上传测

2、试编辑二、网站1.制作网站的流程主题风格规划配色素材版面上传测试编网站的设计原则1）目标明确，重点突出2）主题鲜明，层次清晰3）合理设置栏目4）正确定位整体风格5）页面布局合理6）色彩搭配，和谐统一7）多媒体功能适当应用。网站的设计原则1）目标明确，重点突出4、网站元素级别网站网页1网页2网页3文字表格图片动画视频4、网站元素级别网站网页1网页2网页3文字表格图片动画视频二、编辑网页新建网页：单击命令菜单栏中的“文件”，选择“新建”，在屏幕的右面出现一个“新建”工具栏，选择“新建网页”下的 “空白网页”，于是一个新的网页“new_page_1.htm”就产生了。二、编辑网页新建网页：单击命令菜

3、单栏中的“文件”，选择“新建二、编辑网页1、预览：单击屏幕左下角的“预览”按钮，于是新网页在浏览器下的显示效果就出现了。再单击“设计”返回页面设计状态，可以继续修改。也可以单击菜单栏“文件”下的“在浏览器中预览/ Microsoft Internet Explorer”或直接按键可以在IE下预览制作的网页。2、保存：单击 “文件”/“保存”，为文件起个名字，并修改“保存位置”为D盘上“座号姓名”文件夹，然后单击“确定”。这样所有网页使用的文件都放在这个文件夹中，便于使用和管理。例如：888张三二、编辑网页1、预览：单击屏幕左下角的“预览”按钮，于是新网二、编辑网页3、设置网页属性：在网页上方右

4、击，选中“网页属性”； (1)修改标题 (2)修改边距注意：标题与名称区别二、编辑网页3、设置网页属性：在网页上方右击，选中“网页属性1、直接输入汉字：在新建的“new_page_1.htm”页面上输入汉字信息，并进行字体、字号、颜色等相关修饰。 2、 导入文字：打开“插入”菜单“文件”（注意选择文件的类型），就可以插入你需要的内容。 注意：导入文字内容的格式，如：word、wps、txt、htm等二、编辑网页(文本)注：1、先输入文字，再进行排版。 2、边输文字边排版。1、直接输入汉字：在新建的“new_page_1.htm”页二、编辑网页(文本)选择文本： 方法1：按住鼠标左键拖动即可 方

5、法2：按住“shift”键选择连续文本 方法3：连续按鼠标左键三次可选中整段文字 方法4：按住“alt”键，点击鼠标左键可选中整段文字设置文本格式方法1：选中文字右击“字体”方法2：按住“格式”菜单“字体”方法3：在格式工具栏，也可以设置字体二、编辑网页(文本)选择文本：设置文本格式二、编辑网页(文本)删除文本格式： 方法1：选中文字，在字体对话框里进行更改。这样速度很慢。 方法2：选中文字，点击“格式”菜单“删除格式”（快捷键ctrl+shift+z） 方法3：撤消（快捷键ctrl+z）撤销、恢复 ： ctrl+z、 ctrl+y格式刷：如果要连续使用格式刷，可以双击“格式刷”，即可多次使用

6、，再次点击“格式刷”可取消。添加边框、底纹：点击“格式”菜单“边框和底纹”二、编辑网页(文本)删除文本格式：撤销、恢复 ： ctrl+二、编辑网页(文本)复制： 方法1： Ctrl+c、Ctrl+v 方法2：选择文字，按住“Ctrl”键 拖动鼠标左键放到存放的位置即可。剪贴板：先打开“编辑”菜单“office剪贴板”,选择多个对象复制，后再粘贴即可。移动： 方法1：选择文字，点击“编辑”菜单“剪切”Ctrl+X 方法2：选择文字，按住鼠标左键拖动放到存放的位置即可。二、编辑网页(文本)复制：二、编辑网页(文本)设置段落格式：1、 段落间距：(1)直接按“enter”键换行，距离较大。其代码；(

7、2)、直接按“shift+enter”键换行，距离很小。其代码；2、插入符号：在“插入”菜单“符号”对话框，可以添加所需要的符号。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)二、编辑网页(文本)设置段落格式：浙教版高一必修信息技术三、修饰网页(表格)新建表格：点击“表格”菜单“插入”“表格”对话框删除表格：选中表格“表格”菜单“删除单元格”或按DEL键即可删除添加单元格、行和列：在“表格”菜单“插入”“单元格”删除单元格、行和列：将光标放在单元格上，点击“表格”菜单-“选择”“单元格”，再点击“表格”菜单“删除单元格”。行和列

8、方法相同。选择表格、单元格、行、列：将光标放在单元格上，点击“表格”菜单”-“选择”“单元格、行、列、表格”。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页(表格)新建表格：点击“表格”菜单“插入”三、修饰网页(表格)添加、删除标题：将光标放在任意一个单元格上，点击“表格”菜单”-“插入”“标题”合并单元格：选中两个或以上单元格右击合并单元格或选中“表格”菜单“合并单元格”。拆分单元格：选定要拆分的单元格，选中“表格”菜单“拆分单元格”。文本表格互转：选中对象，点击“表格”菜单“转换”“将文本转换成表格”浙教版高一必

9、修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页(表格)添加、删除标题：将光标放在任意一个单元格三、修饰网页(表格)设置细线边框：方法：首先打开“表格属性”，将边框颜色与背景颜色均设置为黑色，边框线设为0。再选中所有“单元格”，点击“单元格属性”，将单元格的边框颜色与背景颜色改为白色；最后再次打开“表格属性”，将单元格间距设为1即。 原理：利用表格的底纹（黑色）与单元格的底纹（白色），中间有单元格与单元格之间的距离，然后就产生了这条细线。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作

10、(共34张PPT)三、修饰网页(表格)设置细线边框：原理：利用表格的底纹（黑色三、修饰网页(图片)插入图片：点击“格式”菜单“插入”“图片”设置图片属性：大小、位置等。插入自选图形：点击“格式”菜单“插入”“自选图形”设置图形属性：填充颜色、边框、阴影样式、三维效果等。插入艺术字： 编辑文字浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页(图片)插入图片：点击“格式”菜单“插入”三、修饰网页(文字超链接)1、文字超链接：先选中文字或其它对象： (1)点击右键超链接 (2)常用工具栏插入超链接 (3)点击“插入”菜单超链

11、接（ctrl+K）2、创建同一文件的超链接 ： (1)先选中某些文字或其它对象进行标记，制作标签。选定文字“插入”菜单书签（ctrl+k） (2)选定其它文字链接到上面的文字上。选定文字超链接属性本文档中的位置，选中即可。3、设置超链接字体效果：打开“网页属性”“高级”“启动超链接翻转效果”“翻转样式”打开后进行设置思考题：1、如何从子页中返回主页？浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页(文字超链接)1、文字超链接：先选中文字或其它对三、修饰网页(文字超链接)设置超链接颜色：打开“网页属性”“格式”超链接、已

12、访问过的链接、当前超链接。设置超链接屏幕提示：先选中文字：打开“插入超链接”对话框右上方“屏幕提示”，输入相应的内容即可。删除链接文字的下划线：选中文字打开“字体”对话框效果下划线。创建电子邮件：先选中文字或其它对象：点击右键插入超链接设置电子邮件地址即可。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页(文字超链接)设置超链接颜色：打开“网页属性”三、修饰网页(图片超链接)不同元素的链接： 1、利用图片本身属性自带的链接默认链接选中图片图片属性常规默认超链接。 2、利用图片工具栏里图形工具建立热点链接。包括：长方形热

13、点、圆形热点、多边形热点。打开图片工具选中圆形热点在图像内拖动鼠标编辑超链接。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页(图片超链接)不同元素的链接： 浙教版高一必修三、修饰网页(音频、视频)添加FLASH：点击“插入”菜单“图片”“Flash影片”，选中你要添加的Flash动画即可。扩展名：swf设置FLASH属性：设置质量、大小、背景等。制作按钮：打开“插入”菜单“交互式按钮”对话框； 按钮类型：（1）按钮 （2）字体 （3）图像浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6

14、.2：网页制作(共34张PPT)三、修饰网页(音频、视频)添加FLASH：点击“插入”菜单-三、修饰网页(音频、视频)添加视频：点击“插入”菜单“图片”“视频”，选中你要添加的视频文件，再将添加的视频文件拖动放大即可。设置视频属性：（1）外观（2）常规（3）视频添加背景音乐：点击“网页属性”菜单“常规”“背景音乐”。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页(音频、视频)添加视频：点击“插入”菜单“三、修饰网页1、主题：选择“格式/主题”，从任务窗口选择一种样式，会改变整体网页的背景效果。2、动态字幕：在网页上选

15、定一个位置，单击“插入/WEB组件/组件类别/选择一种效果/字幕” ，单击“完成”，在文本框中输入文字。也可以添加背景图片。3、在网页中使用网站计数器：在网页上选定一个位置，单击“插入/WEB组件/组件类别/选择计数器” 浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页1、主题：选择“格式/主题”，从任务窗口选择一种四、制作滚动字幕1、插入：在网页空白处：单击：“插入/web组件/滚动字幕”，输入要显示的信息。2、鼠标悬停：如何在滚动字幕上实现：当鼠标悬在上面时就停止滚动，按下时就实现超级链接，离开时继续滚动，下面粉色

16、代码为实现代码。也可以直接用下面代码替换原来的代码。 学习 工作 生活当鼠标悬停上面时,字幕停止滚动.超链接地址和名称四、制作滚动字幕1、插入：在网页空白处：单击：“插入/web3、滚动图片：利用滚动字幕制作滚动图片，并实现超级链接。动态滚动图片第5个单元格第7个单元格第8个单元格第10个单元格显示图片命令图片地址和名称3、滚动图片：利用滚动字幕制作滚动图片，并实现超级链接。m一种简单滚动图片制作方法1： 将下面代码放在和之间就可以了： 滚动图片 图片边框宽度为0 (无边框)图片地址和名称一种简单滚动图片制作方法1： 将下面代码放在和一种简单滚动图片制作方法2：将下面代码放在和之间就可以了 有

17、超链接的滚动图片 超链接地址和名称一种简单滚动图片制作方法2：将下面代码放在和/五、使用超级链接使用超级链接技术可以使多个网页相互链接在一起，方便浏览。1、分别按照前面的方法做好主(首)页和与其链接的子页文件（*.htm），并保存在一个文件夹中。2、在主页上输入提示进入子页的文字，作为超链接的按钮文字。3、选中按钮文字，再单击“插入/超链接”，找到要链接的文件，确定。【主页】【框架网页】【滚动新闻】【热点链接】【布局表格】 【网页主题】【留言薄】 五、使用超级链接使用超级链接技术可以使多个网页相互链接在一起六、使用书签1、制作书签：在网页中选中某一段落的开头作为书签的起始入口地址，然后单击“插入”/“书签”，确定。2、制作目录：将各个做好的书签名字以目录方式做好。3、使用标签：选中目录某一项，超链