您的位置：360文档中心› 网页制作基本代码

网页制作基本代码

网页制作基本代码
网页制作基本代码

复习提纲目录

第1章网页入门 ........................................................................... - 2 - 第2章图像与超链接 ................................................................... - 3 - 第3章列表 ................................................................................. - 5 - 第4章网页中的表格 ................................................................. - 6 - 第5章网页中的表单 ................................................................... - 8 - 第7章使用CSS样式美化网页.................................................. - 9 - 第9章HTML总结.................................................................. - 11 -

第1章网页入门

1.1.1网页基本知识

1.什么是网页

由浏览器识别的用于显示信息的文件(信息包括：新闻、微博、购物、邮件等) 2.什么是网站

由众多网页组成的一个群体(网页之间可以相互调用实现信息查看)

3.构成网页的元素：文本、图像、动画、表格、其他。

①文本：用于描述信息的文字

②图像：增强信息的生动性和直观性

③动画：强烈视觉冲击效果

④表格：布局的合理性

⑤其他：视频、背景音乐等

4.访问网页的三个要素

→网站的存储空间

?服务器用于网页的存放

→网站的域名

?通过域名指向需要访问的网页

→网页的访问地址

?通过域名访问，通常打开的是默认页面

?通过域名+网页名称进行访问

5.Dreamweaver工具的特点

①开发环境完备、简单易用

②所见即所得、支持可视化操作

③代码提示功能

④编写代码边看效果

6.编辑模式

三种编辑模式

①代码模式

②拆分模式

③设计模式

第2章图像与超链接

1、图像的应用场合

1)新闻图片

2)产品说明

3)LOGO设计

4)Banner设计

5)广告宣传

2、图像的作用：图文并茂、直观、生动

3、图像路径的几种情况：

1)图像与网页在相同的目录下，直接写文件名称

2)图像位于网页目录下的某个子目录，先写子目录名字再写文件名称

3)图像位于网页目录之上，.. / 文件名

4、图像的相关属性

图像的基本属性（图像地址、图像尺寸、可替换的文本）

”可替换文本”/

5、图文混排的属性设置

边距（水平和垂直边距）

对齐方式（左对齐、右对齐、居中对齐）

6、超链接——使相互独立的页面可以互相访问。

……

目标窗口主要有两种：_blank;(在新窗口中打开)

_self;(在原始窗口打开)

7、超链接的种类

1)电子邮件链接：mailto:jone@https://www.360docs.net/doc/4713835203.html,

代码：jone

2)书签标记（锚链接）

先“命名锚记”再“创建链接”

代码：

查看公司位置

3)空链接#

4)图像链接

5)文本链接

第3章列表

