一步步学习SPD2010--第四章节--创建和修改网页(1)--插入文本、屏幕贴士、超链接和图片

本文主要是介绍一步步学习SPD2010--第四章节--创建和修改网页(1)--插入文本、屏幕贴士、超链接和图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        浏览器是SP主要的网页内容编辑工具。你可以使用SPD在设计视图完成类似的活动。标准的Windows应用程序快捷方式,如复制、剪切、粘贴和回复命令在SPD中和其他基于Windows程序一样同样运行。然而,当你从其他程序中,如Word,使用粘贴文本的命令粘贴内容----粘贴文本命令在功能区的剪切板点击粘贴命令的箭头,可以发现----然后添加你自己的格式。从其他程序进行格式可能是冗长的,不会产生最高效的网页代码。

        你可以添加部件,如文本、图片、超链、屏幕提示和待选文本。屏幕提示很有用,因为当用户指向超链时,它们提供信息。待选文本允许你定义文本,如果图片没有加载或者用户不能看到图片时,就会显示。在句子末尾增加句号使听屏幕阅读器的用户能够更容易理解你的页面,特别是当两个待选文本标签相邻时。

        SPD提供许多工具管理页面上的图片。

        1.      图片转换。当你插入一个图片,不是GIF或JPEG时,SPD默认转化为GIF或JPEG格式,根据原始图片的颜色个数。插入图片之后,你可以重新使用图片工具上的命令,图片属性对话框内的格式选项卡,在SPD中重新格式化。

        2.      自动缩略图。你可以告诉SPD创建图片的小版本----缩略图----并将它链接到正常大小。通过右击图片,然后点击自动缩略图。或者,选中图片,按下Ctrl+T。

        小贴士:在页面编辑器选项对话框,使用图片和自动缩略图选项卡配置图片管理选项的设定。

       为了原型化目的或者团队网站的图片,SPD中的图片管理功能应该足够,但是如果你创建面向公众的网站,你可能想要第三方图片编辑巩固。理想的,你可以在插入图片到页面之前,在图片编辑程序中改变图片文件的大小。因为达到能给你使用HTML标签属性改变图片大小时,原始图片文件被下载到用户电脑,尽管浏览器以小格式呈现图片文件。这会让页面话费更多时间来加载。小贴士:如果你没有第三方工具,你可以使用MS PPT或MS Picture Manager来改变图片大小和文件大小。

       在本次练习中,你基于团队网站创建新的页面。然后添加文本,并用文件选项卡命令快速格式化。给文本添加超链,并将屏幕提示与超链关联后,你将配置超链,使用户点击超链时,新浏览器窗口打开。

1.      在导航窗格点击网站页面

2.      点击Home.aspx左侧图标,复制粘贴。

       Home_copy(1).aspx出现在网站页面库中。

3.      在页面选项卡,点击编辑。点击导航窗格导航右边的箭头。

        导航窗格折叠,呈现工作区域更多空间来修改页面。

4.      右击PlaceHolderMain区域任何地方,点击缩放到内容。


        只有EmbeddedFormField空间内部包含的代码呈现出来。

5.      选择“Welcome to your site!”,输入Wide World Importers Human Resources team site.

6.      选中Wide World Importers Human Resources team site,在文件选项卡,在字体组中点击Bold按钮,在段落中点击Center按钮

7.      选择Wide World Importers文本,点击段落组中的超链接按钮

        小贴士:在插入选项卡中链接组上也有超链接命令

8.      在插入超链对话框点击屏幕提示

9.      输入Wide World Importers’ intranet site。点击确定关闭对话框。

10.  在地址栏,输入网站URL,然后点击目标框架。

11.  选择新窗口。点击确定。


        小贴士:你的公司肯呢过有政策,关于新浏览器窗口什么时候打开。通常,你应该在需要展示Web页面的打印版本或者大型图片时,应该打开新浏览器窗口。

12.  点击确定,关闭对话框。

        文本Wide World Importers高光,在快速标签选择器上,橙色<a>标签出现。

        小贴士:如果没有出现,点击页面其他位置,然后点击文本Wide World Importers。

13.  保存

        MS SPD对话框打开,警告你SP可能要移除不安全内容。


14.  点击是,在编辑器页面重载页面。

        重要:SPD的设计视图并不是你在浏览器中看到的真实样子。页面的一些方面可能不会同样显示,或者一些代码在你不用浏览器查看页面时,不会起作用。在你给Web页面做修改时,你应该不断在浏览器中查看页面。并测试你的修改的功能。每个浏览器都不同,所以你也应该在一系列浏览器中测试页面,并使用网站访问者常用的分辨率。如果你在电脑中安装了多个浏览器,你可以使用预览命令下的箭头,选择特定浏览器特定分辨率预览页面。

