中秋网页设计

1、什么是UI和UX设计

UI 设计师

UI，指的是用户界面，也就是人与机器互动的界面。同时又有GUI和WUI之分，不过一般的话统称是UI设计师。

在PC端从事网页设计，我们称呼WUI设计师或者网页设计师。

在移动端，从事移动设计的称呼为GUI设计师。

而UI可以理解为UX的一个分支，不同于UX 设计师需要关注产品的整体感觉，UI 设计师更关注产品以怎样的界面呈现。

其实互联网领域中，UI 和 UX 设计师的界限相当模糊，在很多创业公司，这两个设计角色是合二为一的。这个就是为什么很多中小型的公司为什么要求UI设计会交互，或者交互又要懂UI的原因。

国内而言，目前一般把屏幕上显示的图形用户界面（GUI ：Graphic User Interface）都简单称为UI。

我们经常听到的UI设计师，其实指的是GUI设计师，也就是图形界面视觉设计师，负责产品或网站的图形、图标、色彩、视觉风格等，决定营造出什么样的视觉体验。

从视觉层面把控产品界面设计，确保UI稿在视觉上清晰的传达UX设计师的交互设计稿，也就是高保真视觉稿。

举个栗子，在设计一个数据分析界面时， UI 设计师可以决定使用滑块还是控制旋钮，通过这样的控件来阐述图表带来的直观感受。

此外 UI 设计师还负责制定视觉设计规范，确保产品设计的一致性；在规范中，明确一些UI 控件/组件的使用行为，比如确认误或取消提示。

熟悉不同分辨率的多端产品，诸如桌面端，Web 端和手机设备；能够完成高质量的视觉设计稿--从概念设计确定设计风格到详细设计。

设计内容包括图标、图形界面等；执行统一的设计语言，撰写并完善网站的设计规范，为产品注入美和生活气息。” 这可能就是UI设计师日常事项啦。

设计产出物 ：视觉设计稿，视觉设计标注规范 ，视觉设计规范文档，视觉切图

用的比较多的工具：Photoshop，Sketch，Illustrator，Fireworks，markman（视觉标注软件），cutterman。

2. UE 设计师

UX ，英文为 User Experience ,指的是用户体验。一般而言，国内 UX 设计师，也称为交互设计师或 UE 设计师（而国外的 UX 设计师指的是用户体验设计师，交互设计师指的是动效设计师）。

UX 设计师主要关注用户对产品的体验感受，确保产品逻辑的流程可以跑得通，甚至跑得顺、跑得精彩。

正如一千个人眼里有一千个哈姆雷特，一个设计问题往往也没有唯一解。UX 设计师会深入场景，探索多种不同的解决方案，这种深入思考通常能产生创新方案。

UX 设计师们通过头脑风暴、角色扮演、故事版等设计方法探索设计机会点，向着创造出“最好的”用户体验目标而前进，典型案例就是为新用户设计一套令人愉悦的登录流程。

总的来讲，UX设计师是设计人与信息产品的流程和关系，归根结底都要研究人、事、物的联系，它是一个囊括计算机工程、心理学、设计的交叉学科。

进行利益相关者访谈、用户访谈，挖掘用户需求，提炼用户任务流；完整体验不同产品，挖掘交互设计模式，设计交互模式，撰写交互设计稿，并最终形成交互设计规范/UIspec；跟进视觉设计和开发，确保产品正常上线” 这可能就是UX设计师日常事项。

设计产出物：流程图，网站地图，故事版，交互设计原型图（线框图），UIspec ，交互设计规范。

用的比较多的工具：axure，Visio，Sketch，Illustrator，Fireworks，InVision，PPT，Keynote，Photoshop。

2、平面设计和网页设计有什么区别？

平面设计以图片为主，淘宝，网页设计，包装，广告等等都需要
网页设计以代码为主，分前台后台，前台HTML或HTML5，jQuery等前端客户端代码，好多交互内容，后台大多ASP，PHP，Java，c#等可以做网站的解释语言或编程语言
平面设计本身不包含动画，加上动画等3d的叫高级美工或UI设计。
网页设计一样不包含美工，不过简单图总是要会处理的。

3、谁能给我个“关于中国传统节日的网页”（最好是自己制作的）？！

