• 在线
    咨询
  • 关注
    微信
  • 预约
    建站
  • 您所在的位置:首页 > 建站知识 > 网站建设资料 > 正文

    网站建设基础知识3-3:网页内容排版之处理正文区左栏内容

    作者:南昌网络公司 来源: 日期:2015-11-14 10:46:34 人气:94 标签:网站建设 基础知识 网页

    3.处理正文区右栏内容

    1)在id="righttop" div块中插入“本系简介”图片ad_news1.gif,硬回车后(注意检查一下代码,图片前后不要有<p></p>),输入有关本系简介的内容,同时首行首字前使用插入面板“文本”分类中的按钮插入4个半角空格(HTML代码为&nbsp;也可使用快捷键ctrl+shift+space或智能ABC输入法全角状态下的空格)。

    给本系简介文本内容定义CSS样式,使各行内容有一定的间距,同时整段文本距离边界也保留一定的间距。

    id="newsmore" div块中插入图片ad_more.gif,并超链接到xbgk/bxjj.html,另开浏览器窗口打开网页。

    说明:

    ①要在网页中插入图像,也可先插入图像占位符,再用属性面板设置源文件(Src)。在图像的属性面板上:

    l对齐(align):在同一行上对齐图像与文本。

    n默认值:通常指基线对齐。

    n基线:将文本基线与选定对象底部对齐。

    n底部:将文本底部与选定对象底部对齐。

    n顶端:设置文字的顶端与选定对象上部对齐。

    n文本上方:将文本行中最高字符的上部与选定对象的上部对齐。

    n居中:将文本基线与选定对象的中部对齐。

    n绝对居中:将文本中部与选定对象的中部对齐。

    n绝对底部:将文本的绝对底部与选定对象底部对齐。

    n左对齐:将对象置于左边缘,其旁边的文本绕排到右边。如果在一行中左对齐文本(缺省时即是左对齐)先于选定对象,则左对齐文本通常会迫使左对齐对象绕排到新的行中(需输入多行文本才能看出效果!)。

    n右对齐:将对象置于右边缘,其旁边的文本绕排到左边。如果在一行中右对齐文本先于选定对象,则右对齐文本通常会迫使右对齐对象绕排到新的行中。

    l替代(Alt):指定显示在图像位置上的可选文字。当浏览器无法显示图像时(如文本浏览器)显示这些文字。

    l低解析度源(Low Src):指定应在主图像之前载入的图像。常用主图像的2位黑白版本,因为它载入更快。

    l边框(Border):设置围绕图像的边框的宽度。

    l地图(Map):输入图像映射名称,创建客户端图像映射。

    注意:如果设置的宽和高与图像的实际宽度和高度不符,在浏览器中图像可能不能正确显示(要恢复为原始值,单击域标签)。可以改变这些值来缩放图像实例的显示大小,但不能减少下载时间,因为在缩放图像之前,浏览器要下载所有图像数据。调整Flash动画和其他矢量图不会影响图像的显示质量,而调整位图(如 GIFJPEG图像)的大小可能会使其变得粗糙或失真。

    图像插入后,可在Dreamweaver中启动Fireworks程序进行编辑,即先选择图像,再单击属性面板上的“编辑”按钮启动Fireworks程序,并在弹出的“查找源”对话框中根据是否有对应的PNG文件选则“是”或“否”,修改完成后单击“完成”按钮返回Dreamweaver

    ③对图像进行优化:先选择图像,再右击鼠标弹出快捷菜单,并执行“在Fireworks优化”命令。

    ④图像的HTML代码

    <img src="img/ad_news1.gif" width="174"height="28" />

    2)在id=adMenu”的div块中插入项目列表,包含3个列表项目:系部新闻、系部通知、专题建设。再通过定义如下CSS样式使之呈水平排列、不包含圆点列表标志、各个列表项背景呈灰色、列表文字在灰色块中水平和垂直方向均居中对齐。

    #right #rightbottom #adMenu li {

          line-height:21px;

          background-color:#ddd;

          text-align:center;

          width:80px;

          float:left;

          margin-right:10px;

          border-right-width:1px;

          border-left-width:1px;

          border-right-style:solid;

          border-left-style:solid;

          border-right-color:#CCCCCC;

          border-left-color:#CCCCCC;

          list-style-type:none;

    }

    再给各个列表项目加上空连接:<ahref="javascript:;"></a>

    3)让默认的活动选项卡标题(即列表项目)呈红色显示,而其它选项卡标题呈黑色以示区别

    先在“<li><ahref="javascript:;" >系部新闻</a></li>”中给li添加class(类)样式应用代码:class=active”,在“<ahref="javascript:;" >系部通知</a></li>”和“<ahref="javascript:;" >专题建设</a></li>”中添加class=normal”,即:

           <liclass="active" ><a href="javascript:;" >系部新闻</a></li>

           <liclass="normal"><a href="javascript:;" >系部通知</a></li>

           <liclass="normal"><a href="javascript:;" >专题建设</a></li>

    再定义如下CSS样式:

    #right #rightbottom #adMenu .active a {

          font-weight:600;

          color:#FF0000;

          text-decoration:none;

    }

    #right #rightbottom #adMenu .normal a {

          font-weight:500;

          color:#000000;

          text-decoration:none;

    }

    这样,当鼠标移到任一选项卡标题上时,只要通过JavaScript代码使各个列表项的类名.active.normal发生改变,各个选项卡标题的显示效果就会发生相应的改变。JavaScript代码(注意:使用该段代码前,要给各个列表项分别添加id标识adMenu1adMenu2adMenu3)如下:


    <script type="text/javascript">

    function changedisplay(i,m)

    {//m--选项卡中的选项卡(即列表项目)个数,i--第几个选项卡  for(k=1;k<=m;k++)

      {

      document.getElementById("adMenu"+k).className="normal";

      }

       //i个选项卡激活

    document.getElementById("adMenu"+i).className="active";

    }

    </script>


    将上述JavaScript代码放置在<head></head>标签之间。再给各个列表项的<a>标签添加调用代码:onmouseover="changedisplay(1,3)"等,即:

    <ahref="javascript:;" onmouseover="changedisplay(1,3)">系部新闻</a>

    <a href="javascript:;"onmouseover="changedisplay(2,3)" >系部通知</a>

    <ahref="javascript:;" onmouseover="changedisplay(3,3)" >专题建设</a>

    说明:

    ①虽然JavaScript代码可放置在网页中的任意位置,但将编成函数的代码放置在<head></head>标签之间可便于查找和更新,建议一开始使用JavaScript代码就养成这种良好的习惯。

    JavaScript函数必须在代码中调用才能起作用,即使用“事件过程”方法:当某个事件发生时调用相应的函数过程。

    document.getElementById用来根据标签的id标识访问对应的元素,要注意大小写的区别。

    4)让对应于某个活动选项卡的内容框显示出来

    继续在上述JavaScript代码增加代码,最终代码如下:


    <scripttype="text/javascript">

    functionchangedisplay(i,m)

    {//m--选项卡中的选项卡(即列表项目)个数,i--第几个选项卡


     for(k=1;k<=m;k++)

      {

       document.getElementById("adMenu"+k).className="normal";

       document.getElementById("adList"+k).style.display="none";

      }


       //i个选项卡标题激活

     document.getElementById("adMenu"+i).className="active";

     document.getElementById("adList"+i).style.display="block";

    }

    </script>

    5)在id=adList1”、id=adList2”、id=adList3”的div块中增加多个标题(还可包括发布日期等),可采用项目列表方法进行,例如:

          <ul>

           <li>我系成功举办“今非曦比”校园个人演唱会<span>2008.6.2</span></li>

           <li>毕业生交流座谈会<span>2008.5.21</span></li>

           <li>我系在院第九届运动会中取得优异成绩<span>2008.5.14</span></li>

           <li>院“大学生标兵”评比揭晓<span>2007.10.10</span></li>

           <li>校运会传佳捷<span>2007.9.25</span></li>

          </ul>

    并定义CSS样式如下:

    #right #rightbottom #adContent li {

          line-height:20px;

          margin-left:25px;

          border-bottom-width:1px;

          border-bottom-style:dashed;

          border-bottom-color:#CCCCCC;

          list-style-position:outside;

          list-style-image:url(img/arrow.gif);

          list-style-type:none;

    }

    #right #rightbottom #adContent span {

          text-align:left;

          width:100px;

          float:right;

          margin-top:-20px;

    }

    说明:

    ①在使用标签选择器选择li标签定义CSS样式时,在“新建CSS规则”对话框中出现的是#right #rightbottom#adContent #adList1 li#right #rightbottom #adContent #adList2 li#right #rightbottom #adContent#adList3 li,如果3个选项卡的内容显示效果均一样,则无需定义3个,故只需删除特定的样式名后定义1次即可,上述样式定义中已删除了#adList1#adList2#adList3



    ②如果显示的内容中包括多个列,建议采用表格排版。

    6)按照id=righttop”的div块中制作“更多”效果的方法,给“系部新闻”和“系部通知”选项卡增加“更多”效果,分别超链接到newsmore1.aspnewsmore2.asp


    相关阅读
    • 没有资料
    网站建设资料

    联系我们

    联系地址:南昌市北京西路437号江西师范大学

    联系电话:0791-88626667

    客户经理:+(86)139 0709 1599(邓经理)

    客户QQ:8675405(ca88.com)  14967782(ca88.com)

    技术QQ:707917799(ca88.com)

    关注我们

    我们的成功离不开各位朋友的关注,通过以下方式可以关注我们!

    南昌ca88.com网络

    • 版权所有:南昌ca88.com网络官方网站
    • 网站备案:赣ICP备13008082号-4
    • 站长统计:
    <友情连结> 西安木牛能源技术服务有限公司/ 无锡市明杨新能源有限公司/ 云端科技官网/ MidiBuddy/ 新浪博客/