今天给各位分享web网页模板简单的知识，其中也会对web页面模板进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、简单网页制作
• 2、如何写第一个属于自己的Web页面（Django）
• 3、一个简单的网页要怎么制作啊???
• 4、求一个简单的个人网页html模板
• 5、如何用 Dreamweaver 批量做web网页

简单网页制作

一、FrontPage 2003简介

FrontPage 2003是由Microsoft公司推出的Office 2003组件之一。FrontPage 2003的启动与退出、文件的打开与保存与Office系列中其他软件相同。FrontPage 2003启动后，主窗口如图6-61所示，菜单部分外貌与Office中的其他软件相似。

与以往的版本相比，FrontPage 2003有以下几个新功能：

（1）自定义浏览器分辨率预览检查；

（2）描摹图像；

（3）层功能；

（4）插入交互式按钮；

（5）行为的应用；

（6）使用网页重定向；

图6-61 FrontPage 2003启动界面

图6-62“新建”任务窗格

（7）检查网页错误；

（8）优化HTML代码；

（9）规划页面布局。

二、制作简单网页

我们在前面已经学会了用Word进行排版，其实你已经会制作一个简单网页了，只需将原来排好的Word文档，另存时选择保存类型为“Web页（*.htm；*.html）”就可保存为一个网页文件。

下面我们用FrontPage 2003制作一个简单网页。步骤如下：

1.启动FrontPage 2003

选择“开始”/“所有程序”/“Microsoft Office”/“FrontPage 2003”命令，打开如图6-61所示的界面。

图6-63 新的空白的网页

图6-64“网页模板”对话框

2.建立新网页

选择“文件”/“新建…”菜单命令，打开“新建”任务窗格，如图6-62所示。单击“空白网页”，也可以通过工具栏上的“新建”按钮建立一个新的空白的网页。如图6-63所示。

如果要根据 Microsoft FrontPage 的模板创建网页，单击“其他网页模板”，打开如图6-64所示的“网页模板”对话框，再单击所需模板类型的选项卡，然后单击某个模板。

3.输入如下内容

图6-65

4.编辑操作

网页中的文本编辑操作与Word的编辑操作类似。

本例中，将“我的第一个网页”应用“标题一”样式，并设为隶书，水平居中；将“你好！欢迎光临”应用“标题二”样式，将其余内容应用“普通”样式，并将行距设为“1.5倍行距”，设置完成后效果如图6-65所示。

5.保存网页文件

选择“文件”/“保存”命令，弹出“另存为”对话框，指定保存位置和文件名，然后单击“保存”按钮即可完成操作。

三、制作多媒体个人主页

我们以制作一个简易的个人网站为例，进一步学习使用FrontPage 2003。

1.规划

网站规划包括规划网站的风格、网站的结构和网站的配色等，是对网站的整体定位。本例设置了6个栏目，包括首页、自荐信、个人简历、荣誉证书、才艺展示、联系方式，链接的文件名分别为index.htm、zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。当然也可以结合自己情况进行修改。页面布局如图6-66所示。

2.建立网站

在FrontPage 2003中，所谓网站，就是一些网页和程序的集合，各个网页之间通过超链接联系在一起，所有的网页和文件保存在一个文件夹中，通过网站把这些文件和网页统一起来。本地网站是指本地硬盘上用来存放整个网站的所有文档的文件夹。远程网站是指网络服务器上的网站，供用户浏览。

建立一个新网站，事实上就是建立一个单独的文件夹，然后在这个文件夹中建立各个网页文件，并且把它们链接在一起。

网页制作可以在新建网站中完成，也可以像前面那样单独新建一个网页。建议用新建网站的方法来制作网页。

下面我们首先创建新的FrontPage网站：

（1）在“文件”菜单上，单击“新建”，出现如图 6-66 所示的“新建”任务窗格。

图6-66

（2）在“新建”任务窗格中，单击“由一个网页组成的网站”。

（3）在“网站模板”对话框中，在“常规”选项卡下，单击需要的网站模板，本例选择“只有一个网页的网站”，并在指定新网的位置栏中，键入或选择新网的路径及名称，这里我们将默认的mysite改为myhome，如图6-67所示，然后单击“确定”按钮，出现创建新网站对话框，完成站点创建，完成后如图6-68所示。左边一列是文件夹列表，可以通过右键快捷菜单新建文件夹，对文件或文件夹进行复制、删除、重命名等操作。

