网站专题制作步骤演示

网站制作教程_教你快速制作自己的网站第一篇：网站制作教程_教你快速制作自己的网站网站制作教程，教你怎么快速制作网站首先，可以告诉想制作网页或想从事网站维护，网站管理等相关行业的的朋友。

网页制作有很多种方式，不外乎自己开发，找第三方开发。

找网络公司开发这里就不说了，没有什么技术含量，准备好钱就可以了，自己内部开发主要有下面两种方式：方法一：下载cms（cms也称网站内容网站管理），互联网发展到今天，网站制作也变得非常简单，国内也出现了一批很专业的网站制作软件，比如pageadmin系统、shopex系统、discuz系统、wordpress系统等都是很优秀网站制作软件，有一句话说得好，站在巨人肩上会看的更高，一样道理，用专业的网站系统来做网站就是一个非常省力，省时的过程，并且强大的后台功能有利于后续功能扩展及改版，国内90%网站都是基于这些cms系统基础上搭建，其中不乏知名网站，当然，选中一个系统后你需要去熟悉这个系统的功能你才能运用得很好。

方法二：这也是一个专业企业网站开发人员必须掌握的方法，因为掌握下面基础，即时你用方法一来做网站，也能运用得更好，因为一把好剑也需要一个好的剑客，有基础后你会把各种cms系统运用自如，下面讨论一下成为一个网站制作人员必须掌握的知识：第一阶段：开始时最好是学些图像编辑软件和基础网页脚本语法，如：Firework或photoshop，HTML语法(百度一下：HTML入门)，CSS语法(百度一下：CSS入门)，javascript语法（百度一下：javascript入门）这样可以使您更了解网页制作的原理。

结合教程边学习边制作，这最多花你几周时间。

第二阶段：有了上面的基础，你可以制作一些简单的页面了。

当然为了让网站做得更漂亮，功能更强大，你就需要学一些动态编程语言，常用的有ASP,PHP和,推荐后两种，因为Asp已经被淘汰，后两种程序区别自己上网搜索吧，本人更倾向于学习.NET，面向对象，功能太强了，微软的东西就是强悍。

网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。

素材准备：准备制作网页所需的文字素材、图像素材。

实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。

实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。

2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。

3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。

4.切换代码模式下，输入代码。

5.保存文件，预览文件效果。

实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。

实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。

页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。

素材准备：准备好从网上下载的安装程序。

实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。

2.安装完成后输入注册号。

3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。

第13课制作框架网页教学目标：1.能打开上节课创建的框架网页，为主框架设置初始网页，设置框架属性。

2.能为选中的对象设置链接的网页，并将该网页安排在合适的框架中；理解框架间的调用关系。

3.学会保存框架网页。

教学重点：能为主框架设置初始网页；为选中的对象设置链接的网页，并将该网页安排在合适的框架中；理解框架间的调用关系，会保存框架网页。

教学难点：为选中的对象设置链接的我那过夜，并将该网页安排在合适的框架中；理解框架间的调用关系。

课时安排：1课时教学过程：一、对比作品，导入新课1.展示上节课的半成品“防震减灾专题网站”和“防震减灾专题网站”框架网页的成品，引导学生欣赏，对比作品。

2.出示教材第73页的图13-1，并讲授：制作框架网页网页可以看作是一种“拼图”游戏，就是将若干个独立相关的网页组合在一起，形成一个完整的框架网页。

3.出示课题。

二、制作防震减灾专题网站1.打开网站，设定初始页面。

（1）讲授并演示：启动FrontPage,单击“打开网站”命令，打开上节课创建的“mysite”网站中的“”文档。

（2）打开框架网页时，第一次出现在框架的网页称为初始页面，如何设定初始页面呢？（3）布置任务：出示“防震减灾专题网站”初始页面图，引导学生以小组为单位探究设定初始页面的方法。

（4）引导学生反馈设置初始页面的过程，并针对学生的演示给予讲解。

2. 设置框架属性（1）讲授并演示：在中间右框空白处单击右键，选择“框架属性”命令，查看框架的默认名称；单击“框架网页”按钮，打开“网页属性”对话框，单击“框架”选项卡，定义“框架间距”和是否“显示边框”。

