实验教程_第5章网页设计与制作基础(精)

第11章网页设计与制作基础网页和网站的基本概念HTML语言的特点和常用标志的使用使用FrontPage和Deamweaver建立网站并制作简单网页的方法本章主要内容掌握网页和网站的基本概念了解HTML语言的特点和常用标志的使用掌握使用FrontPage和Deamweaver建立网站并制作简单网页的方法本章学习目标网页的基本概念用FrontPage制作网页HTML标注语言简介Dreamweaver工具简介本章章节什麽是网页?网页的作用Internet传递信息的一种方式传递的信息多种多样（多种媒体）文本图片声音数字电影等等网页的基本概念什麽是网页?网页的本质是保存在磁盘中的纯文本文件网页的基本概念可以用记事本打开进行浏览和编辑什麽是网页?文件内容是用特殊的语言书写的代码最基本的代码是用HTML语言书写的记录页面要显示哪些内容、样式、布局在基本的HTML代码中可嵌入用JavaScript、VBScript、PHP等语言书写的程序实现特殊的效果功能网页文件的扩展名可以是.htm、.html、.asp、.jsp、.php等网页的基本概念漂亮的页面网页文件：幕后英雄浏览器+资源（页面上要显示的图片、声音、动画、流媒体等非纯文本文件）网页的基本概念网页的浏览过程URL（统一资源定位器）网页的基本概念服务类型服务器地址路径文件名网页的浏览过程浏览静态网页网页的基本概念客户端服务器端送出URL请求到服务器传回html文件InternetJavaScriptJavaApplet网页的浏览过程浏览动态网页网页的基本概念客户端服务器端送出URL请求到服务器传回html文件InternetCGIASPJavaScriptJavaApplet网页的分类根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页首页：访问网站时首先看到的页面，是网站开场页网页的基本概念只具有欢迎访问者的作用网页的分类根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页主页：设有网站导航向访问者传递引导和欢迎信息网页的基本概念是网页的链接中心大多数网站的首页与主页通常合并为一个页面，这种情况下主页和首页指的是同一个网页网页的分类根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页专栏网页：主页和内容网页的中转站网页的基本概念用于内容的细化和进一步归类网页的分类根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页内容网页：传达具体信息的页面，是网站链接的终点网页的基本概念网页的分类根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页功能网页：专门用于信息反馈的服务性网页网页的基本概念网站各种网页通过超级链接的形式组成的一个逻辑整体。网页的基本概念网站主页专栏网页1专栏网页2专栏网页3功能网页1功能网页2内容网页21内容网页22内容网页23网站结构草图，只体现了各网页的层次关系。网页的链接关系要复杂得多。网站一个网站就是一个文件夹----根目录用来存放在内容上有较强内在联系的网页文件和资源文件文件按原则有组织存放网站的存放制作阶段—本地主机发布到服务器—远程主机服务网页的基本概念网页制作方法编写代码HTML+CSS、JavaScript/VbScript等使用网页制作工具Dreamweaver、Fireworks和Flash三剑客微软的word、frontpage网景的NetscapeNavigatorGold等软件制作网页网页的基本概念返回基本过程创建一个简单的网站编辑网页发布站点用FrontPage制作网页返回HTML语言特点标志对：标志名/标志名单个标志：标志名HTML标注语言简介Html文档框架htmlhead/headbody/body/html头体title/titlestyle/stylemeta等table/tablep/phrimg/img等等HTML的常用标志基本标志html/htmlhead/headbody/bodytitle/title基本标志示例htmlheadtitle显示在浏览器最上边蓝色条中的文本/title/headbodybgcolor=“yellowtext=bluep黄色背景、蓝色文本/p/body/htmlHTML标注语言简介HTML的常用标志格式标志p/pbrblockquote/blockquotedl/dldt/dtdd/ddol/olul/ulli/lidiv/div格式标志示例HTML标注语言简介htmlheadtitle一个普通列表/title/headbodytext=bluedldt中国城市/dtdd北京/dddd上海/dddd广州/dddt美国城市/dtdd华盛顿/dddd芝加哥/dddd纽约/dd/dl/body/htmlHTML的常用标志文本标志pre/preh1/h1……h6/h6b/bi/iu/utt/ttcite/citeem/emstrong/strongfont/fontHTML标注语言简介HTML的常用标志图像标志imgsrc属性alt属性align属性border属性width属性height属性HTML标注语言简介HTML的常用标志表格标志table/tabletr/trtd/tdth/thHTML标注语言简介注意边框、间距、填充属性的含义边框间距填充HTML的常用标志超链接标志ahref=/aaname=/aHTML标注语言简介链接载体链接目标其它网页其它网站锚点E-mail其它文件文本图像轮替图像图像热区链接组成HTML的常用标志其它标志帧标志frameset/frameset、frame、noframes/noframes表单标志form/form、inputtype=、select/select、option、textarea/textarea其它标志meta、style/style、script/script、address/address、marquee/marquee等HTML标注语言简介返回Dreamweaver的界面Dreamweaver工具简介Dreamweaver的基本操作Dreamweaver工具简介创建本地站点将资源添加到您的站点创建并保存页面文件设置页面标题编辑网页返回1、什麽是网页？什麽是网站？对网页分类。2、HTML语言的特点是什麽？有哪些常用标志？3、以你的兴趣爱好为主题，或你的专业介绍为主题，利用FrontPage或Deamweaver制作一个个人主页及几页相关的网页。本章习题与思考实验一：使用FrontPage目的：掌握使用FrontPage创建网站的方法内容：参照11.2节的介绍，尝试FrontPage的各种操作；仿照11.2节的介绍制作一个学校站点。本章实验实验二:基本HTML文件的编辑目的:掌握使用“记事本”编辑HTML的基本操作；掌握使用IE测试HTML文件的操作；掌握HEAD、TITLE、BODY等标志符的使用。内容：编写11.3节中出现的HTML源文件；编写一个能显示背景图案的网页源文件；编写一个显示为图11.40的页面。本章实验图11.40实验三：使用Dreamweaver目的：掌握使用Dreamweaver创建网站的方法内容：参照11.4节的介绍，尝试Dreamweaver的各种操作；仿照11.4节的介绍制作一个学校站点。本章实验