高校网络平台构建与实施：网页设计及制作毕业论文案例

(2)将页面中所有HTML5标签元素对应的CSS样式表中的margin-right、margin-left、padding-right、padding-left的属性值也用公式——目标元素宽度÷上下文元素宽度=百分比宽度来修改。

(3)将CSS样式表中的font-size属性值的单位用em来代替px。这里依然使用公式——目标元素宽度÷上下文元素宽度=百分比宽度。需要提醒新手的是：在标签的初始化代码中，如果有font-size:16px;语句，那么在给其他元素的font-size属性上修改值时，公式中的“上下文元素宽度”就等于16px，例如，#logo{font-size:48px;}现在要修改为#logo{font-size:3em;}。

(4)为了实现弹性图片，让图片随视口缩放，图形图像、动画和视频的弹性设置使用“img,object,video,embed{width:100%;max-width:100%;}”。其中，max-width属性是用于确保缩放时不会超出图片最大尺寸。同时，熟练者还会使用AdaptiveImages解决方案来实现自适应图片。

(5)媒体查询可以通过判断不同设备终端，提供不同的样式，使其在不同终端都能获得最佳的用户体验。例如，某个响应式页面用电脑浏览页面时，页面信息会以平铺的形式分布在页面合适的位置；用手机浏览页面时，导航按钮会相继隐藏起来，部分信息变成左右滑动的方式呈现，页面会重新布局，图片相应缩小。媒体查询的语法格式是，例如：设定宽度不超过400像素的屏幕尺寸，代码是：。虽然，HTML5+CSS3提供了良好的媒体查询功能，但当前仍有一些浏览器不支持，你可能需要添加如下基本样式：3.3 解决不同种类、不同版本浏览器的兼容性问题跨越浏览器的问题一直是响应式网页设计的难题。熟练者面对这一问题时，一般采用“渐进增强与降级”、“利用javascript修复老版本IE”、“使用Modernizr辅助修正样式，按需加载资源”、“给IE6，7，8追加媒体查询功能”等方法。

4 结束语

对于响应式网页设计而言，当前的设计理念和技术方法还不是终点，网站前端设计师需要继续努力寻找更好的解决方案。而对于新手学习者而言，响应式网页设计开发技能的形成不是一蹴而就的，还需要学习者在多个项目中，通过原型进行多次定向、操作及内化才能真正掌握。

网页设计毕业论文篇三：《网页设计中的版式设计》

摘要：版式设计可以说是界面设计的基础部分，网页界面中的版式设计只是其发展应用中的一个方向。如何设计完美有魅力的网页界面，版式设计扮演着至关重要的角色，优秀的版式设计可以给浏览者留下深刻的印象，提高页面的访问量。因此，本文将向诸位读者介绍在CDIO工程教育模式下，网页设计课程中采用项目为指导的教学实践过程中需要注意的事项。

关键词：网页设计；版式设计；CDIO教育模式；项目教学

近年来随着经济的高速发展，科技的日新月异，教育领域同样面临革新。引进新的教育理念和教学模式成为教育工作者的关注焦点，此时，欧美成熟的工程教育理念逐渐进入我们的视野之中，CDIO的教学模式(Conceive构思、Design设计、Implement实施、Operate运行)，符合工程人才的培养，提高学生的实践能力、组织能力、创新能力。这一模式更适应当下的教育环境需求。

近年来，伴随着经济的迅猛增长，科技的飞速进步，教育界也面临着变革。采纳新的教育观念和教学模式成为教育工作者的焦点任务。在此背景下，欧美成熟的工程教育理念逐渐进入我们的视线，CDIO的教学模式（构思、设计、实施、运行），契合工程人才的培育，增强学生的实践、组织、创新等能力。这种模式更贴合当前的教育环境需求。

网页设计课程属于跨学科领域，融合艺术设计、计算机技术以及交互设计等多个学科。此外，作为艺术与技术的融合体，这门课程要求学生具备较强的实践操作能力和综合应用能力，因此在教学过程中，我们根据CDIO的工程教育理念进行教学。

本文主要探讨的是网页设计中的版式设计过程，网页中的版式设计具有统一信息、划分区域和引导交互的作用，它是在有限的空间界面上将文字、图形、背景色彩或图案以及交互功能整合于方寸之间，依据设计的形式法则，运用艺术美学与科技相结合的方法来展示效果。以下以教学过程中的“xx艺术系网站”项目为例，以网页设计中的版式设计为内容，展示教学过程中的各个设计阶段。

