首页 > 教程 > 关键词  > 网页设计最新资讯  > 正文

用FrongPage设计网页花样

2007-04-16 09:09 · 稿源:中国站长站

  技术在进步,思维在发展,网页上的花样当然也要一天天地赶时髦了。在“滚动字符”、“跑马灯”已成平常的今天,网页上还能变出新花样吗?

  制作鼠标指针指在上面时会变化的动态按钮

  在FrontPage中通过选单命令:“insert(插入)”〉“active elements(active单元)”〉“hover botton(动态按钮)”,可以制作动态效果的按钮。但是,这种按钮效果是基于javaapplet小程序的,它有速度慢、不能显示提示文本、鼠标指针不能变为手形等缺点。这里介绍用dreamweaver 2.0制作基于javascript的动态按钮的方法。

  在制作这种按钮效果之前,首先要为每个按钮制作两张不同的图片,一张是正常情况下要显示的图片,另一张是鼠标指针停留在按钮上时要显示的图片。图片命名时最好有规律,比如两张图片名分别是botton.gif、botton_1.gif。

  首先在FrontPage中插入第一张图片,并设好超级链接,文件保存后用dreamweaver调入(如果熟悉dreamweaver,可以不要FrontPage“帮忙”)。单击已插入的第一张图片选中它,点击“behaviors(行为)”窗口(如果未显示,按f8显示它)中的+号按钮,在选单中选“swip image(交换图片)”打开对话框,按“browse(浏览)”按钮选择第二张图片,最后点“ok”确定。这样,一个动态效果按钮就做成了,简单吧。

  用FrontPage可视化编辑样式表

  你一定见过许多主页上有这样的链接,它并不像普通链接总是带下划线,当鼠标指上去时,链接文字就会变色并出现下划线,这都是样式表的功劳!

  用FrontPage打开要编辑的html文件,使用选单命令“format(格式)”〉“stylesheet...(样式...)”打开“format stylesheet(样式格式)”对话框,这里显示了当前文件内联样式表的内容,你可以在〈!--...--〉之间添加或修改样式表语句。如果要添加新的样式语句,首先要输入标签(如:a:link、a:hover、a:active、a:visited,它们分别表示:正常情况下未访问过的、鼠标接近时、鼠标点击时、访问过的链接的样式)。然后,把光标停在这个标签末尾,点击对话框左下角的“style...(样式...)”按钮,进入“style(样式)”对话框,在这里你可以根据需要设置多种样式属性。如果要更改某个标签的样式,只要光标停在相应标签后面的一对大括号中代码的任意位置,然后按“style...(样式...)”按钮进行修改即可。

  例子:你希望鼠标移动到链接上时,文字背景变为黄色,文字本身变为红色且无下划线。先在〈!--...--〉之间输入a:hover,然后把光标停在它末尾,按“style...(样式...)”按钮进入“style(样式)”对话框,在“colors(颜色)”页中设置“foreground color(前景颜色)”为红色,“background color(背景颜色)”为黄色,在“text(文本)”页中设置“decoration(修饰)”为“none(无)”,然后确定。这时,FrontPage已将代码{background-color:rgb(0,0,128);color:rgb(255,255,255);text-decoration:none}添加到a:hover标签后面,是不是比自已编容易得多?

  制作弹出式窗口

  有许多网页在打开的时候,会弹出一个较小的窗口,显示广告或一些最新信息。这种弹出式窗口制作很简单,只要在网页代码的〈body〉标签后面插入以下类似代码即可:

<script language="javascript">
window.open('url','窗口名','属性列表');
</script>

  window.open('url','窗口名','属性列表');

  其中“url”是在窗口中显示的html文档的地址;“窗口名”可任意起一个,但不要用中文;“属性列表”是一个用逗号分开的各个属性值的字符串,它确定了弹出窗口的外观与状态。常用属性有:

  toolbar(是否显示工具栏)、location(是否显示地址栏)、directories(是否显示常用链接)、status(是否显示状态栏)、menubar(是否显示选单条)、scrollbars(是否使用滚动条)、resizable(是否可改变大小),这些属性值等于1时表示是,等于0或不将此属性加入列表时表示否。此外,还有width(窗口宽)、height(窗口高)、top(与屏幕上边的距离)、left(与屏幕左边的距离)等属性用于对弹出窗口大小和位置的控制。

