dw网站设计教程第一期(dw做网站教程)
本篇文章给大家谈谈dw网站设计教程第一期,以及dw做网站教程对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
求Dreamweaver初级入门教程
可以在verycd.com用emule下载很全的教程。
《Dreamweaver教程》(Dreamweaver 8 New Features)[Bin]
《Dreamweaver 8 傻瓜教程》
《Dreamweaver 8 Beyond the Basics》CFE 教程[Bin]
《Macromedia.Dreamweaver.8 多媒体教程 I II》
《FIF小组dreamweaver视频教程集.rar》
FIF小组是一个致力于多媒体教程开发的制作小组。自2004年开始,陆续在PConline等网站不断推出视频教程(包括FLASH, FIRWORKS,DREAMWEAVER,PHOTOSHOP)。该压缩包中包含了DREAMWEAVER视频教程的全部内容,这个教程相当易懂,用的是FLASH格式。
第一章、网站概述
1.1 网站与网页的概述
1.2 网页的基本元素
1.3 网页布局
1.4 配色原则
1.5 HTML与渲染
第二章、制作工具
2.1 安装与启动
2.2 文档使用
2.3 工作区结构 (上) (下)
2.4 菜单概述 (上) (下)
2.5 插入栏详解
2.5.1常用工具栏使用(上) (下)
2.5.2布局工具栏使用(上) (下)
2.5.3表单工具栏使用(上) (中) (下)
2.5.4文本工具栏使用(上) (下)
2.5.5HTML工具栏使用
2.5.6flash元素工具栏的使用
2.5.7收藏夹工具栏的使用
2.6 面板组
2.6.1使用面板和面板组
2.6.2设计面板
2.6.3代码面板(上) (下)
2.6.4标签检查器面板(上) (下)
2.6.5属性面板
第三章、HTML
3.1 HTML 概念
3.2 一个HTML的示例
3.3 页面头部
3.3.1HTML 头部标记
3.3.2标题标记title
3.3.3基底网址标记base
3.3.4基底文字标记base font
3.3.5元信息标记meta(上) (下)
3.4 网页内部细则
3.4.1 HTML内部主体标记(上)(中)(下)
3.5 文字段落
3.5.1文字主要包括的内容
3.5.2标题字标记
3.5.3文字和段落的修饰标记(上)(中)(下)
3.5.4文字的其它标记
3.6 列表的建立
3.6.1列表的标记
3.6.2有序列表
3.6.3无序列表
3.6.4列表的嵌套
3.7 图片
3.7.1图片的格式(上) (下)
3.7.2文本环绕与停止环绕
3.7.3图像映射
3.8 链接
3.8.1文字链接
3.8.2锚点和图片链接
3.8.3电子邮件链接、FTP链接、新闻组链接
3.9 表格
3.9.1表格(上) (中) (下)
3.9.2表格标题
3.9.3 cospan,roswspan属性
3.9.4表格的嵌套
3.9.5tr标记
3.10 建立表单页面
3.10.1什么是表单
3.10.2表单标记
3.10.3文本域
3.10.4文本域类型
3.10.5文件域
3.10.6按钮和图像域
3.10.7select,option
3.11 框架
3.11.1框架含义
3.11.2 frame框架标记
3.11.3 创建框架和分割框架
3.11.4 浮动框架
3.11.5 框架链接
3.11.6 浮动框架的链接
3.12 层
3.12.1 层的功能
3.12.2 层的基本属性
第四章、CSS层叠样式表
4.1 CSS的介绍
4.1.1 为什么应用CSS
4.1.2 CSS的优点
4.2 CSS的声名(上)(下)
4.3 CSS的类型
4.4 创建CSS样式表文件及基本写法
4.5 层叠样式表的冲突
4.6 CSS的单位
4.7 CSS的属性
4.7.1类型属性
4.7.2背景属性
4.7.3区块属性(上)(下)
4.7.4方框属性
4.7.5边框属性
4.7.6列表属性
4.7.7定位属性
4.7.8扩展属性
4.8 CSS的过滤器属性(上)(下)New
第五章、Javascript
5.1 Javascript概念、特点和作用 New
5.2 Javascript的格式和常量 New
5.3 变量 New
5.4 表达式和运算符(上)(下) New
5.5 语句(上)(下) New
5.6 变量
5.7表达式和运算符
5.8语句
5.8.1 For 语句
5.8.2 If 语句
5.8.3 Do--while语句
5.8.4 switch语句
5.8.5 break语句
5.9函数
5.9.1 定义函数
5.9.2 调用函数
5.10 Javascript的对象
5.10.1 浏览的对象
5.10.2 Javascript内置对象
5.10.3自定义对象
5.11 Javascript事件
5.11.1 on click事件
5.11.2 on change事件
5.11.3 on select 事件
5.11.4 on load 事件和on unload事件
5.11.5 on mouseover 事件和 on mouseout 事件
第六章、把网站放到网上
6.1 站点
6.2 WWW 服务
6.3 FTP 服务
第七章、网站的组织与策划
7.1 策划的重要性
7.2 从那里开始
7.3 要考虑的问题
第八章、一起建设一个网站
8.1 一起建设一个网站1
8.2 一起建设一个网站2
8.3 一起建设一个网站3
8.4 一起建设一个网站4
8.5 一起建设一个网站5
8.6 一起建设一个网站6
8.7 一起建设一个网站7
8.8 一起建设一个网站8
8.9 一起建设一个网站9
8.10 一起建设一个网站10
8.11 一起建设一个网站11
8.12 一起建设一个网站12
8.13 一起建设一个网站13
8.14 一起建设一个网站14
8.15 一起建设一个网站15
8.16 一起建设一个网站16
8.17 一起建设一个网站17
8.18 一起建设一个网站18
8.19 一起建设一个网站19
8.20 一起建设一个网站20
第九章、常见问题
9.1 常见问题1
9.2 常见问题2
9.3 常见问题3
dreamweaver怎么制作网页教程 dw建站设计网页
Dreamweaver这一款专业的网页制作软件,相信相关专业的人员都不会陌生。可以说,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
这里西西给大家带来一个dreamweaver制作网页的教程,初学DW的朋友可以参考一下。
一、定义站点
1、 在任意一个根目录下创建好一个文件夹(我们这里假设为E盘),如取名为MyWeb。
***备注:网站中所用的文件都要用英文名。
2、打开Dreamweaver,选择“站点—新建站点”,打开对话框。在站点名称中输入网站的名称(可用中文),在本地根文件夹中选择刚才创建的文件夹(E:web)。然后确定即可。
***备注:再次打开Dreamweaver,会自动找到刚才设立的站点。如果有多个站点,可以在菜单“站点—打开站点”中去选择。
二、创建页面
1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件”,这样就建好了一个页面,默认的文件名为untitled.htm。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。
***网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。
2、双击index.htm进入该页面的编辑状态。在标题空格里输入网页名称,按右键选页面属性,打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背影图像,超级链接的颜色(一般默认即可),其他都保持默认即可。
3.此时光标位于左上角,可输入一句话,如“欢迎来到我的主页”。选取文字,用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间。
4.如要选取字体,则选择字体中的最后一项:编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。
***在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用,因为别人电脑上未装就看不到。如果需要用的话,要做成图片后再使用。
***在网页上打入空格的办法是:把输入法调为全角。
***在网页上换行的办法是:shift+Enter。只按Enter则为换段。
三、为页面添加图片
1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件夹”,这样建立了一个文件夹,用它来放图片,可以改名为tu或pic或images都可以。
2、用菜单“窗口/对象”打开对象面板,点击“插入图像”,在对话框里选要插入的图片。如果会出现对话框:“你愿意将该文件复制到根文件夹中吗?”,必须选“是”,然后将它保存到刚建好的文件夹里。
3、选中该图片,打开属性面板,可以在上面为图片取名,重新设置图片的高、宽,拖住图片角上的点可以变大小。按住shift键,再拖动角上的点,可以使图片保持宽高比例拉伸。如要恢复这原始大小,则单击右下角的“重设大小”按钮。
DW建站怎么制作设计网页终极教程
一、定义站点
1、 在任意一个根目录下创建好一个文件夹(我们这里假设为E盘),如取名为MyWeb。
***备注:网站中所用的文件都要用英文名。
2、打开Dreamweaver,选择“站点—新建站点”,打开对话框。在站点名称中输入网站的名称(可用中文),在本地根文件夹中选择刚才创建的文件夹(E:web)。然后断定即可。
***备注:再次打开Dreamweaver,会自动找到刚才设立的站点。如果有多个站点,可以在菜单“站点—打开站点”中去选择。
二、创建页面
1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件”,这样就建好了一个页面,默认的文件名为untitled.htm。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。
***网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。
2、双击index.htm进入该页面的编辑状态。在标题空格里输入网页名称,按右键选页面属性,打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背影图像,超级链接的颜色(一般默认即可),其他都维持默认即可。
3.此时光标位于左上角,可输入一句话,如“欢迎来到我的主页”。选取文字,用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间。
4.如要选取字体,则选择字体中的最后一项:编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。
***在网页上最常用的是宋体字。不要将特殊的字体加到列表中应用,因为别人电脑上未装就看不到。如果需要用的话,要做成图片后再应用。
***在网页上打入空格的办法是:把输入法调为全角。
***在网页上换行的办法是:shift+Enter。只按Enter则为换段。
三、为页面添加图片
1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件夹”,这样建立了一个文件夹,用它来放图片,可以改名为tu或pic或images都可以。
2、用菜单“窗口/对象”打开对象面板,点击“插入图像”,在对话框里选要插入的图片。如果会出现对话框:“你愿意将该文件复制到根文件夹中吗?”,必须选“是”,然后将它保存到刚建好的文件夹里。
3、选中该图片,打开属性面板,可以在上面为图片取名,重新设置图片的高、宽,拖住图片角上的点可以变大小。按住shift键,再拖动角上的点,可以使图片维持宽高比例拉伸。如要恢复这原始大小,则单击右下角的“重设大小”按钮。
4、 “链接”可以直接在这里输入地址。“替代”是图片的说明,即鼠标指向图片所显示的文字;“边框”是图片边框宽度,“对齐”是对齐方式。
四、添加超级链接
1、为文字添加链接。
比如,在页面上输入“我的文章”,然后将其选中,打开属性面板,在“链接”一格中,选择它所要链接到的页面即可。后面一格“目标”我们一般常用的是self即打开的新窗口代替了现开的窗口;或是选择blank即打开新窗口。
2、为图片添加链接
与上面文字的链接同理,插入图片,然后在属性面板中的链接一格中选择即可。
****图片可以创建不同的多个链接。法子如下:
在属性面板中的“地图”一项下面有一些图形,比如点击方形,光标变成十字,在图片上画一个蓝色矩形的热区,此时在属性面板上可以为这个热区设置链接地址,鼠标指向会显示。同样,再用圆形设置一个热区,就可以再为该图片设置其他链接了。
3、添加E-mail链接
选中需要添加E-mail链接的文字或图片,打开属性面板,在“链接”一格中输入填写邮件地址。款式如下:mailto:邮件地址。注意中间不空格。
4、如果链接到涉猎器无法打开的文件,例如exe、Zip等文件,那么涉猎者在点击这个链接的时候,就会实现文件下载、或是在线播放的功能。
五、表格的应用
1、点击插入/表格,打开表格面板进行设置。行数、列数、宽度、边框等,“单元格填充”为单元格内侧与内容的距离;“单元格间距”为单元格之间的距离,单位均为像素。
2、插入表格后,在表格的边框上点击一下,可以全选全部表格。然后在下面的属性面板里可以进行各种设置。
3、把光标移到其中一个单元格,此时看到的属性面板,就是单元格的属性面板。也可以进行各种关于单元格的操作。如背风景、背景图、边框、合并、拆分等。
六、关于表格的其他操作
一制作细线表格 原理:
1、选中全部表格,设置其背景为黑色(该颜色即表格线的颜色)。
2、选中所有单元格,设置其背景为白色。
二自动款式化表格
1、先制作好一张表格,然后选中。
2、选菜单中的命令/款式化表格。即可以其中选择预设好的一些表格样式。
三一像素分割条
1、插入一个1行1列,宽为200像素,边框边距均为0的表格。
2、选中表格,设置表格高为1像素,并设置一个背风景(即所要的线条颜色)。
3、切换到代码和设计窗口,将代码td 删除。
七、用表格构建完整的页面
一网页顶部(一般包括图标、广告、导航菜单)
1、创建一个1行2列,宽为760像素,边框及边距均为0的表格。
2、选中表格,设置排列方式为居中对齐,背风景为#3366CC。
3、将光标置于左边单元格中,设置其水平排列为左对齐,垂直排列为顶端对齐,然后插入一张图像,一般在此插入的是网站的图标,即logo。
4、将光标置于右边单元格中,设置其宽度为500,水平排列为居中对齐,垂直排列为中间,然后插入图像,一般是网页广告,即banner。
5、将光标置于刚完成的表格之后,插入/表格,创建一个1行1列,宽为760像素,边框及边距均为0的表格。
6、选中刚创建的表格,设置排列方式为居中对齐,背风景为#005173。
7、在该表格中依次插入多个图像,作为导航条菜单。
二网页中部(左边栏目列表、中间网站新闻、右边栏目列表)
1、 在导航条表格后面,插入/表格,创建一个1行3列,宽为760像素,边框及边距均为0的表格。并设置排列方式为居中对齐,背风景为#FFFFFFF。
2、 将光标置于左边单元格中,设置其宽度为18%,水平排列为居中对齐,垂直排列为顶端对齐,然后插入一张图像,插入一个导航条。
3、 将光标置于刚插入的图片后,插入/表格,插入一个12行1列,宽为90%的表格。设置其单元格间距为1,背风景为#CCCCCC。
4、 将光标放在表格第一个单元中,设置其高为20,背风景为#FFFFFF。插入/图像,插入一个导航文字前面的小点。同样设置其他11个单元格,这样左边的栏目分类列表就完成了。
5、 将光标置于主体表格的中间单元格中,设置其宽度为66%,水平排列为居中对齐,垂直排列为顶端对齐,然后插入/图像,插入一个导航条。
6、 将光标置于图像后,插入/表格,插入一个4行1列,宽为95%的表格。设置其单元格间距为1,背风景为#CCCCCC。
7、 将光标置于表格的第一个单元格中,拖动鼠标,将4个单元格都选中,设置高为60,背风景为#FFFFFF。
8、 将光标置于主体表格右边的单元格中,设置其宽度为16%,水平排列为居中对齐,垂直排列为顶端对齐,插入/图像,插入一个导航条。
9、 将光标置于图像后,插入/表格,插入一个7行一列,宽为90%的表格。设置其间距为1,背风景为#CCCCCC。
10、按住Ctrl键,用鼠标点击刚插入的表格的第1、3、5、7单元格,然后设置它们的高为55,背风景为#FFFFFF。
11、选中第2、4、6单元格,设置其高为6,背风景为#FFFFFF。
12、切换到源代码窗口,将第2、4、6单元格中的空格符号“ ”删除。
三网页底部(一般包括版权信息及其他相关内容)
1、 将光标置于主体表格后,插入/表格,创建一个2行2列,宽为760像素,边框及边距均为0的表格。
2、 选中表格,设置排列方式为居中对齐,背风景为#3366CC。
3、 将光标置于表格第1行的左边单元格中,设置其宽度为50%,水平排列为默认,垂直排列为基线,背风景为#FFFFFF,然后输入版权信息,内容颜色随便。
4、 将光标置于表格第1行右边单元格中,插入/图像,插入一个圆角图像,在它后面输入Email字样,设置其大小和颜色为1和#FFFFFF。
5、 插入/表单对象/文本域,插入一个文本域,宽度可以随意。
6、 插入/图像,插入一个GO的图像。
7、 设置页属性。点击菜单改动/页面属性,在标题一栏中输入标题,并选择背景图像,将顶部边界设为0。
***将全部网页分部分放到不同的表格中组合而成,还可以加快涉猎器读取页面的光阴。;因为涉猎器是读完全部表格后才显示内容的,所以最好不要框在全部一个表格中。
八、用布局表格构建完整的页面
1、 单击插入/布局,里面的布局视图按钮,就切换到布局视图状态(默觉得标准视图)。也可以用菜单里的查看/表格视图/布局视图来进入。
2、 先单击绘制布局表格按钮,,然后在页面中像绘图一样创建出布局表格。
3、 就像上一个例子一样,先绘制好网页的顶部,再中部,再底部的大表格。
4、 再单击绘制布局单元格按钮,然后在已经绘制好的布局表格中,再绘制布局单元格。
5、 返回到标准视图,在已经划分好的表格里,再插入嵌套的小的表格,把页面再细化,就可以完成全部页面的设计了。
****注意把全部页面都放在一个大的布局表格中,因为这样的网页涉猎速度会很慢。应该遵照页面的版面和内容划分出几个布局表格,然后在其中分辨插入布局单元格。
九、层的应用
1、点击插入/层。也可以点击图标,然后拖动鼠标创建出一个层。
3、选中创建的层,看属性面板。“层编号”和“标签”都应用默认即可。“层编号”是编程时需要用的,我们现在一般不用。“上”即距页面上边界的距离;“左”是距左边界的距离。“z轴”是层的顺序,数字大的叠加在数字小的上面。
****如不设置颜色时,层是透明的。
4、点中层左上角的小方框可以随意拖动层,大小也可以调节。
5、“溢出”一栏中,当文字多于层的大小时,visible(越过的部分照样显示)、hidden(越过部分隐藏)、scroll(不管有否越过,都显示滚动条)、auto(有越过时才出现滚动条)。
6、点击菜单窗口/其他/层,此时将出现层管理窗口。可以在其中改动层的名称和Z轴值,也可以点击眼睛图标使层可见或不可见。还有一个防止重叠的选项。
7、层的对齐。按住shift键,同时选中几个层。然后用改动/对齐,用这里的选项。
8、嵌套层。⑴首先在文档中插入一个层。⑵将光标置于该层内,然后持续插入一个层,就得到了嵌套层。⑶里面的叫子层,外面的父层。它们的Z轴顺序是一样的。拖动父层时,子层也会相对移动。移动子层时,父层不会随之移动。
十、领会光阴轴
1、点击菜单中的插入/层,插入一个层。
2、在层中插入图片,如一张飞机的图片。(这里的图片也可以是一张小动画的.gif图像)
3、点击菜单中的窗口/其他/光阴轴,打开光阴轴窗口。
4、选中页面上创建的层,用鼠标按住层左上角的小方框图标,将层拖放到光阴轴的第1帧中。这时自动创建了一个长度为15帧的光阴轴。
5、选中光阴轴上的第1帧,将页面中的层拖放到页左上角,即动画开始时的位置。
6、选中光阴轴上第15帧,可以拖动该帧至任意长度,如30帧。
7、选中第30帧,将层拖放到页面的右下方,此时窗口中显示出层从第1帧到第30帧的运动轨迹。(此时运动为直线)
8、可以点中第15帧,右键选“增加关键帧”,在选中第15帧的状态下,拖动层到页面中下方。
9、勾选“自动播放”项。
十一、制作滚动公告牌
1、在页面上插入一个层,然后为层设置一个背景,作为公告版的框架。
2、然后在创建的层中插入嵌套层,将嵌套层移动到父层的下方。
3、在嵌套层中输入文本,并将其居中排列。
4、打开光阴轴面板,将子层作为对象添加到面板中。
5、为子层创建一个向上移动的路径,将其移动到父层的上方。
6、拖动最后一关键帧,增长动画光阴,然后勾选“自动播放”和“循环”两项。
7、选定父层,在其属性面板中将“溢出”属性设置为“hidden”。
十二、在页面中运用flash动画
1、点击插入中的Flash按钮,即可为页面插入一个动画。也可以选菜单插入/媒体/Flash来完成这一步。
2、选中已插入的动画,看属性面板。这里可以设置它的宽、高,也可以通过拖动来改变大小。
3、可以在这里点击“播放”来预览动画。
十三、让插入的flash动画变透明
1、当网页上已经有背景,或是想要在一张图片上再插入flash动画,而flash动画本身也有背风景,所以会影响美观,这时我们要把它做成透明动画。
2、如在页面上插入一张图像。
3、在图像上插入一个层,在层中插入好所需要的flash动画。
4、选中flash动画,在属性面板中点击“参数”按钮。
5、在“参数”的左面一格输入“wmode”。在右面“值”一格输入“transparent”。
十四、在页面中播放声音
1、在完成全页面以后,如果要为该页添加背景音乐,注意背景音乐一般是*.midi文件,这样的声音文件十分小,易于快速下载,其他款式不适合作为背景音乐。
2、在页面中所有表格之外,(注意此时编辑窗口左下方的标签选择栏中仅显示body这一项,或是在左下角点一下body,这样才干保证这个行为是添加在全部页面上的)。点击行为窗口上的“+”按钮,(或用菜单 窗口/行为,打开行为窗口。)
3、从弹出菜单中选择“播放声音”。打开一个对话框。
4、在这个对话框里用“涉猎”选择要播放的声音,并断定。
5、这时行为面板上自动显示了事件为onload,动作为播放声音。点击这一行,中间出现一个按钮。点击按钮,可以设置这个声音在什么事件下播放。可以选择“显示事件”/“IE5.0。
6、我们常用的如Onload(当页面载入时)、OnClick(单击鼠标)、OnMouseOver(鼠标移到对象上)、OnUnload(当关闭页面时)等。
7、该行为也可以设置在图片上、文字链接上。在文字链接上播放声音之前,先为文字添加一个空链接,即选中文字,在链接一格里输入一个“#”符号。
十五、弹出窗口
1、首先制作一个准备在小窗口中显示的页面(比如a.htm),由于这个弹出窗口不能太大,所以内容要少一些。
2、打开一个制作好的页面,把光标移到页面中所有我表格以外,点击行为窗口上的“+”按钮,从弹出菜单中选择“打开涉猎器窗口”一项。
3、在对话框中里输入相应的设置。要显示的URL即a.htm,窗口宽度和高度自己定,单位为像素。属性中的各项参数需要就打勾。
4、设置完毕后,点“断定”。此时行为窗口中将显示打开涉猎窗口这个行为,触发条件为Onload,如果不是要这项,就自己设置。
5、该行为也可以设置在图片上、文字链接上。。
6、可以用这个法子来表示对涉猎者的打开时的欢迎、网站公告、离开时的告别语等。
十六、把持状态栏信息
1、打开页面,选中一张图片。
2、点击行为窗口上的“+”号按钮,选择设置文本/设置状态条文本。
3、在对话框里的“消息”一栏里,输入需要显示的话,如对这张图片的介绍。
4、可以设置行为的触发条件为OnMouseOver(鼠标移到对象上),这样当鼠标经过这张图片的时候,状态栏将出现相关的信息。
5、如果需要鼠标在移开后,这个信息消失,那么再次应用这个行为,在“消息”一栏里什么都不写,然后把触发条件改为OnMouseOut(鼠标移开)。
6、同样可以在一段文字上设置该行为。或是设置在全部页面上也可以。
关于dw网站设计教程第一期和dw做网站教程的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。