Dreamweaver8下定义WEB功能页面介绍

简介:

说到dreamweaver8,相信大家都比我熟悉,也许有人说dreamweaver8是一个开发工具,那开发工具多了,我自己是这么认为的,dreamweaver8是专业的网页开发工具;由于自己是做运维的,所以在开发的角度我算是一个绝对的菜鸟,可以说是一窍不通,之前就没做过开发先关的东西,现在才开始慢慢接触,所以每天晚上回家看看java、html、jsp相关的文档学习,同时,我们大家都知道一般正常的页面程序文件通过新建超级文本文件来修改扩展名来定义文本格式,默认的超级文本文件格式化的扩展名是.txt,我们将txt修改成html就成了一个简单的web文件了,扩展名有很多,根据自己的需求来修改扩展名。其实大家都很了解,web程序下还有一个.jsp的文件。也是一个java下的web程序应用,其实有很多,在这就不多介绍了。相信大家比我熟悉。

昨晚上兴致一来就想通过dreamweaver8实现第一个自己的web程序。该程序我准备用来注册用户相关的信息,所以就定制了一个自己的需求页面,所以在此分享一下。

首先是下载dreamweaver8程序,然后就是安装了。再次就不多说了,

接下来我们就通过dreamweaver8创建一个html文件来定义自己的页面,定以前,我们首先理解一下dreamweaver8的功能使用。首先通过dreamweaver8创建一个网页

image

创建完成,接下来我们对以下内容进行简单分析:

image

我们保存一下,发现新建了一个扩展名为html的超级文本文件:

image

我们知道在html内注释需要用<!-->符号定义:

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

大家都知道,html文件内容必需是以<html> </html>开始结束的。

image

接下来,我们要定义一个标题:所以需要应用到

1
< head ></ head >

然后在此域内定义显示的标题<tatle></tatle>即可

image

接下来就是定义显示内容:

将显示的内容定义到<body></body>内即可

image

接下来我们开始编辑显示及属性了

image

保存后我们开始预览效果。

image

页面出来了,日常我们修改字体大小及颜色呢:

image

那就是需要用户属性了:size、color了,那提前需要将修改的内容用<font></font>扩起来

image

我们在<font></font>内添加相应的功能即可

image

修改后,我们再次预览效果。

image

接下来,我们定义一个列表文件,列表文件一般都是树状结构。通过相应的代码会自动缩进

比如我们定义一个名称为:开发项目,下又分java,html,jsp

列表文件表示为<dl></dl>

1
2
< dt ></ dt >
< dd ></ dd >

编码定义:

1
2
3
4
5
6
7
< dl >
< dt >开发项目</ dt >
< dd >html</ dd >
< dd >java</ dd >
< dd >jsp</ dd >
< dd >c++</ dd >
</ dl >

image

image

1
2
< ol ></ ol >数字标签
< ul ></ ul >符号标签

image

预览效果:

image

1
< hr  /> 定义水平线:

image

定义水平线属性:线的粗细、颜色

image

预览效果

image

然后,我们给该页面添加一个图片,那应该怎么做呢

image

1
< img  src=”” alt> 定义图片

image

image

调整图片大小:

1
htight=”300”width="200" >

image

image

接下来我们就是 表格了;

注:<table></table>定义一个表格

<tr></tr>定义一行

<td></td>定义一列

1
2
3
4
5
6
< table  border = "1" >
< tr >
< td >表格一</ td >
< td >表格二</ td >
</ tr >
</ table >

image

为了更好的体现该功能,添加表格颜色

1
< table  border = "1"  bordercolor = "#FF3366" >

image

添加背景颜色

1
< table  border = "1"  bordercolor = "#FF3366"  bgcolor = "#FFFF33" >

image

调整表格的分辨率及显示格式

1
< table  border = "1"  bordercolor = "#FF3366"  bgcolor = "#FFFF33"  cellpadding = "4"  ;70%"  cellspacing = "10" >

image

接下来我们定义超链接

<a href="www.baidu.com">百度

image

image

超链接定义完后,我们在页面打开该超链接会通过当前页面打开,那如果我们正常打开超链接是希望在新的页面打开超链接的,所以我们为了解决这个问题需要在超链接下添加新建链接

1
target="_blank"

image

image

我们进行测试:我们发现打开百度是在不同的页面下跳转打开的

image  

接下来我们再次为超链接定义功能,单击图形进行超链接打开操作

我们先下载一个图片:然后定义一个超链接:

1
< a  href = "www.baidu.com" > < img  src = "download.gif"  />

image

然后图片比较大,所以我们需要定义图片大小:

1
< a  href = "www.baidu.com" > < img  src = "download.gif"  height = "30"  ;40" />

image

image

接下来定义邮件超链接:

1
< a  href = "mailto:gaowenlong@qq.com?subject=call us" />联系我们 < a />

image

添加迅雷下载超链接:

1
< a  href = "thunder://www.baidu.com" >上海滩抢先版

image

image

单击开始下载:

image

标记符号:

如果当前也面的内容较多,为了方便预览,通过标记符号来定义:

首先是标记最顶部,然后在最后编辑跳转到top即可。

1
< a  name = "top" >

image

预览效果:

image

页面的最后后:

1
<a href="#top"回到顶部

image

预览效果:

image



本文转自 高文龙 51CTO博客,原文链接:http://blog.51cto.com/gaowenlong/1549421,如需转载请自行联系原作者

相关文章
|
9月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
997 64
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
550 4
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
733 28
|
12月前
|
开发者
(WEB CAD online )在线CAD实现圆孔标记功能
本文介绍了通过自定义实体 `McDbTestRoundHoleMark` 实现圆孔标记功能的方法。该功能支持多象限标记、可调节标记角度、多重标记及动态编辑,并自动计算包围盒以优化空间定位与选择操作。核心实现包括类结构定义、数据序列化、标记数据设置、夹点编辑及实体绘制等步骤。用户可通过插件初始化注册并创建圆孔标记,适用于工程图纸标注场景。在线Demo展示了实际效果,便于开发者参考与使用。
|
移动开发 前端开发 JavaScript
H5 页面与 Web 页面的制作方法
H5页面制作利用HTML5、CSS3和JavaScript技术,结合H5编辑器或框架(如Adobe Dreamweaver、Ionic),注重移动设备兼容性与响应式布局。Web页面制作则基于传统HTML、CSS和JavaScript,借助文本编辑器或IDE完成开发。两者区别在于技术版本、交互性和浏览器支持:H5更互动、现代,但可能不兼容旧浏览器;Web页面更静态、兼容性广。根据需求选择:高交互选H5,广泛兼容选Web。
1742 6
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1160 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
XML JSON 安全
定义Web服务
【10月更文挑战第18天】定义Web服务
379 12
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
2480 1
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
383 16