图6-67“网站模板”对话框

图6-68

3.准备素材

将本例所需的图片动画素材复制到网站内的images文件夹下。

4.制作主页页眉

在“网页”视图中的文档窗口底部，单击“设计”

。

在文件夹列表中双击index.htm，打开该网页并进入编辑状态，开始首页制作。

（1）设置网页大小 在“视图”菜单上，指向“网页大小”，单击

设置网页大小。

（2）设置网页背景在“网页”视图中的文档窗口底部，单击“设计”

，右击网页编辑区，在弹出菜单中单击“网页属性”项，弹出“网页属性”对话框，在标题框内输入“欢迎访问小慧的个人电子简历”；单击“格式”选中格式选项卡，选中背景栏下的“背景图片”，并单击“浏览”按钮选择背景图片。如图6-69所示。单击“确定”按钮完成网页背景设置。也可在“格式”菜单上单击“背景”来设置。

（3）插入一个一行两列的表格 方法与在Word中插入表格相同。

在显示设计视图模式下，通过常用工具栏的“插入表格”按钮，或在“插入”菜单上，指向“插入”，在级联菜单中单击“表格”；右击插入的表格，在弹出菜单中单击“表格属性”，并将单元格衬距、单元格间距和粗细栏均设为0，如图6-70所示，单击“确定”按钮。

图6-69 网页属性

图6-70 表格属性

（4）在第一个单元格内插入图片 将插入点放在第一个单元格，在“插入”菜单上，指向“图片”，再单击“来自文件”。找到要添加的文件（网站下images文件夹下的logo.gif），如图6-71所示，然后单击“插入”。

更简单的方法是从文件夹列表拖动图片文件到编辑区指定的位置即可。

（5）在第二个单元格内插入Flash动画 单击第二个单元格，在“插入”菜单上，指向“图片”，再单击“Flash影片”。弹出与图6-71相似的“选择文件”对话框，找到要添加的文件（网站下images文件夹下的banner_007.swf），然后单击“插入”。

（6）在第一个表格下插入一个1行1列的表格 同样将单元格衬距、单元格间距和粗细栏均设为0，设置好背景颜色，本例是选的其他颜色，如图6-72所示，在“值”文本框中输入Hex={C1，E8，C9}。

（7）制作滚动字幕 在第二个表格的单元格内单击，在“插入”菜单上，单击“Web组件”，弹出插入Web组件对话框，默认选中的是字幕，因此单击“完成”按钮，弹出字幕属性对话框，在“文本”框内输入：衷心感谢您垂阅我的简历，单击“确定”按钮。如图6-73所示。

图6-71 插入图片对话框

图6-72“其他颜色”对话框

5.制作正文和页脚

（1）在第二个表格下插入一个1行2列的表格，同样将单元格衬距、单元格间距设为0，但粗细设为1，暗边框设为白色，亮边框则设为其他颜色，在如图6-72所示的“值”文本框中输入Hex={99，CC，FF}。

（2）设置单元格背色。右击此表格的第一个单元格，在弹出菜单中单击“单元格属性”，弹出如图6-74所示的对话框，背景设为其他颜色，在如图6-72所示的“值”文本框中输入Hex={F1，F5，FC}。同样方法将第二个单元格设为白色。

图6-73 字幕属性对话框

图6-74 单元格属性

（3）调整单元格宽度，使之与第一个表格相同。

（4）在第一个单元格内插入一个8行1列的表格，并将单元格衬距、单元格间距和粗细栏均设为0。在单元格属性中将单元格对齐属性设为水平居中，垂直居中，行高调整为40。

在刚插入的表格第二行内插入图片homepage.gif，并在其后输入“首 页”；在第三行内插入图片sub_dot.gif，并在其后输入“自 荐信”，后面四行插入的图片均为sub_dot.gif，输入的文字依次为“个人简历”、“荣誉证书”、“才艺展示”、“联系方式”。

（5）在表格三的第二个单元格内插入一个3行3列的表格，并将单元格衬距、单元格间距和粗细栏均设为0。将中间一列调宽一些。

在该表格第一行第二列中输入“自荐信”，在第二行第二列输入自荐信的内容。设为1.5倍行距。

