web网页制作（如何制作网站web）

本文目录

• 如何制作网站web
• 网页的 “源码”怎么编写
• 网页源代码的基本结构是什么
• 有谁可以告诉我web网页制作中通过三个按钮控制页面上的一段文字放大,缩小，恢复到原始大小的代码
• web网页制作作业

如何制作网站web

第一步：建站系统选择

不懂技术和设计的情况下，你就需要用到自助建站系统了，需要找网页制作公司的模板，这样可以让你零基础做出一个比较美观的网站。后台都是可视化操作，模板设计感强，简洁典雅，做出来的网站效果也非常好。

第二步：头图设计

访客打开你的网站后，浏览顺序一般是从上至下因此，若想快速吸引访问者注意力，就一定要重视头图banner！让客户感受到视觉上的美观和愉悦，而不是看了你网站一眼就迅速关掉。头图一定要要足够显眼、吸睛。让客户一眼明白你是干什么的，千万不要太_嗦，免得浪费客户时间。

第三步：详细信息展示

在标题头图之下，一般是企业简介、重要产品展示、团队成员、详细业务介绍、媒体报道等，网站靠后部分则是留言表单、联系方式。中间可以根据需求添加商城、博客等版块。这样的版块排列顺序比较有逻辑，便于客户理解。

如何制作网页，添加这样的功能呢？在上线了网站器点击左侧【添加新版块】，可以添加各种功能——商城、定价表、相册、产品展示、大尺寸媒体、留言表单、横向布局、纵向布局等。版块的布局、顺序均可调整，版块内的文字内容、图片也可随时更改。

第四步：加强客户联系

网站是从互联网引流的好渠道，你可以在网站底部添加自己的社交媒体平台按钮，吸引客户关注你，进而为自己积攒私域流量。

第五步：发布上线

在网站后台的“设置”里你可以设置网站域名、标题、logo等等。全部做好并预览无误后点击左下角的“上线”，就成功发布自己的网站了。

网页的 “源码”怎么编写

网页中源文件的内容是HTML，了解它就可以编写静态网页了。至于动态页面通常都是用服务器脚本来编写的。如：ASP、PHP、perl等 HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面. 也许你听说过许多可以网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord\记事本\写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。 HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂. HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是《p》,块引用标签是《blockquote》。有些标签说明页面如何被格式化（例如，《p》开始一个新段落），其他则说明这些词如何显示(《b》使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。 关于标签，需要记住的是，它们是成双出现的。每当使用一个标签－－如《blockquote》,则必须以另一个标签《/blockquote》将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。 基本HTML页面以《html》标签开始，以《/html》结束。在它们之间，整个页面有两部分－－标题和正文。 标题词－－夹在《head》和《/head》标签之间－－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在《body》和《/body》之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。 那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文) 然后你可以用浏览器将它打开，你会看见最简单的自己做的页面 ASP是Active Server Page的缩写，意为“活动服务器网页”。ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是.asp，现在常用于各种动态网站中。 ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的web应用程序。 与HTML相比，ASP网页具有以下特点： （1）利用ASP可以实现突破静态网页的一些功能限制，实现动态网页技术； （2）ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试； （3）服务器上的ASP解释程序会在服务器端制定ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页； （4）ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。例如可以从web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向web浏览器发送信息； （5）ASP可以使用服务器端ActiveX组建来执行各种各样的任务，例如存取数据库、发现哦那个Email或访问文件系统等。 （6）由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可放置ASP程序代码被窃取。 PHP是一个基于服务端来创建动态网站的脚本语言，您可以用PHP和HTML生成网站主页。当一个访问者打开主页时，服务端便执行PHP的命令并将执行结果发送至访问者的浏览器中，这类似于ASP和CoildFusion，然而PHP和他们不同之处在于PHP开放源码和跨越平台，PHP可以运行在WINDOWS NT和多种版本的UNIX上。它不需要任何预先处理而快速反馈结果，它也不需要mod_perl的调整来使您的服务器的内存映象减小。PHP消耗的资源较少，当PHP作为Apache Web服务器一部分时，运行代码不需要调用外部二进制程序，服务器不需要承担任何额外的负担。

网页源代码的基本结构是什么

如图：

1.无论是动态还是静态页面都是以“《html》”开始，然后在网页最后以“《/html》”结尾。

2.《head》”页头

其在《head》《/head》中的内容是在浏览器中内容无法显示的，这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域，而里面“《title》《/title》”中放置的是网页标题。