1. 构思阶段

   (1) 确定目标。

   网页设计并非盲目操作，也不是简单使用软件，它是一个从构思到实现的过程，是一种从展示到体验的过程。因此，在设计初期，教师需要引导学生了解课题背景，明确网站的功能和外观布局，以及网站要营造的氛围。常见的网站类型包括企业网站、电子商务网站、电子政务网站、文体娱乐网站、教育科学网站等，每种类型的网站都有其特定的信息传播需求，根据文字和图片选择合适的排版方式，从而营造合适的氛围。在“xx艺术系网站”项目中，学生需要根据项目类型，理解设计目标，即打造一个简洁大方、色彩明快、营造清新愉悦氛围的学院系部信息服务类网站，学生可据此进行进一步的设计。

   (2) 信息整理。

   项目开展初期，要求学生对客户或相关人士进行访谈，对行业同类网站的资讯进行收集与调研。此阶段，学生将接触到网页设计的需求方，在本项目中为系内行政人员、教师及系内学生，通过访谈或调研获取网站设计信息，如整体风格需求、导航设计需求、网站类型（静态或动态），根据需求结果，设计多种版式效果供客户参考。

   (3) 交互设计。

   我们将网页中的交互分为视觉交互和行为功能交互设计。在此，我们着重说明视觉交互的应用。网页中常见的交互形态包括按钮、导航条、搜索栏和表单等。这些交互形态通常出现在版式的突出位置，以吸引人们的视觉关注。在进行版式设计时，需要考虑这些交互元素的布局，友好的版式也是一种界面与人的情感交互。在我们的项目中，学生应考虑交互按钮的外观设计、排放位置等因素；导航条应设置在显眼位置，清晰明确地发挥导引作用；搜索栏帮助浏览者快速搜索，放置在易发现的位置，通常出现在网页右上角；表单设计是学生容易忽视的环节，因为可以使用插件添加，但建议在信息表单设计中考虑细节设计，提高友好度和舒适度等交互设计。

2. 设计阶段

   版式设计是网页设计中重要的引导规划环节，在这个过程中，学生可以根据自己的项目主题进行艺术美感的设计。一般进行页面版式设计，我们从以下几个方面入手。

   (1) 版式结构设计。

   网页设计中的版式设计与传统媒介中的版式设计有所不同，但都遵循版式设计五原则：内容与形式、简洁与简约、设计与艺术、趣味与独特、局部与整体。为了设计出富有形式法则和艺术美感的网页作品，版式设计方面通常会采用黄金比例和三分法排列原则。黄金比例法是初学者易于掌握的方法，将视窗可用区域分成两个部分，也可以根据设计比例需求，将数字录入到相关计算网站，得出合适的黄金比例分配方案。三分法构图排版方式，是将排版界面分成三份，根据内容的不同，选择不同的三分法排列位置。

   网页设计中，由于要考虑显示器视窗显示水平的不同，我们的总体版式设计会采用固定格式或非固定格式两种形式。固定格式的版面是固定的界面版式，而非固定格式的版面设计是变化的，这种变化的版式难以把握，变化的视窗将改变既定的字体形式和图形排列位置，这也是我们今后要深入探讨的方向。

   (2) 字体、图像、色彩设计。

   版式设计是界面设计的骨架，字体设计是界面设计的血肉，富媒体技术的全面发展，使得网站这一综合载体也得到了极大的发展，版式与字体的结合构成了网页的不同风貌。在网页中，常见字体分为中英文两类和图形化的艺术字体，字号一般选用12pt。在中文网页中，常见的字体为宋体或黑体，字号为12pt/14pt的文字展示，另外也会有些超大字体以图像的形式出现，并通过视觉效果的调整，创建三维空间的视觉展示效果。图形化的艺术字体在诸多网站中得到应用。在设计中，我们应保留传统的文化性，关注中国元素的运用，如书法、图腾、建筑等富有中国色彩的艺术形态，中西文化的比较与融合也是我们要探索的方向。图形与色彩部分在排版中应适合主题，响应设计氛围，为整体版式服务。

