网页设计与制作基础篇课件.ppt

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