春节：挂灯笼、贴对联、领红包
元宵节：吃元宵、赏花灯
中秋节：吃月饼
端午节：吃粽子、赛龙舟
清明节：扫墓、植树
……
（希望对你有帮助~！）

4、怎么设置框架网页标题为"中国传统节日

1. 打开站点"Web"，编辑网页Index.htm，设置框架网页标题为"中国传统节日"，左框架宽度为180像素，并将yxj.htm作为右框架的初始网页；
2. 参考样页，新建左框架网页，在网页中插入6行1列表格，设置单元格间距为15、无边框，在表格中依次添加文字"元宵"、"清明"、"端午"、"中秋"、"重阳"和"腊八"，设置表格中文字格式为：华文新魏、24磅、居中；
3. 设置左框架网页背景颜色为Hex={FF,99,99}，背景音乐为Music.mid、循环播放；
4. 将Word文档laba.doc另存为Web页laba.htm，为左框架网页中的文字"腊八"建立超链接，指向laba.htm，目标框架为右框架；
5. 完善PowerPoint文件Web.ppt，并发布为网页，链接到网页中，具体要求如下：
(1) 打开Web.ppt，为所有幻灯片应用Web文件夹中的设计模板Moban03.pot；
(2) 将memo.txt中的内容添加到第二张幻灯片的备注中；
(3) 在第一张幻灯片右上角插入图片zq.jpg，设置图片高度为5厘米、宽度为7厘米，并设置该图片的动画效果为：盒状展开（Office2003为盒状、方向向外），在前一事件1秒后自动启动；
(4) 在最后一张幻灯片的右下角添加"声音"动作按钮，超链接到第一张幻灯片，播放鼓掌声；
(5) 将制作好的演示文稿以文件名：Web，文件类型：演示文稿（*.PPT）保存，同时另存为Web页Web.htm，文件均存放于考生文件夹下的Web站点中；
(6) 为左框架网页中的文字"中秋"建立超链接，指向Web.htm文件，目标框架为右框架。
6. 将左框架网页以文件名Left.htm保存，所有修改过的网页以原文件名保存，文件均存放于考生文件夹下Web站点中。

打开考生文件夹中"TEST.MDB"数据库, 数据库包括"院系"、"学生"和"成绩"表，表的所有字段均用汉字来命名以表示其意义。按下列要求进行操作。
1. 基于"学生"表，查询所有籍贯为"山东"的学生名单，要求输出学号、姓名，查询保存为"CX1"；
2. 基于"院系"、"学生"、"成绩"表，查询各院系男女学生"成绩"的均分，要求输出院系代码、院系名称、性别、成绩均分，查询保存为"CX2"；
3. 保存数据库"TEST.MDB"。

5、关于网页设计主题的问题

我觉得这个还是找个新颖的题材，不要找那种人家很多太广的范围，比如现在比较火的移动互联网，电商什么的，就近可以想想要过中秋了，中秋的主题页面，买产品也好，称述节日也好，可以把范围缩小，其实主题页面是比较考验设计感的，也是比较好出效果的，新颖独特的文案配上绚丽抢眼的图，我觉得这样的作品大家应该会喜欢！

6、三只松鼠页面中结合中秋节的活动请从配色和布局两个方面分析三只松鼠店铺的Banner 视觉设计？

时代造就英雄这句话一点都没有错，三只松鼠，创造了坚果类第一品牌;他运用的手段和小米的类似，但是他和小米不一样的地方是，三只松鼠运用的是全网营销，而小米用的是社群营销。 三只松鼠最开始起源于淘宝，所以如果你要想弄清楚关于，三只松鼠...

7、编写一个关于“中秋节”内容的网页代码

<srcipt>alert('中秋节快乐！月饼多多的！');</srcipt>

8、网页和网站有什么区别?

从某种程度上讲，网站是由网页组成的！

但是网站往往要复杂一些！显而易见的是，网站一般不止一个网页！
而且网站有一些其他的事情要解决！