举报

  • 相关推荐
  • 《云·原神》网页版移动端上线:免下载 “老爷机”也能玩

    今日,《原神》宣布《云原神》网页版移动端正式上线,玩家无需下载包体即可游玩。玩家首次使用任意平台登录《云原神》,将会获得5小时的免费时长。需要注意的是,由于是网页版,所以对网络质量有一定要求,高延迟下人物操控也会有延迟,且有音画不同步的情况发生,可调低画质档位或帧率。

  • Vonage 位居Gartner CPaaS 魔力象限领导者

    在Gartner®的通信平台即服务魔力象限™中,Vonage位居领导者行列新泽西州Holmdel——Vonage作为云通信领域的全球领导者,旨在帮助企业加速数字化转型。她已被公认为Gartner通信平台即服务魔力象限的领导者。Vonage的完全可编程的统一通信、联络中心和会话商务应用程序是基于Vonage平台构建的,使公司能够从办公室或远程改变他们的通信和操作方式——提供创建富有意义且按需部署的灵活性。

  • Adobe Photoshop网页版正式推出 包含AI工具但暂无免费版本计划

    Adobe公司的Photoshop网页版服务,简化了桌面版Photoshop的功能,现已正式推出。这个Photoshop网页版包含了桌面版Photoshop最近发布的受Firefly生成式AI驱动的“生成式填充”和“生成式扩展”等热门功能。但Adobe数字媒体高级副总裁AshleyStill现在告诉TheVerge,这家创意软件巨头“暂无推出免费增值版本的计划”,新用户可在Adobe网站上通过“免费交互式演示和应用内教程”试用Photoshop网页版,然后再决定是否订阅。

  • 比iPad Pro轻多了!华为MatePad Pro 13.2亮相:全球最薄无边大平板

    在今日下午举行的华为全场景秋季新品发布会上,华为MatePadPro13.2英寸平板电脑率先亮相。ID设计上,华为MatePadPro13.2拥有曜金黑、晶钻白,以及和华为Mate60系列一致的雅川青。在无边框设计和13.2英寸大屏的加持下,华为MatePadPro13.2不仅正面视觉冲击力更强,游戏、影音体验也更沉浸。

  • P60 Pro外观下放!华为畅享新机入:高端设计大众化

    华为最近有一款千元新机入网工信部,后置相机部位神似华为P60Pro。从工信部的照片来看,这款华为新机的镜头ID与P60Pro十分相似,采用凝光之眼”镜头模组设计,中间一枚硕大的镜头为主摄,不过与P60Pro的区别在于,下方的潜望长焦镜头改为单LED补光灯。华为畅享50z采用了6.52英寸LCD水滴屏,1600x720分辨率,支持60Hz刷新率,后摄采用5000万像素主摄200万像素微距200万像素景深三摄组合,前置500万自拍镜头,并预装了HarmonyOS系统。

  • AI视野:ChatGPT用户可以访问互联了;Photoshop网页版正式推出;微调多模态大模型会灾难性遗忘

    OpenAI宣布ChatGPT用户现在可以浏览互联网,不再受限于2021年9月之前的数据。这一更新允许用户访问最新信息,拓展了ChatGPT的应用领域。该模型性能出色,免费下载无限制。

  • 华为MatePad Pro 13.2拥有业界最强Wi-Fi信号:遥遥领先苹果iPad Pro

    今天下午华为召开新品发布会,首款产品就是华为MatePadPro13.2。余承东介绍,华为MatePadPro13.2采用灵犀通信技术,拥有业界最强的Wi-Fi信号,无论是2.4GHz还是5GHz都领先于其他竞品。机身设计承袭华为旗舰产品的设计语言,带来三种配色:曜金黑、晶钻白,以及和华为Mate60系列一致的雅川青。

  • 复旦NLP团队发布80大模型Agent综述,一文纵览AI智能体的现状与未来

    复旦大学自然语言处理团队推出LLM-basedAgents综述论文,全文长达86页,共有600余篇参考文献!作者们从AIAgent的历史出发,全面梳理了基于大型语言模型的智能代理现状,包括:LLM-basedAgent的背景、构成、应用场景、以及备受关注的代理社会。作者们探讨了Agent相关的前瞻开放问题,对于相关领域的未来发展趋势具有重要价值。就像其他的云服务一样,AaaS有潜力为用户提供高灵活性�

  • 苹果iPad Pro将升级OLED屏 入门款已准备就绪

    苹果公司预计会在明年推出采用OLED显示屏的iPadPro,该产品线将从配置最高、售价也最高的iPadPro开始。OLED显示屏是一种显示效果更好的屏幕,该升级将采用OLED显示屏的iPadPro挑战市场。苹果公司已经在秋季连续4年推出了全系采用OLED显示屏的iPhone,因此外界也开始期待苹果公司能够在iPadPro中采用这一技术。

  • 苹果最激进iPad!iPad Pro 2024搭载3nm M3芯片:领先安卓阵营

    据爆料,苹果将在明年推出新一代iPadPro,有11英寸和13英寸两种尺寸,两种尺寸各有两个版本,共计4个版本。11英寸版本型号分别是J717和J718,对应的是Wi-Fi版和蜂窝版,13英寸版本型号分别是J720和J721,同样有Wi-Fi版和蜂窝版两种选择。像全新的手写笔、妙控键盘这些配件,苹果也都会同步推出,让iPadPro2024成为新一代生产力工具。

热文