全国中小学电脑制作培训及作品赏析2

全国中小学电脑制作培训及作品赏析2网页设计网页设计作品要充分体现数字技术开放性、交互性和共享性的特征；内容上无论什么选题都要紧密结合作者自身的学习生活和社会实践;要具有较强的探究性。使用HTML语言或网页制作工具编制的、阐释某个主题或传递某类专题信息的作品。作品应充分体现数字技术开放性、交互性和共享性的特征；内容要紧密结合作者的学习生活和社会实践，避免简单的资料堆砌。在水平分辨率为1024（或以上）像素的显示屏上浏览时，页面保持整齐、美观。作品（非压缩文件）大小建议不超过50MB。一、关于网页设计二、网页设计的要求：主题明确、内容积极向上，能科学、完整的表达主题思想。作品主题表达形式新颖；内容创作注重原创性，具有一定的想象力和个性表现力。能够反映出作者有一定的审美和制作水平，界面美观、设计布局合理。软件使用熟练，视频音频完整，导航和链接无误。三、网页设计的内容与方法：(一)网页设计的选题及内容要求(二)网页设计的选题方向(三)网页设计的板块内容组织(四)网页的版面设计(五)网页设计的色彩规划(六)网页设计的基本步骤(七)网页制作存在的主要问题（一）网页设计的选题及内容要求孩子自身的真情实感、学习与生活、探究和创作的欲望、心得与收获…反映当前学习、生活中的难点：探究性学习、研究性学习、综合实践活动…捕捉学习生活中的亮点：学习生活、校园文化、科技、航模、社会实践与社区服务…留心社会生活中的热点：德育建设、环境、交通、安全、旅游、民俗…观察世界变化的焦点：国家、社会、学校、家庭…（一）网页设计的选题及内容要求适合:选题要符合并紧扣时代要求新颖:题目要新颖，含蓄有韵味，有吸引力，有创意健康:内容要健康，内涵要深刻科学:选题要体现科学原则，不要违背科学常识促进:能促进学生的发展，实现信息共享有利:能发挥自身优势,扬长避短（二）网页设计的选题方向

主题探索发现实践活动网站（研究型学习网站）（学科知识型网站）对身边的实物的细致观察、亲自实践、研究：对科普科学知识、社会科技发展知识的学习和研究1.主题探索发现实践活动网站1.主题探索发现实践活动网站1.主题探索发现实践活动网站1.主题探索发现实践活动网站2.家乡特色网站对家乡文化的挖掘、探究；对当地地理、历史、风俗、传统文化的研究等2.家乡特色网站2.家乡特色网站2.家乡特色网站

3.个人成长型网站对学习、兴趣爱好、生活的感悟与收获反映孩子内心世界、个性发展的网站；3.个人成长型网站-----反映孩子内心世界、个性发展的网站：3.个人成长型网站-----反映孩子内心世界、个性发展的网站：3.个人成长型网站-----对学习、兴趣爱好、生活的感悟3.个人成长型网站-----对学习、兴趣爱好、生活的感悟4.公益性网站表现对是社会公益、精神文明的关注。4.公益性网站4.公益性网站1.挖掘主题要深刻，内容要丰富

围绕主题进行问题研究性学习

搜集整理有关资料、对问题的分析、所形成的观点与结论

深入挖掘与主题相关的知识，积累研究性学习的过程性资料，将学习心得凝结成文

围绕主题进行调查实践，所准备资料应包括文字、图片、音视频、动画及软件等形式的素材

科学有序地整理与主题相关的各种资料

构思栏目的设置，应紧扣主题,分阶段或分角度展现学生探究学习的过程、结果，特别是学生在不同阶段、从不同方面、对问题研究的所得。构思要巧妙、创意要独特，结构要清晰。（三）网页设计的板块内容组织·

首页的画面要生动、有趣，富于吸引力·

整个作品的音乐、画面动态语言要有震撼力和感染力·

网页页面的设计要突出主题、引人入胜·

结构方式要与作品的内容吻合·

整体布局要合理、美观，风格要统一，制作要精美·

人机交互方便，结构清晰，导航和链接无误

