《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 实战演练——创建基本文本网页

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

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

3.6 实战演练——创建基本文本网页

本章主要讲述了Dreamweaver CS6的操作界面、在网页中插入文本和设置文本属性等,下面通过以上所学的知识讲述如何创建基本文本网页,效果如图3.47所示,具体操作步骤如下。

1 打开原始文件CH03/3.6/index.htm,将光标置于要输入文字的位置,如图3.48所示。

2 在表格中输入相应的文字内容,如图3.49所示。


23d43c83cec175db94fe6b423a436bacb17ff4c7


a36273e455e713a3b9a009c908d8c68f4a9b8c27


c27241b0cafbb60667db6768b0273df7a1face24

3 选择文字,在【属性】面板中单击【大小】右边的文本框,弹出【新建CSS规则】对话框,在对话框中的【选择器类型】中选择“类(可应用于任何HTML元素)”,在【选择器名称】中输入名称“.daxiao”,在【规则定义】中选择“仅限该文档”,如图3.50所示。

4 单击【确定】按钮,设置【大小】为“12px”,单击【文本颜色】按钮,在弹出的颜色框中设置字体颜色为“#663300,如图3.52所示。


9d5fce2384b8fb040dccb27dbe7a1d54aef45d71


f138289a2cb9d7ebec108fb1755fc8e5c57fbed7

5 将光标置于要插入时间的位置,选择菜单中的【插入】|【日期】命令,弹出【插入日期】对话框,在对话框中进行相应的设置,如图3.52所示。

6 单击【确定】按钮,插入时间,如图3.53所示。


cde3e0f17b869ba250861181bdde1c092be02869


8408096cf4e3c123b4c8e031a099cb5ef91a2152

7 保存文档,在浏览器中的预览效果如图3.47所示。
相关文章
|
5天前
|
数据处理 开发者 数据格式
Nest.js 实战 (四):利用 Pipe 管道实现数据验证和转换
这篇文章介绍了Nest.js框架中管道的概念和使用。管道是一种强大的功能,用于在请求数据到达控制器方法之前对其进行预处理,如转换、验证、清理等。文章详细解释了数据转换、数据验证、错误处理和一致性等管道的主要用途,并通过代码示例演示了如何使用内置管道和自定义管道。最后,文章总结了管道在提升应用健壮性和安全性方面的作用,认为合理利用管道可以加速开发周期,提高软件质量。
Nest.js 实战 (四):利用 Pipe 管道实现数据验证和转换
|
11天前
|
JavaScript 关系型数据库 API
Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库
这篇文章介绍了什么是Prisma以及如何在Node.js和TypeScript后端应用中使用它。Prisma是一个开源的下一代ORM,包含PrismaClient、PrismaMigrate、PrismaStudio等部分。文章详细叙述了安装PrismaCLI和依赖包、初始化Prisma、连接数据库、定义Prisma模型、创建Prisma模块的过程,并对比了Prisma和Sequelize在Nest.js中的使用体验,认为Prisma更加便捷高效,没有繁琐的配置。
Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库
|
9天前
|
JavaScript 应用服务中间件 API
Node.js搭建REST API实战:从基础到部署
【7月更文挑战第18天】通过以上步骤,你可以将你的Node.js REST API从开发环境顺利迁移到生产环境,并利用各种工具和技术来确保应用的稳定性、安全性和可扩展性。
|
10天前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
9天前
|
安全 Java API
Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档
这篇文章介绍了Swagger,它是一组开源工具,围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具,包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger,展示了安装依赖、定义DTO和控制器等步骤,以及如何使用Swagger装饰器。文章最后总结说,集成Swagger文档可以自动生成和维护API文档,规范API标准化和一致性,但会增加开发者工作量,需要保持注释和装饰器的准确性。
Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档
|
12天前
|
API
Nest.js 实战 (一):使用过滤器优雅地统一处理响应体
这篇文章介绍了在Nest.js中如何处理接口统一返回格式的方法。首先定义了响应状态码枚举和类型,然后创建了HttpException异常过滤器来捕获HttpException类的异常并设置自定义响应逻辑。最后通过全局配置和效果预览展示了如何应用这些设置。
Nest.js 实战 (一):使用过滤器优雅地统一处理响应体
|
23天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
21天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
19 0
CSS 【实战】 “四合院”布局
|
21天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
26 0
|
21天前
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
12 0