网页设计制作教案优质PPT.ppt

网页设计制作教案优质PPT.ppt

《网页设计制作教案优质PPT.ppt》由会员分享，可在线阅读，更多相关《网页设计制作教案优质PPT.ppt（55页珍藏版）》请在冰豆网上搜索。

80/news/default.aspoFTP，ftp:

/upload:

o发送电子邮件，mailto:

o本地文件，file:

/D:

/Downloads/rfc.raro远程登录，telnet:

/210.43.0.13:

1102、什么传输协议？

o8.5.3HTTP（HyperTextTransferP.）IISIEDNS服务器的IP是？

61.163.241.19http:

/61.163.241.19http:

/61.163.241.19/default.shtmhttp:

/61.163.241.19/homepage2006/images/cctvlogo_778.gif组织网页：

组织网页：

HTML文件文件+图片文件图片文件+Flash文件文件其它图片和Flash等HTML源代码中需要播放的文件61.163.241.19返回返回3、网页标准问题o超文本标记语言HTML（HyperTextMarkupLanguage）n超文本标记语言HTML中的Markup的意思就是“设置标记”。

nHTML定义了许多用于排版的命令（标签）。

nHTML把各种标签嵌入到万维网的页面中。

这样就构成了所谓的HTML文档。

HTML文档是一种可以用任何文本编辑器创建的ASCII码文件。

二、超文本标记语言HTML（HyperTextMarkupLanguage）1.HTML概述o超文本标记语言HTML中的Markup的意思就是“设置标记”。

oHTML定义了许多用于排版的命令（标签）。

oHTML把各种标签嵌入到万维网的页面中。

2.HTML文档o仅当HTML文档是以.html或.htm为后缀时，浏览器才对此文档的各种标签进行解释。

o如HTML文档改换以.txt为其后缀，则HTML解释程序就不对标签进行解释，而浏览器只能看见原来的文本文件。

o当浏览器从服务器读取HTML文档后，就按照HTML文档中的各种标签，根据浏览器所使用的显示器的尺寸和分辨率大小，重新进行排版并恢复出所读取的页面。

HTML的格式与标签o元素（element）是HTML文档结构的基本组成部分。

一个HTML文档本身就是一个元素。

每个HTML文档由两个主要元素组成：

首部（head）和主体（body）。

o首部包含文档的标题（title），以及系统用来标识文档的一些其他信息。

标题相当于文件名。

o文档的主体是HTML文档的最主要的部分。

o主体部分往往又由若干个更小的元素组成，如段落（paragraph）、表格（table）、和列表（list）等。

HTML的标签oHTML用一对标签（即一个开始标签和一个结束标签）或几对标签来标识一个元素。

o开始标签由一个小于字符“”组成。

o结束标签和开始标签的区别只是在小于字符的后面要加上一个斜杠字符“/”。

o虽然标签名并不区分大写和小写。

o有一些标签可以将结束标签省略。

HTML文档中标签的用法一个HTML的例子HTML很容易掌握这是第一个段落。

虽然很短，但它仍是一个段落。

这是第二个段落。

HTML文档开始HTML文档中标签的用法一个HTML的例子HTML很容易掌握这是第一个段落。

首部开始HTML文档中标签的用法一个HTML的例子HTML很容易掌握这是第一个段落。

标题HTML文档中标签的用法一个HTML的例子HTML很容易掌握这是第一个段落。

首部结束HTML文档中标签的用法一个HTML的例子HTML很容易掌握这是第一个段落。

主体开始HTML文档中标签的用法一个HTML的例子HTML很容易掌握这是第一个段落。

1级标题一个HTML的例子HTML很容易掌握这是第一个段落。

HTML文档中标签的用法第一个段落一个HTML的例子HTML很容易掌握这是第一个段落。

HTML文档中标签的用法第二个段落HTML文档中标签的用法一个HTML的例子HTML很容易掌握这是第一个段落。

主体结束HTML文档中标签的用法一个HTML的例子HTML很容易掌握这是第一个段落。

HTML文档结束插入图像结束标签开始标签插入图像插入的图像文件名是portrait.gif高度是100像素宽度是65像素万维网页面中的超链接1.链接到其他网点上的页面o定义一个超链的标签是。

字符A表示锚（Anchor）。

o在HTML文档中定义一个超链的语法是：

X超链的起点这个地方填写超链终点的URL链接举例清华大学超链的起点是某个文档中的这四个字超链的终点是清华大学的主页2.链接到一个本地文件o远程链接：

超链的终点是其他网点上的页面。

o本地链接：

超链指向本计算机中的某个文件。

本地链接本地链接可进行许多的简化：

o协议（http:

/）被省略表明与当前页面的协议相同。

o主机域名被省略表明是当前的主机域名。

o目录路径被省略表明是当前目录（对于远程链接，表明是主机的默认根目录）。

o文件名被省略表明是当前文件（对于远程链接，表明是对方服务器上默认的文件名，通常是一个名为index.html的文件）。

