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

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

2、”*点击某个主题右击点击某个主题右击-“自定义自定义”3、设计草图设计草图二、网站二、网站1.1.制作网站的流程制作网站的流程主题主题风格风格规划规划配色配色素材素材版面版面上传上传测试测试编辑编辑网站的设计原则网站的设计原则4 4、网站元素级别、网站元素级别文字文字表格表格图片图片动画动画视频视频二、编辑网页二、编辑网页新建网页：新建网页：单击命令菜单栏中的单击命令菜单栏中的“文件文件”，选择，选择“新新建建”，在屏幕的右面出现一个，在屏幕的右面出现一个“新建新建”工具栏，工具栏，选择选择“新建网页新建网页”下的下的 “空白网页空白网页”，于是一个，于是一个新的网页新的网页“new_page

3、_1.htmnew_page_1.htm”就产生了。就产生了。二、编辑网页二、编辑网页1 1、预览：预览：单击屏幕左下角的“预览”按钮，于是新网页在浏览器下的显示效果就出现了。再单击“设计”返回页面设计状态，可以继续修改。也可以单击菜单栏“文件”下的“在浏览器中预览/Microsoft Internet Explorer”Microsoft Internet Explorer”或直接按或直接按键可以在键可以在IEIE下预览制作的网页。下预览制作的网页。2 2、保存：保存：单击单击 “文件文件”/“/“保存保存”，为文件起个名字，并修，为文件起个名字，并修改改“保存位置保存位置”为为D D盘上盘

4、上“座号姓名座号姓名”文件夹，然后单击文件夹，然后单击“确定确定”。这样所有网页使用的文件都放在这个文件夹中，便。这样所有网页使用的文件都放在这个文件夹中，便于使用和管理。例如：于使用和管理。例如：888888张三张三二、编辑网页二、编辑网页3、设置网页属性：在网页上方右击，选中“网页属性”；(1)修改标题 (2)修改边距注意：注意：标题与名称区别标题与名称区别1 1、直接、直接输入汉字：输入汉字：在新建的在新建的“new_page_1.htmnew_page_1.htm”页面上输入页面上输入汉字信息，并进行字体、字号、颜色等相关修饰。汉字信息，并进行字体、字号、颜色等相关修饰。2 2、导入文

5、字导入文字：打开打开“插入插入”菜单菜单-“-“文件文件”（注意选择文（注意选择文件的类型），就可以插入你需要的内容。件的类型），就可以插入你需要的内容。注意：导入文字内容的格式，如：注意：导入文字内容的格式，如：wordword、wpswps、txttxt、htmhtm等等二、编辑网页二、编辑网页(文本文本)注：注：1、先输入文字，再进行排版。、先输入文字，再进行排版。2、边输文字边排版。、边输文字边排版。二、编辑网页二、编辑网页(文本文本)选择文本选择文本：方法方法1 1：按住鼠标左键拖动即可：按住鼠标左键拖动即可 方法方法2 2：按住：按住“shift”shift”键选择连续文本键选择连

6、续文本 方法方法3 3：连续按鼠标左键三次可选中整段文字：连续按鼠标左键三次可选中整段文字 方法方法4 4：按住：按住“alt”alt”键，点击鼠标左键可选中整段键，点击鼠标左键可选中整段文字文字v设置文本格式设置文本格式方法方法1：选中文字右击：选中文字右击-“字体字体”方法方法2：按住：按住“格式格式”菜单菜单-“字体字体”方法方法3：在格式工具栏，也可以设置字体：在格式工具栏，也可以设置字体二、编辑网页二、编辑网页(文本文本)删除文本格式删除文本格式：方法方法1 1：选中文字，在字体对话框里进行更改。这样：选中文字，在字体对话框里进行更改。这样速度很慢。速度很慢。方法方法2 2：选中文字

