网页设计方案（精编3篇）

【导言】此例“网页设计方案（精编3篇）”的范文资料由阿拉题库网友为您分享整理，以供您学习参考之用，希望这篇资料对您有所帮助，喜欢就复制下载支持吧！

网站网页设计1

关键词网页设计 商业网站 脚本编程

1 前言

网页设计――根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

《商务网站前台设计》课程是电子商务专业的核心课程，本课程的最终目的是设计与制作出具有电子商务营销特点的精美网页。然而，对不同的主题，设计效果是不一样的。为此，课程团队经过长期积累和充分讨论，率先制定出了《商务网站前台设计课程标准》，该标准试行两年多以来，得到了业内人士的肯定。本课程正是在该标准的指导下，评项目、教项目、学项目、做项目，它将抽象问题具体化，将主观感觉分数化，将创作变得有章可循，进而使学生能按照某种规则指引，又好又快地设计出满意的网页来。

2 商务网站的前台设计概述

《商务网站前台设计》课程是电子商务专业的一门专业核心课。始终贯彻“工学结合、项目导向”课程模式，以“实用、够用、必需”为原则，培养学生的实际应用能力，取得了良好的教学效果。根据职业岗位的需求，与企业专家共同确定目标和内容。通过本课程学习，使学生能熟练运用fireworks/photoshop软件进行网页效果图的设计； 熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架元素标志及属性设计网页；掌握Dreamweaver进行网站的导入、规划、管理、的相关技术及网页制作的操作技能；掌握CSS+DIV网页布局设计，掌握JAVASCRIPT脚本编程语言的基本语法知识。

商务网站前台设计课程，主要采用项目教学法，教学项目是教学内容的具体表现形式，也可以说教学内容就是教学项目，完成教学项目的工作过程中形成的隐性知识即工作过程知识才是职业教育教学的核心内容，典型工作任务为工作过程知识的载体，课程内容来源于实践专家研讨会，工作过程是课程形式的体现，因此，教学项目的选择是课程开发的一项重要任务。经过反复研究并通过实践检验后的不断调整完善，最终选择了四个项目（由简单到复杂）。

（1）选择两个源于真实、完整的“红叶网上书城”和“校园超市”商务网站制作项目。其中“红叶网上书城”网站制作偏向于简单的表格布局制作，该教学目的难度属于中等偏易，“校园超市”电子商务网站制作偏向于较有难度的DIV布局制作，难度属于中等偏难，两个项目的整体设计共同为引导学生“怎么做？”。

3 拓展网站设计的实践项目

从理论实施布局来讲，这个项目基本覆盖了所需的理论知识，构成了基础实践阶段的项目。为了进一步提高学生的实践能力，又设计了课外拓展实践项目。

（1）选择个性化网站制作项目，主要侧重学生同步独立实践，该项目为课外拓展实训项目，要求学生在课堂外独立完成，解决“做什么”问题。在该项目的难度属于中等。

（2）工学结合项目，是在期末集中实训期间，在学校聘请的兼职教师的指导下，学生以小组的形式主动到企业中找项目分角色完成真实网站制作项目。

由此而构成354的教学模式，既三阶段项目：

“三段”：基础型实践阶段、拓展型实践阶段、工学结合型实践阶段。

“五化”：课程教学项目化、模块单元化、教学过程工作化、考核多样化、课程评价过程化。《商务网站前台设计》课程建设，形成了本课程的“三段五化”教学模式。课程教学为主，充分运用“三段”教学模式，实践教学循序渐进，符合高职学生的认识规律。

“四项目”： “红叶网上书店”项目和“校园超市”电子商务网站项目、个性化电子商务网站项目，源自企业真实的电子商务网站制作项目。

本课程四个模块均以典型的电子商务网站项目为核心，将真实的网站分解到各个教学单元，强化知识点和技能点的训练，各个教学单元独立起来、前后相关、有序叠加，最后整合成完整的项目。

