怎样进行网页制作？网页制作用什么好？js和 jQuery怎么用？

显示全部楼层 · 发表于 2012-10-24 14:57:21

本帖最后由 jiangwanghao 于 2012-10-27 09:35 编辑

如题所说，我们学校里要进行一个简单的网页制作比赛，以前都是学习编程对网页制作不感兴趣。。怎样进行网页制作？网页制作用什么好？js和 jQuery怎么用？
我看到网上有很多什么特效的东西那个怎么用？如果自己编写应该怎么样编写呢？
最后一个问题：http://ibic.me/jrumble-let-your-blog-moving这个网址所示的这个东西应该怎么使用？编辑页面用什么编辑呢？

问题很多呢，希望大家多多帮忙啊
问题已经解决。感谢大家的帮助
制作软件用Dreamweaver 好用
JS是前台语言实现特效于功能的 JQ是JS函数的打包版 JS需要一大段代码才能实现的功能 JQ基本几句就搞定了
如果为了比赛直接看JQ就够了如果为了基础功底扎实回头可以学下JS 不过那时候你会觉得JS好麻烦-_,-还是JQ最方便

用的时候建议直接外链过来  然后再<head></head>里写

网上开源的代码  直接复制到head里就OK了  记得标签修改成一样的

顺便推荐个网站

http://www.w3school.com.cn/  从这里开始学习基本功把

显示全部楼层 · 发表于 2012-10-24 16:15:24

提示: 该帖被管理员或版主屏蔽

显示全部楼层 · 发表于 2012-10-25 09:44:46

网页制作的话，可以试试 Dreamweaver 和 PS，用着还不错

=================================================================
附带一些js和 jQuery的知识给你：

1.js修改元素样式： .style.color="red"

2.Jquery构造器:
构造器是Jquery的内核，类似js中的function，Jquery中的一切操作都构建于这个函数之上。jquery函数可以接受4种类型的参数
Jquery(expression,[context]);利用context参数指定匹配的范围
Jquery(html)；根据html标记字符串，动态创建由Jquery对象包装的Dom元素
Jquery(elements);将一个或多个Dom对象转换为Jquery对象
Jquery(callback)；$(document).ready()的简写。绑定一个在Dom文档加载完毕之后执行的函数

3.Jquery基本用法

get（）获取对象内指定索引的元素，可以将Jquery对象DOM集合
eg：$(span).get(0);

this    表示每个当前元素
eg: $(this).css("font.size",12px);

size()与length 返回Jquery对象中元素的个数
eg：$(span).size  /  $(span).length

each(callback) 对Jquery对象内的集合元素进行遍历，并循环执行指定的函数

eg:
            <div><span>文本块1</span></div>
            <p><span>文本块2</span></p>
            <script language="javascript" type="text/javascript">
                        var span = $("span");  //获取文档中的span元素
                        span.each(function(n){  //遍历span元素集合
                        this.style.fontSize = (n+1)*12+"px";  //为每个 span 元素定义字体大小样式
                  });
            </script>

  4.Dom对象的属性

  attr(name)：根据属性名（name 参数）获取 jQuery 对象中第一个元素的对应属性值

  eg：将返回超链接的href属性值

  <a href="images/1.html" accesskey="k" id="img" target="_blank">超链接</a>
  var href = $("a").attr("href");

attr(key,fn)：我们还可以为传递的属性值设置为一个函数，通过函数计算所得的值来为
属性赋值。

eg：

<img src="images/1.jpg" />
<script language="javascript" type="text/javascript">
      $("img").attr("title",function(){
         return this.src;
         });
</script>

attr(key,value)：为jQuery对象定义属性并赋值。

attr(properties)：为 jQuery 对象同时定义多个属性。

removeAttr(name)：该方法能够移出 jQuery 对象内指定属性。

eg：

<img src="images/1.jpg" width="100" height="200" />
<script language="javascript" type="text/javascript">
      $("img").removeAttr("width");
</script>

5.DOM 样式类

   addClass(class)方法，为元素增加样式类
