HTML制作网页体验其中乐趣

   众所周知,网站制作涉及到了各个方面的知识,包括平面设计、HTML页面制作、CSS样式定义、客户端脚本编写(JavaScrfipt/VBScript)、服务器端脚本编写(Asp/Asp.Net/PHP/JSP)等诸多内容。本期笔者从最基础的讲起,着重介绍怎样制作一个简单的HTML网站,初步体会一下其中的乐趣。

  1.这里笔者使用的网页制作工具是Dreamweaver。首先运行Dreamweaver,选择“文件”→“新建”菜单,此时会弹出如图1所示的窗口。


  图1

  2.在此窗口中的“基本页”标签下有七个选项,我们选择“HTML”项后单击“创建”按钮,创建工作区就会变成空白,这说明HTML页面已经创建成功,单击代码视图就会出现如图2所示的内容。


  图2

  3.先不要理会这些显示出的HTML页面代码的具体含义,我们首先将“Title无标题文档”改成“网页处女秀”,然后再选择设计视图。点击“菜单”→“插入”→“HTML”→“框架”→“上方”,即在网页的上方插入了一个框架。此时网页就分成了两个框架,即上框架和下框架。我们选择下框架后,选择“菜单”→“插入”→“HTML”→“框架”→“左方”命令,即在网页的左边插入了一个框架。

  4.单击“Ctrl+S”保存各个框架(top.htm,left.htm,right.htm)。然后选择左框架,点击“菜单”→“插入”→“超链接”命令,会出现如图3所示的对话框。在该对话框中输入各个项,其中“文本”是链接显示的文字,“链接”是单击之后跳转到的页面地址,“目标”是在哪个框架里显示。在此我们选择“目标”为mainFrame(即左边框架),并按照此步骤继续插入超链接。接下来进入右框架(right.htm)的代码视图,在里输入欢迎光临我的网站!!!,这是一个文字特效,可以让文字左右上下移动,其中把direction换成(UP,DOWN,Left,Right)就可以改变文字的移动方向了。


  图3

  ·深入浅出 用HTML制作网页体验其中乐趣(2)

  5.至此已经做出了一个带框架的HTML页面,下面我们要在上框架(top.htm)上加入一个Banner。Banner可以做一些JavaScript动态效果,动态交换效果具体代码可以去Top.Htm页面的源码里查看,笔者在此只给出关键代码:

  bannerAD[0]="pic173.gif";

  bannerADlink[0]="bannerAD[1]="pic1732.gif";

  bannerADlink[1]="http://www.sohu.com";

  代码解释:如上给出的是一个JavaScript数组,bannerAD存放的是图片,bannerADlink存放的是单击图片后的链接,可以根据自己的需要加减图片。

  6.继续为右框架的超链接做页面,具体内容可以自己定。选择“文件”菜单,单击“新建”,选择HTML创建一系列页面,页面的名称要与在插入链接时写的名称一致。笔者在原文件里做了两个例子(最新消息和人气明星),读者朋友们可以自己尝试加入更多内容。这样,一个HTML网站的雏形就制作好了,如图4所示是该页面的最终效果。


  图4

  动态效果在截图中体现不出来,读者可以直接在IE打开源文件中的Index.htm,打开后会有提示,单击右键就会弹出“允许阻止内容”的提示菜单(如图5)。


  图5

  总结:本期我们介绍的是如何用Dreamweaver做一个简单的HTML站点,里面用到了部分JavaScript、HTML框架、超链接等技术。另外上面我们所看到的出现阻止内容的提示,是因为没有把网页发布到站点上。在下期,笔者将带给大家更精彩的内容。

时间: 2024-11-05 06:04:07

HTML制作网页体验其中乐趣的相关文章

深入浅出 HTML制作网页体验其中乐趣

网页    众所周知,网站制作涉及到了各个方面的知识,包括平面设计.HTML页面制作.CSS样式定义.客户端脚本编写(JavaScrfipt/VBScript).服务器端脚本编写(Asp/Asp.Net/PHP/JSP)等诸多内容.本期笔者从最基础的讲起,着重介绍怎样制作一个简单的HTML网站,初步体会一下其中的乐趣.     1.这里笔者使用的网页制作工具是Dreamweaver.首先运行Dreamweaver,选择"文件"→"新建"菜单,此时会弹出如图1所示的窗

