第三节网页制作流程

登录

本帖最后由念安于 2015-12-6 06:16 编辑

说说：记得学图的时候也是这样，稍有问题就想推翻重新做。代码也是一样，一有不对，就急着想重新做，这样不好不好。

这次作业拖了很长时间，主要是有几个问题不知道怎么下手，于是一拖再拖～

问题：

作业的图片，开始切片的时候我是尽量把空白的地方留下不切，但是这样的问题就是排版的时候乱了，后来我参考了其他同学的，就把空白的也一块切了，瞬间感觉简单多了，不知道空白部分是不是要切？
我预览的时候发现图片左边有黑色边框，想请问一下是什么原因？
一直纠结，切片的时候到底哪些要切哪些不该切，还望老师指点一下哈，谢谢。

上图：

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 18px;
      margin:  0px auto;
}
#box {
      width: 1097px;
      margin:  0px auto;
}
#box_1 {
      height: 219px;
      width: 1097px;
}
#box_2 {
      float: left;
      height: 1746px;
      width: 308px;
}
#box_3 {
      float: left;
      height: 322px;
      width: 789px;
}
#box_4 {
      float: left;
      height: 444px;
      width: 789px;
}
#box_5 {
      float: left;
      height: 596px;
      width: 789px;
}
#box_6 {
      height: 153px;
      width: 1097px;
      float: left;
}
#box_7 {
      height: 212px;
      width: 1097px;
      float: left;
}
#box_8 {
      height: 180px;
      width: 1097px;
      float: left;
}
</style>
</head>

<body>
<div id="box">
<div id="box_1"><img src="images/11_01.gif" width="1097" height="58" /><img src="images/11_02.gif" width="1097" height="60" /><img src="images/11_03.gif" width="1097" height="43" /><img src="images/11_04.gif" width="1097" height="58" /></p>
</div>
<div id="box_2"><img src="images/11_05.gif" width="308" height="728" /><img src="images/11_10.gif" width="308" height="154" /><img src="images/11_12.gif" width="308" height="268" /><img src="images/11_13.gif" width="308" height="237" /><img src="images/11_15.gif" width="308" height="359" /></div>
<div id="box_3"><img src="images/11_06.gif" width="776" height="322" /></div>
<div id="box_4"><img src="images/11_08.gif" width="754" height="443" /></div>
<div id="box_5"><img src="images/11_11.gif" width="789" height="401" /><img src="images/11_14.gif" width="789" height="580" /></div>
<div id="box_6"><img src="images/11_16.gif" width="1097" height="153" /></div>
<div id="box_7"><img src="images/11_17.gif" width="1097" height="212" /></div>
<div id="box_8"><img src="images/11_18.gif" width="1097" height="179" /></div>
<div id="box">
</body>
</html>

yuanxi52028 · 发表于 2015-12-7 18:32:00

从初级开始建议白色还是切吧，不切的话会产生很多代码，对于初级来讲可能一下消化不了。
后期学院会上中级、高级的切片课程，初级这些掌握了，中级高级也就好理解了。

黑色边框是效果图片本身有，学员可以自行裁剪掉。

目前初级课程是以块为例来切片，没有过于复杂的代码，让学员更容易理解切片的原理。

等待新的课程上线吧！会讲到更专业的html与css样式。
html包括div ul li dt dl dd table tr td ......，css包括padding margin background border width height ......，各种标签和属性的运用。

念安 · 发表于 2015-12-7 22:12:32

yuanxi52028 发表于 2015-12-7 18:32
从初级开始建议白色还是切吧，不切的话会产生很多代码，对于初级来讲可能一下消化不了。
后期学院会上中级 ...

嗯嗯，好的。
谢谢你，这样子我就不纠结了哈。

[作业] 第三节网页制作流程

本帖子中包含更多资源

共2个回复最后回复于 2015-12-7 22:12

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 第三节 网页制作流程

本帖子中包含更多资源

共2个回复 最后回复于 2015-12-7 22:12

[作业] 第三节网页制作流程

共2个回复最后回复于 2015-12-7 22:12