设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › 第三节 网页制作流程（附源码）
发新帖
返回列表
3 1051
电梯直达  跳转到指定楼层

[作业] 第三节 网页制作流程（附源码）

发表于 2016-1-9 11:30 | 复制链接 | 打印 | 上一主题 | 下一主题
网页美工设计入门详解 - 第三节 网页制作流程
认真跟着老师的步骤学习完了“第三节 网页制作流程”，对DIV非常不熟悉，DW折腾了一番DIV的浮动，终于算是完成了本次的作业，自我鼓励一下，求点评   

  • 下面附完整的HTML代码（DW新建一个空白的html页面，完全粘贴下面的代码，即可完整查看本次作业喔）
      
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <font color="#8b0000"><style type="text/css">
  7. body {
  8.         margin-top: 0px;
  9.         margin-bottom: 0px;
  10. }
  11. #b_00 {
  12.         height: 2507px;
  13.         width: 1094px;
  14.         margin-top: 0px;
  15.         margin-right: auto;
  16.         margin-bottom: 0px;
  17.         margin-left: auto;
  18. }
  19. #b_01 {
  20.         height: 54px;
  21.         width: 1094px;
  22.         margin-top: 0px;
  23. }
  24. #b_02 {
  25.         height: 59px;
  26.         width: 1094px;
  27. }
  28. #b_03 {
  29.         height: 101px;
  30.         width: 1094px;
  31. }
  32. #b_04 {
  33.         float: left;
  34.         height: 729px;
  35.         width: 307px;
  36. }
  37. #b_05 {
  38.         float: left;
  39.         height: 327px;
  40.         width: 246px;
  41. }
  42. #b_06 {
  43.         float: left;
  44.         height: 327px;
  45.         width: 541px;
  46. }
  47. #b_07 {
  48.         float: left;
  49.         height: 432px;
  50.         width: 787px;
  51. }
  52. #b_080 {
  53.         height: 1023px;
  54.         width: 307px;
  55.         float: none;
  56.         margin-top: -30px;
  57.         clear: left;
  58.         position: relative;
  59. }
  60. #b_09 {
  61.         float: right;
  62.         height: 393px;
  63.         width: 787px;
  64.         margin-top: -1023px;
  65.         position: relative;
  66. }
  67. #b_08 {
  68.         height: 154px;
  69.         width: 307px;
  70. }
  71. #b_12 {
  72.         float: left;
  73.         height: 600px;
  74.         width: 787px;
  75.         position: relative;
  76.         margin-top: -630px;
  77.         margin-left: 307px;
  78. }
  79. #b_14 {
  80.         clear: none;
  81.         height: 146px;
  82.         width: 1094px;
  83.         float: right;
  84.         position: relative;
  85.         margin-left: -1094px;
  86.         margin-top: -30px;
  87. }
  88. #b_10 {
  89.         clear: both;
  90.         height: 269px;
  91.         width: 307px;
  92. }
  93. #b_11 {
  94.         height: 244px;
  95.         width: 307px;
  96. }
  97. #b_13 {
  98.         height: 356px;
  99.         width: auto;
  100. }
  101. #b_15 {
  102.         height: 270px;
  103.         width: 1094px;
  104.         clear: both;
  105. }
  106. #b_16 {
  107.         height: 125px;
  108.         width: 1094px;
  109. }
  110. </style></font>
  111. </head>

  113. <body>
  114. <div id="b_00">
  115.         <div id="b_01"><img src="http://i4.tietuku.com/a7d3f528ece1b4d9.jpg" width="1094" height="54" /></div>
  116.         <div id="b_02"><img src="http://i4.tietuku.com/00334194eb9ac1fb.jpg" width="1094" height="59" /></div>
  117.         <div id="b_03"><img src="http://i4.tietuku.com/81f9e16c1e3b19b4.jpg" width="1094" height="101" /></div>
  118.         <div id="b_04"><img src="http://i4.tietuku.com/ed1d281692f0bd9d.jpg" width="307" height="729" /></div>
  119.         <div id="b_05"><img src="http://i4.tietuku.com/42cf9f8ad0f88ec1.jpg" width="246" height="327" /></div>
  120.         <div id="b_06"><img src="http://i4.tietuku.com/2bf0f9ca4a502e4e.jpg" width="541" height="327" /></div>
  121.         <div id="b_07"><img src="http://i4.tietuku.com/ddbbdbca0052ca7f.jpg" width="787" height="432" /></div>
  122.         <div id="b_080">
  123.                 <div id="b_08"><img src="http://i4.tietuku.com/a338c1f50a1c2d89.jpg" width="307" height="154" /></div>
  124.                 <div id="b_10"><img src="http://i4.tietuku.com/db21be5745eb3a59.jpg" width="307" height="269" /></div>
  125.                 <div id="b_11"><img src="http://i4.tietuku.com/92d10306d5ecf7e1.jpg" width="307" height="244" /></div>
  126.                 <div id="b_13"><img src="http://i4.tietuku.com/d8aea40ad0f520dc.jpg" width="307" height="356" /></div>
  127.         </div>
  128.         <div id="b_09"><img src="http://i4.tietuku.com/74282f0db4ef9121.jpg" width="787" height="393" /></div>
  129.         <div id="b_12"><img src="http://i4.tietuku.com/bc51d1c78b7294e5.jpg" width="787" height="600" /></div>
  130.         <div id="b_14"><img src="http://i4.tietuku.com/e179044407a4d4fd.jpg" width="1094" height="146" /></div>
  131.         <div id="b_15"><img src="http://i4.tietuku.com/2eac3fba410af391.jpg" width="1094" height="270" /></div>
  132.         <div id="b_16"><img src="http://i4.tietuku.com/1ea584b49ec7b419.jpg" width="1094" height="125" /></div>
  133. </div>
  134. </body>
  135. </html>
复制代码
  • 下面的效果图为压缩的图片：
        


本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
举报 使用道具
| 回复

共3个回复 最后回复于 2016-1-25 18:17

yuanxi52028
注册会员
勤币 614   学币 0  
沙发
发表于 2016-1-9 17:54:31 | 只看该作者
不错，看得出学习是很认真的。

代码写得很工整。整体也完成得不错。

还会用绝对路经调用外部图片。赞一个。
举报 使用道具
回复 支持 反对
板凳
发表于 2016-1-9 19:42:27 | 只看该作者
我去。。好厉害的样子，，不明觉厉
举报 使用道具
回复 支持 反对
求学女子
注册会员
勤币 427   学币 0  
地板
发表于 2016-1-25 18:17:15 | 只看该作者
请问作业JPG如何保存这么长的图片，跨页，截图截不全
举报 使用道具
回复 支持 反对
发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表