静态网页设计Dreamweaver第一章详解.pptx

网页设计基础 模块一 实训1 体验HTML文档 目的： 理解网页的本质?HTML文档 简单了解使用HTML编写网页 内容：P1-P4 1.1 网页基础知识 1、Internet（因特网）概述 定义：利用通信线路和通信设备将世界各地的计算机网络、主机和个人计算机互相连接起来，在网络协议控制下构成的全球互联网。 提供的服务 万维网（www） 电子邮件（E-mail） 文件传输（FTP） 远程登录（Telnet） 。。。。。 1.1 网页基础知识 2、WWW（World Wide Web）服务 定义：一种基于Http（超文本传输协议）的交互式多媒体信息检索工具。 采用客户机/服务器（C/S）工作模式，由浏览器、web服务器和WWW协议组成。 工作原理： 1.1 网页基础知识 3、Web站点和网页 Web站点（网站）：在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。 网页：构成网站的基本元素，一般称为Html文档，是一种可以在因特网上传输，能被浏览器识别和翻译成页面并显示出来的文件。扩展名：html、htm、asp、php、jsp 1.1 网页基础知识 4、Http和URL Http：超文本传输协议，是因特网上应用最为广泛的一种网络协议，它允许将HTML文档从Web服务器传输到浏览器。 URL（统一资源定位符）：表示网络资源的地址。由三部分组成：协议、主机名、路径及文件名。 /wj1.html 协议名 主机名 路径及文件名 1.2 网站配色方案 网站色彩应用的总体原则：总体协调、局部对比。 1、色彩的搭配原则 色彩的鲜明性 色彩的独特性 色彩的艺术性 色彩搭配的合理性 2、色彩搭配方案 认识色环 1.2 网站配色方案 （1）单色方案 在站点设计中始终使用一种基本颜色。为避免单调，可以调整这种基本颜色的灰度和亮度来得到更多的颜色。 适用于内容比较严肃的网站。 1.2 网站配色方案 （2）相似色配色方案 在色彩圆环上选择彼此相邻的几种颜色构成的配色。 给人一种非常协调的感觉。 一般的运用方法：用一种颜色作为背景色，另一种相邻的颜色作为前景色。 （3）互补色配色方案 在色彩圆环上沿直径选择相对应的两种颜色构成配色方案。 给人一种活泼时尚的效果。 现在网站设计十分的流行，但设计起来比较繁琐。 1.2 网站配色方案 （4）三色配色方案 在圆环上选择一个等边三角形三个顶点上的颜色构成配色。 对比强烈，页面显得不稳定，给人另类的感觉，产生紧张感。 1.3 网站设计常用软件 1、网站设计开发软件 （1）文本编辑器 记事本、Word写字板、UltraEdit等。通过书写HTML语言来编写网页，也称为源代码编辑器。 （2）FrontPage 微软公司开发的，所见即所得，结合了设计、HTML、预览三种显示模式，适合做简单的网页。 （3）DreamWeaver Adobe公司开发的一款优秀的网站开发工具，功能十分强大，当前最为流行的网站设计软件。 1.3 网站设计常用软件 1、网页美工软件 （1）Photoshop Adobe公司开发的一款图形图像软件，流行的平面设计软件之一。是美化网页的常用工具。 （2）Fireworks 网络图形设计编辑软件，它简化了网络图形设计的工作难度，可以做出动态的GIF动画，可以轻易的完成大图切割、动态按钮、动态翻转图等。 （3）Flash 专业的矢量图形编辑和动画制作软件，是一种交互式动画设计软件。 1.4 HTML文档入门 1、HTML语言 超文本标记语言：用于创建WEB文档（网页）的一种标记语言。用于编写网页。 查看网页源代码：打开浏览器，“查看?源文件” 命令，将启动记事本程序打开该网页的源代码文档（HTML文档） HTML文档的编写方式： 使用记事本之类的工具，直接输入HTML源代码，然后保存成html或htm为扩展名的网页文件。 使用专业的可视化的网页制作工具，根据用户操作自动生成HTML，如Dreamweaver、 FrontPage 1.4 HTML文档入门 2、HTML文档基本结构 由元素和标记组成，用标记来规定元素的属性和位置。 Html文档的结构包括头（head）部分和主体部分（body）组成。 html head title网页标题/title ………… /head body ………… /body /html 头部分 主体部分 Html文档 1.4 HTML文档入门 2、HTML文档基本结构 Html文档包括html、head、body三个主要标签。 标记不分大小写。 所有标记都用尖括号括起来。 标签中包含多个参数，之间用空格分隔，各参数位置