网页设计基本流程课件

?企业网站建站过程?网站的形象设计1.网站的标志2.网站的风格定义3.网站的广告词4.网站的标准色彩5.网站的标准字体?规划网站栏目?规划网站栏目1.划分主要栏目2.首页超级链接和搜索引擎 3.设定交互栏目4.设置下载和咨询服务栏目 5.方便的网站导航6.网站的目录结构7.网站的链接结构?版面设计1.版面设计的过程2.常见的版面样式3.首页的设计?网页的色彩搭配1.色彩的基本知识2.色彩搭配的原则3.色彩搭配的技巧?网页中的图像处理1.图像的类型2.图像的格式3.图像的处理技巧?网页中的字体1.字体与字号2.特殊字体的处理?网页中的动画与广告 1.动画制作的工具1.收集信息2周2.设计草案3天3.制作设计手册网站结构页面结构色彩版式预算报价 2周4.制作页面1周5.调试2周6.发布7.跟踪半年网站制作流程 1.具体的实用信息：主要是由文字数据和图形图像组成，有些网站还可以使用动画声音等多媒体技术,它们通过网站本身的栏目设置体现出来。（由业务部门提供）网站发布的信息1.广义的信息：包括网站的CI设计，网站主题定位和网民群体的定位以及网页的制作策划，形象包装宣传营销等等，它主要是通过视觉语言来树立网站的社会形象从而达到广告宣传的效果。（由管理部门提供甚至需要借助广告策划的眼光进行全面的CI设计才可能有一个好的方案）设计网站的标志?标志图形的设计创意来自网站的名称和内容，标志可以是中文英文字母，可以是符号图案，可以是动物或者人物等。?网站标志设计创意可以从以下几种思路开始:(1)选用公司有代表性的人物，动物,花草，可以用它们作为设计的蓝本加以卡通化和艺术化。(2)网站有专业性的可以以本专业有代表性的物品作为标志。网站的标准色彩 企业的标准色，就是该企业在自己标志产品及宣传品等方面统一使用的一个固定的颜色。网站的标准色彩只能是一种，具体应用时可以标准色为中心利用它的明度变化产生不同的色彩，标准色彩要广泛运用于网站的标志,标题，主菜单和背景色块,给人以整体统一的感觉，其它色彩只是作为对比和衬托,绝不能喧宾夺主。网站的标准字体1.标准字体是指网站用于标志标题,主菜单的特有字体。2.特别字体只能用图形图像的形式出现在网页中。网站的广告词1.用简洁精炼的句子传达信息，网站设计者应努力用一句话一个词来高度概括网站的性质特点和网站的目标，创造出类似实际生活中的广告金语来，在最短的时间内传达出最丰富的内涵。2.标志，色彩，字体和广告语四个方面是一个网站树立CI形象的关键，确切地说是网站的表面工作，设计并完成这四项工作网站的整体形象就有一个基本的轮廓，有了一个统一的面目并且具有了一定的专业性。规划网站栏目?细致地划分主要内容栏目 将主要内容信息按一定的方法分类，并为它们设立专门的栏目。?“开门见山”地列出主要内容 网页的内容一般分为几个层次，网站的主要内容一定要放在首页或一二级栏目中，如果因信息内容结构问题不得不放在较深的位置上，一定设法将它在首页安排超级连接，同时在其他网页放置多个超级连接以便使浏览者很容易地找到它。规划网站栏目?首页设置超级链接和搜索引擎?设定交流的栏目交流栏目是指论坛,留言本,邮件列表等，可以让浏览者有机会发表他们的意见，参与网站的活动。?设置信息下载和咨询服务栏目?方便实用的网站指南 网站的目录结构设计目录结构的原则是方便网站的管理与维护，设计链接结构的原则是方便浏览者的阅读。?网站的目录结构1.合理安排文件的目录，不要将所有文件都存放在根目录下。2.按栏目内容建立子目录3.在每个一级目录或二级目录下都建立独立的Images目录，管理素材。网站的目录结构1.目录的层次不要太多，一般目录的层次不超过5层，对于网站的工作人员来说层次越少查找起来也就越容易，也就越便于维护管理2.不要使用中文目录，网络是无国界的Internet上使用最广泛的语言是英语，如果使用中文目录有可能对网址的正确显示造成困难,尤其会给非汉语的浏览者带来不便3.使用意义明确的目录文件名，在给目录取名字时应考虑取的名字，尽量反映内容以便于记忆管理。网站的链接结构?网站的链接结构是指页面之间相互链接关系。?安排链接结构的原则：1.一是要符合浏览者的思维习惯和浏览习惯。2.一是要将网站中最重要的信息有最多的机会与浏览者见面。设计选项 1.线性方法 主页 Page one Page two Page three 2 分层模式 主页 主题 A 主题 B 主题 C 子主题 A2 子主题 B2 子主题 C1 子主题 B1 子主题 C2 3网络中心模式主页 主题 A 主题 B 主题 C 主题 D 主题 E 主题 F 主题 G 主题 H 主题 I 4 全Web设计网站的链接结构?关于链接结构的设计,在实际的网站建设中是非常重要的问题,采用什么样的链接结构直接影响到版面的布局.网站的风格与创意设计?网站的风格:指站点的整体形象给浏览者的综合感受,这个整体形象包括站点的CI,标志,色彩,字体,标语,版面布局显示方式,交互方式,文字风格等等诸多因素.网站的风格与创意设计?网站具有独特的风格可以从以下几方面考虑:1.明确网站的服务对象2.网站美术设计师应该明确自己的想法,明确自己要追求的艺术效果,明确了自己的行业定位之后,应考虑网站的个性化因素.3.在明确自己的网站印象后,努力加强这种印象,如果经过反思发现其中最有特色的东西,就是最能体现网站风格的东西,并以它作为网站的特色加以重点,强化,制订一套基本的规格和技术指标(类似标准化),将它们运用到所有的页面中去.网站的风格与创意设计 1.将网站的标志,特有的花边,线条,图案出现在每个页面上,应该创作一些网站特有的符号或图标.2.使用标准色彩和相近的底色背景色,文字的链接色彩,图片的色调,页面的底色边框色等尽量采用与标准色彩一致或相近的色彩.3.突出标准字体在关键性的标题,菜单,图片里使用统一的标准字体.4.用统一的图片处理效果比如阴影效果的方向厚度模糊度都必须统一.?采取上述具体措施后,虽不能完全保证网站的艺术效果和品位,但却使网站具有统一性完整性.版面布局与首页的设计?布局：是一个设计的概念,指的是在一个限定的面积范围内合理安排布置图形，图像和文字的位置，在把文章信息按照轻重缓急的秩序陈列出来的同时将页面装饰美化起来。?版面标准：设定为800*600像素版面布局与首页的设计过程?版面布局的过程最初的设计还是需要动笔勾画草图的，草图的目的是将脑海里朦胧的想法具体化变成可视可见的轮廓。在轮廓草图上首先将需要放置的功能模块安排到页面上，主要包含网站标志，主菜单，栏目条，广告位，搜索器，计数器等，这时我们必须突出重点，将网站标志，主菜单，商品目录，及广告等最重要的模块放在最显眼最突出的位置，然后再考虑次要模块的排放。版面布局与首页的设计?在布局过程中我们遵循的原则：?平衡：指画面的图像文字的视觉分量在左右，上下几个方位基本相等，分布匀称,能达到安定平稳的效果。过于平衡的画面难免有呆板的感觉。有时需要在局部打破平衡或对称。?呼应：在不平衡的布局中的补救措施，使一种元素同时出现在不同的地方形成视觉上的相互联系。版面布局与首页的设计?对比:所谓对比就是利用不同的色彩，形态，线条等视觉元素相互并置对比,造成画面的多种变化,达到丰富视觉的效果。疏密:疏密关系本是绘画的概念,疏是指画面中形式元素稀少,甚至空白的部分.密是指画面中形式元素繁多的部分,在网页设计中,就是空白的处理,运用太满太密,太平均是任何版式设计的大忌,适当的疏密搭配可以使画面产生节奏感,体现出网站的格调与品位图.版面布局与首页的设计?各个字体字号的描述,及其所在页面位置的参数,有些作为标题的文字其实已作为图形图像对待了,这里的文字仅仅指文本的字体和由计算机程序产生的标题字时，应说明字体的HTML的色彩数值.?各种色彩的数值的确定，除图形图像以外，设计方案中的标准色，底色，文字的颜色，都应该以RGB模式数值或HTML语言数值表示出来，?最后必须估算一下页面的大小，根据经验或参照类似的在线网页，概算一下将来的网页大约有多少个KB，一般每页上的图文KB数加起来不要超出50KB否则就会影响显示速度。版面布局与首页的设计范例?几种常见的版面布局样式?“同”字型结构布局：所谓同字型结构就是指页面顶部为主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。?这种布局的优点是页面结构清晰，左右对称，主次分明，因而同字型布局的网页得到非常普遍的运用，不过同字型布局的缺点：是太规矩呆板如果细节色彩上缺少变化调剂，很容易让人感到单调乏味。版面布局与首页的设计范例?“国”字型布局?国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加一横条状的菜单或广告。?这种布局的优点是充分利用版面信息量大与其它页面的链接多切换方便，缺点是页面拥挤四面封闭，令人感到憋气。?自由式布局?自由式布局打破了同字型，国字型布局的菜单框架结构页面，布局像一张宣传海报以一张精美图片作为页面的设计中心菜单栏目自由地摆放在页面上常用于时尚类站点?网页优点是漂亮吸引人，缺点就是显示速度慢文字信息量少，这种布局适合于以图像为主要内容的站点.版面布局与首页的设计范例?左右对称布局?顾名思义采取左右分割屏幕的办法形成的对称布局，在左右部分内自由安排文字图像和链接，点击左边的链接时，在右边显示链接的内容，?它的优点是既活泼自由，又可显示较多的文字图像。缺点是将两部分有机的结合比较困难不适于信息数据量巨大的网站。版面布局与首页的设计范例版面布局与首页的设计形式?网站的首页大致分为三种类型?书籍封面式首页?有些大型网站往往有一个书籍封面式的，首页上面只有一个进入的链接点击之后，才进入到网站。这种首页设计精美非常考究给人以雍容大度的气派。版面布局与首页的设计形式期刊杂志式的首页与书籍封面式首页相似，但在首页上有站点全部内容的目录索引，图文并茂看上去就像是期刊杂志的封面，既漂亮又使网站的主要内容一目了然，是一种值得推荐的形式。版面布局与首页的设计形式报纸式的首页?许多电子商务网站，搜索引擎网站和新闻信息网站更加务实，为了速度和操作的简便，往往采用报纸式的首页设计，将栏目索引，功能模块，具体内容一并显示在首页看上去就像一张报纸的头版一样。版面布局与首页的设计栏目?电子商务站点的首页需要设置这样一些功能模块和栏目：网站名称及标志(logo)会员注册(enroll)产品目录(manufacture)服务项目与条款(sever)关于本站announcement 搜索器(search)广告条(banner)有些网站还开设新闻栏目(whatsnews),信息咨询(consult)免费电子邮箱(freeE-mail)等等，至于各个首页选择哪些模块与网站想要实现的功能有关。网页色彩的搭配?色彩的基本知识（参照网页色彩构成概论）?网页色彩搭配的原则 1.色彩的合理性，网页的色彩要漂亮引人注目，同时还要照顾到人的眼睛的生理特点不要用大面积的高纯度色相，它容易使人的眼睛疲劳。2.色彩的独特性，要有与众不同的色彩搭配衬托出网站的个性，使得大家对你的印象深刻。3.色彩的艺术性，色彩设计属于艺术形式的范畴，按照内容决定形式的原则，色彩应服务于网站的内容，和网站的气氛相适应。对比色与网页色彩的搭配?对比色的应用,原色饱和度较高的色彩搭配使用，即为对比色。各种色彩均可作为对比色使用，但应以一种颜色为主调，使它占有较大的面积，同时辅以对比色，起到点缀丰富的作用。?例如以粉红色为主的色调，配以小面积的淡蓝，淡黄，淡绿，或者土黄，土灰，土蓝。商业零售站点，新闻站点，常常运用对比色造成丰富充实的效果。网页中的插图处理?插图是指除系统产生的字符和色彩以外的图形图像，包括广告，图画，照片，文字等,插图可以起到文字说明不了的内容，同时插图也是网页装饰的主要手段。?插图的类型一是照片(位图）类，二是绘画（矢量图）类。?图像的格式JPGGIFPNG 网页中的插图处理?虚实的变化图像的虚实处理可以衬托网页的风格，丰富图像和网页的样式，对网页设计很有用处。插图的外轮廓与网页的背景色自然衔接过渡给人以十分柔和含蓄的感觉，比较自然地与网页结合为一体，还有一种虚的图像，整个色调被极大地淡化处理，作为背景色的图案出现，衬托前景的文字。网页中的插图处理?实的图像有两种样式：1.一种是有规范的四边，像未经处理的照片类，图像一般都带有裁切后自然留下的边框，是四条清晰的线条，由于图像的色调线条与背景色形成强烈的对比，给人以坚硬实在的感觉，假如网页上的图像都是这种样式，就显得整齐规范，同时也显得死板生硬，2.另一种是不规范外轮廓，即轮廓清晰，其图像背景色与网页背景色一致，将图像背景色处理成透明色，许多卡通画插图都采用这种样式。网页中的字体?文字是网页的主要组成部分，是信息的重要载体，正确选择字体不仅关系到网页的美观，还对浏览者的阅读及信息的传达有直接的影响，字体构成因素有字体和字号,它们都是由汉字软件自动生成的。?网页中使用的字体（宋体，黑体，楷体，仿宋体）?字号：计算机的字号指的是字体在显示器上的显示尺寸大小，常用的字号有9pt，11pt?用作图形图像的字体计算机用户字库的字体太少，网页设计师想用字体在传达信息的同时，又起到装饰作用不得不使用其它的艺术字体，但必须将字体做成图形图像格式。网页中的动画与广告?动画制作的工具GIFAnimation,Java,Flash等?网页动画格式GIFSWF