第01部分-网页设计概述

第1部分网页设计概述 任课教师信息 姓名 系部 地址 电话 电邮 课程学习要求与考核方式 上课 带课本 以听为主 适当做笔记实验 提前准备 按时上下课 遵守机房规章制度课后 通过看课本消化吸收课堂知识 多上机练习考核方式 上机考试 理论与操作 3小时闭卷 但会提供相关的电子手册 课程概述 本课程目的是让学生掌握WEB前端相关技术 能独立完成相应前端网页的设计与开发 主要内容有 HTML与XHTMLCSSJavaScriptAjaxPHP 初步介绍 Dreamweaver 本章要点 Internet与www网页和网站的关系Web服务器和浏览器动态网页和静态网页域名与主机的关系URL的结构 Internet Internet是由遍布全世界的各种各样的网络通过TCP IP协议连接成的一个松散结合的全球网 它使网络上的各台计算机 Internet上称为主机 即host 可以互相交换信息 Internet为用户提供了各种各样的服务 如WWW Email FTP 即时通信等 WWW WWW的含义是全球信息网 WorldWideWeb 简称为Web或 万维网 它是一个基于超文本 hypertext 方式的信息查询工具 通过http协议传输超文本信息 是由欧洲核子物理研究中心 CERN 研制的 WWW将位于全世界Internet上不同网址的相关数据信息有机地编织在一起 通过浏览器 browser 提供一种友好的信息查询界面 WWW特点 WWW具有三个统一 1 统一的资源定位方式 URL 统一资源定位器 即网址 2 统一的资源访问方式 HTTP 超文本传输协议 3 统一的信息组织方式 HTML 超文本标记语言 WEB与互联网 WEB是互联网行业的基石 1 网页与网站 网页即是超文本 是通过超文本标记语言HTML HypeTextMarkupLanguage 书写的一种文本文件 通过浏览器看到的包含了如文字 图像 声音和动画等多媒体信息的每一个页面 其本质是一个纯文本文件 浏览器对该纯文本文件进行了解释 才生成了多姿多彩的网页 除文本外 其它媒体素材 图像 声音 动画和影像等 都需要保存成单独的文件 通过相关标记和URL与网页文件关联 1 1HTML超文本标记语言 超文本标记语言 HTML 作为一种语言 它具有语言的一般特征 即它是一种符号系统 具有自己的词汇 符号 和语法 规则 超文本 就是相比普通文本有超越的地方 如超文本可以通过超链接转到指定的某一页 而普通文本只能一页页翻 超文本还具有图像 视频 声音等元素 并能和用户交互 这些都是普通文本无法达到的 HTML的历史 超文本标记语言HTML是一种建立超文本 超媒体文档的语言 它用标签标记文档中的文本及图像等各种元素 指示浏览器如何显示这些元素 HTML4 01 1999 HTML与编程语言的区别 HTML语言与编程语言有明显不同 首先它不是一种计算机编程语言 而是一种描述文档结构的语言 或者说排版语言 其次HTML是弱语法语言 随便怎么写都可以 计算机尽力去理解执行 不理解的按原样显示 而编程语言是严格语法的语言 写错一点点计算机就不执行 报告错误 再次HTML语言不像大多数编程语言一样需要编译成指令后执行 而是每次由浏览器解释执行 1 2网站 一个网站对应磁盘上的一个文件夹 网站的所有网页和其他资源文件都会放在该文件夹下或其子文件夹下 设计良好的网站通常是将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护 这些网页通过链接组织在一起 其中有个网页称为首页 常命名为index htm 须放在网站的根目录下 网页中所需要的图片文件一般单独保存在该目录下一个叫images的文件夹下 网站结构 Wgzx web index htm images style css about html h1 htm h2 htm h3 htm 首页文件的直接上级目录 是网站根目录 首页文件的间接上级目录 不是网站根目录 网站目录的建立 制作网站的第一步是在硬盘上新建一个文件夹 作为本地网站的根目录 以后把这个目录上传到服务器上就可以了 由于要用到Dreamweaver 所以还需配置网站在Dreamweaver下的开发环境 在Dreamweaver中新建站点 任意取一个站点名 把刚才新建的那个文件夹作为站点文件夹就可以了 这样站点目录内的html文件之间的链接会使用相对URL的形式 网站的特点 众多的网页确定的主题统一的风格便捷的导航栏目的分层 网站制作的流程 确定站点的核心内容 网站的规划 网站外观的设计 网页具体制作 网站性能测试 网站发布 网站更新与维护 网页和网站的制作工具 Adobe的Dreamweaver Microsoft的FrontPage 2006年后 2Web服务器和浏览器 网页被放置在Web服务器上用户通过Url请求web服务器时 web服务器把相应的网页传送到用户浏览器端 Web服务器的作用 对于静态网页 web服务器仅仅是定位到网站对应的目录 找到每次请求的网页传送给客户端 对于动态网页 web服务器找到该网页后要先对动态网页中的服务器端程序代码进行执行 生成静态网页代码再传送给客户端浏览器 2 1Web服务器 由于web服务器对静态网页起的只是一个查找和传输的作用 因此在测试静态网页时可不安装web服务器 直接找到该网站对应的目录双击网页文件预览测试 而测试或运行动态网页则一定要在本机上安装web服务器 如IIS 因为动态网页要经过web服务器解释执行生成html文档才能被浏览器解释 2 2浏览器 浏览器 用户浏览网页所用浏览器的本质 解释html代码生成我们看到的网页目前常见的浏览器 按使用量多少排列 有 IE6 IE7 IE8 Firefox3 Safari4 GoogleChrome2 Opera10及NetscapeNavigator9 浏览器 InternetExplorerFirefoxNetscapeNavigator OperaSafariGoogleChrome 3 静态网页和动态网页 静态网页是不包含服务器端代码的html文件 web服务器只是负责把静态网页发送给浏览器 由浏览器解释执行动态网页中含有服务器端代码 需要先由web服务器对这些服务器端代码进行解释执行生成客户端代码后再发送给客户端浏览器 动态网页的特征 同一个网页根据每次请求的不同 可每次显示不同的内容因为要显示不同的内容 所以往往需要数据库做支持从网页的源代码看 动态网页中含有服务器端代码 后缀名不能是 htm 4 域名 IP和主机 域名和主机的关系 多对一即在一台主机上可建立多个网站 这些网站的存放方式称为 虚拟主机 通过web服务器上设置 主机头 进行区别 域名作用有二 一是将域名发送给DNS服务器解析得到web服务器的IP地址以进行连接 二是将域名信息发送给web服务器 通过域名与web服务器上设置的 主机头 进行匹配确认客户端请求的是哪个网站 若客户端没有发送域名信息给web服务器 例如直接输入ip 则web服务器将打开默认网站 域名的作用 1 方便记忆IP地址 2 作为主机头信息识别请求的网站 5 URL的结构 URL UniversalResourceLoc