网页设计与制作概述.ppt

网页设计与制作概述,了解有关网页的一些基本概念 了解网站的基本结构特性和网页的布局 了解网页制作的基本工具和开发语言,1.1 互联网与网站基本概念:,网页：是一种网络信息传输的载体，在网站中，供用户阅读的一个个页面，称之为“网页”，又称为Web页。 万维网（World Wide Web）：万维网简称WWW或3W，它也是建立在Internet上的一种网络服务。它遵循HTTP协议 ，通过超文本和超媒体，将Internet上包括文本、声音、图形、图像、影视信号等各种类型的信息聚集在一起。,浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。 目前常用的浏览器有:IE、netscape和腾训TT 统一资源定位器（Universal Resource Locator，简称URL）： Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL地址。是用来指出某项信息的位置及存取方式，以取得各种服务信息的一种标准方法。 通信协议：也就是上面举例中的“http”部分，它包括HTTP（超文本传输协议）、FTP（文件传输协议）、Gopher（Gopher协议）和News（新闻组）等。,主机名：指要访问服务器的Internet名称。 IP地址：IP地址是一组32位的数字号码，如“84”，这就是上网主机的地址。 域名： IP地址是一长串的数字号码，这些数字难记又难以理解。为了方便大家理解、记忆，便有了域名的概念。 域名的范围要比主机名要大。一个域名下可以有多个主机名，域名下还可以有子域名。例如，域名www. 下，有主机server1和server2，其主机全名就是和。也就是常说的二级域名。 域名前加上传输协议信息及主机类型信息就构成了网址（URL）,文件传输协议（File Transfer Protocol，简称FTP）：是一种快速、高效和可靠的信息传输方法。 超文本标记语言（Hyper Text Markup Language，简称HTML）：它是WWW创建超媒体文本的语言，它也是网页创建中最基本的语言，制作的任何一个网页都是基于HTML文本标识的。 表单: 表单是用于填写申请或提交信息的交互页面。如电子邮箱、主页空间、QQ号码等的申请页面，以及论坛、聊天室、留言簿等。,超级链接:这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。 导航条：导航条能十分有效地实现超级链接功能 。 发布：将制作好的网页上传到服务器的过程即是发布，也称为上传或上载。,1.2网站制作流程,搜集资料，规划网站 选择合适的制作工具 制作网页 测试发布 推广宣传 网站维护,（1）定位网站的主题和名称 主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。 对于主题的选择，应注意： 主题要小而精。定位要小，内容要精。 题材最好是你自己擅长或者喜爱的内容。 题材不要太滥或者目标太高。,1.规划设计,（2）确定网站的栏目和版块,一般的网站栏目安排要注意以下几方面： 要紧扣你的主题 将你的主题按一定的方法分类并将它们作为网站的主栏目，主题突出，容易给人留下深刻印象。 设一个最近更新或网站指南栏目 设定一个可以双向交流的栏目 设一个下载或常见问题回答栏目,（3）确定网站的目录结构,不要将所有文件都存放在根目录下。 按栏目内容建立子目录。 在每个主目录下都建立独立的images目录。 目录的层次不要太深。 目录的层次建议不要超过3层。 不要使用中文目录 不要使用过长的目录 尽量使用意义明确的目录，便于记忆和管理。,（4）确定网站的链接结构,树状链接结构（一对一）。,点击“古典音乐”,点击“古筝”,星状链接结构（一对多）。,点击“影视”,点击“古典音乐”,最好的办法是： 首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。,点击“古典音乐”,音乐页面,在程序员进行详细设计的同时，网页美工开始设计网站的整体形象和首页。整体形象设计包括标准字体、Logo、标准色彩、广告语等。首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括菜单、标题、版权等模块设计。也可以将自己感兴趣的素材通过图像切割工具将其收集。 模块布局宗旨在于方便访问者浏览，如今的多媒体Web网页具有强大的交互功能，多种媒体方式如文字、图片、动画、声音、超级链接等同时存在。文字是一种简洁有效的媒体，输入方便，处理速度快，在网速较慢的情况下适合用文字进行大面积布局。图片可以给人以较为直观的感受，以及更为感性的认识，其缺点是下载速度慢，在网速慢的情况下不宜大面积运用。,（5）设计网站的整体风格,网页的色彩 网页的色彩是树立网站形象的关键因素之一。在搭配网页色彩时，要注意色彩的鲜明性、独特性、合适性和联想性。各板块采用与网站首页同一色系的颜色，整个板块内部也尽量保持风格一致。可以采用专门的配色软件。 网页的文字 注意以下基本原则: 不要使用超过3种字体类型，否则网页看起来将显得杂乱，没有主题 不要用太大的字，因为版面空间非常宝贵和有限，粗陋的大字体不能带给浏览者更多的信息 最好不要使用不停闪烁的文字。 标题的字体比正文要稍大一些，颜色也应有所区别。 设计网站的标志(logo) logo是你站点特色和内涵的集中体现，看见logo就让大家联想起你的站点。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。,下载另存后的文件为：Twins07.swf 在自己的页面中选择“插入”|“媒体”|“Flash”命令,中国风格：古色古香，韵味典雅，古典的边框，温雅的颜色。,具有个性的网页欣赏：天马星空，随性发挥,常见的中国门户网站：庄重大气，有板有眼，方方正正，内敛不张扬。,企业类简洁网页：页面清爽，让客户一目了然，大气，颜色多和产品类型有关。,欧美风格-科技感：动感的弧形图案，金属质感的图标，以及商业化、科技感的图片。,时尚感：前卫、时尚的图片，相关颜色的陪衬,科技色多，色调偏冷、页面结构硬朗。,日韩风格：渐变颜色，颜色鲜明，使用高分辨率的图片。,日韩风格：颜色搭配调和，多种颜色而不觉花哨，色彩丰富饱和而恰到好处。,根据网站内容的整体风格，设计版面布局。设计者可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的知识。这时设计者用笔在纸上粗略地勾画出布局的轮廓。常见的网页布局结构有：,（6）网页版面和布局,T型结构 同字结构 川字结构 三字结构 单一结构 Flash 型,T型结构,同字结构,川字结构,三字结构,单一结构,2.网页制作工具,（1）网页布局工具 Dreamweaver Frontpage （2）网页美化工具 图像处理软件:Photoshop,Fireworks 动画制作软件 :FLASH