动态网页制作
- 格式:doc
- 大小:281.50 KB
- 文档页数:14
毕业设计(论文)题目:动态网页设计摘要在Internet飞速发展的今天,互联网已成为人们快速获取、发布和传递信息的重要渠道,正以一种前所未有的冲击力影响着人类的活动。
它在人们政治、经济、生活等各个方面发挥着重要的作用。
因此网站建设在Internet应用上的地位显的格外重要,它已成为政府、企事业单位信息化建设中的重要组成部分。
现今的社会,人们已经离不开了网络,网络已经成为人与人之间交流的一种形式,它能够把事情的复杂化转为简单化,摆脱了时间和空间的限制。
网站为消费者提供了一个网络生活空间,通过其网页展示了企业介绍、企业荣誉、产品介绍、招商信息、加盟程序、留言等一系列内容的介绍。
浏览者不仅可以利用留言板经济而又快捷地与外界进行各种信息的沟通,也可以直接在网上申请加盟。
本论文还介绍了网页的结构分析和具体功能实现,网页的界面和运作方式,尽力模拟近代网页普遍性形式,成为一个完整的动态网站关键字Dreamweaver;Php;PhpMyAdmin;动态网页目录1 引言 (1)2 网页制作概述 (1)2.1 网页的类型 (1)2.1.1 静态页面 (1)2.1.2 动态页面 (2)2.2 网页开发技术 (2)2.3 网页布局 (3)2.3.1 网页布局的基本概念 (3)2.3.2网页布局方法 (5)2.3.2 网页布局技术 (7)2.4网页配色 (8)2.5 网页设计流程 (9)3 动态网页开发环境和技术 (9)3.1 了解Dreamweaver开发工具 (9)3.2 Php语言基础知识 (11)3.3 开发环境介绍 (12)4 设计及具体代码实现 (12)4.1网页结构设计 (12)4.2创建数据库 (13)4.3主要模块的代码实现 (14)4.3.1 注册代码的实现 (14)4.3.2 登陆及退出登录代码的实现 (16)4.3.3留言代码的实现 (18)4.4运行测试 (19)4.4.1 注册 (19)4.4.2 登陆 (21)4.4.3留言 (22)4.5遇到的问题及解决方法 (23)结束语 (24)致谢............................................... - 25 -参考文献............................................ - 26 -1 引言网页是网站信息发布与表现的一种主要形式。
动态网页设计课程设计一、课程目标知识目标:1. 让学生理解动态网页设计的基本概念,掌握网页编程语言(如HTML、CSS、JavaScript)的基础知识。
2. 学会使用至少一种服务器端编程语言(如PHP、Python、Java)进行动态网页开发。
3. 了解数据库的基本操作,能够使用SQL语句进行数据查询和操作。
技能目标:1. 培养学生具备独立设计和开发简单动态网页的能力,能够实现页面布局、样式设计和交互功能。
2. 提高学生的问题解决能力,使其在遇到技术难题时,能够独立查找资料、分析和解决问题。
3. 培养学生的团队协作能力,能够与团队成员有效沟通,共同完成项目任务。
情感态度价值观目标:1. 激发学生对计算机科学的兴趣,培养其主动学习和探究的精神。
2. 培养学生具备良好的编程习惯,注重代码规范和性能优化。
3. 增强学生的创新意识,鼓励他们尝试新方法和技术,提高网页设计的创意性和实用性。
课程性质:本课程为选修课,适合对网页设计感兴趣、有一定编程基础的学生。
学生特点:学生具备一定的计算机操作能力,对网页设计有一定了解,但编程经验有限。
教学要求:结合学生特点和课程性质,注重理论与实践相结合,采用项目驱动、任务驱动的教学方法,培养学生的动手实践能力和创新能力。
在教学过程中,关注学生的个体差异,提供个性化指导,确保课程目标的实现。
通过课程学习,使学生能够掌握动态网页设计的基本知识和技能,为后续深入学习打下坚实基础。
二、教学内容1. 网页编程基础:- HTML:页面结构、标签、属性、表单等。
- CSS:选择器、样式属性、盒模型、布局等。
- JavaScript:基本语法、函数、事件处理、DOM操作等。
2. 服务器端编程:- PHP:变量、数据类型、流程控制、函数、文件操作等。
- Python:基本语法、函数、模块、文件操作等(根据学生背景选择)。
3. 数据库操作:- 数据库基本概念:表、记录、字段、索引等。
- SQL语句:查询、插入、更新、删除等。
如何为网页设计制作动态的GIF图像一、概述和介绍(150字)- GIF(Graphics Interchange Format)是一种常用的图片格式,它支持动画效果,非常适合用于网页设计。
- 制作动态的GIF图像可以为网页增加吸引力和用户体验,提升页面的互动性。
二、准备工作(200字)1. 选择合适的GIF制作工具:市面上有很多GIF制作工具可供选择,如Adobe Photoshop、GIMP、Ezgif等,根据个人需求和操作习惯选择适合自己的工具。
2. 收集合适的素材:根据网页的主题和目标,收集需要在GIF中展示的素材,包括图片、短视频或动画片段等。
三、使用Adobe Photoshop制作GIF(350字)1. 打开Adobe Photoshop软件,选择“新建”创建一个新的文稿。
2. 导入素材:打开素材文件夹,将需要使用的素材拖拽到Photoshop文稿中。
3. 调整素材尺寸:使用“变换工具”或“裁剪工具”对素材进行尺寸调整,使其适应网页设计需要。
4. 配置时间轴:在Photoshop中,选择“窗口”-“时间轴”打开时间轴面板。
在时间轴中,可以添加、删除、调整素材的帧,设置每一帧的时间间隔。
5. 添加过渡效果:为了制作更流畅的GIF效果,可以在相邻帧之间添加过渡效果,如渐变、淡入淡出等。
6. 优化GIF:点击“文件”-“存储为Web用途”将GIF保存为Web格式,选择合适的压缩选项和颜色模式,减小GIF文件大小并保持画质。
四、使用GIMP制作GIF(350字)1. 打开GIMP软件,选择“文件”-“新建”创建一个新的文稿。
2. 导入素材:选择“文件”-“打开作为图层”,将需要使用的素材逐个导入到GIMP文稿中,每个素材对应一个图层。
3. 调整素材尺寸:使用“工具箱”中的工具,如放缩工具、裁剪工具等,对素材进行尺寸调整,使其适应网页设计需要。
4. 配置时间轴:选择“窗口”-“插件”-“动画”,在弹出的动画面板中,可以添加、删除、调整素材的帧,设置每一帧的时间间隔。
动态网页技术动态网页与静态网页相对而言的,所谓“动态”,并不是指在网页中添加一些动感元素(如GIF图片、Flash等)。
动态网页技术具有很好的交互性、自动更新等,无须手动更新网页内容,会根据添加的内容自动生成新的页面。
下面我们来介绍一下,目前经常使用的一些制作动态网页的开发语言。
1 ASP技术ASP(Active Server Page,意“动态服务器页面”)是微软公司开发的代替CGI 脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单、方便的编程工具。
ASP网页文件,以.asp为扩展名,现在常用于各种动态网站中。
从ASP诞生到现在已经15年的历史了,ASP发生了重大的变化,直到现在的。
早期,制作一个简单的动态页面需要编写大量的C语句代码才能完成,这样对于开发的难度比较大。
而ASP诞生之后,通过VBScript简单脚本语言,实现嵌入在HTML网页中的代码,使设计动态网页设计变成一件轻松的事情。
ASP是一种服务器端脚本编写环境,可以用来创建和运行动态网页或Web应用程序。
ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。
利用ASP可以向网页中添加交互式内容。
与HTML相比,ASP网页具有以下特点:●可以实现突破静态网页的一些功能限制,实现动态网页技术;●ASP文件是包含在HTML代码所组成的文件中的,易于修改和测试;●服务器上的ASP解释程序会在服务器端执行ASP程序,并将结果以HTML格式传送到客户端浏览器上;●ASP提供了一些内置对象,使用这些对象可以使服务器端脚本功能更强。
●ASP可以使用服务器端ActiveX组件来执行各种各样的任务,如存取数据库、发送Email或访问文件系统等。
●由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器,很难看到ASP所编写的源代码,可防止ASP程序代码被窃取。
●方便连接ACCESS与SQL数据库。
2 PHP技术PHP(Hypertext Preprocessor,即超级文本预处理语言)是一种HTML内嵌式的语言,与ASP非常相似。
∙动态网页制作∙本文就教科版网络技术应用(选修)第五章动态网页制作展开分析,本章内容课本分了四小节,以“认识动态网页”“理解动态html”“应用html”“asp脚本应用”为主线,这样的布局安排从整体来看似乎是一气呵成,合理到位,真正落实到教学实践中,效果不尽人,每年学业考试时,这块都是学生惧怕的难点之一。
笔者通过几轮教学,不断改进教学策略,基本攻克了这个“堡垒”。
本文从分析教材开始,首先提出几点商榷之处,然后就给出教学策略及教学实录的框架。
一家之言,难免有不当之处还请见谅。
一、几点商榷(一) 动态网页的概念的引入课本中第一节“认识动态网页”是从动态html引入的,编者应当是考虑到与第四章建立主题站点的衔接比较自然。
笔者认为动态网页本质的特点不是由动态html体现的,课本的第一节第二部分“什么是动态网页”中也提到以下观点:“以前的动态主要是强调人机对话,强调动态生成,随着涵盖范围的扩大,动态html才成为动态网页的重要组成部分”。
既然如此,引入部分不妨从动态网页的核心技术入手,一下抓住关键,在学生面前展示一片网页制作的新天地,至于动态html可以放在后面,以一个主题站点或者学生自己在第四章所完成的作品为对象,进行锦上添花式的学习。
(二) 动态网页与数据库的关系的缺失动态网页最精华的部分就是动态生成与人机交互,这些都离不开数据库的支持,如果不提及动态网页与数据库的关系,学生是不能真正理解动态网页的实质的。
对于数据库,学生并不陌生,在必修第七章第三节“利用数据库管理大量信息”中涉及到,该部分在要求学生理解数据库的组成及各部分之间的关系后,还要求学生尝试了直接面对数据库数据的增、修、删等操作,最后指出了直接对数据库操作的缺点,更好的方法是通过数据库应用系统进行操作。
这些为学生理解动态网页与数据库的关系作了很完备的布垫,因此我们不能错过这样一个“跳一跳就能摘大苹果”的机会。
(三) 动态网页与静态网页之间异同提出的时机与方式动态网页与静态网页之间异同的比较是对学生本章学习的检验与总结,是本章教学的重点之一。
课本中在引入部分演示完动态html后,马上在第一节的第二部分就进行动态网页与静态网页的区别与联系总结。
试想按照课本的进程,这个阶段学生动态网页核心还没有涉及,更不用说把握动态网页的核心,这是让他们比较全面地得出动态网页与静态网页的异同是不可能的,最后就演变成了教师的灌输,学生的茫然。
因此,笔者认为这部分内容应当放在asp部分结束或者整章结束,作为检验、总结与回顾,这样,才能起到它应有的作用。
(四) 概念讲解详略不恰当课本第二节“理解动态html”中,在讲解构成html核心技术时除了“客户端脚本语言”,“层叠样式表”外还讲到“文件目标模块”,对于什么是文件目标模块课本中在侧面作了注释。
在教学过程发现,这块根本没有办法讲,学生对于html语言的了解也仅仅限于几个常用的标签,不可能了解到多少等级关系,说少了学生会以为所有的html都与动态的有关,说多了没有必要,教学时间也不允许,而且在后面的章节中根本就没有涉及这块,根据“说了也不会的内容不如不说”这样的实践策略,在教学中这块是基本跳过的;而课本对于什么是脚本、什么是脚本语言却没有做铺垫,一下就到了什么是客户段脚本语言,比较突兀,让学生摸不着头脑。
在教学实践中这块不光要提到什么是脚本、什么是脚本语言,对于客户端与服务器端也要再进行回顾,因为对于信息技术课程,学生课后基本没有时间投入,因此每部分内容必须适时前后呼应,扫清学生学习过程中的一切可能的障碍。
(五) 认识与应用分开对于动态html的学习,主要分成JavaScript与CSS每部分,学生在进行每一部分的学习的过程中,比较好的教学方法就是边体验边了解,边应用边掌握,因此没有必要专门开辟一个“应用html”部分,课本中第三节专门列出了“应用html”的部分,不但给人以画蛇添足之嫌,还对前面的学习造成影响。
正因为后面有专门的一节让学生应有,在前面各部分学习时,只能浅尝辄止,学生调动起来的学习热情,探寻愿望,被人为叫停,很是可惜。
二、分析与策略【学习目标】1.通过观察,了解数据库在动态网站中的作用。
2.通过实践体验,了解asp的工作流程。
3.能对动态网页与静态网页的优缺点进行比较、分析、总结。
4.通过对JavaScript代码的体验,了解JavaScript的概念。
5.掌握JavaScrip代码的两种应用方式。
6.了解服务器端脚本与客户端脚本的异同。
7.了解CSS样式表的类别,以及不同类别的应用方式,有效范围。
8.能根据实际需要简单应用CSS。
【重点、难点】1.asp的工作流程、含义。
2.服务器端脚本与客户端脚本的特点。
3.几种样式表的应用方式、有效范围。
【学生分析】通过必修第六章“信息集成与信息交流”和网络技术应用(选修)第四章“建立主题站点”的学习,学生已经掌握了基本的html语句、体验了静态网站的建立与发布,为本章的学习打下了基础;通过必修第七章“利用数据库管理大量信息”的学习,学生对数据库有了初步理解,为认识动态网站与数据库的关系作了铺垫。
另外,我校的信息课教学是依托网络环境下的教学平台开展的,教学平台中整合了学生博客、论坛、在线考试系统等,学生对教学平台中各系统比较熟悉,在学习过程中,每个学生还创设有自己的博客。
【教学策略】本章所涉及到的知识点有动态网页、静态网页、动态html、客户端与服务器端,脚本、客户端脚本等;需要掌握的操作有Java代码的插入与CSS代码应用。
为了能到达更好的教学效果,在教学中我立足于教材但不拘泥与教材。
我把整章大体分成asp部分的学习、JavaScript部分学习、css部分的学习。
每部分的学习是否吸引学生,好的切入点至关重要。
学生对什么感兴趣?新奇的、身边的、直接关联的。
根据我校学生特点,我选择以博客操作为切入点,以“在线考试系统登陆页面”为研究对象,以“百年恩来”主题站点为素材,在教学中以师生共同发现问题、提出问题、解决问题为学习主线,应用任务教学法与半成品组装法,让学生处在“做中学、学中思、思中做”的状态中,积极主动地完成知识的建构,达成学习目标。
Asp部分的学习,教师演示学生比较熟悉的博客后台发表、修改、删除主题等操作,共同观察博客主页相关主题的变化,让学生之中关联是应用了动态网站技术,在操作博客的同时展示数据库相关记录的变化,让学生理解动态网站一般是基于数据库基础上的。
然后在让学生列举其它常见的动态网页技术的应用。
由于博客系统中相当比较复杂,单个页面分析比较困难,因此在分析asp工作原理时,我选用了“在线考试系统”,与“百年恩来”站点的首页,让学生比较分发到他们页面的服务器的文件代码与他们自己从IE端获取代码,得出静态网页两边的代码相同而asp文件两边代码不同的想象,然后通过排除法得出代码处理动作发生在服务器端,接着让学生自己分析这种处理是做了什么操作,让学生剖析了asp文件代码的同时,对操作中asp代码与数据库的信息交流过程有所了解,最后教师在把asp的工作步骤分解成小步,让学生根据自己的理解去组装,形成完整的asp的运行过程。
最后指出,动态技术的还有同学们常用的搜索引擎,现在把动态html也成为动态网页的重要组成部分。
JavaScript部分的学习,分别展示加了JavaScript效果前后的“百年恩来”网站,成品网站首页加了欢迎来访者的页面效果、状态栏效果,利用js为每个页面加了鼠标特效,这些特效是经过精心选择的,效果比较明晰,代码相对不太复杂。
所有代码的应用方法,在相应的的txt文件中都有提示,因此教师只做简单演示,大部分让学生根据层层深入的任务自己去探索,在学生探索的过程中,教师不失时机地引导学生思考,如JavaScript的特点、它是代码是在哪端运行的,代码是否需要编译等。
CSS部分的学习,演示博客的换肤功能,然后通过修改已经外联了样式表“百年恩来”网站中的CSS文件,来实现瞬间换肤功能,让学生对换肤不再神秘,从而激发了他们的学习热情。
然后任务的引领下,通过自主学习与教师的启发相结合,一步一步完成CSS的学习,最后总结。
【教学环境】网络机房、电子教室、投影仪。
(一) Asp部分的学习【课前准备】准备好演示时使用的博客,准备好“在线考试”系统登陆页面和“百年恩来”网站首页以及做好链接的两个站点的Word一个文件,当学生开机后统一分发的他们电脑桌面以便学生分析比较。
【教学过程】师:在第四章的学习中大家都制作了个人网站,当前还有一种更加快捷的个人网站的创建方式,大家知道是什么?生:个人博客。
师:对,大家都拥有自己的个人博客,我们一起来回顾一下博客中网页的创建、修改等操作。
教师演示博客后台操作,创建主题、修改主题、删除主题,每次操作完总刷新一下首页与相关主题,让学生看到变化所在,同时同步下载博客数据库,让学生观察每步数据库的中记录的变化,下载数据库并且打开,看起来有些浪费时间,但学生直观地看到数据库的变化,体验到数据库对动态网站支持,因此就教学效果来看,是值得的。
师生共同总结:网站的动态生成是基于对数据库的操作。
师:下面以asp站点为例子,来分析asp的工作原理,由于博客系统比较复杂,我们选择大家比较熟悉的“在线考试系统”登陆界面来做分析。
任务一:登陆“在线考试系统”首页,在IE中打开源程序,同时用记事本打开桌面上教师分发的“login.asp”文件,比较代码的异同。
任务二:根据老师给的网址登陆“百年恩来”网站首页,然后比较IE中的源程序与教师分发index.htm文件代码的异同。
师:我们大家知道通过在IE中输入网站,来访问网站,IE端就是客户端,发布网站那端就是服务器端,老师发到大家桌面上的文件,就是服务器上相应的源程序,而大家通过IE菜单打开的代码就是其相应的客户端程序代码,大家通过比较有什么发现?生:“百年恩来”首页的服务器端代码与客户端代码是相同的,而“在线考试系统”首页的服务器端代码与客户端代码是不相同的。
师:说明什么呢?对于静态网页来说,客户端输入网址,服务器端根据网址直接把相应页面代码发到客户端,对于动态网页,是进行了处理了,那这种处理是在服务器端完成还是客户端呢?我们用排除法进行验证。
任务三:右击桌面的login.asp,用IE打开?观察是否正常显示?生:不能正常显示,显示为源代码。
师:说明asp文件代码是在服务器端运行的,也就是处理过程发生在服务器端。
服务器端是做了怎样的处理呢?任务四:再次比较登陆“在线考试系统”首页在IE中源程序和桌面login.asp代码,找出不同在什么地方。
生:html代码没有任何变化,但是%…%号中间的内容有变化。
师:同学的观察很仔细,asp文件代码中包括html代码也包括它自己的语言代码,就是%以及其间的内容,这些内容在处理时联通了数据库,对数据库进行了读写等操作,然后把操作后的结果展示出来。