大学生期末网页制作代码以及网页设计排版技巧

2022-06-02 11:27:30 - 技术课堂 - 作者: 爱建素材网已有人围观

来源：爱建素材网

首先一个网页看起来是不是高端设计的就得看排版，一般先有设计图才可以进行下一步（编辑代码），先把设计图给排版出来（设计稿要是png格式），然后进行整个设计再分割出整个网站所需的版块，比如logo、banner图等等....

大学生网页设计模板www.jianwe b.com
大学生网页设计模板
爱建网为大家准备了关于大学生网页设计模板的文章中面收集了五十多篇关于好
大学生网页设计模板希望可以帮助大家。更多关于大学生网页设计楼板内容请关注
爱建网。
篇一:用Dreamweaver制作网页模板
用DreamweaverCS4制作网页模板
- .制作模板
(1)在硬盘上创建一个模板网页的文件来，然后再该文件中新建一个名为 images的文
件突，并将所需要图片复制倒该文件中。
(2)打开Dremwesver（DW）,创建一个HTML网页
(3)执行菜单中的文件/另存为“模板”命令，在弹出的另存模板”对话框中设置参数单击保
存按钮，则模板文件被保存在站点的Templtes文件文中，文件扩展名为1.dwt。
(4)由模板生成的网页哪些地方可以编辑，是需要预先设定的。下面设
定"arigator和content两个可编辑区域。
(5)单击插入栏常用"类别中的何编辑区域按钮，然后再弹出的新建可编辑区城对话
柜中输入名称，单击确定按钮，同理，制作content可编叫区域，
(6)按 (CHl+S) 组合键保存模板。
二、应用模板
(1)执行菜单中的文件/新建审令。新建一个HTML网页。然后将其保存为iderebtmle
(2)进去”资源“面板，单击(模板)按钮，然后选中刚才建立的网页，单击”应用按钮。模
板就被应用到了新的网页中。
(3)更新模板当模板进行了收改了以后，按CHl+S组合键保存模板，出现所示的更新界
面“对话框。这样会大大提高工作效率。
三。模板始设计者带来的好处。
模板是在DreamweverCSt中提供的一一种机制，他能够帮助我们快速制作出一系列具有
相间风格的网页。制作模板和制作普通网页相问，只是不把网页的所有部分部制作完成，
而是只把导航栏和标题栏等各个网页共有部分制作出来作为模板中的不可骗辑区域。把中
间部分作为可编辑区域来放置网贞的具体内容。

下面我给大家展示我自己设计以及编程的一个静态模板“大鱼海棠”

首页html:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>大鱼海棠</title>
<link rel="stylesheet" href="style/style.css" />
</head>





<body>

<div class="hear">
        <div class="logo"><img src="images/logo.png" /></div>
        <div class="sou">
        
                 <form class="searchform"  method="get" target="_blank">
                  <input name="keywords" class="search-input" placeholder="请输入您要搜索的剧情...">
                </form>
               
            
        </div>
        <div class="login"><a href="#">登录/注册</a></div>
        
        
        

</div>
<div class="nev">
        <ul>
              <li><a href="index.html">首页</a></li>
              <li><a href="jianjie.html">剧情简介</a></li>
              <li><a href="renwu.html">人物介绍</a></li>
              <li><a href="taici.html">经典台词</a></li>
              <li><a href="liuyan.html">留言贴贴</a></li>
        </ul>
