《网站设计与网页制作》电子教案.docx

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

1、苏州工业职业技术学院教师备课首页SuzhouInstituteOfIndustrialTechnology,W*4sRx第1页课题子项目一第1讲网站建设的整体流程课型新授授课班级授课时数2教学目标1 .对网页制作工具有一个基本的认识，知道它的功能、用於和使用的广度等。2 .了解网站的开发步骤.为接下来的学习打基础。教学重点1 .按照工作的规格对学生提出学习本课程的具体要求。2 .网站的开发步骤，以及一些规格数据。教学难点使学生能够明确自己学习本课程的最终目标，并从整体上了解网站开发流程,为后面的学习打基础。学情分析教学效果教后记第1讲网站建设的整体流程引入：随着网络的发展因特网已成为了人们生活

2、的部分，这都是网页的功劳。通过网页浏览者可以得到各种信息，可以交换思想可以通过网络进行购物，目前的网页种类繁多，归纳来可以分成这么几种：堆纯根据兴趣而制作的个人网页、由具有共同爱好的人所组成的团体、以宣传企业为目的的企业用网页、成为因特网商店的大型购物中心以及门户网站等。而那些视觉效果比较好的网站往往会收到我们的青睐。那么这些网页是如何制作出来的呢？在目前市面上众多的网页编辑软件中，有的重视效率，有的强调版面设计，而DreamWeaVer可以很方便地实现这两方面的完美结合。另外，Dreamweaver的网页动态效果与网页排版功能都优一般同类软件，即使是初学者也能制作出相当水准的网页，所以Dre

3、arnWeaVer是网页设计者的最佳选择，已成为目前最为流行的网页设计工具。网页设计好学吗？网页设计好学。只要学会操作网页三剑客，人人都可以制作出网页来.网页设计不好学。（列出两个差异巨大的网页）同样是设计公司，但在网上展示出的效果却如此的不同。假设大家是客户，在经费许可的情况下，你会优先选择哪一家来做设计呢？当然是第一家了。这就是网页设计域能体现出效益的地方。但是，同样是做网页的，为什么差距如此之大呢？原因就在丁网页设泞是平面设计、动画设计、音效设计、配色等各个方面结合的产物。因此,学会网页设计虽然不难，但是要做好网页，却需要不断地学习和积累，在不断的探索和实践中进步。新授：一、认清两个名词

4、一网页和网站以学校网站为例：性看一一杳看源文件（纯文本文件）.在互联网上应用最广的功能应该是网页浏览。浏览器窗口中显示的一个页面被称为一个网页，网页实际上就是一个文件，这个文件存放在世界上某个地方的某一台计算机中，而且这台计算机必须要与互联网相连接。当我们在浏览器的地址栏中输入网页的地址后，经过一段复杂而又快速的程序解析后，网页文件就会被传送到我们的计算机中，然后再通过浏览器解择网页的内容，最后展现在我们的眼前。文字和图片是构成网页的两个最基本的元素。除此之外，网页中还包括动画，表雌，视频和音频等内容。那网站呢？网站是众多网页的集合。不同的网页通过有组织的链接整合到一起，为浏览者提供更丰宾的信

5、思。网站同时也是信息服务类企业的代名词。如果某人在网易或者在搜狐工作，那他可能会告诉你，他在一家网站工作1网页和网站的关系：假如网站是一本-E的话，网页就是这本书中的一HTM1.文件的基本结构HTM1.文档的结构网页标aMM-W1.AVHEAD：头”分IHTM1.网页HelIO.Fd!网页内容.可以是文本、BM卜VBoDYA主体,分VHTM1.VHTM1.标签标记HTM1.文档的开始和结束I网站的开发不仅仅只是把网页制作出来那么筒单二、网站的开发步充I.网站的前期策划a）确定网站的用户群和定位网站的主题（确定网站的名称）b）整理客户提交的资料（文字、图片）在制作网页时代码视图讲。O网站结构图（

6、网站导航设计）d）网站形象设计i. 网站的标志（Sgo）ii. 网站的色彩搭配iii. 网站的标准字体iv. 网站的宣传标语e）网页布局图（版式风格）2 .首页页面设计3 .其他二级页面效果设计4 .在PhotOShOP中裁切设计稿5 .站点的规划与建立6 .在网页编辑软件中制作网贞7 .测试与发布上传8 .后期更新与维护具体分析一“网上书店，i.确定网站的名称网站的名称很重要，它决定着你的网站是否更容易被人接受。【举例】：“网上书店”这个网站，名字读起来JR琅上口、能反映出网站的题材、且易记。讨论主题：你能列举出一些你所喜欢的网站名字并说明你喜欢它们的理由吗？ssFlashfBanner）制

7、作.总结：素材的整理与再加工.网站的名称应该简短、有特色、容易记，最电要的，它应该能够很好地概括你的网站主题,网站命名的原则：（1）要有很强的概括性，从网站的名称就能反映出网站的题材。（2）要合理、合法、易记，最好读起来琅琅上口。（3）名称不宜过长,要方便其它网站链接.（4）有个性，体现出一定的内涵，能给浏览者以更多的想像力和冲击力。2,整理客户提交的资料在做网页之前，我们要尽可能多地收集与网站主题相关的素材（文字、图像、多媒体等素材）,再去先存菁.取其精华为我所用，界的情绪.赏心悦目的网页，色彩的搭配都是和谐而优美的。【举例】：1 .主色调：蓝+白+黑2 .辅助色：球+橙+黄+灰6 .网站的

