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

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

大学生网页设计模板
爱建网为大家准备了关于大学生网页设计模板的文章中面收集了五十多篇关于好
大学生网页设计模板希望可以帮助大家。更多关于大学生网页设计楼板内容请关注爱建网
篇一:用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="data: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="data:images/banner.jpg" /></div>
<div class="teance"><div class="nie"><ul><li class="chun"><a href="#"><img src="data:images/chun.jpg" /></a><P>我欠他一条命，我要还清欠他的。</P></li><li class="kun"><a href="#"><img src="data:images/kun.jpg" /></a><P>她和别的海豚不一样、太聪明了。</P></li><li class="qiu"><a href="#"><img src="data: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;}

效果：

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

web前端期末大作业绿色环境保护(4个页面) HTML5网站模板农业展示网站 html5网页制作代码 html5网页设计作业代码 html制作网页案例代码
HTML5期末大作业：橙色精美零食网站设计——橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:橙色精美零食网站设计--橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学 ...
HTML5期末大作业：商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材 ...
div+css静态网页设计web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码
web网页设计实例作业 --中国风的茶文化(4页) web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
HTML+CSS大作业——电影动漫言叶之庭(4页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:电影网站设计--电影动漫言叶之庭(4页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学校. ...
web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码
web网页设计实例作业 --中国风的茶文化(4页) web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
HTML5期末大作业：关于旅游网站设计——天津旅游(11页) 简单个人网页设计作业静态HTML个人博客主页 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页设计作业
HTML5期末大作业:旅游网站设计--天津旅游(11页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页设计源码HT ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
HTML5期末大作业：商城网站设计——仿团购商城(1页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamwe
HTML5期末大作业:商城网站设计--仿团购商城(1页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamwe ...
期末作业代码网页设计代码——优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载静态HTML购物商城网页制作下载_网页设计代码
HTML5期末大作业:大学生购物商城网站设计--优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载静态HTML购物商城网页制作下载_网页设计代码常见网页设计作业题材有个人. 美食. ...

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

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

最新文章

热门文章