窗体的用处

Php programming
Image via Wikipedia

窗体是作常用的一种跟服务器沟通的形式之一,当客户端输入数据或信息到窗体内后,按下发送按钮,然后透过在服务器里的脚本,如CGI, ColdFusion, JSP, PHP 或者是ASP来处理的,而所有窗体元素都包含在<form>与</form>之间。

在Dreamweaver CS4 插入面板上,点选窗体,可看到窗体选项如下:

  • 窗体按钮
  • 文体字段
  • 隐藏域
  • 文体区域
  • 复选区
  • 复选框组
  • 单选按钮
  • 单选按钮组
  • 列表/菜单
  • 跳转菜单
  • 图像域
  • 文件域
  • 按钮

窗体的状态可在Dreamweaver CS4 下方之状态属性中可见之。

  • 窗体ID :为了处理窗体的一个名称
  • 动作 :处理该窗体的服务器的脚本之路径
  • 目标 :处理窗体后,返回页面的打开方式
    • _blank 在新窗口打开
    • _parent 在父窗口打开
    • _self 在原窗口打开
    • _top 在顶窗口打开
  • 方法 :默认,post 同get
    • 选择默认或get,会把窗体数据发送到设定的URL

选择post, 把数据输入到HTTP请求中发送

如何使用表格布局页面

English: CSS policy toggler, HTML attributes only
Image via Wikipedia

Html 本身却没有提供很多更有效的排版方式,而表格是制造网页其中一个非常有用和重要的一种方法。同时表格也是网页中好常见而重要的一种元素。去了解和认识表格,其基本操作,处理,在HTML中插入表格,对于建立网站布局表面有莫大帮助。

 

表格基本操作

把游标移至需要插入表格的位置,单击“插入”面板上的“表格”弹出表格对话框时,可输入表格的行数,烈数,表格宽度,单元格间距,边距,以及边框粗细等设置。

 

选择表格和单元格

你只需单击表格上方,那会弹出下拉式选择项,包括有选择表格,清除所有高度,清除所有宽度,使所有宽度一致,和隐藏表格宽度,只要选择适用选项就行了。

还可以把游标移至单元内,然后按鼠标右键,选择表格弹出,可供不同在单元内的设置。选择表格左上角,会出现方格图示,这时你亦可以选择表格。

若要选择单元格,你大可在状态栏上的标签选择器,单击<td>标记或者直接将鼠标一直单元格中。

有时候需要选择整行,只需把鼠标一直选择行至左边边位,游标会自动变成右箭头,只单击以下便可选择整行。选择整列式,亦是那么简单,把游标一直选择列的上方,游标会自动变成下箭头,你只需要单击以下便能选择整列了。

另外,如要个别选择单元格时,只要按着<ctrl>键,然后点选所需的单元格就行了。

 

设置单元格属性

        单元格属性设定跟页面属性设定类同,有HTML和CSS之分。分别有水平排列方式,垂直排列方式,宽度,高度,不换行,标题,还有背景颜色。同时CSS 也有大致相同的设定,只不过,HTML和CSS之间的差别在于HTML只在该单元格标志中直接写入属性设定,而CSS属性设定会在该单元格应用相关的CSS样式设定。

网页文本之设定属性

除了网页本身所需要得图案之外,一个网站最主要的部分还是文字,所以要设定好文本,另你的网站可读性是必需的。在这儿,我可建议大家怎样去处理网页文本。包括分段落,分行,设置文本属性,文字格式设定等。

 

文字输入的方式

        这可由两种方式输入文字,在Dreamweaver CS4网页编辑窗口中直接输入文字,亦可以从你所熟识的编辑软件,如Microsoft Word, Windows 之中的notepad, 或者wordpad复制到网页编辑窗口中就行了。

 

文字的编码方式

至于输入文字的编码方式当中,只要点选“属性”版面上的“页面属性”按钮选项,在“编码”下拉式选项里选择所需要的编码格式。Dreamweaver CS4文字编码格式默认为“UTF8",如阁下制造之网页为简体的话,一般会选择”GB2312”。

 

分段落与分行

1)      按<Enter>键可将文字彻底划分到下一个段落,那代码就是<p>两行之间会出现一行空白行的。

2)      亦可按<Shift + Enter> 键强行分行,那代码为<br>;不过两行之间却没有空白行分割开。

 

文字格式和字体

        格式方面大概由标题1只标题6分成六级,由大到小,同时文字上全部加粗,应用页面之标题部分。

