第一篇:大学论文网站的设计与应用
网站的设计与应用
摘要
学校网站是实现教育资源分配的桥梁,它有巨大的教育资源库并且可以集全社会的力量,使教育资源无限增长。在我制作学校网站时我所使用的软件是dreamweaver,该软件相对于其他相关软件具有不生成冗余代码、方便的代码编辑、强大的动态页面支持、优秀的网站管理功能、便于拓展、操作简便等优势。在网页的制作与链接中,我学到了很多,然后补充一些比较热门的技巧。网站具有快键、无距离更新的特征,同时提供进入日常活动处理平台的“入口”,具有较强的实用价值,这个网站能被广大教师,学生群体所普遍使用,随着网络的普及和高效性的不断提高,它的实用性已经使它的应用地位越来越高,越来越广。本文对网站设计作了介绍,进行了需求分析,模块划分、框架、dreamweaver和ccs的介绍。
关键词:dreamweaver、超链接、性能、ccs、实用价值
目录
第一章 前言 1.1课题来源
1.2网页开发项目需求分析 1.3学校网站网页的设计 1.4制作软件dreamweaver的简介 1.5软件运营环境 第二章 网页的制作 2.1做网页的步骤 2.2做网页的要素 2.3系统各模块功能实现 第三章 学校网站的建立步骤 3.1确立学校网站主题 3.2给学校网站选一个好域名 3.3 确定一个美观的学校网站界面 3.3.1栏目与板块的编排
3.3.2学校网站的目录结构与链接结构 3.3.3对学校网站进行形象设计 3.4突出学校网站的风格 3.5学校网站的部分代码实现 3.6推广学校网站 第四章 学校网站的测试
4.1 测试内容 4.2测试过程 4.2.1功能测试 4.2.2可用性测试 4.2.3兼容性测试 4.3效率分析 4.3.1优点及不足
4.3.2软件测试的意义 结束语 参考文献
第一章 前言 1.1课题来源
随着社会的进步,我们对中小学的教育也越来越重视。但现在在一些相对不太发达的城镇,学生的教育资源受到一些条件的限制,而且不能够给大部分学生提供个性化的学习的平台。所以我认为给一些中小学创建自己的学校网站是非常有必要的。首先,学校网站是学校的“商标”,每一所学校都有自己的特色,每一所学校都有自己的个性。在这个高度信息化的社会里,建立自己学校网站是最直接的宣传手段。其次,学校网站能提供教学互动的全新方式学校网站使得教师与
教师、教师与学生、学生与学生之间的交流有了全新的方式,它不再受到传统课堂的制约,而且,校网站能够提供个性化学习的平台,不同的学生理解世界的方式各不相同,认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式,各取所需,使学生能够自主选择自己要学习的内容。互联网的出现为实施有“针对性”的个性化教学提供了强有力的技术支持,网络教学可以充分发挥计算机超强“记忆”的优势,全程“记忆”跟踪学生的学习过程,教师可依据电脑的“记忆库”全面了解学生的学习情况,为学生提供“个性化”的教学服务,教育网站“个性化”教学服务有别于家教、教育软件等教学模式,在挖掘人才潜力与培养人才方面的优势是传统教学方式所无法比拟的。只有将这一优势体现出来,确实去满足学生和家长在教育方面的深层次的需求,网络教育的概念才能够被广大用户接受,教育网站才能够获得蓬勃发展。1.2网站开发项目需求分析
对于中小学的教育来说,建立网站是十分必要。学校网站建设是学校教育信息化建设的重要方面,是全面提高学校信息化水平的标志性工程。学校网站是学校对外宣传的窗口,是提高学校教学、科研、管理效率的重要工具,也是全校师生展示才能、互相学习、共同发展的阵地。更是培养信息化人才,建设高素质教师队伍的重要突破口。建立网站是学校发展的必然,既然如此,不如从现在开始,近早参与,更快的积累更多的建设和管理经验,让我们的学校在未来教育中立于不败之地。
现在无论是小学生,还是中学生,上网已经很普及,通过上网,让他们交际越来越广泛,而且他们毕业后将走向全国东西南北,所以学校网站,会对学校起到相当大的宣传作用。比如说在学校建站初期搞一次全校学生参与的校园网络文学赛,要求学生作品直接在网站指定页面发表,学校从中评出优秀作品并通过网站进行奖励,当然最好把其中一些学生的作品投递给国内的一些学生刊物选登,这对学生和网站建设都是一种很好的支持;另外,学校网站还开设学校的学习论坛,邀请学生做适合自己兴趣爱好栏目的版主;不定期举办比赛通过这一系列的活动可以让更多的学生了解学校网站并参与其中,达到不错的教育作用。
在学校网站建设过程中,校园快讯以及校园风采图库的建设非常的重要,它们在一定程度上可以反映学校的办学思想、教学观念以及师生在校园的学习生活情况,经常查看这些栏目的除了在校师生外我想主要还有以下一些群体:一是已经毕业校友,他们关心学校的发展,所以会经常“回来”看看,试想,如果一位已经工作几十年的老校友再“回到”母校能看到自己当初的照片依然还放在学校网站上,那种心情是何等的激动,毕竟母校还没有忘记他们;二是,各级教育部门和学生家长,他们需要及时了解一些学校的教育教学工作情况,并及时的向学校有关部门反馈他们的意见或建议。现在学校各类活动,都可以分类的把它们放在网站的校园风采图库内,以记录着学校的历史!
每个不同的网站将满足网络用户的不同需求.学校网站所面
对的对象是广大教师和学生,所以,教师和学生和一些渴望了解学校基本情况的人群的需求,就成了学校网站设计要满足的对象。1.3学校网站网页的设计
根据前面的设计思想进行分析,按照系统开发的基本观点对网站进行分解,从内容上可对网站作如下划分:
l 学校风采 通过学校概括、教师风采、校园之星及部分图片等内容来展现。
l 优点特色 通过新闻、生动活泼的教育教学栏目来展现。
l 信息发布 通过公告栏、信息查询等栏目来实现,内容有招生政策、活动安排等。
l 部分校务 根据校务的公开程度与参与人数的多少,特选择图书管 理、评优、考试查分、家校联系四大校务在网上实现。主页设计
网站主页采用静、动相结合的方式,即静态的主画面和动态的图片相结合,体现学校的勃勃生气,静态主页方式介绍学校风采、优点特色、信息发布,对于四大校务,就得利用ASP与数据库结合的技术建立数据库查询管理系统,采用交互式的动态的web画面来实现。主页结构图
1.4制作软件dreamweaver的简介
dreamwraver软件由美国著名的网站应用开发工具生产厂商Adobe Macromedia于2005年6月推出并正式投入市场以来,已经发展得相当成熟。关于dreamwraver的技术介绍的相关书籍与网络信息相当丰富。通过大学中软件开发环境课程的学习,对dreamwraver有了比较深刻的认识,并比较轻松的掌握了dreamwraver的操作。因此,软件
技术可以完成任务的要求。
1.5软件运营环境
Dreamweaver是一款简体中文软件,可以在Win2003/WinXP中安全运行。
第二章 网页的制作 2.1做网页的步骤
想要制作网页首先我们了解一点简单的网页制作工具。例如:Dreamweaver,专门制作网页的工具,可以自动将网页生成代码,其界面简单、功能强大是初学网页制作者的第一选择。想要做一个网叶,我们基本上要分八个步骤:
1、确定网站主题 :网站主题就是要建立的网站所要包含的主要内容,一个网站必须要有一个鲜明的主题。在你的主题范围内内容要做到大而全、精而深。
2、搜集材料 :我们如果想让我们的网站有真材实料,能够吸引更多的用户,我们就得尽可能多的收集材料,材料收集的越多、越全,我们以后制作网站就越容易。我们手机材料不及可能从互联网上收集,还可以在报纸、书籍、多媒体上得到。然后我们把收集到的信息进行整理,留下有用的部分,作为制作网页的素材。
3、规划网站 :一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页
才能有个性、有特色,具有吸引力。
4、选择合适的制作工具 :尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。
5、制作网页 :材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。
6、上传测试:当我们把网页制作完成后,发到WBS上,使大家都能看见我们的网页,在上传完成后我们要自己在浏览器中打开我们自己的网站,逐个链接进行测试,发现问题,修改问题,然后再上传测试。
7、推广宣传:网页做好之后,我们要对其进行宣传,只有这样才能提高网页的访问量和知名度。推广宣传的方法有很多,我们只需要选择简单方便、经济适用的一些方法即可。2.2做网页的要素
1、网页的整体布局设计
网页设计作为一种视觉语言,要讲究编排和布局,虽然主页的设计不等同于平面设计,但它们有许多相近之处,应充分加以利用和借鉴。版式设计通过文字图形的空间组合,表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处,才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映
出来,特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时,更要注意为了达到最佳的视觉表现效果,而讲究整体布局的合理性,比如一家生产型的企业,它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验,从而方便他对产品的了解,促成最后的购买。
2、网页设计中色彩的运用
色彩是艺术表现的要素之一,在网页设计中,根据和谐、均衡和重点突出的原则,将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响,合理地加以运用,按照色彩的记忆性原则,一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质,如红色象征血、太阳;蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时,应使用淡雅而沉静的颜色,使人心理上感觉凉爽一些,增强人们的购买心理,使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制,但不能毫无节制地运用多种颜色,一般情况下,先根据总体风格的要求定出一至二种主色调,在已经有了完备的CIS(企业形象识别系统)的企业进行网页设计时,更应该按照其中的VI进行色彩运用。在色彩的运用过程中,还应注意的一个问题是:由于国家和种族、宗教和信仰的不同,以及生活的地理位置、文化修养的差异等,不同的人群对色彩的喜恶程度有着很大的差异。如:儿童喜欢对比强烈、个性鲜明的纯颜色;生活在草原上的人喜欢红色;生活在闹市中的人喜欢淡雅的颜色;生活在“沙漠”中的人喜欢绿色。在设计中要考虑众多因素。
3、网页形式与内容相统一
要将丰富的意义和多样的形式组织成统一的页面结构,形式语言必须符合页面的内容,体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段,通过空间、文字、图形之间的相互关系建立整体的均衡状态,产生和谐的美感。如对称原则在页面设计中,它的均衡有时会使页面显得呆板,但如果加入一些富有动感的文字、图案,或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素,要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的,很多时候都需要将它们结合起来,表达完美的设计意境
2.3系
统
各
模
块
功
能
实
现http:// 1.图片模块
1)该功能模块可以介绍学校各个有关方面内容,使学生更清晰的去寻找自己所用的。
2.学生注册模块
1)该功能模块主要是让学生可以通过学籍号来注册会员 2)该功能可以通过学生的注册,通过学生自己填写,来完善学
生的在校基本信息。
3.账号登陆及管理模块
1)该功能模块主要提供学生的登陆和对账号密码进行修改功能。4.在线留言模块
1)该功能模块是学生可以通过注册后登陆,进行在线留言,或者发表看法。
第三章 学校网站的建立步骤 3.1确定学校网站的主题
该学校网站主要是面向在校大学生,向在校大学生展示学校的美好生活、精彩瞬间。作品的主要技术指标包括:制作出一个静态和动态的“学校网站”,在制作过程中,加强和深化以前所学的关于网页设计的方法,为了使得学生能在该网站了解学校的全面情况,该网站必须能够及时更新并且尽快的提供给学生新的信息。
确定学校网站的基本概念是对以前所学知识的概括整理,这部分内容偏重于实际需求;需求分析与选题强调实践与应用。为了能够吸引更多学生的眼球我设计了一套方案:
1.首先根据页面要展示内容的多少,在photoshop中新建一个适合的网页宽度和长度的文件。
2.在画布上按自己的想法结合实际内容,用各图形工具在画布上画上整个网页基本的布局。
3.基本布局的设计定下之后再对各部分进行具体设计,细化每个部分,特别是静态的部分。
4.在Photoshop里完成整个页面的设计后,进行切片,将要动态显示的地方切出来,还有就是大的图片要切一下,能提高网页读取速度。按Shift+Ctrl+Alt+S存储为.html格式后,用Dreamweaver编辑将需要作为背景的单元格中的图片设为该单元格的背景,另存为index.asp。
5.将所有页面,拷到所属文件夹,然后与后台数据库连接起来,即可通过对后台数据库内容的添加、删除、修改来对网页的相关内容进行操作,例如在数据库注册登录表中删除一个用户信息,那么这个用户再次用原先的登录信息登录时就无法登录成功了。
6.在Dreamweaver中网页的左侧类似“书卷”的区域插入一张表格,并在代码相应位置插入滚动文字特效的代码,实现文字至下而上滚动,鼠标移过文字时滚动停留的功能。
7.在Dreamweaver8.0里打开主页面,在页面中相对应除插入图片切换的代码,实现学校网站的部分内容自动切换的效果。
8.在Dreamweaver8.0里打开主页面,切换到设计视图,将雪花鼠标特效代码复制在
第二篇:动态网站设计的色彩应用论文
摘要:由于多数网站设计师一般是工科背景,缺乏对艺术和色彩的研究,导致设计出来的网站仅能满足客户功能方面的需求,在版面和网页整体视觉效果方面无法满足客户日益增长的需求,本案例从色彩学方面分析色彩及搭配特点,结合儿童摄影网站的浏览人群对色彩的喜爱,提出解决色彩搭配和主页版面设计的方案,为工科背景设计师在设计网页界面的时候解决版面色彩搭配提供启发和借鉴。
关键词:色彩;色彩搭配;儿童摄影网站
0引言
动态网站设计课程是计算机大专业的教学体系中的一门重要课程。计算机专业的授课老师通常出自工科而非艺术类专业,程序和技术是他们的强项,着重代码或界面在DREWEAVER中技术部分的实现,也是教学中的重点。计算机专业的学生一般也是非艺术类考生,对美术和色彩的知识了解相对较少,这导致其设计出的界面不美观,网页中图片素材的选择、色彩的整体把握和搭配比较欠缺。然而从网站使用者的角度来讲,打开网站首先是视觉上的感知,对于功能部分感受没那么直接,漂亮精美的界面可以让人耳目一新,视觉上的强烈印象可以激发浏览者更多的好奇心,从而增加浏览者停留在本网站的时间。网站的设计和推广的目的是获得浏览者的关注量,所以一个好的动态网站不仅功能代码要设计完善,界面美工方面也需要精心设计,而设计精美的界面则需要整体图片与色彩的搭配。
1色彩与网页设计
1.1网页界面布局
在动态网站设计课程的教学实际中,网页布局是授课重点,常见的布局技术手段是采用DIV+CSS。其技术核心是:DIV实现网页用层进行区域划分,在区域与区域的位置调整和细节效果的处理方面利用CSS盒子模型原理来实现,盒子模型如图一所示。利用DIV+CSS技术来布局网页界面使得网页整体效果看起来更为精美,但学生仅仅只掌握DIV+CSS技术还不能做出耳目一新的网页效果,DIV+CSS只是网页界面设计的一个工具,熟练掌握和运用工具还不能达到境界高的网页制作,想要随心所欲的根据不同浏览人群特点设计出相应的美工效果的界面则需要掌握和运用色彩学。
1.2色彩构成与搭配和网页界面设计的关系
1.2.1色彩
色彩是光经过物体散射到达人眼睛中的颜色,由明度、纯度、色相三要素组成,分为无彩色系和有彩色系,国际上普及的色彩分类是孟氏色立体,色彩实际运用和搭配中通常参考它。不同的要素组合出不同的颜色效果。色彩的构成是将两个或两个以上的色彩,根据不同的目的,按照一定的原则,重新组合、搭配、构成新的、美的色彩关系,在网页设计中要运用这个原理来进行素材搭配。色彩是客观存在的,但人对色彩的反应却是随着很多因素的变化而变化的,也就是说色彩具有生理特性。视觉的适应是由于外界变化引起视觉的改变过程,当人们看物体时,常常伴随着心里的调节。现实生活中,人们看到的颜色大部分是多种色彩的混合。即用两种或多种颜色互相混合而产生新色彩的方法,分为加色混合、减色混合和中性混合三种。网页界面设计中,整体色彩搭配选择图片组合的时候要重点考虑,可运用色彩混合来控制网页整体效果,从而达到设计效果耳目一新,具有强烈的色彩视觉冲击感,给网页浏览者留下深刻的印象。
1.2.2色彩与网页设计
一般来讲,网站美工设计要完成如下任务:表达一定的界面艺术效果、使页面结构清晰可读性强、实现不同的功能、丰富网页的内容。其中界面艺术效果设计主要包括色彩运用。在网页制作中,用户视觉上看到的往往是图片、线条、文字、动画等,这些元素在色彩方面都有色彩的构成要素。把诸多的网页要素放在同一个页面上,需要考虑网页元素之间的色彩搭配以及整体色彩的构成。根据不同的设计应用需求,选择性地把网页元素整合放在一起才能获得色彩美观的网页效果。
2儿童摄影动态网站美工设计中的色彩学应用
2.1案例概述
主题为儿童摄影的动态网站,一个优秀的网站通常比较注重主页的设计,本案例重点工作为区域划分和运用色彩学对整体效果的控制,根据主页要达到的整体效果准备网页图片等素材。网站主页界面区域布局为:公司店面和拍摄场地的展示区域、展示最新儿童摄影作品区域、页脚区域.2.2儿童摄影网站中的色彩设计
2.2.1色彩与审美需求
配色实践证实,凡是能与接受者产生共鸣的色彩搭配,接受者才认为是美的,是调和的,因此色彩调和就有一个与接受者审美需求的统一问题。色彩设计能够获得成功,使接受者与之产生共鸣,设计就必须有针对性。儿童摄影作品的对象主要是儿童,儿童摄影中使用的工具是色彩对比强烈、个性鲜明的服装、玩具、道具及场景。儿童摄影网站浏览的对象主要以年轻妈妈居多,所以本案例的主页整体色彩要符合多数女性对色彩的接受和喜好需求。多数年轻女性一般喜欢粉、红色、白色以及其他偏清新亮丽的色系。
2.2.2色彩与营销
研究和了解消费者心理,给商品恰当定位,然后给商品、包装等恰当的色彩,将商品的理念传达给消费者,使营销实现高效化,取得最佳效果,可以说,色彩是一把打开消费者心灵的无形钥匙。
2.2.3儿童摄影主页的色彩设计
本案例中,主页整体风格为色彩清新亮丽的颜色。因为儿童摄影被拍摄者是小朋友,网站的浏览者以女性为主,所以网站色调以粉色系、白色系为主色调。色彩需要对比,色调需要过度,这样搭配出来的颜色更能使得多数人接受。本案例中,采用的网页整体背景以非常淡的粉色加少许白色为背景颜色。这个背景色将充满整个网页的边角和非主体区域。色彩的明度、纯度需要一个对比和过渡,所以在选择图片素材上,本案例中的照片素材部分选择纯度和明度比背景略高的粉色、红色。本案例采用大面积的暖色调粉色为主色调,冷暖色调搭配是工业设计应用中较为经典和谐的色彩搭配,所以笔者在大面积为暖色调的主页版面上加入蓝色、绿色等冷色调的小面积色区。这是因为在色彩视觉方面,当呈现在眼前的大面积是一种色调,容易引起视觉上的疲劳感,所以笔者在设计主页过程中加入了小部分蓝色的线条、小图片的冷色调色区,从而达到冷暖色调对比和谐的色彩呈现。由于黑色、白色和灰色这三种颜色一般可以与任何颜色相搭而不失协调,所以主页版面笔者加入了局部的黑、白、灰小色区的素材。这样儿童摄影主页的色彩构成为:淡粉色为主色调,图片区域既考虑了和粉色一个色系的暖色调,又加入了小面积的冷色调做点缀,同时破除掉色彩上的视觉疲劳问题,最后主页呈现出来的是色彩结构清新亮丽又不觉眼花缭乱和疲劳的效果。
3结束语
本案例从色彩学的原理及特性分析,以儿童摄影主页的美工设计为案例,解决了网站整体效果控制方面的色彩搭配问题,为工科背景的网站程设计人员在网页界面美工设计方面提供重要参考。
参考文献
[1]黑马程序员.网页设计与制作项目教程[M].北京:人民邮电出版社出版社,2017.[2]赵国志.色彩设计基础[M].北京:高等教育出版社,2007.[3]周至禹.艺术的色彩[M].重庆:重庆大学出版社,2013.[4]张帆.网站美工高级培训教程[M].北京:清华大学出版社,2002.
第三篇:色彩搭配在网站设计的应用论文
摘要:随着网络技术的不断发展,人们的衣、食、住、行均与网络产生密切联系,网站设计蓬勃发展起来。影响人们视觉效果的因素较多,网站色彩是一个重要的因素,从某种程度上来讲,色彩搭配的好坏直接影响网站设计的成功与否。从色彩搭配在网站设计中的应用角度出发,先分析其具体原则,然后探讨具体的策略,旨在为网站设计的色彩搭配提供一定的参考。
关键词:网站设计;色彩搭配;应用
作者简介:赵敏(1979-),女,汉族,湖北鄂州,高校讲师,主要研究网站,动漫设计,鄂州职业大学
色彩的魅力是无限的,即使是平淡无奇的东西,恰当运用色彩搭配后,同样可以变得漂亮起来。在当前的网站设计中,人们不再是单纯采用文字、图片等,而是要求更加美观、舒适,进而给网站的访问者留下深刻的印象[1]。鉴于此,在网站设计中,需要充分应用并发挥色彩搭配的作用。下文主要分析色彩搭配在网站设计的应用。
1色彩搭配在网站设计中的应用原则
在网站设计中应用色彩搭配时,需遵循以下四个原则,进而提高网站设计的效果,让访问者产生舒适、美观的感觉。
1.1突出主题
不管是什么网站,它都有自己的主题,且设计操作均要服务网站主题。因此,在网站设计中应用色彩搭配时,需要了解网站的主题,以突出主题为目的,选择合适的色彩,形成自身独特的风格。比如对于从事金融经济的公司来讲,其色彩以蓝色、灰色为主,既可以体现公司文化,同时还能让访问者感到专业、沉稳[2]。
1.2色彩搭配合理
网站属于一个开放式的平台,在网站设计的过程中,不仅要结合主题内容,而且还要确保色彩搭配合理,不能一味盲目求新。比如在女性购物网站中,如果选用灰色、蓝色等冷色系,则会给人一种沉闷的感觉,但如果以粉色为主色调,再合理搭配其他暖色系,则会让网站访问者感到温馨、柔和,愿意去浏览网站内的产品,产生购物的欲望。
1.3具备艺术性
无论是色彩搭配,还是网站设计,其中都包含着艺术性[3]。因此,将色彩搭配用于网站设计的过程中,需要遵循艺术的规律,凸显网站主题时,需要满足人们的审美要求,使其具备良好的艺术性,进而可以具有艺术特色的网站。
2网站设计中应用色彩搭配的具体方法
2.1做好色彩的调和
所谓色彩调和,指的是≥2种的色彩搭配,进而形成统一、协调的效果[4]。在色彩调和中,需结合实际情况,采取不同的方法,让网站的页面生辉,激起访问者的浏览欲望。第一,同种色彩调和。在色彩搭配中,对于同一种色相,在调和的过程中,可以充分利用不同的明度和纯度,有效弥补相同色相的单一感。比如在同一种色相中,利用明度的黑白灰,可以进行有效区别,并且产生一种微妙的韵律感。第二,类似色的调和。在色环中,如果色相之间比较靠近,那么在调和的过程中,其难度会比较低。因此,在网站设计中,当采用类似的颜色时,可以让网站页面更加和谐。此外,在类似色的应用中,其搭配度更大。第三,对比色的调和。所谓对比色,就是在色环里处于相对位置的颜色。在调和对比色时,需确保其具有强烈的对比,避免让网站页面显得太过突兀。第四,渐变色的调和。所谓渐变色,指的是颜色层次渐变的色彩。简单来讲,在两种颜色之间的混色,其实就是一种渐变色彩。在调和的过程中,需根据网站的需要,适当调和渐变色。通常情况下,黑暗和明亮的色彩会产生立体感和距离感,一方面,可以柔化视觉感,另一方面,还能增强空间感,让网站更具韵律和节奏。
2.2注重色彩的对比
在色彩搭配的应用中,对于不同的颜色而言,其对比度不同,产生的效果也存在差异,并且还会让人在心理、生理上产生不同的感觉。第一,色相对比。在网站设计中应用色彩搭配时,需做好色相的对比。在确定主色相后,还要综合考虑其他颜色与主色相之间的搭配,凸显网站主题。通常来讲,两种色相越接近,就越能体现出柔和的对比。第二,明度对比。在明度对比度中,包括彩色差与非彩色差。在不同的色彩中,其明度差也会存在差异,它主要是不同色彩明暗间的差别。在人们的视觉中,主要是通过色彩的层次、空间等,造成明度对比,比如柠檬黄明度高,蓝紫色的明度低。因此,在色彩搭配的过程中,需注重色彩的明度对比,使其更加符合网站设计的要求。第三,纯度对比。所谓纯度对比,指的是在不同的色彩间,其纯度差别形成的对比。通常情况下,纯度对比可分为三种,即高、中、低。利用好纯度对比,可以更加明确色彩效果。第四,面积对比。在色彩搭配中,对于同种色彩来讲,其面积范围比较大时,纯度、明度就比较强;当面积范围较小时,则相反,人们将其称为色彩的面积效果。因此,在网站设计中应用色彩搭配时,需要结合不同色彩占据的面积大小,合理应用面积对比。
2.3色彩搭配的相关注意事项
在网站设计的过程中,不仅要注重色彩的调和色彩的对比,同时还要注意以下几点:第一,注重网页颜色的设计。网页设计是网站设计的一个重要组成部分,若设计不当,比如色彩搭配混乱,则会造成网页缺乏协调感,让人觉得眼花缭乱,缺乏内在美。因此,在网页的色彩搭配中,并非是颜色越多越好,而是要尽量控制在3-4种颜色,并且以某一种颜色为主色调,然后利用其他2-3种颜色,让网页显得和谐、统一。第二,合理选择图案。在网站设计的过程中,要想让网站更加吸引眼球,在选择背景色时,应选择比较简单的图片,同时搭配一下可以产生对比的色彩,以此来提高网站的可视效果。
3结束语
综上所述,在信息化背景下,网站设计行业日渐繁荣。在网站设计中,色彩不仅可以体现网站的外表,而且还能体现出网站所要传达的公司文化等。因此,在应用色彩搭配时,需要符合其应用原则,即突出主题、色彩搭配合理、具备艺术性。具体来讲,设计者需要做好色彩的调和,注重色彩的对比,同时注意网页颜色的设计、合理选择图案,提高网站设计效果,吸引访问者的眼球,并产生深刻的印象。
参考文献
[1]班祥东.论网站设计中色彩搭配之应用[J].电脑知识与技术,2010(23):6596-6598,6605.[2]杨征,徐晓婧.色彩在网站设计中的应用[J].国土资源信息化,2011(3):25-29.[3]张爽.网站设计中的色彩搭配技巧探讨[J].吉林广播电视大学学报,2013(4):93-94.[4]蔡劲.网站设计中的网页色彩搭配技巧[J].青春岁月,2010(7):12,11.
第四篇:交互动画式网站设计应用论文
摘要:基于信息化时代背景下,网络的普及性应用以及多媒体技术的不断发展促使交互动画逐渐成为了网络传播的一大主流形式。通过对图像、声音以及视频等的整合处理,能够以多样化的表现形式来实现产品信息的个性化且高效化传递,并强化感官上的刺激以吸引消费者的注意力,强化产品营销的效果。本文首先阐述了交互动画网站的具体设计,其次针对交互动画网站设计的具体应用进行分析,以供参考。
关键词:交互动画;网站设计;应用探讨
计算机动画作为一种全新的交互动画形式,随着互联网应用技术的不断发展而逐渐成为了一种全新的网络信息传播方式,交互动画利用多媒体技术的下的Java等技术手段,通过对声音以及视频图片的整合来实现人与动画间的交互性[1]。
1基于交互动画的网站设计
1.1设计的原则
第一,信息的准确传达性。第二,人性化。第三,适合传播的途径。第四,将艺术性融入到设计的目的性中[2]。
1.2设计的思路
本交互动画设计以服装主题网站为例,在实际设计的过程中,基于这一类型的网站所涉及到的产品类型较多,通过需要明确主次,定位主打服装以强化宣传效果,以设计内容为出发点,需要明确如下三个部分的设计:第一,要从整体出发,实现网站页面的规划设计。需要针对店铺的基本信息、产品的类型、服饰的分类以及搭配等进行页面构架,明确网站页面的特色,凸显出自身的风格特色。第二,单个物品的展示设计。以交互动画形式来展现单个物品,通过真实互动来确保浏览者真实且全面的了解产品。第三,实现页面交互动画设计,包括首页与各级页面。
1.3设计的实现
第一,整体规划设计的实现。指的是实现网站的页面构架的规划,具体落实的过程中,需要实现风格的设计以及具体背景颜色等的填充,进而实现网站页面的个性化设计。在实际设计的过程中采用CorelDraw/Photoshop等软件来进行设计,在定位交互设计平台的基础上,需要首先页面的元素的手绘设计,以此为参照通过相应设计元件来实现效果的设计,以构建出设计蓝图。完成之后需要以Jpeg等文件格式来实现保存,其中PNG保存格式下背景进行透明处理,相应像素与分辨率要符合全屏显示之需。第二,单个物品设计的实现。在落实这一交互设计内容的过程中,一般可以采用三维建模的方式亦或者是二维全景图拍摄的方法来进行,在此基础上来实现二维与三维形式的交互设计,相应设计软件可采用3dsmax/VRToolbox等软件进行设计,在分类处理、调整后实现效果图的输出。具体设计步骤[3]为:首先,在3dsmax中进行建模处理,实现对文件大小的有效控制,在此基础上,以Cult3D来实现3D格式的输出,并加入相应的互动形式,进而到处相应的播放文件进行压缩处理,为发布应用奠定基础。其次,以二维图片进行三维动画拼接的过程中,需要在相应的刻度旋转平台上按照每十度一张凸显来进行图片采集,导入后以相应的修图软件进行图片处理,并转化成相应像素下的文件格式,在此基础上以VR软件来实现全景的拼接,进而制作成影视动画形式下的互动动画。最后,页面设计。包括首页以及各级页面的交互动画设计,这一设计是凸显整个网站风格的关键所在,需要以用户体验需求为出发点,融入设计的艺术与趣味性等,迎合浏览者的审美需求。[4]在具体落实设计的过程中,首先,要设计元素的整合,然后,实现各级页面的具体设计,并确保各级页面中具备单个产品交互动画展示的空间,最后,实现主页面的设计,并制作出相应的导航页面,通过相应语言软件进行编程,调试后来确认最终的效果图。第四,页面整合设计。首先,以Photoshop等软件进行静态页面的制作与修饰,加入文字内容,融入所需插入的交互动画,并确保其格式与大小上符合要求,并进行保存;然后,以Flash软件来实现动画设计,插入相应背景等,并以Dreamweaver软件实现单个物品与网站各级页面的链接设计,最后进行浏览并实现有针对性的调式,以确保交互动画的成功发布。
2基于交互动画网站设计的应用
2.1应用的作用分析
第一,创新产品营销手段。以交互动画设计的应用来实现产品的营销,通过互联网这一媒介能够实现产品信息的高效流通与传播,并以交互动画的独特设计理念来迎合消费者的实际需求。交互动画设计能够进一步细化产品的展示细节,并通过明确的主题与个性化设计理念的融入来吸引浏览者的注意力,进而为产品的营销与推广开辟了新途径。同时,这一设计形式的应用也是对传统网站设计的一种补充,相应信息内容更加的丰富且具体,效果更好。第二,强化信息传递效果。交互动画下通过动画设计与人的有效互动,能够强化消费者的体验感,并在参与的过程中强化与消费者的沟通与交流,进而强化了信息的传递效果。第三,强化了情感上的交流。通过交互动画设计的应用能够通过这一平台来吸引浏览者的注意力,并且以消费者心理需求为出发点的设计理念下能够激发情感的共鸣,通过艺术性与趣味性等进一步融合来强化情感上的沟通与交流。
2.2应用过程中所呈现出的问题与解决对策
第一,应用过程中所呈现出的问题。主要表现在如下两点:一是设计理念不完善,缺乏创新性,且在设计制作过程中技术落实不到位;二是交互动画设计的整体性存在不足,难以体现出交互动画设计的价值,有待进一步的优化与完善。第二,对策。立足于当前网络营销推广发展形势下,交互动画设计的应用要想充分的体现出交互动画的价值,则就需要以设计构思为出发点,把握住整体构思理念,在此基础上,进一步提升设计能力与水平,按部就班的落实各个设计环节,并要突出强调交互动画设计的交互性及趣味性。
3结束语
综上所述,交互动画网站的设计与应用已成为当前网络营销与推广的主要途径之一,在实际落实设计的过程中,需要在明确设计原则的基础上,进行设计的构思与实现,同时要明确网站交互动画应用意义的同时,结合所呈现出的问题来明确总体解决方向,以确保实现网站交互动画的完善设计与应用。
参考文献:
[1]王静.网络广告中交互动画的设计应用研究[D].西安:西安理工大学,2008.[2]朱举英.基于交互学习的精品课程网站设计与开发研究[D].兰州:西北师范大学,2012.[3]汪翠义.基于感性的教育网站页面设计研究[D].芜湖:安徽师范大学,2013.[4]古乐娟.动画制作专题站的设计与开发[D].济南:山东师范大学,2011.
第五篇:个人网站设计论文
秦皇岛职业技术学院信息工程系
分类号: TP319
秦皇岛职业技术学院 课程设计(论文)
个人博客网页设计论文
学生姓专班指导教指导教师职名 王飞飞 业 计算机应用技术 级 1100103 师
称
目录
摘要 …………………………………………………………………………………2 前言 …………………………………………………………………………………3 第一章 关于网络的知识.............................................4
秦皇岛职业技术学院信息工程系
1.1 INTERNET的简介.................................................4 1.2 WWW的简介....................................................4 1.3网页基本构成元素..............................................5 1.4 制作网页前的准备..............................................5 第二章 网站制作实战...............................................6 2.1 站点..........................................................6 2.1.1 创建站点..................................................6 2.1.2 创建站点内容..............................................6 2.2 首页..........................................................7 2.2.1 设置首页布局和页面属性....................................7 2.2.2 查看和编辑头内容..........................................9 2.2.3 插入图像..................................................9 2.2.4 插入FLASH相册...........................................10 2.2.5 插入文本.................................................10 2.3 创建其它网页.................................................11 第三章 建立网页链接..............................................12 3.1 文字链接.....................................................12 3.2 图像链接.....................................................13 3.3在HTML语言中建立网页链接....................................14 第四章 网站测试与维护 …………………………………………………………17 结论………………………………………………………………………………18 参考文献 ……………………………………………………………………… 19 致谢………………………………………………………………………………20
摘 要
本论文主要是对个人网站的建立进行研究和探讨。作品的主要技术指标包括:
1、制作出一个具有静态技术的“个人网站”;
2、在制作的过程中,加强和 1
秦皇岛职业技术学院信息工程系
深化以前所学的关于网页设计的方法,同时更好的理解参考资料上的方法、理论和更好的利用Fireworks、Flash制作网站需要的一些图片和影片。
本设计的主要内容包括:
1、个人网站的设计思想,整体规划及相关基础知识;
2、个人网站的首页设计,包括简单的HTML语言及效果图;
3、个人网站的调试。
网页规划包含的内容很多,如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等,也只有如此制作出来的网页才能有个性、有特色,具有吸引力。
网站主题就是所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,不可能像单独的网页那样做得内容少而单一。所以必须要找准一些自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给人留下深刻的印象。
关键词:技术指标
基本设计内容
网站规划 网站主题
前言
随着二十一世纪新兴科技的飞速发展,如今的交流与交往不再是那么的单调,看如今不曾再有五百里加急文件的传送,看如今已很少在出现写信、寄信。人们正在运用现世纪的高科技来增加自己的交际圈,来发展自己的人脉关系,秦皇岛职业技术学院信息工程系
同时,其它人也是通过高科技,悄悄的就能很容易地去了解,关注一个人。
正是因为人们的这些需求,所以出现了互联网,正是因为人们的需求,所以出现了如今的网络时代,网络通讯工具。来方便人们的交往,交际与沟通。也正是因为人们的需求,所以出现了个人博客,通过一人简单的网页来展现自己的独特魅力,自己的与众不同。真正的做到了“足不出户,便知天下人”。
互联网加大了我们了解世界的眼界,缩紧了人与人之间的距离,这就更容易的使我们走上了信息化的道路。
我觉得一个网站的开始,应该有一个大体的规划,网站的布局是最重要的,它起着一个网站成功与否的决定性作用,因为布局的好与坏,带来的是网站整体上的美观效果及应用。网站内容上也能决定着网站成功与否,一个网站上的每个字眼都可能决定着这个网站,因为你不知道哪个字就是吸引别人的内容,就是大家都追捧的话题,就是很潮的事物,所以内容上一定要谨慎。再有,就是网站的图片,一定要确准好路径,以免图像的丢失而不能再网站中显示,其次就是链接,在Dreamweaver中提供了很简单的链接命令,根据其提示操作即可。
我做了一个简单的个人博客的网站,通过这个网站能让大家更深的了解我,同时更重要的是锻炼自己的实践能力,巩固自己学习的知识,弥补自己学习的不足。
第一章 关于网络的知识
1.1什么是Internet Internet是由众多的计算机网络互联而成的互联网,它覆盖了全世界各地,3
秦皇岛职业技术学院信息工程系
它是采用开放系统协议的计算机通讯网络。然而,Internet不仅仅是计算机的互联网,它还是全球最大的信息资源宝库,它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务,使得世界范围内的人与人之间的交流在时间和空间上变的更小了。
Web页浏览:这是目前利用最广泛、最直接的互联网服务,通过浏览WWW(万维网)中的网页,可以了解世界各地的新闻,查看最新的股市行情,最新的娱乐动态、科技发明,找到众多的就业信息„„几乎想找到什么样的信息,就有什么信息。正是有了WWW、Internet才会变得如此丰富多彩,才能走进千家万户。1.2 WWW的简介
WWW的全称为World Wide Web,含义是“环球网”,又称“万维网”、3W、Web。WWW是一个基于超文本(Hypertext)方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本,也就是HTML(Hypertext Mark-up Language,超文本标记语言)文件,这些网页檔被放置到WWW服务器上,并且都有一定的地址。当我们想浏览某个网站时,首先要在计算机上安装浏览器,如
Internet Explorer或Netscape,然后在浏览器中输入网站的地址(网址),就可以进入网站进行浏览。在这些网页中,都有超连接,当将鼠标指针移动到某个地方(如文本或图像)时,鼠标指针就会变成一个小手形形状,单击它就可以连接到另个网页中,从而使得浏览者能在不同的信息之间动画和声音等信息。通跳转,我们之所以能在Internet的海洋中穿梭自如,正是超连接的功劳。
秦皇岛职业技术学院信息工程系
1.3网页基本构成元素
要学会制作网页,首先需要了解网页都是由什么元素构成的。文字:文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。图片:正是有个各种美丽的图片,网页才变得多姿多彩。动画:如今,网页上的动画越来越多,最常用的有GIF动画、Flash动画等。超连接:如上所述,超连接几乎是必不可少的。一个没有超连接的网页,就如同汪洋大海中的一座孤岛,失去了与外界的一切联系。其它元素:还可以在网页中添加声音、视频等元素。1.4 制作网页前的准备
计算机必备:计算机速度够快,最好能够上网。操作系统:Windows 98/NT/Me/2000/XP.其它软件:看图软件ACDSee、图像处理软件Photoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。
秦皇岛职业技术学院信息工程系
第二章 网站制作实战
2.1 站点 2.1.1 创建站点
要制作一个网站,第一步操作都是一样的,就是要创造一个“站点”,从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”,之后再选择其中的“站点”,再次弹出一个对话框,在文本框中输入自己已经企化好的网站名称“my web”。填好后,单击“下一步”,进入下一个步骤。由于我要做的是一个静态的网页,所以选择上面的一项“否,我不想使用服务器技术。单击“下一步”,进入下一个步骤。在此选项中有两个选择,选择推荐的“编辑我的计算机上的本地副本,完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹,Dreamweaver将在其中储存站点檔的本地副本。单击该文本框后面的文件夹图示,之后单击“下一步“,进入下一个步骤。这一步是如何设置连接到远程服务器,弹出式菜单中有6中选择,这里选择“无”。而后“下一步”再“完成”,即可。2.1.2 创建站点内容
站点创建完成后,就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“檔/檔”面板,在弹出的菜单中选择“新建文件”,新建一个档后将其命名为“index.htm(或index.html),它就是未来的首页。
秦皇岛职业技术学院信息工程系
2.2 首页
2.2.1 设置首页布局和页面属性
一、设置首页布局
每个网站都会有一个首页,就功能上而言,它代表着一个网站的风格与特色,就网站架构上而言,它代表了网站的第一层架构,首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置,一般的有index.htm,default.htm或home.htm等,目前主要以index.htm的居多。当然,后缀名为html也是正确的。具体设置方法是:右健单击“檔”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。操作步骤:
1、在“插入快捷栏”的“布局”分类中,单击“布局表格”按纽。
2、将变成“+”形状的鼠标游标放到编辑中网页上,在要绘制的地方进行拖动就可以进行创建了。(如果绘制的是第一个表格必须从网页的最左上角开始绘制)。“index”表格布局如下图:
秦皇岛职业技术学院信息工程系
二、设置首页的页面属性
首先双击“檔”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域,在菜单中选择“页面属性”,之后弹出“页面属性”对话框,若选择主菜单“修改/页面属性”项,也可以把打开该对话框。
在“页面属性”对话框中,左侧窗口显示“分类”,其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项,右侧区域则显示各类中可以设置的项目
“index”首页设置的属性如下图所示:
秦皇岛职业技术学院信息工程系
2.2.2 查看和编辑头内容
一个网页文件结构上实际是由两部分组成,头(head)内容和主体(body)内容主体内容(body)是文檔的主要部分,也是包含文本和图像等的可见部分。头内容(head)是除文檔标题外的不可见部分,包含有文文件类型、语言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息,这些元器并不是每个页面都需要的,例如,可以仅为主页提供关键词。2.2.3 插入图像
图像是网页中不可或缺的组成成份,恰当地使用图像,可以使网站充满生活生命力与说服力,吸引更多的浏览者,加深他们欣赏你网站的意愿。首先将游标停留在要插入图像的位置,然后单击“菜单栏”下面“插入快健栏”的下拉表,选择其中的“常用”类,则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像:图像”按钮,单击它右侧的下拉列表,选择第1项“图像”。随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件,下面的“相对于”下拉表框中,可选择文件URL地址的类型,插入logo图像,如图所示:
秦皇岛职业技术学院信息工程系
最后单击“确定”按钮,即可完成插入图像的操作。2.2.4 插入FLASH相册
在Dreamweaver 8中,除了之前讲到的可以插入“图像”外,还可插入动画、声音、视频,FLASH相册等媒体元素,并且还可以在Dreamweaver自身内插入Macromedia Flash MX2004按钮和文本对象,以及进行相关的后期处理和添加设计备注等操作。在Dreamweaver 8文文件中,可以插入媒体文件包Flash 相册、QuickTime、AVI java、applet Active X控件以及各种格式的音频档。要在浏览器中播放放Flash 相册,必须在浏览器中集成“Flash 播放器(Flash Player)”。操场作步骤:
步骤1、将游标停留在要插入Flash的位置,然后单击菜单栏下面“插入”的下拉列表,选择其中的“FLASH”分类,找到图像查看器命令,单击弹出保存对话框,选择要保存的地方和名称,点击保存。
步骤
2、在Dreamweaver中将会产生一个flash相册,在Dreamweaver中的最右边将会有一个flash元素,一次将flash的属性修改,既可完成一个flash相册的制作。2.2.5 插入文本
文字是人类语言最基本的表达方式,在网页中,文本内容也可以说是重要的组成部分,它是最关键的因素。插入文本的两种方式:一种是在网页编辑窗口中直接用键盘敲入文本。另一种是复制文本的方式。直接使用Dreamweaver的文本复制功能,将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作,10
秦皇岛职业技术学院信息工程系
具体步骤如下:打开文本编辑软件(如Microsoft Word),选中要复制的文本,它们将反白显示,执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C,之后切换回Dreamweaver,将游标停留在插入文本的位置,执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。这在我的“闲情逸致”中用到很多。2.3 创建其它网页
还有其它的几个网站与主页的制作相同,一个网页是图像和文字的组合。“相册”子页中的FLASH相册的插入和前面的介绍相同。
秦皇岛职业技术学院信息工程系
第三章 建立网页链接
网站实际上是由很多网页组成的,那么网页之间是如何联系的呢?这就是本章要讲的内容----网页的“链接”。“链接”,又称“超链接"(Hyperlink),它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中,如果以“链接”的媒介来划分的话,则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”,共8种。3.1 文字链接
“文字链接”即以文字作为媒介的链接,它是网页中最常被使用的链接方式,具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例,来讲解如何为文字建立“链接”。操作步骤:
步骤1、准备好已经制作完成的首页的各个栏目页面
步骤
2、在Dreamweaver 中打开首页,之后反白选取作为“链接”的文字。步骤
3、观察“属性面板”,其中包括一个“链接”文本框。步骤
4、接下来需要把链接的位址加入到文本框中。
步骤
5、在“链接”文本框下面还有一个“目标”下拉列表,从中可以选择链接网页显示的窗口方式,共有4种。如图:
步骤
6、还可以设置一些“链接”的属性,单击“属性面板”中的“页面 12
秦皇岛职业技术学院信息工程系
属性”,选择其中的“链接”分类,可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。
步骤
7、至此,第1个栏目的链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预览,测试一下,当鼠标放在“放松心情”这4个文字上时将变成手形,并且浏览器窗口下面的状态区中会显示链接到的网页的位址,单击文字,页面会立即跳转到第1个栏目中,这表示链接已经制作成功了。
步骤
8、同理,按照以上步骤,再为“闲情逸致”和“个人主页”等其它栏制作指向对应栏目的链接。
至此,整个“文字链接”的实例就全就全部完成了。3.2 图像链接
“图像”也是常被使用的链接媒体,它和“文字链接”非常相似。为图像加入链接,首先应该在网页中插入“图像”,有关插入“图像”或“导航条”按钮的内容,接下来以我的网站“my web“为例,讲解如何建立“图像链接”。操作步骤:
步骤
1、首先仍然要准备好已经制作完成的首页和各个栏目的页面 步骤
2、在Dreamweaver中打开网站的首页,之后选取要制作“链接”的图像。
步骤
3、观察“属性面板”,在“链接”文本框中输入链接的文字位址。步骤
4、如果有需要,可以在“目标”下拉列表中选择“链接”网页显示 13
秦皇岛职业技术学院信息工程系 的窗口方式,分别为-blank、-parent、-self或-top。
步骤
5、至此,第1个栏目的图像链接就制作完毕了,按下Ctrl+S保存网页,再按下F12预览,测试一下,将鼠标放在“动画制作”4个文字上时将变成手形,同时浏览器窗口下面的状态区中会显示出链接到的网页的地址,并且会显示出“替代”文本“动画制作”,单击文字,页面会立即跳转到第3个栏目中,这表示链接已经制作成功了。
步骤
6、同理,按照以上步骤,再为其它几幅图像制作指向对应栏目的链接。
步骤
7、在栏目页面中制作“返回首页”的链接,使得单击后可以跳转回首页。
至此,整个“图像链像”的实例就全部完成了。3.3在HTML语言中建立网页链接
一、文字链接
在HTML语言中用超链接标记指向一个目标。其基本格式为:举个简单的“文本链接”的实例,该实例相对应的HTML代码如下所示。
a href-“index2.html”target=”-blank”>平面设计(新开窗口,-blank)
相册(原窗口,默认为空)