一步步学习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

相关文章

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》:本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

基于Python实现高效PPT转图片工具

《基于Python实现高效PPT转图片工具》在日常工作中,PPT是我们常用的演示工具,但有时候我们需要将PPT的内容提取为图片格式以便于展示或保存,所以本文将用Python实现PPT转PNG工具,希望... 目录1. 概述2. 功能使用2.1 安装依赖2.2 使用步骤2.3 代码实现2.4 GUI界面3.效

Python实现AVIF图片与其他图片格式间的批量转换

《Python实现AVIF图片与其他图片格式间的批量转换》这篇文章主要为大家详细介绍了如何使用Pillow库实现AVIF与其他格式的相互转换,即将AVIF转换为常见的格式,比如JPG或PNG,需要的小... 目录环境配置1.将单个 AVIF 图片转换为 JPG 和 PNG2.批量转换目录下所有 AVIF 图