南华大学计算机科学与技术学院数字媒体导论课件第七章 web集成技术.ppt

数字媒体技术导论 ——第七章 Web集成技术 WEB应用程序开发技术 看看别人的网站 网页布局理念 “国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型 拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的 标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文 框架型： 封面型：这种类型基本上是出现在一些网站的首页 Flash型：由于Flash强大的功能，页面所表达的信息更丰富 网站是如何做出来的？ 用什么做网站：网页制作三剑客 相关技术 Html CSS Javascript html超文本标识语言 编辑HTML文件只需要文本编辑器就可以编辑。 网络浏览者在浏览网页的时候实际上是将HTML文件及其相关的图象文件下载到计算机中然后用浏览器对HTML文件进行解释，从而显示网页的过程 使用标记 标记符 [属性=属性值]受影响的内容/标记符格式 例：font size=10 color=#00ff00示范/font 一个例子 CSS 层叠样式表 ：Cascading Style Sheets 用于布局与美化网页的 CSS语言是一种标记语言，不需要编译,可以直接由浏览器执行 CSS文件是一个文本文件，它包含了一些CSS标记，CSS文件须用css为文件名后缀 CSS大小写不敏感 可以通过简单的更改CSS文件，改变网页的整体表现形式，是每一个网页设计人员的必修课 使用CSS的优势 内容与表现分离 表现的统一，并且容易修改 支持多种设备，比如手机、PDA、打印机、电视机、游戏机等. 使用CSS可以减少网页的代码量，增加网页的浏览速度，减少硬盘容量 JavaScript JavaScript语言：基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动 使用方法 Javascript加入网页有两种方法： 直接加入HTML文档 　　script language=Javascript 　　!-- 　　document.writeln(这是Javascript！采用直接插入的方法！); 　　//-Javascript结束-- 　　/script 编写第一个JavaScript程序 　　html 　　head 　　Script Language =JavaScript 　　// JavaScript Appears here. 　　alert(这是第一个JavaScript例子!); 　　alert(欢迎你进入JavaScript世界!); 　　alert(今后我们将共同学习JavaScript知识！); /Script 　　/Head /Html 网站如何上传 申请空间：免费空间（5~20M）一般不支持动态网页技术 我就试试免费空间 / 网站是如何被访问的？ 超文本传输协议HTTP 浏览器和Web服务器之间的通信协议。 课程总结 讨论与答疑 * 静态网页开发技术 HTML 动态网页开发技术 客户端 服务器端 VBScript JavaScript ASP JSP ASP.NET 构思 （要做什么） 规划 （做成什么样的） 收集素材 制作模板 编制页面 测试与发布 构思该站点的关键信息,包括站点的名称、 类型、规模、内容、标志等； 根据收集的信息, 把构思用草图进行规划, 草图有整个网站的结构,不同的布局，设计及导航； 包括网页布局素材及使用素材 制作初始图样，用PHOTOSHOP来创建 用各种网页技术（CSS、JAVA、FLASH）丰富网站内容 对网站进行全面测试，并上传到网上进行访问 ??????????????????????? ? ? ? ? ?????????????????????????????? ?????????????????????????????? ?????????????????????????????? ? ? ? ? 告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释 注释标签!--和--：用来去掉浏览器所不能识别的Javascript源代码 双斜杠表示 Javascript的注释部分 注意：script……/script的位置并不是固定的，可以包含在head....../head 或body...../body中的任何地方 *