首先，如果是INTERNET上的网站，就必须要确保保存网站文件的计算机（也就是服务器）一直开机，否则，人家要登陆你的网站，你的电脑是关的，就会出现“找不到服务器”的错误！当然了，一般的个人网站做不到这一点，所以他采取一个变通的方法，就是使用别人的计算机。有些人就专门提供这样的方便，他们容许你把你的网站文件放在他的电脑里，他承诺他不会关机！这种服务有收费的，有免费的！称为主页空间服务！
接着，一般的网站都要有域名，就是http://……，这实际上是域名服务！同样有免费的，有收费的！

另外，网站除了一般的网页之外，往往还有一些其他的东西：比如数据库，就拿“编程爱好者”来说，网站需要保存你的用户名，还有密码，以及这许许多多的帖子，这都需要数据库！
好的网站往往还有独立的程序文件！因为要通过程序判断你输的密码对不对等等！

总的说来，网站要比网页复杂，一个好的网站需要好好的规划，好好的设计！
网页就要简单的多！
但是网页的设计是网站设计的基础，只有学好了网页设计才能组织好网站设计！

9、急求一篇动态网页设计报告书。急！！！！！！！！！请各位大哥大姐帮帮忙。邮箱[email protected]

《网站设计与网页制造》设计说明书

课程名称：网页设计
设计题目：我的家乡
院系：建筑信息工程系
专业班级：计算机0901
学生姓名：
学号：200913190
指导教师:徐美霞
起止日期：2010年12月20到2010年12月24日

第 1 页 共 13 页
我的家乡网页制作过程
一、 网站开发目的和功能简介
随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，、网站在当今时代被越来越多的人用来宣传，通过网站的制作可以让老师、同学以及朋友更好的了解自己以及别人想要知道的事情，我现在做的是关于我的家乡，为别人提供了一个更深入了解自己的一个平台，本网站主要功能是让更多的人去了解我了解我的家乡
二、 网站的设计
2.1 网站的名称：我的家乡
2.2 网站栏目划分
根据本网站的内容和功能划分为：我的心语、导航链接、各地方的简介、体现家乡的图片、版权声明等。
（1）我的心语——对我们宿舍的六个简介，提示对照网站的主题体现我们的家乡；（2）导航链接——链接到各自设置的网页各自的家乡；（3）各地方的简介——简单介绍了我们各自的家乡，了解了家乡的知识文化；（4）图片——列举了每个地方的代表图片，用另一种方式展现出不同的风采；（5）版权声明——声明了网站的建设者
具体如图所示:

2.3网站导航应用于所有页面提高网站的操作友好性。
2.4网站的风格与色彩选择：页面以浅绿和浅黄色为主。浅绿色体现了活力，字体实用浅棕色和淡淡的灰色给人一种清析、稳重的感觉。所有页面色调统一，布局相似。
2.5网站目录结构设计合理：不同素材采用不同学文件夹分开存放。如图片放在image
文件夹、flash放在flash文件夹内、完成作业放在以自己名字命名的文件夹内等
三、 聊城首页的制作过程
3.1首页版图：
首页、导航链接、内容、个网页链接

3-1

整个页面分为四部分，第一部分是以一个flash文件显示动态的图片，主要是网站的突出显示；第二部分是导航栏；第三部分是详细内容，其中网页中的文字排得整齐紧凑，这样能给人一种舒服的感觉。在网页适当的地方加一些图片，每张画面再加一些不同的文字说明，使得网页显得更加的精美；第四部分是各网页链接。采用这种布局，主要是给浏览者一种简单、清晰、明了的感觉，使网站整齐划一。
具体的布局显示如下所示：

3-2
3.2制作过程：：本网页制作分为三个部分：顶部是用flash制作的页头。中部又分为左右两个部分，左边为家乡简单的介绍和链接，制作的动态图片使用时间轴让图片自动播放，还有从顶部滑下的图片自动循环播放；右边为家乡的各景点的见解。我还为网页设置了背景图片，在最后利用spry选项卡添加的图片。
四、聊城首页制作过程
4.1新建一个页面，命名为聊城首页（index）
4.2在页面属性的外观中设置四边边距为0，文本颜色设为：#9900CC，大小设为18像素；在链接中设置下划线样式为：有下划线；链接颜色为：#0000FF。
4.3（1）首页（index）制作
利用样式定义各个部分的高宽，将./image/195911NM-10.gif设为背景图片。页头图片为水城明珠.jpg设置flash动画为左右橘色.swf代码如下：
页头图片的设计代码：（图如上3-2）
<div id="Layer3" style="left: 30px; top: 34px; width: 186px; height: 175px;"><span class="STYLE3"><a href="liaocheng.html"><img src="../image/201042717165.jpg" name="Image1" width="186" height="174" /></a></span></div>
<a name="dingbu" id="dingbu"></a>
<table width="967" height="817" border="1" align="center" bordercolor="#000000">
<tr>
<td height="190" colspan="2" valign="top" bgcolor="#FFFFFF"><img src="../image/水城明珠.jpg" width="956" height="202" /></td>
</tr>

