dreamweaver网站制作教程

个人网站制作用Dreamweaver实现动态网站

个人网站制作用Dreamweaver实现动态

网站

MacromediaDreamweaverMX是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论您愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中，Dreamweaver都会为您提供有用的工具，使您拥有更加完美的Web创作体验。Dreamweaver使您可以使用服务器技术(例如CFML、http://www.77cn.com.cn、ASP、JSP和PHP)生成由

个人网站制作用Dreamweaver实现动态网站

动态数据库支持的Web应用程序。

Dreamweaver

系统软件要求本教程将运行在WindowsXP操作系统上，由IISWeb服务器和Aess2003数据库建立Web站点，通过DreamweaverMX2004+ASP技术开发动态页面的技术。表软件环境列表软件应用WindowsXP操作系统IIS5.0Web服务器Aess2003数据库DreamweaverMX2004动态页面设计

WindowsXP的Inter信息服务(IIS)给Windows带

个人网站制作用Dreamweaver实现动

南京信息职业技术学院

毕业设计论文

作者 学号 41321P

系部 计算机与软件学院_________ 专业 计算机网络技术__________ 题目 基于Dreamweaver的校园网站制作__ ______________________________________ 指导教师 ______ 史律_______________ 评阅教师______________________________ 完成时间： 2016 年 4 月 20 日

1

毕业设计(论文)中文摘要

(题目)：基于Dreamweaver的校园网站制作 摘要：本人的毕业论文主要是使用了Photoshop、Dreamweaver、DIV+CSS制作了本网站的界面。论文阐述了我的网站的设计和制作的主要过程，其中包括设计规划、设计准备、设计过程、网站测试四个部分，其中设计规划主要是介绍了本网站的设计方向及目的、设计准备主要介绍设计网站所使用的Photoshop、Dreamweaver、DIV+CSS三个主要软件、设计过程主要具体介绍了本网站建站具体步骤和设计思路、网站测试主要是介

一、使用Dreamweaver CS5制作下拉菜单

1. 在“插入”面板中点击“绘制 AP Div”按钮插入一个AP Div。请阅读Dreamweaver CS5插入AP Div。

2. 选择刚才插入的AP Div。请阅读Dreamweaver CS5激活、选择和删除AP Div。

3. 在AP Div属性面板上，设置AP Div的参数。如下图所示：

请阅读Dreamweaver CS5中AP Div属性面板。

4. 在AP Div内单击，将光标放在AP Div内，然后插入一个一行四列的表格，如下图所示：

请阅读Dreamweaver CS5插入表格。

（1）按住Ctrl键的同时点击表格的四个单元格，设置它们的宽度都为120。请阅读Dreamweaver CS5改变单元格的高度和宽度。

（2）在单元格中分别输入主菜单名称，然后加上链接。请阅读Dreamweaver CS5创建超链接。如下图所示：

如果AP Div与表格的设置不一致，可以分别调整AP Div或者表格。

5. 重复1.2.3.的步骤再次插入一个AP Div，然后设置AP Div的参数。如下图所示：

注意：

“左”和“上”两个参数是设置这个AP Div距离窗口左边框和上边框的距离的，如果填写的不正确，会导

相关软件准备

在进行具体制作之前要做什么准备工作呢？

首先必须要有一个合适的动态网页开发环境，如果是windows98操作系统，则必须要安装windows98中PWS 也既个人web服务器。这个东东在win98安装光盘中的add_ons目录下可以找到。(前面写的这段早过时了，现在谁还用win98呢？嘿嘿)如果您使用的

win2000/2003/winxp操作系统的话那就更方便了。只需要安装IIS(internet信息服务器，也称web服务器)就可以了，如果您的系统还没有安装，那么，在“控制面板”中“添加删除程序”中“windows组件”里面给装上就行了。当然要制作网页还必须要安装时下最流行最专业的网页制作软件DreamweaverMX(2004)，还要安装Microsoft Offce2000或以上版本，因为我们要用里面的数据库软件ACCESS来作为动态内容源,安装了office2000,里面就包含了Access数据库软件。

本人使用的电脑配置是windows2000 professonal+acess2000系统，所以要用这个环境来给大家作介绍了。

设置IIS

以上条件具备之后，我们还没有构建了一个正确的网页开发环

一、使用Dreamweaver CS5制作下拉菜单

1. 在“插入”面板中点击“绘制 AP Div”按钮插入一个AP Div。请阅读Dreamweaver CS5插入AP Div。

2. 选择刚才插入的AP Div。请阅读Dreamweaver CS5激活、选择和删除AP Div。

3. 在AP Div属性面板上，设置AP Div的参数。如下图所示：

请阅读Dreamweaver CS5中AP Div属性面板。

4. 在AP Div内单击，将光标放在AP Div内，然后插入一个一行四列的表格，如下图所示：

请阅读Dreamweaver CS5插入表格。

（1）按住Ctrl键的同时点击表格的四个单元格，设置它们的宽度都为120。请阅读Dreamweaver CS5改变单元格的高度和宽度。

（2）在单元格中分别输入主菜单名称，然后加上链接。请阅读Dreamweaver CS5创建超链接。如下图所示：

如果AP Div与表格的设置不一致，可以分别调整AP Div或者表格。

5. 重复1.2.3.的步骤再次插入一个AP Div，然后设置AP Div的参数。如下图所示：

注意：

“左”和“上”两个参数是设置这个AP Div距离窗口左边框和上边框的距离的，如果填写的不正确，会导

目 录

一、下载软件并安装 ....................................................................................................................... 2

1、安装SQL2008 ..................................................................................................................... 2 2、安装Visual Studio 2010和.net FrameWork 4.0 ................................................................ 2 3、安装Adobe CS6中的DW、PS、FL ................................................................................... 2 4、安装Win 7系统下的IIS .........................

使用Dreamweaver制作简单网页

专题二 使用DW制作简单网页王永固 wangyg@ 15867180528

/myblog/

使用Dreamweaver制作简单网页

学习内容一、设置文件头二、使用文本

三、使用图像四、使用Flash动画 五、使用音频 六、使用视频

/myblog/

使用Dreamweaver制作简单网页

一、设置文件头1、设置网页的编码 2、设置文档标题 3、定义关键字 4、设置说明文字 5、设置网页的刷新 6、查看代码

/myblog/

使用Dreamweaver制作简单网页

1、设置网页的编码

/myblog/

使用Dreamweaver制作简单网页

设置网页的编码

/myblog/

使用Dreamweaver制作简单网页

设置网页的编码

在所有情况下都用 GB2312么？

/myblog/

使用Dreamweaver制作简单网页

设置网页的编码

/myblog/

使用Dreamweaver制作简单网页

2、设置文档标题

/myblog/

使用Dreamweaver制作简单网页

3、定义关键字多个关键字用逗号分隔开

来。输入的关键字能反映主页 的内容 关键字不宜太多，一般在 5个以内。

/myblog/

使用Dreamweaver制作简单网页

4、设置说明文字说明文字和关键

网页设计上机考试题集

注意：所有题目中涉及的素材都在考试文件夹内，其中图片在下面的pic文件夹中，音乐、flash在media文件夹。

1) 在1.html中的顶部添加一个锚点链接，点击之能立即到达页面最底端。

