第一章网站与网页设计基础

第一章网站网页设计基础计算机系刘延芳教学重点教学提示：本章介绍网站设计与网页制作的基本知识。并从网站设计架构出发,在网站的主题、结构、风格和布局等方面讲述网站的构思,并制作和发布第一个网页。教学目标：通过学习,要求大家能正确定位网站的主题,了解网站的目录结构和连接结构、创意和布局、及网站发布等认识。网站与网页设计基础1.1定位网站主题和名称(1)(2)1.2确立网站的CI形象1.3网站的目录结构和连接结构1.4确定网站整体风格和创意设计1.5网页设计“三剑客”及其他常用工具1.6网页及网页中的元素1.7制作并发布第一个网页(1)(2)定位网站主题和名称(1)1.网站设计大体包含：1)纯网站本身设计；例如:文字排版、图象制作、平面设计、三维立体设计、动静态有声和无声影像等。2)网站的延伸设计;包括:主题定位和浏览群的定位、智能交互、制作策划、形象包装和营销拓展等。2.主题：即为网站的题材；应考虑的几个方面：1)网上求职、网上聊天、网上社区(文学、图片社区等)/讨论/邮件列表、娱乐、参考/资讯、家庭/教育2)娱乐还可以细分定位网站主题和名称(2)3.合理选题：提供以下参考建议1)主题要小而精:定位要小,内容要精。没主题和特色。2)题材最好是自己擅长或喜爱内容；兴趣是动力3)题材不要太滥或目标太高；4.精选网站名称:其是网站设计的一部分。1)正气:合法、合情、合理，不能危害社会安全词语.2)易记:最好使用中文,若用数字控制在6个字以内。3)有特色:能体现一定内涵,要有视觉冲突和想象空间。好的网站名称——画龙点睛作用确立网站的CI形象CI(CorporateIdentity):通过视觉来统一企业的形象。准确的、有创意的CI设计,对网站宣传事半功倍效果。1.设计网站的标志(logo):是网站特色和内涵的集中体现。标志创意来自网站的名称和内容。1)中文或英文2)符号或图案3)动物或人物2.选择网站的标准色彩:1)标准色彩:指能体现网站形象和延伸内涵的色彩。2)标准色彩一般不超过三种,要运用在网站的标志、标题、主菜单和主色块上，给人统一感觉。3.选择网站的标准字体:默认字体是宋体。网站标志网站的目录结构1.网站的目录结构:指建立网站时创建的目录作用:清晰的目录有利于站点本身的维护,内容的扩充.1)建子目录:按主菜单栏建立子目录,即不要全放在根目录下2)协调次要栏目:如“友情链接”,内容较多,且需要经常更新,可以单独建立目录,便于维护与管理。2.注意:1)目录的层次为3层为宜不要太多。2)不要使用中文目录,网络无国界,防止造成网址正确显示。3)不要使用过长的目录名,不便于记忆,尽量使用意义明确的。随着网页技术不断发展,利用数据库或其他后台程序自动生成网页方法越来越多,网站目录结构也必须飞跃新层次网站链接结构1.网站的链接结构:指页面之间相互链接的拓扑结构。链接结构是建立在目录基础上,且可以跨越目录,链接是两个固定点之间的链接,可以一对一或一对多,这些点并不是分布在一个平面上,而是存在一个立体空间中。2.链接结构目的:在于用最少的链接使浏览最有效率。3.链接结构建立两种基本形式：1)树状链接结构(一对一):优点：条理清晰,访客能明确自己所在位置;缺点:浏览效率低。2)星状链接结构(一对多):优点:浏览方便;缺点：链接太多,容易使访问者“迷路”。一般情况下,建议混合使用确定网站的整体风格1.风格:是抽象的,是指站点的整体形象给浏览者的感受。2.整体形象:包括站点的CI(标志.色彩.字体.标语),版面布局,浏览方式,交互性,文字风格内容价值,存在意义等价值。1)风格是独特的；2)风格是人性；3.有风格的网站与普通网站区别:除信息量大小,速度快慢感受外,让浏览者有更深一层的感性认识。4.如何确立网站的风格：1)要肯定风格是建立在有价值内容之上.必须保证内容的质量和价值性,这是最基本的。2)需要彻底搞清楚自己希望站点给人的印象是什么？3)在明确自己的网站印象之后,开始努力建立和加强这一印象。网站创意设计创意是指站点的整体创意；也是网站生存的关键。1.创意是传达信息的一种特别方式；可分五个阶段：1)准备期:研究所有搜集的资料,根据旧经验,启发新创意。2)孵化期:将资料咀嚼消化,使意识自由发展,任意结合。3)启示期:意识发展并结合,产生创意。4)验证期:将产生的创意讨论修正。5)形成期:设计作品,将创意具体化。2.创意是将现有的要素重新组合创意目的：是更好宣传和推广网站。网页设计开发工具1.美国Macromedia公司“梦幻组合”、“三剑客”1)DreamweaverMX2004是“所见即所得”的可视化网站开发工具2)FireworksMX2004是网页“三剑客”的“火焰”,以处理网页图片为特长,并可轻松创作GIF动画。3)FlashMX2004是网页“三剑客”的“闪电”,并以制作网上动画为特长.2.Frontpage制作网页3.专为网景公司的浏览器设计的，NetscapeDesigner4.图像处理软件photoshop7.0网页设计元素1.文本、图形图像和超级链接2.声音:是多媒体网页的重要组成部分。应考虑的因素:用途,文件大小,声音品质和浏览器差别。网络声音文件格式多样：MIDI，WAV,MP3和AIF等格式。建议:不要使用声音文件作为背景音乐,会影响下载速度,最好单独作成声音文件,便于控制。3.视频:常见文件有:Realplay,MPEG,AVI和DIVX等。4.表格5.表单6.导航栏7.其他特殊效果制作并发布一个网站(1)准备工作：1)建立一个用语容纳本网页与相关网页的本地站点2)向站点中添加相关空的网页3)设置页面的标题、背景图像4)插入网页中的图片、文本、水平线等对象,利用层将图像合理布局5)建立超链接。6)预览和保存网页7)测试、发布和维护网站制作并发布一个网站(2)1.定义本地站点：1)新建2)向站点中添加网页和文件夹2.编辑网页1)设置网页的页面属性2)向网页中添加层。3)在层中插入图像4)输入文本并改变大小和颜色5)插入网页的更新时间6)设置超级链接3.发布网站