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

    网站建设基础知识3-2:网页内容排版【任务实现】处理页头内容

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

    Dreamweaver设计视图中打开上一章所创建的电子系网站主页index.html

    1)将光标定位于id=header”的div块中,单击插入面板“常用”分类中的按钮,插入网站的标志动画,即一幅Flash动画dzx.swf,并使用属性面板可调整动画大小和相关属性。由于在文档编辑状态下无法播放Flash动画,故在插入的位置上只显示一个灰色的Flash对象占位符。

    说明:

    ①设置Flash动画的属性通过属性面板进行,其中:

    lID:用于给Flash动画命名。

    l宽、高:指设置Flash动画的宽度和高度,默认单位为像素。

    l文件:指Flash动画的路径。

    l编辑:打开Flash软件对动画进行修改。

    l重设大小:当改变了动画的大小后,可还原成原始大小。

    l垂直边距、水平边距:指Flash动画距周围元素的间距。

    l对齐:指Flash动画与周围元素之间的对齐方式。

    l比例:指Flash动画缩放后是否保持原来的宽高比。其中:

    n默认:显示全部,若缩放后未保持原来的宽高比,则剩余部分为黑色

    n无边框:不显示边框,并保持原来的宽高比

    n严格匹配:按实际比例整体缩放,而不管原来的宽高比,可能会使动画变形。

    l品质Flash动画播放期间控制抗失真。设置越高,Flash动画的观看效果就越好。“低品质”:更看重速度而非外观,“高品质”:更看重外观而非速度。

    l背景颜色指定Flash动画区域的背景颜色。

    l自动播放、循环:指在浏览器中打开网页时是否让Flash动画自动播放或循环播放。

    l播放:在设计视图下模拟播放Flash动画。

    l参数:用于给Flash动画添加可选参数,如可设置背景透明:<paramname="wmode" value="transparent">

    ②动画的HTML代码

    <objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="760" height="120">

       <param name="movie"value="img/dzx.swf" />

       <param name="quality" value="high"/><param name="SCALE" value="exactfit" />

       <embed src="img/dzx.swf"width="760" height="120" quality="high"pluginspage="http://www.macromedia.com/go/getflashplayer"type="application/x-shockwave-flash"scale="exactfit"></embed>

     </object>

    2)将光标定位于id=nav1”导航栏的“date1div块中,单击插入面板“常用”分类中的按钮,插入当前日期和星期。

    说明:

    在插入时,若复选“储存时自动更新”,则可以用来记录当前文档的最后更新日期。

    3)在id=nav1”导航栏的“titlediv块中插入项目列表,包含9个列表项目:院主页、首页、系部概况、教学管理、继续教育、支部工作、技术服务、精品课程、网上留言。再通过定义如下CSS样式使之呈水平排列、不包含圆点列表标志、列表文字水平和垂直方向均居中对齐。

    #nav1 #title li {

          line-height:24px;

          text-align:center;

          width:58px;

          float:left;

          margin-top:5px;

          list-style-type:none;

    }

    说明:

    ①列表分为两种类型:项目列表(即无序列表)编号列表(即有序列表)。前者用项目符号(环形、球形、矩形)来标记无序的项目,而后者用编号来记录项目的顺序(可指定编号类型和起始编号)。

    ②创建列表的方法

    将现有若干段落转换为列表:先选中这些段落,再点击属性面板上的列表按钮进行列表。

    在输入文字时创建列表:先点击属性面板上的列表按钮,再输入各段文字(最后一个列表项需按2次回车)。

    注意:每个列表项为一个单独段落。

    ③创建多级(即嵌套)列表的方法

    先创建外层列表,再将插入点放置到列表中希望嵌套的更深级别的行中(如果有多行希望嵌套,可以选中这些行),然后单击属性面板上的文本缩进按钮(如果希望将更深级别的项目列表提高级别,需先选中这些行,再单击文本凸出按钮)。

    ④设置项目列表属性

    通过设置项目列表的属性,可以改变项目列表的类型。步骤是:先将插入点放到要设置属性的列表中的任意位置或选中之,然后右击鼠标在快捷菜单中选“列表/属性”,并在弹出的列表属性对话框中从“列表类型”下拉列表框中选择列表类型(“新建样式”用于指定从插入点所在行及其以后行的列表样式)。

    HTML代码

    无序列表:

    <ul>

     <li>aaa</li>

     <li>bbb</li>

     <li>ccc</li>

    </ul>

    有序列表:

    <ol>

     <li>aaa</li>

     <li>bbb</li>

     <li>ccc</li>

    </ol>

    4使用属性面板上的链接域或插入面版常用分类中的给上述各个列表项目加上超链接其中院主页链接到http://www.tzpc.edu.cn/系主页链接到index.html其余各个列表项目暂时链接到#”(即空链接。再直接给超链接a定义标签样式如下

    a {

          color:#000000;

          text-decoration:none;

    }

    说明:

    ①上述定义的超链接标签样式适用于当前网页上所有的超链接。如果想让定义的样式只适用于当前div块中的超链接,则必须使用标记选择器先选择好标签,再定义样式。

    ②创建超链接时,默认情况下被链接文档的载入位置为当前浏览器窗口或框架,即Target(目标)为_self,其它选项包括_blank:被链接文档载入到新的未命名浏览器窗口,_parent:将被链接文档载入到父框架集或包含该链接的框架窗口,_top:被链接文档载入到整个浏览器窗口并删除所有框架。

    ③创建超链接还可使用属性面板链接域右边的指向文件图标“#”(Point-to-File)进行。使用它,可方便快捷地创建指向站点中另一文件或另一个打开文档中命名锚记的链接。注意:使用此方法需同时打开文档窗口和站点窗口。或平铺两个文档。

    ④创建空链接:有时在网页中放置链接标题时,被链接文档还没有确定,此时可暂时给其添加一个空链接,即直接在属性面板的链接域中输入:#javascript:;。两者的区别是:

    #:当用户在浏览器中单击该链接时将会跳转到页面顶部。

    Javascript:; :当用户在浏览器中单击该链接时仍停留在原位置。

    ⑤设置锚记和创建锚记链接

    命名锚记(简称锚记)是指文档中设置的位置标记,并给该位置一个名称以便引用。通过锚记,可使链接指向当前文档或不同文档中的指定位置。锚记常用来跳转到特定的主题或文档的顶部,加快信息检索速度。

    设置锚记:光标置于文档窗口想要设置锚记的位置后,点击插入面板“常用”分类中的“命名锚记”按钮。

    创建锚记链接:在属性面板的链接域,输入一个号码符号(#)和锚记名。

    例如:要链接到当前文档中称为“top”的锚记,输入“#top”;要链接到同一文件夹不同文档filenamehtm中称为"top”的锚记,输入:“filenamehtmtop”。

    技巧:也可以使用指向文件图标“#”在同一文档或不同文档(需平铺2文档)中创建锚记链接。

    ⑥超链接的HTML代码

    <ahref="index.html">系主页</a>

    <ahref="index.html#top">系主页</a>

    <a href=" javascript:;">系主页</a>

    5)继续定义CSS样式,使得当鼠标移到上述各个超链接文本上时背景呈现块状的橙色效果:先使用标记选择器选择好任一超链接标签,打开“新建CSS规则”对话框并在a后加上“:hover”,表示“鼠标移到超链接文本上”:


    定义的CSS样式如下:

    #nav1 #title a:hover {

          background-color:#FF6600;

          display:block;

    }

    6)在id=nav2”欢迎条的div块中插入“欢迎光临电子系网站!”字样,并转到代码视图中,在其前后插入marquee标签对,即:

    <marquee>欢迎光临电子系网站!</marquee>

    选中该marquee标签,使用功能面板“标签检查器”设置其相关属性,使欢迎条内容在浏览时至右向左循环滚动。同时,在代码视图中给marquee标签添加“事件过程”代码,最终HTML代码如下:

    <marquee behavior="scroll"direction="left" loop="-1" scrolldelay="300"  onmouseover="this.stop();"onmouseout="this.start();">欢迎光临电子系网站!</marquee>

    说明:

    在标签中添加的“事件过程”,就是当某个事件(如鼠标单击onclick、鼠标移到网页元素上面onmouseover等)发生时调用相应的函数过程。


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

    联系我们

    联系地址:南昌市北京西路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/ 新浪博客/