版面布局是界面构建的骨骼，字体搭配是界面构架的肌体，多媒体技术的广泛运用，使得网站这一综合性平台也得到了迅猛的发展，版面与字体的融合形成了网页多样的风格。在网页中，常见的字体分为中英文两大类以及图形化的艺术字体，字号通常选择12pt。在中文网页中，常见的字体为宋体或黑体，字号为12pt/14pt的文字展示，同时也会有一些超大的字体以图像的形式呈现，通过视觉效果的调整，打造出三维空间的视觉展示效果。图形化的艺术字体，在众多网站中得到了应用。在设计过程中，我们应保留传统的文化内涵，运用中国元素，如书法、图腾、建筑等富有中国特色的艺术形态，这些都是我们需要思考和关注的。中西文化的对比与融合，也是我们需要探索的方向。图形与色彩在排版中应与主题相契合，呼应设计氛围，服务于整体版面。

(3)视频展示设计。

网页界面排版还需考虑一种新兴的展示手段，即视频信息展示，在页面中大量运用视频信息排版，减少文字、图片信息的输入，信息传达方式由静态转变为动态，提供有趣而新颖的排版展示方式。

3技术实施

(1)界面版面视觉设计。

网页设计中对静态界面的布局，我们通常采用Photoshop和Illustrator图像处理软件进行设计，首先根据思维导图绘制基础模板，然后根据设计需求在模板中添加设计好的文字、图形、视频、声音等设计元素。

(2)交互功能视觉设计。

在网页设计中，我们会考虑将静态样稿转换为简单的静态网页，这种转换我们会使用Dreamweaver软件进行操作，由于网页展示设备的不同，我们也会考虑采用一些相关的模型制作软件来处理交互设计部分。

4运行阶段

将确定的静态草稿通过切图生成静态网站，测试效果及功能，在运行过程中根据需要和视觉效果进行调整，直至达到理想状态。

5小结

网页设计课程将实际项目引入课堂，根据CDIO工程教育模式进行教学，打造有效、有趣、实用的教学方式，使学生在学习操作中锻炼宏观思考的能力，培养团队合作的能力，养成终身学习的能力。学生对设计流程的掌握，就是对知识体系的掌握和运用，实现理论与实践相结合，通过对版面的全面掌控，为静态网页设计打下坚实的基础。

1、数据库对于信息的即时检索显然具有极大的优势，因此依据数据库信息的持续更新生成动态网络页面将成为网页制作的关键手段。动态网页的技术得到了众多厂商的拥护，他们各自拥有独特的长处。

2、网页设计美术设计要求：网页背景通过拼接方式组合而成，这有利于提升网页的加载速度，借助DREAMWEAVER的强大功能使主页链接更加和谐，我对背景的美化也十分满意，希望大家都喜欢。

3、一篇关于艺术中心网站设计与实现的毕业论文自20世纪后半叶以来，随着以信息技术为核心的高新技术的迅猛发展，人类社会迈入了具有里程碑意义的信息网络时代。

4、与其他传感器整合和融合，形成多传感器系统。随着传感器技术的不断进步，传感器将从单纯的判断功能发展到具备学习功能，最终发展到具备创造力。在新的世纪，焕然一新的传感器将发挥更加重要的作用。

5、互联网由成千上万的网站构成，每个网站由众多网页组成，网页是构成互联网的基本元素。网页设计属于设计和网络交叉的设计领域，既传承传统设计理念，又具有自己独特的风格。

6、结合《Flash软件在网页设计中的应用》的毕业论文摘要：Flash技术应用范围十分广泛，无论是网站、广告、动画、游戏，还是程序设计与多媒体展示，都有一定程度的运用。

7、与网站设计相关的主要内容：本课题是基于我院新型轮机模拟器的子专题“主机遥控装置仿真”进行的。仿真对象为中国海运集团总公司所属的集装箱船“新大连”号主机遥控装置。

8、工艺品网站的设计与制作论文摘要：随着网络技术及相关电子技术的迅速发展和普及，电子商务企业不断涌现。

9、关于网站设计与实现的毕业论文写作：网络游戏网站并非一个简单的网站，而是一个具有自身特点的目标性网站。构建一个网站需要方案、技术和资源的支持。本论文的研究目标就是网络游戏网站的设计与实现。

10、系统功能：系统为用户提供美观、友好的商品展示界面。顾客可以方便地查询并订购商品。商家可以方便地定义各种商品信息，让所有上网浏览的客户都能看到所录入的产品信息，并可以随时进行购买活动。

11、界面是网站给浏览者的第一印象，往往决定着网站的可观性。在确定网站的界面时，要注意以下三点：①栏目与板块编排；②构建网站就像写论文，首先要列出提纲，才能主题明确、层次清晰。