网页制作教案电子版.docx

《网页制作教案电子版.docx》由会员分享，可在线阅读，更多相关《网页制作教案电子版.docx（75页珍藏版）》请在优知文库上搜索。

1、教学内容第一章网页与网站基础知识校历第一周课时4课型理论+实践教学目标网站的策划与创建原则教学方法任务驱动法作业布置分析总结本章主要通过三个活动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作常用的几种工具。了解HTML语法的基本构成及几种常用标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。教学过程新课引入：越来越多的人开始熟悉网络，熟悉网页。人们已经渐渐意识到网络正在改变日常生活。人们需要为个人、企业制作一个精彩的网站，这就带来一个新的问题：怎样设计制作一个实用而美观的网站？实用与美观似乎总是相悖的。新课内容：一、网页与

2、网站的概念网页：我们在浏览器中看到的页面，它是一个单个的文件。网页里可以有文字、表格、图像、声音、视频等等。网站中的第一个页面成为首页或主页。网站：存放在网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。二、网页的设计网页的主题指网页所要表现的最主要的思想内涵，可以说师网页的灵魂。确定主题时应遵循的原则1 .自己擅长或喜欢的内容2 .主题小而精3 .不要太滥或目标太高2、网页的文字最适合于网页正文显示的字体大小为12磅左右，如果在一个页面中需要安排的内容较多可采用9磅的字号。标题和需要强调的内容可以用较大

3、的字号。行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点，则行距12点。在网页设计中，设计者可以为文字、文字链接、己访问链接和当前活动链接选用各种颜色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于文字的颜色，只可少量运用，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。3、网页的色彩教学过程色彩助鲜明性 色彩的独特性 色彩的合适性 色彩的联想性 页面中各处用色的选择4、网页版式和布局1.版面设计的步骤(1)画出页面的结构草图：只需画出页面的大体结构。注：分

4、辨率为640*480时，页面显示尺寸为620*311；分辨率为800*600时，页面显示尺寸为780*428；分辨率为1024*768时，页面显示尺寸为1007*600；(2)布局细化和调整：将需要放置的功能模块安排在页面上，注意突出重点和平衡协调(3)定格：确定出完美的布局方案，定格为最后的版式2.常见网页布局(1)T型结构教学过程(2)同字结构yxMVif,13MAM1I.,11工4-二Iawf*w-KihB*0方大-文安WRWCaWHNBMmXttt*W3EWvnMr费:CZ0VM5”x心E*R三5番上M8MMSsa三nxaMiagM*wwejw*qmcfm5wa三morxwrfi三三m

