高级网页设计篇1
关键词：网站结构；网站建设；网页设计
中图分类号：tp393文献标识码：a文章编号：1009-3044(2008)27-1925-02
DiscussionaboutSiteConstructionandplanning
wUBin
(anhuiUniversityofScience&technology,Huainan232001,China)
abstract:today,internetdevelopsveryfastanditplaysanimportantroleinpeople’slives.Siteconstructionhasbecomeanimportantcomponentofthegovernments’andenterprises’informationconstruction.thispaperdiscussesthesiteconstructionandplanningfromcontents,structuresanddesigns.
Keywords:sitestructure;siteconstruct;webdesign
在internet飞速发展的今天，互联网成为人们快速获取、和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用，是人们生活中不可缺少的一部分。人们在网上看到的新闻、广告、图片、电影等等信息的是通过网站来实现的，下载电影、歌曲、软件等等也是按照一定的检索方式将需要的信息从网站上下载下来。因此，网站建设在internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分。那么如何建设一个好网站呢？本文将从以下三个方面加以阐述。
1内容的设计
一个网站最重要的是内容，其次才是其网页设计。internet访问者可能会在一个内容充实，设计相对较差的网页逗留半天，但是不会在一个设计独特而内容不充实的网页浪费十分钟。怎样才算是好的内容？首先必须明确此网站设计的目标，然后围绕这一目标收集材料。我们知道网站有多种类型，比如：综合性网站、公司或单位的信息、出版物、个人主页、网上购物等等。根据要建设网站的类型，浏览网页的对象及设计要求来收集材料，要做到“标新立异”。
2网站结构的规划
在明确网站设计的目标及内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。常用的网站结构类型有以下三种。
2.1分级结构
分级结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。主页是对整个网站文件的概括和归纳，同时提供了与下一级的连接。分级结构具有很强的层次性。
2.2线性结构与分级结构的结合
线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。而线性结构与分级结构相结合则充分利用两种结构各自的特点，使网站文件既具有条理性，规范性，又可同时满足设计者和浏览者的要求。
2.3web结构
web结构类似于internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。现在大多数网站都采用这种结构。其结构图如图1。
除了设计网站结构外，还应注意网页文件的存放。例如把图像统一放在images目录中，音乐放在music目录中等等。这样不仅提高了网站运行效率，也有利于网络维护。
3网页设计与制作
确定好内容和网站结构以后，下一步就是具体来做网页。首先进行简单的版面设计，根据本人的经验，用纸和笔作草图是最省时快捷的方法。其次，根据设计好的版面选用制作工具做页面。
目前制作网页的工具软件大致分为页面编辑工具、图像处理工具、数据库管理软件、脚本编程语言等，根据实际需要选用有效的制作工具。
在做页面的时候应注意以下几点。
1)主页的设计
主页作为网站文件的首页，在整个网站中具有举足轻重的作用。主页要能体现网站的总体概念，使人一目了然，而且应该集中以下各级的连接，使用户可以迅速转入感兴趣的网页中去浏览。
2)慎用图像
一幅好看的页面，应该有适量的图像。但是，图像的使用要与内容搭配起来。背景图像切不可使用容量太大的图像。另外，背景跟文字的颜色应有较强的反差。
3)不应在每页中插入太多的广告
相信任何访问者都不会喜欢浏览尽是广告的页面，要考虑该页面内容与广告的比例，摆放位置也很重要。
4)页面分辨率的设置
由于浏览者机器的分辨率并不统一，常见的有800x600，1024x768等。所以在做页面的时候最好做两种分辨率的页面。每种分辨率首页页面的html中加入识别机器分辨率的语句，这样，根据浏览者机器的分辨率自动选择相应分辨率的页面。
5)每页排版不要太松散或用太大的字，尽量避免访问者看网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。
网页内容编辑好后，在本地计算机上调试运行，正确无误后利用网页上传工具将整个网站文件夹传到网络空间里。这样互联网上的用户根据域名地址就可以浏览到你的网站了。
相信大家从以上三个大方面考虑规划、设计自己的网站，在不断探索，实践中提高审美观和设计能力，一定能做出令大众满意的网站。
参考文献：
高级网页设计篇2
（福建广播电视大学晋安校区福建福州350003）
摘要：根据多年对“网页设计与制作”课程的教学探索，提出“课程案例”这一新概念，并设计开发出一个学生既熟悉、又感兴趣的“课程案例”——班级网站，让学生在模仿再开发该案例网站的过程中学习课程知识，从而掌握本课程的知识和运用技能，达到教与学的良好效果。
关键词：网页设计与制作；课程案例；班级网站
中图分类号：G712文献标识码：a文章编号：1672-5727（2014）11-0093-03
作者简介：王淑云（1965—），女，福建福州人，福建广播电视大学晋安校区高级讲师，研究方向为计算机软件。
中职生的共性就是对缺乏学习兴趣。笔者通过多年的课堂教学体会到：如果有一套行之有效的既适合中职生实际水准、又贴近他们学习生活、能激发他们学习兴趣的案例贯穿于整个课程教学，就有可能解决这个问题。基于此，笔者提出了“课程案例”这一新概念，设计并开发出一套“课程案例”应用于“网页设计与制作”课程教学中，学生通过案例的模仿再开发，全面掌握“网页设计与制作”课程知识与技能的基本要领，从而实现课程的教学目标，培养学生的网站开发和设计能力。下面详述这一“课程案例”教学的设计及所进行的课堂教学。
“课程案例”的提出和设计
（一）“课程案例”这一新概念的提出
市面上相关教材比比皆是，但从其所提供的案例方面看，没有比较适合中职学生的：要么网页主题让学生很陌生，要么网页页面设计太复杂，中职生很难掌握，而且其中的案例多是针对某一知识点或某一章节设计的，属于“知识点案例”或“章节案例”，是零碎知识，不能贯穿整个课程知识教学。所以，教科书只适合作为本课程理论知识点的参考资料。“网页设计与制作”是一门技能型课程，重要的是要教会学生如何去构建和设计一个完整的网站，而不是空泛地谈一些理论知识。“课程案例”区别于“知识点案例”或“章节案例”之处在于：该案例贯穿于整个课程教学，覆盖课程包含的所有知识，课程知识的学习以“课程案例”为线索进行，学生模仿再开发设计完该案例，课程的所有知识学习也已结束。笔者思考并设计这样的“课程案例”，并对教材进行如下处理：提炼教材所提到的知识点，将其重新排列组合，按由浅入深的学习顺序，将课程知识点结合到自主设计的“课程案例”中，分模块渐进教学，整个教学过程注重学生自身思维的开发，将个体集美术设计、课程知识学习和课程实践三者紧密结合，将学生各方的能力逐渐激发展示出来。
（二）围绕学生的兴趣进行“课程案例”的设计
学生对一门应用型技术课的学习如没有兴趣，可能是没有一个令他们感兴趣的实例吸引他们渐次深入学习，从而引导他们学习掌握课程知识。班级是校园学习生活的一个集体，班级网站中所记录的人物、活动都是学生身边的人和事，网站的主题反映的正是他们的校园生活。如果把班级网站作为教学案例，让学生以自己的学习生活为主题组建成网站，一方面能引起他们极大的学习兴趣，另一方面，作为同一个班级的学生，在设计本班级的网站过程中，能够创造很多互相交流的机会，培养互相学习的精神，也能加深同学间的友情。所以，“班级网站的设计与创作”是一个理想的课程案例。笔者应用模块教学法，将理论知识与该课程案例完美结合起来，在近似实践的学习过程中培养学生的学习兴趣，让他们在兴趣中学、在学习中增添兴趣，从而在良性循环中完成课程学习。
再考虑学生的能力方面，他们已经有了对文字、图片和表格的基本处理能力，还学过或同步学习photoshop、flash、计算机网络基础等相关课程，所以，只要对网页素材的处理提出具体的要求，或对他们略加指导即能自行设计处理完成。对于该课程，虽然大部分学生浏览过很多网站内容，但并没有真正了解网站是怎么回事；对互联网世界充满兴趣和好奇，却还没有网页设计与制作的理论知识和实践技能，对网站常识还比较陌生。因此，在课程学习中，重点是要力求深入浅出、尽可能直观全面地剖析一个好的网站案例，运用视、听的方法，帮助学生建立有关网页设计与制作的基本概念和基本知识，掌握建设网站的基本技能。
鉴于此，教师如何将Dreamweaver、HtmL和CSS三部分内容有机结合，让学生通过课程学习，模仿再开发出一个比较完整的“班级网站”，着力培养学生的实际建站能力、设计开发能力，从而提高他们自主学习与创新能力、信息收集与处理能力、提出问题并分析问题和解决问题的能力，成为课程教学的重要目标。
“课程案例”教学方法的设计
教学手段以“多媒体机房、网络、项目开发”三项结合。多媒体机房为学生设计网站提供基本条件，网络是学生寻找素材资源和借鉴别人经验的空间，项目开发是他们学习的任务。
教学方法上，采用示范讲解、任务驱动的教学模式，从以下三个方面展开：
采用案例讲解的教学模式教学过程根据编排好的知识点内容和事先创建好的“班级网站”实例，逐步讲解该“课程案例”，便于学生理解和进行模仿设计开发。
实施模块化教学方法遵循学生“由浅入深，循序渐进，由感性到理性”的认识规律，把知识点组合后分模块渐进教学。教学过程讲练结合，以学生实践为主，完成“班级网站”这一“课程案例”中包含的每个模块的再设计与再创作；以教师引导为辅，讲解设计与创作过程中遇到的新知识，组织学生完成能力拓展训练。
走四步教学流程，融“教、学、练”于一体第一步，教师展示课程案例，演示创作过程，讲解涉及的知识点内容；第二步，下达任务，提出完成任务的具体要求和完成时间；第三步，学生模仿再设计再创作，完成任务；第四步，任务验收，学生自我评价，教师综合讲评。
“课程案例”的课堂教学
基于学生的现有知识技能，教师课程教学中重点讲授如何设计开发网站，在其他环节只扮演一个组织者和启迪者的角色，一步步引导学生完成本课程的目标，充分培养和发挥学生的自主设计能力、绘画能力和创新能力。
整个课程的课堂教学以“课程案例”为主线，设定以下几个教学模块。
模块一：学习有关网页的基本知识，介绍建设网站的工具等。
模块二：草拟“网站地图”，设计网站“模板页”。展示课程案例网站，分析班级网站的风格、页面的布局和包含的元素，先给学生一个真实的空间印象，之后让学生模仿如何设计这样的网站。首先设计出纸质的网站空间布局和内容：包括考虑整个网站的风格、主色调、页面布局、页面的大概内容等，每一个页面设计草拟在一张纸上，其实这就是网站地图了。做足了这个功课，日后的整个班级网站的设计就有了头绪。为避免各页面出现相同内容的重复设计，提出设计制作“模板页”来生成其他页面。例如：把风格和内容相一致的部分（如班级广告图、班级徽标、导航条、版权信息等）设计出来，作成模板页保存下来，以备后面制作网站各页面时利用模板页生成，并在此基础上进行相应页面内容的设计创作。草拟“网站地图”和设计制作网站“模板页”是同时进行的，要结合着做。这个阶段都还是“纸上练兵”。
模块三：收集和创作素材。班级网站的素材主要来源于学生自己的学习生活，可以是活动的照片、活动记录，也可以是为自己班级创作的班级广告图、班级徽标等Flash或photoshop作品，将这些素材分门别类放入建好的站点目录树中。
模块四：学习Dreamweaver，首先建立班级网站站点。
模块五：设计创建“模板页”。根据前期草拟的网站地图，利用布局表格设计模板框架。框架搭好后就是为模板页添加素材。模板上需要的素材并不太多，关键是要“精”，用精心选择和创作的素材。提醒学生，模板上大块的空间要留出来给各页面添加相应的内容，这点至关重要。
模块六：利用模板生成网站各页面。模板设计成熟并制作出来后，就要根据模板上的导航设计生成相应的页面，并将各页面互相链接起来。
模块七：完善各页面内容。每一两次课完善一个页面的内容，直到网站中各页面内容全部添加完成。当然，课后要为如何合理安排这些页面内容花很多时间去构思、去创作或收集相应的素材。所以，收集素材这项工作是一直贯穿于整个网页设计过程中的。
模块八：应用一些网页特效的代码，如添加背景音乐、QQ互动、图片文字的滚动、表单等，让页面动起来，增加网页的吸引力和活力。
模块九：本地站点测试。
教学评价设计
评价方案（1）学生自我评价：即每个学生对自己的评价。教师事先给出评价标准和具体要求，学生对照自己的学习态度、创作的作品，对自己给出合理评价。（2）模块作品评价：教师对每个学生的评价。教师通过对学生课堂反映、每个模块上交的作品、讨论活跃程度等方面，对每个学生进行评价。（3）期末考核：教师通过对学生一整学期模仿再设计创作的“班级网站”进行评分，考核学生的实践与动手的综合能力，对学生进行合理的评价。
成绩评定按出勤率、模块作品成绩、成熟作品成绩加权考核。
结语
在“网页设计与制作”课程案例的课堂教学中，笔者采用的是兴趣教学和让学生贴近实战的方法，以保持学生对知识探索的兴趣并提高学生的动手能力。这种教学的重要前提是要设计一个好的案例，“好”的标准是内容贴近学生的学习生活、设计难度又适合他们的实际水平，“班级网站”这一课程案例便是好案例之一。此外，在教学过程中，笔者为学生提供了十分丰富的信息资源，教会他们信息资源该如何收集、从哪里获取、以及如何有效利用等知识。
参考文献：
[1]刘瑞新.网页设计与制作教程[m].北京：机械工业出版社，2010.
[2]唐乾林.网站界面设计案例教程[m].北京：机械工业出版社，2011.
[3]尚俊杰.网络程序设计——aSp[m].北京：清华大学出版社，北方交通大学出版社，2009.
[4]赵丰年.网页制作三剑客操作互动[m].北京：人民邮电出版社，2011.
[5]赵丰年.网页制作技术——DreamweaverFlashFireworks[m].北京：人民邮电出版社，2003.
[6]马月.网站界面设计[m].北京：北京理工大学出版社，2006.
高级网页设计篇3
关键词：页面模板；；网站设计；数据库；信息
中图分类号：tp393文献标识码：a文章编号：16727800（2012）008015203
作者简介：刘冰峰（1986-），男，中国人民63892部队助理工程师，研究方向为软件技术与数据库；胡然（1986-），男，中国人民63892部队助理工程师，研究方向为软件技术与数据库；刘丽（1983-），女，中国人民63892部队实习研究员，研究方向为软件技术与数据库。
0引言
随着现代信息技术的发展，网络在信息传播的过程中发挥着越来越重要的作用。无论是企业、学校或者政府部门都开始通过建设网站的方式对外界信息，并进行交流。与此同时，网站建设的技术也在不断地发展进步，从纯手工编写静态网页到动态网页生成技术，从借助Dreamweaver等软件实现页面可视化设计到利用网站内容管理系统（CmS）进行网站定制。本文基于动态网页建站技术，利用、C#、DiV+CSS等技术实现对页面的模板化设计，页面显示样式与内容完全分离，消除了传统动态网站灵活性不足的问题，允许对网站的全部栏目及内容进行控制，实现了一种简单易行的建站方法。
1技术应用
网站开发主要使用技术，开发环境为microsoftVisualStudio2010。是Framework的一部分，是一种可以在高度分布的internet环境中简化应用程序开发的计算环境。.netFramework包含公共语言运行库，它提供了各种核心服务，如包含内存管理、线程管理和代码安全。它也包含.netFramework类库，这是一个开发人员用于创建应用程序的综合的、面向对象的类型集合。相比其它的web技术来说，技术能够更快速、更容易地建立灵活、安全、稳定的web应用。
1.2DiV+CSS
页面布局使用DiV+CSS技术。CSS（CascadingStyleSheets，层叠样式表）是一种制作网页的新技术。它是一种设计网页样式的工具，能够增强网页样式控制并允许将样式信息与网页内容分离。DiV+CSS具有如下几项优点：方便网页格式的修改、便于减少网页体积、能使网页元素更准确的定位、良好的适应性。
2网站总体设计
2.1网站功能设计
本文主要针对的是信息类型的网站，案例为某国家重点实验室。根据信息的需求，主要进行了如下功能的设计：①介绍实验室基本情况，展示实验室资质和获得荣誉；②对外实验室新闻，展示实验室最新动态以及通知；③展示实验室科研环境和技术实力，允许其他科研群体对限定设备提出使用申请；④对外介绍实验室的研究方向；⑤对外展示实验室的人才队伍建设情况和专家信息；⑥对外开放性课题，举办会议，介绍交流合作模式和现状；⑦后台管理功能，通过后台管理页面对前台显示内容进行编辑。
根据功能的划分，对网站栏目进行了设计，分为前台显示和后台管理两类。前台显示为普通用户访问网站时所见到的显示页面，用于实验室对外展示和信息，主要由首页、搜索页面和6个一级栏目页面组成。6个一级栏目为：走进实验室、新闻动态、研究方向、科研实力、研究方向、合作交流，且一级栏目下又包含相应的二级栏目。
后台管理是管理员用户对网站内容进行管理时显示的页面，主要实现了对栏目类别的添加、编辑和删除，以及对各栏目文章的管理。主要包括：登陆、网站管理页面、管理员管理页面以及与前台6个一级栏目对应的管理页面。
2.2数据库设计
数据库设计主要是通过对数据间的关系进行分析和研究，从而设计出合理、高效的数据存储结构。由于网站所涉及数据库较为简单，为简化设计，使用access数据库来存储系统的数据。数据层结构设计如图1所示。
图1网站数据库结构
网站数据库包含5个数据表，分别为：gsclass、gscontent、link、user、contact。gsclass表用于存储网站栏目类别，gscontent表用于存储网站栏目内容，link表用于存储网站首页显示的友情链接，user表用于存储网站管理员用户信息，contact表用于存储网站联系方式。
网页通过后台调用预先定义的类对数据库进行操作。定义的类主要包括数据库访问类、实体类、业务逻辑类3种：①数据库访问类用于实现对数据库的添加、删除、更新等操作；②实体类用于对信息和相关行为建模，以其属性说明自动提取数据库字段的描述信息；③业务逻辑类用于实现简单的功能性操作。
2.3页面模板设计
网站的页面模板分为前台显示与后台管理两类，且前台显示页面模板与后台管理页面模板存在对应关系。通过设定数据库gsclass表中aim列的值，每个二级栏目都与一类前台显示和后台管理页面对应。
2.3.1前台显示页面
Default.aspx：网站首页。
Search.aspx：搜索结果显示页面，将根据搜索内容从数据库中获得查询结果以列表的形式显示。
Search_more.aspx:搜索结果的跳转页面，根据搜索结果所归属的栏目跳转到该栏目详细内容页面，仅执行跳转过程不进行显示。
高级网页设计篇4
关键词网页制作教学方法分层次教学实例性教学和任务驱动式教学
中图分类号：tp311文献标识码：a
1引言
随着计算机技术和internet的高速发展，电脑的日益普及，网络已经越来越融入我们的日常生活中。而我们平常在网络中接触最多的就是网页。现在我们所看到的网页已经是集合了多项技术，其中包含了文字、图片、音频、视频、动画等方面的内容，另外还有包含了编程代码的交互式网页，以及带有数据库的交互式网页。人们对网页的要求已经不仅仅局限于单项技术的表现，更多的是重视多项技术的整合效果，既要求网页的下载速度快，便于浏览；又要求页面的设计能引人注目，多姿多彩。这对《网页制作》的教学就提出了更高的要求，而在实际教学中又存在以下的几个问题：
（1）《网页制作》涉及的知识非常广泛，是一个庞大的体系，包含了网络基础、平面设计、动画设计、编程等学科的知识。从网络基础来说要求首先懂得internet的基本知识及应用，懂得使用Ftp或weB上传网页到服务器；从平面设计来说包含了图片处理、色彩搭配、文字样式等的知识；从动画设计来说需要懂得FLaSH动画、GiF图片的制作等；从编程来说需要对HtmL和在aSp、JSp、pHp等编程语言中至少一种有所了解。要在短时间内把这么多门课程的内容都讲授完是不现实的，若是每个内容都面面俱到，则学生会觉得什么都学了，但又什么都没有学懂。
（2）不同专业的学生由于学习程度，专业设置等方面的不同，学习起来存在差异性。
（3）学生对于制作网页都有强烈的兴趣，但是由于多数教材都是根据网页制作软件的不同功能划分成各个章节，然后按章节对各个部分进行单项练习，不少学生都在这种枯燥的单项练习中渐渐失去了学习的兴趣和动力。
2存在问题的分析以及教学方法的探讨
2.1采用分层次教学
本人在近两年的教学过程中，曾分别担任了计算机应用技术和电子商务两个专业的《网页制作》课程的教学工作，对于上面提到的前两个问题深有体会。我在教学的过程中发现由于两个专业学生的基础不同，专业设置的课程不同，学习起来存在差异性。计算机应用技术专业的学生是在第五学期开始学习本课程，在此之前已经学习过了《网络基础》和《C语言》两门相关的课程，对于网络和编程有了一定的了解和基础，且同步开始在学习《photoshop》和《Flash》两门课程，对于图像和动画制作方面已有所了解。而电子商务专业的学生是在第三学期开始学习本课程，在此之前只上过《计算机应用基础》和《电子商务》两门稍微沾边的课程，同步学习的则有《网络基础》一门相关的课程。显而易见计算机应用技术专业的学生具有比电子商务专业的学生更好的基础，且已具有简单的图像处理和动画制作能力。
为了使不同专业不同层次的学生更好的学习《网页制作》这门课程，根据各个专业对计算机知识掌握的程度不同，不同专业对网页的要求不同可以把教学大致分成三个层次，即初级、中级和高级。对于不同层次的学生提出不同的要求，设定不同的教学目标，使每个学生都能学好这门课程。
初级是要求学生掌握网页设计软件的使用，能制作简单的个人网站。懂得使用一些常用的代码为网站增加一些特效，使其功能更强大，更美观。也要求学生具有一定的图片处理能力，但只限于使用系统自带的画图工具。
中级要求熟练使用网页设计软件、图片处理软件及动画设计软件制作网页，能针对不同的对象及要求制作相应类型的简单动态网站。这里还不要求学生具有编程能力，但要求学生能正确使用他人已经编辑的代码或是应用程序。
高级要求具备网站规划与管理能力，掌握一至两门网络编程语言，例如aSp、pHp或JSp等，能制作例如电子商务网站等带数据库的动态网站。
根据计算机应用技术专业学生的情况应对他们提出中级的教学要求，而对电子商务专业的学生则提出初级的教学要求。当然对于计算机应用技术专业中学习能力较强的学生，可以提出更高的教学要求，而对基础较差的学生则可以适当再降低一些教学要求。电子商务专业也是同样的道理。采用这种分层次教学一方面有利于学生更好的对本课程进行学习，也可以有效的防止学生因为觉得学习难度太大而放弃对本课程的学习；另一方面可以有效的发挥跨学科之间的教学合作。例如计算机应用技术专业的教学就可以与《photoshop》和《Flash》课程的老师进行合作，安排学生制作相同主题的图片，动画和网页。学生不再是单纯的上网找素材，他也可以自己制作图片，制作动画，然后使用到他自己制作的网站中去。
2.2采用实例性和任务驱动相结合的教学方式
网页制作与其它计算机软件的教学相比，无论是教学思想、教学方法，还是教学手段、考核方式上都有其特殊之处。教师在教学中，采取怎样的教学方法才能激发学生的学习积极性、提高教学质量呢？现代教育理论告诉敌们；强调发展、突出能力、教为主导、学为主体.激发兴趣、主动学习应是教师在教学中遵循的原则。
在教学的过程中，我发现不少学生对于网页制作都怀有浓厚的学习兴趣，但是对于教材中一味的安排进行枯燥的单项练习又十分反感。因此在教学中我采用了实例性和任务驱动相结合的教学方式。
采用实例性教学方式，可以让学生真正地接触到一些优秀，完整的网页，开拓学生的视野。先让学生模仿制作一些优秀的网页，使他们在边学习边动手的过程中，发现问题和解决问题，学习他人的网站设计的思路和设计风格。通过成功的模仿不但可以使学生建立起信心，还可以使学生提高网页制作和网站设计的技巧和方法，从而提升了学生的学习效果。
在实例性教学的过程中结合任务驱动式教学，把枯燥的单项练习有机的结合到实例制作中去，让学生在模仿实例的制作过程中，也完成了对各个单项的练习，这样即达到了练习的目的，又有效的激发了学生的学习兴趣。在开始本课程的学习时，就明确告知学生会在课程的最后阶段要求他们独立制作一个网站，并且会在机房的服务器中建立虚拟空间保存他们的的网站，这样每个同学都可以在学生机上浏览到每个人的作品。一方面可以以此来检验学生的学习效果，另一方面也使学生有自由发挥创意的空间，有展示自己的舞台，可以促使他们更加用心的去学习这门课程。
3结束语
以上是本人在《网页制作》课程的教学中对于教学方法的一些总结和探讨，我将继续努力以使这门课程的教学日趋完善。
参考文献
[1]王忠元.浅谈职业学校教学模式的创新[J].武汉职业技术学院学报，2006（2）.
高级网页设计篇5
abstract：accordingtothelimitationofthetable-layoutoftheuniversityGatewaywebsitesystem，suchastheslowdownloading，blurringpagecodeandhighmaintenancecostsetc，thispapeputsforwardadesignschemefortheuniversitygatewaywebsitesystemusingDiV+CSStechnology.andtheexperimentsshowthattheDiV+CSSlayoutwouldbemoreflexiblethanthetablelayout.
Keywords：DiV+CSSpageLayout；tablepageLayout；UniversityGatewaywebsite
0引言
高校门户网站是日常教学信息、提供学生选课服务、展示高校各类教学科研成果的综合性平台。目前，很多高校门户网站的页面布局采用的仍然是传统table表格布局方式。表格布局在weB2.0问世之前是比较通行的页面布局方式，但是随着网络技术的快速发展，这种布局方式的弊端逐渐显现出来。该种表格布局方式将网页的主体内容和页面表现格式混搭在一起，导致网页代码结构不清，不利于网页的设计和网站的维护。表格布局的浏览速度也比较慢，表格布局所在的网页要在表格中的所有元素下载完毕后才能显示完整的页面内容。
DiV+CSS页面布局技术的出现克服了表格页面布局方式的上述不足。采用DiV+CSS网页布局技术的高校门户网站的页面代码，可将页面的内容和页面的表现格式进行分离[1]，这将使得高校门户网站的项目代码更加清晰，方便开发者阅读，有利于日后网站的升级和维护。DiV+CSS技术在提高网站下载速度的同时，也能够使高校门户网站更具亲和力，并且能够提升高校门户网站日后的浏览器兼容性[2]。
1DiV+CSS页面布局技术
CSS（CascadingStyleSheets）层叠样式表又称级联样式表，是由w3C的CSS工作组策划提出的[3]。CSS在网站设计中主要负责网页内容的格式显示和布局方式。层叠样式表是一种不需要编译的标记语言，可以直接由浏览器执行，因为CSS属于浏览器解释型语言。CSS在网页排版方面表现非常优秀，使用CSS不仅可以控制网页文字的大小、网页文字颜色、网页文字对齐方式和网页文字字体类型等文本格式，还可以控制网页文字行高、字母间距、英文字符大小写等段落格式，同时也可以控制文本的第一个字或第一行的样式。网页开发者可以将自己所创建的样式规则应用于整个网站的所有网页文件，这样就能实现在任何时候均可寻获需要更改网站内容的格式，如字号增大，或是需要改变正文的字体，并且只需要更改对应的样式表中的CSS属性值即可。
CSS标记语言的代码应用于网页一共有四种方式：直接在HtmL标记的Style属性中存放CSS代码；写入网页Head标记内的内部样式规则；嵌入外部样式规则和链接外部样式规则。这种外部样式规则是把CSS代码放在一个独立于网页文件的普通文本文件中，该文本文件要求必须使用css作为文件的扩展名。外部样式表使得网站开发者可以通过简单地更改CSS文件，从而实现改变网页的整体表现形式的目的。如此一来，就节省了网站维护成本，也提高了网站的维护效率，更使得只要通过操作一个CSS文件就可以改变整个网站页面的外观风格和布局方式。
DiV（Division）标记是一个容器型标记，可以利用该标记来进行网页的布局。一个网页可以由若干个这样的DiV容器组成，每个容器都对应于网页的一个独立模块。DiV容器和其它HtmL标记一样可以通过CSS进行控制。级联样式表可以控制DiV容器显示大小、背景颜色、背景图片、正文字体类别、正文字体大小以及DiV容器所定义的模块在网页当中具体的摆放位置等[4]。
DiV+CSS布局方式的思路是首先使用DiV容器标记，将网页划分成几个模块，每个DiV标记可以对应一个独立的网页模块[5]。其后把页面的内容元素分别放入所对应的DiV模块中，再通过CSS规则来控制每个容器模块的样式，并采用CSS边框属性（Border）、填充属性（padding）、边界属性（margin）和浮动属性（Float）来控制容器模块间的相对位置，最终确定相互之间的布局方案和位置关系[6]。
2采用DiV+CSS技术的高校网站系统分析和设计
高校门户网站系统从功能上划分共分为以下几个模块：首页、学校概况、机构设置、师资队伍、人才培养、科学研究、国际交流、学生工作、招生信息、就业指导和公共服务。各模块的详细结构即如图1所示。
（1）网站LoGo区域：用来显示高校名称和其LoGo标志图片。
（2）网站导航区域：以导航链接列表的形式显示网站的各个功能模块超链接。主要链接内容包括首页链接、学校概况链接、机构设置链接、师资队伍链接、人才培养链接、科学研究链接、国际交流链接、学生工作链接、招生信息链接、就业指导链接和公共服务链接等。第4期刘松：采用DiV+CSS技术的高校门户网站系统分析和设计智能计算机与应用第4卷
（3）网站主体区域：使用无序列表UL标记的形式显示高校的学术活动信息和校园公告信息。
（4）网站新闻区域：显示高校的近期新闻列表。
（5）网站友情链接区域：显示了各兄弟院校网站的链接信息。
（6）网站版权信息区域：展示了高校门户网站系统的版权信息和该高校的具体联系方式及所处地理位置信息。
3采用DiV+CSS技术进行页面结构设计的优势
经过实际运行的使用效果表明，DiV+CSS布局相对传统的表格布局掌握起来要复杂一些，因为在这种方式下，控制各布局的DiV层都是通过大量CSS规则代码来实现的。但是DiV+CSS这种页面布局方式一经开发者熟练掌握之后，则会比表格布局更加灵活实用。现对其表现出的设计优势具体表述如下：
（1）采用DiV+CSS技术进行页面结构设计的高校门户网站网页，在调整各网页容器模块之间的相对位置时比较简单。因为各DiV模块间是相对比较独立的，不受其它模块的影响。
（2）采用DiV+CSS技术进行页面结构设计的高校门户网站网页的页面格式更改非常有效。DiV+CSS模式下网站的内容代码和格式代码是相分离的，因此在调整和维护时高校门户网站的布局结构和显示格式修改更加简便有效。
（3）采用DiV+CSS技术进行页面结构设计的高校门户网站网页，由于涉及的各布局DiV层可以依次下载显示，因此其网页的访问速度会比表格网页布局方式更为快速。
（4）采用DiV+CSS技术进行页面结构设计的高校门户网站网页对浏览器的兼容性高。因为DiV+CSS网页布局方式符合w3C标准的特性，使得该技术可以实现对浏览器软件的向后兼容。
（5）DiV+CSS页面结构设计方式相比于表格布局方式，更加方便搜索引擎有效定位、使得在万维网上快速搜寻高校门户网站成为可能。
高级网页设计篇6
【关键词】：网界面；设计；应用；体验；
1、网页界面设计的现状和问题
近年来，随着网络的广泛普及，网站已然成为人们吸收了解外界的载体，人们通过上网浏览网页便可以做到足不出户就可以获得所需要的信息和物品，网购行业也随之快速的发展起来，这是因为网页可以承载图片、色彩、文字等多种元素，能够提供给浏览者足够的信息，方便了人们的生活。但是网页设计迅猛发展的同时，也产生了整体水平良莠不齐的问题：1.信息多且杂乱无序，把相关的信息和元素全部罗列出来，不分层次和重点，没有规范性，有多少内容就挤多少内容，使浏览者难以快速找到所需信息；2.喧宾夺主的设计，使用花哨的图案作为背景，干扰读者的视线。有些网站为了追求视觉的冲击力，放一些绚丽的，风格各异的图片，导致网页调性不统一，整体性差；3.一味的追求视觉美感而忽略网站的实用性，凸显不出产品的优势和特点，缺少与浏览者的互动性。视觉效果固然重要，但是一味的追求视觉效果是否真的能够提高网站浏览量和产品销售量？
我认为网页界面设计应该符合美观性和实用性双重要求。简约主义下的网页设计已经不能单纯的追求信息承载量，有一些网站把企业简介、企业荣誉和资质，全都展现在一级页面的位置，长篇大论的写公司的优势获得的荣誉，希望消费者一下子就能够了解自己的公司实力，反而将消费者更加关注的各类产品和主要信息模糊放在在一起，看似信息多了丰富了，效果却恰恰相反，这让很多消费者很难在网站里快速找到所需的信息，浏览者更是不会看长篇的介绍，这不仅没有让消费者了解自己，还会引起消费者的反感导致销量减少。简约主义下的网页设计也不能够单纯的追求色彩，绚丽画面，过多的颜色会扰乱消费者的视线，找不到重点，反而体会不到视觉的美感，从而降低了用户体验。
2、简约主义在网站设计中的应用（结合苹果官网分析）
简约主义源于是20世纪西方现代主义，欧洲现代主义建筑大师与设计大师米斯・凡德罗所提出的“少即是多”的理论，换句话说就是把设计简化，强调它本身内在的东西。这一理论被称为简约主义的核心。当今社会，人们工作强度高，节奏快生活压力大，人们需要一种可以互补的东西来调节神经高压。简约主义以简洁的表现形式来满足人们对产品那种感性的、本能的和理性的需求，符合了当今人们快节奏、高效率和高审美的要求，越来越多的设计师把眼光放在了简约主义风格的设计上，网页设计在简约主义风格的影响下也发展迅速。以苹果官网为例，苹果公司一直追求简而精的风格――简约主义风格。自乔布斯iphone4，苹果官网界面设计风格越发简约。苹果官网新推出的产品――苹果7为例，风格依旧遵循着简约风格，整个页面除了黑色，找不到其它的色彩，网页上没有放置很多的文字内容，也没有很多绚丽的图片和色彩，通过极致的黑色和几根流畅的线条充分的展现出苹果7的简约奢华和精致，一张满屏幕的产品大图不用长篇文字的描述就已经让人感受到苹果公司强大的实力，这种简约风格的形式远比那些人们从不会去阅读的长篇大论更有力量！更有说服力！更加吸引浏览者的眼球！大大增强了消费者的购买欲望。然而单纯的追求简约主义设计风格，简约的画面和几张高精大图就是提高网页浏览量和销售量的关键吗？显然不是。
3、简约主义风格下如何与浏览者产生互动，提高用户体验
简约的画面只是网站设计最终显示出的效果，在网站设计过程中不仅仅只是考虑网站设计的画面效果，当然画面效果也很重要，但更重要的是要考虑消费者和浏览者在浏览网页的时候能否产生良好互动和用户体验。在简约主义风格下，如何才能与浏览者产生互动，提高用户体验呢？1.增加细节的设计。细节决定成败，网页设计也是如此。2.建立清晰的视觉信息导向，使浏览者在众多同类产品中能够快速明确的定位所需要的信息。
简约主义下的网页设计不是空洞的，单调的而是让人感受舒适、放松的设计。简约主义风格的网页设计细节处理是非常重要的。如何才能做到网站设计细节丰富，版式简约，有内涵而不繁琐，有形式而又实用呢？以云米官网为例，云米净水器网页设计综合了视觉、布局、交互综合设计方法。用扁平化的图标设计代替了人们看不懂的数据表格，因为产品特点和优势不仅仅是一句话就能够让人信服的，需要用人们能理解的语言展示出来，才更有说服力。用图片的形式展示产品结构更清晰更加直观，从视觉上提升了科技感和冲击性。将实用性与美观性相结合，画面更加简约，细节处理更加丰富，更加吸引浏览者的眼球。让消费者看到这样的产品就产生一种感觉――买！
良好的可用性和清晰的视觉信息导向引导消费者快捷简便的定位到所需要的信息，增强用户的体验。网页信息筛选也决定了消费者浏览网页所耗费的时间，云米官网一级页面展示了品牌故事，超能净水器，超能滤芯，全屋净化以及生活周边。当浏览者鼠标放在所需要的类别时，网页在一级界面自动拉出小的产品框，方便消费者快速找到所需要的产品。二级页面直接的展示出产品以及产品细节各类信息，高清晰、高品质产品细节图更加具有吸引力，让人一下感受到产品的品质。
结论
当下，国内网页仍存在着很多的问题，在简约主义风格的带动下越来越多的设计开始关注并且完善网页设计的美观性与实用性的结合，以提高客户体验和互动性为目标，用简明易懂的图形文字组合代替长篇的数据，把“简而精”的概念融入到网页设计中去。
【参考文献】：
高级网页设计篇7
关键词：网站导航设计用户体验优化
中图分类号：tp393.092文献标识码：a文章编号：1007-3973（2013）005-080-02
在网站设计中，导航是一个极为关键的元素，正是通过导航，把一个个独立的网页联系起来形成完整有序的网站，因此，导航设计就成为网站建设中的一个重要地关键点，那么，导航设计的依据是什么呢？
网站导航设计就是要让网站有一个更好的用户体验，即：让用户快速有效的浏览网站，准确找到自己所要获取的信息，进而增加网站粘度，达到优化网站用户体验的目的。我们从提高网站浏览速度、引导用户有效浏览、简化用户操作步骤、改善用户感官体验四个方面来探讨网站导航设计如何提升用户体验。
1提高网站浏览速度
网站浏览速度低不仅会直接干扰到页面浏览效果，也会影响用户的浏览情绪，降低用户体验效果。影响网站浏览速度的因素有很多，如网站程序编写不规范、加载项太多、网速过慢、界面设计不合理导致用户操作繁复、图片太大导致无法正常载入等。对于网站导航设计而言，就是要尽可能优化性能，提高网站浏览速度。
1.1避免使用flash导航
Flash导航视觉效果酷，交互性强，注重用户鼠标操作的动态效果，瞬间抓住用户的注意力，在网站设计中应用很广，也是设计师炫技的一个很好的平台。但是实际浏览过程中，这种炫目的动画往往会干扰用户的操作，反而降低浏览速度；Flash导航需要浏览器的支持；此外，Flash对搜索引擎不够友好，有时候无法被搜索引擎读取，尤其是大型的网站更是应该避免使用。
1.2使用文字导航
图片的载入速度要慢于文字，导航设计最好不要使用图片，如果是用图片也最好采用背景图片的形式，而导航内容保留文字的格式。当然，使用文字导航还有一个好处，就是有利于于搜索引擎目录索引和识别。
2引导用户有效浏览
2.1导航位置明了
导航的主要作用就是有效引导用户浏览信息，在网站中需要让用户一目了然。有研究跟踪测试者浏览网页的行为，发现用户浏览网站时的视线呈F形分布，即用户的视线主要集中在屏幕的上方和左侧，对于右侧和底部往往会忽视。导航需要遵循用户浏览习惯，引导用户快速操作，应该放置在用户视线集中的位置，具体实施需要以导航的形式为依据。
导航有两种形式：横向导航和竖向导航。横向导航通常放置在顶部，可以保证导航内容在第一屏中完整展示，适合做网站的主导航。由于用户水平移动鼠标比垂直移动更为快捷，所以采用横向导航使用户操作起来更为方便，不过，横向导航的内容不适合过多，否则容易显得凌乱。竖向导航的导航内容可以灵活延展，适合放置在左侧，对于大多数网站都适宜，但是用户浏览时不如横向导航方便。
2.2导航路径清晰
即便小型的网站通常也会有三个层次：首页、栏目页、内容页，总体至少十几个页面，用户浏览网站从首页进入其他页面，在浏览过程中往往会有浏览其他页面的意愿，这就有个导航路径设计的问题。设计师需要细致设计用户的浏览路径，如何进入下一级页面，如何返回上级页面，如何进入其他页面。如果导航不明晰，就如同进入迷宫无所适从，导致用户耐心丧失，降低网站粘度。导航路径设计原则就是尽可能的简化清晰，排除干扰，减少用户思考的时间。
2.3导航分类明确
导航的内容设置要讲究，合理有效地导航分类清晰，层次分明，能准确描述链接页面的内容，可以使用户快速分辨，从而有效进行操作。根据用户浏览习惯，在浏览网站过程中视线移动具有从左向右、从上向下的规律，因此浏览网站时会更多的注意前面和上面的内容，所以导航内容要进行分析，重要的内容尽可能往前、往上排列，而其他内容根据重要性依次排列，吸引用户的注意力。
2.4设置返回首页
通常而言，首页是进入栏目页的入口，而通过栏目页又可以进入内容页面，对于用户而言只要回到首页就不会迷失，所以，在页面中设置“返回首页”的链接会使用户浏览起来更为顺畅。
3简化用户操作步骤
3.1使用扁平式导航
大型网站导航的层级往往比较深，有的甚至到四级，而且通常采用弹出式导航和下拉式导航的形式，这样会导致导航过于庞大。网站导航的层级越少用户操作次数也会越少，采用三个层级和两个层级的导航相比，用户浏览网站时鼠标的动作更繁复，移动范围大，操作起来极不方便。而如果采用扁平式导航，将导航内容归类，将三个层级变为两个层级，可以最大限度的减少用户的操作频率和范围，用户浏览会更顺畅。一般而言，即便是大型网站，浏览者进入目的页面的点击次数最好也不要超过三次。
因此，有些网站虽然导航内容多，也会将所有的层级简化为一个层级，而以多行的形式出现，就是为了让用户能够尽量减少操作频率，快速找到操作内容。当然，这样也会带来一定的问题，会破坏原本层次分明的逻辑关系，需要设计师谨慎的选择。
3.2提供搜索功能
网站的内容很多，少则几个页面，多则几十个上百个页面，即便对于浏览目标明确的用户，要找到自己需要的信息也不容易。增加搜索功能可以使用户快速准确寻找信息，避免用户盲目的浏览，对于大型网站而言非常有效。
3.3标明当前位置
用户浏览网站时，当从首页不断深入网站内部浏览时往往会不知道身在何处，换言之，用户在网站中迷失了，在这种情况下，用户通常会尝试性的点击，或者返回首页重新浏览，更多的时候甚至会离开网站。最直接的方法是在导航栏中把当前页面的导航内容从视觉上做一下区分，就可以使用户清楚明了。
对于多层次的网站而言，采用面包屑导航是一种行之有效的方法。面包屑导航是一种辅助导航，其基本功能就是定位。例如：文库>专业资料>人文社科>广告传媒，通过这种方式可以使用户对于自身所处位置有明确的认识，清楚地表明了当前页面的层级，同时帮助用户很方便的返回到上面几级页面。面包屑导航适合层级较深的导航，加强了内部链接，可以降低用户跳出率。
4改善用户感官体验
所谓的感官体验在网站中通常就是指网站浏览过程中给用户视觉和听觉上带来的感受，尤其是视觉感受。网站和用户之间的交互基本上都是依赖视觉来实现的，因此，虽然大部分用户浏览网站的目的并不是欣赏网站，但是网站带给用户的视觉体验却往往影响着用户是否会在网站上停留、能停留多久、会不会再次访问。
这种感官体验的影响因素很多，从视觉上看，色彩、风格、文字、布局都是影响因素，不同用户感受的差异性也是重要因素，而各个网站建设都有目标用户，是否针对目标用户进行分析和策划，决定着网站视觉设计是否符合目标用户的审美诉求。具体到导航而言，设计风格要符合整个网站的定位，色彩设计协调舒适，文字清晰可读，鼠标滑过状态和当前页面显示状态的设计醒目而不突兀，整体让用户感觉美观舒适，才能带给用户良好的感官体验。
5结论
网站导航是网站中的一个基础元素，是关系到整个网站结构搭建是否清晰的重要元素。优秀的导航能够帮助用户了解网站结构，不仅仅是快速准确的搜索需求的信息内容，还要让用户明确自身在网站中的位置，明确操作流程，在整个浏览过程中轻松舒适，从而增加用户粘度，提高访问质量。
作为设计师，我们不可否认网站的真正使用者就是用户，在进行导航设计时就要从在用户的角度上去进行策划和设计，要从整体上去衡量用户在网站导航的内容搭建、视觉效果、操作路径、功能设计等多个方面的使用感觉，以达到最完善的使用体验。
参考文献：
高级网页设计篇8
一、网站整体规划，要做网页的第一步便是做网站的整体规划这主要包括四个方面的内容。
1.讨论网站的主题。
网站整体规划是做网页的第一步也是制作网页最关键的一步它决定了你要表答的信息，因此我选择了我选择我最喜爱的服饰来为它做网页。在平时我也对服装的网页比较关心，无论是淘宝网上的衣店还是各种品牌装。这次我是为“易菲”服饰做的网页。
2.定位网站的Ci形象。“易菲”植根中国文化之精髓，汲取自然禀赋之灵性，形成一个既有浓厚文化底蕴，又有现代自然人文气息的特色品牌。“易”即是容，是包容，是宽容，是五千年中华民族的文化精髓，是厚德载物，是对人性宽度的一种拓展。“菲”通非，是生机、是个性、是春意盎然、是自强不息，是对人性深度的一种挖掘。“生活如花，自在快乐”是YiFini易菲的设计理念，倡导一种与自然和谐相处，如花儿绽放般美好舒适、自在快乐的生活方式。这也便是我网站的Ci形象。
3.确定栏目和板块。
于时间的关系在本次我准备做四张网页：一张主页三张二级页面。分别设计了“时尚首页、时尚衣秀、推荐产品、潮流信息”等四个栏目。在这四张页面中我打算都用淡蓝色做背景颜色来映衬我网页的主打色绿色。
2.网站的整体风格和创意。
整个网站的创意就在于颜色的搭配，与各种图片的搭配，它们相互辉映，相互衬托。以便达到表现其品牌的和谐之美、自然之美。我踩用淡蓝色和绿色为我网站的主打色主要是因为我的产品特性。在设计上，Yieini易菲推崇“自然美”，将带表女性气质的花卉和自然元素融入设计之中，充分体现设计师和顾客所追求的一种洒脱、舒适的生活氛围，力求表现悠闲、舒畅、自然的生活情趣。因此我用天空与自然的颜色来表达这张自然之美、和谐之美。
二、网页制作的前期策划与准备，在本阶级主要有两方面的工作。
1.资料的搜集。
在做网页我上网收集了许多方面的资料主要是有关网站的布局与服饰品牌方面的资料，我首先进它的企业网站找了一些关于“易菲”服饰的图片主要是一些代言形象还有代表其企业形象的图片。其次我去浏览了许多的网页观察其网页的布局、颜色搭配、栏目、板块等方面的内容，同时也搜集了一些对我有用的资料。在搜索资料最困难的便是动态图片的搜集，动态图片其gif格式的还是好保存，但是要搜集flash动态图片就相对较难了。我用了一天的时间来搜集我的flash都不太成功，不过还搜到了可以换自己图片的代码。在开始时我根本就不知道flash是怎样搜索，不过经过三次像老实询问我终于懂得一些关于代码的搜索。在搜集资料的过程之中我发现了自己的许多不足之处，最关键就是平时对知识的掌握不够，连最基本的资料搜寻都觉得困难。也是我平时不够认真和努力的表现。通过这次的教训在以后我一定会做得更好，争取不范类似错误。
2.熟悉制作软件。
做网页主要用的工具便是Dremweaver、photoshop、Flash软件。在这些软件我对Dremweaver、photoshop相对比较熟悉，因为在平时上课是老师带领我们运用过。所以我还可以正常的运用，但是出现的问题还是有很多。有很多不懂如何操作，只有通过在次去看书才能够了解，这也体现了我学习方面的缺点，它是我平时不够认真的具体表现。
三、网页制作，这便进入我该次的主题了具体制作流程如下。
1.构建站点框架。
在我打开Dremweaver后第一步便是新建站点，我把我的站点建立在F\仪下面。并将我搜集的全部资料都保存在其文件夹中，以便网页制作时可以方便的使用。
2.设计主页及二级页面。
在主页我设首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，美容美体，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，色彩呼应，搭配协调，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。而且制作过程中，不忘以下原则：
简洁实用：这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便：同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。
交互式强：发挥网络的优势，是每个使用者都参与到其中来，这样的设计才能算成功的设计。这样的网页才算真正的美的设计。每个子页都设有上导航栏，便于浏览和跳转。3个二级网页制作时，使用的是表格，每一个页面都用表格为它布局好，然后在插入图片文字及其他，这样有一定的规划性，体现了连贯统一性，不同的内容根据各自的特色建立了不同的表格，突出各自的主题，增强了对比性。在做这些网页的时候我就进行了如上所述的方法。但我所以网页的背景颜色及主题颜色都是相同的以便突出我每一个网页都是为凸显我主题而服务。
3.实现网页间的链接。
我的链接按钮主要有四个“时尚首页、时尚衣秀、推荐产品、潮流信息”它分别链接到我所做的四个网页。链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
4.向静太网页插入动态效果。
在这一阶段我遇到了许多的问题，主要是我在主页插入我的flash的时候，开是我将带码粘贴到我的网页上可是在浏览网页的时候flash却不能够显示。最后我向老师的请教后终于在老师的帮助下我成功的在我的主页插入了flash。而在其它的二级网页我主页插入的是一些gif格式的动态图片。
高级网页设计篇9
2000年以来，各省的重点新闻网站纷纷开通，虽说主要定位于新闻网，但一般也是各省的代表性网站，不仅其规模在省内最大，其首页实际上成了某个省份的重要形象之一，是该省在网上的唯一"面孔"。所以各省重点新闻网站的业内同行实际上一直在作无声的较量，力求在开网之日有一个不同凡响的首页。有些网站开通后不久即进行了改版，欲"换一副面孔"即是重要动因；因为在网站开通前的筹备期通常时间窘迫，来不及对首页设计进行全方位的思考，开通后不久即会有较大缺憾并非会在预料之外。
新闻网站的首页要做到不同凡响、一鸣惊人，主要需要考虑三个"冲击力"的问题，即色彩的冲击力、布局的冲击力和logo的冲击力。如果在这三方面都能给网友以全新的感受和强烈的冲击，就达到了一个较高境界的首页设计理念。
一、关于色彩的冲击力
省级新闻网站，实际上也兼作政府网站和地方门户网站，其首页的风格，应当是沉稳、简明、大方。与商业性网站的色彩斑澜和个人网站的简洁淡雅相比，新闻网站宜采用对比鲜明、冲击强烈的色彩作为首页的主色调。即以一两种基色的搭配的为主色，来显示新闻网站整肃而富有竞争力的特性。由于主色构成相对单一，所以宜通过较浓烈的色彩来强化人们的视觉，如果色彩过淡，感觉上会趋向于个人主页，也容易有失轻漂，压不住阵。
千龙网作为首家开通的省级重点新闻网，2000年3月8日首次亮相时采用了黑与白为主的基色，给人留下了较深的印象。而两个多月后开通的东方网，其首页以淡黄色为基调，过份强调了"高雅"，却未能形成"色彩冲击"方面的后发优势，这不能不说是东方网在推出三个月后就进行改版的一个重要原因。东方网（当年8月）改版后给人的第一印象，就是大胆地一扫众多网站"轻描淡写"的首页风格，以红与黑相间的主色调，给人以前所未有的强烈的视觉冲击，不禁令人为之击节叫好。其后，东方网由于种种原因，于2001年元旦进行了第二次改版，但依然保留了这色彩个性极其鲜明的主色调。
2001年5月25日，千龙在正式运行一年后首次改版，断然放弃了开网之初的黑白之色，代之以"京城故宫围墙赭红与皇宫金黄色调的搭配"①，色彩对比依然鲜明，但又成功地体现了千龙地处首都地域的风格定位，并给其它新闻网站提供了从地域特色和文化内涵方面寻找首页主色调的设计理念，深化了人们在首页基色定位方面的思路。相形之下，东方网则很难回答其"红与黑"与上海这个城市或"东方文化"之间的内在联系，而更多是纯美术层面的选择--"红与黑"历来是很抢眼的色调。上海人捷足先登了，其它省市也只有妒忌的份。
目前省级重点新闻网站已有十多家，但千龙、东方首页仍然以其鲜明而强烈的个性色彩鹤立鸡群。
二、关于布局的冲击力
相对于主色调的选择余地并不很大，首页的内容布局翻新却可以多作些文章。内容布局尽管也受到诸种限制，只能在网页固有的框架内，"戴着镣铐跳舞"，但有束缚才有创造，才会显示出创造的魅力，才会具有突破原有框架的新鲜感。根据这两年新闻网站首页在设计、改版过程中的一些规律性变化，可以总结出在内容布局方面的三个重要特征。
1、服务至上。内容布局的第一个突破，是新浪网在1999的改版中，首次将banner广告（468X60ps）移到了频道导航栏的下方，突出了频道入口，强调了在首页整体布局?quot;频道导航"的纲领性作用。东方网的第一次改版，则在此基础上更进一步，不但把导航条置于banner之上，并进而把"用户登录"区做成一长条，也置于banner之上，这样又第一次通过内容布，体现出为网友"服务"的思想。这与当时各大网站经营理念从"内容为王"到"服务为王"的转变是有着密切联系的。中安网的首页虽无多少特色，但其"用户服务"功能甚至比东方网还要方便，即将网友最常登录的"邮箱"与"厶?quot;两个点击按钮直接并列在首页频道导航栏下（东方网采用的下拉框选择形式，进"论坛"要多点击一次），最大程度地方便了网友进入。
2、一步提优。如何在首页上把网站的全部精彩内容直接作上链接，使网友不需进入二、三级页面就能"长驱直入"到网站里最优内容最佳信息，这个看似简单的问题在首页上成为现实还是有一个发展过程的。东方网2000年8月改版后的首页，还有两处引人瞩目，一是把中区下部的"网站导航"横向压缩了一半，省出的另一半布置为"频道精选"，即衙扛銎档赖淖罹实哪谌莞餮∫桓錾鲜滓场R蛭?quot;网站导航"里的各个一级栏目全部展示确无必要，不可能这些栏目都很精彩，倒不如将这宝贵的空间直接展示各频道的一条最优稿，使网友不必进入各频道的首页，就可预知其精彩内容并一步点入。同年11月28日开网的北方网，几乎原样照搬了东方网的这一手法。东方网的另一?quot;突破"是在首页右区中部，设置了一个栏目叫"BBS精华"，把论坛里的"精彩妙贴"也直接链上首页，既体现了新闻网站的强大编辑力量（为网友去芜取菁），也反映了对直接来自网友的观点和看法的尊重。新闻网站首页的内容布局，在突破上应当永无止境。可以吸取传统平面媒体的经验。对logo的位置、banner的位置及新闻图片的位置，作出更加大胆的设计。如logo为什么只能放在右上角并水平放置呢，能不有竖起来放到左上角、象某些报纸的名称那样呢？又如，新闻标题为什么非要全部横排呢，能否划根据不同的新闻类别，划出部分标题实行竖排呢？在改版后的千龙首页右区，"千龙互动"和"首都导航"两个栏目下的标题就已实行了竖排方式。
3、"寸土寸金"。人们登录新闻网站，主要是获取各种新闻性信息。故新闻网站的首页理应显示出紧凑的布局，在单位面积里传达出最大的信息量，而不能象许多大型企业的网站首页那样，以空间换"潇洒"。首页一般在两屏至两屏半的幅长，这里缺省的上半幅里内容的安排尤其重要，因为忙的人都不会往下拉，很可能只看个缺省的一幅，所以需要将网站的重点内容和基本服务都安排下，在安排内容时具有"寸土寸金"的意识。一般来说，导读和新闻图片放进缺省一幅并在主要位置并无异议，毕竟是新闻网站嘛！但对将邮箱、BBS、ChatRoom、搜索引擎、手机短信、股市查询等基本服务项目也基本纳入缺省一幅，就不是所有新闻网站都能引起足够的重视了。如果发邮件或搜索新闻还要用鼠标下拉一下，对网友是很不方便的。东方网在缺省的一幅里，信息量是相当大的，仅看它的中区，不仅安排了导读性新闻要目及图片，还安排了反映百姓呼声的"东方直通车"、热门专题集锦"东方热点"，以及包括"股市查询"、"天气预报"、"求医问药"在内的"生活锦囊"，甚至"英语新闻"要目也上了缺省这一屏，显示其国际大都市风貌。东方网中区上部这一块看起来有点乱，实质精心安排也！千龙网也把它?quot;拳头产品""千龙黄金耳"（音频新闻）、"环球见闻"（视频新闻）、"Flash7日"（新闻故事）和"48小时精彩回放"（新闻回顾），悉数纳入缺省一幅。相比之下，云南新闻网、金黔在线、新疆天山网等省级新闻网站的首页的信息量就难以与东方、千龙相提并论。
值得指出，首页内容布局之创新，不是单纯地把有关重点栏目、深层优秀内容或banner的位置在页面框架内移来移去、重作调整，而是本着创新的理念，将网站的内容重心和基本服务，在特定的网页框架内积极调谴，推陈出新。这一过程实际上反映了网站从业人员对互联网认识在不断加深，如对互联网的即时互动等强势特质的进一步认同。
三、关于logo的冲击力
在首页设计过程中，即便具有了上述两种冲击力，如果缺少一个别具一格、特征鲜明的logo，仍然会功败垂成。Logo是首页的"网眼"，是整体艺术创作的画龙点睛之笔。一个绝妙的logo不但会使首页蓦然生辉，而且会成为整个网站的"形象大使"，成为员工的胸牌，成为宣传品上的标志，对网站的进一步发展有着非同寻常的功用。
近两年大型网站在logo设计方面有崇尚简单明了的审美倾向，往往越是知名的网站，logo设计越简单，但那是一种高明的简单，是一种认识论上循环往复、删繁就简后的简单。通常的做法是取消了独立的标志图案，而在英文域名上做文章，说得更确切点，是将英文域名中的某个特定字母拿出来，进行图象化或夸张性的变形、变色处理。
这方面一个典型的例子是新浪网的logo。设计者仅在黑色字体的sina中，将小写字母"i"上的那一点作"空心"处理，然后套上了一个红色"帽子"，象眼睛，也象火炬；顿时就妙不可言，很抽象，也很现代。新浪的logo太简单了，却击败了许多花上许多功夫精雕细琢的logo，个中道理值得玩味。另一个老牌新闻网站大洋网的logo设计，亦与此有异曲同工之妙。大洋的域名是dayoo，最后两个oo引起了设计者的兴趣，结果演变成一双眼帘不断翻动的眼睛，使人过目难忘。
2001年9月12日开通的西部网（），其logo是一个"西"字，这个"西"字经过拟人化变形械?quot;臂挽臂"的味道，形象地表明了这是一个联合型的超级媒体"航母"（西部网由中国西部12家省、市、区联合主办）。东北网的logo设计，则是一个有着抗联军旗风格的"东"字，地方特征鲜明。但也有一些省级新闻网站的首页，看不出有进行logo设计的意识，或者干脆就没有logo，如河南网和桂龙新闻网就是如此。
发达国家的一些新闻网站，首页的logo设计通常都比较简单，但显得很大方。如USatoday的logo只在名称前加了个模糊的地球；Foxnews的logo只在英文域名上打上两道光束，继承似浼易錐ox电影公司的片头特征。
另外还有两点，值得首页设计者注意。一是首页的页面设计必须与内容紧密配合，不能脱开内容来谈形式及一切美术应用。是内容决定色彩、布局，而不是相反。因此在设计过程中，应始终对首页的内容安排引起足够的重视，对每一区域的设计都以明确本区的内容概念为基础，由此引向独到而深刻的美术创意。二是不要轻视首页设计过程中一些局部的打磨和处理，如对一个栏目bar条的图案、栏目内标题的字体等，都应当精心设计、选择；一个成功的首页给人的总体感觉，正是由每一个局部叠加而来。
首页的主色调、内容布局和logo，构成了首页设计的三大重点，同时也是三大难点。其形成冲击力的基本理念不仅针对新闻网站，也在很大程度上涵盖其它性质的网站。作为一项复杂的艺术创作，新闻网站的美工应把握住新闻网站的基本定位及由此决定的总体风格，与网页制作人员密切配合，在重点、难点上很下功夫，勇于创新，勇推"第一"，才能在首页"亮相"之日，取得众望所归的效果。
高级网页设计篇10
关键词：精品课程网站；后台管理；设计
一、概述
后台管理系统（webmanagementSystem，简称wmS）是一个网站管理系统。一个网站管理系统是把一个网站的内容（文字，图片，等等）与网站的组件分离开来，可以将各个页面连接到一起，可以控制页面的显示。通过这个系统，可以方便的管理，，维护网站的内容，而不再需要硬性的写HtmL代码或手工建立每一个页面。
高等教育精品课程网站建设以培养满足国家和地方发展需要的高素质技能型专门人才为目标，目前各大中院校都在积极开展精品课程网站的建设。课程网站系统主要包含前台信息功能模块和后台系统管理模块两个部分，其中后天管理模块设计的质量将直接影响到系统管理员对网站维护和管理的效率，也是整个网站系统设计成败的关键环节。
二、主要功能模块
精品课程网站后台管理系统采用B/S结构，常用的系统功能主要包括：课程基本信息的增删改，教学团队信息的增删改，教学资源的增删改，用户信息的增删改以及留言的回复和删除等，功能模块结构图如图1所示。
图1后台管理的功能结构图
三、链接结构设计
网站链接结构分为两种：一种是“树状链接结构”，类似资源管理器的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。该链接的优点是条理清晰，访问者明确知道自己在什么位置。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须经过首页。另外一种是“星状链接结构”，类似网络服务器的链接，每个页面之间都建立有链接。这种链接结构的优点是浏览方便，方便达到感兴趣的页面。缺点是链接太多，定位不方便。
一般来说大多数网站系统都是以上两种链接结构的混合运用。精品课程网站后台系统中导航部分采用星状链接结构，而每个栏目下的内容又采用树状链接结构。
四、系统设计
系统设计主要包括界面设计和系统功能设计。Ui（Userinterface）即用户界面，也称人机接口。是指用户和某些系统进行交互方法的集合，也可以称之为用户接口或人机接口，是系统和用户之间进行交互和信息交换的媒介，实现信息的内部形式与人类可以接受形式之间的转换。友好的Ui设计可以增加系统与用户之间的亲和力，向用户提供方便、快捷的操作方式，大大增强系统的可用性。精品课程网站的后台管理界面应遵循简洁、易用的设计思想，方便管理人员对网站系统的维护。目前流行的界面技术为采用photoshop作平面设计，网页采用DiV+CSS布局，后台管理系统首页如图2所示：
后台管理系统功能设计可以采用目前流行的多种技术开发，其中一种典型的技术是采用以下技术组合进行开发：数据库技术：采用SQLServer数据库；开发技术：采用开发技术开发。
五、总结
高职精品课程网站后台管理系统的设计与开发应充分考虑精品课程的特点，可以帮助教师更好的管理与维护课程网站系统，提高网站的使用效率，也可以使得教师更好的开展课程教学活动，同时也为课程的教学改革起到积极的作用。
考文献
[1]史国川，刘欢，谢宝陵，王晓光.网站后台管理系统设计研究[J].农业网络信息.2005（7）.