网页界面设计分析报告（精选8篇）
下面让我们来对阿里巴巴的网页设计布局进行分析：
阿里巴巴中国站(china.alibaba.com)被google收录的中文网页数量8月份数据为530，不仅从被收录的网页数量上来说，要远远高于同类网站的平均水平，更重要的是，阿里巴巴的网页质量比较高，潜在用户更容易通过搜索引擎检索发现发布在阿里巴巴网站的商业信息，从而为用户带来更多的商业机会，阿里巴巴也因此获得更大的网站访问量和更多的用户。
1． 从整体结构看：
设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。 点击打开阿里巴巴的网站，访问者可以很快的查找到自己所要寻找的信息和内容，理由是它 的每个页面都有独立的标题，并且网页标题中含有有效的关键词，每个网页还有专门设计的META标签，而且图形和文本层叠有序，框架结构明显。从整体上看网站上的图片不是很多，因为它知道搜索引擎读不出来图片的信息和内容的。
2．从页面的相互关系看：
阿里巴巴的各组成部分在内容上的内在联系和表现形式上的相互呼应很明确，并注意到了整个页面设计风格的一致性，并且在搜索引擎搜索信息的情况下，阿里巴巴将它的主要业务放在了整个框架的最左边也就是搜索引擎最关注的地方，
它抓住了搜索引擎的在搜索信息的特点。实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽。
3. 页面分割的角度看：
分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。阿里巴巴在这方面就做的很出色。它在信息量很多时，将关键词列出来，将画面进行了有效的分割，使关注者更清楚的知道关键词的背后就是他所要的信息。所以网页设计中有效的分割可以被视为对于页面内容的一种分类归纳。
4． 从页面对比的角度看：
对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。 阿里巴巴在网页设计中无论是颜色、文本信息、文字的大小、格式、等等都无可非议。因为它给人的感觉很协调很舒服。
5．从页面和谐的角度看：
和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。打开阿里巴巴的网页一开始给人有点单一的感觉，因为它的色彩不时很鲜明，但是从整体角度在看会发现它的颜色和线条的搭配让人的视觉效果和它的网页达到一种想沟通的效果，尤其是它框架两边的空白部分从美学角度可以说明两点：一是显示阿里巴巴企业的卓越；二是显示网页品味的优越感。所以从整体上体现出了网页的格调。
表格是页面的重要元素, 是页面排版的主要手段, 是整个网页设计的精华, 它为网页带来了结构的概念。在设计网页时, 往往用其定位页面元素和排列网页中的资料, 使各元素排列得井然有序。
二、表格运用策略分析
(一) 普通表格和布局表格的选择策略
在使用表格进行网页的布局设计时, 一般可采用普通表格和布局表格来进行, 这两种模式的表格有着各自的特点。
普通表格的特点:
1、自动生成
普通表格的建立方法非常简单, 在"标准模式"下直接通过"插入表格"选项并设置表格的行、列值即可自动生成一个排列整齐的表格。
2、灵活性较差
由于标准表格是一种按行列关系进行排列的规则表格, 各单元格的位置都是对齐的, 因此, 同一个表格内的各单元格之间相互影响较大, 不便于独立处理, 任何一个单元格尺寸的改变会影响同行或同列中其它单元格的宽度或高度, 而且删除一个单元格时整个表格的布局就会变得凌乱。
3、适合于结构简单、版式排列较规则的页面。
布局表格的特点:
1、布局表格必须通过鼠标手动绘制而成
与普通表格的自动生成不同, 布局表格是在"布局模式"下利用鼠标按版式的位置直接绘制而成。
2、灵活性强
布局表格中的各单元格是相互独立的, 每个单元格都可单独处理, 设计者可按版式的设计需求在任何空白位置插入布局单元格, 而且, 某一个布局单元格的改变对其它布局单元格都不会有影响, 因而灵活性非常好。
3、适合于结构复杂、版式排列不规划的页面
通过以上对两种表格的分析可以看出, 无论是普通表格还是布局表格, 在页面的设计中都有着各自的优缺点, 在实际的运用中究竟该采用哪种表格来对网页进行版面的定位, 应该根据页面的结构来确定, 通常按以下的方式进行设计:
如果页面中各版块排列得很规则, 一般只需用普通表格来设计即可
如果页面上各版块的位置呈现出非规则的排列, 那么就需要将普通表格和布局表格结合起来运用, 一般先利用布局单元格对各版块进行大致的定位, 再利用普通表格对各版块进行细节设计。
(二) 表格大小的设置策略
表格的大小通常可用相对值和绝对值两种方法来确定, 相对值以百分比为单位, 其大小会随着上层容器的大小而发生相对改变, 而绝对值以像素为单位, 其值永远不变。
1、表格宽度的设置
在进行网页设计时, 一般的网页都会用到表格的嵌套。对于最外层的决定着网页尺寸大小的表格, 其宽度应该以像素为单位, 而嵌套表格则以百分比为单位 (但有一种情况除外, 若嵌套表格使用了背景图, 并且要求尺寸和背景图的大小一致, 则嵌套表格的宽度也应以像素为单位) 。
2、表格高度的设置
在一般情况下, 表格的高度不必事先指定, 而应该在表格中各单元格的内容已全部插入并设置完毕后, 再根据设计的需要进行调整。
(三) 表格的嵌套处理策略
浏览器在读取网页HTML源代码时, 是读完整一个table再将它显示出来。也就是说从<table>标签开始, 要读到</table>标签时, 才将表格中的内容显示在屏幕上。而且显示也有优先级, 先读到的先显示。这样的话, 如果一个大表格中嵌套有多个子表格, 必须等大表格读完, 才能将子表格一起显示出来。
因此, 为了提高网页的浏览速度, 我们在设计页面表格的时候, 应该做到:
1.整个页面不要都套在一个表格里, 尽量拆分成多个表格;
2.单一表格的结构尽量整齐;
3.表格嵌套层次尽量要少 (越复杂、嵌套层次越多的表格下载速度越慢) 。
(四) 1像素细线表格的设计策略
在定义表格的边框时, 若设置属性border=1, cellspacing=0时, 我们看到的边框线其实是2像素的 (因为每个单元格都有4个1像素的边框线, 相邻的两个单元格边框线紧挨在一起就形成了2像素) 。
如果要得到1像素的细线边框, 可通过以下方法实现:
1、设置表格属性:border=0, cellsapcing=1 (线的粗细)
2、设置表格的背景色为线的颜色
3、设计各单元格的背景色为其它的颜色
(五) 禁止表格被撑开的处理策略
在设计网页的时候, 经常会出现在后台添加内容后时前台的显示页面被撑开, 导致网页的布局混乱, 极度不美观。这一般是由于输入的文字数目或插入的图片的大小超过了表格的大小所致。
1、防止表格被文字撑开
如果要防止表格的大小被文字撑开, 可以在<table>标记里添加如下代码:"style="table-layout:fixed;word-wrap:break-word word-break;break-all;""
其中:
table-layout:fixed:是为了将表格布局固定住, 可以有效地防止表格被撑开
word-wrap:break-word:是控制换行的, 也就是强制执行换行, 这个在文本内容较多的情况下需要使用到, 特别是较多的文字内容出现, 不执行换行的话, 表格就被撑开了
word-break:break-all:可以解决IE的框架被英文 (非亚洲语言文本行) 撑开的问题, 但是不会强制换行, 只显示表格宽度里的内容。
一般情况下只要用到"style="table-layout:fixed;word-wrap break-word;""就可以了。
但是以上的设置需要在网页中的每个<table>标记上使用, 这样非常麻烦。如果将设置定义在css样式里, 问题就可迎刃而解。
2、防止表格被图片撑开
如果要防止表格被图片撑开, 可利用css控制图片自适应大小, 假设表格内图片的大小不能超过600px, 则定义样式代码为:
其中
max-width:600px:在IE7、FireFox等其他非IE浏览器下最大宽度为600px, 但在IE6中无效;
width:600px:在所有浏览器中图片的大小为600px, 当图片大小大于600px, 自动缩小为600px, 在IE6中有效;
overflow:hidden:指将超出设置大小的部分隐藏, 避免控制图片大小失败而引起的表格撑开变形。
通过这两个样式处理后, 网页中的表格就不会被文字和图片所撑开了。
三、结束语
在使用表格进行网页的布局设计时, 除了要熟悉表格的基本设置方法外, 还应该懂得表格运用上的一些技巧, 只有将这些设计技巧合理地运用到网页中, 才能真正发挥表格的定位作用, 制作出格式精美的网页。
摘要：页面布局是进行网页设计最基本最重要的工作之一, 而网页布局设计的常用工具是表格。熟练掌握和合理地运用表格设计的各种策略, 可以让页面看起来赏心悦目。
关键词：布局,表格,策略
参考文献
[1].赵丰年.网页制作教程[M].人民邮电出版社, 2003
[2].张宏伟.网页设计基础教程与上机指导[M].清华大学出版社, 2004
关键词：移动互联网；4G；网页设计；通讯产品；智能手机；平板电脑
通行设备性能与无线网络通信速度的提升，以移动智能终端数量的快速增长为主要标志，主要体现在智能手机和平板电脑在大众生活中的出现。据中国工业和信息化部的研究与统计及互联网应用报告分析认为，中国在全球互联网世界中所扮演的角色，部分程度上是由其互联网市场的规模所决定的。据研究显示，2015年，中国移动互联网用户数预计达到了7.9亿人，与2014年数量相比增长8.4%，增速呈现走低的趋势，进入平稳增长阶段。2015年，中国移动互联网市场规模达到23134.3亿元，增幅达到72.2%。而2016年，移动互联网整体将继续保持高增长速度。虽然人口福利消失，但是基于商业模式的不断创新，单用户价值将呈现大幅提升的趋势。预计在未来3～5年的时间里，移动互联网规模将继续保持高增长的速度。但是，每一项科学技术的发展都会带来相关产业的变化，从互联网到移动互联网，体现在网络速度得到飞速提高、网络资费套餐更加优惠。同时，摆脱了宽大固定的显示屏和键盘鼠标的局限，替代的是小巧方便的智能手机，易于携带的平板电脑以及各种各样的袖珍终端。这样，网页设计作为网络浏览的载体，在一定程度上也带来了变化及要求。如何应对及改造这一变化，成为移动互联网中重要的问题。
1 移动互联网当前发展现状
1.1 4G网络的应用推动了移动通信服务的发展
移动互联网通信服务全世界得到了长足发展，而且发展势头十分迅猛，主要是通过4G网络的推动。4G网络，即移动通信系统的第四代产品，它的最大特点主要就是在通信容量上超大，在速度上超快，以及可在全球范围内实现自由对接、任意漫游。并且，能够很好地处理图像、声频和视频，能够以影视等各种多媒体形式来提供商务电话与视频、电话会议及网页浏览等信息服务。[1]所以，4G移动在生活中的广泛应用，给人们生活与工作带来了便利，也有效地提高了移动互联网的发展。
1.2 移动互联网应用的采用模式
在应用的层面上，移动互联网的业务在目前阶段主要使用两种应用模式，其一为WAP方式。它所使用的是无线网络应用协议，其网站模式主要是针对手机电脑而设计的。移动终端与移动通信网络二者的速率都有着自身的特点，固定互联网就是依照它们的速率特点，从而设计出全新的适应移动互联网应用的采用模式。在这个过程中也相应地失去了一定的固定互联网内容。其二为Web方式。它所使用的是固定互联网，将移动终端的速配完全输进固定互联网的内容。它不需要再次开发网站内容，只要通过移动客户终端，使用移动浏览器就能够实现。目前所采用的两种移动互联网应用模式，都可以满足在互联网中用户实现网络冲浪的需求。
2 移动互联背景下网页设计的可行性原则分析
2.1 明确目标用户群
在每一项产品设计中，最重要的是对目标用户群的确定。对移动互联产品进行网页设计。通常的惯性要求是以使用移动网络用户的需求为主要设计目标，设计对象是移动手机电脑终端客户群。因为利用手机上互联网的用户比使用电脑上互联网的用户数量多得多，所以在网页设计上应充分考虑到手机用户的喜好特性，明确设计产品具体针对哪些用户群，以达到事半功倍的效果。
2.2 了解应用平台的细节
由于网页本身和外在的因素影响，在浏览网页上呈现出的移动通讯产品具有一定的复杂性。所以，首先要掌握目标应用平台的相关细节。一般来说，生产软件或硬件的厂家会根据用户的需要提供和介绍详细的规范文档，以便从中规范文档中获得自己所要求的目标平台信息，然后将所有不同的信息进行综合处理，形成一种个性化的版本，这样就提高了移动应用的可用性。[2]
3 移动互联产品在网页设计上的具体策略
智能手机、平板电脑及各种移动互联网的载体，为了使用户方便携带及被充分利用，需要挖掘出一些使用功能。例如，功能的多方面改造提升，需要提高产品价格；尺寸的大小变化，要考虑到电池上的耐用问题。最重要而言，移动互联网具有丰富而精彩的多媒体服务，这是受到终端客户群青睐的重要原因。因此，要想使这些丰富的多媒体服务成为现实，在网页设计上实行人性化设计是必不可少的。
3.1 改造舒适性整体
为了移动通讯产品能够走进人们的现实生活中，并被广泛地接受，首先要针对网页设计在整体性上进行有效改造。一般来说，用户在浏览网页时都是处于随机状态或者是浮动状态。因此，网站上所有的信息要达到迅速、准确、容易、方便地被浏览或者被阅读。所以，在网页设计中要合理地规划菜单和文本，尽可能地优化图片与内容，把较大面积与分辨率缩小成手机或平板电脑的显示屏中，避免由此造成各种不合理的缩放变化，为用户打造一个舒适性的网页整体。
3.2 精准化内容
利用最小的成本呈现最有价值的内容，是对流量的节约，用户体验的改善，最直接的是为用户省去不必要的费用。[3]网页设计者可以从精简页面设计到导航与书签功能，尽可能地帮助用户避免不必要的文本信息输入，缩减不必要的程序与功能，减少设计过深的多级菜单，以人性化与客户满意度为主要目标，对呈现内容尽量精准化。
3.3 增添延续性操作
互联网的发展十分迅速，由Web1.0发展到Web2.0，再由Web2.0发展到现在的Web3.0[4]，所用时间非常之短。Web1.0是互联网的发展初期，使用的技术是静态网页开发技术，由于静态网页为互联网的发展初期，交互性差是它的短板，但是它具有快速访问的特点以及稳定性强的特点。Web2.0的发展保存了Web1.0的优点，而扬弃了它的交互性差的缺点，从而改善了Web1.0存在的漏洞，提高了网站与用户的交互性，给新闻网站、博客和电子商务等带来了便利，但是它的缺点是安全性能不高。随着在传统技术上的改造与发展，Web3.0改善了这些技术问题，并逐步完善了网络体系。因此，移动科学技术的发展与更替，还是以传统互联网为基础。现不少手机用户仍然坚持着传统的互联网操作，所以在网页设计上，最好延续传统互联网的特点，取其精华，去其糟粕，让用户能够更快地熟悉移动通讯产品的新兴上网功能，更快地与移动互联网融合。
3.4 设计视觉要素
在网页设计中，文字、色彩、图形以及图像是最为根本的视觉传达元素。通过点、线、面构成了立体基本形态，在交互中以瞬息万变的视觉变化冲击着受众的眼球，从而形成了网页设计的视觉语言。文字作为一种传统的视觉符号，设计人员通过对复杂繁琐的文字信息经过精心处理变成简单浓缩的特性，有利于改善客户的心理体验。
把文字信息逐步向图形、图像及色彩转变。[5]随着网络的不断发展，原本只能呈现单一文字的互联网现在可以利用每一个栩栩如生的图形和图像进行显示。并且，这些图形和图像所表达的信息量大大超过了任何文字的表述，从而使用户在视觉上受到了强烈的冲击。但因图形图像本身数据量占用空间及数据量较大，给用户在时间上和流量上产生了不少的费用。因此，网页设计要尽可能地减少使用色彩艳丽的图像。这样不但能够使数据量的稳定性得到有效的保证，而且又可保障图形图像的表达效果，提高设计程序的工作效率。
3.5 增加返回按钮和链接
为用户带来更好的人性化服务及直观体验，最好在网页上设计出返回按钮，以及设置链接等。[6]由于一些智能手机和平板电脑其自身程序没有设置返回按钮，所以在设计的过程中尽量设置返回按钮，以便为用户提供更多的方便。由于在移动网站上进行输入非常不方便，其难度较大。因此，在网页设计过程中，应当向客户给出单选按钮及列表，这样用户就能够根据自己意愿进行自由选择。一般来说，移动设备屏幕面积尺寸都较小，用户点击链接时需要准确地点击，所以设计师可以使用以下方法：第一，要适当地设计出较大的字体；第二，在链接的周围，应当设计出较大面积的留白；第三，要为链接加上下划线及背景颜色，以方便移动设备用户能更快地确认他们点击的链接内容。
4 结语
通过对移动互联网的使用，人民群众的工作和生活变得更加丰富多彩、方便快捷。移动互联网将成为一种崭新的多功能平台，它包括媒体信息服务、社会公共服务、电子商务以及生活娱乐等等。网页设计技术必须紧跟科学时代的发展不断改革创新，为移动互联网服务。如今，移动互联网已成为大众获得信息和生活交流的一种重要方式，对移动设备的网页进行科学设计是时代的要求。移动通讯产品的网页设计大大地提高了人民群众的生活水平。
参考文献：
[1]梅倩.移动互联网时代下的网页设计[J].科技创新导报，2010（4）.
[2]陆远蓉，李晓婷.与职业能力对接的高职计算机课程开发探索——以《移动互联网站设计》为例[J].九江职业技术学院学报，2014（2）.
[3]陆远蓉，李晓婷.基于工作过程系统化的《移动互联网站设计》学习情境设计[J].当代职业教育，2014（6）.
[4]杨颖.高职“网页设计与制作”课程教学改革探索[J].职教通讯，2015（18）.
[5]周胜安，王圆.移动互联网下的电子商务专业课程体系构建[J].中国信息技术教育，2014（19）.
[6]李欢.基于移动互联的IM交互设计研究[D].北京交通大学，2013.
[7]于淼.浅析网页设计的发展趋势[J].中国科技博览，2011（14）.
[8]刘守鹏.基于用户体验的移动互联网网页设计研究[J].大众文艺，2012（5）.
本科生课程设计(实践)设计报告
(大学计算机基础)
题目
学生姓名 指导教师 学院
专业班级
学生学号 栀子花开xxx xxx xxx学院xx工程xxx班 xxx
计算机基础教学实验中心
xx年xx 月xx日
目录
一、任务内容.............3二、设计的步骤................3三、采取的方法与手段...............5四、遇到的问题与解决的办法............6
五、总结...............7
一、任务内容
原计划打算以“植物”为主题，在设计过程中发现范围过于宽泛，无法完成主题的设计。因自己十分喜爱栀子花且有所种植经历，经考虑后重新确定了以“栀子花”为主题的网页设计内容。主要分为
一、栀子花的文化，二、栀子花的种类和生长特性以及
三、我的栀子花三个模块。
其中，模块一使用幻灯片进行演示，主要分为关于栀子花的诗句、栀子花的传说以及栀子花的蕴涵三个部分。模块二采用网页模板进行展示，主要介绍了大叶栀子和雀舌栀子两种栀子。模块三主要展示了自己拍摄的栀子花图片。希望通过我的展示，让他人对栀子花有所了解。
二、设计步骤
一、构思
首先，对栀子花的种类进行简单的介绍；其次，对栀子花的文化内涵进行简要描述；最后，展示自己种植的栀子花成果。因此，此次作业共由三部分网页【
一、主页、二、栀子花的种类和生长特性、以及
三、自己种植的栀子花的图片三个模块。】和一组幻灯片【栀子花的文化】构成。其中模块二【栀子花的种类和生长特性】采用网页模版组成，主要介绍了两类栀子花——大叶栀子和雀舌栀子，更加便于了解。
二、取材
主要从网络上获取所需的图片、音乐等关于栀子花的素材，其中部分照片从个人相册中获取。
三、设计
（一）网页设计
模块
一、栀子花的文化以及模块
三、我的栀子花采用网页设计。
在首页添加表格，在表格内增添标题栏以及字幕，增添了图片、背景图片、背景音乐、文字、艺术字对首页进行丰富和充实。在部分文字以及图片上增加超链接，与三个模块进行连接，便于翻阅。
在模块二中采用网页模板进行展示，主要介绍了大叶栀子和雀舌栀子两种栀子。在模板内采用表格对网页进行划分，对栀子花进行概述和分类描述。插入图片，便于直观的了解各个种类的栀子花。其中，各个种类的栀子花展示位于网页模板的右方，在左方进行总说，并通过超链接与栀子花的分类说明建立联系。
在模块三中，通过绘制表格对网页进行大小不同的划分，插入栀子花的图片拼接成整个网页。
（二）幻灯片设计
此组幻灯片主要用来介绍栀子花的文化。在幻灯片上主要增添了背景图片、背景音乐以及大量的文字说明，未对幻灯片进行大量的美化和修饰，主要目的是为了让他人关注了解栀子花的丰富的内涵和文化。
（三）flash设计
此次flash设计主要用于美化模块二中对大叶栀子以及雀舌栀子的介绍过程。
四、美化
（一）添加背景音乐
在主页以及各个模块中均插入了背景音乐。
（二）设计网页过渡
（三）添加超链接
三、采用的方法与手段
（一）使用Frontpage制作网页
单击新建网页可选择新建空白网页或其他网页模版。
单击表格，选定绘制表格或布局表格或单元格即可绘制单元格。
选定单元格，单击鼠标右键选定背景即可插入背景图片。
选定网页，单击鼠标右键，选定网页属性，浏览格式即可添加网页背景。选定单元格，即可输入文字。
选定插入，选择插入图片或艺术字即可插入图片或艺术字。
选定插入，选择交互式按钮，即可插入字幕。
选定格式，选择网页过渡，即可设计网页过渡效果。
（二）使用Powerpoint制作幻灯片
单击鼠标右键，选定背景，选定其他填充效果，浏览选定图片即可添加背景图片。
单击插入，选择图片，即可添加图片或者艺术字。
选定文字，单击鼠标右键，选择自定义动画即可添加自定义动画。选定幻灯片，单击鼠标右键，选择自定义动画即可添加自定义动画。选定艺术字，单击鼠标右键，选择自定义动画即可添加自定义动画。、（三）使用Flash制作动画
单击插入新建元件，即可进行元件的编辑。
单击15帧或30帧，单击鼠标右键，选择插入空白关键帧。
单击第一帧或第15帧，选择补间，选择形状或动画即可。
（四）其他
单击鼠标右键，选定背景，选定背景音乐，即可插入背景音乐。
选定图片、艺术字或文字，单击鼠标右键，选定超链接，即可设置超链接。
四、遇到的问题与解决的办法
（一）、网页制作中遇到的问题与解决方法
①、绘制表格完成后，因部分表格过小，难以选定——先在表格内输入部分字符，即可方便的选定单元格。
②、获取的图片素材或大或小，在设计背景图片时，使背景图片看起来过于混乱——事先将图片放大或缩小到一定尺寸，然后设定为背景图片即可。
③、在添加背景音乐时，无法添加mp3文件——单击鼠标右键，选定网页属性，单击背景音乐，手动输入背景音乐的mp3文件名即可。
④、添加背景音乐完成后，在浏览网页过程中出现多首背景音乐同时播放的情况——原因是因为在网页模板设计时，在标题栏网页也添加了背景音乐，造成了背景音乐的播放的混乱。删除即可。
⑤、在模块二，希望能够添加弹出窗口便于介绍各个栀子花的特性——通过添加网页模板实现了在一个网页的部分区域实现不同网页的展示。
⑥、在网页模板上返回主页时，无法返回整页的主页网页——单击鼠标右键，选择超链接，选择目标框架，选择整页框架。
⑦、在打开网页上后，发现网页未能显示图片——未将网页与图片同步保存，导致无法显示图片。同步保存即可。
⑧、浏览图片时，发现无法打开超链接——原来在设置超链接时将路径设置成了绝对路径，改为相对路径即可。
⑨、无法插入Flash文件——事先应将制作好的Flash文件发布，单击插入，单击图片，单击Flash文件即可插入Flash文件。
（二）、幻灯片制作中遇到的问题与解决方法
①、设置背景音乐完成后，播放幻灯片时，单击鼠标后音乐才播放，再次单
击鼠标时，音乐就停止播放——单击鼠标右键，单击背景，单击音乐播放，单击选择为第一张幻灯片前开始，第四张幻灯片（最后一张幻灯片）结束后结束即可。
（三）、Flash制作中遇到的问题与解决方法
①、在场景中即设计元件，无法单独设计元件——单击插入，单击新建元件即可。
②、无法插入图片——单击文件，单击导入，选择图片导入到舞台即可。③、无法循环播放Flash——单击控制，选择循环播放即可。
④、设计完成后发现是无效帧——需设置空白关键帧而不是关键帧。
五、总结
通过三周的网页设计，深深体会到了动手实践操作的重要性，在以往的课堂上，单单只是听老师讲解制作要点，看老师制作过程，但只有通过自己的实践操作并从中发现问题、解决问题，才能真正了解和掌握学习的内容。
在网页设计中出现问题是免不了的，但是出现问题后一定需要自己想办法解决，通过询问同学，查找书籍或者在网页上搜索都可以，但一定要自己主动地去寻找答案才能解决问题。
学号：40
班级：10市场营销
实习时间：第十三周实习地点：S-B205机房、句容部分乡镇店铺
网页制作实习一周心得
一个星期的网页实训课结束了，可以说学到很多以前没有学到的东西。每一天都有新的内容要学，让人感觉很兴奋，很高兴，恨不得马上就把它给学会。通过这次实训使我更熟练掌Dreamweaver、Photoshop等软件的功能和应用。不但如此，更增加了同学间的友谊，陪养了彼此间的团结。
实训第一天，老师选了代表出去采集店铺的资料作为网页的基本素材，并收集各个店铺的基本资料。如店铺名称、商品名称、服务项目、联系电话等。
首先我自己要做的就是要选择好题目和网站的风格，之后我就分步骤准备在制作网站前所要做好的准备工作。我浏览了茗苑茶叶网站的一些特点，借监网站的优秀之处，不好的地方在自己的网站上加以改良，从而使自己的网站更加美观。
在选择好题目和网站的风格之后，我就开始了实训项目的进程，按照实训方案的规定，先是将网站的总体策划在脑子里有个大概的描绘，在相应的时间段找相关的素材，搜集与主题相关的文字、图像等。再是设计网站的内容结构、目录结构和链接结构，设计首页及其页面的版式结构。在这期间，每一天老师都会指点我们，首先是网页素材的准备，在网上查看一些网页背景和背景颜色搭配，让我了解到网页的颜色不能多过3种色彩。接下来的几天再结合自己的网页来进行策划，在做首页之前，先用利用Photoshop把网页的结构画出来，再切割图片，把它们导成Html格式在Dreamweaver中进行进一步的编辑。在此次网站的设计与制作过程中，难免会遇到过各种各样的问题，这毕竟是第一次独自设计网站、制作网站。但值得高兴的是：在设计的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固，没有能完全达到自己预期的效果，还好通过老师的细心指导才能达到最终效果。
一周网页设计与制作的实训课程结束了，回顾这次课程设计实训，至今我仍感慨颇多。的确，从选材到开始制作，从理论到实践，在一周的实训日子里，可以说得是苦多于甜，但是可以学到很多很多的的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。更懂得并亲身体会到了理论与实际相结合的重要性，只有理论知识是远远不够的，把所学的理论知识与实践相结合起来，从理论中得出结论，才能真为掌握技术，从而提高自己的实际动手能力和独立思考的能力。
Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。
为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣，办出网站的特点。
Web站点主页应具备的基本成分包括：页头：准确无误地标识你的站点和企业标志;Email地址：用来接收用户垂询; 联系信息：如普通邮件地址或电话; 版权信息：声明版权所有者等。
网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。
版式设计通过文字图形的空间组合，表达出和谐与美。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。
在网页设计中，总是有倾向的特定技术来观察，或跟踪的网页设计师加强的趋势。这里有专有和开源和免费的技术专用的支持者。然而，近年来，又增加自由和开放源码技术，包括由W3C和WHATWG进行监控和批准，监督和实施增加。
趋势可以发现，不仅在看在时尚领域的使用的技术，如网站和匹配的标志是清晰的喜好确定。著名的艺术字Web 2。0至今的重要作用的帮助。
网页技术更新很快，一个网站的界面设计寿命仅仅2—3年而已。不管是垃圾还是精品，都没有所谓的经典，经典只存在于是哪个首次成功创新性的应用。一个闭门造车者做出的东西，是远远赶不上综合借鉴者的。网页设计不同于其他艺术，在模仿加创新的`网页设计领域当中，即便是完全自己设计的，也是沿用了人们已经认同的大部分用户习惯，而且这种沿袭的痕迹是非常明显的!还有哪个设计者敢腆着脸说，这都是我自己的原创设计?对于业界来说，经典只是个理念和象征!
不可否认，国内网页设计环境还停留在初级的认知阶段，也就是说，绝大多数人不知道网络的真正的可用之处，你去做一个业务的时候，不得不去做大量的说服教育工作。以乙方的身份去说服甲方，以专业角度去教育非专业认识，结果是可想而知的。也正是这种全体社会普遍的低认知水平，导致了大量网络垃圾的产生。
企业客户所在行业往往有其特定的设计需求，特别是对于企业网站建设当中的配色，除了应根据企业的VI标准色，以及客户自身的喜好进行配色分析外，同时不能忽略整个行业对于颜色上的‘惯例’。那么，企业网站在设计和制作当中，到底有哪一些配色规则需要设计师遵循呢?
企业客户在不同的发展阶段，对于网站设计的配色需求并不一样。在企业初创阶段，企业建站的目的是打造品牌网络形象，开拓客户资源，这时候的企业客户更多的是关注自身的个性化，如何才能凸显企业的特质，如何才能在行业当中
显示其独有的特性，这是初建网站的企业客户所重点关注的内容;在企业形成规模，进行品牌提升阶段，企业建设网站或进行改版的目的是重塑品牌网络形象，打造更为专业、沉稳和可持续发展的品牌理念和文化，这时候的企业客户更多的是考虑如何将企业的品牌内涵与行业相融合，在配色的选择上更倾向于稳重、包容，能够适应各种场合需要的配色。
网页设计的两大要点是：整体风格和色彩搭配。
一、确定网站的整体风格
在这里，我提供给大家一些参考经验：
1.将你的标志logo，尽可能的放在每个页面上最突出的位置。
2.突出你的标准色彩。
3.总结一句能反映贵站精髓的宣传标语!
4.相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!
二、网页色彩的搭配
1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。
2.用两种色彩。先选定一种色彩，然后选择它的对比色。
3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿;或者土黄，土灰，土蓝。
在网页配色中，还要切记一些误区：
1.不要将所有颜色都用到，尽量控制在三至五种色彩以内。
2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。
三、网页设计的工具
1。Dreamweaver，用于编辑HTML、ASP、JSP、PHP、CSS、XML、JS的页面制作工具;
2。Frontpage，跟Dreamweaver一样，不过个人感觉还是Dreamweaver好;
3。Flash，网页需要画面流动时的首选择;
4。 Photoshop，图像处理软件，一般网页都需要有图片相搭配，Photoshop是款很强大的工具。
随着网络的迅速发展,《网页设计》是近年来计算机专业领域发展最快和应用最广泛的课程之一,很多中职院校的计算机专业也为迎合专业技能发展的需要,开设了《网页设计》课程。
中职院校的教学特点是在教学过程中主要以实践内容为教学主线,学生必须有较充足的动手实践机会,较熟练地利用DreamWeaver的各种功能创作出实用的网页来。但对于自主学习能力较差、计算机应用能力较弱的中职院校学生来说,要能熟悉应用DreamWeaver,并结合其他软件来制作网页,并不是易事。
目前,针对中职院校使用教材很少,且大部分教材的内容已经很陈旧。以前的《网页设计》课程主要是以应用FrontPage软件,并结合图像来处理一些页面,网页制作这门课程并不是作为一门课程孤立存在的,它要靠多门学科的知识给予支撑的,在制作页面时我们要结合DreamWeaver、Firework、Flash等软件来进行。因此在教学中就要求老师要不断的学习新技术新技能。
因此,对于《网页设计》这么实践性强的科目来说,并不能只应用传统的教学方法,教师在教学过程中需不断地从教学内容、教学方法、实验环节等多方面对本课程进行总结及积极的创新。
2 项目教学方法概述
“项目教学法”是由以教师为中心转变为以学生为中心,由以课本为中心转变为以“项目”为中心,由以课堂为中心转变为以实际经验为中心的教学方法。
和传统教学方法相比较而言,项目教学法在一定程度上可以有效调动学生的积极性,能够在教师的指导下提倡学生主动学习,使学生的积极性得到充分发挥,在教学形式的组织以及教学内容的确定上充分照顾到了学生兴趣以及能力的个体化差异,也可以使学生全面了解用统计方法解决实际问题的全过程,真正提高学生分析能力和解决实际问题的能力,更有利于学生对网页制作技能的掌握。
3 项目教学法在网页制作教学中的应用
在运用项目教学法进行教学设计的时候,学生是认知的主体、是知识意义的主动建构者根据项目教学的教法思路和教学设计原则,本人在教学过程中设计了项目教学法的教学步骤,具体见如下四步:
3.1 选择网站项目,确定项目任务目标
确定项目任务目标是项目教学法在网页制作教学中应用的前提和基础,由于中职院校的学生较对网站项目缺乏了解,且自主设计思考能力较差,因此教师在提出的教学项目设计应紧密围绕学生所关心、所熟悉或者感兴趣的问题。这些问题应尽量结合学生的学习和生活,结合他们的生活环境。同时,老师要给学生介绍不同类型的专题网站及相应的制作方法,然后让学生确定网站制作的类型及项目,并要求学生总结此网站的风格特点,这样不但能提高学生的学习兴趣,而且为引入项目教学法做好了铺垫。要求学生利用课后时间,上网查找网站制作的相关资料与素材,并且制定一份初步的计划书,确定网站主题。
3.2 制定项目计划
项目计划的制定主要围绕网页制作教学中项目教学法的开展形式进行组织和规划,本着发挥学生个人特长,让每一位学生融入网站设计的全过程,根据所选择的网站项目,在学生制定好具有一定应用价值网站设计计划书的基础上,通过课堂讨论,列出将要实施的几个网站方案,成立项目小组。分组时每组成员以2～3人为宜,把学习能力较强者作为组长,负责组织落实项目计划的制定和本小组的学习管理工作,其他同学按照项目的安排进行网站的设计制作。
3.3 组织实施项目
组织项目的实施对项目教学法在网页制作中应用效果起关键性的作用,在组织项目实施的过程中,需要重点做好以下工作:
首先是收集制作素材,确定制作内容。收集素材是网页制作的基本要求,也是学生应具备的基本技能。当资料收集完成后,各小组把收集到的素材在小组内进行交流汇总,通过讨论确定作品制作的具体内容,并上报教师。
其次是确定制作方案。根据制作内容,设计网站页面和网站要实现的页面效果,通过此环节培养学生在做事前要有设计和计划的行为习惯。在此阶段,教师要根据各开发小组的具体情况、具体要求及时恰当地进行指导,解决学生制作过程中遇到的难题,督促学生按时按量完成项目的各个开发环节,保证学生顺利完成项目的开发,实现教学目标。
第三是网页制作好后,每组都需撰写一篇总结报告,总结本次学习、制作的收获和经验,为下一次项目的制作做准备。阶段性总结评价也是项目具体实施过程中必不可少的环节。教师和学生在每个阶段的学习结束后,都要对该阶段的学习成果进行展示、评价、总结,及时改进不足之处,巩固成果,为后续工作打下坚实的基础。
3.4 实施项目总结评价
项目评价一方面是对项目教学法在网页制作教学中应用的一个总结分析,另一方面对项目教学法实施过程中学生表现进行及时评价同时也是对学生的一种有效鼓励。
评定项目的成绩应根据项目实施的具体环节分别给分,比如项目设计阶段、网站素材收集阶段、项目实施阶段、项目分析报告的撰写阶段、小组协作能力评价等,每一项目的分数可由任课教师根据情况确定。
4 结束语
总之,项目教学法对提高中职学校学生的专业技能有了很大的帮助,在应用此教学方法过程中,老师要及时有效地引导学生解决网页制作中所遇到的问题。项目完成后,学生会发现自己的自主学习能力、实践能力、创新能力、团队协作能力、分析解决问题的能力以及撰写报告的能力都得到了锻炼、培养和提高。但由于中职院校的学生自主学习能力较欠缺。
摘要：在《网页设计》教学中实施项目教学法可以有效提高学生的动手能力、研究和分析问题能力、协作和相互帮助能力以及交际和交流能力,帮助学生快速掌握网页制作技术的基本技能。该文介绍了项目教学法在网页制作教学过程中的应用与探索。
关键词：中职教学,网页制作,项目教学法
参考文献
[1]李捷.《网页制作技术》项目教学法的研究与实践[J].职业教育研究,2008(6)
[2]蓝雪燕,张淑清.高职《网页制作》课程教学新思路[J].广西警官高等专科学校学报,2006(3):33-34.
关键词：SNS社区网站 版式设计 视觉导向 用户体验
SNS社区网站的网页设计作为当下最流行的设计之一，对人们的日常生活起到了至关重要的作用，尤其是生活在城市中的人们，已经融入到了生活中的点点滴滴，每天刷微博上人人已经占据了都市青年们休闲娱乐的一大部分。社会不断的发展，网络科技日新月异，网站的数量也与日俱增。据统计，截止到2010年中国网页有600亿，全球网页至少有1万亿个网页。这一数字已经可以称为是天文数字了。而SNS社区网站也在美国Fackbook创立开始，在全球开始蔓延。中国的人人网、开心网、点点网接踵而至，目前呈现白热化的局面。在争夺网络用户的基础上，人人网与开心网等新社区网站展开了激烈的竞争，不断提高用户的体验和自身产品的服务过程中，网页中的版式设计越来越受到重视，加之网民对于看到的网页美观度和实用度有了更多的需求，也对网页设计师们提出了更高的要求及挑战。中国的SNS社区网站的网页设计本身有自己的特点，它不同于其他种类的网站，不会像资讯类的门户网站那样，拥有庞大的新闻信息量及专题，也不会像个性化的官方网站那样，丰富多彩。
由于SNS社区网站普遍建立时间短，例如人人网是2005年12月开始建立，开心网建立于2008年3月。我们可以看到，迅速的崛起和短时间的发展时间导致很多设计不够整体、不够专业，尤其是网页设计中的版式设计部分往往差强人意。在人人网建立初期，个人页面的“博客化”令人不得不联想到2000年左右互联网刚刚兴起时各式各样博客的网页布局，单调、死板的构图、毫无配色概念的窘迫，一直深深影响着社交网站的设计和发展。因为版式设计中各种元素的组织结构是否有效合理会直接影响到用户直观体验和产品功能的体现，当然也会影响到所有网站行业在网民中的形象。所以，为了净化SNS社区网站的设计环境，提高SNS社区网站的美观度和舒适度，特此调查研究它的版式布局，并根据研究举证说明怎样才能达到SNS社区网站设计的最优效果。
1、视觉因素在SNS社区网站网页设计中的重要性
认知SNS社区网站非常重要，以人人网为例，人人网的前身是校内网，始建于2005年，蓝色的校内标志一直深深地被网民，尤其是大学生们所记忆，迎合当时大学生社交需求的平台迅速搭建，个人信息化和新颖的呈现形式被大家津津乐道，但是众所周知，初期的校内网结构非常零散，产品很单一，没有形成整体的模式，页面很难被人们记忆，这一过程持续了将近四年的时间，校内网一直没有找到突破口。直到2009年8月4日，著名的校内网更名为人人网，社会上所有人都可以来到这里，从而跨出了校园内部这个范围。根据人人网在百度百科中的解释我们能看到，人人网的宗旨是为整个中国互联网用户提供服务的SNS社交网站，给不同身份的人提供了一个互动交流平台，提高用户之间的交流效率，通过提供发布日志、保存相册、音乐视频等站内外资源分享等功能搭建了一个功能丰富高效的用户交流互动平台。视觉体系再次受到人们的关注，新标志的使用，使得人人网重获新生，网页中的版式设计也有了很大的变化，在老用户习惯的基础上有了稍微的变化，布局更加合理，色彩更加和谐。
根据上述对于人人网的介绍，我们知道标志和网页设计的变化是显而易见的，网页设计中的视觉表达元素会引起人们对具体信息内容的关注，可以使网页中的各种产品获得最大的大众关注度。这就需要网页设计师充分了解用户的上网习惯和大众视觉认知的心理和生理特点。从而去深入研究各个元素之间的关联性和影响力等多重因素，这样才能建立一个用户体验好、视觉色彩明亮的网页。人类自身视觉特性促成了视觉传达的形成。我们知道人是视觉动物，视觉语言的好坏直接决定了网站的生存与发展，人们在浏览SNS社区网站的时候，一般都会带有轻松或者愉悦的心情，所以视觉上一定要保持清新，给人以舒适的视觉感受，这样才能关注到本身的诸多产品，例如人人网中的整体视觉以蓝白为主，清新的设计风格让用户体验者的网页黏度高，喜欢停留在人人网上，从而关注了网站本身的内容，好友留言、照片评论、视频分享、状态更新等等功能才会受到关注，进而对网站的其他盈利产品产生兴趣，如人人农场、VIP会员专区、应用程序、人人逛街等。我们能看到，网页的版式布局和设计是否合理美观，直接影响着用户体验和视觉享受。
2、人人网网页设计中的视觉设计流程
人人网的整体网页视觉以清新明快为主，内容充实、结构清晰、色调统一、符合大众的审美需求，以内容为主导的SNS社区网站最大的特点就是图文并茂，高清图片配以简洁文字非常迎合大众的口味，使人阅读起来非常顺畅，整个网页没有太多多变图形和繁杂色彩的装饰堆砌，视觉化表象语言的合理利用是整个网页成败与否的关键，通过字体、图标、图片的疏密关系和组织搭配，我们不难看出，人人网对于重视视觉感受的用户非常具有凝合力，只有把网页整体布局把控住，才能衬托出网站高质量的内容，尤其是在点线面的处理上，字体和图标作为点，一定不要过于丰富和抢眼，做到舒适有度即可。
3、人人网网页设计中具体视觉要素的分析
网页设计就是通过对各种构成元素的设计来使信息内容有效的传达出去。网页的构成元素主要包括标志、文字、图形图象、色彩、图标、图片等造型元素及标题、导航条、正文、弹框等内容要素。
3.1文字的设计
文字算是网页版式设计中最为关键的元素，没有字体的版式是不完整的。作为传达内容最主要的手段，它的主要功能是传达各种信息和内容，而要达到这种传达的有效性和实用性，文字编辑非常关键，要综合整体效果，避免页面繁杂零乱，减去不必要的文字装饰变化，使人易认、易懂、易读。网页文字编排与设计，重要的一点在于要服从信息内容的性质及特点的要求，其风格要与内容特性相吻合而不是相脱离，更不能相互冲突。虽然现在可供选择的字体字库非常多，但在同一种网页上，最多不要超过三四种字体，标题字、正文字、链接字、注释字等。而且，由于浏览器兼容性的问题，很多字体是不能被显示的。只要字体符合内容，能在视觉上产生一定的美感，就能赢得用户的青睐。
nlc202309022154
3.2色彩的设计
版式中的色彩设计是非常重要的，如果说字体是基石，那么色彩就是灵魂了。色彩能促使用户对网站兴趣度和认知度的提高，在一定意义上说也是对网站整体印象的一个评定。一个失败的网页，色彩一定不会美观。我们看到人人网这点做得很理想，整体色彩以清新淡雅为主，浅颜色的背景让人更加关注了深颜色的文字和图片，内容至上。这样用户在浏览网站的时候，非常清晰、流畅、直观，突出了网站和页面的重点内容，这也有利于整体的配色，另外浅颜色的网页背景单纯，可以配以一些同色系的装饰来丰富背景。
3.3图片的设计
图片是网页中最有魅力的视觉元素，图文并茂地向用户提供信息，更直观的增加内容的信息量。人们喜欢看图片，因为图片和文字相比更直观更有趣味，增加了版式设计中“面”的成分。
网络图片的主要特点：一个特点是图片要尽量小。网络页面的图片用于网络的传输，受到带宽的限制，其文件尺寸在一定范围内越小越好；还有一个特点是图片质量不需要很高。一般来说，分辨率为72dpi是大多数图片最佳选择。当然，想人人网这种用户可以自己上传图片的网站，高质量和高清图片比比皆是，所以这条法则也是可以改变的。
人人网作为全球最大的中文SNS社区网站，有着其自身的优势和实力，在网页的版式设计上一直推陈出新，顺应时代的潮流。旧式博客网站布局正在悄无声息地变化，以时间轴式的版式结构模式逐渐取代大陆板块模式，新形式的网页设计更加富有创造性和实用性。社区网站对用户体验相当重视，用户决定网站的命运。怎么更好的服务用户，带给大众更多的形式和惊喜是产品经理和网页设计师们的当务之急。
时间轴的视觉要素以一条生命线为基准，从用户开始注册网站开始一直到当前用户在网站活动所发生的一切，都在生命线的左右相互交织，形成一条以时间为基础，以内容为核心的生命之网，对于用户来讲既新鲜又便捷，唯一的缺点就是和原先的版式设计模式大相径庭，这会对一部分老用户造成困扰，所以目前此模式还在推广之中。新模式和旧模式没有所谓的好与坏，只有适不适合。只要能经受得住大众用户的考验就是出色的设计，当然任何优秀的网页版式设计都逃不出准确的运用色彩、字体、图形等视觉元素。尽管中国目前SNS社区网站相对国外的同行业网站还有一段距离，但我们要相信，在不久的将来，一定会探索出条富有中国特色的网页版式设计之路。
【网页界面设计分析报告】推荐阅读：
网页设计分析报告06-02
网页制作设计报告07-04
网页设计实践报告12-17
网页设计暑假实习报告10-16
关于大学生网页设计的社会实践报告06-26
网页设计培训方案07-09
网页设计比赛总结10-28
网页制作与设计12-30
网页设计教案首页12-31
综合网页设计笔记02-05