（6）在表格三后面插入一个2行1列的表格，并将单元格衬距、单元格间距和粗细栏均设为0；并且第一个单元格背景色设为与表格二背景色相同，在第二个单元格内输入“联系电话：023-683568XX E-mail：xiaohui＠163.com”并设为居中。

6.链接网站文件

选中要建立超链接的文字或图像，单击常用工具栏中的“插入超链接”按钮或在“插入”菜单上单击“超链接”，或者是右击选中区域并单击“超链接”，均可打开“插入超链接”对话框。如图6-75所示。

图6-75“插入超链接”对话框

（1）选中“首页”，单击常用工具栏中的

按钮，在打开的如图6-75所示的“插入超链接”对话框中，在“地址”框内输入index.htm，并单击“确定”按钮。

（2）用同样的方法将“自荐信”链接到zijian.htm、“个人简历”链接到jianli.htm、“荣誉证书”链接到zhengshu.htm、“才艺展示”链接到zhanshi.htm、“联系方式”链接到lianxi.htm。

7.保存文件，按F12键预览网页

四、制作本网站内其他页面

首先在文件夹列表中将 index.htm 复制 5个，分别重命名为 zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。只需将每个文件中自荐信部分修改为相应内容即可，页眉、超链接栏和页脚均不变。

五、网站发布

当我们完成上述内容后，需将制作的网页发布到Internet上的Web服务器中，才能供网上的访问者浏览。首先要到Internet服务提供商（ISP）那里申请购买存放网页的空间和域名，以前有很多网站（如网易等）都提供免费的个人主页存放空间，现在相对较少了，中国学生网仍在提供50M免费空间服务，大家可到去申请一个免费空间。

发布网站可以使用专门的FTP工具。但为了给用户提供方便，FrontPage 2003内置了网页发布功能，利用它，只需进行简单的设置，就可以轻松地完成网站发布任务。FrontPage 2003中的远程网站视图可以帮助我们将整个网站或单独的文件和文件夹发布到任何位置：扩展的 Web 服务器、支持文件传输协议（FTP）或基于 Web 的分布式创作和版本控制（WebDAV）的Web服务器或文件系统中的某个位置。

下面我们利用FrontPage 2003及文件传输协议（FTP）发布网站，步骤如下：

1.打开FrontPage网站

在“文件”菜单中单击“打开网站”或单击工具栏上的“打开”按钮边上的下拉标志，从下拉菜单中选“打开网站”，在弹出的“打开网站”对话框中找到需要打开的网站并单击“打开”按钮。

2.转至“远程网站”视图

若要转至该视图，请单击“网站”选项卡，然后单击窗口底部的“远程网站”按钮。或在“视图”菜单上，单击“远程网站”。如图6-76所示。

3.设置“远程网站属性”

在文档窗口顶部，单击“远程网站属性”。在弹出的对话框中，在“远程网站”选项卡上，在“远程 Web服务器类型”下，单击“FTP”。在“远程网站位置”框中，键入自己所选定的远程网站的地址及 FTP 协议（本例中输入“”），如图6-77所示。单击“确定”按钮，在打开的“要求提供用户名和密码”对话框中输入ISP提供的用户名和密码，单击“确定”按钮。如图6-78所示。

图6-76

图6-77

4.发布网站

通过单击窗口右下角的“发布网站”按钮即可发布所有文件。也可发布单个文件，在本地网站选择一个文件，然后单击“本地到远程”按钮

。如图6-79所示。

图6-78

图6-79

如何写第一个属于自己的Web页面（Django）

        上期（超实用搭建个人开发Web网页的软件及配置基础）已经详细的介绍了基于Django+MySQL+PyCharm组合配置的Web开发的基础架构。这期带读者跟着作者写第一个属于自己的Web页面，同时跟作者同一个局域网的其它用户也可以访问。

首先输入python manage.py startapp myFamilyWeb (表示创建一个自己的Web页面项目)，如图1。

生成的myFamilyWeb里的目录结构里的含义如下：

外层的_init_.py文件标识myFamilyWeb是一个Python包。

admin.py 用于将Model定义注册到管理后台，是Django Admin 应用的配置文件。

apps.py用于应用程序本身的配置。

migrations目录用于存储models.py文件中Model的定义及修改。

