《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.3 添加文本元素...

news/2024/5/9 10:49:52/文章来源:https://blog.csdn.net/weixin_34283445/article/details/90566584

本节书摘来自异步社区《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》一书中的第3章,第3.3节,作者: 何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。

3.3 添加文本元素

网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
文本是传递信息的基础,浏览网页内容时,大部分时间是浏览网页中的文本,所以学会在网页中创建文本至关重要。在Dreamweaver CS6中可以很方便地创建出所需的文本,还可以对创建的文本进行段落格式的排版。

3.3.1 在网页中添加文本
文本是基本的信息载体,是网页中最基本的元素,在浏览网页时,获取信息最直接、最直观的方法就是阅读文本。下面通过实例讲述如何在网页中添加文本,如图3.21所示。


092a26250c1c7c0ecc5832883c3716e4c94bc6eb

序号1 打开原始文件CH03//index.htm,如图3.22所示。


3c5de13761e789ad87a78def86f90fd191cc5c72

序号2 将光标放置在要输入文本的位置,输入文本,如图3.23所示。

序号3 保存文档,按F12键在浏览器中预览,效果如图3.21所示。


3fba9acbb7c3da0f919419665e7467625e964e43

3.3.2 插入日期
在Dreamweaver中插入日期非常方便,它提供了一个插入日期的快捷方式,用任意格式即可在文档中插入当前时间,同时它还提供了日期更新选项,当保存文件时,日期也随着更新。插入日期的效果如图3.24所示,具体操作步骤如下。


c2f79b8ea6ea195842c3a576c3aee626ba5ea84f

序号1 打开原始文件CH03//index.htm,如图3.25所示。

序号2 将光标置于要插入日期的位置,选择菜单中【插入】|【日期】命令,弹出【插入日期】对话框,如图3.26所示。

序号3 在【插入日期】对话框中,在【星期格式】、【日期格式】和【时间格式】列表中分别选择一种合适的格式。勾选【储存时自动更新】复选框,每一次存储文档都会自动更新文档中插入的日期,如图3.27所示。


81c3f16901ec4c5086e5dc8e9ceabd8787fb216e


231e02403a08f7c5d7c830298cd734c17d6a9849


4131064a750e82129946cbc59b70ef29cd4bb77c

序号4 单击【确定】按钮,即可插入日期,如图3.28所示。


8cdc907288500b4209703684c64ebaa24b16e398

提示

显示在【插入日期】对话框中的时间和日期不是当前的日期,它们也不会反映访问者查看用户网站的日期/时间。
序号5 保存文档,按F12键在浏览器中浏览效果,如图3.24所示。

3.3.3 插入特殊字符
特殊字符包含换行符、不换行空格、版权信息和注册商标等,它们是网页中经常用到的元素。当在网页文档中插入特殊字符时,在代码视图中显示的是特殊字符的源代码,在设计视图中显示的是一个标志,只有在浏览器窗口中才能显示真正面目,如图3.29所示。下面通过实例讲述版权字符的插入,具体操作步骤如下。


521f488ac1064106d714ac6abc5bf6e722f67657

序号1 打开原始文件CH03//index.htm,如图3.30所示。


6c4058cc6bcda4d7eca8249f100535b0cb00bbdc

序号2 将光标置于要插入特殊字符的位置,选择菜单中的【插入】|【HTML】|【特殊字符】|【版权】命令,即可插入版权,如图3.31所示。


0f3a0962f6c8aebac828893d28cf01a3003efafc

序号3 保存文档,按F12键在浏览器中浏览效果,如图3.59所示。

提示

选择菜单中的【插入】|【HTML】|【特殊字符】|【其他字符】命令,弹出【插入其他字符】对话框,在对话框中可以选择更多的特殊字符,如图3.32所示。


5d2abe8581da938dedd9e8cbb2fc4aa4239e1e2e

3.3.4 插入水平线
水平线在网页文档中经常用到,它主要用于分隔文档内容,使文档结构清晰明了,合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档,如果合理放置水平线,会变得层次分明、易于阅读。

下面通过实例讲述在网页中插入水平线的效果,如图3.33所示,具体操作步骤如下。


48acfe11aa187fd1c4f476b7dc2f429b16adbd7b

序号1 打开原始文件CH03//index.htm,如图3.34所示。


73abf5de0dc3118045cc786acc8442fe183a1ec7

序号2 将光标置于要插入水平线的位置,选择菜单中的【插入】|【HTML】|【水平线】命令,插入水平线,如图3.35所示。


d74bcdb1691e77cff2fe214588c5848a878bde47

提示

将光标放置在插入水平线的位置,单击【常用】插入栏中的【水平线】shuipingxian按钮,也可插入水平线。在【窗口】下拉列表中选择“插入”即可把【常用】插入栏调出。
序号3 选中水平线,打开【属性】面板,可以在【属性】面板中设置水平线的高、宽、对齐方式和阴影,如图3.36所示。


6ea766f6ede450246aa2f764e33a673bd2204636

在水平线【属性】面板中可以设置以下参数。

