2静态网页制作-精品文档整理.ppt

《2静态网页制作-精品文档整理.ppt》由会员分享，可在线阅读，更多相关《2静态网页制作-精品文档整理.ppt（77页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、Web 网页设计与制作 Web-ability is a must单机运行，独乐乐 联机运行，众乐乐 web web 文档，文档， HTML HTML语言语言网站与主页网站与主页 在逻辑上可视为一个整体的一系列页面的有机集合有机集合称为网站（Web Site或Site）。 作为一个组织或个人在 WWW（或其他Web）上开始点的页面称为主页（Homepage）。网站的工作原理网站的工作原理http:/一段信息百度服务器网页文件互联网最简单也是最基本的网页文件就是html文件解析并显示为解析并显示为将将HTML的基本工作原理的基本工作原理浏览器解析浏览器解析HTML文件里的文件里的内容按标签的含义

2、进行显示内容按标签的含义进行显示 地址：地址：网页编辑工具网页编辑工具 可视化编辑器 Macromedia Dreamweaver 记事本记事本 Microsoft FrontPage Adobe GoLive SoftQuad HotMetal去哪里找工具？去哪里找工具？ ftp:/ 下载 DreamWeaver.v8.0.CHS 即可，最新版的，最高级的，复杂功能太多，安装麻烦。 ftp:/ 下有所提及的所有多媒体制作工具（Flash，Premiere，Photoshop），都是Adobe公司属下的。 HTML 的基本知识1. HTML 标签 2. HTML 文件 3. HTML 文件结构

3、4. HTML 超链接 网页（Web Page）是存放在某台接入Internet的计算机中的一个文档，该文档在用网页浏览器识别和解释，将内容展示给网络用户。网页设计语言就是HTML，Hypertext Marked Language的缩写。 用标记标记来指明文档中不同内容的含义，譬如哪部分是图像，哪部分嵌入视频1. HTML概述HTML 语言使用标签来指明文档中的不同内容。标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分(或结构)，如段落、标题和表格等。标签描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。HTML 标签大部分HTML 标签形式

4、如下：标签名相应内容标签名标签的名字用尖括号 括起来。HTML 标签一般有起始标签与结束标签，起始标签与结束标签非常相似，只是结束标签在“”号后面多了一个斜杠“”。HTML的基本结构的基本结构 此处为文档标题 此处为文档正文内容4 pairs！简单简单HTML例子例子我的第二个网页 上海海事大学！ 1.信息学院2.商船学院3.文理学院运行结果HTML 文件就是普通的文本文件。可以使用2种基本方法制作HTML 页面：1.用文本编辑器，如Notebook，编辑文本及HTML命令；2.是采用可视化软件，如FrontPage，DreamWeaver生成HTML 命令。HTML 文件结构任何一份 HTM

5、L 文件，除了以标签，都包含3要素：1. 表头(Header) 以标签，标明文件的表头段2. 主题(Title)以标签，标明文件内容的主题3. 本体(Body)以标签，标明文件的本体区段HTML 文件四个最基本的标签基本标记说明标记这是一个html文档标记html文档的首部标记html文档的标题 标记html文档的正文部分HTML的基本结构的基本结构 此处为文档标题 此处为文档正文内容文字风格标记标题字标记： HTML定义了个级别的子标题，分别用H1，H2，H3，H4，H5和H6来表示。字体标记： size属性用来设定字号，n的取值为，默认值为。 字号、字体字号、字体 标题效果 一号字体 二号

6、字体 三号字体 四号字体 五号字体 六号字体 七号字体 RGB颜色值：# 16位色彩名 R分量值G分量值B分量值十六进制RGB值黑色000000000000白色FFFFFFFFFFFF绿色00FF0000FF00蓝色0000FF0000FF黄色FFFF00FFFF00青色00FFFF00FFFF紫色FF00FFFF00FF标题字标签 标题效果 一级标题体 二级标题体 三级标题体 四级标题体 五级标题体 六级标题体 浏览结果字体辅助变化标签符号含义粗体粗体字字斜体字底线字删除线下标字上标字划线标签HR size= 划线标签效果 划线标签 一 划线标签 二 划线标签 二 浏览结果转义字符要显示特殊

7、字符符号说明在HTML文档中的表示 空格空格符号 &符号&大于>小于<双引号"左引号‘右引号’版权号©乘号×除号÷人民币单位：元¥文字移动标签 要移动的文字要移动的文字文字移动啦啦啦，我从右向左移！ 啦啦啦，我来回走耶！啦啦啦，我只走3次！我移一步，歇一歇啦啦啦，我走得好快哟！列表标签项目符号 以方块为项目符号 以空心圆为项目符号 以空心圆为项目符号有序号列表项目编号标签 去滴水湖的步骤 到龙阳路地铁站； 坐龙港快线大巴； 在临港车站下； 换乘申港专线； 在滴水湖车站下。 1.超链接2插