Flash动画设置代码如下：
<div id="Layer2">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','957','height','210','src','../FLASH/左右橘色','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','transparent','movie','../FLASH/左右橘色' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="957" height="210">
<param name="movie" value="../FLASH/左右橘色.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/左右橘色.swf" width="957" height="210" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
（2）景阳冈（jyg）页设计
此网页运用了一些代码实现了文字的滚动代码：<td width="213" <td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="left" width="310" height="620" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p><span class="STYLE21">景阳冈其址在阳谷城东18公里处，沙冈顶部正中，建有一座民族形式的庙宇，俗称“武松庙”，据传始建于明代中期,后被毁。现存古庙为1958年修建。庙前方有一幢刻有“景阳冈”三个大字的石碑，系我国当代著名书法家舒同所题。庙东二、三百米处，有一刻有“武松打虎处”的墨玉色石碑。 1973年以来，经省考古队多次试掘，认定景阳冈为“龙山文化”遗址国家首批AAA级景区，水浒旅游线上重要景点，武松打虎人人皆知，武松打虎的地方不是人人都去过景阳冈景区总占地面积33.3公顷。景区内沙丘起伏，莽草丛生，林荫蔽日，主要景点：已有200余年历史的山神庙庙的左前方立有原中共山东省委书记舒同题写的“景阳冈”石碑，右前方立有著名书法家杨萱庭书写的高3米的“虎”字碑；南宋时期所立“武松打虎处”石碑；赵朴初所书写门匾的“武松庙”；由徐悲鸿的夫人、书法家廖静文题名的六角单檐的虎啸亭；由著名画家刘继卣创作的“武松打虎”浮雕石像；有传为武松打死的那只老虎的化身——“天下第一虎”石，三碗不过冈酒店……</span><br />
</p>
</marquee>
页头图片为聊城.jpg设置flash动画穿越星空.swf、烟花绽放.swf代码如下：
<tr>
<td height="186" colspan="3" valign="top"><img src="../image/聊城.jpg" width="1016" height="224" /></td>
</tr>

Flash文件代码：
<div id="apDiv1">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','991','height','217','src','../FLASH/穿越星空','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/穿越星空' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="991" height="217">
<param name="movie" value="../FLASH/穿越星空.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/穿越星空.swf" width="991" height="217" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
<div id="apDiv2">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','390','height','211','src','../FLASH/烟花绽放','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/烟花绽放' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="390" height="211">
<param name="movie" value="../FLASH/烟花绽放.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="../FLASH/烟花绽放.swf" width="390" height="211" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div>
完成效果如下

