教你制作简单网页——图文教程

《教你制作简单网页——图文教程》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、教你制作简单网页——图文教程来源： 章雪蕾的日志    班级主页及LOGO设计大赛正在如火如荼的进行着，大一的同学们对于班级LOGO的热情十分强烈，相比之下，大二年级难度较高的班级主页就显得有点点孤单。  “可是真的不是我们不想做啊，是不会做啊！”那天的培训想必各位同学都有认真听，但是可能还是被大篇的代码吓到了……看到别的班有大神级的同学做出来网页我们也很羡慕啊有木有！我们也想把班里的囧照趣事放在主页里有木有！我们也想在班级主页颁奖的时候全班一起大喊“XX班最厉害”啊有木有！其实制作一个网页并不一定是那么难，也不会很枯燥。为了

2、证实这一点，就请大家看完我这一篇“图文并茂”的日志吧~好了~下面就说正事：1、 打开DW 2、 新建一个HTML  这样就建好了一个页面，英文版的默认的文件名为untitled.html。中文版的的默认的文件名为“无标题文档.html”给它改名为index.html。注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。 在制作网页的过程中最好及时保存，一般新建一个以班级命名的文件夹，将网页保存至该文件夹，再在该文件夹内新建一个命名为“img”

3、的子文件夹，将网页中要用到的背景图片或者插入的照片存入该文件夹。3、 因为代码部分自己一个一个敲还是挺麻烦的~所以大家选择设计页面~  现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图：一、制作一个主页 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了哪些东西。·l 网页顶端的标题“我的主页”是一段文字。·l 网页中间是一幅图片。·l 最下端的欢迎词是一段文字。·l 网页背景是一深紫红颜色。构思好这个网页的结构，我们就可以开始制作了。首先启动dreamweaver，确保你已经用站点治理器建立好了一个

4、网页。·【插入标题文字】进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。假如要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。·【设置文字的格式】·选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“b”将字体变粗。·【设置文字的颜色】·首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。·【设置网页的标题和背景颜色】点击“修改”菜单选“页面属性”

5、。系统弹出页面属性对话框（如下图） 请在标题输入框填入标题“我的主页”。设置背景颜色：网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。假如背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。你也可以通过属性面板中的左对齐按钮让其居左安放。·【插入图像】选择以下任意一种方法：（1）          使用插入菜单：在“插入”菜单选“图像”，弹

6、出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：  （2）使用插入栏：单击插入栏对象按钮>选按钮，弹出“选择图像源文件”对话框，其余操作同上。注：为了治理方便，我们把图片放在“img”文件夹内。假如图片少，也可以放在站点根目录下。注重文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞flash）。*插入菜单中还有很多别的功能哦~·【输入欢迎文字】 在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您……

7、”然后，利用属性面板对文字进行设置。保存页面。 一个简单的页面就这样编辑完毕了。·【预览网页】 在页面编辑器中按f12预览网页效果。二、多页面的切换跳转 这样我们就有了一个网页，相信大家对班级风采的展示肯定会分不同的方面，那么页面之间如何跳转呢~下面就写写这部分： 如上步骤制作班级主页的第二页，与index.html一起保存在以班级命名的那个文件夹下。 选择index页中触发跳转的对象（可以是按钮，也可以是图片），在页面下方会出现如图的选项， 选择链接框后面的小文件夹图标，在弹出的选择框中选择要跳转的网页，选择确定。保存之后预

8、览在浏览器，点击触发对象就可以成功的跳到下一页啦~这样，我们就建成了属于自己的网页，现在看来，制作一个属于自己班级的网页并没有那么难对不对~！大家快快拿起鼠标，做一个自己班级的主页然后参赛吧~！ 友情链接~：10级班级主页展示：http://www.student.buct.