课程模块是以商务网站前台设计的实际工作过程，按工学结合，能力导向来划分的，包含网页设计的制作流程、企业规范、项目规划书的制作、效果图设计、HTML和CSS+DIV理论及实践、 Dreamweaver 理论及实践、网站维护等内容。通过项目教学，企业实训和认证考试来实现学生的综合实践能力。

“行动导向”教学模式强调学生是学习过程的中心，教师是学习过程的组织者、管理者、协调者和监督者，教师是“导演”，学生是“演员”。根据《商务网站前台设计》课程的特点，由项目组成的教学模块均是相对独立、有单独展示的成果，因此，每个教学小模块都按照“资讯、计划、决策、实施、检查和评估” 六步完整的行动过程（六步法，如下图所示）来进行教学。

资讯阶段，教师布置任务，帮助学生理解任务要求；

计划阶段，学生一般以小组方式工作，寻找与任务相关的信息，4制定工作计划；

决策阶段，学生制定的计划，经过小组讨论、论证，集中团队集体智慧，作出决策，形成团队实施方案；

实施阶段，学生根据计划方案完成设计和模拟，作好有关文字记录，教师监督学生学习过程，纠正学生学习偏差；

检查阶段，学生检查和展示工作成果；

评价阶段，自我评价，其他同学提出问题，师生共同评价。

网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。一个好的网页前台的设计，能够给企业带来有利的影响。

参考文献

[1]王伟，叶颖。项目课程的教学设计探讨[J].中国现代教育装备，2007（10）.

[2]蒋庆斌，徐国庆。基于工作任务的职业教育项目课程研究[J].职业技术教育，2005（22）.

[3]刘利华。项目教学法在项目课程中的应用实例及启示[J].安徽电气工程职业技术学院学报，2006（3）.

[4]姜宏。高等职业教育课程改革探讨[J].北京市计划劳动管理干部学院学报，2006（3）.

读书破万卷，下笔如有神。以上这3篇网页设计方案是来自于山草香的网页设计的相关范文，希望能有给予您一定的启发。

网站网页设计2

关键词网页标准化设计 网站建设 CSS

一个优秀、完整的网站是集功能与美观于一体的网页形态。网站的设计并不同于其他公众广告媒体，它不仅需要考虑网页信息的传递，网页与网站之间的协调与配合，同时需要考虑其视觉上的审美要求。因此，必须将网页标准化设计融入网站构建与设计过程中，以web标准化作为指导，设计出优秀、合格的集美观与功能于一体的网站。以下主要介绍了web标准的内容及其在网站建设中的应用。

1 网页标准概述

内涵

网页标准是建设标准化网站的实践方法，包括了网页设计的原理内容、技术规范，对网站设计各方面内容的定义与说明提供了参照的标准。网页标准的内容与其规范是相辅相成的，它的指导范围并不仅仅局限于万维网，同时可以将其中的部分内容拓展至互联网。它会对网站服务器的设计与管理产生一定的影响。网页标准主要由习惯用法、标准及其主体、网页开发工具、非标准和厂商独有技术等要素构成。网页标准化设计的核心便是通过将网页的文档结构与其表现区分开来。网页主要是基于美学意义的角度，将文档内容以美学形式向广大网站读者群体呈现。构成网页文档的要素包括文档的结构、表现及其行为。

优势

将网页标准化设计应用于网站设计中，能够建设标准化的网页结构，构建准确的搜索索引，即使在并不具备良好的技术支持的前提下，亦可向使用者呈现准确、完整的网页信息，同时也可将标准化的网页快捷转化为其他格式，方便用户查阅与拷贝。针对设计者而言，基于网页标准化设计的网站建设，能够将网站的内容与其形式分割开来，能够实现网络代码的重复使用，最大限度地减少设计的繁杂与冗余，加快其开发的\\速率，同时能够有效降低网页建设与维护的成本，降低了网站设计人员的工作强度，便于设计者协调分工，从侧面提升了网站开发的效率。

2 网页标准化设计在网站建设中的应用

HTML语言代码的书写