1、无序列表

    —

  • 1)属于项目列表

    2)列表项之间无顺序之分

    3)每个列表项前均有一个项目符号2、无序列表的类型

    通过type属性设置列表显示符号类型

    1)disc：实心圆点

    2)square：实心方框

    3)circle：空心圆点

    3、有序列表

      —

    1. 1)属于项目列表

      2)以数字作为列表项符号

      4、有序列表的类型

      1)1：数字

      2)A：大写英文

      3)a：小写英文

      4)i：小写罗马字符

      5)I：大写罗马字符

      5、定义列表

      —
      —

      用于具有特殊要求的列表显示

      第4章网页中的表格

      1、表格的作用

      →页面布局整齐、美观

      2、表格的基本结构

      →单元格:表格的最小单位

      →行:一个或多个单元格横向堆叠形成了行

      →列:一个或多个单元格纵向划分形成了列

      3、表格的属性

      宽度边框对齐方式单元格的填充

      cellspacing=”10”>

      间距

      “填充”效果“间距”效果

      4、表格的行列关系

      →表格由行列组成

      →一行可以包含多列

      →列由一个或多个单元格组成

      5、单元格的属性

      宽高背景色水平对齐垂直对齐

      跨行跨列

      注意：水平对齐（left、right、center）

      垂直对齐（top、middle、bottom、baseline）

      第5章 网页中的表单

      1、表单的典型应用

      → 登陆 → 注册 → 网上购物 → 问卷填写

      → 搜索信息

      2、表单的属性

      → 表单ID

      → 动作

      → 方法

      代码：
      3、表单的主要元素

      1)单行文本框（元素名称、字符宽度、最多字符数、初始值）

      2）密码框

      3）单选按钮

      4）复选框

      5）下拉列表

      6）按钮

      按钮的类型（提交按钮、重置按钮、普通按钮） 7）文件域

      8）隐藏域

      9）多行文本域

      4、设置表单元素的功能属性

      → 只读属性：readonly → 禁用属性：

      disabled

      第7章使用CSS样式美化网页

      1、什么是CSS

      →CSS：Cascading Style Sheets 层叠样式表

      →用于确定网页格式控制的规则

      2、CSS的作用

      →内容和样式的分离

      →样式复用

      →页面的精确控制

      →搜索引擎的收录

      3、Dreamweaver与CSS样式

      1）标签导航器

      →通过标签可以快速定位需要设置样式的位置

      2）CSS选择器

      →标签选择器：以标签名作为样式名称

      →类选择器:以“.选择器名称”来表示样式，能实现套用

      →ID选择器：以元素id作为样式名

      3）CSS属性面板

      →CSS规则

      →编辑规则

      4、字体样式

      5、文本对齐方式的设置

      →属性：text-align

      6、样式表修饰背景

      背景

      修饰

      的内容

      第9章HTML总结

      1、常用的HTML标签

      ?全局标签

      ?文本与段落

      ?特殊字符

      ?图像标签及相关属性

      ?定义列表

      ?表格

      ?表单及常用标签

      2、内嵌式框架的使用

      网页将不能被另存为 11. 12. 怎样通过asp的手段来检查来访者是否用了代理 <% if Request.ServerVariables("HTTP_X_FORWARDED_FOR")<>"" then response.write "您通过了代理服务器，"& _ "真实的IP为"&Request.ServerVariables("HTTP_X_FORWARDED_FOR") end if %> 13. 取得控件的绝对位置 //javascript 刷新按钮二 回首页按钮 弹出警告框 状态栏信息 背景色变换 打开新窗口 窗口最小化 2)加入连接：写上你想写的字 3)在新窗口打开连接：写上要写的字 消除连接的下划线在新窗口打开连接： 写上你想写的字 4)移动字体(走马灯)：写上你想写的字 5)字体加粗：写上你想写的字 6)字体斜体：写上你想写的字 7)字体下划线: 写上你想写的字 8)字体删除线: 写上你想写的字 9)字体加大: 写上你想写的字 10)字体控制大小：

      写上你想写的字

      (其中字体大小可从h1-h5,h1最大，h5最小) 11)更改字体颜色：写上你想写的字(其中value值在000000与ffffff(16位进制)之间 12)消除连接的下划线：写上你想写的字 13)贴音乐： 14)贴flash: 15)贴影视文件： 16)换行：

      网页设计代码大全

      段落标记background:网页背景图像… bgcolor：网页背景颜色align:left right center text:字体颜色强制换行标记link：可链接文字的色彩

      alink：被鼠标点中时可链接文字的颜色预排格式标记vlink：已经单击过的可链接文字的颜色

       leftmargin：页面左边距插入水平线标记topmargin：页面上边距
       Vlink：已经单击过的可链接文字的颜色文本缩标记Leftmargin：页面左边距
      …
       Topmargin：页面上边距列表标记 标题格式标记 1.无序标题 （范围（h1-h6））
         align：left(左) right(右) center(中) 
      • 列1 bottom(底) top(顶) 
      • 列2文字格式标记………  color=“颜色”>文字 type:disc● circle○ square■字形设置标记 2.有序字形 粗 字形 下划线
           字形 斜 字形文字增大
        1. 列1 字形 删除线
        2. 列2 字形 文字减小………字形 上标 字形下标
         字形 宽体 字形 强调 3.定义字形 闪烁 字形斜
         
        条目1
        条目1的说明字形 特别强调………
        网页设计与制作(代码介绍)
        网页设计与制作 一、HTML 基本语言： 1.HTML 基本语法：（如图）   ....:表示HTML 文档的开始和结束 …:表示HTML 文档的头部。最常用的标记是…,标记中的容对应浏览窗口标题的信息。 <body>…</dody>：<body>标记之的容对应的是浏览器中的容。 2.<body>标记的使用：（如图）   Bgcolor="颜色":设置页面背景色。 Background="图像文件的名字及路径"：设置背景文件。 Text="颜色"：设置页面文字默认颜色。 标记属性用来对标记之间的容修饰，标记其属性必须放到“．．．．．．．．．．．．．．．．．．．．．．．．．．< >．．”．中，各属性间必须用空．．．．．．．．．．格隔开。．．．． 色彩的表示方法有两各种：1.RGB 模式，用16进制的红(Red)、绿(Green)、蓝(Blue)的</p><p>值来表示，格式为“#RRGGBB”，字符包括数字0～9和字母A～F，如红色为“#FF0000” 2.用英文单词表示彩色，如红色“red”。 二、常用的HTML标记及其属性制作网页①： 1.页面属性、排版标志 ⑴.标题标记： 格式：<h#>...<h#>, 其中“#”的取值国为1（字体最大）～6（字体最小）。 作用：设置文档的各级标题。 常见属性：align,用于定义标题的对齐方式，默认为左对齐， 标题标记属性：（如表） ⑵.版面格式标记 ①.分段与换行：（如表） ①.以下标记都出现在<body>中出现,标记必须以成对出现，如<body>...</dody>.</p><h2>怎样制作自己的网页</h2><p>和怎样制作自己的网页 时间:2009-09-22 19:35来源:未知作者:大宝库点击:9865次 阅读工具：字体：大中小 一 首先，可以告诉想学网页制作的朋友。学习制作网页和学习其它知识一样，是要有基础的。在基础之上学习起来会比较轻松和快捷的。其次，要清楚学习它是用来做什么。 建议你要具备的条件：对电脑熟练操作，使用电脑最好在一年以上，对网页设计感兴趣，有较充足的学习时间，熟悉office办公软件。当然，这些不是一定必须的。 第一阶段：开始时最好是学些网页编辑软件，如：FrontPage、Dreamweaver.这样可以使您更了解网页制作与运营的原理。最好使拿本教程来学学，结合教程边学习边制作。 第二阶段：会用网页制作软件后，已会制作一个较完整的网站了。但为了能使自己设计制作的网页尽善尽美，还是学习网页的核心技术吧！网页编辑语言（包括:html、css、javascript、asp、xml等）。你可以选择地学习。 第三阶段:结合你自己已掌握地知识来开发网站，可以开发出别人给你定义的目标网站。到了这个时候，你就成为真正的网站开发者了。 怎样制作网页，不是说一两篇文章能够说清楚的。以上介绍的是制作网页的主要纲要，希望能够给想要学习制作网页的朋友一个参考。 二 一、工具 1、空间 网页做好了肯定是要发表上网的，所以必须先申请一个空间；免费的空间不是很稳定，容量又小，也不好申请，建议到大的网站如新浪、网易去先买一个个人空间，大概有个20M以上的就可以了。 2、软件 推荐使用Dreamweaver6.0中文版，这个软件最大的特点就是“所见即所得”，也即是制作过程中看到的，便是到时发布到网络上的。 二、教程</p><h2>网页制作经验编写高效率的HTML网页代码</h2><p>网页制作经验编写高效 率的H T M L网页代码 Document serial number【UU89WT-UU98YT-UU8CB-UUUT-UUT108】</p><p>许多网站设计者最常犯的错误便是当其网页能够在IE下正常显示便认为其代码正确无误，甚至常看到有人在抱怨其网站排名不理想，到其网站简单看一下便可发现 HTML代码中充斥各种各样的错误，在那样的代码基础上无论付出多少努力去优化网站结果都可能是付诸流水的啊！事实上，IE是一款对HTML代码容错能力甚高的的浏览器，——说句题外话，尽管我们可以有各式各样的理由可以攻击微软，但微软对其产品操作的易手性及可用性方面所做的努力是不容抹杀的。——Web页面能够在IE下正常显示绝不意味着页面的HTML代码没有问题，甚至可以推而广之，Web页面在多种浏览器下均可正常显示也不意味着HTML代码完全合法有效，毕竟哪个浏览器都要保证基本的容错的功能，不然，就会发生即使仅仅因为网络传输中的一点导致导致 HTML页面显示不正常了，而这在网络带宽仍然紧张的今天仍是频繁发生的。什么是合法有效的HTML代码 简单说来，我们的Web页面是由HTML(Hypertext Markup Language :超文本链接标示语言)元素构成的，即使对于ASP、PHP之类的动态页面，其也是由SERVER将ASP或PHP语句渲染成相应的HTML元素并下传到客户机上；对于JavaScript之类则由客户端将其转换为HTML。 同其他语言一样，HTML也有自己的语法规则，无论是浏览器还是搜索引擎的Spider都在根据这些规则来分析网页代码中的内容。但很多时候，即使对熟练人员来说，在HTML页面构建时仍然难免出些HTML代码上的错误，更别提大部分所见即所得编辑器造成的HTML冗余臃肿问题了。</p><h2>简单网页制作教学设计</h2><p>《简单网页制作》教学设计 一、设计意图： 目前网络对学生的吸引力很大，学生上网都会浏览网页内容，对网页的制作也有很大的兴趣，想知道一个网页是怎样制作成功的。但是网页的制作相对复杂，对于一些的代码的编辑学生也较难理解，因此本课选择了FrontPage网页制作工具，引导学生简单的了解网页制作的过程，采用了所见即所得的形式避开代码的繁琐，调动学生自行设计的积极性，对网页制作有一个简单的入门了解。 二、教学目标 1、知识目标 （1）理解网页制作的简单步骤。 （2）学会用FrontPage的制作简单网页。 2、技能目标 （1）掌握的FrontPage的背景添加的操作。 （2）掌握FrontPage的文字编辑、艺术字、图片的插入的操作。 （3）知道HTML的简单编码。 3、情感目标 （1）培养学生的口头表达能力、操作和分析概括能力。 （2）培养学生展示自我、表现自我的能力。 （3）培养学生独立思考问题、解决问题的能力和团结协作精神。 （4）在网页制作的过程中，提高学生对FrontPage的认识。三、重难点、问题预测及对策</p><p>1、重难点 （1）重点：FrontPage的基本操作。 （2）难点：HTML的理解。 2、问题预测 本节课是网页制作的第一节内容，需要学生掌握的技能并不困难。由于在学习网页制作的过程中，需要培养学生的制作网页的积极性，才能引发学生对网页制作的兴趣，实现自主学习，自主开发。 3、对策 以制作班级自己的主页引起学生注意，引发学生的兴趣。让学生运用FrontPage的插入、背景修改等工具，通过作品展示激发学生的动力。 在教学过程的设计上，通过自主设计自己的个人主页来达到解决一个个知识点的目的，同时通过学生自己创作，引导学生正确的审美情趣和创作激情。 四、课前准备 精美网站、优秀班级主页、素材图片等。 五、教学流程 1、情感导入：通过优秀班级主页欣赏，引发学生兴趣，跃跃欲试。 2、自主学习：引导学生做自己班级的主页。 3、示范教学：学生归纳总结，老师帮助、提醒，使学生掌握正确的操作步骤。</p><h2>网页设计与制作(代码介绍)</h2><p>网页设计与制作 一、HTML基本语言： 基本语法：（如图） <html>....</html>:表示HTML文档的开始和结束 <head>…</head>:表示HTML文档的头部。最常用的标记是<title>…,标记中的内容对应浏览窗口标题的信息。 <body>…</dody>：<body>标记之内的内容对应的是浏览器中的内容。 2.<body>标记的使用：（如图） Bgcolor="颜色":设置页面背景色。 Background="图像文件的名字及路径"：设置背景文件。 Text="颜色"：设置页面文字默认颜色。 标记属性用来对标记之间的内容修饰，标记其属性必须放到 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．“．< > ．．”．中，各属性间必须用 空格隔开。 ．．．．． 色彩的表示方法有两各种：模式，用16进制的红(Red)、绿(Green)、蓝(Blue)的值来表示，格式为“#RRGGBB”，字符包括数字0～9和字母A～F，如红色为“#FF0000”2.用英文单词表示彩色，如红色“red”。 二、常用的HTML标记及其属性制作网页①： 1.页面属性、排版标志 ⑴.标题标记： 格式：<h#>...<h#>, 其中“#”的取值范国为1（字体最大）～6（字体最小）。 作用：设置文档的各级标题。 常见属性：align,用于定义标题的对齐方式，默认为左对齐， ①.以下标记都出现在<body>中出现,标记必须以成对出现，如<body>...</dody>.</p><p>标题标记属性：（如表） ⑵.版面格式标记 ①.分段与换行：（如表） ②.文本对齐标记 可以在标记中使用align属性指定文本对齐方式。另外，居中对齐可以通过居中对齐方式进行设置。 格式：<center>…<center> 作用：使标记间的内容以居中对齐方式显示。 ③.水平线标记 格式：<hr> 作用：在文档中插入水平线。 常用水平线标记属性：（如表） ④.字体标记 格式：<font>…</font> 作用：设置标记间文体的字体、大小、颜色等。 常用字体标记属性：（如表）</p><h2>实验一做一个简单的html网页</h2><p>实验报告 学生姓名：学号： 一、实验室名称：软件大楼302 二、实验项目名称：用HTML语言制作简单的网页 三、实验原理： 1.网页 （1）网页就是在浏览器上看到的一页，网页也称为Web页。 （2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内 容的作用。 （3）超链接是网页中的特殊标记。它指向了WWW中的其他资源，如其他 网页、网页的另一个段落、声音文件等。这些资源可以位于自己的计算机上，也可以位于其他计算机上。用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。 2.HTML语言 （1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。 （2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microso ft Word等。保存时要将脚本保存成纯文本格式，扩展名必须是.htm。 （3）HTML脚本的基本结构。HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容， 一般情况下它分为两部分：头部和主体。头部总是由<head>和</head>标记定义</p><p>的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在 浏览器中所看到的内容，包括文字、图片、动画等。 3.FrontPage，dreamwerver，notepad 以FrontPage为例，它是一种简单易学的Web管理和网页制作的软件。Front Page2000的窗口，如图1.1所示。 在窗口工作区的左下方是网页视图模式的3个状态按钮：“普通”、“HTM L”和“预览”。网页视图模式的默认状态是“普通”，用于以所见即所得的方式编辑网页。“HTML”网页视图模式用于以HTML语言的方式编辑网页。 制作网页过程中，想查看网页的制作效果，切换到“预览”网页视图模式即可。 切换网页视图使用鼠标单击相应的状态按钮即可。 图1.1 FrontPage 2000的窗口 选用其他网页开发工具也是可以的这里没有限制 四、实验目的： 1.简单了解HTML语言。 2.认识网页以及网页的结构。 3.掌握用HTML语言制作简单网页的方法。 五、实验内容：</p><h2>网页设计 html 代码 标签 大全</h2><p>1.结构性定义 文件类型<HTML></HTML>（放在档案的开头与结尾） 文件主题<TITLE>（必须放在「文头」区块内） 文头（描述性资料，像是「主题」） 文体（文件本体） （由浏览器控制的显示风格） 标题（从1到6，有六层选择） 标题的对齐 区分
         区分的对齐
         引文区块
        （通常会内缩） 强调（通常会以斜体显示） 特别强调（通常会以加粗显示） 引文（通常会以斜体显示） 码（显示原始码之用） 样本 键盘输入 变数 定义（有些浏览器不提供） 地址
         大字 小字 与外观相关的标签（作者自订的表现方式）
        加粗 斜体 底线（尚有些浏览器不提供） 删除线（尚有些浏览器不提供） 下标 上标 打字机体（用单空格字型显示） 预定格式
        （保留文件中空格的大小） 预定格式的宽度
        （以字元计算）向中看齐
        （文字与图片都可以） 闪耀（有史以来最被嘲弄的标签） 字体大小（从1到7） 改变字体大小 基本字体大小（从1到7; 内定为3）字体颜色 说明（浏览器不会显示）  
       ……