《网页设计与制作教程与实训》全套电子课件教案- 实训网站电子相册

1、网站电子相册本节内容1. 特色说明 针对网络电子相册这个栏目，我们先看几个著名的站点的网页，如广州视窗的电子相册。2. 具体步骤 模仿别人的网页，制作自己的网站的作品 网页分析 从上面两幅网页图片中，我们发现，网页中的内容布局、连接栏目、图片排放、不同部分的颜色搭配很美，也许 ，我们初次设计站点，各种美观要素考虑不到，设计上会不太合理，这没关系，只要一步步坚持下去，就有所提高。我让大家欣赏这两幅网页的目的，就是告诉大家，开始设计站点和主页时，自己没有好的构思是正常的，关键是要学会参考因特网中别人的设计样板，经过反复练习，自己的水平一定会赶上专业设计者。总之，一句话，设计站点时，先上因特网上看一

2、下类似的主页设计情况。下面我们分析上面网页的第一行，这个网页的主题是“电子相薄”，有三个大栏目：自娱自乐、魅力摄影、相册服务。 “电子相薄”、“自娱自乐”、“魅力摄影”、“相册服务”的背景是四张图片，这可以用PHOTOSHOP来实现，就是说，我们选择好图片后，再用PHOTOSHOP设置大小，然后在PHOTOSHOP中输入汉字。网页分析 要注意的一点是，上面的摄影头像，它占了两个图片的一部分，它是被分割后再分别贴在两张图片中的。因此，要很好的设计网页的背景，必须学习PHOTOSHOP，这个软件可以自学，找一本书边看边尝试。“自娱自乐”、“魅力摄影”、“相册服务”栏目下分别又有“生活快镜”、“花边

3、娱乐”、“发烧友推荐”、“摄友演练场”、“我的相册”、“相册服务”这几个分栏目。我们下边用DREAMWEAVER设计一个电子相册，也用一点图片，同时注意颜色搭配，如果想尝试图片作背景，大家学了PHOTOSHOP以后可以自我练习。 模仿制作未完模仿制作（未完）第三章创建文档3.1 文档的操作3.2 页面属性的设置3.3 文本元素的添加和编辑3.4 图像和媒体的处理3.5 超链接的创建与管理3.6 创建文档的小技巧本章要点文挡的创建、修改与保存用页面属性设置网页效果网页各种元素的添加与编辑不同超链接的创建与管理创建文挡的技巧运用3.1 文档的操作 1. 新建文档创建文档可以通过Dreamweave

4、r提供的模板创建有格式的文档，也可以直接创建空白文档。2. 打开文档对于站点中保存的网页，可以通过站点面板或菜单进行打开。3. 文档保存新建文档或对打开的文档编辑完成后，需要对文档进行保存，保存文档分为直接保存和另存文档两种方式。BACK3.2 页面属性的设置在网页中有时需要对网页的整体效果进行设置，例如设置网页的背景颜色、网页的文本颜色、超链接的一些状态等等，这些设置可以通过“网页属性”来实现。在“页面属性”对话框中，左侧窗口显示页面属性的分类，选中每个类别时，右侧区域就会显示出该类别中所包含的设置项目， BACK3.3 文本元素的添加和编辑在网页中，文本是表达网站主题必不可少的内容，丰富、

5、详实的文本内容会让网页更加充实、不空洞，文本在网页中占有非常大的比重。因此，文本内容的输入及合理的设置是制作网页的最基本也是最重要的内容，虽然操作简单，但是绝对不能忽视。在页面中插入文本内容，一般可以通过两种方式来插入。第一种是直接输入。第二种是从外部文件或网络中复制文本。BACK3.3.1 文字的格式化1. 使用文字的属性标记在网页中输入文本后，接下来就要根据需要来设置文字格式，文字格式包括有字体、大小、颜色、修饰、对齐方式等。设置文字的属性时应该考虑到网页中的整体风格，文字与文字之间的格式跳跃性不能太大，从整体上要给人以和谐、美观、大方的效果，让浏览者在欣赏的时候能感到赏心阅目，并有兴趣做

