教你制作简单网页图文教程.docx

教你制作简单网页——图文教程 来源：? HYPERLINK /GetEntry.do?id=882097685owner=279382025 \t _blank 章雪蕾的日志 ? ? ? ?班级主页及LOGO设计大赛正在如火如荼的进行着，大一的同学们对于班级LOGO的热情十分强烈，相比之下，大二年级难度较高的班级主页就显得有点点孤单。 ? ? “可是真的不是我们不想做啊，是不会做啊！”那天的培训想必各位同学都有认真听，但是可能还是被大篇的代码吓到了……看到别的班有大神级的同学做出来网页我们也很羡慕啊有木有！我们也想把班里的囧照趣事放在主页里有木有！我们也想在班级主页颁奖的时候全班一起大喊“XX班最厉害”啊有木有！其实制作一个网页并不一定是那么难，也不会很枯燥。为了证实这一点，就请大家看完我这一篇“图文并茂”的日志吧~ 好了~下面就说正事： 1、? 打开DW ? 2、? 新建一个HTML ? ? 这样就??好了一个页面，英文版的默认的文件名为untitled.html。中文版的的默认的文件名为“无标题文档.html”给它改名为index.html。 注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。 ? 在制作网页的过程中最好及时保存，一般新建一个以班级命名的文件夹，将网页保存至该文件夹，再在该文件夹内新建一个命名为“img”的子文件夹，将网页中要用到的背景图片或者插入的照片存入该文件夹。 3、? 因为代码部分自己一个一个敲还是挺麻烦的~所以大家选择设计页面~ ?? 现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图： 一、制作一个主页 ? 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了哪些东西。 l? 网页顶端的标题“我的主页”是一段文字。 l? 网页中间是一幅图片。 l? 最下端的欢迎词是一段文字。 l? 网页背景是一深紫红颜色。 构思好这个网页的结构，我们就可以开始制作了。 首先启动dreamweaver，确保你已经用站点治理器建立好了一个网页。 【插入标题文字】 进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。假如要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。 【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“b”将字体变粗。 【设置文字的颜色】 首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。 【设置网页的标题和背景颜色】 点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图） ? 请在标题输入框填入标题“我的主页”。 设置背景颜色：网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。假如背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。 设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。你也可以通过属性面板中的左对齐按钮让其居左安放。 【插入图像】选择以下任意一种方法： （1）?????????? 使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图： ? ? （2）使用插入栏：单击插入栏对象按钮选 按钮，弹出“选择图像源文件”对话框，其余操作同上。 注：为了治理方便，我们把图片放在“img”文件夹内。假如图片少，也可以放在站点根目录下。注重文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。 一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞flash）。 *插入菜单中还有很多别的功能哦~ 【输入欢迎文字】 ? 在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您……”然后，利用属性面板对文字进行设置。 保存页面。 ? 一个简单的页面就这样编辑完毕了。 【预览网页】 ? 在页面编辑器中按f12预览网页效果。 二、多页面的切换跳转 ? 这样我们就有了一个网页，相信大家对班级风采的展示肯定会分不同的方面，那么页面之间如何跳转呢~下面就写写这部分： ? 如上步骤制作班级主页的第二页，与index.html一起保存在以班级命名的那个文件夹下。 ? 选择index页中触发跳转的对象（可以是按钮，也可以是图片），在页面下方会出现如图的选项， ? 选择链接框后面的小文件夹图标，在弹出的选择框中选择要跳转的网页，选择确定。 保存之后预览在浏览器，点击