HTML指超文本标记语言，它是提供网页信息与内容的语言结构。从网页本质的角度来看，网页是通过组织一定的结构来实现其文档内容浏览的平台。因此HTML作为提供信息的主体对象，其代码书写尤为重要。首先，需要选择正确的文档类型。在应用网页标准化设计的网站建设中，通用的标准语言是构成网页文档的要素。因此，为确定HTML的文档结构形式，保障网页解析的正常与其呈现的标准化，需要正确选择网页文档的类型。其次，设定作为文档标记的名字空间。主要是为了强调文档的归属权。例如：若需使用符合XML规范的XHTML文档，则应在文档HTML标签中表现其xmlns属性。通常其代码表示为“html xmlns=‘http：//文档命名空间/xhtml’”。此外，还需正确设计html文档的元信息。将其用来描述网页内容，配合其name属性，设定描述网页内容的关键词，为用户搜索提供便捷。一般可以将网站的文件头http-equiv属性与其content属性进行融合，构建其编码信息与其网页的具体语言。另外，还需将所构建的网页语义化。以保障网页在没有相关技术支持的前提下亦能够将有效信息显示完备。

选用CSS语言设计网页的表现

CSS主要是用于表示网页文档样式的语言。该语言的具体语法主要是由选择器及声明两个部分构成。其中声明又是由其对应的属性与值构成。以p{color：green；font-size：16px；}为例，此定义的作用，即将p元素范围内文字的颜色设定为绿色，并将该范围内字体的大小设定为16像素。其中颜色与字体大小为属性，p是其选择器，而green、16px则为其具体值。CSS选择器的类型主要包括类选择器、ID选择器、伪类选择器，组合选择器、继承选择器、标签选择器等。因此在设计CSS时，需要根据网站建设的实际情况，选择对应性的选择器。必须注意，虽然ID选择器与类选择器存在一定的相似点，但依然需避免在针对网页布局设计时，过多地运用div+CSS结构。比较ID选择器与类选择器的差异，虽然两者均为xhtml文档中标签的制定样式，但在同一个xhtml文档中，ID选择器不可重复利用，是一对一的标签指定形式。另外，随着当前智能手机、平板电脑更新换代的速度不断加快，网页浏览器的服务端口也在迅速增多，由于不同服务端口对浏览器web标准的默认值不尽相同，因此，还需注重网站兼容性的设计，对于不同的网站端口选择不同的CSS解析方式，保障其兼容性。

3 结束语

参考文献

[1]李岩，王静。网页标准化设计在网站建设中的研究与应用[J].电子制作，2013（06）.

[2]郭文波。基于用户体验的标准化网站设计与开发流程研究[D].上海师范大学，2012.

[3]潘泽乾。论网页设计与网站建设的创意与实施[J].齐鲁艺苑，2009（04）.

[4]李克锋。谈色彩在网页界面设计中的应用[J].电子技术与软件工程，2014（02）.

作者简介

李克锋（1980-），男，河南省镇平县人。助讲职称，大学本科学历。研究方向：硬件维护、软件应用及网络。

常见的网页设计范文3

关键词 中职 网页 Dreamweaver Photoshop flash JavaScript

中图分类号 G712 文献标识码 A 文章编号 1992-7711（2014）03-114-01

网页的前台设计属于设计的范畴，因其所涉及的理论知识不深奥，市场前景广阔，且工资待遇也比一般的平面设计要高得多，因此在中职学校开设网页前台设计专业具有可行性和推广性。笔者从事中职网页前台设计专业教学已经有三年之久，一直在这个专业上辅导学生参加省市技能比赛，并且指导的学生也曾多次在比赛中赛出佳绩。下面我就谈谈网页前台设计专业的教学目标、教学方向、教学方法及相关学习资料。希望可以给广大热爱网页设计或从事网页教学的朋友们一些帮助。

一、明确教学目标

作为中职生，普遍存在文化基础相对薄弱的问题，所以在教学中一定要先抛开复杂的代码分析。从学生感兴趣、易理解、能就业方面入手，制定切实可行的教学目标。