另外,Dreamweaver CS4默认可选择字体组合有14种,如果编辑更多字体组合,便要字体列表中,选择“编辑字体列表”选项,弹出“编辑字体列表”对话盒进行编辑。

 

类别

        CSS样式其中一个分类,这可以说是定义好的CSS样式应用的快速操作选项。 在这儿还可对存在的CSS样式进行重新命名及编辑操作。

Dreamweaver CS4设置页面布局

Company website layout
Company website layout (Photo credit: guidosportaal)

制作网站开始,从规划,建立网站架构,做好模版后,大可以尝试用Dreamweaver CS4来设置页面的布局。好多时候,你定会浏览很多网站的页面而从中你会发觉到哪页面有固定的色彩,图案背景,文本字体,字体大小,颜色等等,这统统都能在Dreamweaver 当中能设定你所需要的布局设定的。

设置外观CSS

Dreamweaver CS4 之页面分成有好几个类别,其中的设置外观(CSS)一些设定可将页面相关属性自动成为CSS样式。

  • 页面文字 – 选择字体之外,还可以把字体加粗或斜体
  • 字体大小 – 页面字体大小单位,默认为(px)
  • 字体颜色 – 文本背景颜色
  • 背景颜色 – 这里可设置网页背景颜色;默认为白色,如设定你自己选择的颜色是,如输入#FFFBBB十六进颜色码便可
  • 背景图像 – 输入图像的路径,给网页背景设置图像。在这里请大家注意要把图像的相对路径,以免出现问题。另外,对于图像的重复方式中有“重复”,“不重复”,“横向重复”和“纵向重复”
  • 在页面窗口的右下方,设定页面边距有上,下,左同右四个方式,这来设定网页在浏览器四边边框的距离,但这设定只有IE 浏览器才能支持该项设置。