（2）布置任务：用同样的方法设置其他框架的属性。

3.组织框架间的调用关系。

（1）引导学生回忆如何在导航菜单设置超链接。

（2）请学生演示设置导航菜单的超链接。

（3）教师演示并说明框架间的调用关系。

（4）布置任务：为导航菜单设置超链接，设定框架间的调用关系，保存、预览框架网页。

第3课“神速”建站——网站模板工程师发表于2008-9-14 22:18:00第3课“神速”建站——网站模板课前准备：浏览几个网站，探究一下网站的结构特点。

教学目标：学会建立网站的方法。

教学过程：一、谈话导入今天我们学习如何建立网站。

二、按下列步骤操作。

1、建立动漫网站（1）启动FrontPage。

（2）建立网站。

第1步：在文件菜单中选择“新建”→“站点”。

第2步：在出现的新建窗口中左边选择“只有一个网页的站点”，在“指定新站点的位置”文本框中输入“d:\陈菱\动漫网站”（“陈菱”换为自己的名字），这样是将网站建立在自己的个人文件夹下，网站名为“动漫网站”。

第3步：单击“确定”按钮，建立好网站。

“文件夹列表”框，是以文件夹的形式管理我们的网站的。

可以看到在新建成的网站中自动产生了两个文件夹：-private文件夹一般存放私人的资料，image文件夹一般存放制作网站时所用的图片。

index.htm是站点中的主页，在因特网上有约定，当通过浏览器打开一个网站时，它会自动打开这个网站中名为index.htm或default.htm 的网页。

2、为网站制作主页（1）打开主页注意：右边的编辑窗口的标题，也就是默认的要编辑的网页的名字，叫做new-page-1.htm,不是我们的主页index.htm。

编辑主页前，要双击文件夹列表中的index.htm，这时，编辑窗口中的网页名字也变为了i ndex.htm,这时才是开始编辑主页。

（3）编辑主页。

主页上访问者浏览到的第一个网页，因此要精心设计才能给访问者留下深刻的印象。

主页的制作方法，与普通网页也没有什么区别。

用前面学过的方法，编辑一个主页。

内容不用太多，简单介绍自己网站的内容。

3、将其他已经制作好的网页加入该网站（1）打开网页。

单击工具栏中的“打开”按钮，打开前面编辑的“柯南”网页。

（2）另存网页。

第1步：在菜单中选择“文件”→“另存为”，将网页存到“动漫网站”文件夹下。

自己制作网页的7个步骤怎样自己制作网页？需要在互联网了解一点的做法，一旦你掌握了它，这是一个很大的乐趣。

第一步是决定你想要您的网页上发布。

也许你想发布，你已经写了一个原始的故事，分享您已经阅读评论的书籍，或创建一个电子杂志，你的业余爱好之一。

无论您希望把什么放到您的网页上，这一步一步的指南会指示如何做到这一点。

怎样自己制作网页步骤1:创建一个文本文档首先,您需要创建一个文本文档包含单词,你想要出现在您的Web页面。

只要你给你的文档名称结尾，大多数文字处理程序将会工作的很好。

首先一个标题和一个引人注目的问候或介绍,所以人们会立即告诉您的页面是什么,会想要读更多。

思考逻辑的地方插入你的文本。

没有人想要向下滚动一个长,不间断的文本块。

你的页面将会更可读的如果你把在频繁的换行符和水平规则。

想想,你可能想要插入图片,如果你让他们在电子文件。

大量的网页开始与一个引人注目的图像顶端,旁边的标题。

怎样自己制作网页步骤2:学习基本的HTML标记现在您需要插入一些格式化标记你的文档,会告诉一个互联网浏览器如何安排你的文字和图片在屏幕上。

这些标签组成一个语言称为超文本标记语言,或者HTML。

一个基本结构H TML文档像这样:< HTML ><头><标题>的标题页< /标题>< /头><身体>文本的页……< /身体>< / html >注意(1)每个格式标记之间出现“小于”(<)和“大于”(>)符号,以及(2)标签通常成对出现,第二个标记用“削减”(/)。