8、标准字体网站的字体也是网页内涵的一种体现，合适的字体会让人感觉到美规、亲切、舒适。一般的网页默认的字体是宋体，如果你想体现与众不I可的风格，可以做一些特效字体，但特效字体最好是以图像的形式体现，因为很多浏览者的电脑中可能没有你所设置的特效字体O【举例】：1 .正文：宋体、12像素、行高16像素、深灰色2 .标题：宋体、14像素、加粗、深灰色3 .版块标题：特殊字体(迷你简稚艺)处理成图片的格式7.网站的宣传标语讨论主题：请大家列举出生活中给你留下深刻印象的宣传标语，并分析标语的优劣.【举例李宁切皆有可能8、网页布局图网页布局元素一般包括：网站名称(logo).广告区(banner)、导航区(m

9、enu)、新闻(whatsnew)、搜索(search)、友情链接(links)版权(copyright)等。网页版式：我们常见的布局结构仆国”字形布局、“匡”字形布局、三”字形布局、川字形布局、封面里布局、FlaSh布局、标题文本型布局、框架型布局和变化型布局等。首页，三字型上、中、下)：中：分三栏(左、中、右)9.首页及二级页面设计贞面设计主要包括创意、色彩和版式:个方面。创意公使网页在众多的竞争对手中脱颖而出；色彩可以使网页获得生命的力量：版式则是和用户沟通的核心，所以这三者缺一不可.使用Photoshop设计首页效果图，首页设计完之后，其他页面的设计就没有主页那么或杂了。主要是和主页风

10、格保持致，页面设计美观，要有返【可主页的链接等.【阚】：1 .首页设计图:.网上书店-E-B(X)KSTORE用户赞录新书上紫站长推苍用户名:网上调杳DicaavcaveiIX2004从入DtIWIII怅*：n”汇出3社：DWaFitlUXtfBOI:oxi2)g门典书专业39书Photosbopcsz技术”押与特效设Htt:WEax3Ji:+g*eIi金日Ie:御。月*t*RPBt祖?UnAJOYO；M*amaxoncn友情链接156.1I书!学ItMR?生而士“站所用!三MaTF%.加有侵&行加皿MHwXMA町第X，般方太：兴肯村芒（css住港交密后与网GI怅，：2Q&或Ii:人反“电匕9

11、11土*日用：怎088月V50.1天天IRliT*3E2BNg；rerYedMxXXJMl1.r业审业技*eaxa天夭特价SAVE4W1,fU三QMACmazsA11eA*a)1RRiH3ruAAMHAfMM*RttWttGesSKmg细*c户Ie4VAJ及KHYW.-1三三Cv90.1HU宏EJUi嚅tiE-BOOKSTORE“国tu*UiUNgMWGN#fIi悴TKA告什1ttK湾:；efMra:ir;iarr”；“、：后画白ef2oo4UWI5BT；HU)三rX于二tn4z三ttdUtr!D)J”三.UM20l；，思川行冷GtHwt展(SmAjnx(UUxrnJZ.*4.Rlt-1RXN

12、Rn5M】R2W；-&0，M&ACHoe你Y金网“*，6|!母*1.AtWSA11:4n6eQIW.I见力仍X-，三)*iJQ*TftAliyilM.八”I.*Iif11 .站点的规划与建立【9】，12 .在网页编辑软件中制作网页【wa用DrCamWCavCr来完成。13 .测试与发布上传1 .测试网站创建好在上传到网上之前要测试它的兼容性和链接的有效性。插容性可以使用DrCamWeaVCr的“检查浏览港”功能测试，徒接可以使用Dreamweaver的“检衣整个站点的链接”功能进行测试。这种方法我们将在后续项目中学习，在此亦不做赘述。还有一种测试，是把网页上传到Internet服务器上去测试链

13、接的有效性、网页的下教速度等。这种测试，只是你将网页上传到网上申请的个人空间后，以一名普通浏览者浏览的方式去检验即可。2 .上传方法一：使用DreamWeaVer的FTP功能上传。方法二：使用一些FTP工具上传。14.后期更新与雒护网站做好之后必须要有专人维护，网站才具有牛.命力，才会有点击率。对一个网站来说，它的更新与管理是极其重要的.一个再好的网站如果不进行内容更新与管理，都会出现许多这样或那样的问题。例如，网站内容陈I口，超级链接断开等。特色网站的网址：1 2 WWW漫海精是3 7米浅蓝4 htprhichier.con错爱双鱼5 hitpwww.yi2.ncl依儿酷站6 族配呈需螭%鬻教师备保首页第1页课题子项目一第3讲确定网页的布局、色影、站点结构课型实践授课班级授课时数2教学目标1 .分析开发的项目，根据项目的特色确定网站的站点结构2 .根据项目的特色确定网站的色彩定位3 .根据项目的特色确定网站的网页布局教学重点能够财项目进行合理的分析，并根据本小组对项目的理解确定网站的站点结构、色彩定位以及网站的