《网页设计与制作》课件

授课班级：校选课Email：[e-mail]QQ群：212444338学生作品•要求：严格按照老师安排的实验内容上实验，不允许玩游戏等，一旦发现取消上机资格，实验成绩为零分；•请假：要有辅导员签字的假条送给本课程老师。上课要求：基本概念：1、什么是网页、网站？2、网页有哪些构成要素？3、常用网页设计工具有哪些？4、网站怎么做？网站、网页的概念2.1什么是网页用HTML语言编写的文件称为HTML文件，以页面的形式呈现在用户的屏幕上。2.2网站存放网页的服务器。因特网上一块固定的面向全世界发布消息的地方，由域名(也就是网站地址)和网站空间构成，通常包括主页和其他具有超链接文件的页面。2.3两者关系网站包含网页，一张网页最多是一个网站构成网页的基本要素文字：标题、字号、字型等；图形：菜单按钮、背景图形链接标志：声音和视频:1、声音是多媒体网页的一个重要组成部分。网页中常用的声音文件格式有：MIDI、WAV、MP3和AIF等。2、视频是网页中的一个重要组成部分。格式有：ReaPlay、MPEG、DIVX等。采用视频文件可以使网页变得精彩而又生动。交互功能Internet区别其他媒体的一个重要标志是它的交互功能。例如：向某网站购买商品时，提交相关的个人信息等。通常网页的交互功能都是利用表单来实现的。制作网页的基本工具目前网页制作有两种方法：一种是利用网页制作工具进行制作，如使用FrontPage、Dreamweaver等；另一种是采用HTML超文本标识语言的专用格式来进行编制。(1)FrontPage(2)Dreamweaver：与Fireworks8、Flash8构成网页三剑客课程教学进度表(2011至2012学年第2学期)校选课2012年级1、2班总学时数：36讲授18学时实践性教学环节18学时填表时间：2012-2-5第一部分：MSFrontPage2003应用第二部分：Flash2004动画制作第三部分：网站建设一条龙第四部分：实际技能训练第五部分：Dreamweaver简单应用第六部分：免费网站空间的申请第七部分：课件下载地址第一部分：MicrosoftOfficeFrontPage2003应用1、启动：用鼠标左键单击“开始”按钮，选择“程序”下面的“MicrosoftOffice”/“MicrosoftOfficeFrontPage2003”2、关闭：单击命令菜单栏中的“文件”，选择“退出”即可。一、FrontPage2003基本操作FrontPage2003的界面标题栏菜单栏常用工具栏格式工具栏视图栏标记栏工作区1、界面介绍任务窗口文件夹列表2、界面操作界面的移动：界面不是一成不变，可以按照用户的习惯自行调整和变化，如工具栏、菜单栏等。界面的打开与关闭：（1）菜单栏右击即可出现菜单选项（2）视图菜单工具栏工具菜单3、网站规划网站的风格1网站的结构2网站的配色3根据个人需要设置网站风格，如：活泼、清纯、庄严。网站如一本书，需要有大纲，主要目录、具体内容颜色的搭配非常重要，怎么配色才能吸引用户进来观看4、色彩搭配红色热情橙色时尚蓝色宁静绿色清新紫色神秘黑色深沉灰色高雅白色明快配色方案的操作：*点击菜单“格式”--“主题”*点击任务窗口---“主题”*点击某个主题右击--“自定义”5、设计草图二、网站1.制作网站的流程主题风格规划配色素材版面上传测试编辑网站的设计原则1）目标明确，重点突出2）主题鲜明，层次清晰3）合理设置栏目4）正确定位整体风格5）页面布局合理6）色彩搭配，和谐统一7）多媒体功能适当应用。网站元素级别网站网页1网页2网页3文字表格图片动画视频2、创建、关闭站点利用模板创建：点击“文件”—“新建”—“由一个网页组成的网站”，选择所要的网站模板。关闭网站：点击菜单“文件”---“关闭网站”，这样即可关闭正在编辑的网站。打开“文件”菜单，可以看到：关闭关闭网站退出3、站点管理打开站点：点击菜单“文件”---“打开网站”，这样即可打开需要编辑的网站。重命名站点：点击菜单“工具”---“网站设置”---“常规”---“网站名称”，在对应的文本框里即可更改你想要取的名字。打开“文件”菜单，可以看到：打开打开网站3、站点管理文件夹列表打开：点击菜单“视图”---“文件夹列表”（Alt+F1）。在文件夹列表里，可以新建文件夹、更改正文件夹名称及删除文件夹等操作，注意它的级别（层次）。三、编辑网页新建网页：单击命令菜单栏中的“文件”，选择“新建”，在屏幕的右面出现一个“新建”工具栏，选择“新建网页”下的“空白网页”，于是一个新的网页“new_page_1.htm”就产生了。问题思考：还有哪些方式可以新建一张网页？三、编辑网页1、预览：单击屏幕左下角的“预览”按钮，于是新网页在浏览器下的显示效果就出现了。再单击“设计”返回页面设计状态，可以继续修改。也可以单击菜单栏“文件”下的“在浏览器中预览/MicrosoftInternetExplorer”或直接按F12键可以在IE下预览制作的网页。2、保存：单击“文件”/“保存”，为文件起个名字，并修改“保存位置”为D盘上“座号姓名”文件夹，然后单击“确定”。这样所有网页使用的文件都放在这个文件夹中，便于使用和管理。例如：888张三思考题：1、怎样找到你的文件夹？2、如何修改已经存盘后的网页文件？三、编辑网页设置网页属性：在网页上方右击，选中“网页属性”；(1)修改标题(2)修改边距思考：标题与名称区别1、直接输入汉字：在新建的“new_page_1.htm”页面上输入汉字信息，并进行字体、字号、颜色等相关修饰。2、导入文字：打开“插入”菜单---“文件”（注意选择文件的类型），就可以插入你需要的内容。注意：导入文字内容的格式，如：word、wps、txt、htm等三、编辑网页(文本)注：1、先输入文字，再进行排版。2、边输文字边排版。三、编辑网页(文本)选择文本：方法1：按住鼠标左键拖动即可方法2：按住“shift”键选择连续文本方法3：连续按鼠标左键三次可选中整段文字方法4：按住“alt”键，点击鼠标左键可选中整段文字设置文本格式方法1：选中文字右击---“字体”方法2：按住“格式”菜单---“字体”方法3：在格式工具栏，也可以设置字体三、编辑网页(文本)删除文本格式：方法1：选中文字，在字体对话框里进行更改。这样速度很慢。方法2：选中文字，点击“格式”菜单---“删除格式”（快捷键ctrl+shift+z）方法3：撤消（快捷键ctrl+z）撤销、恢复：ctrl+z、ctrl+y格式刷：如果要连续使用格式刷，可以双击“格式刷”，即可多次使用，再次点击“格式刷”可取消。添加边框、底纹：点击“格式”菜单---“边框和底纹”三、编辑网页(文本)复制文本：方法1：Ctrl+c、Ctrl+v方法2：选择文字，按住“Ctrl”键---拖动鼠标左键放到存放的位置即可。剪贴板：先打开“编辑”菜单---“office剪贴板”,选择多个对象复制，后再粘贴即可。移动文本：方法1：选择文字，点击“编辑”菜单---“剪切”Ctrl+X方法2：选择文字，按住鼠标左键拖动放到存放的位置即可。三、编辑网页(文本)设置段落格式：1、段落间距：(1)直接按“enter”键换行，距离较大。其代码p；(2)、直接按“shift+enter”键换行，距离很小。其代码br；2、插入符号：在“插入”菜单---“符号”对话框，可以添加所需要的符号。实验：制作一张文字网页实验：制作一张文字网页四、修饰网页(图片)插入图片：点击“格式”菜单——“插入”——“图片”设置图片属性：大小、位置等。插入自选图形：点击“格式”菜单——“插入”——“自选图形”设置图形属性：填充颜色、边框、阴影样式、三维效果等。插入艺术字：编辑文字四、修饰网页(文字超链接)1、文字超链接：先选中文字或其它对象：(1)点击右键——超链接(2)常用工具栏——插入超链接(3)点击“插入”菜单——超链接（ctrl+K）2、创建同一文件的超链接：步骤(1)先选中某些文字或其它对象进行标记，制作标签。选定文字——“插入”菜单——书签（ctrl+k）(2)选定其它文字链接到上面的文字上。选定文字——超链接属性——本文档中的位置，选中即可。3、设置超链接字体效果：打开“网页属性”——“高级”——“启动超链接翻转效果”——“翻转样式”——打开后进行设置思考题：1、如何从子页中返回主页？四、修饰网页(文字超链接)设置超链接颜色：打开“网页属性”——“格式”——超链接、已访问过的链接、当前超链接。设置超链接屏幕提示：先选中文字：打开“插入超链接”对话框——右上方“屏幕提示”，输入相应的内容即可。删除链接文字的下划线：选中文字——打开“字体”对话框——效果——下划线。创建电子邮件：先选中文字或其它对象：点击右键——插入超链接——设置电子邮件地址即可。四、修饰网页(图片超链接)不同元素的链接：1、利用图片本身属性自带的链接——默认链接选中图片——图片属性——常规——默认超链接。2、利用图片工具栏里图形工具建立热点链接。包括：长方形热点、圆形热点、多边形热点。打开图片工具——选中圆形热点——在图像内拖动鼠标——编辑超链接。实验二、制作一张网页实验二、制作两张网页要求：网页中包括：(1)文字、图片(2)文字、图片的超链接、书签(网页内部链接、网页外部链接)其它自由发挥。四、修饰网页(音频、视频)添加FLASH：点击“插入”菜单---“图片”——“Flash影片”，选中你要添加的Flash动画即可。扩展名：swf设置FLASH属性：设置质量、大小、背景等。制作按钮：打开“插入”菜单——“交互式按钮”对话框；按钮类型：（1）按钮（2）字体（3）图像四、修饰网页(音频、视频)添加视频：点击“插入”菜单---“图片”——“视频”，选中你要添加的视频文件，再将添加的视频文件拖动放大即可。设置视频属性：（1）外观（2）常规（3）视频添加背景音乐：点击“网页属性”菜单—“常规”——“背景音乐”。四、修饰网页1、主题：选择“格式/主题”，从任务窗口选择一种样式，会改变整体网页的背景效果。2、动态字幕：在网页上选定一个位置，单击“插入/WEB组件/组件类别/选择一种效果/字幕”，单击“完成”，在文本框中输入文字。也可以添加背景图片。3、在网页中使用网站计数器：在网页上选定一个位置，单击“插入/WEB组件/组件类别/选择计数器”四、修饰网页(表格)新建表格：点击“表格”菜单---“插入”---“表格”对话框删除表格：选中表格---“表格”菜单---“删除单元格”或按DEL键即可删除添加单元格、行和列：在“表格”菜单---“插入”---“单元格”删除单元格、行和列：将光标放在单元格上，点击“表格”菜单—-“选择”---“单元格”，再点击“表格”菜单---“删除单元格”。行和列方法相同。选择表格、单元格、行、列：将光标放在单元格上，点击“表格”菜单”—-“选择”---“单元格、行、列、表格”。四、修饰网页(表格)添加、删除标题：将光标放在任意一个单元格上，点击“表格”菜单”—-“插入”---“标题”合并单元格：选中两个或以上单元格右击——合并单元格或选中“表格”菜单——“合并单元格”。拆分单元格：选定要拆分的单元格，选中“表格”菜单——“拆分单元格”。文本表格互转：选中对象，点击“表格”菜单——“转换”——“将文本转换成表格”四、修饰网页(表格)设置细线边框：方法：首先打开“表格属性”，将边框颜色与背景颜色均设置为黑色，边框线设为0。再选中所有“单元格”，点击“单元格属性”，将单元格的边框颜色与背景颜色改为白色；最后再次打开“表格属性”，将单元格间距设为1即。原理：利用表格的底纹（黑色）与单元格的底纹（白色），中间有单元格与单元