migrations/_init_.py文件标识migrations是一个Python包。

models.py用于定义应用中所需要的数据表。

tests.py文件用于编写当前应用程序的单元测试。

views.py文件用于编写应用程序的视图。

以上的介绍都是myFamilyWeb应用的全部内容，后续需要做的就是填充对应的service逻辑对外提供服务。如果就这么启动，就会发现如图2一样访问不了。

想要实现访问自己第一个Web页面（myFamilyWeb），第一步是设置路由和在views.py增加一个可以访问的函数（图3-图6）。

配置模板和html（图7-图13）

配置写好了第一个最简单的Web页面，启动服务器。。。（图14）

在开发者电脑上的浏览器访问 （图15）

（配置防火墙端口）（图16）

设置允许多个主机访问 （图17）

在终端输入ipconfig

回车找到IPv4 的地址：192.168.0.102 （图18）

python manage.py runserver 0.0.0.0:8000 （这次启动的时候在后面添加0.0.0.0:8000）。

然后本地网络中的其它计算机就可以在浏览器中访问你的 IP 地址了， （这个网址只能同一个局域网的主机可以访问）

之后就是好好去学习如何写html文件了。。。

一个简单的网页要怎么制作啊???

你可以用Photoshop来制作网页模板，然后用Photoshop的切片工具把模板分割好，点文件→另存为web格式文件就可以把其存储为一个网页，然后需要怎么样加工就要利用到网页设计软件了，如：Dreamweaver

,

Front

page

求一个简单的个人网页html模板

这种模板很多的，百度打开一个网页右键源代码就能找到了。

html xmlns=""headmeta http-equiv="Content-Type" content="text/html; charset=gb2312"

meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"

meta name="apple-mobile-web-app-capable" content="yes"

meta name="apple-mobile-web-app-status-bar-style" content="black"

link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-57.png" sizes="57x57" rel="apple-touch-icon"

link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon"

link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-114.png" sizes="114x114" rel="apple-touch-icon"

title{dede:global.cfg_webname/}/title

meta name="keywords" content="{dede:global.cfg_keywords/}"

meta name="description" content="{dede:global.cfg_description/}"

link href="{dede:global.cfg_templets_skin/}/style/style.css" rel="stylesheet" type="text/css"

script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jquery-1.9.1.js"/script

script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/theme_trust.js"/script

style type="text/css"

html,

body {

margin: 0;

padding: 0;

}

.iw_poi_title {

color: #CC5522;

font-size: 14px;

font-weight: bold;

overflow: hidden;

padding-right: 13px;

white-space: nowrap

}

.iw_poi_content {

font: 12px arial, sans-serif;

overflow: visible;

padding-top: 4px;

white-space: -moz-pre-wrap;

word-wrap: break-word

}

/style

script type="text/javascript" src="{dede:global.cfg_templets_skin/}/main.js"/script

script

jQuery(document).ready(function() {

jQuery('#openSidebar').click(function() {

jQuery('.wrapper').toggleClass('openNav');

});

jQuery('#menu a').click(function() {

jQuery('.wrapper').removeClass('openNav');

});

});

/script

script type="text/javascript" src="{dede:global.cfg_templets_skin/}/api"/scriptscript type="text/javascript" src="{dede:global.cfg_templets_skin/}/getscript"/scriptlink rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/bmap.css"

style type="text/css"

html,

body,

wrapper {

height: 100%;

}

/style

/head

body

div class="wrapper"

div class="sidebar"

div class="clearfix k1120"

div class="navBox" id="openSidebar"

a href="javascript:void(0)" class="navOpen"/a

/div

div id="menu"

ul class="clearfix"

lia href="#home" class="nav_home current"span首页br /bHome/b/span/a

/li

lia href="#services" class="nav_services"span服务范围br /bServices/b/span/a

/li

lia href="#case" class="nav_case"span案例展示br /bCase/b/span/a

/li

lia href="#about" class="nav_about"span关于我们br /bAbout us/b/span/a

/li

lia href="#news" class="nav_news"span新闻动态br /bNews/b/span/a

/li

lia href="#contact" class="nav_contact"span联系我们br /bContact us/b/span/a

/li

/ul

/div

/div

/div

div class="pageMain"

div id="header"

