《DreamweaverCS5网页设计》课件

龙源期刊网

网页设计与制作中DreamweaverCs5的功能应用与发展趋势

作者：朱凤明

来源：《电脑知识与技术》2013年第24期

摘要：网页设计与制作对网络信息的传播具有一定的促进作用，它是为人们提供信息的重要手段。现如今网页的设计制作可以说离不开DreamweaverCs5的使用，它具有多种功能。该文就是针对DreamweaverCs5的功能性进行的探究，主要阐述了网页设计与制作中DreamweaverCs5的功能应用、新增功能以及DreamweaverCs5的发展趋势。

关键词：网页设计制作；DreamweaverCs5；功能；应用；发展

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2013）24-5428-02

网站开发工具的出现是在1997年，随着时代的不断改革与变化，网站开发工具也有了新的突破。DreamweaverCs5网站开发工具为使用者进行网站设计制作提供了方便，节省了工作时间。它新增了很多功能，为广大使用者展现的是一种可视性网站工作界面，其操作性极强，有丰富的站点管理，它的出现提高了网页设计与制作的水平，丰富了网页设计的表现形式。

1 DreamweaverCS5在网页设计中的应用

DreamweaverCs5在现今网页设计与制作中得到了广泛应用，在网页设计制作中发挥着重要作用，对网页设计制作的发展具有一定的积极意义。

首先，DreamweaverCs5中的ASP功能较为强大，它是微软公司通过不断研发，开发出的一种代替CGI脚本程序的新程序。ASP主要在服务器端使用，它能够实现与数据库以及其他相关程序的交互工作，其编辑程序较为简便，减少了网页设计制作中的复杂程序，是网页设计与制作编程工作中的一大进步，提高了网页设计与制作的水平。

其次，ASP在网页运用中没有过多的局限性，它的文件格式为asp，在动态网站中得到了充分应用，它不限制在哪个网站中能使用，在哪个网站上不能使用，在使用中有较大的自由性，这也是它在网页设计与制作中常被用到的原因之一。

1 / 8

课题

实现登录页面布局

课时

1

教学目标 （1）了解网页登录页面的元素。

（2)能利用PHOTOSＨＯP制作登录页面所需的图像。

（3）能利用Ｄreamｗeaｖer cｓ5实现登录页面的布局。

(4)会使用属性面板并进行相应修改。

教学

重难点 重点 掌握创建站点、插入表格、插入图像、保存、预览等基本操作

难点 登录页面的布局，单元格属性的设置

课前准备 教师准备 PＰT课件,案例，上机环境

学生准备 熟悉Ｄreaｍweaver cs5的界面,会进行站点的操作

教学过程设计

第一环节

创设情景

导入课题 展示电商网站“京东”登录页面。

第二环节

新课教学 任务１：请学生观看登录页面,回答它包含了哪些主要元素?

:(1)账号输人框:用于采集用户账号信息。

(２)密码输人框:用于采集用户的密码信息。

（3）登录按钮:用于将账号和密码信息提交到服务器。

(4)其他登录方式：用户登录网站的其他选择。

(5)忘记密码:用户用于获取密码的途径。

(6)立即注册:新用户注册会员的途径。

任务2:用PＨOＴOSHOＰ制作登录页面所需的图像

如果无法完成的同学，就利用老师准备的素材做任务３

2 / 8

任务３:实现登录页面的布局

(1)创建站点(yｍzz０1），新建并保存文件(iｎdｅｘ)。

网页需要保存在站点中。打开“文件”菜单,选择“保存”命令,或按快捷键〈Ctrl〉+〈S〉,将弹出“另存为”对话框,选择保存的位置并输入保存文件名，单击“保存”按钮即可将网页保存。

注意：文件名通常使用小写英文字母,不使用空格、特殊符号，不要使用中文。文件命名尽量以四种方式命名：汉语拼音、汉语拼音缩写、英文或英文缩写,以方便通过文件名直观地了解页面内容。

(2）插人表格。设置表格为行-列,宽 ４２４(像素)边框１（像素）,表格居中对齐。如图右图所示。

(3)嵌套表格。在当前表格中插人一个新的表格， 设置表格为9行1列、宽

网页设计与制作

第1章网站开发基础

1.2网站开发流程

1.网站总体策划：（1）目标用户定位和网站的主题定位（2）网站整体风格创意设计（3）网页的色彩搭配（4）网站的层次结构和链式结构（5）版面布局设计

2.设计和制作素材：搜集的素材一般包括跟主题有关的文字图片资料；一些优秀的页面风格；开放的源代码。设计和制作的素材包括网站的Logo、Banner、背景图片、列表图表、横幅广告等。

3.建立站点：安装和配置IIS；在Dreamweaver中创建站点。

4.制作网页：创建CSS样式；制作网站首页；制作网站的其他页面；制作超链接

5.测试和发布网站：发布网站前必须要测试网站，测试网页内容、链接的正确性和在不同浏览器中的兼容性等。发布网站先申请站点域名和租用服务器空间，然后通过FTP工具把网站上传到服务器上。

1.4 HTML的概念：HTML是一种用来制作超文本文档的简单标记性语言。

1.4.3HTML标签

标签表示：

1.元素,标签的作用范围:→.例：demo,即将demo这段文本以2号标题来显示，这对标签之外的文本不受这组标签影响。

2.元素

一个标签可以包含多个属性属性之间无先后次序，用空格分开。

例：hello,其中background属性用来表示HTML文档的背景图片，tect属性用来表示文本的颜色。

3.

空标签：标签单独出现，只有开始标签而没有结束标签。

(1)和在最外层，表示这对标签里的代码是HTML语言。

(2)和标签里是网页中的头部信息，如网页总标题，网页关键字等。无头部信息可不要这对标签

(3)和.在和这对双标签的中间还包含着和这对标签，网页标题的内容，标题出现在IE浏览器窗口。

考点：

1.

和

2.:换行符。标签是空标签(它没有结束标签，因此这是错误的:)。

快捷键：F12预览网页； Shift+Enter分段(行间距小)；

前景色、背景色的调整：前景色是alt+del 背景色是ctrl+del 前后交换是X 1.4.4HTML文档的基本结构p18-p19

第1章 Dreamweaver CS5网页设计基础

当用户在网上冲浪时，会欣赏到很多精美的网站。在羡慕的同时，是否想过要亲手设计

一个网页？如想让自己制作的网页功能更强大，那就需要学习Dreamweaver，它是设计网页

的首选工具。

【学习目标】

 认识网页的发展历史和基本概念。

 掌握网页的一般设计流程。

 掌握HTML编写的基本操作。

 掌握Dreamweaver CS5的操作基础。

1.1 网页设计基础

虽然网页的形式和内容各种各样，但构成网页的基本元素大体相同，主要包括标题、网

站LOGO、导航、超链接、广告栏、文本、图片、动画、视频与音频等，如图1-1所示。网

页设计就是要将这些元素有机整合，表达出美与和谐。

图1-1 网页的基本元素

1.1.1 网页设计的发展历史

自从第一个网站在20世纪90

年代初诞生以来，设计师们尝试了各种网页的视觉效果。导航

广告栏

图像Logo