8、入图片3.表格4.网页布局第二课使用Dreamweaver 8 制作网页超链接标签Link:在网页中使一些文字显示特定颜色，当鼠标点击时便会连到别的文章或网站。HTML文档中实现超链接的标签主要有：、在HTML 中使用anchor 标签来建立链接，它将文本或图形标识为指向其它HTML 文档、图形、小程序、多媒体效果或HTML 文档中特定位置。在链接的语法中必须包含一个参考属性href 和一个结束标签，如下所示：heres a link to another page.标签标签 链接文本HREF属性属性: 指明要链接的文件名或网络的URL地址，是不能缺省的TARGET属性属性: 指明打开目标窗口

9、的方式heres a linkhref指定了目标URL，URL是文档在Web或Internet上的地址，它总是放在引号中。这个URL可以是一个书签、网页或者站点。有两种链接方式：绝对URL和相对URL。 绝对URL包含四个部分，即协议指示符、主机名、文件夹名和文件名协议指示符、主机名、文件夹名和文件名。根据具体情况，URL可能还包括其他信息，指定用户名或服务器端脚本的输入。绝对URL举例如下：http:/ a link 链接IP地址为10.72.33.232的主机里网页发布目录中pic文件夹下的图片1.jpg网络链接例子（使用URL地址名）：heres a link 链接上海海事大学的主页网络