2) 将1.html中的所有链接的默认样式改成红色字体及不带下划线(使用CSS规则a:伪类)。

3) 在2.html页面中将地图中的烟水亭位置增加一个热点链接指向pic文件夹下的烟水亭.jpg，实现点击看到烟水亭大图的效果。

4) 在框架网页4.html中左侧文章索引部分增加一个新文章（1.html）链接，并且实现在点击链接后让新文章出现在右侧正文栏框架中。

5) 在框架网页4.html中左侧文章索引部分增加一个友情链接的菜单项如下图所示（链接可随意设置）：

6) 在1.html中添加一个会飞的蝴蝶（butterfly.gif）的动画。 7) 修改框架页面4.html中的索引为列表，并创建CSS规则让列表项目符号自定义成图片（new.jpg）。

8) 将3.html中的表格边框设置成只有外边框而内部单元格则没有，如下图效果

9) 将3.html中的表格单元格2拆成2列，其中第二列插入图片（pic/嘻嘻.jpg），并且让图片靠上边对齐，

第8章 使用CSS样式控制网页外观

一、填空题 1、（ ）是“Cascading Style Sheet”的缩写，可译为“层叠样式表”或“级联样式表”。 正确答案：CSS

2、在Dreamweaver中，根据选择器的不同类型，CSS样式被划分为3大类，即（ ）、标签和高级。 正确答案：类

3、CSS样式表文件的扩展名为“（ ）”。 正确答案：.css

4、设置活动超级链接的CSS选择器是（ ）。

正确答案：a:active 5、应用（ ），网页元素将依照定义的样式显示，从而统一了整个网站的风格。 正确答案：CSS样式表

二、选择题

1、在【新建CSS规则】对话框的【选择器类型】单选按钮组中，选择【类（可应用于任何标签）】表示（ ）。 A、用户自定义的CSS样式，可以应用到网页中的任何标签上，

B、对现有的HTML标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新

C、对某些标签组合或者是含有特定ID属性的标签进行重新定义样式 D、以上说法都不对 正确答案：A

2、在【新建CSS规则】对话框的【选择器类型】单选按钮组中，选择【标签（重新定义特定标签的外观）】表示（ ）。 A、用户自定义的CSS样式，可以应

第8章使用框架技术

学习目标

能够理解框架和框架集的概念。

能够运用预设方式和自定义方式创建框架。

能够设置框架和框架集的属性。

能够删除和存储框架和框架集文件。

能够使用框架技术制作网页

8.1

第8章使用框架技术

本章内容

8.1　案例制作：利用框架技术制作网站“绘声绘影”

8.2 新知解析

8.3 实战演练：Maya火星课堂

8.2

第8章使用框架技术

8.1　案例制作：利用框架技术制作网站“绘声绘影”

通过本案例的操作，你

将学会：如何建立框架和框

架集、如何设置框架和框

架集的属性、如何设置框架

面板。

8.3

第8章使用框架技术

8.1　案例制作：利用框架技术制作网站“绘声绘影”

操作步骤：

1）定义站点。新建文件夹“hshy”，将素材文件夹“hshy”中所有文件和文件夹拷贝到

“hshy”文件夹中。在Dreamweaver CS5中定义站点，站点名称为“绘声绘影”，本地站

点文件夹为hshy文件夹。

2）新建网页文件，在“插入”面板“布局”选项卡中单击“框架”按钮旁边的黑色小三角，

在弹出菜单中选择“顶部和嵌套的左侧框架”命令，如图所示，会打开“框架标签辅助功

能属性”窗口，点击“确定”按钮，此时文档窗口如图所示。

8.4

第8章使用框架技术

8.1　案例制作：利用框架技术制作网站