在科技发展迅速,快节奏的生活状态下,网络已经成为人们信息普及的主要来源,手机网络尤其受欢迎,造就了今天的低头族。网页设计师已经在历史的潮流中占据了重要角色。下面是搜索整理的网页设计与制作论文8篇，供大家阅读参考。
网页设计与制作论文第一篇：网页制作中CSS的优点及其特效制作
摘要：互联网时代,网页已经成为公司、个人展示自我的最好途径和手段,网站、网页制作是目前最常用的展示个人能力的手段和方法,文章通过介绍CSS (层叠式样式表)网页制作流程,并与传统的frontpage网页制作进行对比,总结更好的网页制作技巧。
关键词：CSS样式表; 网页设计; 表格;
0 引言
样式表CSS的英文名为Cascading Style Sheets,又翻译为层叠式样式表,在很多网页制作的课程中都提及如何使用CSS样式表实现网页制作的特定效果的技巧,通过CSS的定义,可以定义整体网页的显示定位、字体的格式大小、元素定位、超级链接的样式,还便于导航栏的制作,能实现图片、文字环绕等一些特定的网页展示效果,既能减少代码量,又可以增强设计效果,而且页面也更灵活多变。
1 CSS相较传统Table制作的优点
通常,CSS可以嵌入html页面中,但是通常的做法是生成一个.css的脚本文件,然后通过html调用该.css文件,如<link href="*.css"type="text/css"rel="stylesheet">。
CSS一般会配合DIV一起使用,在结构上的优势主要体现在以下几个方面。
(1)设计手段灵活,可将表现与设计分离,网站建设形式更为灵活。我们在建设网站的时候,可以将页面进行单独的CSS设计,各功能也只需要进行文字的显示即可。
(2)布局更规范、代码更清晰易懂,有利于网站管理员的维护与操作。当网站的整体基调需要变换颜色时,可以直接在css文件里调整布局的颜色;同样,当某几个栏目位置需要变动时,也仅需要在页面将对应的div的位置重新定位;调整某些栏目时,只需修改若干样式文件。这种区域化、“块”理念的设计大大减轻了网站维护人员的工作量,为以后网页的设计、改版打下了良好的基础。
(3)具备更好的控制结构排版能力。我们通过框架结构定位需要显示的元素的位置,可以有效修正原html表格中一些实现起来比较困难的地方,比如整体页面的定位、表格内容的显示等,在传统html中经常会出现错位的情况,因此对行间距的设置、行数的设置都需要非常精确,否则设计的页面表格就会出现错位偏差。
(4)更易于维护及改版工作。上述特点决定了使用样式表格在维护和改版时,修改的工作量可以集中到某一点,避免重复的设计和布局,大大减轻代码设计人员的工作量。
2 利用CSS制作特效
2.1 滤镜效果
简单来说,滤镜就是类似于我们Photoshop里面的图文特效,CSS的滤镜属性的标识符是Filter,我们通过对Filter各属性的配置数值的不同[如brightness()设置亮度,blur()设置模糊度,contrast()设置对比度,drop-shadow()设置阴影效果],将多个属性值配合,就可以实现很多我们意想不到的效果。
在遇到特殊的纪念日时,如南京大屠杀纪念日或某些特别的日子,我们需要将网页页面设置成灰色,这时可以使用CSS,通过其中的Gray滤镜就可以轻松实现这一效果(如图1所示);结合Javascript和滤镜技术我们还可以制作许多动态的效果,如自定义鼠标移动到特定区域位置或离开时显示不同效果图或背景颜色。
图1 CSS里gray滤镜特效
2.2 文字特效
针对显示信息的网站,其对文字经常会有一些特效要求,如阴影、3D特效、霓虹灯、凸出浮雕效果等。而在在html中没有太多可展示文字特色的手段,只有字体、大小、下划线几种表现手段,但是如果使用CSS样式应就不同了,其属性text-shadow有两个作用,产生阴影和模糊主体,不同的属性取值可以表达出多种文字效果,即使不使用图片,也可以给文字增加质感。
2.3 动态下拉菜单效果
在网站的首页导航栏,经常需要通过下拉菜单的方式实现二级页链接打开,具体表现为当鼠标放在导航菜单上时,出现下拉菜单选项,这时可点击链接进入二级页,当鼠标移走时,下拉菜单消失(如图2、图3所示)。
一些网页制作论坛上经常有介绍一些特效的实现方法,但是通过CSS最容易实现一些特定的特效。CSS可以通过设置二级列表标签ul的display属性实现特定特效,初始状态的display属性设为none代表初始不显示,通过修改二级菜单对应的一级菜单项的hover状态的display属性值,配合ul,li标签的属性设置就可以很快地实现下拉菜单,比传统的JavaScript及j Query实现起来更快捷、简单。
多个属性的结合使用在CSS设计时,效果特别显著,一些网页制作论坛还介绍了很多有趣的特效,我们可以根据实际的需求选择应用。
3 结语
总之,CSS+DIV的网页设计和使用,在很大程度上解决了传统html表格设计网站页面的某些缺陷,诸如响应速度较慢、页面定位难、网页布局迁移难、规范度较低、代码灵活性差等;同时,CSS使用“块”设计的理念和思路使网站结构更具框架性、版面更清晰、网站功能更完善、页面表现形式更富。区域化设计、代码缩减、样式文件定义等手段使网页设计更规范,同时大大减轻了网站管理员的工作量,方便网站改版及维护、操作。
图2 导航栏(无菜单显示)
图3 鼠标点击显示导航下拉菜单且当前菜单变色
参考文献
[1]钱勇萍,王光杰CSS+DIV布局方法在网页制作中的应用[J]现代制造技术与装备,2014(3)
[2]高娟,阎知知,黄龙网页制作中下拉菜单的制作方法解析[J]数码世界,2017(10)
[3]张英DIV+CSS网站设计的研究和探讨[J]电子技术与软件工程,2013(24)
网页设计与制作论文第二篇：基于HTML语言的网页设计与制作基本方法
摘要：计算机及互联网技术的发展对人们生活方式的改变带来了极大的帮助, 且也对计算机互联网技术的应用提出了更高的要求。基于目前情况, 在互联网工具下, 网页的构建作为人们利用互联网及阅览网络信息的基础, 其作用不可忽视。而采用HTML语言实施网页制作是主要方式, 网页设计人员应加强该种语言的学习及提高网页制作的质量。以下将对现有HTML网页制作中所存在的技巧及方法进行了深入讨论, 其目的在于为后期网页设计者更好
关键词：HTML语言; 网页制作; 网页链接;
计算机及互联网技术的发展对人们生活方式的改变带来了极大的帮助, 且也对计算机互联网技术的应用提出了更高的要求。基于目前情况, 在互联网工具下, 网页的构建作为人们利用互联网及阅览网络信息的基础, 其作用不可忽视。而采用HTML语言实施网页制作是主要方式, 网页设计人员应加强该种语言的学习及提高网页制作的质量。以下将对现有HTML网页制作中所存在的技巧及方法进行了深入讨论, 其目的在于为后期网页设计者更好掌握网页设计技术提供参考及帮助。
1 关于HTML语言概述及网页制作优点讨论
1.1 HTML语言概述及分析
对于HTML语言, 即超级文本标记语言, 使用该种语言, 其主要是利用HTML语言编辑器实施HTML文档的编写, 从而使得对文本、音频及视频等采用标记符号实施标记, 从而制作出有效的网页文件。而当使用者对其网页进行浏览时, 用户只需借助浏览器对网页中所标记的网页进行解析, 即可实现对整个网页的浏览, 方便简单且有效。可以说, HTML语言在网页编制中具有简单灵活及可扩展性等特点, 可在网页编制中取得较好的应用。
1.2 HTML语言进行网页制作优点讨论
综合现有网页设计而言, HTML语言属于基本标记性语言, 而现阶段, 大部分HTML语言均采用文字处理器相似接口对网页实施设计。具体而言, 其具有以下特点:
(1) 简易型特点, 采取该种语言常采用超集方式, 使用较为灵活及方便。
(2) 可拓展性, 该种语言是现有计算机网页设计及其他程序设计所常用的语言, 且采用子类元素方式, 通过接口的设计可与多个系统相联系, 可拓展性极强。
(3) 受应用平台的限制少, 如该种语言可以在多种平台上使用, 如PC机等, 由于其可在多种平台使用, 故而可应用范围较广。
2 基于HTML语言的网页设计基本方法及技巧讨论
2.1 基于HTML语言的网页设计基本方法及流程分析
从目前网页设计而言, 其所用到的工具及方法主要有Dreamweaver、Frontpage等。同时, 近些年, 网页设计工作者为增加网页设计的美感及增强其设计主题的体现, 在网页设计时增加了photoshop等软件的使用。而从网页设计较多来讲, 其所使用的基本方法除了常规的编辑方法外, 还应用了BGM编辑等方法, 使得其网页更加的具体及形象化。具体来讲, 对于HTML网页设计而言, 根据其所涉及的具体元素等内容而言, 网页设计及制作过程主要包括以下几点:
(1) 确定文件结构, 如确定具体的链接或索引代码等。
(2) 设置背景及文字, 目前主要采用的标记为<body bgcolor=#text=#alink=#vlink=#>, 以通过不同的代码实现对不同意义及元素的表达。
(3) 插入背景图像, 其标记主要涉及background, 如需在页面上添加图像, 则需替换原有的image-URL。
(4) 加入网页链接, 链接是用户访问网站的窗口, 属于网页设计的重要部分, 网页设计人员应做好设计。
2.2 基于HTML语言的网页设计技巧讨论
对于网页设计而言, 相关设计人员应掌握网页设计的技巧, 以便更好的开展网页设计及提高网页的适应性。具体来讲, 主要包括以下几个方面:
2.2.1 网页设计应具有一定的目的性
对于网页制作, 其属于一项任务性极强的工作, 即实施网页设计具有较强的目的性及计划性, 实际设计前已经对网页要表达的内容有了明确的规划, 如需要添加的图片、视频、音频等有了具体的规划。故而, 在网页设计时应结合主要设计理念及所面对的使用者需求做好规划, 例如网页尺寸的设计、链接的繁琐程度、读者喜好等应综合考虑与灵活选择, 使其设计者所制作的网页可满足预期使用者的需求及获得较好的收益。
2.2.2 简洁大方应是网页设计最基本的要求
从使用者角度考虑, 能够以最短的时间获得有效的信息是网页设计者必须思考的重要问题。而对于此, 简洁、大方的网页则可起到积极的效果。但实际设计中应正确理解简洁的概念, 简洁的主要目的在于最快时间向使用者展现所需的信息, 而并非仅呈现预期的内容, 以免网页整体乏味的境况。再如, 对于网页设计而言, 整体页面所呈现的功能及组件过于丰富, 其结果将会对浏览者的注意力造成分散, 该种设计将对网站设计的主要目的造成影响, 不能使使用者尽快找寻其所需的内容。
2.2.3 巧妙设计及使用问题并添加必要的注释
如为增加网页的可观赏性及提高浏览者浏览网页的兴趣, 在网页设计中添加好看的字体必不可少, 在该种情况下, 可在FONT标签中的FACE属性中写入多种字体, 通过该种方式即可实现对好看字体的添加, 可增加网页设计的美观度。同时, 在网页设计中, 为实现对某一段代码效果的测试, 常可在适当的位置增加合理的注释, 可便于不同的设计人员明白网页设计人员在设计网页时的思路及目的, 也可明确代码的具体含义及减少代码混淆所带来的后续问题。
2.2.4 学会表格布局页面及添加适当的网页元素
网页设计中各个内容的体现如仅采用文字形式体现则显得整个网页缺乏条理性及可观赏性, 而借助表格对网页内容实施布局则可凸显网页设计的层次感, 且能使浏览者直观对网站所要凸显的主题内容进行快速的了解。而实际上设计中, 各个网页元素的摆放应合理, 如随意摆放或任意布局则会对网页整体的视觉效果造成影响。如在网页设计时, 适当的以空白作为补充, 并确保各个元素之间能够有效的配合将使得网页更加具有美观性及提高浏览者的阅览兴趣。
3 结束语
网页作为计算机互联网技术应用的主要媒介在为实现网络信息的传播发挥着积极的作用。而有效合理的网页设计则可对提高使用者的浏览兴趣发挥积极作用。本文对基于HTML语言的网页设计相关问题进行了讨论与分析, 提出了具体方法及设计技巧, 其目的在于提高网络设计人员的水平及为人们展现更好的网页提供参考价值。
参考文献
[1]青华.HTML语言的网页制作技巧与方法[J].电脑知识与技术, 2017 (30) .
[2]张丽霞.基于HTML语言的网页制作方法[J].电子测试, 2018 (Z1) .
[3]陈丹.计算机网页制作的几个要点分析[J].电脑迷, 2018 (07) .
[4]马立华.Photoshop在网页设计中的应用[J].甘肃教育, 2016 (23) .