6、进一步的停留。1) 文字字体的设定2) 文字字号的设定3) 文字颜色的设定4) 设置文字的样式 5) 设置文字对齐6) 加入项目列表和编号7) 调整文字缩进3.3.2 其它文本的输入1. 加入特殊字符2. 加入批注文字3. 插入日期4. 插入水平线3.3.3 查找和替换文本查找和替换功能可以帮助我们在网页中进行批量更改和批量更新，并且可以针对不同类别的对象进行。3.4 图像和媒体的处理3.4.1 图像的处理1. 图像的概述在设计网页时，图像是美化网页必不可少的组成部分，合理地选择和使用图像，可以对网页起到画龙点睛之笔。此外，图像插入到网页中时，既要考虑到网页版面的美观，还要考虑网页的浏览速度，

7、插入的图像不能过大。如果网页太大，在浏览时会需要漫长的时间等待，浏览者不会有这样的耐心，因此，我们在设计网页时，要二者兼顾。目前在网页中最常用的图像格式有两种，分别是gif与jpg格式。此外，在Dreamweaver MX 2004中插入的图像也可以是png格式，png格式是Macromedia Fireworks创建的图像格式，并且是在IE4.0以上和Netscape Navigator 4.0以上的版本才支持的格式。 BACK2. 图像的插入和编辑 3 翻转图“翻转图”是图像在网页中的一种动态运用，又称为“鼠标经过图像”，它在网页中的效果是，在默认情况下显示为一幅图片，当鼠标经过该图片时就

8、会变成另外一幅图片，鼠标离开时，又会恢复成原始图片。 3.4.2 插入Fireworks HTML在Dreamweaver MX 2004中，可以插入用Fireworks导出的HTML文档，使Fireworks与Dreamweaver在制作网页过程中能够互相整合。3.4.3 添加Flash影片在网页中我们插入Flash对象的格式一般都是Flash影片，在浏览网页的时候，Flash影片会通过“Flash播放器”进行自动播放，Flash影片的加入可以令网页更加生动和精彩。3.4.4 添加内置的Flash交互对象1. 添加Flash按钮插入Flash影片时，需要用户掌握Flash软件的使用，在Fla

9、sh中制作影片来进行插入。在Dreamweaver MX 2004中，对于不会运用Flash软件的用户来说，可以直接插入Flash制作的按钮。2. 添加Flash文本 “插入Flash文本”也是Dreamweaver MX 2004提供给用户使用的直接插入Flash制作的动态文本。 3.5 超链接的创建与管理3.5.1 超链接概述在网络中，因为有了超链接，才使网站更加富有生命力，超链接是指从一个网页跳转到另一个位置的连接关系，超链接的存在，使我们领略到网络世界的广博和精彩。超链接在网络中起着桥梁和纽带的作用。在网页中，很多对象都可以设置超链接。超链接的方式主要包含有相对链接和绝对链接两种；根据

10、链接类型的不同又可分为文档链接、友情链接、锚链接、邮件链接、空链接和下载链接等等 。BACK3.5.2 超链接的创建1. 文字的链接“文字链接”是指给文字对象创建超链接。2. 热点链接使用图像来作为链接的媒体时，既可以对整个图像创建超链接，还可以对图像的某个区域创建超链接。对图像中的某些区域设置链接称为热点链接或热区链接，在图像上绘制的链接区域称为“热点”或“热区”，热区可设置为矩形、圆形或多边形，当用户单击“热区”时，会跳转到目标网页。3. 锚链接当网页内容很多很长的时候，需要频繁地翻页或使用滚动条来前后浏览并寻找想要查看的内容，看起来非常不方便。“锚链接”可以帮助我们解决这个问题，通过“锚

11、链接”可以直接定位到网页当中的某个具体的位置。“锚链接”是指在网页中对需要查看的某个位置先做一个标记，即命名锚记，然后，在网页的开始或结束的某个显著的位置创建一个指向该标记的链接，当单击这一链接时，页面立即跳转到指定的位置上，便于浏览者查看。4. 邮件链接邮件链接，是指当单击该链接时，会启动相应的电子邮件客户端程序，上面自动显示我们设置的邮件地址，用户撰写邮件后，可以直接进行发送。5. 下载链接“下载链接”是指当目标文件浏览器无法识别的时候，就会出现提示下载对话框，可以将文件进行下载保存。浏览器无法识别的文件类型有很多，比如常用的.RAR或.ZIP文件，即我们用压缩软件（Winrar）来制作的