下面列出的一些基本的格式化HTML标记:< h1 >…< / h1 >头,一级。

小标题都带有< h2 >…< / h2 >、< h3 >…< / h3 >等。

< b >…< / b >粗体文本< i >…< / i >斜体文本<center>…< /center>居中文本< p >段落返回(插入额外的线之间的空间段)注意:任何段落的回报,你在你的文档插入通过简单地击打键盘上的回车键将会忽略一个Web浏览器。

教你怎么制作网站首先，可以告诉想学网站制作的朋友。

学习制作网站和学习其它知识一样，是要有电脑基础的。

在基础之上学习起来会比较轻松和快捷的。

其次，要清楚学习它是用来做什么。

建议你要具备的条件：对电脑熟练操作，使用电脑最好在一年以上，会打字，懂基本电脑知识，反正不要太笨就可以了，呵呵。

当然，这些不是一定必须的。

第一阶段：开始时最好是学些网页编辑软件和基础网页脚本语法，如：Dreamweaver软件，HTML语法(百度一下：HTML入门)，CSS语法(百度一下：CSS入门)，这样可以使您更了解网页制作与运营的原理。

最好是拿本教程来学学，结合教程边学习边制作，这最多花你一周时间，如果有时间再学点javascript脚本语法(百度一下：javascript入门)。

第二阶段：会用网页制作软件和基础语法后，已会可以制作一个较完整的网站了。

当然为了让网站做得更漂亮，功能更强大，你就需要学一些动态编程语言，常用的有ASP,PHP和,推荐后两种，应为ASP再过一段时间会被淘汰，后两种程序区别自己上网搜索吧，本人更倾向于学习.NET，面向对象，功能太强了，微软的东西就是强悍。

如果你没有精力去学这些复杂动态编程语言，你完全可以利用现成的网站管理系统（实际也叫建站软件，比如PageAdmin系统、shopex系统、discuz 系统等都比较优秀），这也是目前比较流行的方法，省时、省力。

第三阶段：结合你自己已掌握地知识来开发网站，可以开发出别人给你定义的目标网站。

到了这个时候，你就成为真正的网站开发者了。

怎样制作网页，不是说一两篇文章能够说清楚的。

以上介绍的是制作网页的主要纲要和一些捷径，希望能够给想要学习制作网页的朋友一个参考。

工具1 、网页做好了肯定是要发表上网的，所以必须先申请一个空间；免费的空间不是很稳定，容量又小，也不好申请，建议到服务器公司先买一个个人空间，大概有个20M 以上的就可以了，当然也可以在自己电脑上安装IIS来模拟服务器运行（这里不详细说了，有兴趣的朋友百度一下相关知识，这个是很容易的）2 、图片处理软件推荐firework或photoshop，HTML编辑软件推荐Dreamweaver，当然如果你会HTML语法，那用计事本直接编辑会更高效。

第一步：规划网站，本教程将以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；第十步：解决IE浏览器的显示BUG；第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。

点击看大图其基本布局见下图：点击看大图主要由五个部分构成：1.Main Navigation导航条，具有按钮特效。

Width: 760px Height: 50px2.Header网站头部图标，包含网站的logo和站名。

Width: 760px Height: 150px3.Content网站的主要内容。

Width: 480px Height: Changes depending on content4.Sidebar边框，一些附加信息。

Width: 280px Height: Changes depending on5.Footer网站底栏，包含版权信息等。

Width: 760px Height: 66px第二步：创建html模板及文件目录等 1.创建html模板。

代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>CompanyName - PageName</title><meta http-equiv="Content-Language" content="en-us" /><meta http-equiv="imagetoolbar" content="no" /><meta name="MSSmartTagsPreventParsing" content="true" /><meta name="description" content="Description" /><meta name="keywords" content="Keywords" /><meta name="author" content="Enlighten Designs" /><style type="text/css" media="all">@import "css/master.css";</style> </head><body></body></html>将其保存为index.html,并创建文件夹css，images，网站结构如下：2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。