5、mre03g今MyM-a田遁伴平4WtM8E.raEEgVUMhac匕.4PI!里*F5r主XRGfflMa0*/公rjcyawx3M乃ntf三ouHwMmea0*weuom3Eyngu.拿0,.gWMLeX：_)CfrCJBSMmK呻:SfEil2J6tGWEWygM*BW类&(3M96:WS*kFMHV-SGT*TMMI*IWr编假f蕾1.er3，3“f一mw竽立的(3)川字结构(4)三字结构7OO1ZO&也教学过程or.s三24。XfuiaEmail夕*皎未支持oWAamOOnaMW。三ftMS。ITIVBMfIo3esgsomm1MXR大U离b式U11Jtl*Mer3加白大。B阳光“日

6、记*BOMiexa”，rnw三r”/,*3”IWam务UMmmnBaasrwBw*内AI8UWwwtwe(3)川字结构(4)三字结构7OO1ZO&也教学过程or.s三24。XfuiaEmail夕*皎未支持oWAamOOnaMW。三ftMS。ITIVBMfIo3esgsomm1MXR大U离b式U11Jtl*Mer3加白大。B阳光“日记*BOMiexa”，rnw三r”/,*3”IWam务UMmmnBaasrwBw*内AI8UWwwtwe(5)单一结构教学过程教学内容第一章网页与网站基础知识校历第一周课时2课型理论+实践教学目标网站的策划与创建原则教学方法任务驱动法作业布置分析总结本章主要通过三个活

7、动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作常用的几种工具。了解HTML语法的基本构成及几种常用标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。三、网站的策划与创建原则1、定位网站主题和名称设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也就是你的网站的题材。对于题材的选择，应注意：（1）主题要小而精。定位要小，（2）题材最好是你自己擅长或者喜爱的内容。（3）题材不要太滥或者目标太高。“太滥”是指到处可见，网站名称及域名的选择也是非常重要的。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广

8、也有很大影响。一般的建议是：（1）名称要正。也就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。（2）名称要易记。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。另外，网站名称的字数应该控制在六个字（最好四个字）教学过程（3）名称要有特色。名称平实就可以接受，如果能体现一定的内涵,给浏览者更多的视觉冲击和空间想象力，则为上品。域名的选择也是如此，选一个简单易记，比如可以模仿知名网站扩大自己的影响，有一定含义的域名也是网站成功的一部分。2、网站的风格网站的整体风格及其创意设计是站长们最希望掌握，也是最难以学习的。难就难

9、在没有一个固定的程式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。有风格的网站与普通网站的区别在于：普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。如何树立网站风格呢？我们可以分这样几个步骤：第一，确信风格是建立在有价值内容之上的。第二，你需要彻底搞清楚自己希望站点给人的印象是什么。第三，在明确自己的网站印象后，开始努力建立和加强这种印象。对于确定风格，这里提供一些参考：1.将你的标志log。,尽可能的出现在每个页面上。或者页眉，或者页

10、脚，或则背景。2 .突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。3 .突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字教学过程体。4 .想一条朗朗上口宣传标语。把它做在你的banne里，或者放在醒目的位置，告诉大家你的网站的特色5 .使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。6 .使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。7 .创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.食。口一（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感

11、觉。8 .用自己设计的花边，线条，点9 .展示你网站的荣誉和成功作品。10 .告诉网友关于你的真实的故事和想法。教学内容第二章站点的建立与管理校历第二周课时6课型理论+实践教学目标1、站点创建2、页面设置教学方法任务驱动法作业布置制作个人空间网站分析总结通过为“我的个人网站”收集相关资料，掌握站点素材及其制作工具的有关知识；为“我的个人网站”规划站点目录，并比较大型站点的站点结构与小型站点的站点结构区别，从而了解站点的设计流程；学会使用“高级”标签为“我的个人网站”建立站点，并设置相关参数；通过网站地图，实现对“我的个人网站”中的网站文件管理，检查链接等。一、站点概念多个网页文档通过各种链接并

12、联起来就构成了站点。二、规划站点结构1、一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹,将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内，当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。如I：html:放网页，img:放图像，SoUnd:放声音文件，back:放备份文件，Other:放其他2、用英文或者拼音给文件命名（推荐英文），不要使用中文的名字（因为有的机器对中文支持不太好，有可能出现链接的错误，你自己以为正确的东西在别人看来有可能是错的）。三、创建站点教学过程1、选择“窗口”/“文件”命令打开“文件”面板2、展开文件一项，选中

13、站点，然后再选编辑站点3、点击“新建”未命名站点1的站点定义为本地信息站点名0）：未在gi1本地根文件夹0）:D5M名站点K-二3回自动即本地文件碉默UStt文件夹a）：I|。站点名称（N）处填上你要建立的站点的名称，这个名字只起着识别的作用，与网站发布后真实的名字无关；本地根文件夹（F）处选择设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录；缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议大家在这里打上钩；其它的可以默认，当然你可以试试选择不同的，默认图像文件夹为站点默认存放图片的文件夹（以后在做网页的过程中，使用非站点内的图片时，它会提示是否把该文件复制到这个文件夹内）；HTTP地址（三）为你站点的网址。作业：建立一个名字为“我的个人网站”的站点，站点内有imagxpictureh