7、，点击：选中文字，点击“格式格式”菜单菜单-“-“删除格式删除格式”（快捷键（快捷键ctrl+shift+zctrl+shift+z）方法方法3 3：撤消（快捷键：撤消（快捷键ctrl+zctrl+z）v撤销、恢复撤销、恢复：ctrl+z、ctrl+yv格式刷格式刷：如果要连续使用格式刷，可以双击如果要连续使用格式刷，可以双击“格式刷格式刷”，即可多次使用，再次点击即可多次使用，再次点击“格式刷格式刷”可取消。可取消。v添加边框、底纹添加边框、底纹：点击点击“格式格式”菜单菜单-“边框和底纹边框和底纹”二、编辑网页二、编辑网页(文本文本)复制复制：方法方法1 1：Ctrl+cCtrl+c、Ct

8、rl+vCtrl+v 方法方法2 2：选择文字，按住：选择文字，按住“Ctrl“Ctrl”键键 -拖动鼠标左键放到存放的拖动鼠标左键放到存放的位置即可。位置即可。剪贴板剪贴板：先打开先打开“编辑编辑”菜单菜单-“officeoffice剪贴板剪贴板”,选择多个对象选择多个对象复制，后再粘贴即可。复制，后再粘贴即可。移动移动：方法方法1 1：选择文字，点击：选择文字，点击“编辑编辑”菜单菜单-“-“剪切剪切”Ctrl+XCtrl+X 方法方法2 2：选择文字，按住鼠标左键拖动放到存放的位置即：选择文字，按住鼠标左键拖动放到存放的位置即可。可。二、编辑网页二、编辑网页(文本文本)设置段落格式设置段

9、落格式：1 1、段落间距段落间距：(1)(1)直接按直接按“enter”enter”键换行，距离较大。其代键换行，距离较大。其代码码；(2)(2)、直接按、直接按“shift+enter”shift+enter”键换行，距离很小键换行，距离很小。其代码。其代码；2 2、插入符号插入符号：在在“插入插入”菜单菜单-“-“符号符号”对话框，可以添加对话框，可以添加所需要的符号。所需要的符号。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页(表格表格)新建表格：新建表格：点击点击“表格表格”菜单菜单-“-“插入插

10、入”-“-“表格表格”对话框对话框删除表格删除表格：选中表格选中表格-“-“表格表格”菜单菜单-“-“删除单元格删除单元格”或按或按DELDEL键即可删除键即可删除添加单元格、行和列添加单元格、行和列：在在“表格表格”菜单菜单-“-“插入插入”-“-“单元格单元格”删除单元格、行和列删除单元格、行和列：将光标放在单元格上，点击将光标放在单元格上，点击“表格表格”菜单菜单-“-“选择选择”-“-“单元格单元格”，再点击，再点击“表格表格”菜单菜单-“-“删删除单元格除单元格”。行和列方法相同。行和列方法相同。选选择表格择表格、单元格、行、列、单元格、行、列：将光标放在单元格上，点击将光标放在单元

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

12、选定要拆分的单元格，选中“表格表格”菜单菜单“拆分单元格拆分单元格”。文本表格互转文本表格互转：选中对象，点击选中对象，点击“表格表格”菜单菜单“转换转换”“将文本转换成表格将文本转换成表格”浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页(表格表格)设置细线边框：方法：首先打开“表格属性”，将边框颜色与背景颜色均设置为黑色，边框线设为0。再选中所有“单元格”，点击“单元格属性”，将单元格的边框颜色与背景颜色改为白色；最后再次打开“表格属性”，将单元格间距设为1即。原理：利用表格的底纹（黑色）与单元格的底纹

13、（原理：利用表格的底纹（黑色）与单元格的底纹（白色），中间有单元格与单元格之间的距离，然后白色），中间有单元格与单元格之间的距离，然后就产生了这条细线。就产生了这条细线。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页(图片图片)插入图片：插入图片：点击点击“格式格式”菜单菜单“插入插入”“图片图片”设置图片属性：设置图片属性：大小、位置等。大小、位置等。插入自选图形插入自选图形：点击点击“格式格式”菜单菜单“插入插入”“自选图自选图形形”设置图形属性：设置图形属性：填充颜色、边框、阴影样式、三维效果等。填

