《DreamweaverCS网页设计与制作》网站设计基础刘敏娜主编精要.pptVIP

网页设计 授课教师: 主要学习内容 网站设计基础知识 Dreamweaver、Fireworks html语言 如何学习这门课程 多实践，多动手 多参考优秀网站：如网易，sohu 1.1网页设计相关知识 www 网页的概念 超文本(Hypertext) 网站的概念 网页浏览原理 网页组成要素 网页编辑工具 网页布局 网页的页面与版面 WWW 万维网WWW (World Wide Web)并非某种特殊的计算机网络。万维网是一个大规模的、联机式的信息储藏所，英文简称为Web。下图说明了万维网提供分布式服务的特点。 WWW WWW 万维网是一个分布式的超媒体(hypermedia)系统，它是超文本(hypertext)系统的扩充。 万维网以客户服务器方式工作。客户程序向服务器程序发出请求，服务器程序向客户程序返回客户所要的万维网文档。在一个客户程序主窗口上显示出的万维网文档称为页面(page)。 网页的概念 网页(Web Page)：是通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，它是网站最基本的组成单位。众多的网页有机地集合在一起就组成了网站。 网页的主要类型 HTML(HyperText Markup Language)全称超文本标记语言，利用标记（tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C++等编程语言有着本质上的区别。 ASP (Active Server Pages )中文名为动态服务器主页 ,它是一种应用程序环境，可以利用 VBscript 或 Java Script 语言来设计，主要用于网络数据库的查询与管理。 JSP(Java Server Page)JSP 与 ASP 非常相似。不同之处之一在于 ASP 的编程语言是 VBScript 之类的脚本语言， 而 JSP 使用的Java 。 静态网页与动态网页 静态网页 纯粹HTML格式的网页 每个网页都有一个固定的URL，网页URL以.htm、.html、.shtml等常见形式为后缀，且不含有“?” 也可以出现各种动态效果 动态网页 以数据库技术为基础，随不同客户、不同时间，返回不同的网页 后缀通常是asp、aspx、jsp、php等，并且通常在URL中带有”？” 静态网页 动态网页 超文本(Hypertext) 超文本(Hypertext)：具有超级链接功能的文本文件叫超文本。超文本文件中的某些字、符号或短语起着“热链路”（Hotlink）的作用，在显示出来时其字体或颜色发生变化或者标有下横线、以区别于一般的正文. 网站的概念 网站：WWW服务器上相互链接的一系列网页组成一个网站（Web Site）。网站是WWW上的一个结点。如果输入地址时仅指定WWW服务器域名或IP地址，而不加路径信息，则将打开网站默认的首页（Home Page），也称为主页。首页是一个网站中最重要的网页，通常包含最重要的信息以及指向各分栏目的超链接。 网页浏览原理 其工作步骤如下： （1）用户启动客户端浏览器，在浏览器地址栏输入想要访问网页的URL，浏览器软件通过http协议向URL地址所在的Web服务器发出服务请求。 （2）服务器根据浏览器软件送来的请求，把URL地址转化成页面所在服务器上的文件路径，找出相应的网页文件。 （3）当网页中仅包含html文档，服务器直接使用http协议将该文档发送到客户端；如果html文档中还包含有JavaScript或VbScript脚本程序代码，这些代码也将随同html文档一起下载；如果网页中还嵌套有CGI或ASP程序，这些程序将由服务器执行，并将运行结果发送给客户端。 （4）浏览器解释html文档，并将结果在客户端浏览器上显示。 网页包含的元素 文本 图像 动画 音频 视频 网页版面布局技术分析 表格布局：简单但是下载速度慢 框架布局：兼容性不好 CSS技术：可以精准定位元素但有些复杂 网页版面布局原则 主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得意彰 版面布局的步骤 草案：在白纸上将景象画上去 粗略布局：将功能模块安置到页面上 定案：将粗略布局精确化，具体化 Logo的大小 一、120×120，这种广告规格适用于产品或新闻照片展示。? 二、120×60，这种广告规格主要用于做LOGO使用。? 三、120×90，主要应用于产品演示或大型LOGO。? 四、125×125，这种规格适于表现照片效果的图像广告。? 五、234×60，这种规格适用于框架或左右形式主页的广告链接。? 六、392×72，主