2.表现方式要有创意，形式为内容服务响亮的主题据视觉冲击力的开篇动画扑面而来的孩子探究的身影探究的视频原创的文章清晰的层级结构漂亮的版面设计

好的网页设计：（四）网页的版面设计2.封面设计即形象页设计3.最佳视域----第一屏设计页头设计页脚设计1.网站的层级结构网站的层级结构网站是由网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站线性网站：一页连接一页树状网站：分层排列非线性网站：上述两种网站的结合（四）网页的版面设计2.封面设计即形象页设计形象页设计：动画展示，增添趣味性，加深观者的印象，突出主题。避免冗赘，过分渲染，文件过大（四）网页的版面设计2.封面设计即形象页设计（四）网页的版面设计页面中不同的视域，注目程度不同，给人心理上的感受也不同。网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。浏览者的眼睛首先看到的是屏幕的中间偏上的区域,即网页的第一屏展示最为重要。根据视觉心理学的研究，人的视线对于版面的视觉诉求力大体是上部比下部强，左半部比右半部强。3.最佳视域----第一屏设计（四）网页的版面设计3.最佳视域----第一屏设计页头设计页脚信息完整最佳视域（四）网页的版面设计3.最佳视域----第一屏设计页头设计页脚信息完整最佳视域（四）网页的版面设计3.最佳视域----第一屏设计（四）网页的版面设计最佳视域3.最佳视域----第一屏设计（四）网页的版面设计4.标题空间---明示主题（四）网页的版面设计4.标题空间---明示主题（四）网页的版面设计4.标题空间---明示主题A、标题大小、粗细要与标题相称越大、越粗、越有力量检查一下标题字号是否太小（四）网页的版面设计4.标题空间---明示主题B、通过高色价明示标题鲜艳的色彩能够强化标题强调主体性（四）网页的版面设计4.标题空间---明示主题C、通过宽阔的领地衬托标题

标题的领地是指将标题周围的图像和文字移远而得到的空白部分。空白的部分为标题的支配空间，也就是我们所说的领地。领地越广阔，标题越醒目，主体性也就越强。

（四）网页的版面设计4.标题空间---明示主题C、通过宽阔的领地衬托标题（四）网页的版面设计5.排版样式---标明信息A、利用排版样式传递信息排版样式是不说话的口信（四）网页的版面设计5.排版样式---标明信息A、利用排版样式传递信息排版样式是不说话的口信（四）网页的版面设计5.排版样式---标明信息B、利用图片传递信息图片具有强烈的信息性看图的一瞬间，信息就被确定下来（四）网页的版面设计5.排版样式---标明信息c、用图片表示欢迎态度（四）网页的版面设计5.排版样式---标明信息c、用图片表示欢迎态度（四）网页的版面设计5.排版样式---标明信息c、用图片表示欢迎态度。欢迎过度，适得其反（四）网页的版面设计6.整理内容区---分组（群化）整理内容信息——利用留白和划线进行分组（四）网页的版面设计6.整理内容区---分组（群化）整理内容信息——利用留白和划线进行分组（四）网页的版面设计6.整理内容区---分组（群化）整理内容信息——利用色块进行分组（四）网页的版面设计6.整理内容区---分组（群化）整理内容信息——利用色块进行分组（四）网页的版面设计6.整理内容区---分组（群化）整理内容信息——利用色块进行分组（四）网页的版面设计6.整理内容区---分组（群化）整理内容信息——利用色块进行分组跳过（四）网页的版面设计6.整理内容区---分组（群化）整理内容信息——利用色块进行分组（四）网页的版面设计跳过7.文本信息设计1）文字不同的字体具有不同的性格特征，设计者可以利用不同字体的形态创作具有多种表现力的视觉特效，可以用粗壮、稳定的字体形态；也可以用精细、柔美的字体。（四）网页的版面设计2）字号表示字号大小的单位有磅（Point）和像素（Pixel）。通常磅适用于所有的浏览器和操作平台。12号和14号字的字号大小比较适合网页的正文显示。字号的大小影响文字的可识别性，根据信息内容的主次之分，需要使用不同大小的字号。例如，标题和需要强调的信息要用较大的字号，辅助信息可使用较小的字号。但在字号相同的情况下，浏览器中显示的不同的字体也会有不同的显示效果。7.文本信息设计（四）网页的版面设计3）文字编排文字不只在其可读性方面起到传达信息的作用，在网络形象设计的版面设计中，文字还可以通过不同的排列组合传达不同的视觉艺术效果。因此，文字设计在现代网络形象设计中作为一种艺术形式也起到不可忽视的作用。7.文本信息设计（四）网页的版面设计