div class="k1120 clearfix"a href="{dede:global.cfg_basehost/}" id="logo"logo/a

/div

/div

div id="home" class="scrol-page"

div class="banner"

div class="b_1" style="background-position: 50% 0px;"

div class="k1120 clearfix"

div class="b_pic"

div class="mac" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/mac.png"

/div

div class="iphone" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/iphone.png"

/div

div class="ipad" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/ipad.png"

/div

/div

div class="b_text" style="margin-top: 0px; opacity: 1;"

{dede:global.cfg_ggg/}

/div

/div

/div

/div

div class="banner"

如何用 Dreamweaver 批量做web网页

1、创建模板页面

最简单的办法是将一个网页另存为模板文件，通过执行命令：File→Save as Template，DreamWeaver会在网站根目录中建立一个模板文件夹——Templates来保存该模板。

当然，也可以新建一个模板：Window→Templates，会出现的Templates面板，单击右下角的New Template按钮，输入文件名，就建立了一个空模板;再单击Open Template按钮打开该模板，保存后自动存放于网站模板文件夹Templates中。

新建、打开的模板页面和普通的网页没什么两样，同样可以加入表格、层、图片、动画、脚本，设置页面属性等。

举例：这里以制作一个模板为例来说明。在该页面中，我们希望左侧的网站标识图和底部的导航图出现在每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。为了保持页面整洁，我们用表格来布置这些元素。

准确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区域。

2、设定可编辑区域

设定模板可编辑区域，一般来说有两种方法。

新建可编辑区域：选择命令：Modify→Template→New Editable Region。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。

标记某一区域为可编辑区域：选择命令：Modify→Template→Mark Selectin as Editable Region。如果某区域已经有一些文字，并且希望在以后新建的超文本文件中部分保留其内容，先选中该区域再执行标记命令即可。

取消可编辑状态：选择命令：Modify→Template→Unmark Editable Region。执行该命令后会弹出一个对话框，其中有当前已有的可编辑区域列表，选中要取消的区域名称，确认即可。

举例：在大片空白区中随便单击一下，执行Modify→Template→New Editable Region命令，在弹出对话框中输入名称：Main;选中左下角本页说明下面的文字，执行Modify→Template→Mark Selectin as Editable Region命令，输入名称：exp。可以看到可编辑区显示为浅蓝色，保存即完成模板制作。

二、使用模板

1、根据模板新建页面

命令：File→New From Template。弹出对话框，从模板列表中选取模板，出现的新页面中除可编辑区外均有淡黄色背景，是不能进行修改的部分。空白的Main编辑区可直接进行插入表格、文字、图片等操作，Exp编辑区保留有原来的文字，修改或重新编辑均可。

2、对一个已经有内容的页面应用模板

命令：Modify→Template→Apply Template to Page。选择模板后还会弹出一个对话框，让您选择现有的孤立内容保存到哪个可编辑区域(Choose Editable Region for Orphaned Content)。要是不想保留则可以选择“(none)”。

举例：我们先新建一个普通页面，输入：“CIW电脑工作室”，执行Modify→Template→Apply Template to Page命令，选择模板test，现有内容保存区域选择Main，确认后可看到页面自动变成了模板页的形式，而“CIW电脑工作室”这一行字就出现在主编辑窗口中。

3、更新模板以全面更新站点

基于某一模板建立了一些页面后，对模板进行修改后保存时，就会自动弹出一个对话框，列出所有使用了该模板的页面，询问是否要更新。

另外一种方法是执行Modify→Template→Update Pages命令。从Update Pages对话框中选择一个站点或站点的某一种模板(同一站点中可以使用多个模板)，单击右侧的Start按钮，软件会自动搜索与模板相关联的网页并进行更新。非常方便!

举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，现在不想要它，同时还想将所有页面中的该图片均删除。就可以打开模板test.dwt，删除该图层，保存模板，单击右侧的“Update”按钮即可。

注意：新建和使用模板前需定义站点。方法是，执行命令：Site→Define Sites;指定站点名称和本地根目录(Local Root)。模板使用的是相对路径，如果没有指定网站在本地的位置，软件就不能准确找到并保存模板文件;并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保存位置的不同而相应变化。

web网页模板简单的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于web页面模板、web网页模板简单的信息别忘了在本站进行查找喔。