通信界 | 通信圈 | 通信家 | 下载吧 | 说吧 | 国际 | 国内 | 运营 | 市场 | 财经 | 物联网 | 无现金 | | 专网 | 信息安全 | 5G | BigDate
 电源 | 专网 | 光通信 | 交换 | 视频 | 接入 | 无线 | 线缆 | 测试 | IT | 自动化 | 互联网 | 数据 | 政策 | 终端 | NGN | 视界 | 前瞻 | 知本院

通信圈〖休闲 · 娱乐〗数据编程 · 大数据建设 → “授人以鱼不如授人以渔”,浅谈动易风格模板制作思路及方法(适合新手)

欢迎您提出建议和意见!管理员QQ:181502650 通信界QQ群:群①:31498574;群②:89286709 下载吧-通信书籍、通信论文、通信报告集聚地! 通信界QQ群:群③:5834261;群④:8044407

  共有3439人关注过本帖树形打印复制链接

主题:“授人以鱼不如授人以渔”,浅谈动易风格模板制作思路及方法(适合新手)

帅哥哟,离线,有人找我吗?
新月弯刀
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 新月派弯刀
等级:通信圈管理员 帖子:2213 积分:26874 威望:10 精华:34 注册:2004/9/1 1:25:35
“授人以鱼不如授人以渔”,浅谈动易风格模板制作思路及方法(适合新手)  发帖心情 Post By:2006/7/6 0:00:19 [只看该作者]

(一)、学习风格模板制作前你应该懂得一些简单的html知识:

HTML是一种描述文档结构的标记性语言,它使用一些约定的标记对WWW上的各种信息进行标记。当用户浏览WWW信息时,浏览器会自动解释这些标记的含义,并按照一定的格式在屏幕上显示这些被标记的文件。 1、通过HTML可以调用图片、文字、声音、动画、视频等网页元素

图片调用: <IMG SRC="文件名"> 文字格式: <FONT SIZE="+5 " COLOR="00FFFF">文字</FONT> 声频: <EMBED SRC="音乐文件名" AUTOSTART=true> 视频: <EMBED SRC="视频文件名" AUTOSTART=true>

2、通过HTML可以实现页面之间的跳转,最常见的就是网站首页栏目调用后面的“moer...”。

页面跳转:〈A HREF="文件路径/文件名"></A>

3、认识html文档: html文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。通用格式如下:

<HTML> <HEAD> -------插入头部信息 </HEAD> <BODY> -------插入html的文档正文部分 </BODY> </HTML>

其中<HTML>在最外层, 表示这对标记间的内容是HTML文 档。我们还会看到一些Hompage省略<HTML>标记,因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD> 之间包括文档的头部信息,如文档总标题等,若不需头部信息则可省略此标记。<BODY> 标记一般不省略, 表示正文内容的开始。

下面是一个最基本的超文本文档的源代码:

<HTML> <HEAD> <TITLE>HTML示例</TITLE> </HEAD>

<BODY> <CENTER> <H3>欢迎光临</H3> <BR> <HR> <FONT SIZE=2>    感谢您的到来! </FONT> </CENTER> </BODY>

</HTML>

4、认识html文档中的标签:

刚刚接触html文档,最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为标签,它们是用来分割和标记文本的元素。

A. 单标签 某些标记称为“单标签”,因为它只需单独使用就能完整地表达意思,这类标记的语法是:< 标签名称>,最常用的单标签是<BR>, 它表示换行。

B.双标签 另一类标记称为“双标签”,它由“始标签”和“尾标签”两部分构成,必须成对使用,其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能,而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠(/)即成为尾标记。这类标记的语法是:<标签> 内 容</ 标签> 其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示,就将此段文字放在一<EM> </EM>标记中:<EM>动易网络</EM>

5、学会读网页源码: 我们来看看动易公司的网页源码(即htm语言,查看方法为先选中你要看的网页,右

键->查看源代码,会得到一个用记事本打开的文件,里面就是我们要学习的网页源

代码即htm语言了)

<html> <head> <title>动易网络科技 >> 首 页</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Keywords" content="动易,动易网络,动易网络科技有限公司,动易网站管理系统,动力文章系统,文章系统,动力,网站建设,解决方案,网站,设计,网页设计制作,软件,帮助,系统帮助,动易帮助,服务"> <meta name="description" content="动易网络"> <link href='/Skin/DefaultSkin.css' rel='stylesheet' type='text/css'> <script language='JavaScript' type='text/JavaScript' src='/js/menu.js'></script>

<script LANGUAGE="JavaScript"> <!-- function openwin() { window.open ("/skin/200508/2005II/20056index_ad3.html", "newwindow", "height=464, width=316, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") } --> </script> <script src="/JS/prototype.js"></script> <script src="/JS/checklogin.js"></script> </head>

这里整体结构的头部信息,放置在<head>与</head>之中.

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:

name 属性

<meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;

<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词;

<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容;

<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者;

<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">

其中的属性说明如下:

  设定为all:文件将被检索,且页面上的链接可以被查询;

  设定为none:文件将不被检索,且页面上的链接不可以被查询;

  设定为index:文件将被检索;

  设定为follow:页面上的链接可以被查询;

  设定为noindex:文件将不被检索,但页面上的链接可以被查询;

  设定为nofollow:文件将不被检索,页面上的链接可以被查询。

6、代码中的链接使用:

在html语言中,最重要的就是对链接的使用,一般形式如:<a href=要指向的网址 target=_blank>要显示的内

容</a>,链接(也称超链接)是超文本的一个重要特征,它是指通过标志符号的作用,并把不连续的两段文字或两个文件联接起来。链接是构起网富网络世界的纽带: A、链接文件的使用标志: 要建立一个链接,必须具备两个条件: 1:确认被链接的文件名称URL 2:在文件中确定链接   HTML文件的链接标志是:<A>……</A>   在<A>中除了标记名“A”外还包括其他扩展信息,这些扩展信息称为属性。