【宽】和【高】:以像素为单位或以页面尺寸百分比的形式设置水平线的宽度和高度。

【对齐】:设置水平线的对齐方式,包括“默认”、“左对齐”、“居中对齐”和“右对齐”4个选项。只有当水平线的宽度小于浏览器窗口的宽度时,该设置才适应。

【阴影】:设置绘制的水平线是否带阴影。取消选择该项将使用纯色绘制水平线。

提示

设置水平线颜色:在【属性】面板中并没有提供关于水平线颜色的设置选项,如果需要改变水平线的颜色,只需要直接进入源代码更改〈hr color=“对应颜色的代码”〉即可。
序号4 保存文档,按F12键在浏览器中浏览效果,如图3.33所示。

HTML代码分析
1.插入水平线hr
水平线标记用于在页面中插入一条水平标尺线,使页面看起来整齐明了。

语法:

<hr>

说明:

在网页中输入一个< hr >标记,就添加了一条默认样式的水平线。

2.水平线宽度width
默认情况下,水平线的宽度为100%,可以使用width手动调整水平线的宽度。

语法:

<hr width="宽度">

说明:

在该语法中,水平线的宽度值可以是确定的像素值,也可以是窗口的百分比。

3.水平线高度size
默认情况下,可以使用size标记用于改变水平线的高度。

语法:

<hr size="高度">

说明:

在该语法中,水平线的宽度值可以是确定的像素值,也可以是窗口的百分比。水平线的高度只能使用绝对的像素来定义。

4.水平线去掉阴影noshade
默认的水平线是空心立体的效果,可以将其设置为实心并且不带阴影的水平线。

语法:

<hr noshade>

说明:

noshade是布尔值的属性,它没有属性值,如果在< hr >元素中写上了这个属性,则浏览器不会显示立体形状的水平线,反之则无需设置该属性,浏览器默认显示一条立体形状带有阴影的水平线。

5.水平线颜色color
在网页设计过程中,如果随意利用默认水平线,常常会出现插入的水平线与整个网页颜色不协调的情况。设置不同颜色的水平线可以为网页增色不少。

语法:

<hr color="颜色">

说明:

颜色代码是十六进制的数值或者颜色的英文名称。

6.水平线排列align
水平线在默认情况下是居中对齐的,如果想让水平线左对齐或右对齐,就需要设置对齐方式。

语法:

<hr align="对齐方式">

说明:

在该语法中对齐方式可以有3种,包括center、left和right,其中center的效果与默认的效果相同。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_823989.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《大型网站服务器容量规划》一3.1 通过监控规划容量

本节书摘来异步社区《大型网站服务器容量规划》一书中的第3章&#xff0c;第3.1节&#xff0c;作者&#xff1a; 郑钢 责编&#xff1a; 张涛&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 3.1 通过监控规划容量 任何一家互联网公司都会有自己的运维系统…

Web层框架对网站中所有异常的统一处理

一个网站的异常信息作为专业的人士&#xff0c;是不会轻易暴露给用户的&#xff0c;因为那样狠不安全&#xff0c;显得你漏是一回事&#xff0c;只要还是考虑到网站的数据安全问题&#xff0c;下面给大家分享一下一些常见的web层框架是如何处理统一的异常。 之前都是在Struts2…

如何使用AppScan扫描大型网站

经常有客户抱怨&#xff0c;说AppScan无法扫描大型的网站&#xff0c;或者是扫描接近完成时候无法保存&#xff0c;甚至保存后的结果文件下次无法打开?&#xff1b;同时大家又都很奇怪&#xff0c;作为一款业界出名的工具&#xff0c;如此的脆弱&#xff1f;是配置使用不当还是…

当SEO/SEM与良知正面碰撞

先从这几天一直很火的大学生“魏则西之死”这篇文章说起&#xff0c;虽然这对死者很不敬&#xff0c;但如果可以让我们深刻反省的话也是值得的&#xff0c;从知乎到4.28号这篇文章在微信被疯狂转载之后火速占领各大新闻版块头条&#xff0c;首先我们来看一下消息的源头&#xf…

VS2005在开发网站时的一个编译BUG

这两天我在用C#做一个WEB网站&#xff0c;用的是VS2005&#xff0c;碰到一个编译问题&#xff0c;害我查了很长时间&#xff0c;终于找到原因了-_- 放上来&#xff0c;如果有碰到相同问题的兄弟正好看看。现象&#xff1a;编译时&#xff0c;当页面对应的cs文件有错误时&#…

Bootstrap相关网站中简单的等待提醒

一、在页面中加入如下代码 <div class"modal fade" tabindex"-1" role"dialog" id"waitingModal"><div class"modal-dialog" role"document"><div class"modal-content"><div cla…

服务器网站访问ftp设置,服务器网站访问ftp设置方法

服务器网站访问ftp设置方法 内容精选换一换公网域名解析是基于Internet网络的域名解析过程&#xff0c;可以把人们常用的域名(如www.example.com)转换成用于计算机连接的IP地址(如1.2.3.4)。公网域名解析支持通过直接在浏览器中输入域名&#xff0c;访问网站或Web应用程序。云解…

