FLASH路上DIVCSS第一讲.ppt

1,1,网站制作步骤,1,确定网站类型，确定网站布局收集素材，PS设计出模板用DIV+CSS,及FLASH、JS实现预期效果动态程序整合上传至服务器绑定域名用户开始体验你的网站,+,网站制作工具,1,PhotoshopCS3,PS设计细节,1,Photoshop（以下简称PS）是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。网页制作在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。图标制作使用此软件制作的图标的确非常精美。平面设计、视觉设计网络的普及是促使更品牌选择了网页广告。,+,PS设计细节,1,1.可完成性，要考虑设计出的效果完全可转化为用户使用的网页。2.用户成本，考虑到除效果外能更快的让用户看到网页的效果。3.争强对比，争强对比可提高用户的识别度4.合理的使用图片素材,网站制作语言,Html简介HTML即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML语言有，早期的html（table）和现在网页中常见的xhtml（div）。,1,HTML标签,table简介早期的网页由table表格元素以及一个或多个tr（行）、th或td元素组成。,1,网站标志,首页案例服务,新闻,案例,XHTML标签,div简介标签严格的把文档分割为独立的、不同的部分,这些部分类似PS中的图层。,1,网站标志,首页案例服务,新闻,案例,DIV+CSS的优势,1,Html文档结构,Html简介HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,1,浏览器处理,用户看到的只有body,head结构,在网页设计中用来说明你用的XHTML或者HTML是什么版本。这里声明是的XHTML1,也就是DIV+CSS告诉程序你用的编码方式是utf-8，UTF一般包含了英文，日文，韩文，中文等几个语种。Gbk是国家汉字标准CSS样式引用到当前HTML其他，如加载外部JS程序等。,1,页面标题,1234,DIV是什么,DIV是用于搭建html网页结构（框架）标签，还有如、等html标签一样,1,DIV所在网页中的位置,1,DIV所在网页中的位置,1,CSS是什么,CSS全称为CascadingStyleSheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式,1,文字颜色,CSS文件控制DIV的结构,1,LOGO,首页体验性能关于联系我们,版权所有：梅赛德斯-奔驰,相关信息,Banner（横幅广告图片）,案例网站制作过程,1,1.页面布局和规划2.写入整体DIV结构与CSS结构3.页面顶部制作4.中间Banner制作5.页面文字介绍制作6.页面底部信息制作7.检查浏览器兼容等问题,1,Header,Banner,PageBody,Footer,课后作业,1,1.修改标题为“你的名字FLASH”2.在body中创建一个Div3.在DIV标签中写入“你的名字FLASH”4.给DIV