这篇关于一步步学习SPD2010--第四章节--创建和修改网页(1)--插入文本、屏幕贴士、超链接和图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1083080

相关文章

ESP32 esp-idf esp-adf环境安装及.a库创建与编译

简介 ESP32 功能丰富的 Wi-Fi & 蓝牙 MCU, 适用于多样的物联网应用。使用freertos操作系统。 ESP-IDF 官方物联网开发框架。 ESP-ADF 官方音频开发框架。 文档参照 https://espressif-docs.readthedocs-hosted.com/projects/esp-adf/zh-cn/latest/get-started/index

51单片机学习记录———定时器

文章目录 前言一、定时器介绍二、STC89C52定时器资源三、定时器框图四、定时器模式五、定时器相关寄存器六、定时器练习 前言 一个学习嵌入式的小白~ 有问题评论区或私信指出~ 提示:以下是本篇文章正文内容,下面案例可供参考 一、定时器介绍 定时器介绍:51单片机的定时器属于单片机的内部资源,其电路的连接和运转均在单片机内部完成。 定时器作用: 1.用于计数系统,可

问题:第一次世界大战的起止时间是 #其他#学习方法#微信

问题:第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示

[word] word设置上标快捷键 #学习方法#其他#媒体

word设置上标快捷键 办公中,少不了使用word,这个是大家必备的软件,今天给大家分享word设置上标快捷键,希望在办公中能帮到您! 1、添加上标 在录入一些公式,或者是化学产品时,需要添加上标内容,按下快捷键Ctrl+shift++就能将需要的内容设置为上标符号。 word设置上标快捷键的方法就是以上内容了,需要的小伙伴都可以试一试呢!

AssetBundle学习笔记

AssetBundle是unity自定义的资源格式,通过调用引擎的资源打包接口对资源进行打包成.assetbundle格式的资源包。本文介绍了AssetBundle的生成,使用,加载,卸载以及Unity资源更新的一个基本步骤。 目录 1.定义: 2.AssetBundle的生成: 1)设置AssetBundle包的属性——通过编辑器界面 补充:分组策略 2)调用引擎接口API

RedHat运维-Linux文本操作基础-AWK进阶

你不用整理,跟着敲一遍,有个印象,然后把它保存到本地,以后要用再去看,如果有了新东西,你自个再添加。这是我参考牛客上的shell编程专项题,只不过换成了问答的方式而已。不用背,就算是我自己亲自敲,我现在好多也记不住。 1. 输出nowcoder.txt文件第5行的内容 2. 输出nowcoder.txt文件第6行的内容 3. 输出nowcoder.txt文件第7行的内容 4. 输出nowcode

Javascript高级程序设计(第四版)--学习记录之变量、内存

原始值与引用值 原始值:简单的数据即基础数据类型,按值访问。 引用值:由多个值构成的对象即复杂数据类型,按引用访问。 动态属性 对于引用值而言,可以随时添加、修改和删除其属性和方法。 let person = new Object();person.name = 'Jason';person.age = 42;console.log(person.name,person.age);//'J

大学湖北中医药大学法医学试题及答案,分享几个实用搜题和学习工具 #微信#学习方法#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式,可以快速查找问题解析,加深对题目答案的理解。 1.快练题 这是一个网站 找题的网站海量题库,在线搜题,快速刷题~为您提供百万优质题库,直接搜索题库名称,支持多种刷题模式:顺序练习、语音听题、本地搜题、顺序阅读、模拟考试、组卷考试、赶快下载吧! 2.彩虹搜题 这是个老公众号了 支持手写输入,截图搜题,详细步骤,解题必备

JAVA读取MongoDB中的二进制图片并显示在页面上

1:Jsp页面: <td><img src="${ctx}/mongoImg/show"></td> 2:xml配置: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001

笔记本电脑屏幕模糊?6招恢复屏幕清晰!

在数字化时代的浪潮中,笔记本电脑已成为我们生活、学习和工作中不可或缺的一部分。然而,当那曾经清晰明亮的屏幕逐渐变得模糊不清时,无疑给我们的使用体验蒙上了一层阴影。屏幕模糊不仅影响视觉舒适度,更可能对我们的工作效率和眼睛健康构成威胁。 遇到笔记本电脑屏幕模糊的情况时我们应该如何解决?本文将与大家分享6个简单易懂的解决方法。 方法一:调整Windows分辨率 电脑屏幕模糊显示不清晰怎