班级网站建设html制作模版（班级网站设计与制作）
本篇文章给大家谈谈班级网站建设html制作模版，以及班级网站设计与制作对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
制作一个简单的index.html网页
实现的方法和详细的操作步骤如下：
1、第一步，右键单击计算机桌面上的空白区域以创建一个新的“文本文档”，如下图所示，然后进入下一步。
2、其次，完成上述步骤后，输入要在新创建的文本文档中显示的内容，如下图所示，然后进入下一步。
3、接着，完成上述步骤后，返回桌面，将文本文档的名称和后缀更改为“
index.html”，如下图所示，然后进入下一步。
4、然后，完成上述步骤后，该文件的默认“打开方式”将成为浏览器，双击“index.html”文件，如下图所示，然后进入下一步。
5、最后，完成上述步骤后，就打开了刚创建的“index.html”文件了，如下图所示。这样，问题就解决了。
网页设计模板？
！
1. Piroll - 免费的HTML PSD网站模板，用于作品集网站设计
免费下载
Piroll - 免费的HTML PSD网站模板
Piroll是一个免费的PSD网站设计模板，可用于机构或个人作品集网站的设计，该模板功能齐全，充满灵活性，可以很好的进行再设计。该模板的设计师是来自纽约的UI设计师Svetlana。
特征：
最轻量和现代的外观
5个PSD样本页面
用于创建MVP的结构层
2. Cesis Creative Agency -免费网站PSD模板
免费下载
Cesis Creative Agency -免费网站PSD模板
Cesis创意PSD模板由设计师Tranmautritam制作的，他是ThemeForest史上最畅销的PSD模板作家。该模板的适用群体包含：代理商，设计师，自由撰稿人，博主和艺术家。主要页面包括：主页，关于页面，联系人，错误404，全屏菜单，注册，列表博客，单一博客，作品集，单一作品集，服务页面。
特征：
极简主义
创意的布局
鲜艳的颜色
11个预览图像文件
11个PSD文件
3. MoGo -为机构提供的免费单页PSD网站模板
免费下载
MoGo -为机构提供的免费单页PSD网站模板
Mogo是由设计师Alexandr Karsakov在Photoshop中构建的单页网站模板，该模板仅在freebiesbug.com上发布。它包含许多有用的组件，可帮助你快速构建站点。
特征：
干净而现代的设计
包括用户评价轮播
包括作品集缩略图和其他小部件
4. Avenue Fashion -免费的PSD电子商务网站模板
关于html页面制作
制作的网页：
整体思路：
先布局再CSS控制
骨架搭好了，初始化样式，
后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及
对外部样式表的引入
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片
的宽，那么这里背景图片设置的有意思吗？不设置效果一样呀！！
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么
先分清楚哪些是同级目录文件
我现在在操作首页实战.html，里面有图片1的路径，从上面可以看出首页实战.html和img文件夹为同级的目录，则路径应该写为:img/1.jpg
效果图
!DOCTYPEhtml
html
head
metacharset="UTF-8"
title/title
styletype="text/css"
#container{
width:1002px;
background-color:gray;
}
#header{
height:120px;
background-color: aquamarine;
}
#main{
height: 600px;
background: darkgoldenrod;
}
#footer{
height: 120px;
background: yellowgreen;
}
#main-left{
float: left;
background: yellow;
width: 700px;
height: 100%;
}
#main-right{
float: right;
background: pink;
width: 302px;
height:100% ;
}
/style
/head
body
divid="container"
divid="header"/div
divid="main"
divid="main-left"/div
divid="main-right"/div
/div
divid="footer"/div
/div
/body
/html
注意：这里对id为main的div里面的子div
main-left和main-right设置浮动样式时，要设置宽和高不然不起作用(起单独一个宽或者高也不起作用，这里的背景颜色只是父div的背景颜色)。可能的原因是div里面没内容，没长和宽，自然不会显示背景颜色
3、当一个div包含两个左右浮动的div并且后面接个普通的div时
div id="main"
div id="lside"
/div
div id="rside"
/div
/div
div id=”footer”
/div
因为两个浮动的div浮在水面上，但是父div(即id为main的div)没有高度所以没把父div撑开。Footer的div会在水平面上，所以加背景颜色和height后可以看到此div在这两个浮动div下面，要使footer的div呈现在下面并且不被覆盖，
第一种方法：给main的div加height：800px；让他撑开
第二种方法：在两个浮动div后面加上一个class为cl的div，样式为clear：both；
网页制作的初步完成：
Html代码：
!DOCTYPEhtml
html
head
metacharset="UTF-8"
title/title
linkrel="stylesheet"type="text/css"href="css/reset.css"/
linkrel="stylesheet"href="css/首页实战-2.css"/
/head
body
divid="container" !--div#container--
divid="header" !--div#header+div#main+div#footer--
imgsrc="img/logo.jpg"alt=""id="logo"/
ulid="nav"
liahref="#"导航1/a/li
!--li*7a{导航$}--
liahref="#"导航2/a/li
liahref="#"导航3/a/li
liahref="#"导航4/a/li
liahref="#"导航5/a/li
liahref="#"导航6/a/li
liahref="#"导航7/a/li
/ul
/div
imgsrc="img/about_banner.jpg"alt=""id="banner"/
divid="main"
divid="lside"
divclass="d9d30601fd23da58 subtitle"
imgsrc="img/circle.gif"/
h1核心业务/h1
ahref=""MORE/a
/div
divclass="0601fd23da58d2ce four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul !--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="fd23da58d2cefc8d four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul !--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="9e6741248fc07175 four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul !--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="41248fc07175c0c1 four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul !--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
/div
divid="rside"
divclass="8fc07175c0c1b457 subtitle"
imgsrc="img/circle.gif"/
h1文章观点/h1
ahref=""MORE/a
/div
ulid="art" !--ul#navli*7{文章$}--
liahref="#"这是一篇好文章1/a/li
!--li*5a{这是一篇好文章$}--
liahref="#"这是一篇好文章2/a/li
liahref="#"这是一篇好文章3/a/li
liahref="#"这是一篇好文章4/a/li
liahref="#"这是一篇好文章5/a/li
/ul
divclass="7175c0c1b457007b subtitle"
imgsrc="img/circle.gif"/
h1联系我们/h1
ahref=""MORE/a
/div
divid="contact"
/div
/div
/div
divid="footer"
ul !--ulli*7a{联系我们} --
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
/ul
address©2006-2009 北京市灵犀慧通科技有限公司版权所有
京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict/address
/div
/div
/body
/html
样式代码：
#container {
margin: 0 auto;
width: 1002px;
}
#header {
height: 128px;
background: gray url(../img/top_bg.jpg)no-repeat;
}
#nav li {
float: left;
/*1、让导航横向*/
/*background: purple; */
/*2、将导航撑开*/
width: 90px;
margin-right: 1px;
}
#nav a {
font-size: 16px;
font-family: "微软雅黑";
color: #363636;
/*8、文字颜色*/
display: block;
/*5、鼠标移动上去后背景颜色局限在a标签内容中*/
height: 37px;
/*6、这些高度都有规定的*/
width: 90px;
text-align: center;
/*7 、让文字居中*/
}
#nav a:hover {
/*3、鼠标放上来后变的样式*/
color: white;
background: url(../img/nav_on.gif);
/*4、鼠标移动后的背景颜色*/
}
#banner{
margin: 10px 0;
}
#main{
/*height: 800px; */ /* 9、撑开*/
}
.subtitle{
height: 37px;
background: url(../img/index_main_top_bg.gif); /*14对原先设置的背景颜色进行更改*/
}
.subtitle img{
float: left;
/*10将初始化的图片左浮动*/
margin: 5px 0 0 10px;
/*11对图片进行微调*/
}
.subtitle h1{
float:left;
font-size: 16px;
/*12对标题中字体进行设置*/
font-family: "微软雅黑",simhei,sans-serif;
margin-left:10px;
}
.subtitle a{
float: right;
font-size: 12px;
/*13对超链接进行微调*/
color: gray;
}
.four{
width: 326px;
height: 200px;
background: #EEE; /*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/
float: left;
margin: 10px;
}
.four h2{
font-size: 16px;
font-family: "微软雅黑";
margin: 6px 0 6px 10px;
/*16将h2标题做做修改*/
}
.four img{
float: left; /*11、让class为four标签的img左浮动*/
margin-left: 10px;
/*15图片背后有背景颜色为白色*/
padding: 6px;
background: white;
}
.four ul{
float: left;
margin-left: 10px;
}
.four li{
background: url(../img/service_intro_bg.gif)no-repeat; /*16标签前面的小黑点*/
padding-left: 10px;
/*17小黑点在字的下面*/
height: 20px;
}
.four a{
color: gray; /*18a标签的颜色*/
}
#lside{
height: 480px;
width: 694px;
border: 1px solid #EEE;
float: left; /*8、让左右两个div并列一起*/
/*background: cornflowerblue;*/ /*这里设置是来区分9*/ /*19删除背景图*/
border-top: none;
}
#rside{
/*height: 600px;*/
width: 294px;
/*border:1px solid gray;*/
float: right; /*让左右两个div并列一起*/
/*background: greenyellow; */ /*这是一整个大的div到后面设置的话这个要去掉了*/
}
#art{
background: #EEE;
margin-top: 1px;
padding-top:10px;
}
#art a{
display: block;
background: url(../img/article_head.gif)no-repeat;
height: 29px;
padding-left: 30px;
}
#art a:hover{
background: url(../img/article_on_bg.gif); /*鼠标移动到文章标题后的背景*/
}
#contact{
margin-top: 1px;
height: 250px;
background: #EEE;
}
#footer{
height: 120px;
/*background: gray;*/
clear:both; /* 9、撑开*/
margin-top: 20px;
}
#footer ul{
height: 40px;
background: #EEE;
}
#footer li{
float: left;
margin-top: 15px;
margin-right: 10px;
}
#footer address{
font-family: "微软雅黑",sans-serif;
font-size:10px;
margin-top: 15px;
}
学校期末作业，要做一个html网站。
如果是纯静态网页的话，比较简单，两种方法：
根据自己学的知识，设计框架，填充内容（一般比较粗糙）；
比如在网上看到效果好的页面，也可以扒下来，网页另存为就行，修改成你自己的内容或者名称，另存为只是一个页面，还不能称为网站，这时，可以多存几个页面，添加在导航栏中。
扒虽好，毕竟还是别人的，专业做设计的，还是要多发挥自己的灵感，杜绝抄袭。
楼主如果对网站建设感兴趣，抓住好在学校学习的机会，等你工作的时候，就知道我说的用处了~~
如何做一个班级网站？
怎么做一个关于班级滴网站建设吖？
一般的班级网站数据库设计有:
1.用户数据表
2.留言信息表
3.相册数据表
4.公告数据表
5.统计数据表有问题可以
班级网站建设html制作模版的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于班级网站设计与制作、班级网站建设html制作模版的信息别忘了在本站进行查找喔。
-
上一篇
网站建设规划书（网站建设规划书总结） -
下一篇
包含软件开发发票明细的词条
