《网页设计与制作教材配套完整版课件全)》由会员分享，可在线阅读，更多相关《网页设计与制作教材配套完整版课件全)（307页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作网页设计与制作第一章第一章 网页与网站的基础知识网页与网站的基础知识网网页页设设计计是是一一门门综综合合技技术术，在在制制作作网网页页之之前前应应 该该 了了 解解 网网 页页 的的 基基 础础 知知 识识，同同 时时 还还 应应 掌掌 握握Dreamweaver CS5.5设设计计平平台台的的工工作作界界面面结结构以及各个部分所能完成的基本功能。构以及各个部分所能完成的基本功能。1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.1 静态网页介绍静态网页介绍静态网页是标准的静态网页是标准的HTML文件，其文件的扩展名一般为文件，其文件的扩展名一般为htm、html、sh
2、tml、xml等。等。静态网页工作原理图静态网页工作原理图1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.1 静态网页介绍静态网页介绍静静态网页态网页的特点的特点v静态网页每个网页都有一个固定的静态网页每个网页都有一个固定的URL；v网页内容一经发布到网站服务器上，无论是否有用户访问，每网页内容一经发布到网站服务器上，无论是否有用户访问，每 个静态网页的内容都是保存在网站服务器上的；个静态网页的内容都是保存在网站服务器上的；v静态网页的内容相对稳定，容易被搜索引擎检索；静态网页的内容相对稳定，容易被搜索引擎检索；v静态网页没有数据库的支持，在网站制作和维护方面工作量较静态网页没有数
3、据库的支持，在网站制作和维护方面工作量较大；大；v静态网页的交互性较差，在功能方面有较大的限制；静态网页的交互性较差，在功能方面有较大的限制；v静态网页页面浏览速度迅速，过程无需连接数据库。静态网页页面浏览速度迅速，过程无需连接数据库。1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.2 动态网页介绍动态网页介绍动动态态网网页页是是指指跟跟静静态态网网页页相相对对的的一一种种网网页页编编程程技技术术，是是指指网网页页文文件件里里包包含含了了程程序序代代码码，通通过过后后台台数数据据库库与与Web服服务务器器的的信信息息交交互互，由由后后台台数数据据库库提提供供实实时时数数据据更更新新
4、和和数数据据查查询询服服务。务。动动态网页工作原理图态网页工作原理图1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.2 动动态网页介绍态网页介绍动动态网页态网页的特点的特点v动态动态Web具有交互性，页面消息可以根据需求或用户的具有交互性，页面消息可以根据需求或用户的 浏览状况，实现与用户的交流和页面信息的自动更新。浏览状况，实现与用户的交流和页面信息的自动更新。v动态动态Web具有具有Web数据库支持和远程动态维护功能。数据库支持和远程动态维护功能。v动态动态Web的创建技术比较复杂，且对服务器的处理能力的创建技术比较复杂，且对服务器的处理能力要求也比较高。要求也比较高。v动态动
5、态Web一般使用数据库来存储信息，它担负着一个文一般使用数据库来存储信息，它担负着一个文件服务器角色。件服务器角色。1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.3 常见网站类型常见网站类型1.个人网站个人网站个人网站是以个人名义开发创建的具有较强个性化的网站，个人网站是以个人名义开发创建的具有较强个性化的网站，一般是个人为了兴趣爱好或展开个人目的而创建的，具有较强的个一般是个人为了兴趣爱好或展开个人目的而创建的，具有较强的个性化特色，带有很明显的个人色彩，无论从内容、风格、样式上都性化特色，带有很明显的个人色彩，无论从内容、风格、样式上都形色各异。形色各异。1.1 网页制作与网
6、站建设基础网页制作与网站建设基础1.1.3 常见网站类型常见网站类型2.企业类网站企业类网站企业网站，就是企业在互联网上进行网络建设和形象宣传的企业网站，就是企业在互联网上进行网络建设和形象宣传的平台。平台。1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.3 常见网站类型常见网站类型3.机构类网站机构类网站机构网站通常指机关、非营利性机构或相关社团组织建立的机构网站通常指机关、非营利性机构或相关社团组织建立的网站，网站的内容多以机构或社团的形象宣传和服务为主。网站，网站的内容多以机构或社团的形象宣传和服务为主。1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.3 常见网站
7、类型常见网站类型4.娱乐休闲类网站娱乐休闲类网站随着互联网的飞速发展，不仅涌现出了很多个人网站和商业随着互联网的飞速发展，不仅涌现出了很多个人网站和商业网站，同时也产生了很多娱乐休闲类网站网站，同时也产生了很多娱乐休闲类网站。这些网站为广大网民提这些网站为广大网民提供了娱乐休闲的场所。供了娱乐休闲的场所。1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.3 常见网站类型常见网站类型5.行业信息类网站行业信息类网站能够满足某一特定领域上网人群及其特定需要的网站叫做行能够满足某一特定领域上网人群及其特定需要的网站叫做行业信息类网站。业信息类网站。1.1 网页制作与网站建设基础网页制作与网
8、站建设基础1.1.3 常见网站类型常见网站类型6.购物类网站购物类网站随着网络的普及和人们生活水平的提高，网上购物已成为一随着网络的普及和人们生活水平的提高，网上购物已成为一种时尚，丰富多彩的网上资源，价格实惠的打折商品、服务优良送种时尚，丰富多彩的网上资源，价格实惠的打折商品、服务优良送货上门的购物方式，其已成为人们休闲、购物两不误的首选方式。货上门的购物方式，其已成为人们休闲、购物两不误的首选方式。1.1 网页制作与网站建设基础网页制作与网站建设基础1.1.3 常见网站类型常见网站类型7.门户类网站门户类网站门户类网站将无数信息整合、分类，为上网者打开方便之门，门户类网站将无数信息整合、分
9、类，为上网者打开方便之门，绝大多数网民通过门户类网站寻找自己感兴趣的信息资源。绝大多数网民通过门户类网站寻找自己感兴趣的信息资源。1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.1 网页版面布局的原则和方法网页版面布局的原则和方法1.网页版面布局的原则网页版面布局的原则（1）重点突出）重点突出（2）平衡协调）平衡协调（3）图文并茂）图文并茂（4）简洁清晰）简洁清晰1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.1 网页版面布局的原则和方法网页版面布局的原则和方法2.网页版面布局的方法网页版面布局的方法（1）手绘布局手绘布局（2）软件绘图布局）软件绘图布局1.2 网页布局
10、设计与色彩搭配网页布局设计与色彩搭配1.2.2 网页布局的结构形式网页布局的结构形式1.传统传统“T”型布局型布局1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.2 网页布局的结构形式网页布局的结构形式2.上下对照式布局上下对照式布局1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.2 网页布局的结构形式网页布局的结构形式3.“上中下上中下”“三三”字布局字布局1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.2 网页布局的结构形式网页布局的结构形式4.左右对称型布局左右对称型布局1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.2 网页布局的结构形式
11、网页布局的结构形式5“同同”字型布局字型布局1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.2 网页布局的结构形式网页布局的结构形式6“回回”字型结构布局字型结构布局1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.2 网页布局的结构形式网页布局的结构形式7“匡匡”字型结构布局字型结构布局1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.2 网页布局的结构形式网页布局的结构形式8.自由式结构布局自由式结构布局1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础1.红色红色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.
12、2.3 网页配色基础网页配色基础1.红色红色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础2.橙色橙色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础2.橙色橙色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础3.黄色黄色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础3.黄色黄色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础4.绿色绿色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.
13、2.3 网页配色基础网页配色基础4.绿色绿色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础5.蓝色蓝色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础5.蓝色蓝色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础6.紫色紫色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础6.紫色紫色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.3 网页配色基础网页配色基础7.黑色与白色黑色与白色1.2 网页布局设计与色彩搭配网页布局设计与
14、色彩搭配1.2.3 网页配色基础网页配色基础7.黑色与白色黑色与白色1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.4 网站布局特点网站布局特点1.资讯类网站资讯类网站1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.4 网站布局特点网站布局特点2.电子商务类网站电子商务类网站1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.4 网站布局特点网站布局特点3.互动游戏类网站互动游戏类网站1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.4 网站布局特点网站布局特点4.教育类网站教育类网站1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.4 网站
15、布局特点网站布局特点5.功能性网站功能性网站1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.4 网站布局特点网站布局特点6.综合性网站综合性网站1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.5 经典网页欣赏经典网页欣赏1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.5 经典网页欣赏经典网页欣赏1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.5 经典网页欣赏经典网页欣赏1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.5 经典网页欣赏经典网页欣赏1.2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.5 经典网页欣赏经典网页欣赏1.
16、2 网页布局设计与色彩搭配网页布局设计与色彩搭配1.2.5 经典网页欣赏经典网页欣赏1.3 Dreamweaver认知认知1.3.1 Dreamweaver CS5.5的新功能的新功能1.CSS3/HTML5 支持支持2.jQuery集成集成3.借助借助PhoneGap构建本机构建本机 Android 和和IOS应用程序应用程序4.FTPS、FTPeS支持支持5.移动移动 UI 构件构件1.3 Dreamweaver认知认知1.3.2 Dreamweaver CS5.5的工作界面的工作界面1.3 Dreamweaver认知认知1.3.2 Dreamweaver CS5.5的工作界面的工作界面1.标题栏标题栏在在Adobe Dreamweaver CS5.5的窗口标题栏上整合的窗口标题栏上整合了网页制作中最常用的布局、了网页制作中最常用的布局、DW扩展、站点管理器和设计器按扩展、站点管理器和设计器按钮，这些常用的命令按钮可以从菜单栏或者工具栏中找到与之相钮，这些常用的命令按钮可以从菜单栏或者工具栏中找到与之相应的选项。应的选项。1.3 Dreamweaver认知认知1.3.2 Dream
