Dreamweaver 1 网页制作

1.站点

1.1 创建站点

点击菜单栏中站点进行站点创建,输入站点名称,路径

1.2 设置图像文件夹

1.3 站点管理

站点的编辑、复制、删除

2.页面属性栏

2.1 外观

1.设置页面整体的字体、大小、颜色

2.背景颜色,背景图像,图像是否重复,怎么重复

3.页面边距

2.2 链接

1.链接的字体、大小、颜色

2.链接颜色:

链接颜色:      本身颜色

变换图像链接:鼠标经过链接时的颜色

        已访问链接:  已访问之后的颜色

       活动链接:     鼠标点击时的颜色

2.3标题

1.能分为六层标题

2.设置标题字体、颜色

2.4 标题/编码

1.网页名称

2.5 跟踪图像

跟踪图像”是Dreamweaver一个非常有效的功能,它允许用户在网页中将原来的平面设计稿作为辅助的背景。
这么一来,用户就可以非常方便地定位文字、图像、表格、层等网页元素在该页面中的位置了。跟踪图像的具体使用是这样的:
首先使用各种绘图软件作出一个想象中的网页排版格局图,然后将此图保存为网络图像格式(包括gif、jpg、jpeg和png)。
用Dreamweaver打开你所编辑的网页,在菜单中选择“修改>页面属性”,然后在弹出的对话框中的“跟踪图像”项中输入刚才创建的网页排版格局图所在位置。
再在图像透明度中设定跟踪图像的透明度,OK。这样你就可以在当前网页中方便地定位各个网页元素的位置了。
使用了跟踪图像的网页在用Dreamweaver编辑时不会再显示背景图案,但当使用浏览器浏览时正好相反,跟踪图像不见了,所见的就是经过编辑的网页(当然能够显示背景图案)。

3.制作网页基本操作

3.1 文本

3.11 添加文本

直接编辑、复制粘贴、其他文件导入

3.12 添加空格

1.默认只能添加一个空格

2.通过插入菜单 —— HTML ——  特殊字符 —— 插入空格

3.Ctrl+shift+空格

3.13 添加日期

插入菜单进行操作

3.14 插入水平线

.通过插入菜单 —— HTML —— 水平线

3.15 添加特殊字符

.通过插入菜单 —— HTML ——  特殊字符

3.16设置文本格式

字体、大小、颜色

3.17 分段与换行

分段:enter

换行:shift+enter

3.18 设置段落格式

1.对齐方式:

2.列表变编号

3.缩进

3.2 图像

3.21 常用图片格式

1.GIF: 特点:图片数据量小、可带动画信息、可透明背景显示,最高只支持265种颜色

    用途:网站logo、广告条、网页背景图像

2.JPEG: 特点:可高效的压缩图片的数据量、图片变小却不会丢失颜色画质

     用途:显示照片等颜色丰富的图像

3. PNG:特点:融合了GIF能做透明背景的特点,又具有JPEG处理精美图像的特点

     用途:绘制网页效果图

3.22 插入图像

3.23 设置图像基本属性

图像名称、宽、高、源文件、替代、边框

3.24 图文混排

1.边距

2.对齐

3.25 编辑图像

1.裁剪

2.锐化

3.对比度、亮度

4.重新采样

5.优化(为图片瘦身)

3.26 鼠标经过更换图片特效

插入菜单栏完成

4.超链接

4.1 内部链接——同个网站中的其他网页

4.2 外部链接——不同站点或本站点以外的网页

1.链接中输入链接地址

2.目标中选择打开位置

  _blank :每点击一次链接创建一个新的窗口

  _self :会在当前窗口、框架页面中打开

  _new :会在同一个刚创建好的窗口中打开

  _parent :如果是嵌套框架,会在父框架中打开

  _top :会在完整的浏览器窗口中打开

4.3 链接样式

参考2.2

4.4 锚点链接——到网页中某一特定位置

1.选中要命名的锚点

点击锚点,对该锚点命名

2.选择链接点,

当前页面:在链接中输入 #锚点名

其他网页:网页地址#锚点名

4.5 E-mail电子邮件链接

选中需要连接部分,点击电子邮件链接,输入链接地址

4.6 下载链接

1.当文件是exe文件、zip、rar类型问件时浏览器无法直接打开,便会提示下载

4.7 空链接

1.在链接中输入#

2.一般导航栏中首页位置就是一个空链接

4.8 图像热区链接

在图像中绘制一块区域,创建链接

4.9 图像导航条

图像超链接

4.10 跳转菜单

选中表单中的跳转菜单,进行编辑

4.11 脚本链接——通过触发脚本命令

在链接中输入脚本代码

