DWCC2018HTML基本网页设计技巧方法详解

article/2025/8/28 23:56:04

目录:
一、文本格式化标记
----------------------1、各类标签及描述
二、HTNL链接
----------------------1、HTML链接语法
----------------------2、在当前页面跳到指定位置
----------------------3、图片链接
三、插入视频、图片、列表项、邮件链接等
---------------------1、插入Flash video
---------------------2、插入HTML5 video
---------------------------------①HTML5 video无法播放及解决办法
四、表单标记
---------------------1、普通的文本、单选框、复选框标记
---------------------2、可下拉列表框;
五、好看的CSS按钮

(老司机跳过、萌新必看)在开始编辑之前请看DWCC的一些基本使用注意要点
DWCC2018基本网页设计使用技巧、注意要点 - CSDN博客 https://blog.csdn.net/cwyp18809/article/details/82826626

DWcc2018免费下载及安装
https://blog.csdn.net/cwyp18809/article/details/86682057

(有知识性错误或者其他问题请联系本人:QQ邮箱:1297663461@qq.com"备注CSDN+问题")

一、文本格式化标记

标签描述
<strong>加粗字体
<big>大号字
<em>着重字(斜体)
<small>小号字
<sub>定义下标字
<sup>定义上标字
<ins>给文本加下划线
<del>给文本加删除线
<abbr>定义缩写
<bdo>改变文本排版顺序
<q>给文本加引号

代码示例:

<body>
<p><strong>加粗字体 </strong></p>
<p><big>大号字</big></p>
<p><em>着重字</em></p>
<p><small>小号字</small></p>
<p>定义<sub>下标字</sub></p>
<p>定义<sup>上标字</sup></p>
<p>给文本<ins>加下划线</ins></p>
<p>给文本加<del>删除线</del></p>
<p>定义缩写:The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
</p><p><bdo dir="rtl">从右往左排</bdo></p>
<p><q>给文本加引号</q></p>
</body>

常见的文本格式化标记
注意要点:

  1. 缩写<abbr>
    应用举例:
<abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`

缩写
<abbr>的作用是将People’s Republic of China缩写为PRC当鼠标移动到PRC上时,将会以角标的形式显示其全称
2. 改变文本的排序方向<bdo>
应用举例:

  <bdo dir="rtl">从右往左排</bdo>

在这里插入图片描述

<bdo>是将文本逐字从右往左排出

<div align="right">hehe</div>是将文本在文本框中右对齐,只是将文本整体右移

二、HTML链接

1.HTML链接语法:

在现有窗口打开<a href="url">Link text</a>
href 属性描述了链接的目标

新建窗口打开<a href="http://www.baidu.com/" target="_blank">访问百度!</a>
target 属性则是让你在新的窗口打开链接

2.在当前页面跳到指定位置:
代码应用举例:直接跳至第4章
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页(runoob.com)</title>
</head>
<body><p>
<a href="#C4">查看章节 4</a>
</p><h2>章节 1</h2>
<p>这边显示该章节的内容……</p><h2>章节 2</h2>
<p>这边显示该章节的内容……</p><h2>章节 3</h2>
<p>这边显示该章节的内容……</p><h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p><h2>章节 5</h2>
<p>这边显示该章节的内容……</p></body>
</html>
<a href="#C4">查看章节 4</a>   描述目标地址

<a id="C4">目标名称</a>将目标地址定义为“C4”(PS:引号里的字符随便写,但是要和前面的a href="#C4"中的引号里字符的相同)

3.图片链接
传统代码实现方式:
(伪代码)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我的网页(runoob.com)</title> 
</head>
<body><p>创建图片链接:
<a href="https://www.baidu.com">
<img  border="10" src="在此处添加图片地址" alt="HTML 教程" width="32" height="32"></a></p><p>无边框的图片链接:
<a href="http://www.baidu.com">
<img border="0" src="在此处添加图片地址" alt="HTML 教程" width="32" height="32"></a></p></body>
</html>

**DWCC2018实现方式:**片热点链接建立
插入图片–>选择图片–>窗口右下角
有三种热点链接标记方式
在这里插入图片描述
注意:必须在“设计”状态下才会出现如上图的热点链接标记方式在这里插入图片描述
添加链接:
方法一:直接输入完整链接;
方法二:通过文件夹查找本地网页;
方法三:左键连接框旁的准心不放指向右边“文件栏”里的你想要指向的网页或文件在这里插入图片描述

三、插入视频、列表项、邮件链接
右侧工具栏——>插入
可插入image(图片)、Flash动画、音频等 一般只需要根据系统提示一步步操作即可

在这里插入图片描述
①插入Flashvideo (插入好后,实时浏览到浏览器看看是否成功)
插入视频时,应将视频转码为flash格式再插入。
视频类型一般默认累进式下载视频,流视频需要服务器支持
在这里插入图片描述
②插入HTML5 video(插入好后,实时浏览到浏览器看看是否成功)
右侧工具栏–>HTML5 video
在这里插入图片描述
选择如上图的图标–>下方的属性栏在这里插入图片描述
在“源”处插入视频的地址:①点击地址栏右侧的文件夹图标浏览,找到视频添加即可:
②左键地址栏右侧的准心不放,拖到右侧文件栏(右上半部分)中你想插入的文件上;
插入完成:

注意:如果视频播放出现无效源、无法解码等问题,可将视频转码为mp4-AVC(H264)格式(具体过程可参考下方链接)
在这里插入图片描述
转码工具格式工厂:http://d.z3tkd.com/nb/nsoft_988.html
如何将视频转化为 AVC (H264)视频编码格式:
https://jingyan.baidu.com/article/22fe7cedfdd4ca3002617f8f.html

额外知识:MP4有3种编码,mpg4(xdiv),mpg4(xvid),avc(h264),
只有h264才是公认的MP4标准编

四、表单标记
①普通的文本、单选框、复选框等都在DWCC的插入里都能找到
在这里插入图片描述

可下拉列表框:
HTML 标签、 标签
代码示例:
在这里插入图片描述

<!DOCTYPE html>
<html>
<body><select><option value="1">项目1</option><option value="2" >项目2</option><option value="3">项目3</option><option value="4">项目4</option>
</select></body>
</html>

一般情况下:<select>标签默认第一个<option>选项为默认值,如上图示例选择框未展开时默认选择项目1

<option>中加入selected即可将当前标签设置为默认选项
代码示例:
在这里插入图片描述

<!DOCTYPE html>
<html>
<body><select><option value="1">项目1</option><option value="2" selected>我是项目2,但我是默认选择的</option><option value="3">项目3</option><option value="4">项目4</option>
</select></body>
</html>

五、好看的CSS按钮:
在这里插入图片描述
具体设置方法:http://www.runoob.com/css3/css3-buttons.html


http://chatgpt.dhexx.cn/article/ca8yQJf1.shtml

相关文章

dwcc2019写php,mac网页设计软件:DreamweaverCC2019(dwcc2019直装版)

dw cc 2019 Mac新增功能 dw cc 2019 Mac推出了一些令 Web 设计人员和开发人员激动无比的新增功能。 1、JavaScript 重构 作为 Web 开发人员&#xff0c;您现在可以使用 JavaScript 重构&#xff0c;利用范围感知功能智能地重命名函数和变量。只需一次单击&#xff0c;您就可以将…

DWCC2018基本网页设计注意要点、使用技巧

目录&#xff1a; 一、注意要点 -------------1、“实时视图”“设计”的选择 -------------2、调出属性框 -------------3、在浏览器中实时浏览自己的网页 二、部分使用技巧 -------------1、文本格式化标记 -------------2、网页整体属性编辑 -------------3、插入视频、列表…

解决Windows10/11系统DWcc2021安装失败打不开问题 Adobe Dreamweaver CC2021详细安装教程

最初为美国MACROMEDIA公司开发 &#xff0c;2005年被Adobe公司收购。dw是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持&#xff0c;设计师和程序员可以在几乎任何地方快速制作和进行网站建设快速&#xff0c;灵活的编码。…

DreamWeaver CC网页设计与制作

目录 第一章 初识DreamWeaver CC 1.1 DreamWeaver CC的工作界面 1.1.1 不同风格的界面 1.1.2 伸缩自如的功能面板 1.1.3 多文档的编辑界面 1.1.4 新颖的“插入”面板 1.1.5 更完整的CSS功能 1.2 创建网站框架 1.2.1 站点管理器 1.2.2创建文件夹 1.2.3 定义新站点 …

js删除数组中指定对象

js删除数组中指定对象 需求说明从数组中移除指定对象函数封装 removeArray从数组中获取指定对象索引函数封装 getArrayIndex 在Vue中调用函数使用 需求说明 点击删除按钮删除指定行数据&#xff0c;即删除数组中指定对象。 _arr表示一个Array数组&#xff0c;里面包括了很多的对…

div中移除某个元素 js_js移除某个元素

js 如何删除某个div下的div元素 HTML利用JS移除指定的标签 在JS数组中如何删除某个元素 Array.prototype.remove = function (dx) {if (isNaN(dx) || dx > this.length) { return false; }for (var i = 0, n = 0; i < this.length; i++) {if (this[i] 。= this[dx]) {thi…

vue js删除数组中指定索引的元素

在前端开发中&#xff0c;我们经常需要对数组进行操作&#xff0c;增删改是经常的事情&#xff0c;那我们js中该如何删除指定的下标元素呢&#xff1f;&#xff1f;&#xff1f;&#xff1f; 我们用splice来操作 1.定义和用法 splice() 方法用于添加或删除数组中的元素。 注…

springCloud 接口包错 Hystrix circuit short-circuited and is OPEN

接口报错如下图所示,发完版之后出现这种问题, Hystrix circuit short-circuited and is OPEN 就字面意思就理解是,熔断接口短路 原因&#xff1a;出现timeout的问题&#xff0c;基于我的理论&#xff0c;当然只是基于我的空想。 因为我请求的是一百个线程去访问&#xff0c…

基于SSM企业留言系统

开发工具(eclipse/idea)&#xff1a; eclipse4.5/4.8或者idea2018,jdk1.8 数据库&#xff1a;mysql 功能模块&#xff1a; 前台展示&#xff1a; 1.企业新闻资讯 2.企业介绍 3.企业产品展示 4.留言中心 5.用户注册 一、管理员&#xff1a; 1.新闻管理 2.企业介绍管理 3.企…

php+mysql 留言板系统 登录 管理员 审核回复 学生适用

1、phpmysql留言板系统 2、共有两种使用者&#xff1a;管理员、普通用户 1&#xff09;普通用户创建留言&#xff0c;无需注册和登录 2&#xff09;管理员登陆后审核及回复用户留言、批量删除留言&#xff1b;增删改查后台账号信息&#xff1b;修改密码&#xff1b;退出登录…

留言系统php源码,PHP企业通用留言系统 v1.0

本程序完全免费&#xff0c;前台页面与后台页面无任何限制&#xff0c;为方便用户使用本系统内不含任何广告&#xff0c;欢迎使用! 1.首先将留言板内的所有程序上传到自己购买空间的指定目录内。 2.用Dreamweaver 打开Start.PHP文件和 conn.PHP文件。修改带注视的语句实现与自己…

HTML5+CSS+JavaScript+MySQL+javaweb+mvc框架 简易留言板系统

实现前后端&#xff0c;有用户注册、登录功能&#xff0c;用户可以修改个人信息&#xff0c;编辑和删除自己发的留言&#xff0c;可以给别人回复&#xff0c;也可以单独给其他用户留言&#xff0c;还可以设置为私密留言。也可以进行管理员登录&#xff0c;可以管理所有留言信息…

原生php开发多管理员留言板系统源码

phpmysql多管理员留言板系统源码 基于原生php编写的留言板,分前后台&#xff0c;前后台数据展示都有分页功能。 前台功能&#xff1a;发布留言&#xff0c;留言展示(包括管理员的回复)。用户发布的留言&#xff08;发布的留言时有图片验证码验证&#xff09;&#xff0c;发布成…

【php毕业设计】基于php+mysql+mvc的网上留言管理系统设计与实现(毕业论文+程序源码)——网上留言管理系统

基于phpmysqlmvc的网上留言管理系统设计与实现&#xff08;毕业论文程序源码&#xff09; 大家好&#xff0c;今天给大家介绍基于phpmysqlmvc的网上留言管理系统设计与实现&#xff0c;文章末尾附有本毕业设计的论文和源码下载地址哦。需要下载开题报告PPT模板及论文答辩PPT模…

jsp做的留言系统(防止非法登录、增删改查留言)

第一步&#xff1a;在myeclipse中导入数据库 CREATE TABLE note (id int(11) NOT NULL AUTO_INCREMENT,title varchar(20) NOT NULL,author varchar(20) NOT NULL,content varchar(50) NOT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT3 DEFAULT CHARSETutf8;-- ----…

【案例2】网络留言薄系统

博主介绍&#xff1a; &#x1f680;自媒体 JavaPub 独立维护人&#xff0c;全网粉丝打大于100w&#xff0c;csdn博客专家、java领域优质创作者&#xff0c;51ctoTOP10博主&#xff0c;知乎/掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和副业。&#x1f680; …

php+mysql 留言板系统 学生适用

1、PHPMYSQL 留言板系统 2、注册登录成功后&#xff0c;可以修改个人资料&#xff0c;包括密码、头像等信息&#xff1b;查看全部留言&#xff1b;删除留言&#xff1b;向指定的用户发留言&#xff1b;查看留言&#xff1b;回复留言&#xff1b;搜索全部留言&#xff1b;找回密…

全网首发PHP版留言系统源码

PHP留言系统源码&#xff0c;支持邮箱提醒&#xff0c;源码界面整洁&#xff0c;舒服简单 适合游戏网站&#xff0c;博客网站等等留言建议&#xff0c;无后台&#xff0c;直接前端登录 搭建环境教程 虚拟主机&#xff08;云服务器&#xff09;域名&#xff0c;QQ邮箱 修改前…

基于PHP的学生留言管理系统

基于PHP的学生留言管理系统 一 项目介绍 本留言管理系统分为用户和管理员&#xff0c;用户可以注册登录进入留言系统&#xff0c;管理员对用户和留言进行管理。系统界面简洁&#xff0c;优雅&#xff01; 技术栈 phpmysqlbootstrapjquerykindeditorphpstudy 二 主要功能 用户…

JAVA留言板系统(java留言板系统)java留言管理系统

JAVA留言板系统&#xff08;java留言板系统&#xff09;java留言管理系统 public Swingtest002() {// 设置标题setTitle("请登陆");// 绝对布局setLayout(null);// 定义一个容器Container c getContentPane();// 创建"用户名:"标签JLabel jl1 new JLabe…