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