3）文字编排两端对齐：无论竖排还是横排，文字从左端到右端的长度是均奇的，文本段落形成一个规整的面，这种排列方式严谨，美观。7.文本信息设计

3）文字编排居中排列：以页面中心轴线为标准，文字居中向左右均分排列，行首和行尾根据每行字数的不同有长有短，视觉上有一定的动态感，产生对称的形式美感。7.文本信息设计

3）文字编排左对齐或右对齐：左对齐是使文本行首在左侧形成一条清晰的垂直线，右侧行尾根据每行字数不同长短不一。右对齐是使文本行尾在右侧形成一条清晰的垂直线，左侧行首根据每行字数不同长短不一。这种编排方式有松有紧，视觉上有虚有实，产生一种节奏与韵律上的形式美感。左对齐的排列方式与从左到右的阅读习惯相符合，但右对齐的视觉效果较独特。7.文本信息设计

3）文字编排图文结合排列：文字包围图片的排列方式，使文字在图片的辅助说明下，更增强了其可读性。在网络形象设计中，一个页面最好避免出现大段的文字，因为浏览器的色光容易使人眼产生视觉疲劳，如果在一个页面中文本超过两屏的话，就很难保证访问者会把完整的内容看完，遇到这样大段文字的时候，最好能分到几个页面中，在同一个页面中的文字也要进行分段，每段的文字精简一些，或者把大段的文字作为可下载的方式。还有一点值得注意的是，在文本的某个段落中间，或某句话中最好不要出现链接，为了能使访问者完整的阅读整段文本，要把相关链接单独放置。7.文本信息设计4）图形化的文字设计在网络形象设计中，文字除了具有传达语义信息的功能外，还可以作为图形语言来表现。通过对文字进行图形上和编排手法上的夸张、变形，使其更具有形式上的美感。通常运用的设计手法有文字与文字的重叠；文字与图形的重叠；文字的大小、明暗、疏密、色彩等的变化。虽然有些手法会减弱文字的可识别性，但却使画面具有独特的视觉效果，增强了网络形象设计手法的多样性。7.文本信息设计（四）网页的版面设计色彩的联想色彩的应用（五）网页的色彩规划

1）红色（Red）红色具有强烈的刺激作用，红色代表热的、活泼的、健康的、引人注目的，表达愉快、热情、权势、吉祥、幸福、活力等都适宜选用红色。红色与黑色组合能够使红色更加鲜艳；与黄色组合具有温暖明快的意向；与绿色等色组合产生强烈的对比。在网络形象设计中，红色常作为主色和调和色出现。彩色的联想

2）黄色（Yellow）黄色是最为光亮的颜色，它的明度很高，非常引人注目。黄色代表光明、快乐、健康、自信、希望、荣誉、警示等。黄色系的颜色与红色系的颜色搭配显得热情；与红、蓝、绿、紫等原色、间色搭配，显得明朗活泼，具有童话般的意象；与黑色搭配，具有很强的警示作用；与灰色搭配具有新潮浪漫的气息。在网络形象设计中，黄色常作为配色出现。

3）橙色（Orange）橙色具有很强的视觉冲击力及引人注目的特点。橙色代表强烈的、冲动的、大胆的，表达光明、华丽、欢乐、兴奋、悲伤等情感。橙色与明亮的黄绿或暖色组合，表达热情、新潮；与黑、白、灰组合，产生强烈的视觉效果。在网络形象设计中，橙色使用范围较广，适合表现运动、时尚、食品类网站。

4）蓝色（Blue）蓝色的性格颇为冷静，在自然界中它就是天空、海洋的颜色。蓝色也是想象力和创造力的象征。蓝色代表沉静、理智、遥远、自由、永恒、忧郁等情感。蓝色与无彩色的黑、白、灰白色组合，诙谐亮丽；与灰色组合，柔美清爽；与黑色组合，新潮大胆；与黄色组合，给人健康的感觉。在网络形象设计中，蓝色常用于科技类的商业设计中，还可用于政府或表现男性主题的网站中。

