《网页美工设计》课程教案
《网页美工设计》课程教案
《网页美工设计》课程教案
《网页美工设计》课程教案
《网页美工设计》课程教案
《网页美工设计》课程教案
《网页美工设计》课程教案
《网页美工设计》课程教案
《网页美工设计》课程教案
《网页制作》教学设计 法、说学法、说教学过程、说板书设计。 一、说教材： (一)教材分析：本节内容是省编《信息技术》全一册第六章 网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容，2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块，但针对现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：学生自学，自练Word制作网页的基本方法；第二课：让学生自己构思创意一个内容丰富，页面美观的网页。 (二)教学目标：根据对教材的分析及学生实际情况，制定如 下的教学目标： (1)知识目标：1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标：1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容 丰富的网页。 (3)情感目标：1、教育学生正确认识和理解信息技术相关文 化，伦理和社会问题，负责地使用信息技术。 (三)教学的重、难点：根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知 道网页间互相链接的方法，所以我把超级链接做为本节的
浅析网页界面设计——首页设计 首页设计，需开宗明义突出主题 开宗明义，无论是对于一篇文章、一场会议或一部专题片，还是对于一个网站来说，都是必不可少的。那么能为一个网站开宗明义的地方（标签）就是Title（标题）和Description（描述、副标题），而能够为Title和Description 提供进一步诠释的就是网站的首页。 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上，反过来说，页面要向用户展示哪些信息是决定其重要与否的首要指标。在网站页面中，网站标题、副标题、菜单（狭义上的导航，请参看《WEB导航设计》）、用户登录信息、关于、版权信息这几项是网站的基础信息，是一个网站身份的象征，承载着向用户表明网站立场、提供何种产品或劳务、网站自我介绍、如何联系网站的重要使命，在设计页面时，这些信息必不可少。 而网站的首页，除了需要显示以上这些基础信息之外，最重要的是还承担着网站转化率的重任，这也是所有类型的网站首页的最重要任务。如何让网站首页完成这项重要的任务呢？我的理解是把网站所提供的产品或劳务通过版式设计、文案设计、色彩设计之后，展示在首页适当的位置，并使其不受其它信息元素干扰，甚至使其它元素为它（产品或劳务）服务。 突出主题思想 知道了首页需要展示哪些信息，知道了信息之间的权重，如何把信息呈现得更符合信息本身，却不是一件容易的事，需要时间的磨练与经验的积累。就设计本身而言，是一件感性的事，不像数学公式，它缺乏严谨的理论做为指导，所以在工作中，经常出现与Boss、同事意见相左的情况。我个人的经验是在非重要信息的设计上使其具有普适性，在重要信息的设计上突出设计的主题思想，在与Boss、同事讨论时，尽量把讨论的重点放在主题思想的呈现方式与其对转化率（或市场目标）的作用之上。你可以说这是功利的设计，没错，所有的设计都是以商业利润为最终目的。 如何突出 在版式设计上，要求把信息分门别类，让用户在扫描（只为扫描而设计，请参考《Don’t Make Me Think》）页面时保证视觉流的流畅性，在短时间内（3-5秒）发现首页包函哪些区域（如菜单、广告、注册、个人信息、链接、按钮等），方便用户在第一时间内做出选择。在设计过程中，建议严格遵循四个排版的原则，即：对比、对齐、重复和亲密性（请参看《写给大家看的设计书》)。如https://www.doczj.com/doc/ef15572559.html,、https://www.doczj.com/doc/ef15572559.html,、https://www.doczj.com/doc/ef15572559.html,的首页设计。
1、页面命名 每个页面都要有与之模块对应的名称。 2、页面兼容性 （1）页面大小兼容 o自适应1366*768px及以上的分辨率 o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条） （2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。 （3）浏览器兼容 兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。 o文字 文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。 o容图片 容图片均带1px描边；容图片未加载出来时显示系统默认图片。
1、数据操作 显示数据（表格） （1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。 （2）单无格：文字图片容左对齐，数字、金额容右对齐。 （3）操作容原则上均用文字表达，如“编辑-删除” （4）鼠标划过表格单行时，颜色高亮。 （5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。 （6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。 选中数据 （1）勾选全选则选中当页所有记录 （2）去掉当页某个记录的勾选，则全选也去掉勾选。 （3）翻页后，自动去掉已勾选的记录及全选的勾选。 （4）翻页后是否进行选择记录的保留应试具体业务而定。 （5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
新增数据 （1）新增的记录必须排在新增页的首行； （2）所有列表页面默认按数据新增时间倒序排列。 （3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （4）提交成功后自动回到数据列表页。 （5）提交时需对主要标识字段进行重复值、空值（空格）判断。 修改数据 （1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。 （2）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。 （4）提交时需对主标识字段进行重复值、空值（空格）判断。 查询数据 （1）把所有查询条件全部显示出来，并放在查询列表上方位置。 （2）每个查询条件必须有预置文案。 （3）每次查询后保留当前输入的查询条件。
第一讲网页设计概述 使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。 【教学内容】 讲解网页设计的相关术语及网站制作的基本流程。 【教学重点】 网页设计中的若干术语。 【教学难点】 理解网页设计中的若干术语。 【教学方式】 讲授式、讨论式、案例分析式。 【教学参考】 1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。 2、《Internet 网页工场》Wittime工作室重庆出版社。 3、《WEB网站设计》Joel Sklar著高等教育出版社。 4、《HTML网页制作教程》材义语编著铁道出版社。 【新课内容】 1.1 WWW和URL 1.1.1 Web的起源 Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构 Web最大的特点是使用了超文本（Hypertext） WWW采用C/S（客户机/服务器）工作模式 在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式 协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用 Web浏览器是浏览Internet资源的客户端软件 在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等 1.2.1 IE5的界面 1.2.2 IE5的使用 1.3 网页中所使用的技术 1.3.1 HTML语言和XML语言 1、HTML语言 ?HTML只使用SGML中很小一部分标记 ?HTML语言（Hyper Text Markup Language 超文本标记语言） ?HTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具 2、XML语言 XML（eXtensible Markup Language） 1.3.2 动态网页 1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序 1.4 制作网页的基本方法 1.4.1 制作网页的基本步骤 1、确定网页的内容 2、设计网页的组织结构 3、资料的收集与整理 4、选择网页的设计方法 1.4.2 制作网页时要注意的问题 1、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。 4、网页中插入的图片要尽量的小。
《HTML+CSS 网页设计与布局》课程教案 授课教师：授课班级：地点：周课时： 5 课时网页设计基础知识 章节内容 教学目标重点难点教学Dreamweaver软件介绍及其基础操作 HTML 基础知识及常用标记 1)使学生了解网页设计的相关基础知识； 2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。 1)了解网页设计相关概念和网页的类型； 2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。课堂讲授、案例讲解与指导 方法 教学 计算机机房 环境 时间 教学过程及内容提要备注分配 一、引入 约 15 分钟 教 1 、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内 学 容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种 过 学习氛围，尊重同学，互帮互学，真正达到学以致用； 程 2 、提出问题：上过网吧有谁自学过网页设计听说过HTML或者CSS 设 这两个概念吗 计 约 35 分钟学生理解3、
二、告知学生课堂任务 本次课所学习的主要内容是HTML相关基础知识和 Dreamweaver软件基础操作； 三、逐步演示讲解分析教学内容 1、网站和网页的区别： 2、（ 1 ）网页是Internet基本元素； 3、（ 2 ）网站由网页组成； 4、静态网页和动态网页： 5、静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静 态网页的后缀名通常为.htm 、.html 、 .shtml 、 .xml 。 6、动态网页：许多人认为网页会动就是动态网页，这是个错误的观点， 在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢 了。真正的动态网页是指实际上并不是独立存在于服务器上的网页 文件，只有当用户请求时服务器才返回一个完整的网页。也就是说， 它是返回到了客户端上的网页。例如网页文件是以ASP 、PHP 、JSP、 ASPX 为结尾就是动态的网页了。 约 20 分钟学生熟记 7、静态网页的特点： 8、（ 1 ）内容相对稳定，容易被搜索引擎检索到； 9、（ 2 ）没有数据库支持，在网站制作和维护方面工作量大； 10 、（3）交互性差，在功能方面有很大的限制。 11 、动态网页的特点： 12 、（1）以数据库技术为基础，可大大降低网站维护的工作量；
网站界面设计应遵循的几个原则 网站用户界面（Website User Interface）是指网站用于和用户交流的外观、部件和程序等等。如果你经常上网的话，会看到很多网站设计很朴素，看起来给人一种很舒服的感觉；有点网站很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。网站界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站设计变成了一门独特的艺术。通常的讲，企业网站用户界面的设计应遵循以下几个基本原则： 1．用户导向（User oriented）原则 设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计网站。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。网页的设计者要清楚，用户之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于网站的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成混乱。 2．KISS（Keep It Simple And Stupid）原则 KISS原则就是"Keep It Sample And Stupid"的缩写，简洁和易于操作
是网页设计的最重要的原则。毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片。该原则一般的要求，网页的下载不要超过10秒钟（普通的拨号用户56 Kbps网速）；尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；网站所有的内容和服务都在显眼处向用户予以说明等。 3．布局控制 关于网页排版布局方面，很多网页设计者重视不够，网页排版设计的过于死板，甚至照抄他人。如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在网页设计上所要遵循的原理有： （1）Miller公式。根据心理学家George https://www.doczj.com/doc/ef15572559.html,ler的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为7±2 比特。这一原理被广泛应用于网站建设中，一般网页上面的栏目选择最佳在5～9个之间，如果网站所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。例如https://www.doczj.com/doc/ef15572559.html,的栏目设置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices 共八个分类。https://www.doczj.com/doc/ef15572559.html,的栏目设置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七项。然而很多国内的网站在栏目的设置远远超出这个区间。 （2）分组处理。上面提到，对于信息的分类，不能超过9个栏目。
《网页设计基础》教案 总学时：32 教师：贺苗苗
第一章第一节网站界面设计的认识 一、网站的主题定位 1、网站的主题选择 企业的性质决定网站的风格，企业的内容决定网站的主题。 2、网站题材选择的原则 ①主题要小而精②题材最好是自己擅长或者喜爱的内容 ③题材不要太滥或者目标太高 3、题材类别 二、页面的功能模块设计 1、网站名称（Logo） 2、广告条（banner） 3、主菜单（menu） 4、新闻（news） 5、搜索（search） 6、友情链接（links） 7、邮件和地址（mailand address） 8、版权（copyright）
首页的设计步骤：①确定首页的风格和功能模块 ②设计首页的版面布局 ③处理技术上的细节 三、网页界面设计（web interface design）------美观、用户便利、网站流程顺畅! 界面：字典上解释为两者间的界限、接点、共有连接的领域。例子：人与车直接接触的空间，方向盘（即界面）；再如：人和门，门把手（即界面）。过大过小都不好。 界面设计最重要的两点：①使用的便利性②美学的层面 四、界面设计相关用语 1、UI ( User Interface, 用户界面 ) 即使用者界面的意思。实现互动是用户界面最主要的目的。 2、HCI ( Human-computer Interaction,人与计算机的交互作用 ) 即，以人怎样做能更容易的掌握计算机的使用技术为目标，结果可以使界面技术得到飞跃和发展。 3、GUI ( Graphical User Interface,图形用户界面 ) 图形用户界面是相对于纯文本而言，通过图形构成用户与系统间的界面来实现的。 例如：在windows之前的DOS必须输入纯文本，而现在则不用。
基于用户体验的网页UI设计 【摘要】本文基于用户体验剖析网页UI设计，阐述了网页界面视觉设计和网页界面交互设计重要性。结合当前人们的生活方式、行为习惯及心理体验等方面论述如何进行网页UI设计。 【关键词】网页UI设计；视觉设计；视觉吸引；交互设计；交互艺术 随着信息化的深入，网页成为人们浏览信息、获取信息、放眼世界的主要窗口之一。在传统网页的界面设计中，人们认为网页界面设计就是美工，而美工就是单纯对网页进行装饰。随着网络技术的发展与普及，网页界面设计的技术在不断的进步，设计的理念也在不断的更新，网页界面设计不再是单纯的视觉设计，而是将视觉设计与人的行为习惯、生活方式、心理体验等结合在一起的设计，基于用户体验的网页UI设计是当前研究的热点。 一、网页UI设计及用户体验 UI即User Interface（用户界面）的简称，指对软件的人机交互、操作逻辑、界面美观的整体设计。网页UI设计用户体验（User Experience，简称UE）则是一种纯主观在用户使用产品过程中建立起来的感受。由于生活习惯、文化背景、行为方式及心理体验等不同，用户体验产品时会有不同的感受，一个好的UI设计要能充分满足大众的需求，使用户在体验过程中都能心情愉悦、操作流畅、交互高效。 就网页UI设计而言，用户浏览网页的需求是什么？抽象出来可以归纳为两点：一浏览信息，二操作数据。这里的数据是指在数据库中躺着的数据，用户在单纯浏览信息时，不会对页面背后的“数据”造成任何操作，但用户进行点击链接、跳转页面和处理信息时，就要和页面背后的数据进行交互。所以，在做网页UI 设计时候主要满足于用户的这两方面的需求，第一是用户在浏览信息时候，要有一个赏心悦目的界面，即网页界面的视觉设计要美观。第二是用户在操作数据时候要高效，即网页界面的交互设计灵活。 二、网页界面视觉设计 爱美之心人皆有之，漂亮的网页界面能吸引浏览者的眼球、提高网页的浏览量。传统网页美工设计，更注重网页的布局以及网页的颜色搭配，换言之，就是重在设计网页平面效果图和以及对网页进行装饰。随着人们生活节奏的加快，快餐文化日渐丰富，仅靠传统网页美工已不能适应当今网页发展的需要。那么，如何让你的网站跟上时代的步伐，满足当今用户的需求呢？ 从用户体验出发：什么东西能让我们从电脑屏幕上看到接近于现实世界的东西？是视觉吸引，视觉吸引是非常有效的提示工具，通常在用户第一次打开某个应用，或进入某个新的界面时出现。简单的视觉吸引能扭转乾坤，把令人沮丧万
《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
课堂任务快速建站技术—模板的应用 课程名称：利用模板快速建站 课时数：4 教学目标： 知识与技能：了解模板的定义，模板的可编辑区域的定义。 过程与方法：掌握在网页中创建模板的三种方法； 掌握模板的可编辑区域的定义、建立和取消； 掌握模板的应用和取消； 掌握如何将模板从网页中分离出来； 掌握使用模板快速建站； 情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。 教学重点： 在DreamWeaver8中创建模板和应用模板。 教学难点： 学会模板的可编辑区域的定义、建立和取消。 教法： 任务驱动法 学法： 记录关键步骤，积极动手练习。 课前准备： 第三章第三节素材和实例，视频教程：快速建站技术－模板的应用.WMV，快速建站技术－模板的应用(快速更新).WMV。 教学过程设计： （一）导入设计： 我们制作一个网站时，会发现许多网页的版面和元素都是相同的，在设计一个新页面时，我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同，这时修改或更新网页的共同元素如网站标志时，会发现工作量实在太大！而使用Dreamweaver 软件中的模板功能来创建新网页，可以大大提高更新和修改的工作效率，网站的维护工作会轻松很多。本节主要内容如下。（二）新课讲解设计： （1）请学生带着以下问题阅读P110～115知识预读，问题如下： A、模板的定义？ B、模板创建的三种方式？了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消； D、学会模板的应用和取消； E、学会如何将模板从网页中分离出来； （2）教师提问，请学生一一回答以上问题。期间对回答问题的同学要多多表扬，如“你真棒”。增强学生对教师的亲和力。 （3）教师在学生回答问题的同时，总结评价并补充相关要点。 （4）教师展示完成后的模板网站作品，与学生共同讨论分析该网站制作过程。 （5）教师演示建立模板,创建可编辑区域,应用模板等部分操作（详见教材任务一）。
门户网站界面设计方案-策划方案网https://www.doczj.com/doc/ef15572559.html, 一、编写目的 该方案主要是为了给天天好菜网界面设计者提供一个概括性的内容，让设计者更深入了解天天好菜网这个平台。 二、网站介绍 天天好菜网是一个综合性的商务服务平台，主要准对居住在中大城市的家庭主妇提供网上买菜、家庭营养分析、健康饮食资讯、学做菜、娱乐积分换礼品。引导用户树立科学营养的饮食观念，让用户吃得放心、买得实惠、玩得开心。 以“蔬菜配送”为主要经营，以“方便大众”为经营理念，以“安全、新鲜、快捷、实惠”为服务宗旨，以客户利益最大化，立足于新兴行业。 品种齐全、质优价廉，有专门的蔬菜供应基地，这样不但减少了流通环节，而且保证了蔬菜的新鲜。无论份量多少，只要预订，我们将以最及时、最快捷的方式送货上门，并以最新鲜的、安全的蔬菜满足客户的需求。 秉承公道、诚信、价优、物美来迎接更多的挑战，以求做的最好，赢得更多人的信任，把真正的方便带给大家。 三、对设计的要求 界面一定要美观大方、功能简单实用、富有主题，注重每个细节，每一个栏目、图片、动画、线条、功能按钮都要有文字说明，写明你的设计理由和设计表达的思想。要考虑与用户的交互性，可以用一些flash动画、gif动态图片、js效果等。让整个页面变得生动起来，特别是首页，做为吸吲用户眼球的第一个窗口，一定要本着以上的设计理要求，抓住现代家庭主妇的心理需求、把她们停留在这个网站。 四、功能频道栏目规划 1.频道介绍
2.功能栏目
五、Logo设计（150元） 1. LOGO的样式应简洁、大方、大气，包含天天好菜、天天好彩的内含及经营特色。 2. LOGO设计作品应构思精巧，简洁明快，富有内含，色彩协调，健康向上，有独特的创意，易懂、易记、易识别，有强烈的视觉冲击力和直观的整体美感，有较强的思想性、艺术性、感染力和时代感。 3. 色调、构图、设计工具不受征集人局限，由设计人自由发挥，设计人可根据自己的理解和喜好进行创作，并应提供有多种配色的方案供选择。 4.设计的LOGO将应用于公司的徽标、网站宣传册、网站、名片、vip会员卡； 5.中标作品请提交完整的、可用的矢量图形源文件（如PSD格式图片）或矢量格式的.ai .fla .cdr 原图，并且告诉我们所用到的相关字体； 6.设计之前一定要写出详细的设计方案，写明你每一个细节的设计思想及理由。 著作权说明： 1 、所设计的作品应为原创，未侵犯他人的著作权；如有侵犯他人著作权，由设计者承担所有法律责任。完成的LOGO 设计不应与著名商标或常用图标/ 徽标雷同或类似（如进行商标注册时因与其它已注册了的商标类似而不能注册时，设计者应免费将LOGO 进行调整与修改，直到本公司认可与满意）； 2 、选中的设计作品，我方支付悬赏金后，即拥有该作品知识产权，包括著作权、使用权和发布权等，有权对设计作品进行修改、组合和应用. 六、对技术上的要求 1.界面全部采用div+css进行布局，样式写成相关文件 2.DIV+CSS+js+AS等编码必须有注释说明，遵循web2.0标准规范 3.必须兼容目前主流的浏览器，如IE、火狐、傲游、Mozilla/Netscape、Opera等 七、相关设计作品 说明：以下首页设计作品是公司美工设计的，但是界面设计大过于复杂，有点像门户网站，不是我们想要的效果。 效果1.1：
网页制作基础知识教案 教学目标： 了解网页的组成元素及常用的网页制作工具。了解网页制作的一些基础知识，如网站和网页的区别、网页的类型、网页的构成元素等，然后在了解的基础上再通过练习来巩固。 教学重点难点： 在深刻了解概念的基础上把理论转化成实际的应用。 教学过程： 在制作网页之前，首先要了解一些关于web网页的基本知识，了解一下构成一个网站的基本元素等。 网页的基本元素 文本：基本组成部分 图像：更加直观准确地表达某些信息，并且可以起到美化网页，吸引读者注意力的作用 超链接：可以方便地转入其他网页进行浏览。 网页的其他元素：音乐表格表单 美化网页，丰富网页的内容，增强网页的功能。 网页的实质 网页相当于刊物中所发表的一篇篇文章，但与纸上的文章相比，它增加了多媒体信息和网上交互的功能。 网页的实质 = 表格+文本+图片+动画+声音+超级链接+…… ◆网站相当于发行到全世界的期刊。 ◆网站的实质 = 服务器上的文件夹 ◆主页相当于期刊的封面。 ◆主页的实质 = 打开网站的第一个网页 网页和网站的分类 从网页是否执行程序来分，可分为静态网页和动态网页这两种类型。 什么是静态网页、动态网页? ◆所谓静态网页，指的是网页从服务器传到客户端时，网页的内容是“固定 不变”的，也就是说，服务器只是把所存储的网页的内容原封不动直接传递给客户端浏览器，这种网页一般是标准的HTML代码。 静态网页一般以.htm或.html为后缀结尾的，俗称html文件。本课程就是制作静态网页的课程。 ◆所谓动态网页，它在由服务器传递给客户端的时候必须由服务器把它转换 成相应的HTML格式，而且会根据用户的要求和选择在在服务器端做出相应的改变和响应。 动态网页一般要用专门的脚本语言编写，如ASP、https://www.doczj.com/doc/ef15572559.html,、PHP、JSP等等
《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。 （一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 （二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览 者接受和喜爱；
3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 （三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够 不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求： 可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接
网页制作的教学设计 一、教学目标 1 、知道站点、主页的概念，能在指定位置建立只有一个网页的站点； 2 、认识FRONTPAGE 的界面； 3 、掌握在主页中插入文字、图片、水平线； 4 、掌握页面文件与图片的保存。 二、教学重点 1 、能在指定位置建立只有一个网页的站点（难点） 2 、能在页面中插入文字、图片、水平线 3 、掌握页面文件与图片的保存（难点） 三、学情分析 学生已经学习了WORD 、POWERPOINT 与上网浏览信息，对计算机的基本操作（WORD 中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。 四、教学方法 在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。 五、教学过程设计 教师活动：1 、引入课题：（激发兴趣，活跃气氛） 同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站） 浏览新浪网站，浏览的第一个页面称为什么？（主页） 我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。 问题1 ：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，
通过超链接把不同的页面链接起来） 问题 2 ：网页是不是就是主页？( 第一个页面称为主页, 网站设计者可以确定哪一个是主页, 主页的文件名一般为：index.htm, 主页也是网页) 设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet 上，让所有的人访问浏览。 今天我们学习用Frontpage 建立站点，制作一个主页。 先来研究一下没有发布的网站, 打开教师做的网站 问：同学们看到了什么？（文件夹） 总结： 可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。 打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。 请学生浏览教师课件，了解学习任务 2 、新建站点 FP 的启动 问：与word 比较，有什么不同？ （增加了视图区，编辑区有三个窗口） 总结： 视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面 普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式 预览窗口：浏览器中出现的效果，与PowerPoint 中的“放映幻灯片”类似。 Html 窗口：编写HTML （超文本标记语言，它是描述网页内容和外观的标准。） 打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。
网页设计中的页面尺寸标准 莫莫2012-11-17 22:06:50 对于固定宽度的网站布局，设计师常用的分辨率有：760px、780px、920px、950px等，如今大尺寸、宽屏幕的显示器越来越多，越来越普及，有些设计师也开始采用1000px、1003px 这样的分辨率。 页面最大化、满屏化的网站看着的确是舒服，但过高的分辨率在设计师显示器上合适，并不代表在浏览者的显示器上也合适。现在用的最多的分辨率还是1024*768，在这种分辨率下，含滚动条的页面最大宽度应不超过994px，所以一般页面宽度定位在990px以内比较适宜。 这一讲主要来说说网页设计的标准尺寸 一、在800*600分辨率下，页面宽度应在778px以内，这样不会出现横向滚动条，高度可以依据版面和内容而定。 二、在1024*768分辨率下，页面宽度应在1003px以内，如果仅一屏显示的页面，高度在612px～615px之间，这样横向和纵向滚动条都不会出现。 三、在photoshop中做800*600分辨率下仅一屏的网页时，尺寸可以设为740*560左右。 页面标准按800*600分辨率制作，尺寸为778px*434px 页面长度一般不要超过三屏，宽度不宜出现横向滚动条为宜 每个标准页面为A4幅面大小，即8.5*11英寸 全尺寸banner为468px*60px，半尺寸banner为234px*60px，小banner为88px*31px 小图标的标准尺寸还有120px*90px、120px*60px等 每个非首页静态页面含图片字节不超过60K，全尺寸banner不宜超过14k 标准网页广告尺寸规格 1、120*120，这种广告规格适用于产品或新闻照片展示。 2、120*60，这种广告规格主要用于做LOGO使用。 3、120*90，主要应用于产品演示或大型LOGO。 4、125*125，这种规格适于表现照片效果的图像广告。 5、234*60，这种规格适用于框架或左右形式主页的广告链接。 6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 8、88*31，主要用于网页链接，或网站小型LOGO。 广告形式像素大小最大尺寸备注 BUTTON 120*60(必须用gif) 7K
近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极 致的升华，也可以让界面变得暗淡和乏味。 然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升 华呢?网页设计的“微观细节”主要表现有以下几点： 壹—页面的整体颜色，也可以称之为颜色。 貳—页面的整体布局，也可以称之为排版。 叁—页面的字体元素。也可以称之为字体。 肆—页面的效果元素。也可以称之为效果。 以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。 页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此 时细节就在于设计师对于色彩与色彩间的把握。 图：
单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。 图：
计和界面设计，中间的过程中我的脑海中是一团混沌。但无疑，现代的网页设计是受了很多平面设计以及界面设计的影响。其中我认为平面设计的影响尤甚。 前面有提到用户在网页上一个重要需求是浏览信息，而网页设计的一个职能便是有效地、准确地传达信息，并且同时保证美感。而这正是平面设计的一个重要职能。举个最普遍的例子，大家通常谈到的网页设计中的排版和布局（layout），实际上正是来源于广泛应用在平面设计中的格式塔心理学理论的完形法则： 1. 相近（Proximity）。距离相近的各部分趋于组成整体。 2. 相似（Similarity）。在某一方面相似的各部分趋于组成整体。 3. 封闭（Closure）。彼此相属、构成封闭实体的各部分趋于组成整体。 4. 简单（Simplicity）。具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。 而色彩理论、构图理论等等，很多也是直接基于平面设计发展多年积累下来的经验结果的。甚至现在很多设计师直接把平面设计中独特的风格引入到网页设计里：Print Design Influence。 而网页设计和平面设计最大的不同，也就是在“操作数据”上。事实上，网页设计的发展也一直受软件界面设计的影响，先前已经提到网页中的交互越来越“软件化”。而交互的发展必然会影响到网页设计中的“视觉”部分。事实上这两部分谁先影响谁很难说清楚，是一个鸡生蛋，蛋生鸡的问题。另外一个网页设计有别于平面设计和用户界面设计的地方，我认为是css, html, js三者身上。前端代码的发展对网页设计的影响非常大，甚至有段时间会主导网页设计的发展潮流，比如用jQuery轻松实现的one page style（本站首页就是如此）。而在平面设计领域，没有代码环节；在用户界面设计 领域，GUI Builder的革新速度远远慢于前端代码。事实上，有点脱胎于平面设计和用户界面设计的网页设计，已经开始反向影响它的祖先了。 从美学上对比网页设计和用户界面设计的发展 在这个维度上来比较的话，影响网页设计的美学风格非常之多：国际主义（Swiss style），复古风格（Retro style），极简设计（Minimalist design），包豪斯主义（Bauhaus），垃圾风 格（Grunge style），自然模拟风格（Organic style）等等等等。而用户界面设计的美学风格通常是在质感的摸索上，比如Windows Vista风格，苹果风格等等，比较受局限。这也是因为网页设计的美学风格通常从平面设计那派生而来（当然也有自己独特的比如Grunge style, Organic style等），而用户界面设计则很难从平面设计那里取经。 花了这么长篇幅来说自己对网页设计和用户界面设计的看法，其实更多地都是个人实践和思考的 结果。在工作中这些称呼实际上无关痛痒，只是网页设计和用户界面设计这两者在本质上有着许多不同，而且在具体实践中感受也不一样。不过今后有可能这两个概念会最终变成一个，按现在的互联网发展速度，桌面软件以后会逐渐迁移到云端，到那时也许只有一个设计称谓了。 源地址：https://www.doczj.com/doc/ef15572559.html,/bl……C2%BB+blog%29
认识Dreamweaver 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识。 【学习步骤】 1、Dreamweaver的功能 Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件， 也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。 Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。 2、Dreamweaver的窗口 （1）标题栏 （2）菜单栏 （3）工具栏 （4）视图栏 （5）文件夹列表 （6）工作区 3.网页工作区的三个视图方式选项 它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。 普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以 像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。 为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。 4.安装dreameaver的方法 安装及注册 5.关闭dreameaver 6.保存网页的方法 三、小结 Dreamweaver的基本知识
内容摘要： 今日的网站已经不单单只是人们查询资料的工具，它已糅合了多种功能于一身，在网站为人们的学习、生活、工作、娱乐提供越来越重要的信息时，人们都它的要求也与日俱增，对界面的要求也不仅仅是停留在美观上。就此，本文在讨论一些基本的网页设计原理的同时还特别强调了UI在网页设计中的运用。 关键词：网页界面设计 UI 布局色彩 绪论 上世纪最伟大的发明莫过于互联网的发明，进入21世纪，互联网代表着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地域及文化的阻隔，使信息传达的范围、速度与效率都产生了质的飞跃。如果把互联网比做一棵大树，那成千上万的网站则是组成这参天大树的枝条，而每个网站都是由诸多网页构成那么网页就是这参天大树上数不清的叶子，故网页是构成互联网的基本元素。我国这两年的网络发展非常快，每天都有数以千计的网站诞生，其中的网页数量更是成几何式的增长，然而关乎网站形象和浏览者用户体验的网站界面设计却不容乐观。除了一些大的专业网站在版面的编排上比较讲究之外，其他很少见到界面设计考究、美术创意优秀的中文网站。如何设计出美观（吸引受众眼球）的网页，如何用优秀的用户体验赢得受众的一次又一次的浏览仿佛一夜间就摆在了众设计师的案头。就此本文从以下几点讨论了关于 网站界面设计所需要重视的问题。 一、认识UI （一）什么是 UI ： UI的本意是用户界面，是英文User和interface的缩写。 （二）什么是 GUI： Graphics User Interface 图形用户界面，也就是我们今天要主要研究的东西。 （三）什么是用户界面设计： 在人和机器的互动过程中，最重要的一个方面就是我们所说的界面（。用户界面设计是屏幕产品的重要组成部分。大致界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。界面设计是一个需要多方面专业知识的工作，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互 设计、界面设计。 1.用户研究 用户研究包含两个方面：一是可用性研究，研究如何提高产品的可用性，使得网站界面的设计更容易被人接受、使用和记忆；二是通过可用性的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方