DreamweaverCS6制作网页很方便,为了方便学习我们我们举了一个实际的例子,使用DreamweaverCS6做了一个简单的网页,非常简单,适合新手学习,需要的朋友可以参考

以实例说明Dreamwaver CS 6版本的应用。即使现在用很多有关DreamwaverCS6版本的书籍资料,但是资料太过复杂,反而不知道从而下手。这篇将以本人说说Dreamwaver CS6 的使用。这里举的例子是“网页首页”的制作。

1、打开DW,DW界面如图

2、分析所制作的网页的需求,明确目标

3、明确需求。如果是建议一个网站,需要建立一个站点,方便管理并使制作步骤更为有条理。

4、新建站点弹出来的窗口。在这里我输入的是“网页”,放在Dreamwaver CS6文件夹下的网页文件夹

5、在网页文件夹下新建“images”文件,导入制作网页所需要的素材,这里所需要的素材都是图片

6、新建HTML,选择“创建

7、在“标题”中输入网页首页”,转换到“设计”界面

8、根据制作网页需求插入表格,只是在行列有所变化,下面的“表格宽度”以下选项根据图设置

9、插入表格如图,选择表格,会看到表格边框变红,选择之后变黑。在属性中对齐选项选择“居中对齐”

10、在表格第一行第一列输入“用户名”,在第一行第二个表格插入“文件域”。然后是密码,同样的插入“文件域”。切换到“拆分”界面,选中密码对应的“文件域”,将“type”改为“password

11、插入图像,不知道怎么填的话就一直选择“确定”即可

12、插入按钮,同上面插入图像的处理方法那样处理,如果不知道填什么就一直“确定”,无妨。在属性栏里的值改为“登录”。然后插入图像“谷歌logo”,附上效果图

13、选中第二行,点击鼠标右键,选择“表格”,“合并单元格”

14、在第二行插入图片。完成页面制作。保存HTML文件。然后在站点“网页”可以看到保存的HTML文件

15、点击制作好的HTML文件,选择用360浏览器打开,输入用户名和密码,然后会看到如下情况:用户名课件,密码不可见,符合实际

16、当然也可以在Dreamwaver CS6 的实时视图中完成第15步

相关推荐:

Dreamweaver编辑网页预览的时候显示乱码该怎么办?

Dreamweaver怎么新建站点地图?dw编辑站点地图的方法

怎么格式化html代码? Dreamweaver格式化html代码的

最新资讯
胡锡进:马云演讲震动经济圈 中国太需要有人创新

胡锡进:马云演讲震动经

环球时报总编辑胡锡进今日发表微博表示,10月24日马云在
消息称富士康成立工作组应对立讯精密竞争

消息称富士康成立工作

据多位知情人士称,苹果最大iPhone代工商富士康的母公司
变味的在线教育:每月花5亿元打广告,产品被指不重视少儿启蒙

变味的在线教育:每月花

在线教育在火过2020之后,开始有点变味了。
联想之星:已完成四期人民币基金募集 资金规模为8亿元

联想之星:已完成四期人

联想之星宣布已于9月30日完成四期人民币基金募集,资金
辛巴离薇娅还差100个李佳琦

辛巴离薇娅还差100个

辛巴、李佳琦、薇娅,他们早就不甘于当一个头部主播。除
特斯拉:今日起 超充站充电费用涨价

特斯拉:今日起 超充站

各站点的价格依据各地电价、相关的投入及运营情况和当
最新文章
Dreamweaver代码怎么自动排版? dw代码格式化的技巧

Dreamweaver代码怎么

Dreamweaver代码怎么自动排?Dreamweaver中的代码看上去
Dreamweaver文字或图片怎么添加空连接?

Dreamweaver文字或图

Dreamweaver文字或图片怎么添加空连接?Dreamweaver制作
dreamweaver怎么制作向上滚动的文字代码?

dreamweaver怎么制作

dreamweaver怎么制作向上滚动的文字代码?dreamweaver设
Dreamweaver怎么添加调试浏览器?

Dreamweaver怎么添加

Dreamweaver怎么添加调试浏览器?Dreamweaver中调试网页
DreamWeaver怎导入项目? dw直接导入项目的教程

DreamWeaver怎导入项

DreamWeaver怎导入项目?之前做好了一个dw项目,想要直接
Dreamweaver网页怎么制作CSS叠层样式?

Dreamweaver网页怎么

Dreamweaver网页怎么制作CSS叠层样式?Dreamweaver制作