网页设计与制作实训指导书.docx

网页设计与制作实训指导书.docx

《网页设计与制作实训指导书.docx》由会员分享，可在线阅读，更多相关《网页设计与制作实训指导书.docx（8页珍藏版）》请在冰豆网上搜索。

网页设计与制作实训指导书

网页设计与制作

实训指导书

目录

实验1:

建立站点1

实验2：

在网页中建立文本和段落20

实验1:

建立站点

一、实验目的

1．掌握在dreamweaver中建立站点和网页的方法

二、实验环境

1、一台裸机

　2、dreamweave网页设计软件

三、实验内容

在dreamweaver中建立站点和网页

四、实验步骤、过程

1、在菜单栏【站点】菜单中选择【管理站点】，在弹出的【管理站点】对话框中点击【新建】按钮，出现【站点】和【FTP】两个选项。

选择如图2.6所示。

2、选择【站点】弹出【未命名站点1的站点定义为】对话框，在【未命名站点1的站点定义为】中选择【基本】选项卡。

3、文本框中填写您站点的名字，它仅仅做为管理和识别用，单击【下一步】按钮，进入下一步。

如图2.7所示。

4、我们要建立的是静态网页，因此我们选择【不，我不想使用服务器技术】如图2.8所示，单击【下一步】按钮，进入下一步。

5、选择第一项：

编辑我计算机的本地副本，完成后再上传，也建议网络初学者也采用此项，选择要保存网站的物理路径名。

手工填写或者点击文件夹图标选择路径都可以，单击【下一步】按钮，进入下一步。

如图2.9所示。

6、\【您如何连接到远程服务器】现在，已经为您的站点定义了一个本地根文件夹。

暂时我们还不登陆远程服务器，因此选项中选择【无】。

单击【下一步】按钮，进入下一步。

7\、编辑站点

站点的编辑其实很简单，选择【站点】菜单下的【管理站点】命令。

选中站点的名称，然后单击【编辑】按钮。

将会出现类似创建站点的内容，根据需要可以在相应的内容上进行修改。

实验2:

段落设置

一、实验目的

1．掌握利用记事本或者dreamweaver来创建段落

二、实验环境

1、dreamweave网页设计软件或者记事本

三、实验内容

在网页中建立文本与段落

四、实验步骤、过程

1、打开01文件夹下的01.htm网页，如图3.7所示

2、选择布局工具栏的【绘制层】，放在如图3.8所示的位置，有关绘制层的更多内容参见后面的章节。

3、在层中输入类似图3.9所示的文字，注意在图中指示位置输入空格。

接下来我们使用键盘的【回车】可以换行，同时也就结束了一个段落。

4、在层中输入类似图3.9所示的文字，注意在图中指示位置输入空格。

接下来我们使用键盘的【回车】可以换行，同时也就结束了一个段落。

5、我们可以对其中段落进行对齐，对齐方式主要有：

左对齐、居中对齐、右对齐和两端对齐4种对齐方式，即对应着【属性】检查器里的这四个按钮。

其设置方法与设置文本相同。

我们这里选择居中对齐。

结果如图3.10所示。

6、\项目列表：

设置相同类别文本的列表形式。

打开02文件夹下的01.htm网页，选中属性面板的列表按钮，然后在文档窗口输入列表需要的文字，要输入下一项直接回车即可。

默认的就会在其前面加上项目符号。

如图3.11所示网页。

7\、接下来我们再制作另外一种编号列表：

选中属性面板的列表按钮，与步骤1类似，看一下结果如图3.12所示。

8、接下来我们在网页当中插入日期，选择【插入】菜单的【日期】命令。

或者在【插入】栏的【常用】类别中，单击【日期】按钮。

出现图3.13所示的对话框。

选择你所喜欢的日期格式，您如果要在每次保存文件时都自动更新该日期。

则将【储存时自动更新】选中。

9、接下来我们插入另外一个文本元素水平线：

用户可以使用一条或者更多的水平分割线，将文本或者对象分割开来。

选择【插入】菜单下的【HTML】→【水平线】如图3.14所示

10、接下来我们设置一下水平线的属性，选中水平线，看一下【属性检查器】我们设置水平线的【宽】为500，当然高度，对齐都可以根据需要进行设置，效果如图3.15所示。

11、在此背景下我们好象看不到水平线，主要是因为水平线的颜色默认为灰色，我们可以设置其颜色，选中水平线，选择【拆分】视图，我们发现在【代码】视图里有选中的代码，结果如图3.16所示。