第1讲WEB编程基础知识ppt课件

WEB编程技术 考核方式 考核内容 设计并布局一个个人网站 或其他主题网站 的主页和其他静态 特效页面上机实验报告评分标准颜色搭配 结构布局 10分 主页设计及布局 15分 登录页面设计 10分 注册页面设计 10分 个人信息介绍 10分 其他页面设计 20分 特效设计 10分 实验报告 15分 教学大纲解读 课程性质 地位和作用动态网页设计和网站建设的一门专业基础课 是后续课程 ASP NET 和 WEB数据库访问技术 的先修课程课程教学对象 目的和要求从教学内容上要求学生了解并熟悉静态页面设计语言HTML JavaScript脚本语言和样式表技术 从能力培养上要求学生能通过所学的基础知识 参考目前各种流行的网页设计技巧 结合学生的实际能力和专业需求 能独立的完成网站的客户端设计 教学方法上在讲解基础知识的同时 充分结合现代网页设计的技巧 注重理论与实践相结合 实验内容 HTML与CSS结合布局网站主页1 熟悉开发环境 配置环境 用已学标记设计自己的简历2 主页布局 登录页面布局 注册页面布局3 设计网站样式表使用JavaScript实现页面的特效1 编写剪刀 石头 布游戏2 表单特效验证登录页面输入信息验证注册页面的输入信息3 页面特效用动态脚本实现网站的LOG用脚本处理自己的照片其他特效 内容提要 WEB编程基础知识WEB程序的开发环境静态页面设计 4学时 JavaScript脚本语言 6学时 JavaScript浏览器对象 3学时 样式表设计 3学时 特效页面设计 2学时 2学时 第1讲 WEB编程基础知识 本讲内容 WEB编程原理WEB协议开发环境HTML基本标记 什么是WEB Web全称为WorldWideWebWeb是Internet提供的一种服务Web是存储在全世界Internet计算机中 数量巨大的文档的集合Web是一种超文本信息系统Web是图形化的和易于导航的Web与平台无关Web是分布式的 具有新闻性 动态的 交互的 Web的工作原理 用户在浏览器地址栏输入URL 静态页面 htm html 动态页面 asp aspx jsp 识别用户请求的类型 调用相应的处理进程 1 静态页面 直接返回2 动态页面 调用相应的进程处理程序 解析后将结果页面 htm 反馈给用户 查看相应的请求结果 Internet网络协议 Internet是由各种不同类型 不同规模 独立管理和运行的主机或计算机网络组成的一个全球性特大网络 Internet使用的网络协议是TCP IP协议 凡是连入Internet的计算机都必须安装和运行TCP IP协议软件 TCP IP协议 TCP IP协议把整个网络分成4个层次 应用层 传输层 网络层和物理链路层 它们都建立在硬件基础之上 HTTP协议 超文本传输协议HTTP HyperTextTransferProtocol 其定义的事务处理由以下4个步骤组成 1 客户端与服务器建立连接 2 客户端向服务器提出请求 3 如果请求被接受 则服务器送回响应 在响应中包括状态码和所需的文件 4 客户端和服务器断开连接 示例http 远程登录协议Telnet Telnet是关于远程登录的一个协议 用户可以通过用Telnet连入某个主机 成为该主机的终端而访问各种所需的信息 或运行远程主机上的程序来求解各种复杂的问题还可以利用Telnet连到Internet上的种种服务器 如Archie Gopher Wais WWW以及其它服务器 比如某图书馆的资料文献服务器等等示例开始 运行 文件传输协议FTP FTP既是一种文件传输协议 也是一种服务 能使Internet上两台主机间互传 拷贝 文件FTP服务器匿名FTP服务器 用户名和口令登录连接 拷贝文件示例开始 运行常用FTP服务器软件ServerU IP地址 IP地址是识别Internet网络中的主机及网络设备的唯一标识表示 网络地址 主机地址 长度为4个字节 由3个用 分隔的十进制数组成 每个数不大于255 如210 29 135 122A类 用于规模很大主机数目很多的网络B类 B类地址用于中型到大型的网络C类 C类地址用于小型本地网络 LAN 域名 IP地址是连网计算机的地址标识DNS 域名服务系统 允许为主机分配字符名称 即域名 并实现域名与IP地址的转换7个组织模式的顶级域名分配如下 统一资源定位器URL URL UniformResourceLocator 就是用来确定某信息位置的方法格式 示例Telent 安装配置IIS 开始 程序 管理工具 Internet信息服务 IIS 管理器 WinServer版 开始 控制面板 管理工具 Internet信息服务 IIS 管理器 WinXp版 如果上述方法找不到 Internet信息服务 IIS 管理器 开始 控制面板 添加 删除程序 添加 删除Windows组件网站 默认网站 右键 新建 网站 虚拟目录 输入网站别名 test 输入 选择网站路径 d test 注意 最好不要把网站放在系统盘上 除了执行以外全都选中 配置Dreamweaver 启动MacromediaDreamweaverMX站点菜单 新建站点 管理站点在弹出的对话框的顶部选择基本标签输入站点的名字 即刚才在IIS中配置的虚拟目录的别名test 选择服务器技术 是 ASP NETC 或JSP选择 在本地编辑和测试 输入 选择站点文件的保存位置 d test 即刚才在IIS中配置虚拟目录所对应的物理路径 输入站点的URL test不使用远程服务 使用Dreamweaver 文件 新建在弹出的对话框上选择 基本页 HTML 文档类型无 文件 保存 保存路径为d test 即刚才在IIS和Dreamweaver中配置的路径 编辑页面再保存F12浏览页面效果 静态页面设计 静态页面主要是使用HTML语言设计的页面 用户只能浏览Web服务器上预先安排好的信息 设计静态页面主要使用各种页面开发工具 如Dreamweaver FrontPage等 头部标记 HTML文件头开始 描述文档属性无标题文档 文档标题 显示在浏览器的标题栏脚本函数 HTML文件头结束 体部标记 页面正文内容布局与设计Body标记的常用属性 文字显示和段落控制标记 常用转义符号 示例 Sample1 html 图象标记 通过这两个参数 可以将任意大小的图片设置成所需要的大小 而不需要做任何剪裁 超链接标记 链接文本或图象target blank表示目标页面显示于一个新的浏览器窗口中 s