亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > Web技术——基础网页编程

    Web技术——基础网页编程

    时间：2023-10-02 04:18:01 | 来源：网站运营

    时间：2023-10-02 04:18:01 来源：网站运营

    Web技术——基础网页编程：因为各种事情停了两星期左右，真的是时运不济，命途多舛。最近的经历就像过山车，忽高忽低。好不容易今天又可以抽点空出来继续写写，这个系列想跟大家聊聊web编程（我也不是专业的哈）。课程中学到的一些东西的总结，抛砖引玉，大家只要觉得有一点点用处我就很开心了(*^▽^*)

    一、简单的前端设计工具使用

    示例：用DreamWeaver MX编制如下所示的个人简历表格。

    步骤：具体差异来自于不同的DW版本

    1. 打开DreamWeaver
    2. 选择[插入]---->[表格]，生成6行8列的表格。
    3. 调整表格各栏的高度和宽度，合并部分单元格(在选择要合并的单元格--> [鼠标点击右键]--->[表格选项]--->[合并单元格]
    4. 在单元格中设置字体/字号/字形/颜色/大小等，需要之处添加链接和列表标记点([鼠标点击右键]--->[对齐]--->[居中对齐] [鼠标点击右键]--->[字体/样式]--->[添加类]--->[完成对类的定义]---->[选择恰当的字体类即可])
    5. 插入照片或其他图片，调整图片大小，固定约束比及高宽。
    6. 编制好上述表格后，另存为ex2-1.html。
    7. 在表格下方带图片热区。
    8. 选做：在表格下方插入一个动画。
    9. 双击ex2-1.html文件，在浏览器中观察其显示效果。
    制作好的表格如下所示，还需要进行一些局部调整。首先先看在浏览器中效果：

    保存代码后在浏览器中打开如下所示：

    接下来对代码进行一些处理，显示单边框无间距。在生成的代码style定义的头文件部分加上如下所示代码：

    完美解决了这个问题，终极效果如下所示（代码详见ex2-1.html）：




    二、使用JavaScript脚本语言设计程序

    示例

    步骤：

    1. 在script标记里编写function完成判断操作（注：静态html只有显示功能，无法与用户交互，交互方式需要自己定义）
    <script type="text/javascript">function validate_input(x)//这里input是输出变量{ with (x) { if (x>=1&&x<=100) alert("你输入对了，谢谢！"); else alert("请输入一个从1到100之间的数字"); //alert是警告框，输出警告文字 }}</script>2.在body里定义form表单，获取输入，可以多了解一下form标记，input标记等，W3CSchool尚明有很多示例。

    <body> <p align="left"><font size="6"><B>简单验证</B></font></p> <hr> <form method="post" name="form1" action=""><!--定义表单，输入框类型为文本，变量名为n,初值为0--> <p align="left">请输入一个1到100之间的数字:<input type = "text" name = "n" size = "12" value="0" /></p> <p align="left"><input type = "button" value="提交" onclick = "validate_input(document.form1.n.value)" /></p> </form></body>脚本文件运行效果图如下所示，代码详见ex3-2.html

    输入数字正确时，点击提交按钮出现的情况：

    输入错误时，点击提交出现的情况：

    三、Table标签的使用

    【创建如下图所示的货品价格表】






    【具体步骤如下所示】

    1. 建立一个html5的文件，并使用<title>欢迎查看货品表</title>标签生成当前网页的标题。
    2. 使用<table border="1"></table>标签生成一个带边框的表格,接下来在表格里填充需要的信息,其中超链接用<a href="#">标签生成。
    3. 使用 <tr>......</tr>生成每行信息，其中<th>名称</th>定义表头，<td>内容</td>是每列的信息，在<tr>标签内部相当于定位当前单元格。完成后可看到初步效果图如下所示，发现有两个单元格不在了。
    4. 注意表格里边没有内容的部分也需要设置占位符，否则会出现上图所示的表格残缺的情况(例：复读机备注一栏的<td></td>标签不能省)。
    5. 占位符加上后，表格初步完成，接下来设置边框颜色。有两种方式如下：
    6. 标题的设置以及表格的整体居中。在刚才定义的table style中设置caption标签属性。包括：
    7. 最终显示效果如下所示：
    8. 注意表格里边没有内容的部分也需要设置占位符，否则会出现上图所示的表格残缺的情况(例：复读机备注一栏的<td></td>标签不能省)。

    9. 占位符加上后，表格初步完成，接下来设置边框颜色。有两种方式如下：

    a.通过在每个标签里边设置border。

    b.定义关于table的CSS类。

    10. 第一种办法需要在<table>以及每个行列标签<tr><td>中设置颜色，造成代码冗余，因此采用定义CSS 的style中table类的border-coror为蓝色来实现。

    table{ border-color: #2228ff; margin:0 auto;}table td{ border-color: #2228ff;} table th{ border-color: #2228ff;}11. 标题的设置以及表格的整体居中。在刚才定义的table style中设置caption标签属性。包括：

    table caption{ font-family: 楷体; font-size: larger; color: #FF0000;}12. 在table中添加使整个表格居中的属性margin:0 auto;

    13. 最终效果图如下所示：



    四、Form标签的使用

    【创建如下图所示的用户留言表单】



    【具体步骤如下所示】

    1. 建立一个html5的文件，并在<head></head>标签中使用 <title>用户留言输入表单</title>标签生成当前网页的标题。
    2. 使用<form></form>标签生成信息输入表单。为了对齐美观，将输入信息布局在<table></table>其中，电话和电子邮件输入类型利用html5提供的tel和email类型，在submit时即可自行验证。
    <tr> <td><p>电&nbsp&nbsp&nbsp&nbsp话:</p></td> <td><input type="tel" name="phone_number"></td></tr><tr> <td><p>电子邮件:</p></td> <td><input type="email" name="e_mail"></td></tr>3. 在性别一栏的<td>标签中使用<select></select>标签生成下拉菜单。

    <select name="sex"> <option value="male">男</option> <option value="female">女</option></select>4. 使用<button></button>标签生成按钮,其中，提交按钮的类型为”submit”，而重写类型的按钮为”reset”。

    <textarea name="leave_message" rows="15" cols="50"></textarea> <br><br> <button type="submit" onclick="return validate_leave_message() ">提交</button> <button type="reset" onclick="validate_reset()">重写</button></form>5. 留言验证采用js的方式，此外，重新输入功能也选择在<head></head>标签中输入js脚本，代码如下所示：

    <script type="text/javascript"> function validate_leave_message() { //验证留言的有效性 var t = document.getElementById("leave_message").value; if(t==""){ alert("留言为空！请输入留言"); return false; } else if(t.search("坏蛋")>=0){ alert("留言中含有敏感词，输入无效！"); return false; } else { alert("留言输入有效"); return true; } } function validate_reset() { //验证重写按钮的有效性 var t = document.getElementsByName("input").value; if(t==null){ alert("信息为空！无需清空！") } else { t.remove(); alert("信息已清空！"); } }</script>6. 运行ex4-2.html后，界面效果图如下所示：

    7. 图中点击提交按钮时会对通过validate_leave_message()留言进行验证，而e_mail和phone_number的验证则通过html5的tel和e_mail类型进行验证，示例效果如下所示：

    8. 空留言时点击提交会出现警示框：

    9.输入如下信息，提示留言验证成功，点击确定后验证其它信息：

    10.输入上述信息后，提示电子邮件输入错误，如下所示：

    11. 输入正确电子邮件后，点击提交，网页通过验证。再次输入信息，点击重写按钮，输入框中所有内容被清空。

    其他验证功能详见代码。

    五、干货总结

    1. 合适的开发工具能有效的提高网页开发的速度。对于Web技术初学者来说，如何在网页制作初期避开复杂的代码进行直观简便的设计显得尤为重要。通过DreamWeaver工具的使用，在设计网页时就生成了大部分的代码，后续只需要对代码进行微调即可，再加上代码效果可视化，大大提高了初学者对于网页开发的兴趣。JavaScript是一种动态类型/弱类型的脚本语言，主要用来向html页面添加交互功能，此外，html是一种解释性脚本语言(代码不用进行预编译)。
    2. 静态网页只有单纯的html结构，无法产生数据交互。通过使用JavaScript使得网页能在客户端对用户的部分操作做出响应并返回操作结果，实现了用户和网页之间的数据交互。此外，将一部分处理用户操作的功能放在客户端，能有效降低服务器的繁忙程度；对B/S架构的网页来说是提高速度的有效途径。
    3. 通过利用JS，可以对输入的数据进行验证，弹出提示框等，有助于提示用户做出正确的操作。此外，要开发出美观实用的网页并不能单靠html，一些简洁美观CSS样式和客户友好型的JS响应也是一个好的网页必要的组成部分。
    484很简单？~下一篇我们进阶一下，探讨一下简单的客户端和服务端编程。You can obtain all my code on my github:



    关键词：技术,基础

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