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

来源:互联网 发布:希拉里 知乎 编辑:程序博客网 时间:2024/04/29 23:38

        浏览器是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页面做修改时,你应该不断在浏览器中查看页面。并测试你的修改的功能。每个浏览器都不同,所以你也应该在一系列浏览器中测试页面,并使用网站访问者常用的分辨率。如果你在电脑中安装了多个浏览器,你可以使用预览命令下的箭头,选择特定浏览器特定分辨率预览页面。

0 0