简单的网页制作教程

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

选修课《网页设计》实践考核题

题目:设计一个个人网站

一、要求:

1.使用Dreamweave网页工具制作一个个人网站;

2.包含至少四个网页: 包括首页、个人简介、个人相册等(可随意设计),网页之间用超链接相连。

3.网页中要有图片和文字内容,用表格或框架进行页面布局;

4.添加至少两种行为,并为首页添加背景音乐。

5. 在网站中设计一个表单页面。

6. 首页必须包含页面标题,动态按钮导航栏。

下面我们大家统一一下软件版本,我用的是网页三剑客cs3版本的,大家可以去迅雷下载,因为我们要用到flash 建议大家也按装好flash

首先新建一个文件夹,文件夹的名字不能为汉字,做网站所有的路径都必须用字母或者数字,不能用汉字,我们就用名字吧,譬如说名字张三,那文件夹名字就是zs,如图

打开Dreamweaver软件,得到图

做网页要新建站点,关于站点配置服务器什么的,这里不讲了,只讲建立站点。选择站点——新建站点。

我们建的文件夹就是站点根文件夹。

新建站点后得到这样一个界面

点选高级,得到界面

站点名称与我们建文件夹得名字相同,zs填进去就可以了

本地根文件夹就是我们新建的那个文件夹,

http地址为http://localhost/zs

接下来选择左侧栏里远程信息

点击无后面的那个三角,选择本地网络,远端文件夹同样选择我们新建的那个文件夹

接下来点选左面菜单里的测试服务器,

点选访问后面那个三角,选择本地网络,测试服务器文件夹也为我们建好的文件夹zs,在url前缀后面加上zs

然后点击确定就可以了得到这样一个界面。

下面看老师的第一条要求,是要至少四个网页,那我们就做四个

单击新建,然后单击

接下来,选择

然后单击创建,接下单击文件——保存,保存这个文件,保存在我们一开始建好的文件夹里面,保存名字不能是汉字,只能是字母或者数字,因为我们只坐四个网页,可以简单一点,把这四个网页命名为a、b、c、d,或者1、2、3、4,当然一个网站默认的索引首页名为index,这里也用index,

单击保存,这样得到第一个页面,以同样的方式建剩下的三个页面,这里我的首页默认为index.heml,其他三个网页的名字分别为a.html、b.html、c.html,我们这四个网页文件已经保存在我们建的文件夹里。

站点中已经有了四个文件。

接下来,我们开始编辑index.html。

单击index.html,显示为当前页面。

单击拆分,

然后我们看这个,这个就是网页名字,我们以张三为例,这

个网页就叫张三之家,这样老师的第六条我们就完成一半了,同样的方法给其他三个网页改名字。

A网页标题

B网页标题

C网页标题

改好名字之后,一一保存,这个不多说了,接下来操作index.html。

显示首页为当前编辑页面。

首先为index.html页面添加背景音乐。

大家在代码视图里找到,这个是什么意思就不解释了,我也不知道,就是这个了,在后面输入代码

然看见这张图片上,

我光标指在哪里了吧,单击空格键,这个时候注意输入法要为美式键盘字母格式,只要不是汉字就行,得到一个菜单,单击src选中,然后单击enter建,这个时候紧跟着src会出现一

个浏览,单击浏览,然后出现对话框,

选择一首音乐,然后单击确定,

会继续弹出一个对话框点击是,保存到自己建好的文件夹里面,注意这里不能用汉字做音乐名字,必须改成字母或者数字

我是以beyond的歌为例,名字改为by,点击保存背景音乐就添加好了。

大家可以看一下,在站点目录下,已经有了这首歌曲。

接下来开始设计页面布局

这里用表格布局,这个栏叫设计栏,由于大家都不会代码,所以我们主要在这个栏里操作,

下面大家点击常用里面的表格,就是下面这张图片

中的这个图标

得到对话框如图所示数据:

单击确定,得到如下界面

这个插入的表格式可以自动调整大小的,大家可以自己试一下,接下来用这些表格布局,给

大家看两个图标,这个图标就像是excel中那个合并和拆分单元格是一个意思,左边那个代表合并单元格,右面那个代表拆分单元格,excel大家都会把,就和那个布局差不错,我做一个简单的布局,为了方便,我把这个表格缩小,

这个布局很简单,第二行全部合并,第三行第二三列合并,大家可以根据自己的需要进行拆分合并,还可以在表格里面再次插入表格。

宽度和高度的设置时在代码里找到

,之后把它变成
,其中align表示表格位置,height表示表格高度,大家可以根据自己的需要来填数字,默认是以像素为单位的。

接下来制作导航,这是老师第六条中的第二个要求,

注意我在这里给了两种方法,大家可以先看一下,再决定选择哪种

我没看懂什么叫动态按钮导航条,不知道是让这个字动呢,还是让这个字动呢?如果大家嫌麻烦,就直接输入汉字,结果就是下面这样的

如果要文字居中显示可以将这四个框同时选中,然后在水平栏里面选择居中

以后所有的文字格式都可以在这里面选,但是首先要选中自己所要操作的文字。

创建链接,选中首页两个字,然后单击右键——创建链接,选择index.html,然后以同样的方法,给其他三个栏里的文字做链接,创建链接的文字会有下划线,同时改变颜色

如果大家不嫌麻烦,教大家用flsh做一个动态的按钮导航,把光标放在第一行第一个栏里,然后

这个常用栏里的flash按钮,单击后面那个小三角,选择flash按钮。