基础的网页设计与制作 第4页

第四章 详细设计

 

在主页的最上面是一个Flash图片:采用默认安装的Dreamweaver MX 2004只提供了一种让你的主页更加富于变化和个性! Element效果,选择工具栏快捷菜单中的Element即可调出新的Flash Element工具

 

从上到下的各种属性依次为:图片播放界面背景色、图片标题色彩、图片标题字体、图片标题字体大小、动画框架色彩、是否显示框架、框架厚度、图片标题、图片链接地址、窗口打开方式、图片地址、是否显示控制条、是否自动播放、图片间隔延时、是否循环播放、标题、标题色彩、标题字体、标题字体尺寸以及转变类型。

 

Flash让我们的主页更加富于变化和个性! 

 

我们还要对各选项进行一下设置。需要注意的是imageCaptionsimageLinks以及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] 下一页

Copyright © 2007-2012 www.chuibin.com 六维论文网 版权所有