基础的网页设计与制作 第4页
第四章 详细设计
在主页的最上面是一个Flash图片：采用默认安装的Dreamweaver MX 2004只提供了一种让你的主页更加富于变化和个性! Element效果，选择工具栏快捷菜单中的Element即可调出新的Flash Element工具
从上到下的各种属性依次为:图片播放界面背景色、图片标题色彩、图片标题字体、图片标题字体大小、动画框架色彩、是否显示框架、框架厚度、图片标题、图片链接地址、窗口打开方式、图片地址、是否显示控制条、是否自动播放、图片间隔延时、是否循环播放、标题、标题色彩、标题字体、标题字体尺寸以及转变类型。
Flash让我们的主页更加富于变化和个性!
我们还要对各选项进行一下设置。需要注意的是imageCaptions、imageLinks以及imageURLs处的各项之间需用逗号分开，并将你的图片地址以及点击后的链接地址填入相应框内，对于色彩的设置以及其它处理大家可根据自己需要来设置，同时对于最后一项图片间的转换效果，大家可以根据自己的喜好来选择，类似制作Power Point中幻灯片间的切换效果。
整体结构 注册 登录 动物简介 动物世界 动物秀 动物成语 珍惜动物 其他
组成构造
共分成十大部分：
u 动物世界：介绍多种动物
u 动物秀：展示不同动物的形态
u 动物简介：介绍一些常见动物的生活习性等
u 动物之家：介绍一些动物的特点
u 珍惜动物：列举一些珍惜、濒危动物
u 动物成语：找一些关于动物的故事，增加读者的兴趣
u 动物探索：展示一些奇怪的动物故事
u 动物论坛：这是一个互动平台，供网友交流
u 作者简介、联系方式
第六章 设计方案
1模板创建
当需要制作大量布局基本一致的网页时，使用模板是最好的方法。
我们的网页制作就是基于一个网页创建模板而设计的。
简明步骤：
打开一个已经存在的网页→另存为模板→新建可编辑区域→保存。
我们所用的是一个左右结构的模板，通过以上步骤一个模板就弄好了。
2页面制作
u 在开始制作之前，我们先对这个页面进行了分析。看看这个页面用到了那些东西。
□ 网页顶端的标题“动物世界”是一段文字,并以一个flash 为背景.
u □ 在中间我们弄的是一幅图片转换.
□ 网页中间是一幅图片.
□ 最下端的欢迎词是一段文字“do you like animals.
□ 网页背景是白颜色.
u □ 在最下端我们制作了一些友情连接图:百度等网站连接.
u □ 我们还在最左边弄了一个虚拟的十二生肖的连接.
u □ 右边是一个网站人员介绍.
大概的构思出来后我们就开始制作了:
首先启动Dreamweaver MX 2004，确保已经用站点管理器建立好了一个网站（根目录）。
为了制作方便，请事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内，把要使用的flash收集到网站目录flash文件夹内。
【插入标题文字】进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。
【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。
【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可.
【设置网页的标题和背景颜色】点击“修改”菜单选“页面属性”。为了管理方便，我们把图片放在“images”文件夹内。如果图片少，也可以放在站点根目录下。一个图片就插入完了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash）。
【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们在存盘时取名为index.htm。
这样一个简单的动物页面就编辑完毕了。
3框架技术
在浏览网页的时候，我们常常会遇到一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。
1、我们建了一个对话文档 如图所视：
2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。
3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。
4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。
6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。
7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成
4表格设计
表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。
1、 在编辑视图界面中生成了一个表格
2、 用鼠标拖拽表格的边框调整到适当的大小。
3. 单击左边的单元格，只需要鼠标的光标移动到边框上拖拽即可。
4. 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。
5、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，一个符合要求的表格做好了。
对表格操作的几种常用方式：
合并：将选中的连续单元格合并成为一个单元格。
分割：将一个单元格分割成若干单元格。
水平对齐方式：分为（左）（中）（右）三种。
垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）
表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。
上一页 [1] [2] [3] [4] [5] [6] [7] 下一页