相对路径与绝对路径o.o.o/default.htm网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载/menu3/file/file123.htm网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载/menu2/2-1.htm/menu2/2-1.htm网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载相对路径名与绝对路径名o使用简化的URL，在HREF=的后面使用的是相对路径名。

o使用完整的URL则是使用绝对路径名。

o使用相对路径名的好处n绝不是为了少键入一些字符n而是便于目录的变更。

abc本文件链接（页内锚）举例Xabc文件F本文件链接的HTML语句格式：

X本文件链接在此处定义命名锚起点终点命名锚的定义语句：

命名锚的名字命名锚的终点在字符abc的前面远程链接举例远程链接：

清华大学清华大学清华大学主页文件F远程链接因特网起点终点色彩的RGB表示o文字o三原色RGBn每个原色色彩取值从0255（即0x00-0xFF）o整体的色彩空间n000000到FFFFFF共有282828224个取值o图中共有几种颜色？

下列值代表何种颜色？

n#00FF00#FFFF00n#FFFFFF#000000n#C0C0C0#666666超链接的四个状态oA:

linkColor:

#CC00CC;

Text-Decoration:

noneoA:

hoverColor:

#666666;

underlineoA:

activeColor:

#FF0000;

visitedColor:

noneo如何实现“看不出哪些链接被点击过”？

n访问过的颜色未访问过的颜色o实现方法：

nIE设置（只能改一台机器的默认样式）n样式表三、可视化网页设计o工具nMacromediaDreamweaverMX2004nMicrosoftFrontpage2003n记事本/Editplus1、DreamweaverMX2004简介o设计者视图o界面介绍o快捷键nCtrl-ZnCtrl-YnCtrl-SnCtrl-F：

查找、替换nF8：

站点文件o菜单n属性面板关闭后如何打开？

2、站点操作o建立站点n为什么要建立站点？

o管理方便，打开方便o更新链接nDreamweaver中的站点就是发布的站点吗？

o不是，这里仅仅是设计时的站点n实验室的计算机重新启动后会自动恢复o实验中每次都要重建o文件建立在Student盘3、网页制作o表格嵌套o导航条、当前位置n在每个网页中的位置都要一致3、网页制作o样式表n控制元素的外观n使用方式o一个网页定义一个样式表o多个网页共用一个样式表文件（见下页图）n自己定义（见右图）n下载（网页“文件另存为”，找“.files”文件夹中的css文件）n方式（选择器）o定义类样式，元素手工套用（class=类样式名称）o定义元素（标签）的默认样式，元素（标签）将自动套用3、网页制作o服务器端包含n包含文件oo文件扩展名：

.shtm或.aspn被包含文件.htmo只有到之间的内容n如果含有及其闭合标记，被包含之后的结果网页中就会有双份，将出错！

n必须发布出来才能显示o即必须以http:

/的方式访问o具体见“六、网站设计与发布”4、常见问题o常见操作问题：

n光标选中元素后，才能设置该元素的属性nTable中TR和TD如何选中？

o状态栏：

标签检查器四、网站规划-网站基本知识o概念区分n网页、网站n首页、默认页、主页o统一内容n抬头n版权nLogon导航栏四、网站规划-网站基本知识o网站规划设计步骤n确定类型、主题、风格n内容与界面设计o栏目与板块编排o目录结构与链接结构o版面布局n策划书n申请域名n服务器接入方式（存放方式）的选择四、网站规划-选择服务器接入方式oInternet主机方式（自管）n专线：

大中型公司采用n拨号：

个人网站，成本低；

但要解决随机分配IP问题o花生壳、DNS2Go：

可提供每次动态IP自动对应域名的服务o主机托管（通过FTP或远程桌面管理）n电信、网通等ISP机房o提供高带宽、合适的温湿度、稳定的电源、防火等安全o虚拟主机（通过FTP上传文件）n虚拟：

申请空间，共享服务器n付费空间n个人免费空间四、网站规划-网页制作基本知识o网页布局问题n表格布局o网页设计独有特点n层坐标布局o与平面设计无区别四、网站规划-DHTML（动态网页效果）总结oCSS（样式表）n外接样式表：

通过一个css文件控制多个网页的显示效果。

oJavascript（Java脚本程序，与Java不同）n在客户端实现与用户的交互oSSI（服务器端包含）n通过在多个网页中包含同一个ssi文件实现公共部分（抬头、导航、版权等）的统一o方法：

o注意包含文件的扩展名：

包含文件.shtm或包含文件.asp四、网站规划-WEB数据库程序执行的原理将查询结果组成网页“Select*fromstudent”五、图形编辑与动画制作o图形文件格式nBMP位图o色彩空间、分辨率nJPG压缩格式nGIFo多帧动画、透明、256色nPSo源文件的概念nPNG五、图形编辑与动画制作o位图的概念n逐点（像素）描绘o矢量图的概念n在数学上定义为一系列由线连接的点。

n放大后不失真，和分辨率无关，文件小nAdobeIllustrator、CorelDrawFlasho矢量动画的概念nf