灯火互联
管理员
管理员
  • 注册日期2011-07-27
  • 发帖数41778
  • QQ
  • 火币41290枚
  • 粉丝1086
  • 关注100
  • 终身成就奖
  • 最爱沙发
  • 忠实会员
  • 灌水天才奖
  • 贴图大师奖
  • 原创先锋奖
  • 特殊贡献奖
  • 宣传大使奖
  • 优秀斑竹奖
  • 社区明星
阅读:12643回复:5

初学者怎样学习网页制作

楼主#
更多 发布于:2012-12-07 17:31

简介

本内容只针对完全没有接触过网页制作的想学习网页制作的新手朋友。所以就以最简单的文字加图片为内容的网页来举例。希望通过最简单的东西,让你了解到一个网页的制作过程,从而延伸到复杂的网页设计做好准备。什么事都是从简单到复杂。

工具/原料

  • 代码编辑器:UE32,Editeplus、notepad++等IDE编辑器:Dreavweave

  • 平面制作软件

     photoshop

    fireworksillustrator

步骤:

  1. 请先确认你的系统中文件扩展名已经打开。方法是:打开我的电脑,点击文件夹选项,打开文件夹选项对话框,确保“隐藏已知文件的扩展名”前面的小勾已经去掉,如果没有去掉,请把小勾去掉。

     

     

    图片:fbfe41085d41e79e0c6b150a29041630.jpg

    图片:cb706df4303b1a20b34613a7065e27c8.jpg

  2. 创建你的第一个网页文件。为了便于管理,请先创建一个文件夹,用来存放你的网页文件和图片等资料。在你创建的文件夹中右击,选择新建,文本文件:

     

    图片:6699d115f91f9e0d809ddf35fee52f06.jpg

    图片:444de4915014f106b56c722cf6fdf3ea.jpg

  3. 对这个文件重命名为index,把小点后面的txt改为html。这样一个网页文件就准备好了。

     html是网页文件的扩展名。扩展名用来区分文件的类型,扩展名也用来告诉用哪个软件打开。比如html就会告诉浏览器这是一个网页,需要用网页的方式来解析并显示。

     

    图片:248ef3138b655938a05fdb36a40e9b68.jpg

  4. 用notepad++打开这个index.html文件

     

    图片:5bf68f84b729ea90475f85ab7d96fc37.jpg

  5. 在编写之前,我们有必要先来了解一下一个网页最基本的结构:网页有头部和主体两大部分组成。头部和主体都包含在一对<html>标签之内。因为网页是html语言编写的,html语言是一门标记语言,就是用一对对的标签来标记网页中的内容,从而对内容进行组织和管理。

     标签就是网页中内容的容器。每个网页都有头部和主体。如下图所示,整体的最外层标签是<html>和</html>,头部是<head>和</head>标签。在<head>标签中,又可以写<title>(标题)等标签。而<head>标签内的内容一般是不会显示在浏览器窗口中的。显示在浏览器窗口给我们看的内容,都在<body></body>标签里。

     

    图片:5f07ebb4c2ebf637a29235819adc5e72.jpg

  6. 了解了网页的基本结构,我们就开始来写一段完整的网页代码 :

     <html><head><title>这是网页的标题</title></head><body><h1>这是一个一级标题</h1><p>这是一个段落</p></body></html>在notepad++中编辑的情景如下:

    图片:f8b26b0afd7220eb51632341037ef8a6.jpg

  7. 保存之后我们在浏览器中预览,效果如下图。上面我们说过,<head>标签里的内容不会显示在浏览器中,但是我们在<head>中写了一句:<title>这是网页的标题</title>,如果你细心就会发现,在浏览器的标签选项卡上显示了“这是网页的标题”这几个字。

     原来网页标题就是显示在浏览器标题栏上的内容。网页的标题不等于内容的标题,于是我们写的<h1>这是一个一级标题</h1>,它被显示在浏览器窗口中。

    图片:db19d4ba1abd38c3daba159aaeee645e.jpg

注意事项

  • 这里介绍的就是零基础编写最简单网页的步骤,通过这一遍的练习,你就可以写出自己第一个最简单的网页了,当然要想写出复杂漂亮的网页,你还得学习更多的标签代码。当然还要用到上面列出的photoshop等图片处理工具,来为你的网站制作漂亮的效果和图片。不过不用担心,你接触的知识越多,你就知道哪些东西需要怎么学习,这是一个循序渐进的过程。从简单到复杂,从基础到高阶,希望本内容能让你快速从小白变成设计师。


喜欢0 评分0
qianlisaber
新手上路
新手上路
  • 注册日期2013-04-27
  • 发帖数1
  • QQ774821093
  • 火币12枚
  • 粉丝1
  • 关注8
沙发#
发布于:2013-04-27 19:10
?内容在哪里呀

回复(0) 喜欢(0)     评分
wcdz1234
新手上路
新手上路
  • 注册日期2013-05-06
  • 发帖数5
  • QQ983161369
  • 火币27枚
  • 粉丝1
  • 关注11
板凳#
发布于:2013-05-06 19:02
回帖是美德

回复(0) 喜欢(0)     评分
wulong
新手上路
新手上路
  • 注册日期2014-11-02
  • 发帖数3
  • QQ1874058817
  • 火币5枚
  • 粉丝0
  • 关注0
地板#
发布于:2014-11-12 08:27
zan

极客
回复(0) 喜欢(0)     评分
zpg686996
新手上路
新手上路
  • 注册日期2015-04-02
  • 发帖数21
  • QQ1017433415
  • 火币27枚
  • 粉丝0
  • 关注0
4楼#
发布于:2015-04-02 16:02
教的都会。

回复(0) 喜欢(0)     评分
aaajjj
侠客
侠客
  • 注册日期2018-09-14
  • 发帖数37
  • QQ415197625
  • 火币99枚
  • 粉丝0
  • 关注0
5楼#
发布于:2018-09-14 10:12
嗯,不错,看看

回复(0) 喜欢(0)     评分
游客

返回顶部