网页的版面设计.ppt

网页制作,FrontPage,唐山市第二十三中学孟英新,知识就是力量，而这力量又来自于我们对知识的渴求！,1、为什么学习本课程？2、我怎么教你们？3、你们怎么学？4、如何获得学分又获得知识？,基本概念,1、什么是网页？2、网页有哪些构成要素？3、常用网页设计工具有哪些？4、网站怎么做？,第一部分：,MicrosoftOfficeFrontPage2003应用,1、开机：进入windows（2000/2003/XP）2、进入：用鼠标左键单击“开始”按钮，选择“程序”下面的“MicrosoftOffice”/“MicrosoftOfficeFrontPage2003”3、新建：单击命令菜单栏中的“文件”，选择“新建”，在屏幕的右面出现一个“新建”工具栏，选择“新建网页”下的“空白网页”，于是一个新的网页“new_page_1.htm”就产生了。,一、如何启动FrontPage2003,1、输入汉字：在新建的“new_page_1.htm”页面上输入汉字信息，并进行字体、字号、颜色等相关修饰。2、插入图片：在当前页面上“插入”图片，请单击“命令菜单”下的“插入”/“图片”/“来自文件（或剪贴画）”，选择一张图片，单击“确定”。,二、编辑网页,二、编辑网页,3、预览：单击屏幕左下角的“预览”按钮，于是新网页在浏览器下的显示效果就出现了。再单击“设计”返回页面设计状态，可以继续修改。也可以单击菜单栏“文件”下的“在浏览器中预览/MicrosoftInternetExplorer”或直接按键可以在IE下预览制作的网页。4、保存：单击“文件”/“保存”，为文件起个名字，并修改“保存位置”为D盘上“座号姓名”文件夹，然后单击“确定”。这样所有网页使用的文件都放在这个文件夹中，便于使用和管理。例如：888张三,三、修饰网页,1、网页标题：选定一个网页，单击“格式/背景/常规/标题”，在文本框中输入网页标题。2、背景音乐：为网页添加背景音乐，可以单击“格式/背景/常规/背景音乐”，再单击“浏览”找到你喜欢的音乐。3、超链接：选择一段文字，单击右键，选择“超链接”，选定要链接的网页，确定。4、网页过渡：从一个网页过渡到另一个网页的效果，可以单击“格式/网页过渡/过渡效果”。,三、修饰网页,5、主题：选择“格式/主题”，从右侧选择一种样式，会改变整体网页的背景效果。6、动态字幕：在网页上选定一个位置，单击“插入/WEB组件/组件类别/选择一种效果/字幕”，单击“完成”，在文本框中输入文字。也可以添加背景图片。7、交互按钮：单击“插入/交互式按钮”，可以自制特色按钮。8、多媒体：单击“插入/图片/flash影片（swf类型文件）或视频（rm、mp3）”，然后链接到相应文件即可。,四、图片热点链接,1、单击“视图”/“工具栏”/“图片”，弹出图片修饰工具栏；2、选中页面上要进行热点链接的图片；3、单击图片工具栏上的“多边形热点”，用鼠标画出要进行热点链接的区域，并使其封闭4、在弹出的“插入超链接”对话框的“地址”栏中输入要热点链接的网页地址即可。5、小技巧：使热点区域具有文字提示功能：在“插入超链接”对话框中的“要显示的文字”栏后面有个“屏幕提示”按钮，然后输入要出现的提示文字。,五、制作滚动字幕,1、插入：在网页空白处：单击：“插入/web组件/滚动字幕”，输入要显示的信息。2、修改代码（红色是要添加的代码！）这是我的滚动字幕这是第二行字幕这是第三行字幕思考：如果想让文字自上向下滚动怎么办？down,3、鼠标悬停：如何在滚动字幕上实现：当鼠标悬在上面时就停止滚动，按下时就实现超级链接，离开时继续滚动，下面粉色代码为实现代码。也可以直接用下面代码替换原来的代码。这是我的滚动字幕这是第二行字幕这是第三行字幕,五、制作滚动字幕,4、滚动图片：利用滚动字幕制作滚动图片，并实现超级链接。,动态滚动图片第5个单元格第7个单元格第8个单元格第10个单元格,浏览效果,六、使用书签,1、制作书签：在网页中选中某一段落的开头作为书签的起始入口地址，然后单击“插入”/“书签”，确定。2、制作目录：将各个做好的书签名字以目录方式做好。3、使用标签：选中目录某一项，超链接到书签上就可以了。,七、插入层,1、层：在网页中选择适当的位置，单击菜单栏上的“插入/层”2、输入数据：单击层，便可以向其中输入文字，插入图片、动画等等信息。3、移动：拖动层的左上角控制柄，就可以任意移动层到任何位置。4、重叠层：可以将多个层重叠，以达到一定的效果。5、改变层次：双击“层控制柄”，可以用鼠标拖动相应的层到任何位置，到达改变层的次序。,八、使用超级链接,使用超级链接技术可以使多个网页相互链接在一起，方便浏览。1、分别按照前面的方法做好主(首)页和与其链接的子页文件（*.htm），并保存在一个文件夹中。2、在主页上输入提示进入子页的文字，作为超链接的按钮文字。3、选中按钮文字，再单击“插入/超链接”，找到要链接的文件，确定。【主页】【框架网页】【滚动新闻】【热点链接】【布局表格】【网页主题】【留言薄】,九、使用表格,法一：自动生成表格1、制表：在网页中选择适当的位置，单击菜单栏上的“表格”/“插入”/“表格”2、设置：修改“插入表格”属性，设置行数和列数，单击“确定”。3、数据：单击某个表格，便可以向表格中输入文字、图片、动画等等信息。法二：布局表格和单元格,1、当需要将一张网页分成几块显示不同的子网页时，可以采用框架网页。2、“文件/新建/新建网页/其它网页模板/框架网页”下的“标题、页脚和目录”，并确定。3、出现空白的框架网页后，就可以向里面添加做好的网页。（实例）,十、框架网页设计,在网页中加入下面一段代码：其中756519678是网页上预留的QQ号。,十一、在网页中插入QQ对话,1、在D盘上建立一个以你自己的“座号姓名”为名字的文件夹。例如：88张三2、启动FrontPage2003，新建一个网页，并以index.htm为名保存在形如“88张三”的文件夹里面，内容为介绍自己简历，并加图片。3、按照前面介绍的网页制作技术分别建立不同的网页(例如求职意向、成绩单、爱好特长)，并利用超级链接技术链接到主页index.htm上。4、实现网页间过渡效果设计。,实验训练一：个人求职网站,5、在主页index.htm上增加图片热点链接到三个子页上。6、在主页index.htm上增加滚动字幕，并有三张不同的图片链接到三子页上。,实验训练一：个人求职网站,实验训练一之问题回