1. 添加到收藏夹:javascript:window.external.addFavorite(‘网址‘,‘名称‘)
2. 表示关闭窗口:javascript:window.close()
3. 表示弹出一个提示对话框:javascript:alert(‘hello!‘)
4. 设置为默认主页:(需通过空链接#,触发onClick事件)

在链接中输入#

选中链接点,在代码中#后输入
onClick="this.style.behavior=‘url(#default#homepage)‘;this.setHomePage(‘网址‘)"

4.12 超链接的管理

1.连接路径:

  绝对路径:链接中使用完整URL地址

  相对于文档的路径:../    表示上一层文件夹

  相对于站点根目录的路径:/  表示根目录

2. 自动更新链接 :文件位置变动,自动更新网页中链接路径

3. 检查连接

5.表格

5.1插入表格,进行设置

5.2 选定表格、单元格进行设置

5.3 表格嵌套

在单元格中插入表格

5.4 应用表格布局页面

5.41 类型:

1.国子型

2.拐角型

3.标题正文型

4.左右框架型

5.上下框架型

6.综合框架型

7.封面型

8.flash型

9.变化型

5.42 页眉

通常放置logo,广告条

5.43 页脚

放置版权信息、联系电话、网站介绍、备案信息等

5.44 导航栏

双倍单元格,空一格放一个信息,设置高度,内容位置

5.45 信息栏

6.框架

6.1 框架

一个框架就是一个区域,可以单独打开一个HTML文档,多个框架就组成了框架集

6.2 创建框架

选择框架结构,创建框架

6.3保存框架

有多少个框架就要保存多少次,再加最外层

6.4 作用

1.做网页的布局,将网页分成不同的部分

2.简化网页的编写:网页之间相同的内容,只需要编写一次

3.加快网页的浏览:每次网页只需要更新变化的那个框架的内容

6.5设置框架集和框架属性

鼠标单击框架边框,对框架进行设置

6.6自定义框架

1.拖动编辑窗口的边框:鼠标位于编辑窗口的边框,对边框进行拖动,创建新的框架

2.按住 alt 键时拖动

7.多媒体元素

7.1多媒体元素

flash多媒体元素

音频多媒体元素

视频多媒体元素

7.2 插入flash多媒体元素

7.21 flash动画

插入flash动画文件,扩展名为 .swf

7.22 插入flash按钮

Dreamweaver自身带有一些flash按钮

7.23插入flash文本

7.24插入图像查看器

7.25插入flash paper

7.26插入flash视频

7.3 插入音频多媒体元素

8.AP DIV元素

8.1. AP

AP:绝对定位元素,称为层,定位灵活

8.2 创建AP DIV

8.3 编辑AP DIV

8.4 层的可见性设置

8.5 层的嵌套

8.6 与表格的转换

9.行为特效

10.

时间: 2024-10-11 18:23:21

Dreamweaver 1 网页制作的相关文章

Dreamweaver CS5网页制作教程

说到Dreamweaver这个网页制作神器,不由得想起在学校里上的选修课,那是的我们只知道 table 布局,只知道构建网站最方便的是使用"所见即所得"编辑器.回忆一下,真的是很怀旧啊! 虽说咱现在大部分时间都在用sublimeText和eclipse,但是想要入门web前端,Dreamweaver的学习是必不可少的,他能帮助我们了解最基本的页面构成,了解图片相关的特性,了解什么是页面样式.... 现在看Dreamweaver,他就是一个集成众多功能的编辑器,即使他有一些不太惹嫌的bu

网页设计Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

网页设计 Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程 更多>

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通(CS4版) PDF扫描版

中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通(CS4版)内容丰富.实用,讲解循序渐进,每章都安排有丰富的应用实例.练习实例和知识问答,在每一页的下方还提供了与所讲解知识相关的操作技巧.注意事项和经验之谈,尽可能多地解决学习中的疑问,以满足不同学习阶段的读者对学习内容的不同要求. 中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通(CS4版)适合于从未接触过网页制作的初级读者,以及有一定网页制作基础但想灵活使用dreamweaver

第一天:网页制作基础

第一章:网页制作基础 2016-7.18 20:40---23:42 1-1 网站的概述 网页与网站网站是由许多的网页构成的 新浪网是网站浏览器:国外流行的浏览器为火狐,国内为360安全浏览器,用最多的是电脑自带的IE网页的基本元素:网页标题.LOGO.导航栏(顶部或者左边).文本(最基本信息).超链接(必不可少).图片.表单(文本框.按钮) 1-2 初识Dreamweaver制作网站的流程:规划网站类型及主题 .搜集资料素材.使用软件进行网页制作.测试及发布网页三剑客:Dreamweaver(

网页制作之html基础学习1-简介

学习网页制作主要分为三大块 1.HTML    超文本标记语言( 全称:Hyper Text  Markup Language) 专门编辑静态网页 2.CSS      网页美化:是HTML控制的样式.格式的一部分 3.Javascript   脚本语言:主要是编写网页中动态效果的. html 模块部分 一.简介: 超文本标记语言,静态网页.可以说是一系列“标签”组成的“文本文档”.HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,其主要特点如下:

网页制作工具哪款软件最好?

我是专门制作网页的,刚开始我主要是写后台代码的,后来在这个行业里混,前台也渐渐学会了,刚开始我用的网页编辑器是记事本.最后来的用的是EmEditor,当然中间还用过很多其它的,就我自己的看法谈谈网页制作工具哪款软件最好用吧! 如果您是一位前台网页设计及制作人员,首选网页设计制图软件是PS(Photoshop)cs4 图像处理软件:可以为提供最专业的图像编辑与处理.软件通过更直观的用户体验更大的编辑自由度以及大幅提高的工作效率. 其次是网页制作软件:Dreamweaver软件,该软件已成为专业级网

网页制作工具

一.菜鸟级网页制作软件 如果你是一个网页制作初学者,那么让下面几种软件带你走进那绚丽多彩的网页制作世界吧! ①Microsoft FrontPage 如果你曾对Word很熟悉,那么相信你用FrontPage进行网页设计一定会非常顺手.使用FrontPage制作网页,你能真正体会到“功能强大,简单易用”的含义.页面制作由FrontPage中的Editor完成,其工作窗口由3个标签页组成,分别是“所见即所得”的编辑页,HTML代码编辑页和预览页.FrontPage带有图形和GIF动画编辑器,支持CG

HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版?

html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记--同时介绍了目前流行的web标准与css网页布局实例,以及基于语言的网页特效制作.需要的朋友们可以下载看看! HTML\CSS\JavaScript网页制作从入门到精通共分为18章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特效制作.为了便于读者学习,附录中