下载文档原格式
【第六章第一节网页制作】教案一、【教学目标】1、理解网页与网站的概念3、掌握页面文件与图片的保存二、【教学重点】三、【难点、关键】1．建站点的位置2．页面文件与图片的保存四、【教学方法】演示、任务驱动法五、【课时安排】3课时六、【教学环境】多媒体教育广播系统，Dreamweaver软件七、【教学过程】第1课时1．导入新课师：上节课已经讲了信息集成（也就是网站建设）的一般过程包括四个阶段，现在请同学们回顾一下。
生：学生作答。
师：同学们平时都有喜欢上网，那大家知道网站与网页的区别吗？概念：网页：通常我们在WWW上所能看到的每一个页面都称之为网页,它能够形象地比喻成一篇文章.网站：网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,能够形象地比喻成一本杂志或一本书.下面我们来学习如何用Dreamweaver这个软件制作网页。
2．新课讲述在制作个人网站之前，应先确定网站的主题。
2008奥运会即将来临，这是中国政治，经济等综合国力提升到另一台阶的盛事，我们中学生也得供献一分锦力本节课的主题是围绕“心系奥运”，资料（包括文字、图片、动画）等我已经为大家收集好，内容分类，网站的结构也规划好了，利用Dreamweaver这个工具来完成“心系奥运”这个网站的建设一、启动Dreamweaver，理解其工作界面“开始”-“程序”-“Macromedia Dreamweaver 8”Dreamweaver工作界面包括：菜单栏插入栏编辑窗口属性面板浮动面板组1．菜单栏（包括10个菜单项）符号所表示的含意黑色命令：表示该命令当前是可用的灰色命令：表示该命令当前是不可用的，需要满足一定的条件后才能使用。
带有复选标记√的命令：表示该命令是一种可选择命令，若前面出现√标记，表示该命令正在使用；若没有√标记时，表示该命令没有被使用。
带有三角形▼的命令：表示在该命令下还有下一级子菜单命令。
带有省略号的…的命令：表示选择命令后会弹出一个相关的对话框。
第1章网站规划在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必要的规划、开发、测试和发布使用。
一般流程如下：1.建设网站前进行必要的市场分析。
2.明确建设网站的目的及功能定位。
3.制定网站技术解决方案。
4.根据网站的目的确定网站内容、网站结构和网站功能。
5.进行网页设计，并根据技术方案实施网站建设。
6.做出经费预算。
7.网站测试。
8.网站发布及推广。
9.网站维护。
第2章网站基础知识网站（Website），是指在因特网上根据一定的规定，使用HTML等工具制作的用于展示特定内容的相关网页的集合。
网站的组成●域名（Domain Name），是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称。
●空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS。
●程序，即建设与修改网站所使用的编程语言，换成源码就是一堆按一定格式书写的文字和符号。
●网页网页（Web page），是网站中的任意一个页面，通常是HTML格式，文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等。
●基本构成元素：文字、图像、超级链接。
●阅读方式：浏览器。
●类型：以不同的后缀代表不同类型的网页文件。
通常分为静态页面、动态页面。
动态网页（active web page）：指网页内容可根据用户的不同请求从而返回其对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开发语言做后缀，如php、asp等。
也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。
静态网页：指全部由HTML标记页面，页面的内容和显示效果基本不发生变化，所有的内容包含在网页文件中。
一般文件名均以htm、html、shtml等为后缀。
术语WWW（World Wide Web），亦称作“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为Web。
《网站主页的设计》教学设计浙江绍兴市第一中学信息处董烨华一、教材分析本节课讲授浙江教育出版社《信息技术基础》第六章“网页的设计与制作”的相关，并根据《浙江省普通高中新课程实验信息技术学科教学指导意见》进行了适当设计，教学侧重于让学生掌握网站的策划与构思和熟练掌握简单网页的设计与制作。
二、学情分析学生已经会收集和整理素材，掌握了用FrontPage制作网页的基本操作，对网站的策划与构思有了一定的了解，但网站创建的知识以及网站策划构思的实践比较欠缺，另外学生现有知识水平存在一定差异。
三、教学目标知识与技能：能较熟练地运用表格实现网页布局；知道创建网站的一般过程，了解一些主页设计的知识；初步掌握网站的策划与构思。
过程与方法：通过自主探究和小组合作完成学习任务，掌握一些探究学习的方法，培养与他人协作、交流的意识和能力。
情感、态度与价值观：通过网站主页设计，激发学生的创作欲望，提高学习信息技术的兴趣和愿望；通过教师提供的创作背景信息，使学生更关注气候变化对人类发展的影响，增强社会责任感。
四、教学重难点重点：学会运用表格实现网页布局，初步掌握网站的策划与构思。
难点：如何在主页制作中实现自己的网站设计构思。
五、教学过程1．教学引入，学习准备教师指导学生访问课堂学习网站（如图1），然后介绍网站的创作构思与特点。
师：这是老师为课堂学习专门设计制作的一个网站，请同学们从“名称贴切、主题鲜明、内容丰富、结构清晰、界面友好美观”五个角度，给网站做个评价，认为都满意就赶快伸出五个手指头。
学生们高举手臂，伸出五个手指。
师：谢谢大家的支持，你们的认可是我创作的动力。
师：通过前段时间的学习，我们已经较好地掌握了素材收集与整理的方法；掌握了一些利用FrontPage软件做网页的基本操作；在欣赏优秀网站的基础上，对网站的策划与构思有了一定了解。
这节课，我们将跟随着学习网站的导航栏，一起揭开创建个人网站的第一页──设计制作网站主页。
网页制作与网站设计课程设计报告一、课程目标知识目标：1. 让学生掌握网页制作的基本概念，了解网站设计的基本流程；2. 使学生掌握HTML、CSS等网页编程语言的基础知识；3. 帮助学生了解网站架构、页面布局和导航设计等方面的知识。
技能目标：1. 培养学生运用网页编程语言进行网页设计的能力；2. 培养学生运用网页设计工具（如Dreamweaver、Photoshop等）进行网站制作的能力；3. 培养学生具备基本的网站测试、优化和发布技能。
情感态度价值观目标：1. 培养学生热爱互联网事业，增强对计算机技术的兴趣；2. 培养学生具备团队协作精神，善于与他人沟通交流，共同完成项目任务；3. 培养学生遵循网络道德规范，尊重他人知识产权，养成良好的网络素养。
课程性质分析：本课程旨在让学生了解并掌握网页制作与网站设计的基本知识，培养学生具备实际操作能力，激发学生对互联网技术的兴趣。
学生特点分析：本课程针对的是初中年级学生，他们对新鲜事物充满好奇心，动手能力强，但可能缺乏一定的编程基础和网络知识。
教学要求：1. 注重理论与实践相结合，让学生在实际操作中掌握知识；2. 采取案例教学，以实际项目为载体，提高学生的实际应用能力；3. 鼓励学生积极参与讨论，培养学生的团队协作和沟通能力。
二、教学内容1. 网页制作基础知识：HTML、CSS、JavaScript等基本概念和语法；网页结构、标签、属性等基本组成要素；网页设计规范和技巧。
教材章节：第一章 网页制作基础2. 网页设计工具：介绍Dreamweaver、Photoshop等网页设计工具的使用方法，学会使用这些工具进行网页制作和图像处理。
教材章节：第二章 网页设计工具3. 网站架构与布局：讲解网站的基本结构、页面布局和导航设计，掌握网页布局的方法和技巧。
教材章节：第三章 网站架构与布局4. 网页编程实践：通过实际操作，让学生学会运用HTML、CSS、JavaScript 等编程语言进行网页设计，培养实际操作能力。
第六章网页的设计与制作本章学习要求如下表：一、网页、网站的基本概念TCP/IP：传输控制协议和互联网协议的总称。
TCP协议的全称叫做传输控制协议；IP协议指的是互联网协议Wide Web)，也可以简称为Web，万维网。
Http(Hyper Text Transfer Protocol：超文本传输协议，浏览WWW网页时采用的协议。
URL（Uniform Resoure Locator）:统一资源定位器或统一资源地址。
HTML（Hyper Text Markup Language）：超文本标记语言，编写网页的语言。
二、网页的基本元素网页的三种基本元素：文字、图形图像和超链接，网页还可以使用“表格”、“表单”、“音乐”和内嵌程序等构件，起到美化网页、双向交流的作用。
1、文字：表达信息的基本工具，可以设置不同的字体、字型、大小和颜色。
2、图形图像：增加视觉效果，使信息表达更直观。
3、超链接：使整个因特网的资源可以方便地相互链接。
4、其他：表格、表单、音乐等三、网页制作工具1、用“超文本标记语言”制作网页理论上来说利用HTML可以编写任何复杂的网页，还可以利用专门用于网页的脚本语言如VBScript、JavaScript等，但是对于网页初学者要完全掌握HTML有很大难度。
2、用网页制作工具软件制作网页⑴ FrontPage：微软公司开发的专门网页制作软件，具有和OFFICE系列类似的操作界面，非常适合初学者学习。
⑵ Dreamweaver:MacroMedia公司开发专业网页制作软件。
四、网页制作1、制作基本步骤：确定目标与需求分析--策划制作方案--收集与整理素材--合成与测试网页--发布2、制作和编辑网页1）编辑文字、图片、水平线、动态字幕、表格（包括单元格、行的插入与删除、单元格的合并与拆分）2）修改单元格属性（包括对齐方式及单元格背景的设置）、表格属性（包括对齐方式、表格边框及表格背景的设置）、网页属性（包括网页标题、背景音乐、网页背景的设置）。
3）对文字或图片制作超链接制作指向本站的超链接制作指向Internet的超链接制作指向电子邮件的超链接第六章《网页的设计与制作》练习题一、单项选择题(每题1分)1、以下不能用于制作网页的软件是( )A：DreamWeaver B：FrontPage C：NotePad D：RealPlay2、下列扩展名所表示的文件不可能是网页文件的是( )A：htm B：asp C：rar D：php3、下列多媒体信息无法直接应用到网页中的是( )A：图形 B：音乐 C：可执行文件 D：视频4、下列对象无法设置超链接的是 ( )A：表格 B：图片 C：文字 D：按钮5、下列关于网页元素图片的使用观点中，不正确的是 ( )A：图片可以直观形象地表达某些信息B：图片可以美化网页，吸引浏览者的眼光C：图片可以跨越语言障碍表达某些信息D：图片是网页必备元素6、网页制作时，能对网页中的元素和构件进行准确定位的是 ( )A：表单B：表格 C：网页特效 D：超链接7、一张风景图片的文件格式是BMP，为了将它集成到网页中，需要把该图片有损压缩成JPG 格式，下列软件中，具有这种功能的是( )A：画图 B：Word C：Excel D：FrontPage8、为了让世界各地都能正确的浏览网页，下列字符中，不能用来对网站中文件或文件夹命名的是( )A：英文字母 B：下划线C：汉字 D：数字9、下列项目中，不能作为超链接指向目标的是 ( )A：文件 B：文件夹 C：电子邮件地址D：网页书签10、在地址栏中输入网址时，可以省略HTTP协议而直接输入网址，这个HTTP协议的中文名称是( )(A)文件传输协议 (B)电子邮件协议 (C)新闻讨论组协议(D)超文本传输协议11、为了加快页面的下载速度，在网页中一般使用（）格式的图片文件。
A. BmpB. Gif 或JpgC.TgaD.Tiff12、网页的基本元素是( )(A)网址、色彩和内容 (B)文字、色彩和内容(C)文字、图形图像和色彩(D)文字、图形图像和超链接13、在FrontPage2000中，下列关于表格的说法，错误的是（）。
A.如果表格的大小以像素为单位，那么无论网页的大小是多少，表格的大小都会维持不变B.如果的大小是浏览器窗口大小的百分比，那么无论网页的大小是多少，表格的大小都会维持不变C.如果未指定表格的高度和宽度，则表格的大小将根据内容而定D.如果表格显示在框架中，则其大小根据框架大小的百分比而非整个网页大小的百分比而定14、在网页中观察超链接存在与否，最直接的方法是（）。
A.观察文字是否有下划线B.观察图片是否加框C.将指针指向文字或图片，观察指针是否变成手形D.观察文字的颜色15、在机关工作的小王想学习网页制作技术，你向他推荐的软件是( )(A)Word (B)Excel (C)FrontPage (D)Photosh op16、网页文件的扩展名为（）。
A.DocB.HtmC.XlsD.Mpg17、下列操作中，（）不能关闭FrontPage2000。
A.单击"关闭"按钮B.单击"文件"菜单中的"关闭"C.单击"文件"菜单中的"退出"D.双击标题栏左边的控制菜单框18、在FrontPage2000中的（）视图可以直接制作网页。
A.网页视图B.文件夹视图C.报表视图D.超链接视图19．浏览网页过程中，鼠标移动到超级链接上时，其形状一般为：( )A．I形B．小箭头形 C．小手形D．沙漏形20．在制作网页时，电子邮件的超级链接类型应设置为：( )A．mailto：B．URL： C．http：D．ftp：21、小芳在网页制作中打开了如下图所示的表格属性设置对话框，你认为她可以完成下列操作中的① 表格对齐方式改为水平居中② 表格背景颜色设置为粉红色③ 给单元格设置不同背景图片④ 给单元格添加不同边框颜色。
(A)①②(B)③④(C)②③(D)④①22．下列表示指向电子邮件的超链接地址是( )(A)\image\school\master.htm (B)(C) (D)maito:23．小慧准备制作一个指向本地计算机文件的超级链接，在选取了要设置超链接的文字后打开了如下图所示的“创建超链接”对话框。
你认为她要找到该目标文件，在图中应该单击的按钮编号是( )(A)1 (B)2 (C)3 (D)426、仙居中学资源中心由很多网页组成，这些网页主要通过( )连接在一起的。
A、网址B、E-mail地址C、超级链接D、表格27、下列文件中，最可能是网站首页文件的是( )。
A、default.txtB、index.docC、index.htmD、首页.htm28、在因特网上建设网站，一般可分为3个步骤:①上传发布; ②网站规划; ③网页制作，正确的顺序是( )。
A、③②①B、②③①C、①③②D、①②③"29、在Windows中，用于浏览网页的程序图标是( A )。
30、用FrontPage2000制作网页，在如下图所示的对话框中，创建电子邮件超链接的是( C )。
31、在Front Page2000的“表格属性”对话框中，要使制作的表格看不见边框，则（）。
A、单元格边距设置为0B、边框颜色设置为无色C、单元格间距设置为0D、边框粗细设置为032、用Front Page2000制作网页时，下列说法不证确的是( )。
A、“使用格式刷”按钮可以方便地复制动态效果B、使用复制的方法可以建立多个悬停按钮C、中国的网站都不接受免费个人主页申请D、正是有了超链接，各种各样的的网页或网站才被紧密地联系在一起33、Front Page2000，超文本语言称为( )。
A、主页B、网页C、网站D、HTML语言34、在Front Page中，保存带有图像的网页时，下面说法正确的是( )。
A、自动将不是GIF和JPG格式的图像转成GIF格式B、自动将不是GIF和JPG格式的图像转成JPG格式C、根据情况，自动将BMP、PCX等格式的图片保存为GIF或JPG格式的图像D、根据情况，自动将其他所有格式的图片保存为GIF或JPG格式的图像35、在FrontPage2000插入图片时不提倡使用的格式是( )。
A. JPGB. GIFC. PNGD. BMP36、下列哪种说法不正确？( )A. 在网页中可插入视频文件B. 在网页中可插入音频文件C. 在网页中不能同时插入视频文件、音频文件D. 在网页中可插入图像文件37、在FrontPage2000中，网页模板的作用是( )。
A. 新建一个空白网页B. 新建一个已预先按要求设计好的网页C. 链接外部一个已存在的网页D. 插入外部一个已存在的网页38、在FrontPage2000中，插入表格的目的一般是为了( )。
A. 是为了能在网页中插入图片B. 是为了能在网页中插入声音C. 是为了能在网页中插入视频D. 是为了能在网页中控制文字、图片等在网页中的位置39、在FrontPage2000中，能完成图片相互转换的格式是( )。
A. GIF，JPEG，PNGB. GIF，BMP，JPEGC. GIF，BMP，PNGD. GIF，PNG，PSD40、在FrontPage2000若要将某一段落选为操作块（亮带），则需要在该段落里( )。
A.单击鼠标双键B. 单击鼠标C. 连击鼠标三次D. 双击鼠标41、要在文档中插入图片，也可以通过( )。
A.剪切B.复制C.粘贴D. 复制和粘贴42、利用FrontPage 2000在网页中插入背景音乐，下列几种音乐格式中，( )不被支持。
A. WaveB. MidiC. AuD. MP343、关于网页的说法错误的是( )_。
44、在FrontPage2000中预览一个网页时，( )。
A. 所有的超级链接都不能发挥作用B. 与在浏览器中观看的效果相同C. 双击一个对象可以编辑它D. 可以在右键快捷菜单中修改它的属性45、关于表格各个单元格，下面的说法错误的是( )。
A. 表格的每个单元格可以有不同颜色的文本B. 表格的每个单元格必须使用相同格式的文字C.可以在表格的单元格中使用超级链接D. 可以在表格的单元格中使用图片46、在下面的( )种情况下不能随意设置页面的背景。
A. 使用了主题样式B. 使用了表格C. 超级链接D. 插入了图片之后47、关于HTML文件中的超级链接，( )说法是错误的。
A. 可以链接到一个特定的网址B. 可以链接到一个e-mailC. 可以链接到一个文件D. 不能链接到当前网页中的一个特定位置48、使用FrontPage2000创建网页，( )说法是错误的。