3.“《meta name="keywords" content="关键字" /》 《meta name="description" content="本页描述或关键字描述" /》 ”

这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。

4."《body》《/body》 "

也就是常说的body区 ，这里放置的内容就可以通过浏览器呈现给用户，其内容可以是table表格布局格式内容，也可以DIV布局的内容，也可以直接是文字。这里也是最主要区域，网页的内容呈现区。

5.最后是以"《/html》 "结尾，也就是网页闭合。

以上是一个完整的最简单的html语言基本结构，通过以上可以再增加更多的样式和内容充实网页。

扩展资料：

标签详解：

1.《!doctype》：是声明用哪个 HTML 版本进行编写的指令。并不是 HTML 标签。《!doctype html》：html5网页声明，表示网页采用html5。

2.《meta》：提供有关页面的元信息（针对搜索引擎和更新频度的描述和关键词等），写在《head》标签内。

a）《meta charset="UTF-8"》：设置页面的编码格式UTF-8；

b）《meta name="Generator" content="EditPlus"》：说明生成工具为EditPlus；

c）《meta name="Author" content=""》：告诉搜索引擎站点制作的作者；

d）《meta name="Keywords" content=""》：告诉搜索引擎网站的关键字；

e）《meta name="Description" content=""》：告诉搜索引擎网站的内容；

有谁可以告诉我web网页制作中通过三个按钮控制页面上的一段文字放大,缩小，恢复到原始大小的代码

先下载jquery-1.2.6.pack.js，包含到文件中
《div class="fsize"》
《h3》《em》Enlarge《/em》《span》Font-size:12px《/span》《strong》Small《/strong》《/h3》
《div》
《p》
Andy Moor – Fake Awake (Eco mix) (Anjunabeats)
Humate – Love Stimulation (Glenn Morrison & Bruce Aisher mix) (Poker Flat
《/p》
《/div》
《/div》
《div class="fsize"》
《h3》《em》Enlarge《/em》《span》Font-size:12px《/span》《strong》Small《/strong》《/h3》
《div》
《p》
Andy Moor – Fake Awake (Eco mix) (Anjunabeats)
Humate – Love Stimulation (Glenn Morrison & Bruce Aisher mix) (Poker Flat
《/p》
《/div》
《/div》
样式CSS:
.fsize{ border:1px solid #444; margin:10px; height:auto;}
.fsize div p{ line-height:1.5em; padding:10px;}
.fsize h3{ font-size:12px; font-weight:500; height:24px; text-align:right; padding:0 10px; line-height:24px; background:#f0f0f0; display:block;}
.fsize h3 em,
.fsize h3 strong{ font-weight:500; color:#c00; font-style:normal; cursor:pointer;}
.fsize h3 em,
.fsize h3 span{ float:left; margin-right:6px; text-align:left;}
脚本JS:
《!--先要链接上JQ库 我们这个例子是基于Jquery的--》
《script type="text/javascript" src="jquery-1.2.6.pack.js"》《/script》
下面是脚本：
$(document).ready(function(){
//字体变大 class为.fsize 的h3 下的 em 元素被点击时：
$(".fsize h3").find("em").click(function(){
//算出h3 下面的 div 中的 p 的字号
var size=parseInt( $(this).parent().next("div").find("p").css("font-size"),10);
//最大为22号字
if(size《22)
{
//字号累加2
size+=2;
//用h3中的span 标签显示当前字号
$(this).next("span").html("Font-size:"+size+"px");
//重新定义调整过的字号
$(this).parent().next("div").find("p").css({"font-size":size+"px"});
}else
{
//大于22号时提示这已经是最大了
$(this).next("span").html("This is the MAX font-size already!");
}
})
//字体变小原理与变大基本相同 注意size 应该是局部变量每次都要算
$(".fsize h3").find("strong").click(function(){
var size=parseInt( $(this).parent().next("div").find("p").css("font-size"),10);
//最小为12
if(size》12)
{
size-=2;
$(this).prev("span").html("Font-size:"+size+"px");
$(this).parent().next("div").find("p").css({"font-size":size+"px"})
}else
{
//提示当前已经是最小
$(this).prev("span").html("This is the MIN font-size already!");
}
})
//离开时仍然显示字号
$(".fsize").mouseout(function(){
var size=$(this).find("div").find("p").css("font-size");
$(this).find("h3 span").html("Font-size:"+size);
})
})

web网页制作作业

首先用图像制作软件photoshop、firework做一张完整的简历图；
然后切片生成一块块的图片；
最后通过Dreamweaver布局设计成网页就可以了。