如何制做网页.docx
- 文档编号:8337788
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:15
- 大小:35.24KB
如何制做网页.docx
《如何制做网页.docx》由会员分享,可在线阅读,更多相关《如何制做网页.docx(15页珍藏版)》请在冰豆网上搜索。
如何制做网页
网页制做入门
(1)
网页制做入门
我们天天与网页打交道,那些或界面精美,或内容丰富,或构思独特、风格各异的网页,不知道吸引了多少人的眼球了,它们的运行方式,制做方法,你说你说一点都不好奇,一点都不想知道,那肯定是假的,嘿嘿,我也一样,而且我的好奇心有时还不小~~~,可我的好奇心有是有了,因为网页制做没有真正当成吃饭的家伙,所以,,,当初的热度也只有三分钟,在这里,把以前的一些经验介绍给大家,强烈希望广大高手介入,来个你说,我说,大家说,集众人的智慧于此。
因为大多数地方,是跟据我自己的做法,我自己的理解说的,难免有说错的地方,也请大家指正了。
第一讲网页基本常识
我们平时常见的网页,基本可以分为两类,静态网页(htm,html等)和动态网页(asp、cgi、php等)。
静态网页交互性不强,只是单纯的传输信息给客户浏览器,而动态的一般有很强的交互性,很多都在一定程度上结合了数据库,能进行资料的搜索等功能,常用于论坛,留言本,网上订单等。
常用的网页脚本语言VBScript、JScript,也是一种编程语言。
下面这几点是在别的地方抄来的,就当看小说一样看下吧,只需大概知道下就行了。
一、什么是HTML?
网页的学名称作HTML文件,是一种可以在www网上传输,并被浏览器认识和翻译成页面显示出来的文件。
www是“worldwideweb"的缩写;HTML的意思则是"HypertextMarkupLanguage",中文翻译为“超文本标记语言”。
“超文本”就是指页面内可以包含图片,联接,甚至音乐,程序等非文字的元素。
网页就是由HTML语言编写出来的。
HTML语言只是一种排版语言,语法就类似于这样:
"页高8宽5,(1,2)处插入高1宽1的图片A..."
HTML语言发展很快,已经历经HTML1.0,HTML2.0和HTML3.0,html4.0多个版本,现在html5.0正在测试同时DHTML(动态),VHTML(虚拟),SHTML等也飞速发展。
我们现在一般只要掌握HTML4.0就可以了。
二、什么是动态HTML(DHTML)?
动态HTML是一组技术,是一种新的思想方法,它被设计用来创造和显示更多的交互性网页,包括动态样式,动态内容,2D布局,数据捆梆和多媒体效果等等。
动态HTML(DHTML)是一门令人兴奋的新技术,它完全克服了传统HTML的不足,极具发展前景。
DHTML使用一个文件对象模型(DOM)来扩充HTML语言,使得WEB页面的所有元素及其属性都可以实时存取,从而允许你使用脚本动态地修改页面元素,而这些都不需要WEB服务器的干预。
使用DHTML完全能够设计出复杂的,动态的,交互式的WEB页面,使我们的WEB页面将因此而变得更为生动和精彩。
DHTML目前正在发展中,尚没有形成一个标准。
Microsoft和Netscape两大公司对DHTML各有自己的看法,尽管两大公司都使用了很多相同的技术术语,并引用相同的已发表和提议的标准集合,但在具体实现中,两者不能统一。
Netscape是增加一些新的标记(主要是Layer,Ilayer等),而Microsoft是对现有的标记增加一些新的属性。
由此引起的问题是在InternetExplorer上正常运行的动态网页,在Netscape上可能会不正确运行;反之亦然。
W3C目前正在努力开发一种标准使它能与所有的平台和浏览器兼容。
三、什么是HTTP?
HypertextTransferProtocol,WWW服务程序所用的协议。
我们在用浏览器浏览网页时,使用的就是这个协议,所以在地址栏中都要输入HTTP:
//……。
四、什么是FTP?
FTP是FileTransferProtocol(文件传输协议)的缩写。
它是一种在UNIX类操作系统上使用的协议,现在已经被纳入TCP/IP协议中,被广泛的应用在Internet上。
它的传输方式一般分为ASCII和BIN(二进制)两种。
我们在说到Internet上的FTP时,通常是指一些使用FTP协议的站点和FTP的传输方式。
五、上传主页有哪几种方式?
E-Mail方式维护主页是什么意思?
通常我们上传主页的方式是由提供主页空间的ICP来决定了。
一般的上传方式有FTP、HTTP、和E-Mail三种。
FTP是文件传输协议的英文缩写,光看字面意思,我们就应该知道传输文件是它的拿手好戏。
好戏。
HTTP方式是利用浏览器与服务器链接,向服务器端发送文件。
E-Mail方式是指在维护主页的时候将要更新的内容用压缩软件压缩打包,用E-Mail发给主页空间所在网站的WebMaster。
再由WebMaster将主页内容解压打开,完成更新工作。
这三种上传的方式中,FTP以它的快速和良好的交互性,得到了大家的公认和推崇,现在已经是最流行的上传和下载方式了。
而E-Mail上传方式的优点是安全性极高,不易被黑客乘虚而入。
但是由于交互性和灵活性太差,已经很少使用了。
六、什么是CGI?
CGI意思为CommonGatewayInterface,公共网关接口,一种基于浏览器的输入、在Web服务器上运行的程序方法。
CGI脚本使你的浏览器与用户能交互,为了在数据库中寻找一个名词,提供你写入的评论,或者从一个表单中选择几个条目并且能得到一个明确的回答.如果你曾经遇到过在web上填表或进行搜索,你就是用的CGI脚本。
你那时也许没有意识到,因为大部分工作是在服务器上运行的,你看到的只是结果。
作为一个网页设计者,你创建客户端的CGI脚本,服务器端的程序用来处理用户输入,结果返回给用户。
七、什么是ASP?
MicrosoftActiveServerPages即我们所称的ASP,其实是一套微软开发的服务器端脚本环境,ASP内含于IIS3.0和4.0之中,通过ASP我们可以结合HTML网页、ASP指令和ActiveX元件建立动态、交互且高效的WEB服务器应用程序。
有了ASP你就不必担心客户的浏览器是否能运行你所编写的代码,因为所有的程序都将在服务器端执行,包括所有嵌在普通HTML中的脚本程序。
当程序执行完毕后,服务器仅将执行的结果返回给客户浏览器,这样也就减轻了客户端浏览器的负担,大大提高了交互的速度。
以下罗列了ActiveServerPages所独具的一些特点:
1.使用VBScript、JScript等简单易懂的脚本语言,结合HTML代码,即可快速地完成网站的应用程序。
2.无须compile编译,容易编写,可在服务器端直接执行。
3.使用普通的文本编辑器,如Windows的记事本,即可进行编辑设计。
4.与浏览器无关(BrowserIndependence),用户端只要使用可执行HTML码的浏览器,即可浏览ActiveServerPages所设计的网页内容。
ActiveServerPages所使用的脚本语言(VBScript、Jscript)均在WEB服务器端执行,用户端的浏览器不需要能够执行这些脚本语言。
5.ActiveServerPages能与任何ActiveXscripting语言相容。
除了可使用VBScript或JScript语言来设计外,还通过plug-in的方式,使用由第三方所提供的其他脚本语言,譬如REXX、Perl、Tcl等。
脚本引擎是处理脚本程序的COM(ComponentObjectModel)物件。
6.ActiveServerPages的源程序,不会被传到客户浏览器,因而可以避免所写的源程序被他人剽窃,也提高了程序的安全性。
7.可使用服务器端的脚本来产生客户端的脚本。
8.物件导向(Object-oriented)。
9.ActiveXServerComponents(ActiveX服务器元件)具有无限可扩充性。
可以使用VisualBasic、Java、VisualC++、COBOL等编程语言来编写你所需要的ActiveXServerComponent。
八、JavaScript是什么?
Java和JavaScript是一样的吗?
JavaScript是一种新的描述语言,此一语言可以被嵌入HTML的文件之中。
透过JavaScript可以做到回应使用者的需求事件(如form的输入)而不用任何的网络来回传输资料。
所以当一位使用者输入一项资料时,它不用经过传给服务器端(server)处理,再传回来的过程,而直接可以被客户端(client)的应用程序所处理,你也可以想像成有一个可执行程式在你的客端上执行一样。
javascript虽然效果不错,但它在网络上的效果奇慢。
在JavaScript上,JavaScript和Java很类似,但到底并不一样。
Java是一种比JavaScript更复杂许多的程序语言。
而JavaScript则是相当容易了解的语言,JavaScript创作者可以不那么注重程序技巧。
所以许多Java的特性在JavaScript中并不支持。
九、常用的WEB图像格式有哪些?
1、PNG(PortableNetworkGraphic)
PNG格式是WEB图像中最通用的格式。
它是一种无损压缩格式,但是如果没有插件支持,有的浏览器可能不支持这种格式。
PNG格式最多可以支持32位颜色,但是不支持动画图。
2、GIF(GraphicsInterchangeFormat)
GIF是Web上最常用的图像格式,它可以用来存储各种图像文件。
特别适用于存储线条、图标和电脑生成的图像、卡通和其它有大色块的图像。
GIF文件非常小,它形成的是一种压缩的8位图像文件,所以最多只支持256种不同的颜色。
Gif支持动态图、透明图和交织图。
3、BMP(WindowsBitmap)
BMP格式使用的是索引色彩,它的图像具有极其丰富的色彩,可以使用16M色彩渲染图像。
此格式一般用在多媒体演示和视频输出等情况下。
4、TIFF(TagInageFileFormat)
TIFF格式是对色彩通道图像来说最有用的格式,支持24个通道,能存储多于4个通道。
TIFF格式的结果要比其它格式更大、更复杂,它非常适合于印刷和输出。
5、JPEG(JointPhotographicExpertsGroup)
JPEG是Web上仅次于GIF的常用图像格式。
JPEG是一种压缩得非常紧凑的格式,专门用于不含大色块的图像。
JPEG的图像有一定的失真度,但是在正常的损失下肉眼分辨不出JPEG和GIF图像的差别。
,而JPEG文件只有GIF文件的1/4大小。
JPEG对图标之类的含大色块的图像不很有效,不支持透明图和动态图。
6、TGA(Targa)
TGA格式与TIFF格式相同,都可以用来处理高质量的色彩通道图形。
另外,PDD、PSD格式也是存储包括通道的RGB图像的最常见的文件格式。
十、域名
由于IP地址全是些的数字,为了便于用户记忆,Internet上引进了域名服务系统DNS(DomainNameSystem)。
当您键入某个域名的时候,这个信息首先到达提供此域名解析的服务器上,再将此域名解析为相应网站的IP地址。
完成这一任务的过程就称为域名解析。
以机构区分的最高域名原来有7个:
com(商业机构)、net(网络服务机构)、gov(政府机构)、mil(军事机构)、org(非盈利性组织)、edu(教育部门)、int(国际机构)。
1997年又新增7个最高级标准域名:
firm(企业和公司)、store(商业企业)、web(从事与WEB相关业务的实体)、arts(从事文化娱乐的实体)、REC(从事休闲娱乐业的实体)、info(从事信息服务业的实体)、nom(从事个人活动的个体、发布个人信息)。
这些域名的注册服务由多家机构承担,CNNIC也有幸成为注册机构之一;按照ISO-3166标准制定的国家域名,一般由各国的NIC(NetworkInformationCenter,网络信息中心)负责运行。
以地域区分的最高域名有:
AQ(南极洲)、AR(阿根廷)、AT(奥地利)、AU(澳大利亚)、BE(比利时)、BR(巴西)、CA(加拿大)、CH(瑞士)、CN(中国)、DE(德国)、DK(丹麦)、ES(西班牙)、FI(芬兰)、FR(法国)、GR(希腊)、IE(、爱尔兰)、IL(以色列)、IN(印度)、IS(冰岛)、IT(意大利)、JP(日本)、KR(韩国)、MY(马来西亚)、NL(荷兰)、NO(挪威)、NZ(新西兰)、PT(葡萄牙)、RU(俄罗斯)、SE(瑞典)、SG(新加坡)、TH(泰国)、TW(中国台湾)、UK或GB(英国)、US(美国)(一般可省略)等。
从域名的结构上来看,域名可分为一级域名、二级域名、三级域名等。
以电脑报网站为例是个一级域名,在一级域名的下一级就是一个二级域名,如果要在下面设立则是三级域名了。
我们见到的免费域名通常是二级域名。
网页制做入门
(2)
作者:
第二讲初识代码
我的网页之路是从洪恩网站里的DW教程开始的,从零到现在这个半调子水平。
那里的很多教程都是从最基础的开始,很合适广大初学者,所以建议大家也从那里开始了。
洪恩网站的学习网址:
在这里,基本上不讲软件的具体使用,只讲总结性的东西,要注意的技巧吧,在最后,也会写一两个用DW做的简单特效实例。
随便打开一个网页,点击查看,再点源代码,一般都可以看到这个网页的代码,做网页说白了,也就是把文字、图象等多媒体效果有机的结合在一起,DW和FP等只是书写代码的利器,只要你知道代码,用记事本也一样能做出精美的网页(真正的高手据说就是用记事本做网页),但对我们初学者来说,没有必要去记代码,只需知道利用DW或FP,能实现哪些操作,就象用WORD一样,画一条线就有一条线,画一个表格就有一个表格,在软件的演示窗口里,有着同WORD一样所见即所得的最后效果察看。
因此,可以说,做网页入门很简单!
可后面还有半句话:
做好网页不简单!
因为,一个好的网页,不单单是代码书写,更重要的是美工设计,内容的充实。
虽然很多代码不需要一一手工书写,可有些代码的基本组织结构了解一些,还是对做网页大有帮助的。
我们可以这样学习、研究代码:
在用DW或FP中做了某一个操作,把效果与上面的代码窗口比较一下,就可以知道什么代码是实现什么效果的,还可以通过查看别人的网页的源代码分析学习。
想学ASP网页的朋友们,有些基本代码是非记不可的。
现在很多做网页的人,都是用借鸡生蛋的办法做的网页,做法是从网上下载现成的网页模板,对模板稍加更改,替换下内容成了。
当然,这也是新手们做网页速成的一种好办法。
模板在很多有提供空间的网站都有下载。
很多以前收录的网址,现在打开都没有用了,在这里,能提供给大家的,只有这些了。
1.源代码下载:
要下载ASP源代码的可以到“中国站长站”去,网址:
forSQLServer版本(excelhome的论坛就是用这个版本)。
2.网页图片及音乐等素材:
3.网页特效代码:
推建一个小工具:
“水晶情缘网页特效专家”,有1M,本来想发上来,太大了,算了,要的话,留下邮箱,我发过去。
如,下雪的效果,鼠标滑动效果等,这里都有。
下面我把一些常用的写下来,以供大家参考:
DREAMWEAVER常用标记:
(都是以前记的一些笔记了)
标记一般成对出现,一个表示特定代码部分的开始,另一个表示特定代码部分的结束(表示结束的前面带"/"符号),但也不是绝对的,比如,
标记。
基本的HTML标记:
html、head和body必不可少。
1.
和标记中仅包含网页标题(如
2.
标记中包含网页的全部内容。是网页的主体部分。
3.
是中间内容居中标记;
4.
和
:从h1~h6,将文本标注为标题,通常要比正文粗大,h1最大;
5.
和
:段落标记,在行与行之间添加额外的空白行;
6.
:
强行换行标记,插入单行,不需要封闭标记
7.图象标记:
align水平对齐(left、right或center),valign垂直对齐(top,bottom或middle),border边框宽度
alt="鼠标放在图片上时出现的提示文字"
8.
9.
10.
11.
该处文字有下划线标示
12.
显示一长灰色细线,分割网页为上下两部分。
可以只用单边。
完整的如下:
13.
使用
14.
控制项目序号及显示方式,如1,2,3
15.
- 使该段文字首行和下面都缩进约两个字符
16.
使该段文字整体都缩进约两个字符,可以多重使用
17.这是上标字,这是下标字,这是加下划线字
18.这是Windows的等宽字
19.
字体放大一级
20.
:
- 语言
- 基础要素
“语言”显示为列表标题,“基础要素”显示为列表内容,自动缩进。
21.
这是右对齐的段落一 这是右对齐的段落二
表格及其标志:
Align:
水平,Valign:
垂直。
Align或Valign写在
22:
标记中的文字实现闪烁效果,但并不适用于所有的浏览器。
23.第一列第一栏 第一列第二栏
第二列的第一栏 第二列的第二栏
左对齐
垂直:
居中
BgColor可写在
中,分别为整个表格、整行、单一单元格的背景颜色设置。
以上是我以前笔记中收录的一些常用的标记,今天看到lfspecter大虾也发了一些关于网页的帖子,可以两边对照着看,侧重点各有不同,也许更有利于初学者的理解,链接如下:
技巧篇: 1.在 标签中可以规定整个文档的一些基本属性:"bgcolor": 指定html文档的背景色。 "text": 指定html文档中文字的颜色。 "link": 指定html文档中待连接超链接对象的颜色。 "alink": 指定html文档中连接中超链接对象颜色。 "vlink": 指定html文档中以连接超链接对象颜色。 "background": 指定html文档的背景文件。 有两种方式表示颜色对象: 文档主体部分可用颜色列表: black黑色Red红色Line石灰色Maroon栗色Gray灰色Silver银白色Navy海军蓝Olive橄榄绿Purple紫色Yellow黄色Aqua浅绿色Blue蓝色Green绿色Fuchsia紫红色White白色Teal暗蓝绿
2.浏览器的状态列提示文字控制 (1).鼠标经过: (2).改变状态栏提示文字: 打开"Behaviors"行为编辑窗,单击"+"按钮,选择"SetTextSet"下的"TextOfStatusBar"选项,然后在方框中输入自己的文字,例如"欢迎来到我的主页"等,单击"确定"即可。
3.链接控制: a.返回前页: 使用OnClick="history.go(-1)" 返回主页: 使用OnClick=\'top.location.href="../index.html"\' b.链接提示: 在链接语句中增加,如: 去哪儿? (在点击链接前注意看状态行显示的变化) OnMouseOver="window.status=\'这里是...\';returntrue"OnMouseOut="window.status=\'\';returntrue" c.链接的不同方式: 在帧里显示: 在链接处加target="main"语句,其中main为帧名 整页显示: 在链接处加target="_top"语句 开新窗口: 在链接处加target="resourcewindow"语句,如 d.强制主页每次都不进行缓存,而从服务器上重读 在Head部分加 e.自动刷新 定时刷新: //自己的URL"> 幻灯 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1 |