能设计出美观大方、合乎逻辑、界面友好的页面设计草图。能借助PS软件对设计出的草图进行文件生成，生成跟设计草图一致的网页PSD效果图，并科学完成切图操作。能用flash软件制作出网页中常见的动画（尤其是banner动画）。能通过Dreamweaver 软件合理布局站点，并把相关媒体进行有效的整合，生成与PSD效果图一致的网站页面。在网页中加入常见的JavaScript代码，给HTML网页添加动态功能，从而实现响应用户的常见操作。

二、科学开设相关课程

网页前台设计要开设什么课程？每门课程有什么作用？这些课程如何整合？成为了学习者共同关心的问题，因为这关系到学习到的技能能否和市场接轨的问题。

（一）美术基础与网页赏析。任何美的东西均有其原理所在，学生通过对素描和色彩的学习，美感得到了增强，设计出的网页效果图有了理论依据，更符合大众的品味，加上欣赏过成千上万个优秀网站的界面，对自身设计网页PSD效果图奠定了理论基础。

（二）Photoshop软件生成网页PSD效果图。Phtoshop软件在图像合成与图像制作领域中功能强大，我们不但能使用该软件对网页中的图片进行处理，而且能对制作出的网页PSD效果图进行切图操作，切出的小图片文件可以保存为JPG或gif格式，对于网页中的较多背景图像，我们只需切成一个象素宽、一个象素高或宽高均为一象素的小图像即可，大大减少了网站占用的空间，提高了网页下载浏览速度。

（三）flash软件制作出网页中常见的动画。Flash软件生成的二维动画，因其占用空间小等原因，在网上大为流行。对于学好网页中的flas，一是要熟练掌握好工具箱中工具的使用，达到利用工具绘制简单图形的能力；二是通过举一反三的方法，掌握好制作帧帧动画、形变动画、运动动画、引导层动画、遮罩层动画等原理与制作方法。可以多浏览网页中的flas，然后进行分析再制作。

（四）Dreamweaver软件整合网页元素生成网页文件。Dreamweaver软件可以把文字、声音、视频、动画等媒体整合在一个网页之中。学好此软件可以分成为以下几步：找一本较为基础的书或一部视频教程，进行Dreamweaver软件操作的学习，在学习中注重html、css代码与生成的网页元素的对应；利用Dreamweaver的代码视图手写代码并注重与设计视图中元素的对应关系，主要目的是为了深入学习html代码与css代码；学习DIV+CSS网页布局方法，为自己的网页设计生涯开启标准化的大门。

（五）JavaScript代码的套用。JavaScript代码对中职生来说较为复杂，但是很多JavaScript代码在网络上都可以免费下载，学生仅需掌握其结构及其套用方法，从而使自己开发出的网页达到动态交互即可。

三、教学中的一些教学方法

（一）多鼓励学生。德国教育家第斯多惠说：“教学艺术的本质不在于传授的本领，而在于激励、唤醒、鼓舞。”教师想方设法让学生能喜欢上这门课程，可以多拿一些成功的人或事激励学生，对于一些不认真听课的学生，更要多多关心与谈心，做到在思想上感情上赢得学生。

（二）把自己的讲课思路记录或录制下来。讲课讲得慢，条理清楚，让大多数学生能跟上老师的思路，这已是老生常谈。但作为一门专业课，我建议，授课老师可以借助记事本软件把自己的讲课要点采用边讲边敲的方式记录下来，或是通过屏幕录像专家软件录制自己的讲课视频，然后发到每一位学生的电脑上，这样学生就可以在练习时跟上老师的思路，增强学习的信心。

（三）请教学科中的“专家”来帮忙。如今是一个网络时代，网络中的资源非常丰富，各类专家均或多或少在网上视频教程，各位朋友可以多去学习；另可以多参阅网页前台的网上论坛，取长补短、拓宽视野不断提升自身的技能水平。

[ 参 考 文 献 ]

[1]《2009年北风网李炎恢讲师Xhtml+css视频教程+项目视频》.

[2]站长好站（http：///shipin/photoshop/）中刘明轩讲师的《PS网页设计视频教程》.