DW制作网页的基本步骤

操作方法

  • 01

    这篇文章主要是针对初学者的,告诉大家如何Dreamweaver制作一个网页?本文具体详细讲解了网页制作方法的基本步骤以及注意的问题,并且拿一个具体的实例来给大家做了一下详细讲解! 网页制作方法:创建网页页面 1、在Dreamveaver中“文件—新建—常规—基本页—HTML”,这就建好了一个页面,英文版的默认为文件名untitled.htm。中文版的默认为文件名“无标题文档”。htm表示的是这个网页文件是一个静态的HTML文件。可以给它改名为index.htm。 2、在标题空格那里输入网页的名称,点击—页面属性,打开这个窗口后在这里可以设置网站标题、背景颜色还有背景图像,超级链接颜色,其他都保持默认值就可以了。 3.这个时候光标在左上角,你可以输入一句话,如“欢迎大家来到我的主页”,用文字,用菜单“窗口/属性”打开属性面板,取文字的大小,再把文字设置为居中,然后在文字的前面敲几下回车就位于页面中间了。 4.要选取字体,即选择字体中的最后一项:即编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体,点击中间的按钮就可以加入了。 注:在网页上一般最常用的是就宋体字。切将特殊的字体加到列表中使用,因为可能别人的电脑上没有安装看不到。如果有需要用的话,一定要做成图片后再使用。 下面拿一个现成的例子来给大家说一下: 在开始做之前咱们先分析一下这个页面,看看这里这个页面用到了哪些东西。 网页最顶端的标题“我的主页”这四个字。 网页中间是一张图片。 最下端的是欢迎词。 网页背景是一白色。 构思好这个网页的结构,咱们就可以开始制作了。 首先启动Dreamweaver,确保你已经建好了一个网站。 为了制作方便,要事先打开资源管理器,把要用的图片放到网站目录images文件夹里。 【首先插入标题文字】 进入到页面编辑中,设计视图状态。一般的情况下,编辑器的默认方式是左对齐,光标位于左上角,光标所在的位置就是插入点的位置。如果想让文字居中插入的话,点击属性按钮就可以了。中文状态下输入“我的主页”。字的大小没关系,我们对它进行设置就可以了。 【设置文字的格式】 先选中文字,在属性面板中将字体格式设置成默认字体,大小随意更改。并选中“B”把字体加粗。 【设置文字的颜色】先选中文字,在属性面板中,单击颜色选择图标,在弹出的颜色选择器中用滴管选取颜色即可。 【设置网页的标题和背景颜色】点击“修改”菜单中的“页面属性”。系统自动弹出页面属性的对话框,请在文本标题输入框内填入标题“我的主页”。 【设置背景颜色】网页的背景可以是图片,当然也可以是颜色。这个例子是颜色。如上所诉打开背景颜色选择器进行选取。如果背景要设置为图片,则点击背景图象“浏览”按钮,系统自动弹出图片选择对话框,点击图片就可以了。 【插入图像】选择以下方法: (1)插入菜单:在“插入”菜单选“图像”,弹出“选择图像源文件”对话框,选中该图像文件,单击确定即可。 一个图片就插入完毕了。 【输入文本文字】 在图片右边空白处有单击,回车换行。仍然按照上面的方法,输入文字“欢迎大家来到我的主页”然后,对文字进行设置,保存页面。 一个简单的页面就完成了。 【预览网页】在页面编辑器中按F12预览网页效果。 网站的首页一般我们通常存盘取名时为index.htm。

(0)

相关推荐

  • 如何使用ps和DW制作网页?使用ps和DW制作网页的方法

    想知道如何快速简单的建立一个网页,小编今天为大家带来的是如何使用ps和DW轻松制作网页,或许当我们看到一些导航网站时候,可能觉得制作一个网页一定不简单,那怎么让制作网页变得简单起来呢?一起来看看吧! ...

  • Dw制作网页基础(设置网页属性和编辑头部信息)

    Dw制作网页基础(设置网页属性和编辑头部信息) 操作方法 01 这里我们主要说的呢是在Dreamweaver中制作网页基础( 包括设置网页属性和编辑头部信息)首先我们像往常一样这里我们需要先建立一个新 ...

  • DW制作特效步骤提醒导航效果模板+验证码

    DW制作特效步骤提醒导航效果模板+验证码方法,教程很不错,推荐过来,一起来看看吧! 方法/步骤 1.打开Adobe Dreamweaver cs5新建一个空白网页 2.切换到代码页面 3.把<b ...

  • DW CS3网页制作之CSS布局规则

    DW CS3网页制作之CSS布局规则 步骤/方法 01 CSS文件的链接方式 ·附加链接:外部CSS文件 ·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中 02 CSS规则定义 ...

  • DW CS3网页制作之布局实例

    DW CS3网页制作之布局实例 步骤/方法 01 一.CSS规则定义之"类型" 类型主要针对文本属性进行定义.理解"编辑字体列表"和"行高" ...

  • DW在制作网页时怎么插入到html中一张图片?

    DW是网页设计中不可少的软件,很多初学者都会学习DW,那在html网页设计中,如何给网页中添加一张图片呢?我们可以添加网络图片 在网页中插入本地图片 01 先打开DW软件,创建一个html网页. 02 ...

  • DW制作九宫格全屏亮灯轮播图片且自动切换图片教程

    本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 方法/步骤 1.打开Adobe Dreamweaver,新建一个网页.然后在& ...

  • DW制作带小喇叭、带HOT字样图标的文字滚动代码

    文字滚动,类似网页上的文字通知.今天就为大家分享DW制作带小喇叭.带HOT字样图标的文字滚动代码放发,有需要的朋友快快来学习吧! 方法/步骤 1.打开Adobe Dreamweaver cs5,新建一 ...

  • DW制作兔斯基的表情打分图标(给力、淡定等)

    这篇教程是向我们的朋友介绍DW制作兔斯基的表情打分图标方法,有给力.淡定.打酱油.学习等图标.图标是动态的.而且可以看到打分的分数.如下 方法/步骤 打开Adobe Dreamweaver cs5,新 ...