eg： $("p").addClass("red");

   toggleClass(class)方法，它如同一个开关，如果元素已经定义了指定样式类，则会删除该样式类，否则增加该  样式类。

   eg：

   <style type="text/css">
      .bg { background:#FF99FF; }
      .bg1 { background:#00CCFF; }
   </style>
   <ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   </ul>
      <script language="javascript" type="text/javascript">
      $("li").each(function(){  //遍历jQuery对象内所有对象
      this.onmouseover = function(){  //为当前元素注册鼠标经过时的事件
         $(this).toggleClass("bg");  //开关背景样式类（bg）
      }
      this.onmouseout = function(){  //为当前元素注册鼠标移开时的事件
         $(this).toggleClass("bg");  //开关背景样式类（bg）
      }
      this.onclick = function(){  //为当前元素注册鼠标单击时的事件
         $(this).toggleClass("bg1");  //开关背景样式类（bg1）
      }
      });
      </script>

6.Dom元素包含信息

      text()方法获取元素包含的信息，也可以为text()传递文本字符串
      eg：
      alert($("p").text());
      $("p").text("<img src='images/1.jpg' width='100' />");

      html()和 html(val)方法只作用于 jQuery 对象中第一个元素

      如果希望获取段落中包含的所有内容（包括标签结构），则可以使用html()方法。例如，针
      对上面示例如果使用下面代码，则将弹出“段落文本<span>1</span>”提示文本信息，而不是“段
      落文本1“。
      eg：
      alert($("p").html());
      同理，如果希望在段落中插入图像，而不是“<img src='images/1.jpg' width='100' />”字符串，
      则可以使用如下方法，这样所插入的字符串就不被编码，而是直接插入到文档结构中。

      <p>段落文本<span>1</span></p>
      <script language="javascript" type="text/javascript">
      $("p").html("<img src='images/1.jpg' width='100' />");
      </script>

      val() 该方法专门用来读写表单值
      eg：
      alert($("select").val());
      alert($($("input")[1]).val());

      如果在val()附带参数，则可以为每一个匹配的元素设置值
      eg:
      $("input").val("文本框的值");
      也可以为单选按钮、复选框和列表框设置选定值
      eg:
      $("input").val(["radio2","check2"]);
      $("select").val(["1","3"]);

   7.Jquery伪选择器

      jQuery伪选择器                      说明
      :first                                        匹配找到的第一个元素
      :last                                        匹配找到的最后一个元素
      :not(selector)                            去除所有与给定选择器匹配的元素
      :even                                        匹配所有索引值为偶数的元素，从 0 开始计数
      :odd                                        匹配所有索引值为奇数的元素，从 0 开始计数
      :eq(index)                               匹配一个给定索引值的元素
      :gt(index)                               匹配所有大于给定索引值的元素
      :lt(index)                                  匹配所有小于给定索引值的元素
      :header                                  匹配如 h1、h2、h3 之类的标题元素
      :animated                               匹配所有没有在执行动画效果中的元素
      :firstchild                               匹配第一个子元素
      :lastchild                                  匹配最后一个子元素
      :onlychild                               如果某个元素是父元素中唯一的子元素，那将会被匹配
      :nthchild(index/even/odd/equation)    匹配父元素下的第 N 个子或奇偶元素
      :contains(text)                         匹配包含给定文本的元素
      :empty                                     匹配所有不包含子元素或者文本的空元素
      :has(selector)                            匹配含有选择器所匹配的元素的元素
      :parent                                     匹配含有子元素或者文本的元素
      :hidden                                     匹配所有不可见元素，input 元素的 type 属性为“hidden”时也可匹配
      :visible                                     匹配所有的可见元素


8.Jquery表单选择器

      jQuery表单选择器                      说明
      :input                                        匹配所有 input、textarea、select 和 button表单元素
      :text                                        匹配所有的单行文本框
      :password                               匹配所有密码框
      :radio                                        匹配所有单选按钮
      :checkbox                               匹配所有复选框
      :submit                                     匹配所有提交按钮
      :image                                     匹配所有图像域
      :reset                                        匹配所有重置按钮
      :button                                     匹配所有按钮
      :file                                           匹配所有文件域
      :hidden                                     匹配所有不可见元素，或者 type 为 hidden的元素
      :enabled                                     匹配所有可用元素
      :disabled                                  匹配所有不可用元素
      :checked                                  匹配所有选中的复选框元素
      :selected                                  匹配所有选中的选项元素

9.Jquery筛选函数
   选择器是构建 jQuery 对象的基础，而筛选函数则是 jQuery 对象的成员，用法截然不同。
   eg：
         <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
         </ul>
         可以使用伪选择器来进行选择：
            $("li:eq(2)").css("color","red");
         而如果使用筛选函数，则可以使用如下方法来实现：
            $("li").eq(1).css("color","red");

   eq(index):获取指定索引值位置上的元素，索引值从 0 开始算起
   hasClass(class) :检查当前的元素是否含有某个特定的类，如果有，则返回 true
   filter(expr):筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围，用逗号分隔多个表达式
   filter(fn):筛选出与指定函数返回值匹配的元素集合
   is(expr):用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回 true
   map(callback):将一组元素转换成其他数组（不论是否是元素数组）
   not(expr):删除与指定表达式匹配的元素
   slice(start,[end]):选取一个匹配的子集，与原来的 slice 方法类似
   add(expr):把与表达式匹配的元素添加到 jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集
   children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
   contents():查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个 iframe，则查找文档内容

显示全部楼层 · 发表于 2012-10-25 10:10:17

本帖最后由 Regeneration 于 2012-10-25 10:17 编辑

专业对口啊-_,-我就学这个的

制作软件用Dreamweaver 好用
JS是前台语言实现特效于功能的 JQ是JS函数的打包版 JS需要一大段代码才能实现的功能 JQ基本几句就搞定了
如果为了比赛直接看JQ就够了如果为了基础功底扎实回头可以学下JS 不过那时候你会觉得JS好麻烦-_,-还是JQ最方便

用的时候建议直接外链过来  然后再<head></head>里写

网上开源的代码  直接复制到head里就OK了  记得标签修改成一样的

顺便推荐个网站

http://www.w3school.com.cn/  从这里开始学习基本功把

显示全部楼层 · 发表于 2012-10-25 10:11:13

网页制作三剑客！！！绝对简单易学，所见即所得

显示全部楼层 · 发表于 2012-10-26 16:14:56

溱湖居士发表于 2012-10-25 09:44
网页制作的话，可以试试 Dreamweaver 和 PS，用着还不错
====================================== ...

感谢你的解答哦

显示全部楼层 · 发表于 2012-10-26 16:16:16

Regeneration 发表于 2012-10-25 10:10
专业对口啊-_,-我就学这个的

制作软件用Dreamweaver 好用

感谢你的解答哦谢谢你的网站呢

reds11 头像被屏蔽	发表于 2012-10-24 16:15:24 \| 显示全部楼层提示: 该帖被管理员或版主屏蔽
reds11 头像被屏蔽
	回复举报

[已解决] 怎样进行网页制作？网页制作用什么好？js和 jQuery怎么用？

评分

评分

评分

评分

浏览过的版块