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

《《网页设计与制作教程与实训》全套ppt电子课件教案第3章实训网站电子相册》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、平一定会赶上专业设计者。总之，一句话，设计站点时，先上因特网上看一下类似的主页设计情况。下面我们分析上面网页的第一行，这个网页的主题是“电子相薄”，有三个大栏目：自娱自乐、魅力摄影、相册服务。“电子相薄”、“自娱自乐”、“魅力摄影”、“相册服务”的背景是四张图片，这可以用PHOTOSHOP来实现，就是说，我们选择好图片后，再用PHOTOSHOP设置大小，然后在PHOTOSHOP中输入汉字。●网页分析要注意的一点是，上面的摄影头像，它占了两个图片的一部分，它是被分割后再分别贴在两张图片中的。因此，要很好的设计网页的背景

3、，必须学习PHOTOSHOP，这个软件可以自学，找一本书边看边尝试。“自娱自乐”、“魅力摄影”、“相册服务”栏目下分别又有“生活快镜”、“花边娱乐”、“发烧友推荐”、“摄友演练场”、“我的相册”、“相册服务”这几个分栏目。我们下边用DREAMWEAVER设计一个电子相册，也用一点图片，同时注意颜色搭配，如果想尝试图片作背景，大家学了PHOTOSHOP以后可以自我练习。模仿制作未完模仿制作（未完）第三章创建文档3.1文档的操作3.2页面属性的设置3.3文本元素的添加和编辑3.4图像和媒体的处理3.5超链接的创建与管理

4、3.6创建文档的小技巧本章要点文挡的创建、修改与保存用页面属性设置网页效果网页各种元素的添加与编辑不同超链接的创建与管理创建文挡的技巧运用3.1文档的操作1.新建文档创建文档可以通过Dreamweaver提供的模板创建有格式的文档，也可以直接创建空白文档。2.打开文档对于站点中保存的网页，可以通过站点面板或菜单进行打开。3.文档保存新建文档或对打开的文档编辑完成后，需要对文档进行保存，保存文档分为直接保存和另存文档两种方式。BACK3.2页面属性的设置在网页中有时需要对网页的整体效果进行设置，例如设置网页的背景颜色、

5、网页的文本颜色、超链接的一些状态等等，这些设置可以通过“网页属性”来实现。在“页面属性”对话框中，左侧窗口显示页面属性的分类，选中每个类别时，右侧区域就会显示出该类别中所包含的设置项目，BACK3.3文本元素的添加和编辑在网页中，文本是表达网站主题必不可少的内容，丰富、详实的文本内容会让网页更加充实、不空洞，文本在网页中占有非常大的比重。因此，文本内容的输入及合理的设置是制作网页的最基本也是最重要的内容，虽然操作简单，但是绝对不能忽视。在页面中插入文本内容，一般可以通过两种方式来插入。第一种是直接输入。第二种是从外部

6、文件或网络中复制文本。BACK3.3.1文字的格式化1.使用文字的属性标记在网页中输入文本后，接下来就要根据需要来设置文字格式，文字格式包括有字体、大小、颜色、修饰、对齐方式等。设置文字的属性时应该考虑到网页中的整体风格，文字与文字之间的格式跳跃性不能太大，从整体上要给人以和谐、美观、大方的效果，让浏览者在欣赏的时候能感到赏心阅目，并有兴趣做进一步的停留。1)文字字体的设定2)文字字号的设定3)文字颜色的设定4)设置文字的样式5)设置文字对齐6)加入项目列表和编号7)调整文字缩进3.3.2其它文本的输入1.加入特殊字

7、符2.加入批注文字3.插入日期4.插入水平线3.3.3查找和替换文本查找和替换功能可以帮助我们在网页中进行批量更改和批量更新，并且可以针对不同类别的对象进行。3.4图像和媒体的处理3.4.1图像的处理1.图像的概述在设计网页时，图像是美化网页必不可少的组成部分，合理地选择和使用图像，可以对网页起到画龙点睛之笔。此外，图像插入到网页中时，既要考虑到网页版面的美观，还要考虑网页的浏览速度，插入的图像不能过大。如果网页太大，在浏览时会需要漫长的时间等待，浏览者不会有这样的耐心，因此，我们在设计网页时，要二者兼顾。目前在网页

8、中最常用的图像格式有两种，分别是gif与jpg格式。此外，在DreamweaverMX2004中插入的图像也可以是png格式，png格式是MacromediaFireworks创建的图像格式，并且是在IE4.0以上和NetscapeNavigator4.0以上的版本才支持的格式。BACK2.图像的插入和编辑3．翻转图“翻转图”是图像在网页中的一