网站建设与课件制作分析

Dreamweaver静态网页制作,一、FTP的使用（文件传输） 1、直接通过浏览器的方法来实现 ftp:/210.38.64.98 输入账号、密码登录到FTP服务器上，然后即可用复制的方法将 文件复制到FTP服务器上。 2、使用相应的应用软件来实现 如：CuteFTP LeapFTP来实现 二、检验网页的方法 方法一： 1、page.gdei.edu.cn/page/registeruser.asp 2、输入账号、密码以及其它的相关信息 3、申请完成之后，可以用IP、账号、密码来登录到服务器，将本,Dreamweaver静态网页制作(续),地机上所做好的静态网页（文件名 一般为index.htm)上传至服务 器中，然后用http:/page.gdei.edu.cn/用户名/index.htm来访问 所上传的网页。检查是否正确。 方法二： 通过PWS来实现，在个人机器上将网页文件（包括图片、声音、 视频、动画等元素）拷贝至C:inetpubwwwroot目录下，然后 在浏览器中输入http:/127.0.0.1/ 如果不能正确的看到网页，应 该检查一下PWS WEB管理器的默认的文件是否设置为index.htm,Dreamweaver静态网页制作(续),三、基本操作 1、编缉文本 1）添加文本的方法是一种是直接在文档窗口中键入文本内容，另一种是在文档窗口中，将插入点设置到要放置文本的地方，打开Edit下拉菜单，将文本导入。 2）编缉文本（大小、颜色、字体、样式） 可以直接通过属性面板来实现或通过选择“文本字体”来设置 2、超链接 创建超链接最常见的做法是将超链接信息设置在文本及图像上。使其链接至其 它的网页或网站上。源端点和目标端点 目标端点有：图片、电子邮件地址、多媒体文件、程序（如： javascript:window.close()关闭当前窗口 javascript:windows.print()打印文 档 1）链接的类型,Dreamweaver静态网页制作(续),内部链接：在同一网站文档之间的链接 外部链接：在不同网站文档之间的链接 锚点链接：同一网页或不同网页的指定位置的链接； E-mail链接：打开填写电子邮件表格的链接； 2）文档的路径（URL） 相对路径： 绝对路径：完整的URL （基于目录的路径）：从根目录出发 3）链接的方法 在属性面板中可以直接使用 可以选择被链接文档的载入位置 _blank：新的未命名的浏览器窗口中； _parent：父框架集或包含该链接的框架窗口中； _self：相同的窗口中（是无需指定的） _top：整个浏览器窗口并删除所有框架； 可以借助于样式表来实现,Dreamweaver静态网页制作(续),3、文档页面的整体设置 a)Title（标题） 在该文本框中，可以输入文档的页面标题，它实际上是输入位于HTML头部的和标记之间的内容，在浏览页面时，会显示在浏览器的标题栏上。 b)Background Image（背景图像） 在该文本框中，可以输入希望用作HTML文档的背景图像的路径和文件名称，单击“Browse”（浏览）按钮，可以从磁盘上选择图像文件。这里不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置的图像名称。实际上，这里设置的是标记的background属性。 c)Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的是标记的bgcolor属性。 d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是标记的text属性。 e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色，实际上设置的是标记的link属性。 f)Visited Links（访问过的链接） 这里可以设置文档页面中已经访问过的超级链接的文字颜色，实际上设置的是标记的vlink属性。,Dreamweaver静态网页制作(续),g)Active Links（正在访问的链接） 这里可以设置文档页面中正在访问 的超级链接的文字颜色，实际上设置的是标记的alink属性。 h)Left Margin（左边距）、Top Margin（上边距）、Margin Width（ 页边宽度）和Margin Height（页边高度） 在这些文本框中，可以设置页面 文字同页面边缘的间距。实际上分别设置的是标记的leftmargin、 topmargin、marginwidth和marginheight属性。但要注意，Netscape可以 识别这些属性，但是Internet Explorer不识别它们，因此不建议使用它们。 i)Document Encoding（文档解码方式） 在该列表框中，可以选择当前文档 页面的文字解码方式，对于大陆使用的中文网页，应该选择“Simplified Chin ese（GB2312）”。如果这里没有需要的解码方式，可以从列表中选择“Othe r”，这种情况下，页面会使用浏览器运行环境的解码方式。 j)Tracing Image（草稿图） 在该文本框中，可以指定一幅图像作为网页创 作时的草稿图，它显示在文档的背景上，便于在网页创作时进行定位和安放 对象。在实际生成网页时，它并不显示在网页中，我们会在后面介绍其使用方法。 k)Image（图像） 拖动该滑块，可以改变草稿图的透明程度，使用适当 的透明程度可以避免干扰网页的编辑。,Dreamweaver静态网页制作(续),4、图像处理 图像和文本是网页中最重要的两种基本元素。 主要有：jpeg、gif、png格式的图像 Jpg:是存储照片或连续色调图像的较好格式； Gif：存储非连续色调图象或颜色比较单一的图象。最多支持256种色，可以以 动、静态两种方式出现。 Png：拥有GIF的全部特性（如透明图、GIF动画等），是一种很好的网上图 像文件格式。它避开了GIF的压缩程序专利，而且可以得到比GIF更好的压缩 比，可以用来代替GIF，是一种无损压缩图像，以后Internet的主要图片格式 （基于B/S模式）。 所涉及到的图像操作的主要有： a)在网页中插入图片（可利用菜单或对象面板来实现） b)在网页中插入一图片，并作为背景（注意其中背景图片的应用技巧）； c)在网页中某个位置插入一个交互图像（举例说明）,Dreamweaver静态网页制作(续),对象面板标准页插入鼠标经过时的图像即可 d)插入导航栏：“插入”“交互式图像”导航栏 5、表格处理 是页面布局极为有用的工具。往往用表格来定位页面元素。 a)添加表格 b)表格属性的设置 c)对表格进行编缉 包括插入行/列，删除行/列，在表格中插入表格 d)单元格属性的设置 e)对单元格进行编缉 注：在Dreamweaver中，对于表格的设置，可以通过属性面板来控制和设置,Dreamweaver静态网页制作(续),1、状态栏中的标记控制符 2、表格的宽度为760像素左右（理由） 3、单元格的边框粗细设置为0（理由）； 4、各单元格的大小应精确设置 5、要从外各内工作，先建立最大的表格，再在内部创建较小的表格 6、先设置各单元格的大小，再进行拆分和合并等操作； 6、框架 1）作用：是把网页划分为若干个区域，这样就可以在不同的区域分别显示不 同的文件内容。是起一个导航的作用。 框架的创建可以通过对象面板中的框架来实现，可以通过相应的插件来增加框 架的结构种类 2） 框架的使用。举一实例。如“网络导航” http:/www.gdei.edu.cn/old/user/index.htm,Dreamweaver静态网页制作(续),注：是版式中分隔式 三、层(layer) 可以放置在页面的任意位置。把页面元素放入层中可以控制哪些元素显示，哪 些隐藏，哪些显示在前面，哪些显示在后面。层可以包含文本、图像、表单、 插件、甚至层内还可以包含其它层。甚至我们还可以将一个网页放入一个层内 （需要一个附加的插件） 1、层的新建 a)插入层 b)拖放层 c)绘画层 d)画多层 2、层的属性的设置 通过属性面板可以设置,Dreamweaver静态网页制作(续),包括：layer ID、左边和顶边距、宽度和高度、Z-索引（编号较大的层出现在 编号较小的层的上面）、可见性、背景图像、背景颜色、溢出、剪切、src （显示另一个HTML文档） 3、层面板 在“窗口”“层面板”,即可打开和关闭层面板 在层面板中，层以堆叠的名称列表的形式显示，先建立的层位于列表的底部， 最后建立的层位于列表的上部。 可以通过层面板改变层的可见性以及层的堆叠顺序,Dreamweaver静态网页制作(续),四、行为 是一种事件（Events)和动作(Actions)的组合体。动作通常由一段落 Javascript代码所组成，利用这段代码可以完成相应的任务，如：打开浏览器， 播放声音等。（面象对象程序设计中的，事件、动作、行为等概念） 1、事件：通常由浏览器所定义，它可以被附加到各种页面元素上。也可以被 附加到HTML标记中。 如：鼠标事件一般有以下几种 Onmouse over:当移动到链接点上时的事件； Onmouse out:当移动到链接点之外时发生的链接的事件； Onclick:指单击链接点时发生的链接事件。 2、行为：则是事件和动作的组合体。如：onclick行为同一段javascript代码相关联，通常我们将这个过程称为触发。 3、添加行为 在“windows菜单“下选择”行为“项即可。 然后可以先选择动作，再选择相应的事件。,Dreamweaver静态网页制作(续),如果行为选不中（灰色），则从“显示事件”中选择较高版本的浏览器，一般为 IE5.0即可。 内置的行为有十多种，但有时远不够用，可以通过增加插件的方式来扩展功能 如： 1、在层内显示一个HTML文档 2、流文件格式的播放； 3、自动滚屏； 4、自动关闭窗口； 5、弹出一个窗口； 6、实现自动跟随当前屏幕； : : :,Dreamweaver静态网页制作(续),举例： 1、系统内部自带的行为。 a.弹出信息 b.播放背景音乐 c.打开浏览器窗口 2、利用Dreamweaver的插件实现扩展功能。 先安装相应的插件 ftp:/210.38.64.131 a.在网页中插流媒体文件 b.自动滚屏 c.自动关闭窗口 d.实现自动跟随当前屏幕,Dreamweaver静态网页制作(续),设计一个Web站点的基本步骤： 1、对WEB站点进行规划 1）确定网站的主题和内容； 网站的主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明 确的主题，特别是个人网站，因为不可能像综合网站那样做得内容大而全，所 以必须找准一个自己最感兴趣的内容，做深、做透、办出自己的特色，这样才 能给用户留下深刻的印象，主题要明确，在主题范围内做到大而全、精而深。 网站内容的组织 （1）选择力求专业化；（主要是面向谁的问题） （2）网页内容的变化性； （3）网站内容设计者的爱好； （4）网站栏目的安排,Dreamweaver静态网页制作(续),a.要紧扣主题； b.设立最近更新或网站指南栏目； c.设立可以双向交流的栏目，如论坛、BBS、邮件列表等 d.设立要下载或常见问题的栏目。（从而做到信息资源的共享） 名称要正、名称要易记、名称要有特色。 注：部分人把此部分以下的几点归纳为规划网站，主要包括网 站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文 字图片的运用等。,Dreamweaver静态网页制作(续),2）确定网站的结构；（主要有线性结构、层次结构和复合性结构（树型结构为主） 3）确定网站的风格；（版面和色彩） 可以采用几各种配色方案，然后再根据配色方案进行选择。,第一分页,第一分页,第一分页,主页,Dreamweaver静态网页制作(续),4）确定网站页面的版式； 整版式（全文字型、图文混排型、纯图形式）、部分留空式、分 隔式、 原则： （1）协调 （2）对比（