</div>
<div class="banner"> <img src="images/banner.jpg" /></div>
<div class="teance">
   
   <div class="nie">
       <ul>
        <li class="chun">
               <a href="#"><img src="images/chun.jpg" /></a>
               <P>我欠他一条命，我要还清欠他的。</P>
               
        </li>
        <li class="kun">
               <a href="#"><img src="images/kun.jpg" /></a>
               <P>她和别的海豚不一样、太聪明了。</P>
        </li>
        <li class="qiu">
               <a href="#"><img src="images/qiu.jpg" /></a>
               <P>我会化作人间的风雨、陪伴你的。</P>
        </li>
       </ul> 
        
   </div>
   <div class="texe">
        <div class="left">
            <h3>大鱼海棠经典台词</h3>
            <p>　　1、你遇见一个人，犯了一个错，你想弥补想还清，到最后才发现你根本无力回天，犯下的罪过永远无法弥补。我们永远无法还清欠下的…只要错了，就是错了永远无法弥补。</p>
            <p>　　2、“人要是死了，就看不见这么美的天空了。”湫望着漫天的星星自言自语。</p>
            <p>　　3、所有活着的人类，都是海里一条巨大的鱼；出生的时候他们从海的此岸出发……他们的生命就像横越大海，有时相遇，有时分开……死的时候，他们便到了岸，各去各的世界。</p>
            <p>　　4、“我记得他的样子，我不知道他的名字，我记得他的眼神，还有他额头上的疤”“我找的六个钟头，整整一个晚上。”椿来到一条白色的小鱼面前。她望着小鱼，小鱼闭着眼，安静的睡着。</p>
            <p>　　5、我们既不是人，也不是神，我们只是其他人。</p>
            <p>　　6、我们永远也偿还不清自己所欠下的。</p>
            <p>　　7、人生是一场旅程。我们经历了几次轮回，才换来这个旅程。而这个旅程很短，因此不妨大胆一些，不妨大胆一些去爱一个人，去攀一座山，去追一个梦……有很多事我都不明白。但我相信一件事。上天让我们来到这个世上，就是为了让我们创造奇迹。</p>
        </div>  
             
       
             <div class="right">
             <h3>椿还鲲命、谁还湫情！</h3>
             <P>湫是这部剧里面最深情的人了吧？</P>
             
               <video class="pian"    controls autoplay>
                          <source src="video/qiu.mp4" />
                </video>
             </div>
   </div>
</div>
<div class="bottom"><P>Copyright © 2012-2038 大鱼海棠 版权所有</P></div>


</body>
</html>

样式：

html {
	margin: 0px 0px 0px 0px; padding:0; font-family:"Microsoft YaHei",微软雅黑; color:#666666; font-size:14px;
}
body{ margin:0; padding:0; }
a{text-decoration:none;}
.hear{ width:1200px; height:80px; margin:0 auto; }
.hear .logo{ float:left; width:200px; height:80px; padding:10px; }
.hear .sou{ width:220px; height:80px; float:left;margin-left:300px; }
.hear .login{width:220px; height:80px; float:right; color:#F00; line-height:80px; text-align:center;}
.hear .login a{color:#F00;}
.hear .sou input{ width:200px; height:30px; color:#00F; float:left;  margin:20px;}
.nev{ width:1200px; height:40px; margin:0 auto; background-color:#522917;}

.nev ul li{ float:left;  line-height:40px; margin-left:80px;  list-style:none;  }
.nev ul li a{text-decoration:none; color:#FFF; }
.nev ul li a:hover{color:#CCC;}
.banner{width:1200px; height:470px; margin:0 auto;}
.banner img{ width:1200px; height:470px;}
.teance{width:1200px; height:860px; margin:0 auto; background-color:#802916;}
.teance .nie{ width:1100px; height:373px; margin:0 auto; padding:20px; }
.teance .nie ul li{ float:left; width:335px; height:355px; margin-left:15px; list-style:none; }
.teance .nie ul li img{width:180px; height:300px; margin-left:63px; }
.teance .nie h2{ color:#FFF;}
.teance .nie h4{ color:#FFF;}
.teance .nie ul li p{ text-align:center; color:#FFF;}
.teance .texe .left{ width:550px; height:422px;  border-right:10px #960 solid; float:left}
.teance .texe .left img{ width:550px; height:350px;}
.teance .texe{ width:1100px; height:420px; margin:0 auto; border:10px #960 solid; }
.teance .texe h3{padding:5px; color:#CCC;}
.teance .texe p{ padding:3px; color:#CCC; font-size:6px;}
.teance .texe .right{ width:510px; height:400px; float:right;}
.teance .texe .right img{width:500px; height:350px;}

.teance .texe  .pian{ width:500px; height:280px; margin-right:12px; }
.bottom{ width:1200px; height:20px; background-color:#522917; margin:0 auto;}
.bottom p{ text-align:center; line-height:20px; font-size:12px; color:#999;}


.xia{ width:1200px; height:380px; margin:0 auto; background-color:#802916;}
.xia .son{ width:360px; margin:0 auto; color:#fff; padding-top:10px;}

效果：