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

相关文章

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,