Dreamweaver网页制作案例(dreamweaver网页制作案例应用)
如何使用Dreamweaver制作一个网页
首先要下载安装Dreamveaver程序,接下来按下面步骤来操作:
创建网页页面?
1、在Dreamveaver“文件-新建-常规-基本页-HTML”,这样就建好了一个页面,英文版的默认的文件名为untitled.htm。中文版的的默认的文件名为“无标题文档”。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。
注:网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页,上传后打开网页默认连接到此页。?
2、在标题空格里输入网页名称,点击修改-页面属性,打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像,超级链接的颜色(一般默认即可),其他都保持默认即可。?
3.此时光标位于左上角,可输入一句话,如“欢迎来到我的主页”。选取文字,用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间等。?
4.如要选取字体,则选择字体中的最后一项:编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。
注:在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用,因为别人电脑上未装就看不到。如果需要用的话,要做成图片后再使用。?
注:在网页上打入空格的办法是:把输入法调为全角。?
注:在网页上换行的办法是:shift+Enter。只按Enter则为换段。?
下面拿一个现成的例子来给大家讲解一下:?
现在,以下边的简单网页为例,叙述一下制作过程。简单网页如下图:?
在开始制作之前,我们先对这个页面进行一下分析。看看这个页面用到了哪些东西。?
□网页顶端的标题“我的主页”是一段文字。
□网页中间是一幅图片。
□最下端的欢迎词是一段文字。
□网页背景是一深紫红颜色。?
构思好这个网页的结构,我们就可以开始制作了。?
首先启动Dreamweaver,确保你已经用站点管理器建立好了一个网站(根目录)。?
为了制作方便,请您事先打开资源管理器,把要使用的图片收集到网站目录images文件夹内。
【插入标题文字】?
进入页面编辑设计视图状态。在一般情况下,编辑器默认左对齐,光标在左上角闪烁,光标位置就是插入点的位置。如果要想让文字居中插入,点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧,我们可以对它进行设置。?
【设置文字的格式】 选中文字,在上图属性面板中将字体格式设置成默认字体,大小可任意更改字号。并选中“B”将字体变粗。?
【设置文字的颜色】首先选中文字,在属性面板中,单击颜色选择图标,在弹出的颜色选择器中用滴管选取颜色即可。?
【设置网页的标题和背景颜色】?
点击“修改”菜单选“页面属性”。系统弹出页面属性对话框(如下图)?
请在标题输入框填入标题“我的主页”。?
设置背景颜色: 网页背景可以是图片,也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片,点击背景图象“浏览”按钮,系统弹出图片选择对话框,选中背景图片文件,点击确定按钮。?
设计视图状态,在标题“我的主页”右边空白处单击鼠标,回车换一行,按照以下的步骤插入一幅画图片,并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。 ?
【插入图像】选择以下任意一种方法:?
(1)使用插入菜单:在“插入”菜单选“图像”,弹出“选择图像源文件”对话框,选中该图像文件,单击确定。如下图:?
(2)使用插入栏:单击插入栏对象按钮选 按钮,弹出“选择图像源文件”对话框,其余操作同上。?
(3)使用面板组“资源”面板(如下图):点按钮,展开根目录的图片文件夹,选定该文件,用鼠标拖动至工作区合适位置。?
注:为了管理方便,我们把图片放在“images”文件夹内。如果图片少,您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写,不能用中文,否则要出现一些麻烦。?
一个图片就插入完毕了。(插入*.swf动画文件,选择“插入”菜单>媒体>Flash)。?
【输入欢迎文字】?
在图片右边空白处单击,回车换行。仍然按照上述方法,输入文字“欢迎您……”然后,利用属性面板对文字进行设置。?
保存页面。?
一个简单的页面就这样编辑完毕了。?
【预览网页】在页面编辑器中按F12预览网页效果。?
网站中的第一页,也就是首页,我们通常在存盘时取名为index.htm。?
如何使用Dreamweaver设计网页
你好。首先下载Dreamweaver.exe并打开,选择你使用的编辑语言,本案例用html
打开页面后,选着设计窗口,如图所示。设计窗口可以快速布局网页,不需要自己编辑代码。
打开你要设计的网页的设计图,本经验是百度经验首页为例,首先我们制作顶上的搜索条,点击插入—表格(如图所示)。打开表格属性编辑表格属性。插入1行和5列,表格宽度为1130,(即为网页的宽度),边距,间距分别为0,此表格只是为了定位,因此不设边框。
设置好表格后,可在表格里面插入你的内容,首先我们插入logo,点击插入—图像—选择你要插入的图片。点确定即可完成logo插入。表格的小大高度都可根据设计图需要调整,鼠标移到表格边框虚线即可拖拉调整高度或宽度。如图所示
接下来我们来做搜索框,点击插入—表单—插入文本域—确定。插入文本框后可点击文本框调整文本框的属性。根据设计图,文本框上班还要添加内容,因此,可选择单元格右击选择表格—拆分单元格,此处是需要添加一行的内容,因此拆分为两行,如图所示。
用同样的办法拆分上面的行,因为要添加10个选择项,因此拆分为10列(右击选中的行—拆分单元格—10列—确定)。拆分好后在小格里面添加文字内容即可。表格大小可根据步骤四调整。
接下来我们做搜索按钮,同样根据设计图要把表格拆分为两行。点击插入插入按钮的图片。
接下来给按钮添加链接,本次经验分享的是静态网页,因此在此先跟大家分享怎么直接添加按钮链接。同样是点击插入—添加超级链接,填写你事先做好的页面链接,或者其他网站链接。
剩下的内容都可根据方法步奏逐渐添加,调节细节即可完成你想要设计的网页。如图所示是上面步奏所做的静态页面,把所有做好的网页用超级链接链接起来即可做成一个简单的网站
另外我们还可以采用front page。也可以很容易的实现。
望采纳。
怎么用Dreamweaver制作网页?
1、双击打开Dreamweaver这款软件,进入Dreamweaver的操作界面。点击上方文件,下拉找到新建。
2、点击新建后,选择空白页,文档类型为HTML。布局为无,点击右下角创建。结果如下图所示。
3、页面右侧找到插入选项,点击他。并将它拉伸变长,找到表格选项。
4、对话框弹出后,设置表格大小。行:3,列:1,其余暂时不变。完成后点击确定。
5、在设计视图可看到,我们设置的3行1列的表格。在代码视图可看到,设置3行1列表格的代码,我们继续在设计视图进行操作。
6、点击表格内部,下方出现表格设置。在表格第一行输入网页的标题文字,随后点击下方,水平:居中对齐,垂直:居中。并设置表格宽高,此时宽为51。
7、将鼠标光标放在表格第二行,点击右侧图像,下拉后第一行点击图像。
8、对话框出来后,在下方文件名中输入,插入图片的名称,点击确定即可。
9、在表格第三行,输入文字:我的链接。并在后面附上链接,可复制可手工输入。
10、点击上方文件,找到保存选项,点击保存。然后在对话框中输入此文件名,并保存在你容易找得到的地方,在点击确定即可。
11、点击上方,像地球一样的图标,下拉后,点击在IE浏览器中预览,也可以在自行安装的浏览器中预览。
如何使用dreamweaver制作网页
工具/原料
Dreamweaver CS6
方法/步骤
1、新建一个ASP网页并且保存。如图所示
2、连接好数据库,见笔者之前分享的经验。
3、在网页中插入模板的内容,并添加好各个超链接
4、页面设计好后把网页另存为模板。操作如图所示。
5、接着在需要编辑的部分插入“可编辑区域”,操作如图所示。
6、保存后,我们就可以在网站根目录下的“Templates”文件夹下看见我们刚刚新建的模板了。以后要修改模板的内容就可以直接打开编辑了。
Dreamweaver CS6 制作一个简单网页
以实例说明Dreamwaver CS 6版本的应用。即使现在用很多有关DreamwaverCS6版本的书籍资料,但是资料太过复杂,反而不知道从而下手。这篇经验将以本人经验说说Dreamwaver CS6 的使用。这里举的例子是“新闻网页首页”的制作。
打开DW,DW界面如图
分析所制作的网页的需求,明确目标
明确需求。如果是建议一个网站,需要建立一个站点,方便管理并使制作步骤更为有条理。
新建站点弹出来的窗口。在这里我输入的是“新闻网页”,放在Dreamwaver CS6文件夹下的新闻网页文件夹
在新闻网页文件夹下新建“images”文件,导入制作网页所需要的素材,这里所需要的素材都是图片
新建HTML,选择“创建”
在“标题”中输入“新闻网页首页”,转换到“设计”界面
根据制作网页需求插入表格,只是在行列有所变化,下面的“表格宽度”以下选项根据图设置
插入表格如图,选择表格,会看到表格边框变红,选择之后变黑。在属性中对齐选项选择“居中对齐”
在表格第一行第一列输入“用户名”,在第一行第二个表格插入“文件域”。然后是密码,同样的插入“文件域”。切换到“拆分”界面,选中密码对应的“文件域”,将“type”改为“password”
插入图像,不知道怎么填的话就一直选择“确定”即可
插入按钮,同上面插入图像的处理方法那样处理,如果不知道填什么就一直“确定”,无妨。在属性栏里的值改为“登录”。然后插入图像“谷歌logo”,附上效果图
选中第二行,点击鼠标右键,选择“表格”,“合并单元格”
在第二行插入图片。完成页面制作。保存HTML文件。然后在站点“新闻网页”可以看到保存的HTML文件
点击制作好的HTML文件,选择用360浏览器打开,输入用户名和密码,然后会看到如下情况:用户名课件,密码不可见,符合实际
当然也可以在Dreamwaver CS6 的实时视图中完成第15步
怎么用dreamweaver制作简单网页
第一步:打开dw,点击dw左上角的文件按钮。
第二步:在文件按钮弹出的菜单中选择新建。
第三步:在弹出的对话框中选择要新建的内容,新建网页就是html的。
第四步:在选择新建类型后,点击创建按钮。
第五步:新建完成后会看到网页的源代码,然后我们在body标签中填写内容。
第六步:点击左上角的文件按钮,在弹出的对话框中选择保存,可以利用快捷键ctrl+s保存。
第七步:点击创建按钮后会询问保存路径及保存文件的名称,可以新建为index.html,然后点击保存。
第八步:在保存路径找到该文件,然后双击打开。
第九步:双击打开后在浏览器可以看到一个网页了。