5）绿色（Green）绿色是自然界的颜色。绿色的刺激度和明视度均不高，对于生理和心理的作用都较温和。绿色代表自然、新鲜、平静、安宁、生命力、安全感、和平、理想等情感。绿色与其它色彩组合均能收到良好效果，与白色组合，清爽明快；与黑色组合，高贵自然；与灰色搭配，冷峻时尚。在网络形象设计中，常用于服务业、卫生保健业等类型。

6）紫色（Purple）紫色是由红与蓝两色混合而成的中性色，它的补色是黄色。紫色具有华丽、优雅、神秘、幻想的意味，代表优美、情调、艺术、高贵、华丽、浪漫、尊严、孤独、忧郁等情感。紫色是所有颜色中最捉摸不定的颜色。紫色与黑色、金色组合，具有戏剧性的效果，显得华丽、庄重、有品位；与鲜艳的黄绿、黄灰色组合，充分显示出紫色的注目性；与浅褐色组合，具有成熟、高贵、典雅的效果。在网络形象设计中，常用于表现女性主题的网站。

7）黑色（Black）黑色属于无彩色系，本身无刺激性，但与其它色彩相搭配时，会使其它任何一种颜色都表现的更为强烈，而增强刺激性。黑色代表黑暗、沉默、静止、严肃、忠义、力量、死亡、恐怖、悲伤等情感。黑、白、灰的色彩搭配具有很强的个性，黑色与鲜艳的颜色组合醒目而艳丽。在网络形象设计中，黑色的运用范围很广，通常与其它色彩搭配使用，常用于娱乐、科技、艺术等类型的网站。

8）白色（White）白色是黑色的补色，也属于无彩色系，是中性色之一，白色的亮度最高。白色代表纯洁，和任何色彩组合搭配都有良好的效果。白色代表纯洁、明快、真理、神圣、平等、光明、无邪、自由、正直、冰冷等情感。白色与黄色系、灰色组合，具有恬静、优美的意象；与蓝色系组合，具有清爽怡人的意味；与艳丽的颜色组合活泼多变；与深色调组合具有成熟典雅的魅力。在网络形象设计中，白色属于搭配色。

9）灰色（Grey）灰色也是中性色，也属于无彩色系。灰色既不是彩色的，也不是明亮的，灰色就是淡黑色，灰色具有从浅灰色到暗灰色的层次变化，色感均有所不同。灰色同样适用于与其它色彩搭配使用，起协调作用。灰色代表平凡、谦虚、安静、成熟、中庸、无聊、消极等情感。黑白系列的组合，对比强烈，由于灰色的介入，是它们变得柔和协调起来。鲜艳色彩的组合，色彩对比过于刺激，加入灰色会提高画面的对比质量。在网络形象设计中，灰色主要运用在一些高科技产品或格调高雅的企业、艺术类网站中。2.色彩的应用

1、网页色彩搭配的原则（1）适应性（2）独特性（3）统一性（五）网页的色彩规划

2、网页色彩搭配的技巧（2）有彩色系（红、橙、黄、绿、青、蓝、紫）使用单色调：选定一种颜色，通过调整其饱和度和透明度的方式，以产生新的色彩来丰富页面的层次感和统一性。

2、网页色彩搭配的技巧（2）有彩色系（红、橙、黄、绿、青、蓝、紫）

使用邻近色：邻近色是指在色相环上处于90度以内相邻的颜色。邻近色的搭配可以避免网页色彩过于杂乱。

2、网页色彩搭配的技巧（2）有彩色系（红、橙、黄、绿、青、蓝、紫）使用对比色：对比色是指在色相环上处于150度左右相对立排列的两个颜色。使用对比色搭配可以使页面突出重点，起强调作用。

2、网页色彩搭配的技巧（3）不同色彩的组合尝试

3、网页色彩搭配应注意的问题⑴在网络形象设计中并不是色彩运用得越多越好，而是需要确定一两种主色调，根据主色调来搭配使用合理的辅助色，以使网