如何用HTML5制作网页

如何用HTML5制作网页,第1张

现在以HBuilder工具编写为例:

1. 打开此工具,在项目管理器中右键单击创建一个web 项目

2.右键单击项目名称,新建一个HTML文件----form01.html

<!DOCTYPE html>

<!--

    作者:offline

    时间:2017-01-06

    描述:form表单

    

    在form标签中,有两个经常使用的属性

    action:表单提交服务器地址

    method: 表单提交的方法/方式----get/post

                    其他提交方式---put delete

            提交方式----get(默认的提交方式)

            1.请求的参数放到地址栏中

            2.不安全

            3.存在缓存

            4.传输数据的大小收到限制

            提交方式----post

            1.请求的参数放到http协议中

            2.相对安全---账号密码等信息不会放到地址栏中

            3.没有缓存

            4.传输数据的大小限制较小

                 修改成post之后,可能会出现错误信息。

    input标签:定义输入字段,用户可在其中输入数据。

           属性:

           type 指示 input标签的类型,默认的是text

                            按钮类型: 普通按钮 button 重置按钮 Reset  提交按钮 submit

           value 定义要显示的文本。

-->

<html>

    <head>

        <meta charset="utf-8">

        <title>form表单1</title>

    </head>

    <body>

         <form action="" method="post">

             <input type="text" name="username" value="zhangsan" />

             <input type="submit" value="提交" />

         </form>

    </body>

</html>

3.查看此网页是不是HTML5,主要看表头

4.HTML5新增了很多新内容,具体可以查看API,例如:在网页中嵌套音频/视频文件的格式

http://jingyan.baidu.com/article/3f16e003ee63622590c1035b.html

点击制作栏目,进入模板选择页

1、选择空模板,自由创作;

2、选择主题模板,更快速的创作出炫丽的展示。

2

选择模板后,进入创作界面

3

预览树 *** 作

1、显示的页面的显示顺序;

2、右键调整页面的显示顺序;

3、点击页面右上角的X,可以把不需要的页面删除。

功能—添加修改文字

1、添加文字:点击右侧的文字选项→主编辑区会出现文字输入框→双击修改

2、文字属性修改:右侧文字属性修改选项,包括字体种类,字体大小、颜色等等。

功能—添加修改图片

1、上传图片:点击右侧图片选项→上传按钮→选择图片→确定

2、截图:点击截图按钮→选择图片区域→双击

功能—添加修改按钮

添加按键:点击右侧按钮选项→点击编辑区的按钮→修改文字、链接

功能—添加修改表单

1、添加表单:点击右侧的添加表单按钮,在d出的窗口中填写提交数据的名称

2、修改表单样式:在右侧的属性栏中,修改表单的显示样式

3、查看及下载数据:客户提交数据后,可以在表单数据中看到,并提供下载

功能—添加修改底图

1、修改背景颜色:点击右侧底图选项→选择颜色

2、上传底图:点击右侧底图选项→点击上传按钮→确定

功能—添加修改背景音乐

添加背景音乐:点击右侧音乐选项→点击选择文件按钮→确定→点击上传按钮

功能—添加修改切换效果

添加切换效果:选择页面→点击配置选项→选择切换效果

功能—添加修改动画效果

添加动画效果:点击添加动画的组件→点击动画选项→点击动画效果

保存

点击导航栏的保存按钮→再点击预览按钮→进入发布页面

生成

1、添加标题、描述、缩略图

2、生成的二维码和链接可以用于分享到微信、微博等

3、点击生成按钮,即完成了一个作品的制作过程。

HTML5 制作响应式网页,首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例,讲述如何制作响应式网页。

1、选定基本设计尺寸,一般以1080为基准。确定响应式web设计的应用场景之后,和美工(或设计师)沟通,之前,一般需要美工出几套主流移动设备屏幕分辨率的设计图,现在,使用流式布局以及rem等可以使用一套设计图,以最常用的移动设备屏幕分辨率为基准。

2、当美工完成设计图之后,前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来,Fireworks cs6切图更快,但是Fireworks有时会有图片失真的情况发生,所以,有时需要使用PS进行配合,PS有切片工具可以专门用来切图。

具体代码:

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth

if (!clientWidth) return

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7586829.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表(0条)

保存