网页制作教程,网页制作入门教程

发布时间：2024-08-31

网页制作教程,网页制作入门教程,新手建站必学教程。

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

题目：设计一个个人网站

一、要求：

1．使用Dreamweave网页工具制作一个个人网站；

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

3．网页中要有图片和文字内容，用表格或框架进行页面布局； 4．添加至少两种行为，并为首页添加背景音乐。

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

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

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

首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字，

不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs

，如图

网页制作教程,网页制作入门教程,新手建站必学教程。

打开Dreamweaver

软件，得到图

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

选择站点——新建站点。

我们建的文件夹就是站点根文件夹。新建站点后得到这样一个界面

点选高级，得到界面

网页制作教程,网页制作入门教程,新手建站必学教程。

站点名称与我们建文件夹得名字相同，zs填进去就可以了本地根文件夹就是我们新建的那个文件夹， http地址为

http://localhost/zs

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

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

网页制作教程,网页制作入门教程,新手建站必学教程。

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

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

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

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

单击新建，然后单击

接下来，选择

网页制作教程,网页制作入门教程,新手建站必学教程。

然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建

好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为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页面添加背景音乐。

网页制作教程,网页制作入门教程,新手建站必学教程。

大家在代码视图里找到<body><body/>

，这个是什么意思就不解释了，我也不知道，

就是这个了，在<body>后面输入代码<bgsound>，

然看见这张图片上，

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

个浏览，单击浏览，然后出现对话框，选择一首音乐，然后单击确定，

网页制作教程,网页制作入门教程,新手建站必学教程。

会继续弹出一个对话框点击是，保存到

自己建好的文件夹里面，注意这里不能用汉字做音乐名字，必须改成字母或者数字

我是以beyond的歌为例，名字改为by，点击保存背景音乐就添加好了。大家可以看一下，在站点目录下，已经有了这首歌曲。

接下来开始设计页面布局

网页制作教程,网页制作入门教程,新手建站必学教程。

这里用表格布局，这个栏叫设计栏，由于大家都不会代码，

所以我们主要在这个栏里操作，

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

中的这个图标

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

网页制作教程,网页制作入门教程,新手建站必学教程。

单击确定，得到如下界面

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

大家看两个图标，

这个图标就像是excel中那个合并和拆分单元格是一个意思，

左边那个代表合并单元格，右面那个代表拆分单元格，excel大家都会把，就和那个布局差

不错，我做一个简单的布局，为了方便，我把这个表格缩小，

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

宽度和高度的设置时在代码里找到<table width="900" border="0">，之后把它变成<table width="900" border="0" align=”center” height=””>，其中align表示表格位置，height表示表格高度，大家可以根据自己的需要来填数字，默认是以像素为单位的。

接下来制作导航，这是老师第六条中的第二个要求，注意我在这里给了两种方法，大家可以先看一下，再决定选择哪种

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

网页制作教程,网页制作入门教程,新手建站必学教程。

如果要文字居中显示可以将这四个框同时选中，然后居中

在水平栏里面选择

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

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

如果大家不嫌麻烦，教大家用flsh做一个动态的按钮导航，

把光标放在第一行第一个栏里，然后

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

网页制作教程,网页制作入门教程,新手建站必学教程。

得到对话框