【最新】一网页设计基础知识ppt课件

2021/2/21一.网页设计基础知识2021/2/22一.网页设计基础知识第一章初识DreamweaverCS31.网页技术概述2.网页制作相关工具3.Dreamweaver（DW）2021/2/23一.网页设计基础知识网址URL（统一资源定位器）网页：Web页网站搜索引擎：百度、谷歌2021/2/241.网页设计概述网站建站技术从技术上大体上分为两类：静态网页技术和动态网页技术（1）静态网页技术静态网页是指客户端浏览器发送请求给web服务器，服务器查找需要的超文本文件不加处理直接返回给客户端，运行在客户端的页面是事先已制作完成存放在服务器上的网页。静态网页往往只用来存放无需用户参与，只需要发布的静态文本内容。－－直接可以打开的页面2021/2/251.网页设计概述制作静态网页主要使用HTML语言，配合客户端脚本语言Javascript也能产生丰富的动态效果。HTML（超文本标识语言)浏览器所看到的网页，主要是由HTML语言写成的，通过各种标记，将影像、声音、图片、文字等连接显示出来。（浏览器“解释运行”代码）一个HTML文件事实上是一个具有一些特殊代码的文本文件，它告诉浏览器如何表示此文件。通常，静态网页文件以*.html或*.htm为后缀名。如何通过浏览器查看HTML源代码？2021/2/261.网页设计概述（2）动态网页技术根据程序站点运行地点的不同，又分为客户端动态技术和服务器端动态技术。客户端动态网页技术不需要与服务器交互，实现动态功能的代码往往采用脚本语言形式直接嵌在网页中，服务器发送给客户后，网页在客户端浏览器直接响应用户的动作，有些作用需要浏览器安装组件（插件）支持。－－动态效果常见的客户端动态技术：Javascript、JavaApplet、DHTML、ActiveX、Flash、VRML多媒体网页，但并不是真正的动态网页2021/2/271.网页设计概述服务器端动态技术需要服务器和客户端的共同参与，客户通过浏览器发出页面请求后，服务器根据请求的参数运行服务器端程序产生结果页面再返回给客户端。一般涉及到数据库。典型的服务器端动态技术：ASP、ASP.NET、PHP、JSP、CGI平常讲的动态网页一般指服务器端动态技术。动态网页会在后续课程数据库技术和动态网页制作讲述。（书本P20-P21）2021/2/281.网页设计概述学习制作网页应该学习的技术知识--网页的骨架是HTML、XML、XHTML--增强网页修饰和增加网页个性的CSS--网页的客户端编程以增强网页的特殊显示效果、与服务器更好沟通的Javascript或VBScript--网页的服务器端编程加强网页的交互功能--图形图像的制作(如Photoshop)、动画制作（如Flash）等其它相关知识2021/2/291.网页设计概述新的应用及技术：①Ajax（Jquery、Spry…）：Google地图②网格、云计算③富媒体（RichMedia）AdobeFlex（Flash）：做什么用的？MicrosoftSilverlight：qq空间④GoogleAPI你知道FlashCatalyst是什么吗？2021/2/2101.网页设计概述做网页需要用到多种软件、不同类型的电脑知识，一定程度上需要学习多方面的电脑知识。注意以下方面的内容：①灵活使用各种已有资源。网页知识繁杂，并不是所有知识都能学会，也并不是所有知识都一定能要去学，适当学会“重复”使用资源，灵活使用Baidu和Google。但使用已有资源，借鉴其它网页并不是要去抄袭。2021/2/2111.网页设计概述②本课程内容多而且比较杂，在做网页时并不是所有内容都要用上。有些内容是“独立”的，可能并不“实用”，但是当需要某一功能时你才会发现其有用。③课时有限，有些例子需要大家课后花时间练习。有用的代码及例子自己要注意保存，方便以后使用。2021/2/2122.网页制作相关工具经常使用的网页制作工具：1.Adobe(Macromedia)“网页制作三剑客”DreamweaverMX/MX2004/8/CS3/CS4FlashMX/MX2004/8/CS3/CS4FireworksMX/MX2004/8/CS3/CS42.MicrosoftFrontpage/Expression2.03.AdobePhotoshop7/CS/CS2/CS3/CS4Adobe收购Macromedia，2007.3推出了多媒体整合套件AdobeCS3。DW和Frontpage为“所见即所得”工具，不懂HTML语言也可以制作专业的网页,图形化界面操作，自动生成相应代码。2021/2/2132.网页制作相关工具本课程主要讲解使用AdobeDreamweaverCS3制作静态网站。DW最新版本为DreamweaverCS4，其基本功能跟Dreamweaver8/CS3类似，CS3/CS4跟8的最大区别主要为：界面“色调”不一样、多了Ajax框架、CS3/4和Photoshop的整合、CSS样式表的增强。2021/2/2142.网页制作相关工具需要注意的问题：Fireworks的强项是Web处理，推荐在图像处理的时候使用Photoshop，在进行网页处理使用Fireworks，但是并不是所有版本的CS4都有FW安装组件，需要另外进行安装。2021/2/2153.DreamweaverCS3Adobe的软件一般都要进行激活处理，所以进行Adobe软件安装的时候要详细知道激活及注册过程，以防出现问题。1.软件/设计工具/也可以下载8/CS3/CS4的绿色版本2.使用老师提供的Adobe_CS3_LJF_3in1.iso虚拟光驱加载ISO文件进行安装，序列号任意填写3.确保“FLEXnetLicensingService”服务开启（即确保“FNPLicensingService”这一服务在后台运行）2021/2/2163.DreamweaverCS3Dreamweaver操作界面1.菜单栏2.文档窗口3.属性面板:PS、office属性在上方，DW在下方4.插入栏：对象面板，快速插入各种网页元素可以设定该工具条界面为制表符模式或者菜单模式5.文档工具栏6.面板组：浮动面板，实现特定的功能设计面板、代码面板、应用程序面板、文件面板等注意：设计视图和代码视图2021/2/2173.DreamweaverCS3注意事项：如何把一些相应的工具和面板调出来：①工具类型的一般在“查看”菜单②面板类型的一般在“窗口”菜单如何改变“工作区”：“编辑”菜单－“首选参数”标记选择器：快速选定网页标记（标签）分辨率文档工具栏的“预览”按钮（F12）灵活运用设计视图和代码视图可随意摆放面板组，但不建议这样做