3-3
（3）凤凰苑（fhy）网页设计
凤凰苑网页设计为突出凤凰苑的特色页头采用凤凰园内比较突出的产品来体现凤凰苑的科技（仙人掌、日本无花果等……）页头采用flash是左右5.swf、蝴蝶飞飞.swf，此网页插入的是一个由flash做的图片实现图片的从右向左的滚动，使用了上面网页中文字滚动的方法，使用的代码
（<div id="apDiv7">
<td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="left" width="1020" height="150" scrollamount="10" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p><span class="STYLE29">聊城市凤凰苑农业科技园，引种国内外名优稀特果树品种100余个，绿化和国家造纸工业用树毛白杨品种20几个，并繁育了600余万株苗木，以满足本市及周边地区农业种植结构调整和发展农村高效经济的需要。
主要品种如下：
（1）日本仙桃王： 该桃有如下显著特点：个头特大，平均单果重500克，最大可达1350克；品质极佳，外观全红，脆肉型、香甜、爽口，含糖量可达23％；极耐贮运，常温下可存20天，恒温库可存3至4个月，实为中秋、元旦，待客之佳品；树上挂果期长，8月下旬至9月下旬，可陆续面市，这是其他任何桃品种所不能比拟的。
（2）韩国早熟有名桃： 在凤凰苑区，6月底成熟，全红，鲜艳极为漂亮，单果重可达300克，脆肉型浓甜，多汁，极为丰产，与其他早熟桃相比，风味极佳，市场开发前景看好。
（3）韩国有名桃：韩国农家实生育成，九月下旬成熟，平均单果重350克，清香味浓，汁多味极甜，半溶质，耐贮运，外观红色鲜艳，是韩国晚熟主栽品种。
（4）美国扁桃： 86－1、86－2、86－9是从美国扁桃中选育出的几个优系，86－1、86－4出仁率均在45％以上，86－9又是其最好授粉品种。美国扁桃又称美国大杏仁，具抗旱耐瘠薄，适应性强，耐粗放管理等特点，一般栽后三年结果，五年形成规模产量，丰产期亩产大杏仁500公斤，国内市场现行价56元／公斤，效益极为可观。美国扁桃是荒滩、四旁发展的理想树种，也是农家致富的理想树种。
（5）六月雪梨： 是我国研究开发的最早品种梨，比绿宝石早熟20天，平均单果重180克，果肉细白，石细胞无，脆甜多汁，通过我园区高接观察，此品种座果率高，极丰产，抗黑星病。
（6）脱毒草莓系列：凤凰苑从国家果树所引进脱毒草莓系列品种：美香莎 荷兰引进，是当今垄断欧美早春市场的王牌草莓品种，极早熟，果坚硬，风味佳。果肉红色，最大单果重可达118克，芳香，浓郁，适促成半促成栽培和落地栽培，将是农业高效开发的理想品种。其他草莓品种，鬼怒甘、酒心糖、新哈尼、全明星等18个。</span><br />
</p>
</marquee>
</div>）
改变字母的滚动方向向左（left）实现不同于上一网页的滚动，页头flash的设置，同与上一网页。
完成效果图如下

（4）光岳楼（gyl）、东昌湖（dch）采用同样的设计完成。
五、设计技术总结
为了使我们的网站更加实用、内容丰富，我们在网站里用了很多的技术，包括flash photoshop 等图片处理和动画，运用dreamweaver中相关知识制作各种特效比如图层运用、时间轴运用等。
5.1在素材收集和处理上本人花费了大量时间处理网站动画、真实照片收集、个人信息。如应用PHOTOSHOP对相片进行整体处理。利用flash制作了滚动动画。
5.2文字滚动效果，代码如下：
<td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="up" width="179" height="150" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
<p>内容 <br />
</p>
</marquee>
六、实习心得
本次网站主要是运用本学期学过的知识来布局应用、制作动画效果，通过本次的网站设计，运用了本学期所学到的知识这样不仅复习了本学期学过的一些知识，同时也加深所学知识的内容，这次的网页制作使我学会了很多，有关怎么收集资料，怎样用最快的方法收集资料，怎样收集有效的资料，怎样整理资料，怎样使自己的下载的资料便于查找，也学会了网页的制作，学会了运用网页特效，怎样的特效才能凸现网页主题。在制作网站的过程中，也碰到了不少的不明白的地方通过老师同学的帮助也解决了不少问题，通过循序渐进的学习慢慢地完成了本次的网站建设，这次做的网页虽不是很好看，有不足之处，比如动态页面的制作、脚本的运用、一些效果的运用等运用的不够灵活，同时网页布局也不是很完善，可是我花了很多时间来完成它，所以呢，它对我以后做网页有很大的帮助。在此次做网页的过程中也让我学到了很多东西，所以呢从我内心来说我是很满意我的这次经历，同时也要谢谢老师安排这样的实习周，为什么呢？因为在制作过程中我不仅学到了书上没有的东西，也培养了我独立思考问题的能力，同时还增强了同学之间的团结互助的友谊。因此，不论从哪个角度来说，老师此次布置的任务是上大学以来唯一把知识用于实践的第一回，再一次谢谢你老师。总之这次设计就是在不断的“发现问题——>解决问题——>再发现问题——>再解决问题——>”这个学习过程中完成的。今后我将继续努力，把