网页制作与设计(精选8篇)
通过一个月的网页设计学习,设计一个简单的网站来检测自己的学习成果,看看哪些东西还没有掌握,需要进一步的去巩固!网页的设计区别于实体化的一些东西,其多为多媒体的存在,意味着它可以容纳更多的信息以及更多的展示形式,网页设计则要求设计者具备一些特殊技能以营造特定浏览情景。网页设计可以在短时间内增强我们的洞察力以更好察觉使用者的兴趣点,只有这样才能满足他们的需要。
二、设计要求
运用所学的知识设计一个简单的网站,类型不限
三、需求分析
网页设计是将技术性与艺术性融为一体的创造性活动。网页设计是以功能行为第一指导原则,以技术因素为主要考虑对象,以完成或实现必要的功能为目标。近几年随着网络的发展而逐渐受到人们的重视,它本身已网络为载体,把各种信息以快捷、方便的方式传达给受众,在这种标准的要求下,逐步产生了审
美需求和功能需求等。人们对美的追求是不断深入的,网页设计同样如此。如何使受众能更好的和有效率地接受网页上的信息,这就需要从审美方面入手。网页设计的审美需求是对视觉设计美学的一种继承和延伸,两者的表现形式和目的都有一定的相似性。
网页设计的主题为我的篮球网,它是我根据自己的兴趣做出来的网站,内容非常简单,但却富有深意!它融合了当今大多数青少年朋友的兴趣爱好,可以说是一个大众化的网站!
四、制作过程的内容及结果
1、网站目录
打开dreamweaver cs4,建立站点,放到F盘里,在目录下有images(包括图片、flash)、scripts、shipin、web(建立的网站)文件夹。如下图示:
2、我的篮球网(首页)
主要代码:
1 网页设计与制作教学平台的框架
网页设计与制作教学平台通过提供一个真实的网站发布和展示的空间,使得学生能够体会完整的网站发布的过程,从而获得与实际接轨的实践能力。我们使用FileZilla服务器作为学生上传网站作品的FTP服务器。在FileZilla服务器上可以创建用户,并可以给用户分配主目录,设置访问权限。但是FileZilla本身不支持批量用户的创建。我们在FileZilla的基础上,分析了FileZilla的配置文件的格式以及各参数的语义,开发了批量生成FTP用户的扩展程序。它能够依据学生的学号,快速地在FileZilla中创建用户,并为每个用户在服务器上自动生成对应的根目录。我们还开发了自动生成学生网站作品展示界面的前端页面生成器程序,从而使得学生能够完整的体验网站的发布过程。
网页设计与制作教学平台的框架如图1所示。
其中各部分的功能如下:
FileZilla FTP服务器:负责接受用户以FTP方式上传的网站内容。
Apache Web服务器:负责把用户上传的网站内容以WWW的形式向外发布。
存储:负责存储用户上传的网站内容。FTP服务器和Web服务器共享相同的网站内容空间。
FileZilla扩展:负责批量地创建FTP用户
前端页面生成器:负责根据学生信息自动创建学生作品的展示页面。
2 FTP服务器平台的建立
2.1 FileZilla的配置信息
FileZilla服务器使用“FileZilla Server.xml”作为它的配置文件,其中记录了FileZilla的监听端口以及FileZilla的用户信息等内容。一个FileZilla用户的配置信息大致如下:
其中各行配置的含义如下:
1:用户user01的配置信息起始处
2:用户的密码
3:用户所属的组。同一组用户拥有组的相同的配置,从而减少配置的工作量。
4-6:限制来自某些IP地址的用户不能访问服务器。
7:用户的主目录,即用户登录后进入的目录。
8:用户读文件的权限。如果值为1,则拥有读文件的权限。
9:用户写文件的权限。如果值为1,则拥有写文件的权限。
10:用户删除文件的权限。如果值为1,则拥有删除文件的权限。
11:用户追加文件的权限。如果值为1,则拥有追加文件的权限。
12:用户创建文件夹的权限。如果值为1,则拥有创建文件夹的权限。
13:用户删除文件夹的权限。如果值为1,则拥有删除文件夹的权限。
14:用户列出文件夹的权限。如果值为1,则拥有列出文件夹的权限。
16:用户user01的配置信息结束处
通过对FileZilla配置信息的解读,为自动建立配置信息文件奠定了基础。
2.2 FileZilla扩展的开发
我们使用VB.Net开发了FileZilla批量用户生成扩展工具。通过循环读取学生的学号,使用这一信息作为学生FileZilla服务器上的用户名。根据2.1节的配置信息的含义,自动为每个用户生成相应的配置信息。工具的使用界面如图2所示。
当点击“生成配置信息”后,通过如下的代码批量地生成所有用户的配置信息。
2.3 用户主目录的自动创建
根据学生的学号,我们开发了在服务器上自动创建学生在FileZilla服务器上的根目录的功能。
通过循环读取学生的学号,使用“My.Computer.FileSystem”对象在服务器上创建以学生的学号为文件夹名称的学生在FileZilla服务器上的根目录。
2.4 配置信息的生效
关于所有学生的配置信息生成后,通过先把“FileZilla服务”停止,然后把自动生成的配置文件“FileZilla Server.xml”拷贝到FileZilla服务软件所在的文件夹,并重新启动“FileZilla服务”,批量创建的用户即可生效。
3 Web服务器平台的建立
当学生通过FTP客户端使用自己的用户名和密码登录FileZilla服务器并上传网站作品后,需要通过Web服务把各个学生上传的网站作品展示出来。我们把学生的主目录映射到Web服务器Apache的虚拟目录,并开发了自动生成展示界面的前端页面生成器程序。其中,为学生的每次上传的作品生成对应的通过Web服务器发布的链接。
4 结束语
网页设计与制作是一门注重实践的课程。该文借助FTP服务平台和Web服务平台以及相应的辅助扩展程序的开发,建立了面向网页设计与制作的教学平台,弥补了通常教学环境中由于不具备实际的网站环境从而无法为学生提供完整的网站建设过程讲解的缺陷,使得学生能够获得与实际接轨的完整的网页设计制作的经验。
参考文献
[1]Bradley J C,Millspaugh A C.Visual Basic.NET程序设计[M].李旭,译.北京:清华大学出版社,2008.
[2]Randolph N.Visual Studio2010高级编程[M].任鸿,译.北京:清华大学出版社,2012.
[3]Powers L,Snell M.Visual Studio技术大全[M].刘彦博,译.北京:人民邮电出版社,2009.
[4]FileZilla project[EB/OL].http://filezilla-project.org.
[5]Apache HTTP Server project[EB/OL].http://httpd.apache.org.
【关键词】网页制作;教学;设计
早在20世纪初,我国就已经把“网页制作”作为高校基础课程的内容。“网页制作”不仅能提高学生对信息技术的应用能力,还能提升学生的动手能力和设计、规划能力,有利于促进学生的全面发展。在近年来的实践中,“网页制作”课程的开展已在高校取得了较好的效果,在培养学生团队合作、自主创新能力方面都取得了卓越的成效。
1.教学现状
网页制作课程包括设计软件的学习和设计技术的学习两部分。一般高校的计算机技术管理等专业都会设置一定的网页制作课程来提升学生的网络技能。
在课程设置上,一般院校都会在学生进入大二后开设网页设计课程。主要原因是,网页制作包含了较多的网络技术语言,且考查到了学生对信息、设计的知识的综合应用,需要在大一阶段打好理论、技术的基础。
网页制作课程的教学内容主要包括程序设计语言、数据库原理等。其中程序语言包括了C语言,C++语言,Java语言等,数据库原理则分为Access数据库基础,VFP数据库基础等内容。学生可以根据自己的专业情况和学习进度从中做出选择和组合。
2.教学目标
网页制作课程的总体教学目标是,使学生通过对相关网络技术基础内容的学习和实际的上机操作,掌握一定的网络技术应用能力,并在此过程中培养学生的自主创新能力和团队协作精神。其中具体的教学目标有以下几条:
2.1 知识目标
在进行网页制作前首先要掌握一定的网络基础知识和软件操作流程。例如Dreamweaver是网页制作中十分常用的一种软件。在进行网页基础知识的学习时要对软件菜单栏、工具栏等项目的操作方法进行熟练掌握。对于一些基本的编辑、排版技术也要做到有一定的了解。具体应掌握的技术有表格绘制、排版的技术,动画、音频的处理技术,网页编辑、链接的技术,图形绘制晕染的技术等。
2.2 技能目标
技能目标主要指根据现有的网页内容,通过模仿、修改等方式初步完成网页的制作。在网页中应包含一定的解释、说明文字,与文字相对应的图片、符号及一定的动画、切换效果等。在进行网页内容的排版时,可借助一定的表格划分内容结构和层次,还可给网页配上一定的背景图片和音乐以丰富网页内容,增加网页的观赏性和完整度。
2.3 情感目标
情感目标主要包括学生在进行网页制作时培养的团体合作、自主创新及操作动手等能力。与此同时,学生在学习网页制作的过程中也相应地提高了鉴赏能力和学习能力,给未来的职业发展打下了一定的基础。
3.网页制作课程的内容
网页制作课程的教学内容主要包括网站制作基础知识、网页制作、网页特效、网页图像处理和动画制作等四个部分。其中,网站制作部分会涉及到网站和网页概念的区分,网站设计语言等内容;网页制作则会应用到Dream Weaver,FrontPage等网页制作软件;在网页特效部分,会着重介绍JavaScript、Gif图片的制作;在网页图像处理和动画制作上则会应用到Photo Impact和Flash动画制作软件。
4.网页设计课程的设计思路
尽管我国许多高校都开设了网页设计这一课程,但由于课程设计、操作设备等条件因素的限制,其实施效果并不理想,制作出的网页也难以达到实际使用标准。造成这一情况的主要原因有两个。首先是网页色彩的搭配不符合审美的要求,其次是网页内容的安排缺乏一定的合理性和规范性。网页设计课程的作用就是帮助学生在审美、设计等方面获得全面的提高和成长,因此在设计教学内容时,必须综合考虑到各个方面,设计出相对科学、高效的网页设计培训课程。
在教学进度的设置上,可以采用分部教学的方式,将一些具有难度的项目分解为几个部分进行教学。例如几个网页制作软件的应用,对于初学的学生而言具有一定的難度,教师在教学时可以先从基础知识入手,使学生对软件的用途有一个整体的把握。其次,在分部讲解软件中所包含的功能,使学生在实际操作中逐渐掌握软件使用的方法。
课程设计必须充分遵循学生学习、进步的一般规律,切实提高学生网络技能。为达到更好的教学目的,教师在教学时应注重根据学生的学习兴趣进行教学安排,充分激发学生的学习动力,提高学习效率。同时,在教育形式上也可进行一定的创新,充分利用网络资源,为学生提供更多的学科信息。在学习不同内容时,也应采用不同的教学模式。例如在学习网页制作的相关理论知识时,要注重教学语言的简洁、生动,使学生能在短时间内理解网络应用语言和网页图像符号;在网页制作过程中,应着重培养学生的自主创新能力和编排规划能力。在设计网页内容时充分保证学生的自主性,让学生根据自己的审美情趣和专业技巧对网页内容进行安排。教师在这一过程中主要起到引导作用,在学生遇到技术性困难时给予一定的指导和帮助,使学生能在具体的操作过程中,培养起一定的自学能力和创新能力。为提高学生的相互协作能力,教师还可建立合作小组,对一些重点难点的内容进行小组分工。在具体实施工作上,则由小组组员自主安排,在保证了小组合作的同时,也强调了学生学习的自主性。
5.教材分析
我国大部分高校在进行网页制作教学时都采用了《Dreamweaver中文网页制作基础》这一教材。这本教材的最突出优点就是采用了设置任务的模式完成网页制作的教学。在每一章内容的介绍中,教材中都会设置相应的教学任务和实用案例。学生在完成任务的同时,对教材中涉及到的基础知识点和操作技巧都进行了应用,并在不断操作中强化了记忆,相较于传统的教学模式,更有利于学生对知识的掌握和应用。另一方面,这本教材的内容设置充分遵循了学生的学习规律,并把握好了重点。在教材的前半部分是对网页设计基础知识的简介,其中包含了对数据库软件、Office应用软件、Flash软件等软件的操作规范和说明,使学生在进行实际的上机操作前,对这些基础知识点有了较为全面的把握。教材的重点放在了网页的设计过程上。教材对网页设计的步骤进行了详细、具体的说明,并通过文字和图形结合的方式向学生展示了一些具体操作流程,学生能在较短时间内掌握设计方法,完成网页的自主设计。
6.结语
网页制作是一门综合性很强的学科,对学生的理解能力、设计能力、审美情趣及动手操作能力进行了综合的考查。同时,对于教师而言,网页设计课程的开展也考查了教师的授课能力和创新意识。在网络技术日新月异的今天,掌握好网页制作技术有利于开发学生的创新精神和合作精神,提高学生的综合素质。
参考文献
[1]王晓晴.浅谈“网页制作”之网页版面的教学设计[J].计算机光盘软件与应用,2014(2):31-34
[2]薛巧梅.任务驱动教学法在网页制作教学设计中的应用[J].武汉船舶职业技术学院学报,2013(5):69-71
[3]高晶.浅谈任务驱动教学法在网页制作教学设计中的应用[J].中国校外教育(基教版),2012(12):99-102
实训报告
班级:多媒体152
姓名:张莉钧
学号:201501032118
指导老师:薛杨 王淑惠
实训时间:6.20——6.24
一、实训目的:
1、进一步熟悉和掌握网站建设的基本流程和技术规范;
2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识;
3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识;
4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法,能独立设计一个内容完整、图文并茂、技术运用得当的网站;
5、具备独立撰写实训报告基本能力;
6、在网页设计的实践中培养分析问题、解决问题的能力,培养协作、交流的能力,培养创新能力和团队意识;
7、紧紧围绕网页制作的流程:规划、设计、开发、发布、维护来进行网站的开发,制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结,使学生复习、巩固所学过的理论,并予
以适当的深化,进一步训练学生的基本技能(如:搜集资料、整理数据、发现与分析问题、寻求解决问题的方案等),为今后从事网站开 发、维护和管理奠定基础
二、实训项目——特色美食餐厅网站设计
1、网站主题
我的网站的主旨在于从各个方面全面的介绍特色美食餐厅,包括它的菜品、餐厅的环境以及促销活动。另外,网站里还包括餐厅资料和联系方式,网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是橙色和白色搭配,用以展示餐厅特色的效果。其实最重要的是要做出自己的风格,给浏览者好的欣赏感受。
2、网站材料
主要在网站上搜集所要的网页信息,包括图片、文字。同时,查
询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动画和网页特效等,用以得来更加具有说服力的页面。要想做好自己的网站,能够给浏览者好的欣感受,就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。
3、网站规划
我的网站共有7个主页面:首页、美食介绍、优惠活动、商品促销、宴会定制、会员中心和关于我们。每一个页面用统一的模块,以保证网站统一的页面风格。网页布局主要用框架和表格,用框架定位内容的大体结构,再用表格具体定位。位子的设计也是重要的一个部分,根据具体内容决定字体风格,相同的风格多次调用是CSS设计一个样式,以保证随时、准确的调用。
三、网页设计工具使用
1、Dreamweaver——我们使用它做网页的主要布局。
2、Photoshop——我们使用它做网页图片的处理以及logo的制作。
3、Flash——我们使用它制作动画
四、网站设计流程
1、主页设计
2、色彩搭配
五、网站测评
网站建成后为了出现不必要的错误,需对它进行测评,测评的主要内容为
1、链接有效性,静态网页只要保证每一个网页正常浏览保证页面信息不缺失就可以了。
2、网页语言的正确性,检查网页中英文拼写与html语言是否正确,在静态网页中语言都是自动生成的所以语言的正确性一般不会有太大的问题。
3、网站便用性,检查网站的整体结构是否清晰以及网站页面的导航是否清晰。
最终效果图
总结:
通过学习一学期的网页设计,我们收获了不少,我们这次实训虽然只做了一个网站,但这个里面包括的内容很多,主要包括网站主页的布局设计,建立站点,网页与网页之间的连接,以及模板和css样式表的应用。
收获:通过一个星期的网页设计实训,从中学到了不少的网页设计知识,之前都是老师讲得比较多,总以为很难实现,但自己做起来其实也并不是想象中那么苦难。虽然代码看起来复杂,但是慢慢学会分析就会懂。
不足:当然这次实训我也有不足,比如css样式表不能灵活应用,网页布局也不够完美,不过多亏了王老师和薛老师的细心指导,我才能完成这次实训。
Flash实训总结
班级:多媒体152
姓名:张莉钧
学号:201501032118
指导老师:薛杨
实训时间:2.flash培训实训总结提要:
这次实训过后,对flash有了基础的了解,想在这方面学习的话有了初步的基础,主要是学习了flash中各种工具的使用,1、确定动画剧本及分镜头;
2、设计出不同字母间的完美转换。、一、实训目地:让我们更熟练的应用flash制作动图
二、实训项目——不同字母间的形状变换
1、先要确定使用的字母w o r l d
2、再给每个字母使用不同的颜色以及给它们变形
3、最后再给每个字母做不同的变换方式
三、总结 实训收获: 通过这次实训我更加巩固了对flash的应用,虽然这中间有很多失误和很多不必要犯的错误,但更多的是收获,这次实训过后,对flash有了基础的了解,想在这方面学习的话有了初步的基础,主要是学习了flash中各种工具的使用,1、确定动画剧本及分镜头;
2、设计出字母形状;
3、导入到flash进行制作;
4、剪辑配音。在分镜头画面脚本绘制过程中,应养成填表的好习惯,在表格中注明画面的景别,画面景别使用的专业术语有:大特写、特写、近景、中景、全景、远景、全远景、纵深景等。画面镜头号景别秒数内容摘要对白效果音乐。存在的问题及解决思路: 这几个星期我学习的flash大多是比较基础的,Flash中字母刻画不够完善,很多动作,变形都需要有一定的美术功底及Flash基础,对于初学的我很困难,所以在此只做了一些简单的变形。在Flash中的一些脚本语言初学时无从下手,只好从大量的视频、书籍里寻找答案。4.结束语
绪论
摘 要
本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上,着重使用JavaScript作为工具语言进行网页设计与制作的实际操作,分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述,并利用具体的实例进行验证。
本论文主要章节如下,第一章:绪论,本章主要介绍网页设计的相关知识。第二章:网页设计语言概述,本章主要介绍网页设计的语言——HTML,以及用于编辑HTML语言的软件,为后续工作奠定基础。第三章:基于对象的JavaScript语言,本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章:内部对象系统的使用,本章主要介绍使用浏览器的内部对象系统,可实现与HTML文档进行交互。第五章:WEB页面信息的交互——窗体与框架,本章主要介绍实现网页的动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。
关键词: 网页制作;网页设计;HTML;ASP
第一章
绪论
第一章 绪论
随着21世纪的到来,人们更深切地感受到计算机在生活和工作中的作用越来越重要,越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要,更是事业发展的需要。网页设计与制作是计算机能力的具体表现,本章主要介绍网页设计的相关知识。
1.1 网页设计概述
网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为“网络商标”,也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。
1.2 网页设计的要素
网页设计的两大要素是:整体风格和色彩搭配。
一、确定网站的整体风格
在这里,我提供给大家一些参考经验:
1.将你的标志logo,尽可能的放在每个页面上最突出的位置。2.突出你的标准色彩。
3.总结一句能反映贵站精髓的宣传标语!
4.相同类型的图像采用相同效果,比如说标题字都采用阴影效果,那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!
二、网页色彩的搭配
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。
2.用两种色彩。先选定一种色彩,然后选择它的对比色。
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。
1.3 大作业目的和意义
本大作业主要是对网页设计与制作的语言基础上进行探讨,主要内容如下:通过已经做好的网页,分析html网页设计技术、XML技术、Java Applet技术和Javascript技术在网页设计中的应用。
第一章
绪论
1.4 要分析的网页
第一章
绪论
第一章
绪论
第二章
HTML网页设计技术的应用
第二章 HTML网页设计技术的应用
2.1 HTML语言介绍
HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
2.1.1 HTML语言的特点
HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,HTML语言的特点如下:
1、简易性,HTML版本升级采用超集方式,从而更加灵活方便。
2、可扩展性,HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。
3、平台无关性。虽然PC机大行其道,但使用MAC等其他机器的大有人在,HTML可以使用在广泛的平台上,这也是WWW盛行的另一个原因。
2.1.2 HTML语言的编辑软件
HTML的本质是文本,需要浏览器的解释,HTML的编辑器大体可以分为三种:
1、基本编辑软件,使用WINDOWS自带的记事本或写字版都可以编写,当然,如果你用WPS来编写,也可以。不过存盘时请使用.htm或.html作为扩展名,这样浏览器就可以解释执行了。
2、半所见即所得软件,这种软件能大大提高开发效率,它可以使你在很短的时间内做出Homepage,且可以学习HTML,这种类型的软件主要有HOTDOG,还有国产的软件网页作坊。
3、所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,这类软件主要有Frontpage,DREAMWEAVER、Delphi、Eclipse、UltraEdit。
2.1.4 html语言在网页设计中的应用
第二章
HTML网页设计技术的应用
2.2.3JavaScript技术在网页设计中应用
一、JavaScript概述
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点:
1、是一种脚本编写语言
JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。
2、基于对象的语言。
JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
3、简单性
JavaScript的简单性主要体现在:首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。
4、安全性
JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
5、动态性的
JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
6、跨平台性
JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑,软件仅需一个字处理软件及一浏览器,无须WEB服务器通道,通过自己的电脑即可完成所有的事情。
总之,JavaScript 是一种新的描述语言,它可以被箝入到 HTML 的文件之中。JavaScript语言可以做到回应使用者的需求事件(如:form的输入),而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端(server)处理,再传回来的过程,而直接可以被客户端(client)的应用程式所处理。
第二章
HTML网页设计技术的应用
第五章
色彩在网页中的应用
第五章 色彩在网页中的应用
5.1色彩在网页中的应用
色彩是艺术表现的要素之一。在网页设计中,我们的设计师根据和谐、均衡和重点突出的原则,将不同的色彩进行组合.搭配来构成美丽的页面。根据色彩对人们心理的影响,合理地加以运用。
先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。
在网页配色中不要将所有颜色都用到,尽量控制在三至五种色彩以内。背景和前文的对比尽量要大以便突出主要文字内容。
5.2主页色彩的处理
色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是“总体协调,局部对比”,也就是:主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据主页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性,可以使我们的主页具有深刻的艺术内涵,从而提升主页的文化品位。
5.3常用的配色方案
1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使主页呈现温馨、和煦、热情的氛围。
2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使主页呈现宁静、清凉、高雅的氛围。
3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如:红与绿、黄与紫、橙与蓝等。这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。
第五章
色彩在网页中的应用
最后,还要考虑主页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是“高调”和“低调”。底色浅的称为高调;底色深的称为低调。底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。这种深浅的变化在色彩学中称为“明度变化”。当然,色彩的明度也不能变化太大,否则屏幕上的亮度反差太强,同样也会使读者的眼睛受不了。
5.4合理搭配网页色彩
网页的色彩是树立网站形象的关键之一,网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩,会更好的表现主题,吸引用户的注意力。网页色彩涉及到艺术知识,让美术教师参加网页色彩设计,可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前景色对比要大,以突出主要内容
网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩,要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,但应当只是作为点缀和衬托,绝不能喧宾夺主。一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。
第五章
色彩在网页中的应用
第六章 WEB页面信息的交互——窗体与框架
要实现网页的动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。
6.1窗体基础知识
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为。
6.1.1窗体对象
窗体(Form):它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。
在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:
6.1.2 窗体对象的方法窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式:
document.mytest.submit()
第五章
色彩在网页中的应用
6.1.3 窗体对象的属性
窗体对象中的属性主要包括以下:elements name action target encoding method。除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例:
elements[0].Mytable.elements[1] 6.1.4 访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现:(1)通过访问窗体
在窗体对象的属性中首先必须指定其窗体名,而后就可以通过下列标识访问窗体如:document.Mytable()。
(2)通过数组来访问窗体
除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问:
document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗体的先决条件
在JavaScript中要对窗体引用的条件是:必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。
6.2 窗体中的基本元素
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
formName.elements[].methadName(窗体名.元素名或数组.方法)formName.elemaent[].propertyName(窗体名.元素名或数组.属性)下面分别介绍:
(1)Text单行单列输入元素
功能:对Text标识中的元素实施有效的控制。基本属性:
Name:设定提交信息时的信息名称。对应于HTML文档中的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue:包括Text元素的默认值 基本方法:
blur():将当前焦点移到后台。
第五章
色彩在网页中的应用
select():加亮文字。主要事件:
onFocus:当Text获得焦点时,产生该事件。OnBlur:从元素失去焦点时,产生该事件。Onselect:当文字被加亮显示后,产生该文件。onchange:当Text元素值改变时,产生该文件。例:
...(2)textarea多行多列输入元素功能:实施对Textarea中的元素进行控制。基本属性
name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。Default value:元素的默认值。方法:
blur():将输入焦点失去 select():将文字加亮后 事件:
onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件(3)Select选择元素
功能:实施对滚动选择元素的控制。属性:
name:设定提交信息时的信息名称,对应文档select中的name。Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性: Text:选项对应的文字
selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected:默认选项 事件:
第五章
色彩在网页中的应用
OnBlur:当select选项失去焦点时,产生该文件。onFocas:当select获得焦点时,产生该文件。Onchange:选项状态改变后,产生该事件。(4)Button按钮
功能:实施对Button按钮的控制。属性:
Name:设定提交信息时的信息名称,对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法:
click()该方法类似于一个按下的按钮。事件:
onclick当单击button按钮时,产生该事件。例 :
........(5)checkbox检查框功能:实施对一个具有复选框中元素的控制。属性:
name:设定提交信息时的信息名称。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecked:默认状态 方法:
click()该方法使得框的某一个项被选中。事件:
Onclick:当框的选被选中时,产生该事件。(6)radio无线按钮
功能:实施对一个具单选功能的无线按钮控制。属性:
Name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同 Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。defalechecked:默认按钮。
checked:指明选中还是没有选中。
第五章
色彩在网页中的应用
index:选中的按钮的位置。方法:
chick():选定一个按钮。事件:
onclick:单击按钮时,产生该事件。(7)hidden:隐藏
功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。属性:
name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。
defaleitvalue:默认值(8)Password口令
功能:实施对具有口令输入的元素的控制。属性:
Name:设定提交信息时的信息名称,对应HTML文档中password中的name。Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。
defaultvalu:默认值 方法:
select():加亮输入口令域。
blur():使这丢失passward输入焦点。focus():获得password输入焦点。(9)submit提交元素
功能:实施对一个具有提交功能按钮的控制。属性:
name:设定提交信息时的信息名称,对应HTML文档中submit。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。
方法
click()相当于按下submit按钮。事件:
onclick()当按下该按钮时,产生该事件。
6.3窗体对象实例
下面我们演示通过点击一个按钮(red)来改变窗口颜色,点击“调用动态按钮文档”调用一个动态按钮文档。
test8_1.htm
调用动态按钮文档