HREF是链接中一个最常用的属性,该属性用来指出所要链接文件的名称或URL。其

结构形式为:   <A HREF=“被链接的文件名”>高亮显示的文本</A>   我们看这个的代码:<a href="html2.htm" target="mainFrame">   这是我们刚才点击从动易官方站采来的源代码,大家可以在Dreamweaver里打开,你会更容易找到这样的源代码的意思是怎样的,里面a这是链接的标志,后面的href命令指出链接的方向,也就是方向指向文件名。 同一个文件中的链接:

在制作html网页时,经常是需要链接的文件的两部分内容分别存成两个文件,甚至是网络上的文件,这就形成了本地链接和网络链接两种链接方式。 A、本地链接: 本地链接是链接本地的文件,并不需要网络了,只要本机有浏览器就可,这里就不解释了。 B、网络链接: 这个很简单的,有时我们需要从一个站点链接到一个站点,这种通过网络实现链接方法与本地文件链接相同,仍然是可能<a>标记和属性以及提示链接的一些文字,只是在文件名处应写上网络上的URL而己:如你可以用这个基本的格式,去链接你想要链接的.如,让别人点邮箱的链接,就能发信给你......

<a href=mailtinfo@powereasy.net>联系我们</a>

当然还有好多,大家可以在以后的学习中自己去发现......

7、美化网页时要注意的地方:

A、插入图象要注意格式和尺寸

在HTML网页中加入图像是通过<img>标记实现的。其书写格式为:<IMG SRC=”图像的文件名或URL”>,如我们在网页源码中找到:<img src="../../images/banner.gif" width="760" height="80">

这里的"../../images/banner.gif"路径名,后面的width="760" height="80"是宽和高。在<IMG>中使用了一个很重要的属<src>,src的作用是指出一个图像文件名或是指出URL(此时的路径名书写规则与使用链接时的书写规则相同)。 如果同一个文件中需要反复使用绝对路径名或URL。因为使用相对路径名,浏览器只需将图像文件下载一次,再次使用这个图像时只要再重新显示一遍即可。如果使用的是绝对路径名,每次显示时都要下载一次图像像,这会大大降低图像的显示速度。

B、调整图像和文本的相对位置

在实际的网页制作过程中,经常需要将图像和文本放在一起进行显示使用<img>标记的ALIGN属性可以调整图像与文本的位置: ALIGN=top 图像的顶部与其他文本或图像的底部对齐 ALIGN=middle 图像的中间与其它文本或图像的底部对齐 ALIGN=bottom 图像的底部与其它文本或图像的底部对齐(缺省值) ALIGN=left 图像放置在屏幕左边 ALIGN=right 图像放置在屏幕右边 如把上面提到的例子修改成:<img src="../../images/banner.gif" width="760" height="80" ALIGN=left> 我们只是在后面加上一句ALIGN=left,大家就会看到这个名为banner的图片显示靠左。

C、设计图像的替代文字

虽然图像可以使你的网页变得绚丽多彩,富有吸引力,但会带来传输速度降低的问题,有些浏览者为了提高网页下载速度,会关掉浏览器中载入的图像命令。为了使只浏览文本的用户能够了解页面上的图片内容可以使用<IMG>的alt命令。代码如下:<img src="../../images/banner.gif" width="760" height="80" alt="动易公司">,这样当banner图片没有出现时,ALT将引导文字内容会出现在屏幕上,以弥补无法显示的图像。

8、表格在html中的运用: 可以说,表格是最常用的了,在以前的网页制作中,如果不用表格,网页真是没法看。现在web2.0技术的流行,大多数人喜欢用div+css.但对才接触网络的人来说,表格还是很重要的,它对我们新手学习风格网页模板的制作,还是很有帮助的。

学习怎样在网页上创建表格之前,需要首先了解表格的基本部分: ● 表格标题(Caption):指示表格的含义,标题可有可无。 ● 表格标签(Table Headings Label)指示行、列存放的内容说明,一般以黑体、大写突出显示。 ● 表格数据(Table Data):指示表格的内容。 ● 表格单元(Table Cell):指示表格中各个独立的区域,其中一个区域可以放置表格标签或者 表格数据。

创建表格使用的标记

<table>标记是定义表格的总标记,HTML要求一个表格的全部内容包含<table>.....</table>标记之中,其中可以有标题及表格的内容。 <table>标记中最常用属性是BORDER属性。从HTML3.2以后,BORDER的含义有了变化,它的值不再标记边框有无,而是以像素点为单位表示边框的宽度,如BORDER=1即边框为1个像素点(像素点是位图的基本单位),如果不包含BORDER属性则默认无边,这与HTML2.0恰恰相反。 下面是一个简单代码的例子,表中只有一行数据,该行包含四个单元,一个表格标签,三个数据单元。  <html>  <head>  <title>一个单行表格</title>  </head>  <body>  <table border=2>  <caption>表的标题</caption>  <tr>  <th>表头</th>  <td>表的数据</td>  <td>表的数据</td>  <td>表的数据</td>  </tr>  </table>  </body>  </html> 其实对表格的学习主要还应该结合自己学习中的实践来理解,这样效果会更好一些!



由于家园论坛数据量过于庞大,无法进行帖子逐个修改,故给所有用户每人增加5000元电通币用于下载用,若电通币用完了,可以向管理员申请,版主会及时给您增加金钱,也希望大家理解,多多发贴跟帖,共同营造良好的沟通氛围。
下载吧-通信书籍、通信论文、通信报告集聚地!  回到顶部