网页设计方案基础知识.ppt

《网页设计方案基础知识.ppt》由会员分享，可在线阅读，更多相关《网页设计方案基础知识.ppt（17页珍藏版）》请在三一办公上搜索。

1、一.网页设计基础知识,一.网页设计基础知识,第一章 初识Dreamweaver CS3 1.网页技术概述 2.网页制作相关工具 3.Dreamweaver（DW）,一.网页设计基础知识,网址URL（统一资源定位器）网页：Web页网站搜索引擎：百度、谷歌,1.网页设计概述,网站建站技术从技术上大体上分为两类：静态网页技术和动态网页技术（1）静态网页技术静态网页是指客户端浏览器发送请求给web服务器，服务器查找需要的超文本文件不加处理直接返回给客户端，运行在客户端的页面是事先已制作完成存放在服务器上的网页。静态网页往往只用来存放无需用户参与，只需要发布的静态文本内容。直接可以打开的页面,1.网页设

2、计概述,制作静态网页主要使用HTML语言，配合客户端脚本语言Javascript也能产生丰富的动态效果。HTML（超文本标识语言)浏览器所看到的网页，主要是由HTML语言写成 的，通过各种标记，将影像、声音、图片、文 字等连接显示出来。（浏览器“解释运行”代码）一个HTML文件事实上是一个具有一些特殊代码 的文本文件，它告诉浏览器如何表示此文件。通 常，静态网页文件以*.html或*.htm为后缀名。,如何通过浏览器查看HTML源代码？,1.网页设计概述,（2）动态网页技术根据程序站点运行地点的不同，又分为客户端动态技术和服务器端动态技术。客户端动态网页技术不需要与服务器交互，实现动态功能的代

3、码往往采用脚本语言形式直接嵌在网页中，服务器发送给客户后，网页在客户端浏览器直接响应用户的动作，有些作用需要浏览器安装组件（插件）支持。动态效果 常见的客户端动态技术：Javascript、JavaApplet、DHTML、ActiveX、Flash、VRML,多媒体网页，但并不是真正的动态网页,1.网页设计概述,服务器端动态技术需要服务器和客户端的共同参与，客户通过浏览器发出页面请求后，服务器根据请求的参数运行服务器端程序产生结果页面再返回给客户端。一般涉及到数据库。典型的服务器端动态技术：ASP、ASP.NET、PHP、JSP、CGI 平常讲的动态网页一般指服务器端动态技术。动态网页会在后

4、续课程数据库技术和动态网页制作讲述。（书本P20-P21）,1.网页设计概述,学习制作网页应该学习的技术知识-网页的骨架是HTML、XML、XHTML-增强网页修饰和增加网页个性的CSS-网页的客户端编程以增强网页的特殊显示效果、与服务器更好沟通的Javascript或VBScript-网页的服务器端编程加强网页的交互功能-图形图像的制作(如Photoshop)、动画制作（如 Flash）等其它相关知识,1.网页设计概述,新的应用及技术：Ajax（Jquery、Spry）：Google地图 网格、云计算 富媒体（Rich Media）Adobe Flex（Flash）：做什么用的？Micros

5、oft Silverlight：qq空间 Google API你知道Flash Catalyst是什么吗？,1.网页设计概述,做网页需要用到多种软件、不同类型的电脑知识，一定程度上需要学习多方面的电脑知识。注意以下方面的内容：灵活使用各种已有资源。网页知识繁杂，并不是所有知识都能学会，也并不是所有知识都一定能要去学，适当学会“重复”使用资源，灵活使用Baidu和Google。但使用已有资源，借鉴其它网页并不是要去抄袭。,1.网页设计概述,本课程内容多而且比较杂，在做网页时并不是所有内容都要用上。有些内容是“独立”的，可能并不“实用”，但是当需要某一功能时你才会发现其有用。课时有限，有些例子需要

6、大家课后花时间练习。有用的代码及例子自己要注意保存，方便以后使用。,2.网页制作相关工具,经常使用的网页制作工具：1.Adobe(Macromedia)“网页制作三剑客”Dreamweaver MX/MX 2004/8/CS3/CS4 Flash MX/MX 2004/8/CS3/CS4 Fireworks MX/MX 2004/8/CS3/CS4 2.Microsoft Frontpage/Expression 2.0 3.Adobe Photoshop 7/CS/CS2/CS3/CS4 Adobe收购Macromedia，2007.3推出了多媒体整合套件Adobe CS3。,DW和Fron

7、tpage为“所见即所得”工具，不懂HTML语言也可以制作专业的网页,图形化界面操作，自动生成相应代码。,2.网页制作相关工具,本课程主要讲解使用Adobe Dreamweaver CS3制作静态网站。DW最新版本为Dreamweaver CS4，其基本功能跟Dreamweaver 8/CS3类似，CS3/CS4跟8的最大区别主要为：界面“色调”不一样、多了Ajax框架、CS3/4和Photoshop的整合、CSS样式表的增强。,2.网页制作相关工具,需要注意的问题：Fireworks的强项是Web处理，推荐在图像处理的时候使用Photoshop，在进行网页处理使用Fireworks，但是并不

8、是所有版本的CS4都有FW安装组件，需要另外进行安装。,3.Dreamweaver CS3,Adobe的软件一般都要进行激活处理，所以进行Adobe软件安装的时候要详细知道激活及注册过程，以防出现问题。1.软件/设计工具/也可以下载8/CS3/CS4的绿色版本2.使用老师提供的Adobe_CS3_LJF_3in1.iso 虚拟光驱加载ISO文件进行安装，序列号任意填写3.确保“FLEXnet Licensing Service”服务开启（即确保“FNPLicensingService”这一服务在后台运行）,3.Dreamweaver CS3,Dreamweaver操作界面 1.菜单栏 2.文档窗口 3.属性面板:PS、office属性在上方，DW在下方 4.插入栏：对象面板，快速插入各种网页元素 可以设定该工具条界面为制表符模式或者菜单模式 5.文档工具栏 6.面板组：浮动面板，实现特定的功能 设计面板、代码面板、应用程序面板、文件面板等,注意：设计视图和代码视图,3.Dreamweaver CS3,注意事项：如何把一些相应的工具和面板调出来：工具类型的一般在“查看”菜单 面板类型的一般在“窗口”菜单如何改变“工作区”：“编辑”菜单“首选参数”标记选择器：快速选定网页标记（标签）分辨率文档工具栏的“预览”按钮（F12）灵活运用设计视图和代码视图可随意摆放面板组，但不建议这样做,