《网站设计与网页制作》电子教案.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-1RM标
12、题文本型h.框架型布局采用框架布局结构,常见的有左右框架型、上下框架型和综合框架里.由于兼容性和美观等因素,这种布局目前专业设讦人员采用的已不多,不过在些大型论坛上还是比较受音睐的,有些企业网站也有应用。变化型三、形象设计打开个网站,给用户留下第印象的既不是网站丰富的内容,也不是网站合理的版面布局,而是网站的色彩。色彩对人的视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于种平面效果设计,在排除立体图形、动画效果之外,在平面图上,色彩的冲击力是最强的,它很容易给用户留下深刻的印缴。因此,在设计网页时,我们必须要高度重视色彩的搭配。1、色彩的基础
13、知识色彩五颜六色、千变万化,我们平时所看到的白色光,经过分析在色带上可以看到,它事实上包括红、橙、黄、绿、青、蓝、紫等七色,各颜色间自然过渡.其中,红、黄、蓝是:.原色,:.原色通过不同比例的混合可以得到各种颜色。色彩有冷暧色之分,冷色(如蓝色)给人的感觉是安静、冰冷:而暖色(如红色)绐人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。色彩与人的心理感觉和情绪也有一定的关系,利用这一点可以在设计网页时形成自己独特的色彩效果,给浏览者留下深刻的印象.一般情况下,各种色彩给人的感觉是:红色代表热情、活泼、热闹、温暖、幸福、吉祥货色代表光明、华明、兴奋、甜蜜、快乐黄色代表明朗、愉快
14、、将出、希望绿色代表新鲜、平静、和平、柔和、安逸、青春黄色主题绿色主题蚯色主题第I页课题子项目一第4讲承写网站策划书课型实践授课班级授课时数2教学目标1 .了解什么是网站策划、什么是网站策划书网站策划书的重要性,以及其未来的发展。2 .掌握如何撰写网站策划书教学重点了解什么是网站策划、什么是网站策划书、网站策划书的重要性,网站策划书书写的格式、注意点、内容教学难点了解什么是网站策划、什么是网站策划书,网站策划书书写的格式、注意点、内容学情分析教学效果教后记命名文件或文件夹注意点:1 .使用英文或拼音;2 .不能包含空格等非法字符:3 .要有一定规律,以便日后的管理:4 .文件名应该容易理解,看
15、了就知道文件的内容,建议用小写的文件名:5 .合理分配各种类型的文件:6 .合理安排文件的目录,不要将所有文件都存放在根目录卜7 .按栏目(导航)内容建立子目录:8 .在每个一级目录或二级目录下都建立独立的ImagCS目录:9 .目录的层次不要太深,建议不要超过3层,以方便维护管理.:10 .不耍使用中文目录及过长的目录.公共文件夹命名约定如下:/images公共图片/styles样式表/common脚本语言/ftps上传、下载Zdoc网站相关文字资料、文档/media动画、视频多媒体文件/backupM站数据备份Zbbs论坛文件夹 模仿操作模仿给定的素材,完成本地站点的构建及文档素材的整理归
16、档。 归纳总结对于站点的构建,一开始的规划很重要。有了一个清晰的规划,可以为以后的制作做很好的铺垫.站点的命名也是一个重点,切忌不要用中文. 项目完善根据策划书中定好的站点规划进行站点创建和文档素材的整理归档,项目分析,一开始制作网站的时候,可以观察一些网站半成品,删除所有图片,看看它的构成部分是什么?表格是比较流行的网页构造布局的方法,它主要用于排列内容和整体布局,只有熟练掌握了表格的使用方法以后,才能随意构造出各种形状的布局。技能要求;1 .学会表格创建、结构调整与美化方法:2 .学会设置表格与单元格的主要届性;3 .学会使用布局表格及图像跟踪进行网页布局。项目展示用户登录999网上S曾网
17、上汨店E-B(M)KSWKE天天特价SAuU心n3mUnMH-i-,ild加2上.VWI本同VMI3i加严(o/dmaw.Qear、IMmId摩:X三m)iHHlMff*rCMAnUJ操作演示1.准备工作,设计效果图一切图,PS切片一整理图片、文字、多媒编辑一一首选参数一一文件类型/编辑器一一进行相应的设置。图像标记图像,也就是images,在html语法中用im来表示,其基本的语法是:#=图像的IR1.关于Url就是指的是图像在网上的地址。imgalt=纷#=在浏览器尚未在全读入图像时,在图像位四显示的文字:也是图像显示以后,当鼠标放在图片上时所显示的文字。图像在页面中的对齐/布局;语法:C
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站设计与网页制作 网站 设计 网页 制作 电子 教案

链接地址:https://www.desk33.com/p-1499396.html