网页设计讲义.ppt

Adobe Dreamweaver，简称“DW”，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 操作界面 说白了就是下载优秀网站的静态页面源码修改后纳为己用、、、(ˉ﹃ˉ) CMS（内容管理系统） CMS帮你把一个网站的程序部分的事全做完了 你要做的只是一个网站里面美工的部份,搞几个静态网页模板,一个门户级的网站就出来了!? PHPCMS 织梦cms 动易CMS 帝国cms Inspiration for your fine performance Subscription offers you all designs youll ever need to make your PowerPoint 常用的cms建站系统 上传到空间 FTP工具 网页设计 Web design Hello world! 做网页需要什么？ * 记事本 * 浏览器 * 没了、、、(￣︶￣) 最小化需求 进阶： 所需语言：html、css、javascript、PHP、(ASP/JSP/jQery/SQL等)… 编写工具：Notepad++、EditPlus、Dreamweaver（高大上，所见即得）… 测试工具：各种浏览器 、IEtest… 辅助工具: PS、flash… 认识和使用HTML 1 认识和使用CSS 2 了解Javascript、PHP 3 怎么速成一个网页 4 上传到服务器 5 我要讲什么(ˉ﹃ˉ) 需求分析 美工、策划 代码编写 各种编程语言 修改细节 根据客户意见 上传 FTP工具、域名、空间 网页制作大体流程 HTML概念 HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文件称为HTML文件，也称Web文件。 网页文件的组成 html head title 网页标题 /title /head body 正文 /body /html 元素是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如body），也有一个结束的标记（如/body）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。 网页中常用的元素 图像对应的HTML标签是img 表格对应的HTML标签是table超链接对应的HTML标签是a 字体对应的HTML标签是font 表单对应的HTML标签是form 块状元素对应的HTML标签是div 演示 基本组成部分——HTML元素属性 HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的 内，并且和元素名之间有一个空格分隔；属性值用“”引起来。 p align=“center”我居中了！!/p 基本组成部分——HTML元素属性 一个元素有许许多多的属性。 /tags/tag_font.asp ——w3school在线手册 w3school.CHM ——离线手册 网页元素 基础 网页 动作 修饰 触发事件 元素的属性 HTML CSS Javascript 静态网页的基本构成 JS CSS HTML CSS CSS即“层叠样式表”，简称CSS样式表，在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 Javascript 一门客户端脚本语言。主要用来向 HTML 页面添加交互行为。（验证、特效） HTML HTML（Hyper?Text?Mark-up?Language?）即超文本标记语言，是?WWW?的描述语言。 CSS h1 style=font-size:12px;color:#000FFF我的CSS样式。/h1 直接写在HTML代码中 headstyle type=text/css?? h1{font-size:12px;????? color:#000FFF????? }/style/head 将样式表放在一个固定的位置 head title外部样式表 /title link rel=“stylesheet “ type=text/css href=style.css /head 将CSS样式代码单独放在一个外部文件中 内部样式表 行间样式表 外部样式表 Click To Edit Title Style Click To Edit Title Style Div “DIV+