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

目录：
一、文本格式化标记
----------------------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>

注意要点：

缩写<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

DWCC2018HTML基本网页设计技巧方法详解相关推荐

gulp临时服务器显示html页面,Gulp实现静态网页模块化的方法详解
前言在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解决 ...
html页面在ie上出现404怎么解决,ie浏览器网页上有错误解决方法详解
ie浏览器网页上有错误解决方法详解最近网友反馈我的浏览器左下角总显示"网页上有错误",我已经修复过IE了,可是不管用.然后在浏览器上看不到网上的视频和图片的播放.在QQ空间上输入 ...
php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
Postman 使用方法详解
原创 Postman 使用方法详解 2019-07-21 23:28:42 痴乙阅读数 494053更多分类专栏: postman 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版 ...
for根据ID去重_汽车ECU参数标定之配置Overlay RAM实现Qorivva MPC57xx系列MCU参数在线标定和代码重映射原理和方法详解...
内容提要引言 1. MPC5744P的Overlay RAM工作原理介绍 2 MPC5744P的Flash Overlay配置详解 2.1 平台Flash标定区域描述字寄存器配置字0--PFLASH ...
python中文字符串多余空格_python使用正则表达式去除中文文本多余空格，保留英文之间空格方法详解...
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解在pdf转为文本的时候,经常会多出空格,影响数据观感,因此需要去掉文本中多余的空格,而文本中的英文之间的正常空格需要保留,输入 ...
Linux crontab定时任务配置方法(详解)
id="BAIDU_DUP_fp_iframe" src="https://pos.baidu.com/wh/o.htm?ltr="> 脚本之家服务器常 ...
java中drawimage方法_canvas.drawImage()方法详解
首先看html5.js /** @param {Element} img_elem @param {Number} dx_or_sx @param {Number} dy_or_sy @param { ...
python接收邮件内容启动程序_Python实现发送与接收邮件的方法详解
本文实例讲述了Python实现发送与接收邮件的方法.分享给大家供大家参考,具体如下: 一.发送邮件这里实现给网易邮箱发送邮件功能: import smtplib import tkinter cla ...

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

DWCC2018HTML基本网页设计技巧方法详解相关推荐

最新文章

热门文章