html css javascript网页制作教程

html css javascript网页制作教程!下面,小编以编写一个简单的html+css+javascript网页,来给大家介绍一下html css javascript网页制作的方法。

操作方法

  • 01

    新建html静态网页 编写网页,可以使用专业的网页编写工具,也可以使用任一文字编辑器。我们这里只编写一个简单的静态网页,所以就选择使用“记事本”做为编辑工具,来进行网页编辑。

  • 02

    在写事本中,输入如下图所示的代码,生成一个包括两段文字、一个按钮,标题为“简单网页制作教程”的网页。

  • 03

    在记事本中,选择“文本”——“保存”,在打开的保存对话框中,选择要保存的目录后,填写文件名为*.html,*可以是任意字符,这里为test;保存类型必须为“所有文件”;编码必须为“UTF-8”,否则可能会出现乱码。点击“保存”按钮保存文件。

  • 04

    双击刚生成的test.html文件,会自动调用浏览器打开文件。网页文件在浏览器中效果如下。

  • 05

    编写css样式美化网页 在<head></head>标签中,加入<style></style>标签,并在其中定义一个样式mydiv,分别就字体名和边线的线型、样式、大小、颜色等进行了定义,然后将该新式通过class属性应用到网页中唯一一个div标签上。

  • 06

    保存修改后,在浏览器打开,网页效果有了变化,如下图所示,看起来更美化一些了。

  • 07

    样式除了在<style></style>标准中定义外,还可以直接在元素标签中定义(还有一种方式链接外部文件,这里不做介绍)。例如,我们为<span>标签定义一个样式,可以通过设置style属性值来实现。

  • 08

    保存修改后,在浏览器中查看效果,网页的排版又美观了些。由于篇幅原因,用css美化网页内容就只讲这些了,大家可以自己对该网页进一步美化。

  • 09

    编写js代码让静态网页“动”起来 静态网页,顾名思义,就是静止不变的,原来是什么样,以后还是什么样。所以为了满足人们让静态网页“动”起来的要求,就出现了js脚本代码,它可以在一定程度上帮助人们让静态网页实现一些它们原来不能实现的功能。引用js代码,主要通过<script></script>标签来引用,除了一些需要在网页初始化就运行的脚本外,我们一般将<script></script>标签放在</body>标签后。

  • 10

    如果我们要在网中实现:点击网页中的按钮,弹出一个“我是按钮”的提示信息框的功能。那么我们可以为<button>标签增加一个onclick响应事件,并在<script>中定义一个与按钮功能相对应的函数。

  • 11

    如果我们要更改<span>标签中的内容,则我们只需将showMsg()函数的代码修改成如下图所示:

  • 12

    保存修改后,在浏览器中打开,点击按钮后,可以看到网页中的文字“来到美丽的...”变成了“我是新的内容!”

(0)

相关推荐

  • 电商网页制作教程

    互联网的时代,越来越多的人群在做电商,电商简单的理解就是在网上卖东西的.不管是在网上卖,还是实体店卖,总得要装修一下吧!只要你是会PS的,自己来装修,还可以省下不少钱. 可以根据自己想要的店铺风格.颜 ...

  • 网页制作教程-文本字体大小设置

    今天介绍网页中如何控制文字的显示大小. 操作方法 01 使用文本编辑器创建一个html文件,并进行编辑,输入html基本要素.若此步有问题,请阅读小编的"网页制作教程-Hello, worl ...

  • html网页制作教程

    html是编程语言之一.下面,我们来看看html网页制作教程吧. 操作方法 01 新建记事本 在桌面上,新建一张记事本,如下图所示: 02 编写代码 打开记事本,编写代码,如下图所示: 03 修改后缀 ...

  • 静态网页制作教程

    静态网页可以算是网页制作的起步,小编也是从静态网页起步的,静态网页制作不难,只需了解html和css就可以编写出静态网页了 操作方法 01 首页设计好要写一个怎样的静态网页画面,然后到网上收集图片素材 ...

  • 网页制作教程-Hello, world!

    今天我们开始学习网页制作,从第一个最简单的网页开始,目标: 在浏览器标题栏显示:第一个网页 在浏览器中显示:Hello, world! 操作方法 01 首先,我们新建一个文本文件,命名为1.html. ...

  • 简单网页制作教程

    下面介绍一下用publisher制作简单网页的过程供各位参考. 操作方法 01 打开publisher,建立一个新的网页格式的文件. 02 在提供的选项中选择网站类别. 03 继续找下去,就还要选一下 ...

  • Dreamweaver CS5网页制作教程

    在网页设计中,通常需要使用Dreamweaver 软件完成编辑,其中Dreamweaver CS 5为广泛使用版本,但Dreamweaver 软件不像MIcrosoft Office 一样全靠可视化完 ...

  • 网页制作教程-文本对齐方式:[1]

    今天介绍网页中文本对齐方式的设置. 操作方法 01 创建一个html文件,并使用文本编辑器打开,输入html基本元素: 02 文本对齐全方式可通过设置<p>元素的align属性完成,基本格 ...

  • Dreamweaver网页制作初级教程:超链接

    现如今,网页制作以及建站成了人人需要掌握的技能,小编也从各方面得到需求说,以前有过PS的入门教程,现在能不能做一个DW的入门教程.那么从今天开始,小编将用一些时间,为大家带来DW的入门教程.只要能坚持 ...