简单谈一下制作网页时如何选择字体和字体大小

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站建设中的字体及字体大小的的选择直接影响着网站整体的视觉效果,在某种程度上也会对网站优化起到一定的作用,比如大号字体和黑体字在网页上显示 更加醒目,具有加强某些信息显示的效果,而搜索引擎也会捕捉到这些字体的大小,更重视这些大号字体和黑体字内的信息.虽然现在的字体种类非常多,但是可以供网站建设人员选择的字体还是比较少的,主要是因为网站建设要以

用Fireworks一步步制作网页

  先看最终效果图: 下面开始讲解: 1.布局 先来说一下 我们制作网页一般的大小 高度:没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值. 宽度: 1.在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003.但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框. 2.在Firefox下,宽度的分率辨减19.比如1024的宽度-19就变成1005 3.在Opear下,宽度的分率辨减23.比如1

5款中级制作网页的软件

之前笔者介绍过菜鸟级制作网页需要什么软件?我们的技术都在进步,一些菜鸟级的软件已经达不到我们的要求了,我们应该选择哪些制作网页的软件呢?以下5款软件是专门为中级网站制作准备的软件: 相信大家都听说过网页三剑客,那么是哪三种软件呢?DreamWeaver.Flash.Fireworks被称为网页三剑客,最初是由Macromedia公司开发出来的.为什么称他们为三剑客呢?因为要制作网页,需要这三个软件相互无缝合作,由Fireworks导出切片.图片,Dreamweaver制作页面,Flash制作页面

用Fireworks制作网页

  先看最终效果图: 下面开始讲解: 1.布局 先来说一下 我们制作网页一般的大小 高度:没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值. 宽度: 1.在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003.但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框. 2.在Firefox下,宽度的分率辨减19.比如1024的宽度-19就变成1005 3.在Opear下,宽度的分率辨减23.比如1

DreamWeaver巧用模板工具批量制作网页

一.建立模板 1.创建模板页面 最简单的办法是将一个网页另存为模板文件,通过执行命令:File→Save as Template,DreamWeaver会在网站根目录中建立一个模板文件夹--Templates来保存该模板.当然,也可以新建一个模板:Window→Templates,会出现的Templates面板,单击右下角的New Template按钮,输入文件名,就建立了一个空模板:再单击Open Template按钮打开该模板,保存后自动存放于网站模板文件夹Templates中.新建.打开的

用DreamWeaver模板工具批量制作网页

 常见的网页制作工具如DreamWeaver中都有这项功能,使用模板就能减少大量的重复劳动. 一.建立模板 1.创建模板页面 最简单的办法是将一个网页另存为模板文件,通过执行命令:File→Save as Template,DreamWeaver会在网站根目录中建立一个模板文件夹--Templates来保存该模板.当然,也可以新建一个模板:Window→Templates,会出现的Templates面板,单击右下角的New Template按钮,输入文件名,就建立了一个空模板:再单击Open T

用Dreamweaver 定义模板批量制作网页

  做网站,麻烦在更新和改版,特别是大规模更新,如果不是用cms系统,手工工作量非常大. 告诉你个秘密吧,其实只要用好模板工具,就能很好地"批发"网页.常见的网页制作工具如DreamWeaver中都有这项功能,使用模板就能减少大量的重复劳动. 一.建立模板 1.创建模板页面 最简单的办法是将一个网页另存为模板文件,通过执行命令:File→Save as Template,DreamWeaver会在网站根目录中建立一个模板文件夹--Templates来保存该模板. 当然,也可以新建一个模

Dreamweaver批量制作网页

dreamweaver|网页    做网站,麻烦在于更新,特别是大规模更新,工作量非常大.真不知那些创意不断而又勤奋的"站长"隔三岔五就将网站来个"大换血"是怎么忙过来的?告诉你吧,他们大多都是在"批发"网页,并且你的机器中也有这样的"批发站"呢!别吃惊,这个好东东就是--模板.常见的网页制作工具:FrontPage.Dreamweaver中都有这项功能.比如用Dreamweaver制作网页时,使用模板就能减少大量的重复劳动.