教你制作静态网页的方法
教您制作静态网页的方法
一、网页设计基础
1、熟悉Dreamweaver 8的工作环境
2、创建新站点
创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成
3、网页文件的基本操作
a、创建、打开与保存网页文件
创建:文件----新建----创建
打开:文件---打开----选择欲打开的文件
或者在右边的文件浮动面版中选择打开
保存:文件---保存或另存为
b、设置网页的页面属性
修改---页面属性---然后设置(标题、背景、背景图像、文本等)
c、设置网页对象的颜色
网页对象,如页面背景、文字、链接都经常需要设置颜色。
可在各自对应的属性面版中设置。
d、网页文本的输入与属性设置
文本可键入、导入、粘帖
文字可设置字体、大小、颜色、格式等。
键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的
换行:ENTER、SHIFT+ENTER
实例练习:
1、输入以下文字
书签夹在诗集里,
落叶夹在深秋里。
喜悦夹在生活里,
追求夹在人生里。
2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。
3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。
比较两次设置的效果。
e、网页图片的插入与属性设置
插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中)
插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。
在图像属性面版中设置
f、插入层
方法: 1、点击插入面版中的“描绘层”;2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层;
3、可以随意移动层的位置;
4、可在层中插入图像、文字等。
g、*插入表格,用表格定位
方法:
1、先用鼠标点至欲插入表格的位置;
2、点插入面版中的“表格”—“插入表格”;
3、确定行数、列数后确定即将表格插入到选定位置了;
4、可在表格中任何单元格里插入图像、文字等。
h、建立超链接
方法: 1、选中要建立超链接的文字或图像;
2、点右键“创建链接”打开的窗口或在属性的链接栏里,填入链接的目标。(如: 本网站另一个网页,或外部网页如,或电子邮件如:mailto:zdhwangji@21cn、com)
3、在页面属性里修改链接的属性: 修改--页面属性(链接、活动链接、访问过链接)
二、制作实例1
制作要求:(网页效果)
1、页面的背景图片为bg0100、jpg;
2、在合适的位置插入图片earth、gif;
3、在网页中输入横排带阴影的文字“欢迎访问网络工程08级3、4班主页”
4、将网页用index、htm为名保存在本地站点My site中。
操作步骤:
1、按下面操作建立站点:先新建一个文件夹My site(下面举例中就是建立在桌面上)。
●选择“站点”---“新建站点”命令;
●在弹出的对话框中,在“站点名称”文本框中输入“应用实例1”,并点下一步;
●按下图选择“否,我不想使用服务器技术”,然后点“下一步”;
●按下图选择“编辑我的计算机上的本地副本,……”,并选择文件存放的目录路径,
然后点“下一步”;
●在“您如何连接到服务器?”选项里选择“无”,然后点“下一步”;
●然后点“完成”。这样就已经建立好一个新的站点了,可以在Dreamweaver界面右边
的“文件”窗口里瞧到新建立的站点信息。
5、2、在文件夹My site下创建文件夹images,以后此站点中用到的图像文件准备全部存放
在images文件夹里;为方便,这里先把此例中需要用到的图片bg0100、jpg与earth、gif 事先存放在此images文件夹里了。
3、创建一个新网页:网页文件--- 新建--- 选“基本页”---创建;
然后在网页编辑器窗口中,选择“修改”-—“页面属性”命令,在“页面属性”对话框中