10、链接例子（使用IP地址名）：heres a link 链接上海海事大学的主页使用绝对地址使用绝对地址 相对URL：只包含文件夹和文件名 可以用这种相对URL指向位于与原文档在同一服务器或同一文件夹中的文件。这时，浏览器假设链接的目标文档与原文档在同一文件夹中或同一服务器中，所以不需要服务器名和协议名。 (即同级目录下）：heres a link 链接pic文件夹下的一张图片heres a link 链接pic文件夹下的一段音乐heres a link 链接video文件夹下的一段视频使用相对地址使用相对地址超链接文字颜色超链接文字颜色 标签里设置，可设置如下3个属性值：link： 可链接文字的

11、色彩alink：正被点击的可链接文字的色彩vlink：已经点击(访问)过的可链接文字的色彩超链接文字可有三种不同的显示形态出现在文件中，这三种超链结显示形态分别有：未链接、正在链接和已链接。链接形态链接形态定义定义设置属性设置属性未链接形态使用者未曾单击过或链接不成功的形态 LINKLINK正在链接形态使用者在单击链接时未放开手的形态ALINKALINK已链接形态使用者已单击链接成功的形态VLINKVLINK 注意文字颜色导航概念框架设置网页发布链接文字的色彩链接文字的色彩为网页选择背景 装饰HTML 文档的界面1. 插入图像 2. 表格 1. 插入图像图像文件格式web浏览器普遍支持的图形格

12、式有GIF 和JPEG。 一般我们看到的HTML 文件里的图形，多数为GIF 格式，这是因为GIF 的显示速度比较好。如果我们要选择高品质的显示画面，则可以选择JPEG 格式的图形。 插入图象HTML文件中，IMG 元素用来插图象。属性SRC 的主要用途是指定图形资源的位置，。属性ALT 是指定图形对应的文字叙述，其值为任意一串文字。ALT 属性的设立主要针对非图形界面浏览器使用者。但是，这对图形界面浏览器也有帮助。每当这些浏览器关闭显示图形功能后，这一串文字就派上用场了。编辑图像属性 选中图片，右键，弹出“属性”菜单 在“属性”中可修改图片大小、链接等Of course, 可用代码中的参数修

13、改 图文版面的排列(1). 图文的基本排列方式图文对齐排列由IMG 元素的ALIGN 属性来设置，图与文的对齐排列原则是以文字的基线(Baseline)为依据。其中排列的方式有以下几种：图形顶端位置与文字基线对齐ALIGN=up图形中间位置与文字基线对齐ALIGN=middle图形底端位置与文字基线对齐ALIGN=bottom(缺省值)图形顶端位置与文字最高位置对齐ALIGN=texttop图形顶端位置与行文字基线对齐ALIGN=baseline图文对齐排列方式(2). 图形配置控制宽度设置 图形配置宽度的设置是由WIDTH属性来完成。高度设置 图形配置高度的设置是由HEIGHT属性来实现。例

14、如：要插入的图形原来的尺寸为10090大小。如果我们要显示出200180大小的图，可将WIDTH和HEIGHT两种属性分别设置成200和180，如下所示单图多向超链接的设置它是将网页中的一副图像划分成多个热点区域，再让不同的区域进行超链接。完成此项功能主要有三个标签、和：单图多向超链接 单图多向超链接应示例单图多向超链接应示例COORDS属性说明COORDS的取值与SHAPE属性相关：(1) Shape=rect（矩形），则COORDS取值为四个数字，前两个数字为该矩形的左上角的x和y的坐标，后两个数字为右下脚x和y的坐标； (2) Shape=circle（圆），则COORDS取值为三个数字

15、，前两个数字为该圆圆心的x和y的坐标，最后一个数字为该圆的半径长度；(3) Shape=poly（多边形），则COORDS取值为任意多对数字，每一对数字表示一个点的x和y坐标。运行结果块标签：将网页分块块标签 啦啦，下列多个段落统一样式 这是第一段 这是第二段 使用Dreamwaver来制作网页1.直接编辑直接编辑HTML文件过于繁琐，不直观文件过于繁琐，不直观2.使用专业的使用专业的Dreamweaver 工具来制作网页，工具来制作网页，所见即所得所见即所得有用的资源：有用的资源：下载下载Dreamweaver 8Dreamweaver 8ftp:/ 由开始，用结束。表格标签有大作用表格标签

16、有大作用布局！ 基本表格包含: (1)TH元素元素(表示表格项目的表头) (2) TR元素元素 (一个表格可以分成很多行) (3) TD 元素元素(一行中有很多格) (3) 表格标题以标签 标签。元素是表示表格的行。元素是表示表格行中的一列。 表格示例 表1. 工资表 月份度 10月份11月份11月份 工资 3000元3500元6000元 实例：IE浏览结果： 设置表格设置有框线表格：.或.设置无框线表格：.或.设置表格的大小：设置表格行数：TR元素表示表格的行一份表格的行数由标签个数来决定。设置表格列数：表格列数由一行中所包括的TH和TD元素个数来决定。 设置存储格 格间距格间距 有线表格，

17、格与格之间的空间,称之为格间距。通过设置表格CELLSPACINGCELLSPACING的值来实现,格间距的宽度距离缺省值为1。 格内容与边缘距离格内容与边缘距离 用CELLPADDINGCELLPADDING来设定表格所有储存格表格所有储存格内容与边缘之间的宽度和长度内容与边缘之间的宽度和长度。缺省值为1。 实际应用表格共分成三个块实际应用中：借助菜单（“插入”-“表格）插入表格。 Why？为了布局，使按要求对齐 表格的嵌套表格的嵌套表格布局 图片名称： 3D模型鱼 图片高度： 1024 图片宽度： 1024 图片名称： 海鲜海鱼 图片高度： 1098 图片宽度： 2048 表格嵌套代码表格

18、嵌套代码、为了布局，使按要求对齐 单元格跨多行多列单元格跨多行多列 跨多行跨多列的单元格 学生基本信息 成 绩 姓 名 性 别 学 校 课 程 分 数 周 琨 男 上海海事大学程序设计 88 李 楠 女 96 单元格跨多行多列单元格跨多行多列表格常用属性标签属性名含义取值Border边框线宽度取数字值，缺省值为1；当Border=0时，无边框Height表格高度取数字值或百分比Width表格宽度取数字值或百分比BgColor表格的背景颜色取颜色的RGB值，缺省值为白色BorderColor边框颜色取颜色的RGB值，缺省值为黑色cellspacing单元格之间的距离取数字值，缺省值为1cellp

19、adding数据与表线的距离取数字值，缺省值为1align表格相对于周围元素的对齐方式Left、 center、 right手工，在网页中插入视频 插入视频自己百度， 找到步骤 调整视频用鼠标单击视频图像就会选择该视频图像，此时视频图像的周围会出现8个控点，使用鼠标拖动控点可以改变视频图像的大小。 插入视频、音频时，注意下格式，设置下属性 譬如： 插入*.flv视频；借助于工具注意：插入,是用“shockwave”，如下：支持插入Flash的*.swf格式 注意：插入某些视频后，服务器可能需要更改一些设置设置添加mime类型插入其他格式的视频某些版本DreamWeaver不支持音视频u解决方案：自己写代码u要是不会写，怎办？ 换个编辑工具，譬如Fontpage, 插入完毕，测试正常播放，然后拷贝代码到DreamWeaver编辑页面使用链接法在新窗口打开视频使用链接法在新窗口打开视频 首先输入一段文字，比如“播放视频” 然后选中这段文字并单击鼠标右键，选择“超链接”命令，设置此链接指向C:mp01.MPG，这样就在单击文字链接后，自动打开播放器进行播放了。