设置外观(HTML

 

设置外观(CSS)跟设置外观(HTML)基本上是一样的,但“外观(HTML)只会在页面主体的代码标签<body>中添加相应的属性,而不会生成CSS样式。

设置链接(CSS

 

  • 链接文字 – 超链接文本的字体
  • 大小 – 超链接文体字体的大小
  • 链接颜色 – 文体超链接的颜色
  • 以访问链接 – 网页中访问过的超链接的颜色
  • 活动链接 – 网页中激活过的超链接的颜色
  • 变换图像链接 – 鼠标移动到超链接时所转变的颜色
  • 下划线样式 – 鼠标移动到超链接时所采用的下划线显示形式

 

设置标题(CSS

 

  • 设定标题1-5级标题文字字号和颜色

设置标题和编码

 

  • 设置页面的标题 – 这对网页内容并没有大的影响,不过,若果在浏览网页时,标题栏中显示网页的标题,可令访客知道该网页的信息,而收藏网页时,亦会把该标题栏于收藏夹内
  • 文档类型 – 一般建议设定为XHTML 1.0 Transitional
  • 编码 – 建议设置为 Unicode (UTF-8),也可选择其它的文字编码,如简体中文(gb2312)

设置跟踪图像

 

制作网页之前,或许会绘制一幅设计草图,而跟踪图像只是编辑网页时一个辅助工具,在编辑时纔有效,对于HTML编码并没有任何影响。在这儿不做多介绍。

使用模板提高网站制作效率

使用Dreamweaver CS4中的模板可大大提高网站制作效率。就是当你在修改一个模板之后,所有使用这个模板的页面内容都会同时被修改的,换句话来说,就是一次过可以更新多个页面,这就是模板最强大的功能所在。而模板的另一个功能就是把页面之间共同的内容保持一致。

一个模板里面,Dreamweaver CS4 会自动锁定文件中大部分区域。模板设计者可以划分和定义在叶面中哪些区域可以编辑,哪些区域不可以编辑。模板用户只能在可编辑区域进行修改而在锁定部分则无法进行任何编辑动作。

在Dreamweaver CS4 中,你大可以将

  •  HTML之页面另存为范本,然后修改或
  • 按《F4》显示面版,选“插入”—–〉模板—–〉制作模板
  • 另存模板名称,按 “储存”钮再按“是”钮,储存完毕。
  • 将网页储存为模板时,有可能出现以下对话框,可以直接按下“确定”钮。这讯息是提醒你尚未建立可编辑区域而已。

新建立的模板,Dreamweaver 会自动建立活页夹名为“Templates”, 而模板文件;它的扩展名extension name 名为.dwt.而所有这些范本都会放在Templates活页夹中。

要记住千万不要把范本文件放到别处,这会导致文件路径错误讯息。

建立可编辑区域

当你套用Dreamweaver 的模板之后,你必须建立可编辑区域,好让该模板的网页可以在这些区域进行编辑。

  •   把鼠标移到所需编辑的区域,并点选 插入—–〉模板对象—–〉可编辑区域。
  •   这时会弹出 新增可编辑区域对话框,你可键入 编辑区域名称, 如:EditRegion1, 再按确定便完成设定。
  •   要记住,同一个模板中,每一个编辑区域的名称不能相同的
  •   若要移除编辑区域,可点选 修改—–〉模板—–〉移除模板标记便可。

如何新建网站结构

1          建立页面

创建网站有零开始,整个网站有不同内容的目录,与此同时把所有不同种类的活页夹,不同格式档案分门别类而组成的。

在“本机档案”版面中网站根目录上按鼠标右键,从弹出之选单中,选择“开新档案”,并新建一个网页的名称。

另外,亦可在Dreamweaver CS4 主菜单上的“档案”—–〉“开新档案”或按Ctrl+N 来建立一个静态或者动态页面。

  • 新增文件由“空白页面”,“空白模板”,“来自模板页面”,“来自样本页面”以及“其他”五个选项组成的。
  • 空白页面,可新建最基本静态或动态页面,而其中就是最常用的HTML格式。空白页面选项中还有“页面类型”和“版面”出所有HTML的布局选项。当版面选好后,在旁边预览区便会显示所选的版面预览图。
  • 空白模板,包括有ASP JavaScript,ASP VBScript,ASP.NET C#, ASP.NET VB, ColdFusion, HTML, JSP,和PHP范本。
  • 来自模板页面,在网站范本框里列出所有范本页面。
  •  来自样本页面,包含有俩个样本文件夹和样本页面,而在样本文件夹里在有分类为CSS 样式表单同页框组。设计者可根据自己的需要和所需的设计选择不同的样本页面。
  • 其他选项包括ActionScript Communication, ActionScript Remote, C#, EDML, Java, TLD, VB, VBScript, WML, 和纯文本页面类型。

2          建立活页夹

很多情况下,新建立一个网站尤其起初计划兴建的时候,规划了网站架构之后,就可以建立好活页夹,包括子目录,而每个子目录都要有自己相应的活页夹。其实活页夹的作用是为了将来网站不断扩大,文件只数量定会增加,而为了方便管理,分门别类,不同种类的文件放于不同活页夹中确实有着需要的。有的活页夹用来存放图案如pics, images, content 等,又有些活页夹是Dreamweaver CS4自动建立的如Templates和Libraries.

 

创建网站的第一步

在现今互联网迅速发展的年代,网络世界所得到的所有信息,大部分都是通过浏览不同形式的网站而得之而互联网同时亦成为日常生活中不可缺少的一个重要部分。与此同时,无论是大企业,或者个人分享网站,甚至对于一些在线营销或者称之为Internet Marketer, 网络营销者来说,建立一个美观而又专业的网站却实是必须的。

建立一个网站,准备功夫不少得用上一些比较功能多样化而又专业的软件,当中最简单的有NVU, Microsoft 的FrontPage, 而行业中最专业编辑软件,当然是Adobe Dreamweaver Creative Suite。要建起一个网站之前,无论你是初学,中级学员或者是网页设计工作人员,我们都得注意以下几点:

规划预计网站的架构

1.        把网站划分成不同的目录

把网站划分为多个不同的目录,具有同样定义的文件放到各自相关的目录中。举个例子说,预计设计的网站可能会有公司的内容如“关于我们”,“公司产品”,“联络我们”,“讨论区”,“博客”等。就把这些不同的具体内容放在网站各自不同的活页夹中。

2.        不同种类的文件放在不能给同的活页夹中

除了HTML档之外,还有其他格式文件,FLASH檔,MP3格式文件等,这些不同格式的文件档放在不同活页夹中分门别类,有助日后对网站的管理和调用。我们经常用上的图片会放在images 的活页夹中。而对于那些非HTML格式的档案通常会放在Assets的活页夹中,有或者如再每个分类之下再建立Assets目录。

3.        计划本地(local)和远程(remote site)的目录架构

只有本地跟远程结构相同时,而透过FTP 上载到远程那hosting server 时,所看到的本地和远程的文章是原封不动的显示出来了。