12、文件。6. 导航条导航条的作用是实现网站的主要链接栏，“导航条”由若干个导航元件构成，导航元件是由图像生成的，可以创建指向其他位置的链接，每个导航元件包含四个图像，这四个图像分别是表示链接的四种状态的图像，即正常状态、鼠标经过时的状态、按下图像、按下时鼠标经过图像，一个网页中只能有一个“导航条”。3.5.3 管理站点内的链接1. 设置链接的更新参数链接是一个网站的灵魂，链接正确与否在网站中非常重要，保证链接的正确和有效才会使浏览的过程畅通无阻，因此，在对网页内容进行编辑修改的时候如果涉及到已创建的链接，就要及时更新，以保证链接的有效性。2. 改变链接网页中的超链接创建好之后，当网页或对象发生变

13、化的时候，经常需要进行修改，以保证链接的有效性。3. 修复断开的链接网站创建完之后，在维护的过程中，需要经常检查和修复超链接，以保证网页浏览的效果。 3.6 创建文档的小技巧3.6.1 去除页面的空白在网页中进行删除、复制、移动对象等编辑操作时，经常会在页面中产生一些空白区域或空行，这些空白区域有的可以用删除键删除，有的却删除不掉。出现页面空白最主要的因素是网页中有成对的多余空标记，它们不标记任何内容，是在编辑网页内容的过程中生成的。删除这些空标记的时候，可以手动删除，也可以让系统帮助我们进行自动清理。BACK3.6.2 文字空格的方法在网页中一般不能直接接收我们通过按空格键输入的连续空格，如

14、果我们想输入连续空格，可以通过两种方式进行输入。一种是按组合键Ctrl+Shift+Space来输入连续的空格；还有一种是将输入法切换到中文输入法，然后将“全角/半角”方式改变成全角方式，这时按空格键就可以输入连续的空格了。 本章小节：本章主要阐述了网页的创建和编辑、不同类别网页元素的添加和编辑、超链接的创建和修改以及创建网页的一些技巧知识。本章内容是制作网页的基础性内容，熟练扎实的掌握才能够进行下一步的工作。本章习题：一 判断1、在网页中插入图像时，该图像必须要复制到站点目录中。2、在网页中进行“查找和替换”操作时，只能查找和替换文本内容。3、通过“插入面板”插入的日期可以自动和系统日期同步

15、。4、设置字体时，如果没有所需要的中文字体，可以使用“编辑字体列表”进行添加，同样，对于添加的字体只能是中文字体。5、网页属性中的背景图像和跟踪图像非常类似，可以互相取代使用。6、在网页中插入的图像可以在DREAMWEAVER中进行简单的编辑操作。7、在一个网页中，只能插入一个导航条。8、创建“下载链接”时，目标文件应设置成浏览器无法识别的类型。9、在网页中编辑对象的时候，如果属性面板被隐藏了，可以通过菜单【查看】|【属性】来打开属性面板。10、在网页中插入的FLASH影片可在编辑状态下进行播放，也可以在编辑状态下修改影片文件。二 填空1、通过_操作可以使各个网页之间连接起来，使网站中众多的页面构成整体，访问者可以在各个页面之间进行跳转。2、在网页中输入连续的空格，一般可通过按组合键_+ _+SPACE来进行输入。3、一个有很多内容的网页，如果要实现向网页中的指定位置进行跳转，需要进行_操作.4、插入鼠标经过图像时需要先准备_幅图像。5、在DREAMWEAVER中创建的网页，其默认的扩展名为_。6、为网页中插入的对象设置格式，通过_最方便。7、在网页中插入的图像最常用的格式有两种，分别是_和_。8、要更改链接的颜色，可以通过_来进行设置。三