网页设计-1ppt课件

.,基础知识,网页设计与制作,网页设计与制作,网站建设基础,基础篇,.,基础知识,概述IP地址与域名管理系统网站浏览原理,网页制作,.,全球信息网:WWW(WorldWideWeb，即Web)基于Internet的信息服务系统，向用户提供一个以超文本技术为基础的多媒体的全图形浏览界面；所有WWW的页面都是用HTML编写的文件。超文本标记语言:HTMLHyperTextMarkupLanguage其格式为ASCII码,即纯文本文件,是WWW用于建立与识别超文本文档的标准语言。,基础知识,概述,.,网页(Webpage)：在浏览器上看到的画面叫网页主页(Homepage)：进入网站后所看到的第一个页面(index.htm)网站(Site)：是一组相关网页的集合,基础知识,.,网页文件：就是指HTML文件，网页上的所有数据全部由HTML文件控制。超链接（Hyperlink)：是WWW上的一种链接技巧，通过单击某个图标或某段文字，就可以自动连接相对应的其他文件，从一个网页跳转到另一个网页。,基础知识,.,IP地址的表示,IP地址的作用,域名与主机名,IP地址的组成,基础知识,IP地址与域名,.,网页,Homepage主页,HTTP协议,浏览器,用HTML编写,用开发工具编写如Dreamweaver,基础知识,网站浏览原理,.,网页设计与制作,网站设计原则Web页面设计网页制作方法网页设计与制作流程,网页制作,.,主题定位,制作网站首先要考虑网站的主题。好的网站不仅应该有美感、个性、创意，更要有质量。网站的内容是最重要的基本因素，空洞的网站对人没有任何吸引力。,基础知识,网站设计原则,.,题材选择,主题要小而精；题材最好是自己擅长或者喜爱的内容，题材不要太滥或者目标太高；网站名称要正气、易记、要有特色。（体现自己的个性）,.,网站的题材主要有：新闻、体育、聊天、即时信息、ICQ、社区、邮件列表、计算机技术、网页/网站开发、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚以及一些体现个人特色和爱好等的网站。,网站的名称很重要，它在很大程度上也决定了整个网站的定位。网站的名称要有概括性、简短、有特色、容易记，还要符合自己网站的主题和风格。例：闪客帝国、清风文苑、红果园等。,.,所谓CI(CorporateIdentity)，是借用的广告术语，意思是通过视觉来统一企业的形象。主要包括Logo设计、网站的色彩搭配、网站的标准字体、网站的整体风格和创意等。,定位网站CI形象,.,网站的标志（Logo）,Logo广义上是站点特色和内涵的集中体现，是网站的标志，如同商标一样；是站点特色和内涵的集中体现，是网站文化的浓缩，看见logo就让大家联想起你的网站。Logo狭义上是指用于链接本网站的图标标识，即88*31像素的小图标banner。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。,.,定位你的网站CI形象-Logo,.,有代表性的人物、动物、花草作为设计蓝本，加以卡通化和艺术化。例如：迪斯尼的米老鼠、搜狐的卡通狐狸等。如果网站的内容具有较强的专业性，可以本专业有代表的物品作为标志。例如：中国银行的铜板标志、奔驰汽车的方向盘标志、校徽等。,几种设计Logo的方法,.,标准颜色：蓝/绿色、黄/橙色、黑/灰/白等其他颜色注意：背景颜色和前文的对比一定要大，为了突出主要文字，背景绝对不能选择花纹繁杂的图案；色彩要控制在三种颜色以内。,网站的色彩搭配,网站的标准字体,网页默认的字体：中文为“宋体”9磅字英文为“TimesNewRoman”,.,网站的整体风格和创意,网站风格：建立在有价值的内容的基础之上必须保证内容的质量和价值明确自己网站想留给人什么样的印象创意思考的过程：准备期/孵化期/启示期/验证期/形成期,.,.,.,明确制作网页的目的确定网页的内容和风格（有价值、高质量和有创意）,Web页面设计,基础知识,.,网页类型网页制作方法,网页制作方法,基础知识,.,基于客户端：静态网页（htm）动态页面（DHTML、JavaScript）,网页的类型,基于服务器端：动态页面（ASP、PHP、JSP等）,Deamweaver是网页编辑软件Fireworks是图形/图像处理软件Flash是矢量动画编辑软件,编程基础,.,何谓动态网页？,动态网页，重点在“态”，即状态上。同一个网页文件在这一状态显示这个内容，而在另一状态则显示完全不同的内容了，即随着请求的不同，产生不同的网页。（实现网页的动态更新与发布）动态网页技术的出现使得网页从单纯的展示平台变成了网络交互平台，如用户的注册和登录、在线留言、论坛、网上调查等。,？,.,直接编写HTML源代码利用制作工具,利用任何文本编辑软件保存为纯文本文件即可（htm或html）,通过编辑窗口编辑网页(不需要html源代码)如:FrontPage、DreamweaverJavaScript、Java、ASP、CGI、PHP、JSPFireworks、Flash,网页制作方法,.,草案粗略布局定案,确定网页的功能模块设计网页的版面处理技术上的细节,网页设计,网页版面布局,.,首页制作,页面属性页面设计（表格、框架）填写内容添加链接和交互版权信息等,.,其他页面设计,和首页保持相同的风格要有返回首页的链接目录结构不要超过四层,.,什么是网络三剑客？,DreamweaverFireworksFlash,是Macromedia公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。,是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。,是Macromedia公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。,Macromedia与Adobe,.,需求分析页面设计（风格、标志）素材整理（脚本编写）制作素材（动画、图片等）制作网页构建网站（上传文件并发布）,网页设计与制作流程,.,网站建设基础,创建站点发布站点Windows下安装Tomcat,网页制作,.,创建本地工作文件夹创建站点与本地文件夹关联,网站建设基础,创建站点,.,“站点/管理站点/新建/站点”命令,根据提示按“下一步”按钮直到完成,.,申请主页空间发布网页设置服务器上传文件浏览网站,网站建设基础,发布站点,.,在服务器上申请空间：登录网站注册登记上传网页设置个人服务器：PWS