14、充颜色、边框、阴影样式、三维效果等。插入艺术字插入艺术字：编辑文字编辑文字浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页(文字超链接字超链接)1 1、文字超链接：、文字超链接：先选中文字或其它对象：先选中文字或其它对象：(1)(1)点击右键点击右键超链接超链接 (2)(2)常用工具栏常用工具栏插入超链接插入超链接 (3)(3)点击点击“插入插入”菜单菜单超链接（超链接（ctrl+Kctrl+K）2 2、创建同一文件的超链接创建同一文件的超链接 ：(1)(1)先选中某些文字或其它对象进行标记，制作标签。选定

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

16、技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页(文字超链接文字超链接)设置超链接颜色设置超链接颜色：打开打开“网页属性网页属性”“格式格式”超链接超链接、已访问过的链接、当前超链接。、已访问过的链接、当前超链接。设置超链接屏幕提示设置超链接屏幕提示：先选中文字：打开先选中文字：打开“插入超链接插入超链接”对话框对话框右上方右上方“屏幕提示屏幕提示”，输入相应的内容即可。，输入相应的内容即可。删除链接文字的下划线：删除链接文字的下划线：选中文字选中文字打开打开“字体字体”对话框对话框效果效果下划线。下划线。创建电子邮件创建电子邮件：先选中文字或其它对象：点击右键先选中文字或其它对

17、象：点击右键插入超插入超链接链接设置电子邮件地址即可。设置电子邮件地址即可。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页(图片超链接图片超链接)不同元素的链接不同元素的链接：1 1、利用图片本身属性自带的链接、利用图片本身属性自带的链接默认链接选中图默认链接选中图片片图片属性图片属性常规常规默认超链接。默认超链接。2 2、利用图片工具栏里图形工具建立热点链接。包括：、利用图片工具栏里图形工具建立热点链接。包括：长方形热点、圆形热点、多边形热点。打开图片工具长方形热点、圆形热点、多边形热点。打开图片工具选

18、中圆形热点选中圆形热点在图像内拖动鼠标在图像内拖动鼠标编辑超链接。编辑超链接。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页(音频、视频音频、视频)添加添加FLASHFLASH：点击点击“插入插入”菜单菜单-“图片图片”“FlashFlash影片影片”，选中你要添加的，选中你要添加的FlashFlash动画即可。扩展名：动画即可。扩展名：swfswf设置设置FLASHFLASH属性：属性：设置质量、大小、背景等。设置质量、大小、背景等。制作按钮制作按钮：打开打开“插入插入”菜单菜单“交互式按钮交互式按钮”

19、对话框；对话框；按钮类型：（按钮类型：（1 1）按钮）按钮 （2 2）字体）字体 （3 3）图像）图像浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页(音频、视频音频、视频)添加视频添加视频：点击点击“插入插入”菜单菜单-“图片图片”“视频视频”，选中，选中你要添加的视频文件，再将添加的视频文件拖动放大即可你要添加的视频文件，再将添加的视频文件拖动放大即可。设置视频属性：设置视频属性：（1 1）外观（）外观（2 2）常规（）常规（3 3）视频）视频添加背景音乐添加背景音乐：点击点击“网页属性网页属性”菜单菜

20、单“常规常规”“背景音背景音乐乐”。浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)三、修饰网页三、修饰网页v1、主题：、主题：选择选择“格式格式/主题主题”，从任务窗口选，从任务窗口选择一种样式，会改变整体网页的背景效果。择一种样式，会改变整体网页的背景效果。v2、动态字幕：、动态字幕：在网页上选定一个位置，单击在网页上选定一个位置，单击“插入插入/WEB组件组件/组件类别组件类别/选择一种效果选择一种效果/字字幕幕”，单击，单击“完成完成”，在文本框中输入文字。，在文本框中输入文字。也可以添加背景图片。也可以添加背景图片。v3

21、、在网页中使用网站计数器：在网页上选定、在网页中使用网站计数器：在网页上选定一个位置，单击一个位置，单击“插入插入/WEB组件组件/组件类别组件类别/选择计数器选择计数器”浙教版高一必修信息技术6.2：网页制作(共34张PPT)浙教版高一必修信息技术6.2：网页制作(共34张PPT)四、制作滚动字幕制作滚动字幕1 1、插入：、插入：在网页空白处：单击：在网页空白处：单击：“插入插入/web/web组件组件/滚动字幕滚动字幕”，输入要显示的信息。，输入要显示的信息。2 2、鼠标悬停：如何在滚动字幕上实现：当、鼠标悬停：如何在滚动字幕上实现：当鼠标悬在上面时就停止滚鼠标悬在上面时就停止滚动，按下时

