《网页设计与网站建设实验 教学课件 ppt 作者 周苏 黄志宏 王文 张泳 等第3章 使用Dreamweaver创建简单网页》由会员分享，可在线阅读，更多相关《网页设计与网站建设实验 教学课件 ppt 作者 周苏 黄志宏 王文 张泳 等第3章 使用Dreamweaver创建简单网页（59页珍藏版）》请在金锄头文库上搜索。
1、网页制作工具,周 苏 教授 Z QQ: 81505050,第3章 使用Dreamweaver创建简单网页,Dreamweaver简介 站点管理 创建简单网页 表格 插入图像 超级链接 层,第3章 使用Dreamweaver创建简单网页,在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，这种网页的内容是固定的，其修改和更新都必须通过专门的网页制作工具，例如FrontPage、Dreamweaver等 早期的网站一般都是由静态网页组成的，其网址形式通常为： .htm、.html、.shtml、.xml等为后缀,第3章 使用Dreamweaver创建简单网页,在HTML格式的网页上也可以出
2、现一些动态效果，如 .GIF格式动画、Flash动画、滚动字母等，但这些只是视觉上的动态效果，而非动态网页 例如Flash动画是静态的，因为这些动画一旦制作完成后，就不会再改变了,第3章 使用Dreamweaver创建简单网页,静态网页的特点是： 每个网页都有一个固定的URL，且网页URL (统一资源定位器) 地址以 .htm、.html、.shtml等常见形式为后缀，不含有“?” 一经发布，每个静态网页的内容都保存在网站服务器上，每个静态网页都是服务器上的一个独立文件 静态网页的内容相对稳定，因此容易被搜索引擎检索 静态网页不用数据库支持，制作和维护方面工作量较大 静态网页在交互性等功能方面
3、有较大的限制,第3章 使用Dreamweaver创建简单网页,动态网页则是指使用网页脚本语言，比如ASP、ASP.NET、PHP等，通过脚本将网站内容动态存储到数据库，用户访问网站主要是通过读取数据库动态生成网页的方法 网站上多是一些框架基础，而网页的实际内容大都存储在数据库中。例如，计数器、BBS论坛等都是动态的,第3章 使用Dreamweaver创建简单网页,静态网页和动态网页的最大区别，就是其网页是固定内容还是可在线更新内容 程序是否在服务器端运行是重要标志 运行于客户端的程序、网页、插件、组件等属于静态网页，例如html页、Flash、JavaScript、VBScript等等 在服务
4、器端运行的程序、网页、组件属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、ASP.NET、CGI、PHP、JSP等,第3章 使用Dreamweaver创建简单网页,静态网页和动态网页各有特点 采用动态还是静态网页主要取决于网站的功能需求和网站内容的多少，如果功能简单，内容更新量不大，采用纯静态网页的方式会更简单，反之要采用动态网页 静态网页是网站建设的基础，动态网页是网站的辅助手段，可以采用静动结合的原则，合理安排、选择和结合 静态网页是网站的核心。为了让网站能承载更大流量，承载更多信息，应该尽量采用静态页面，或者切分数据库,3.1 Dreamweaver简介,早先，制作
5、网页要求制作者精通HTML语言，而且测试编写好的网页也是件很繁琐的事情 网页设计者首先在文本编辑器中用HTML语言写网页代码，然后保存为HTML文件，再用浏览器打开这个文件，观看效果 哪怕仅仅改动网页中的一种颜色，也无法避免地要经过这样一个繁琐复杂的过程,3.1 Dreamweaver简介,1997年，Macromedia公司推出Dreamweaver软件，它是一套“所见即所得”的可视化网站开发工具，与Web图像处理工具Fireworks、矢量动画工具Flash起被称为网页制作“三剑客” Dreamweaver降低了网页制作的门槛，简化了网页制作的过程，提高了效率，使制作者不必深究繁琐的HTM
6、L语法也可以制作出漂亮精美的网页,3.1 Dreamweaver简介,Dreamweaver还提供强大的网站管理功能，适合单个网页的开发，也能胜任大型网站的合作开发 Dreamweaver支持动态网页技术，可以简便地生成CSS、层、JavaScript等动态页面。此外，使用Dreamweaver还可在网页中方便地插入Java、Flash、Shockwave、ActiveX等多媒体 Dreamweaver 8是其05年8月推出的最新版本,3.1 Dreamweaver简介,安装后，第一次运行Dreamweaver MX 2004，会出现选择工作区布局对话框 “设计者”工作区是一个集成工作区，其中
7、全部窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧，这种布局适合于初学者和刚入门、对网页代码不甚了解的网页设计人员。系统默认“设计者”布局 “代码编写者”工作区是同样的集成工作区，但是将面板组停靠在左侧，而且主窗口在默认情况下显示网页代码。这个布局是为了方便高级网页设计人员编写代码,Dreamweaver 的工作界面,欢迎界面 每次启动Dreamweaver后，文档窗口部分都会出现欢迎界面，这个界面集中了常用的快捷操作，可以让用户快速访问最近的文件和教程资源,Dreamweaver 的工作界面,Dreamweaver MX 2004工作界面 标题栏：显示当前的网页标题、文件路
8、径和文件名称 菜单栏：该软件所有的操作命令都可以在菜单栏内找到 插入面板：包含了用于将各种类型的对象 (如图像、表格、层、表单等) 插入到文档中的按钮 文档窗口：显示当前所编辑的HTML文档的内容 属性面板：可以查看和编辑当前选定的页面元素 (如文本、表格、图像等) 的属性 浮动面板：由多个面板组成，提供常用的一些快捷操作,Dreamweaver 工作界面,Dreamweaver 的各种面板,Dreamweaver 的面板包括： 插入面板：所包含的按钮在“插入”菜单中可以找到。网页编辑时，通过单击按钮，可以快速、方便地在网页中插入相应的对象 (元素) ，如图像、表格、层、框架等 浮动面板：可以
9、用来控制网站结构、网页代码及内容格式。包括设计、代码、应用程序、标签、文件等面板 属性面板：集中了“修改”和“文本”菜单的部分选项功能,显示了在文档窗口中所选中元素的属性。通过属性面板可以直观地设置、修改元素的属性参数,3.2 站点管理,制作网页的根本目的是为了设计一个完整的网站。因此，在用Dreamweaver开始制作网页之前，要先在本地计算机上定义一个本地站点，以便更好地利用站点窗口对站点文件进行管理，也可以尽可能地减少一些错误的出现，如路径出错，链接出错 完成站点文件的编辑后，还可以利用Dreamweaver将本地站点上传到Internet上,站点规划,在制作网站前，应该对整个站点进行整
10、体规划 首先要确定站点的主题是什么，网站想要表达什么样的内容，要明确网站的整体定位、设计理念 接下来应该对网站做整体结构设计，包括确定网页的尺寸，是800600，还是1024768。要确定站点的栏目和各自的版块，明确要体现的内容。设计完网站的整体结构之后，就应该为各个版块或栏目收集资料，包括图片、文字、程序等,站点规划,在规划站点时，建议把网站中的所有文件都放到一个文件夹中，再在该文件夹内建立若干个子文件夹，将文件分类存放 文件的命名非常重要。提倡的做法是：用英文或者拼音给文件命名 (推荐使用英文) ；命名应该有一定的规律，例如首页为index.htm；文件名中不能包含空格等非法字符,创建本地
11、站点,创建站点的步骤如下： 单击菜单栏“站点”中的“管理站点”命令。在对话框中单击“新建”按钮，选择“站点”命令 在对话框中填写站点的名称 建立简单网页，选择“不使用任何服务器技术” 定义存放站点的位置，首先在本地编辑网站，完成后再上传到服务器,3.3 创建简单网页,建立本地站点后，就应该充实站点内容 站点的核心是页面，而页面的灵魂是文本，文字内容是用户浏览网页的主要缘由，具有丰富文字内容的网站自然会吸引浏览者,创建新页面,创建新页面： 单击菜单栏“文件”-“新建”项，在类别中选择基本页，再选择HTML，即可创建一个空白页面,修改页面的基本属性,页面属性包括很多内容，如页面的标题、文字解码方式
12、以及正文中各个元素的颜色等。理想的页面设置是成功编写网页的第一步 执行菜单栏“修改”-“页面属性”命令 或者单击属性面板中的“页面属性”按钮 在 “页面属性”对话框中设置属性,编辑文本,编辑文本的操作包括 输入文本 设置文本基本属性,插入水平线,水平线可以分割页面内容，使页面结构清晰，层次分明，便于浏览。在页面中合理插入水平线，可以获得非常好的视觉效果 将光标放在需要插入水平线的位置，执行菜单“插入”-“HTML”-“水平线”命令即可 插入水平线后，用鼠标单击水平线，下面的属性面板变为水平线的属性，可以设置水平线的名称、宽度、高度和其他一些属性,创建列表,在文档中可以创建项目列表、编号列表和定
13、义列表。列表可以嵌套，编号列表中的每一项都有一个显示出来的编号，而项目列表没有编号。 执行“文本”-“列表”-“编号列表”命令，就会创建一个编号列表,插入日期,将光标放在要插入日期的位置，然后单击“常用”插入面板中的日期图标，或是执行菜单“插入”中的“日期”命令，出现“插入日期”对话框 选择星期格式、日期格式和时间格式，单击“确定”按钮即将日期插入页面中,插入特殊字符,网页设计中的特殊符号指的是换行符、版权标记、不换行空格、美元符号等 将光标放在要插入符号的位置， 打开插入面板切换到“文本”对象组，单击最后一个字符图标旁的下三角按钮，出现一个下拉列表，这个列表提供了一些常用的符号供用户选择,3
14、.4 表格,表格是网页制作时的一个不可缺少的元素 因为HTML本身并没有提供更多的排版手段，往往需要借助表格实现网页的精细排版 表格以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上 使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持正确布局。所以表格是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了网页设计师的水平,插入表格,创建表格的步骤如下： 在文档窗口中将光标放置在文档中要插入表格的地方 执行菜单“插入”-“表格”命令 在“表格”对话框中设置表格的样式 单击“确定”按钮完成表格的设置,表格的基本操作,对表格进行操作，首先应将光标定位于要选择的表格
15、中。在表格中任一位置单击后，表格的上方或下方将出现一个绿色的指示图，通过这个指示图，我们可以方便地对表格进行一些修改 选取整张表格 选取表格中的整行 (列) 选取单元格,设置表格属性,总体属性设置 选取整张表格后，可以在属性面板中设置和修改表格的各项属性，在属性中输入相应的值后，文档窗口中的表格会自动变化到指定的值 单元格属性设置 选中表格的单元格、行/列，或将光标定位于任一单元格中，当前文档窗口的属性面板变为单元格属性。分为两部分，下部为单元格属性，上部为单元格中文本的属性,编辑表格,拆分单元格 改变表格大小 合并单元格 插入行或列 删除行或列 向单元格中添加内容,3.5 插入图像,一个优秀
16、的网页是离不开图片的，制作精良的图片可以大大增强网页的效果，令网页更加生动美观。利用好图片，是网页设计的关键 网页中插入的图像一般都是GIF、JPEG和PNG格式的，这三种格式都符合Internet所需的压缩和跨平台的要求,在网页中插入图像,要在网页中插入图像，可以执行以下操作： 在文档窗口中，将光标放置到需要插入图像的地方 执行菜单“插入”-“图像”命令，打开“选择图像”对话框，选择所需的图像，单击“确定”按钮即可完成插入 如果选择的图像没有位于本地站点目录中，则会出现一个对话框，询问是否将图像复制到本地站点目录 在页面中插入的图像是以原始大小显示出来的，可以在属性面板中调整其属性，适应用户的要求,图文混排,图像与文字的配合排列是网页设计中常用的一项功能，通过图像和文字的有机搭配，产生图文并茂的效果 将光标定位在图像的后面，输入一段文字。选中图片，编辑图片属性面板，利用“对齐”选项即可调整图像和文本的对齐方式,使用外部图像编辑器,Dreamweaver提供了简单的图像编辑功能。如果需要进行