服务器启动文件夹,win10系统开机启动文件夹的路径是什么_网站服务器运行维护...

装 k8s 要先装 Docker 吗&#xff1f;_网站服务器运行维护装k8s是不需要先装Docker&#xff0c;两者之间是没有依赖关系的&#xff0c;都是可以独立运行&#xff0c;但是两者是可以配合使用的&#xff0c;Docker是一个独立的应用程序&#xff0c;可以安装在任何计算机上运行容器…

不蒜子实现网站访问量访客数统计

个人博客网站&#xff1a;http://zhangchuanjun.cn 或者&#xff1a;我个人网站 有许多网站分析工具&#xff0c;比如百度统计&#xff0c;谷歌分析等工具&#xff0c;这类工具虽然有不错的网站统计功能&#xff0c;但是都不能呈现在自己的网站上&#xff0c;都需要进入相应的后…

使用CDN为您的网站加速(一)

CDN(Content Delivery Network)翻译为内容分发网络&#xff0c;是通过在现有的 Internet 中增加一层新的网络架构&#xff0c;将网站的内容发布到最接近用户的网络 " 边缘 " &#xff0c;使用户可以就近取得所需的内容&#xff0c;解决 Internet 网络拥塞状况&#x…

Flask开发微电影网站(五)

后台管理页面是系统管理员登录后对网站进行管理的前端页面 后台登录页面&#xff0c;如下图所示 管理员登录后的页面&#xff0c;如下图所示 管理员登录后&#xff0c;在右上角显示的管理员信息&#xff0c;如下图所示 管理员登录后&#xff0c;在页面中间部分的左侧显示管理菜…

监控.net 网站 Glimpse

使用Nuget 安装Glimpse 安装好后&#xff0c;config会默认添加几个节点 安装好之后 只需要浏览器输入 网站/Glimpse.axd 再次进入网站 就可以查看&#xff08;ajax sql session 等&#xff09; 转载于:https://www.cnblogs.com/jayblog/p/9324672.html

本地搭建网站--PHP网站

背景&#xff1a;组内需要一个博客系统记录些文档、同时扫盲学习mysql、PHP、域名相关知识点、RFS学习演练 方案&#xff1a;phpnow emlog 一、PHPnow 提供PHP网站环境&#xff08; 服务器 数据库 主机空间&#xff09; 傻瓜式安装 主站&#xff1a;http://servkit.org/ 注&a…

在服务器上搭建多个WordPress博客网站教程(超级详细)

实验准备 一台阿里云服务器二个域名&#xff08;IP与域名已经建立解析关系&#xff09;Linux关于web架构的知识 实验步骤 1.用crt远程登录阿里云服务器 2.安装nginx&#xff0c;mysql&#xff0c;php 建议使用lnmp一键安装包安装&#xff0c;方便快捷 获取lnmp一键安装包链接 l…

网站建设指南之网站HTTPS化与证书

通常我们说的HTTPS就是HTTPSSL证书&#xff0c;简单的说就是HTTP的安全版。HTTP网站的数据传输都是以明文形式&#xff0c;比如用户密码等信息都没有加密&#xff0c;很容易造成信息泄露。绑定SSL证书后&#xff0c;可以实现网站HTTPS化&#xff0c;加密用户与网站之间的交互访…

bae部署php网站,thinkphp部署bae的相关配置

thinkphp3.2.3发布到bae3.0&#xff0c;在tp的config.php中设置URL_MODEL1&#xff0c;入口文件index.php中设置define(BIND_MODULE,Home);// 绑定Home模块到当前入口文件define(BIND_CONTROLLER,Index);// 绑定Index控制器到当前入口文件这样在xampp中调试可以直接是localhost…

linux新加网站,linux云主机如何添加网站?

如何在云主机上添加网站?云主机也是有不同的操作系统区分的&#xff0c;比如Windows跟Linux等等&#xff0c;这两种是比较多人选择的云服务器系统。那么&#xff0c;今天万变云给大家带来在linux云主机上进行网站添加的教程。以下配置的路径以网站云提供的标准环境路径为准&am…

html网站栏目列表,栏目列表页.html

&#xfeff;栏目列表页$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resources/reload.html; …

网站防御cdn和高防服务器,高防服务器和CDN防御的区别在哪

网络服务器配备纯SSD架构打造的高性能存储&#xff0c;旨在为用户提供优质、高效、弹性伸缩的云计算服务,下面小编给大家介绍一下高防服务器的种类。CDN是网站加速&#xff0c;可以服务器负载能力过低&#xff0c;带宽过少等带来的网站打开速度慢等问题。一个网站的服务器性能比…

Linux系统使用Gogs搭建私服Git网站

文章目录1. 安装Docker2. 安装Gogs3. 配置Git仓库系统&#xff1a;CentOS 7.4 64位1. 安装Docker # 通过yum源安装docker yum -y install docker # 启动docker systemctl start docker # 开机自启 sudo systemctl enable docker2. 安装Gogs 下载Gogs镜像 docker pull gogs/g…