22、就实现超级链接，离开时继续滚动，下面粉色代码为动，按下时就实现超级链接，离开时继续滚动，下面粉色代码为实现代码。也可以直接用下面代码替换原来的代码。实现代码。也可以直接用下面代码替换原来的代码。marquee 学习学习 工作 生活当鼠标悬停当鼠标悬停上面时上面时,字幕字幕停止滚动停止滚动.超链接地址和名称超链接地址和名称3 3、滚动图片：、滚动图片：利用滚动字幕制作滚动图片，并实现利用滚动字幕制作滚动图片，并实现超级链接。超级链接。动态滚动图片动态滚动图片第第5 5个单元格个单元格第第7 7个单元格个单元格第第8 8个单元格个单元格第第1010个单元格个单元格显示图片命令显示图片命令图片地址和

23、名称图片地址和名称一种简单滚动图片制作方法一种简单滚动图片制作方法1 1：将下面代码放在将下面代码放在和和之间就可以了：之间就可以了：滚动图片滚动图片 img src=.gif img border=0 src=.gif img border=0 src=.gif 图片边框宽度为图片边框宽度为0(无边框无边框)图片地址和名称图片地址和名称一种简单滚动图片制作方法一种简单滚动图片制作方法2 2：将下面代码放在将下面代码放在和和之间就可以了之间就可以了 有超链接的滚动图片有超链接的滚动图片 a href=“.htm img border=“0”src=“.gif”a href=“.htm img

24、border=“0”src=“.gif”a href=“.htm img border=0 src=.gif 超链接地址和名称超链接地址和名称五、使用超级链接五、使用超级链接使用超级链接技术可以使多个网页相互链接在一起，使用超级链接技术可以使多个网页相互链接在一起，方便浏览。方便浏览。1 1、分别按照前面的方法做好主、分别按照前面的方法做好主(首首)页和与其链接的页和与其链接的子页文件（子页文件（*.htm.htm），并保存在一个文件夹中。），并保存在一个文件夹中。2 2、在主页上输入提示进入子页的文字，作为超链接、在主页上输入提示进入子页的文字，作为超链接的按钮文字。的按钮文字。3 3、选中

25、按钮文字，再单击、选中按钮文字，再单击“插入插入/超链接超链接”，找到要，找到要链接的文件，确定。链接的文件，确定。【主页主页】【】【框架网页框架网页】【】【滚动新闻滚动新闻】【】【热点链接热点链接】【】【布局表格布局表格】【网页主题网页主题】【】【留言薄留言薄】六、使用书签六、使用书签1 1、制作书签：、制作书签：在网页中选中某一段落的开头作为书签的起始入口地址，然在网页中选中某一段落的开头作为书签的起始入口地址，然后单击后单击“插入插入”/“/“书签书签”，确定。，确定。2 2、制作目录：、制作目录：将各个做好的书签名字以目录方式做好。将各个做好的书签名字以目录方式做好。3 3、使用标签：

26、、使用标签：选中目录某一项，超链接到书签上就可以了。选中目录某一项，超链接到书签上就可以了。在网页中加入下面一段代码：在网页中加入下面一段代码：a target=blank width=122 height=39其中其中756519678756519678是网页上欲留的是网页上欲留的QQQQ号。号。七、在网页中插入七、在网页中插入QQ对话对话八、在网页中插入当前日期八、在网页中插入当前日期document.write now()问题回顾：1 1、文件超链接不能用：、文件超链接不能用：没有保存好就链接了没有保存好就链接了2 2、文件在哪里找不到：、文件在哪里找不到：保存时没有看位置。保存时没有看位置。3 3、滚动字幕：、滚动字幕：不能上下滚动，无超链接。不能上下滚动，无超链接。4 4、测试：、测试：按按F12F12