Dreamweaver网页设计第一章

Dreamweaver网页设计WebDesignbyDreamweaver第1章网页设计基础网页是一种文本、图片、图像、声音等结合的复杂页面，又叫(WorldWideWeb)页面,简称Web。它将我们要表示的信息用超文本标识语言HTML(HyperTextMarkupLanguage，是专门用于制作网页的一种语言)表示出来，这就形成了HTML代码。浏览器(Browser)将这些代码“翻译”过来，并照定义的格式显示出来，这就是我们真正看到的网页。网页上的每一信息资源都有统一的地址，它用统一资源定位器URL(UniformResourceLocator)来标识定位。Web网页通过超文本传输协议Http(Hypertexttransferprotocol)与Web服务器实现通信。1.1基本知识要制作网页，需要掌握一种或几种图形工具、网页制作工具及网页动画工具.Fireworks、Flash和Dreamweaver这三个软件均由Macromedia公司推出，在配合上可谓天衣无缝。更主要的是，利用这三个软件，已基本上能完成制作网页所涉及的主要任务了。因此，将它们称为网页制作黄金组合或梦幻组合。由于有了功能强大的网页编辑制作工具，网页制作变得简单，生成的网页效果更为丰富，使得网页设计人员不再面对恼人的HTML代码，网页设计实际上正变为怎样为页面进行“形象设计”。1.2网页设计的基础文档窗口(DocumentWindow):编排网页的区域，与在浏览器中的结果近似；插入面板(insertPalette):[Window]-[Insert]打开，功能是在光标处插入对象，共有12选项卡，每一选项卡分别有多个选项。最常用的是common选项卡；属性面板(PropertyInspector):[Window]-[Properties]打开，显示和修改选定对象的相关信息；文档工具条：[View]-[Toolbars]-[Document]打开，控制文档；标准工具条：[View]-[Toolbars]-[Standard]打开；1.3Dreamweaver操作界面浏览1.4HTML入门每一个网页都是一个包含了HTML指令的文件，所以网页文件就叫HTML文件。HTML不是一种编程语言，而是一种描述性的用来定义网页文件中信息的格式和功能的标记语言。当浏览器收到HTML文件后，就解释文件中的标记符，显示或实现某些功能。HTML标记符的格式是：标记符内容/标记符HTML标记：html/html文件头标记：head/head文件标题标记：title/title文件体标记：body/bodyh1/h1,fontcolor=?/font,align=center1.5HTML简单例子htmlheadtitle这是测试文件/title/headbodyHTML文件的内容就写在这里…h2align=center这是我制作的第一个网页/h2imgsrc=13.jpgh3align=leftfontcolor=#ff0080看来还有很多东西要学!/font/h3h3align=right返回主页/h3/body/html第2章创建网页在开始制作站内的页面之前，先要定义一个本地站点。站点的实质就是硬盘上的一个目录，站内的文件存放在该目录之中。网站的管理主要涉及网站内文件的管理、文件的上传与下载，利用站点地图规划网站等。1)选择[Site]-[NewSite]，打开网站定义对话框，可见Basic和Advanced选项卡；2)选择Advanced选项卡，输入站点名称、站点的本地文件夹路径及名称；3)在文件面板组中的下拉列表中选择所定义的站点，然后选择[File]-[Newfile]建立该网站的一新网页，并改名为index.htm，再选择[Site]-[EditSite]-[Edit]再次打开网站定义对话框，选择[SiteMapLayout]自动将该网页保存为该网站的主页。2.1建立本地网站1)选择[File]-[New]或利用工具条，打开新文档对话框，再选择[BasicPage],按Create创建一新文档；2)选择[File]-[Open]或利用工具条,打开已有的文件，修改后，可选择[File]-[SaveAs]将文件另存为一新文档。2.2创建文档开始制作网页前，对页面的整体参数进行设置，选择[Modify]-[PageProperties]，Title,BackgroundImage,Background,Text(文字色彩）,Links（链接文字色彩）,VisitedLinks,ActiveLinks,DocumentEncoding(文本编码）,DocumentFolder.2.3设定页面属性1)直接在文档窗口中输入文本，可按Enter和Shift+Enter使文本换行，但后者行间距小于前者，且文本仍属于同一段，根据中文习惯，每个段落开始之前应空出两格，可单击输入法状态条，将半角改为全角即可。2)在属性面板中设置文本的字体大小、段落对齐方式、文字的粗、倾斜、颜色、字形及创建清单等，其中Format和Size都可设置文字大小，但前者只需将光标放在某一位置，该位置的整个段落都改变，后者还需将要改变的文字涂黑选中，才能改变。2.4插入文本通过编写HTML源代码制作上、下或左、右滚动的公告栏文本。控制文本移动的标志是marquee移动文本/marquee。文本的换行采用shift+enterDirection:控制移动方向，可取“left”,“right”,“up”,“down”；Behavior:移动的方式，可取“scroll”(循环移动)，“slide”(只走一圈)，“alternate”(来回移动)；Scrollamoun:移动的快慢，整数越大越快；Height,width:移动区域的高和宽。单位是pixels;Bgcolor:移动区域的背景色。例子：marqueedirection=upwidth=600height=150bgcolor=#ccffccscrollamout=2通知今天晚上的Dreamweaver网页制作课改在二机房上机,请大家相互转告/marquee2.5制作网页滚动文本例子：marqueeonmouseover=this.stop()onmouseout=this.start()scrolldelay=60direction=upwidth=100height=150bgcolor=#ccffccscrollamout=2通知今天晚上的Dreamweaver网页制作课改在二机房上机,请大家相互转告/marquee停止文本只需在marquee中加入onmouseover=this.stop()onmouseout=this.start()语句即可。选择[Insert]-[Image]或在insert面板中common插入图片。在属性面板中设置图片的有关属性：W,H,Scr,Link,Align,Alt,VSpace(图片与文字间的间隔）,HSpace,Target,LowSrc,Border,Map,Edit,ResetSize.还可为图片不同的位置设置热区。2.6插入图片1、插入水平线：在需要插入的位置单击鼠标，单击插入面板－标准－插入水平线2、修改水平线：选中水平线，在属性面板中设置宽度、高度、对齐、阴影3、修改水平线的颜色：在HR标签后按空格键，然后输入color=“red”、“blue”、“green”、“yellow”、“gray”2.7插入水平线第3章添加超级链接利用超级链接可实现在文档间或文档中的跳转。可以将超级链接分为两大类：超文本(Hypertext)和超链接（Hyperlink)，超文本就是利用文本构建的超级链接，其链接的源端点是文本，而超链接的源端点是除了文本之外的其它对象，如一幅图像或是一张表单等。根据目的地址的不同，链接通常又可分为本地链接、远程链接、mailto链接、无址链接和脚本链接。3.1超级链接1、创建超级链接的方法：选定需要链接的文本或图像，在属性面板的Link中输入URL地址,如，注意不能省略http://,如果要链接到本地站点内的文件，则可单击链接旁的文件夹；2、相对路径和绝对路径：相对路径是相对于本地磁盘根目录的路径，如果创建当前站点内的链接，则用相对路径，绝对路径是精确地址，不用考虑源文档的位置，创建对当前站点以外文件的链接时必须使用绝对路径。3、设置超级链接的窗口目标：blank将链接文件载入新的无标题浏览器窗口中。parent载入到上级框架集或包含该链接的框架窗口中，如果框架包含的链接不是嵌入的，则载入到整个浏览器窗口中。self载入到相同框架或窗口中，为默认值。top载入到整个浏览器窗口中，因此将取消所有框架。3.2创建超级链接选中文本或图片，在属性面板上link框中输入链接的相对或绝对地址。3.3文本及图片链接当页面内容较多时，书签链接(anchor)可迅速指向所需要的内容。创建书签链接，分为两步：1、创建命名书签：将光标停留在要插入命名书签的位置上，在insert面板中选择NamedAnchor，然后在弹出的对话框中输入书签名(最好不要用中文)。2、创建命名书签链接：选中需要链接的网页元素，在属性面板链接中输入“#书签名”(在#和书签名之间不要有空格)，如要链接到其它网页的书签则输入“文件名.htm#书签名”3.4书签链接3.5电子邮件链接电子邮件链接可以加在文本、按钮或图片上，当单击这些元素后，可直接打开安装在系统中的电子邮件应用程序。创建文本电子邮件链接：在insert面板上选择插入EmailLink，然后输入文本和电子邮件地址。创建图片电子邮件链接：属性面板的链接中输入mailto:邮件地址(mailto:后面不要加空格)。3.6无址链接在制作具有较多内容、需要上下滚动的网页时，通常要在网页最底端添加“返回页首”按钮，可通过无址链接快速创建(也可用书签链接)：创建无址链接：选择文本或图像，在属性面板的链接中输入#(如为框架页面，在目标中选择top).3.7脚本无址链接纯文本是不能附加行为的，可先给文本添加脚本无址链接。在选定文本属性面板的LINK框中，输入javascript:;，注意必须同时加冒号和分号，创建脚本无址链接，与输入＃的无址链接的区别是页面不会发生跳转。3.8创建跳转菜单(JumpMenu)跳转菜单是一个选项弹出菜单。这些选项具有跳转到其他页面的超级链接。它包含菜单选择提示、链接的菜单项列表、带有“确定”性质的按钮。1、插入跳转菜单：在需要插入的位置，insert面板-表单（Forms)-插入跳转菜单(JumpMenu)，在弹出的对话框中，输入菜单选择提示、链接的菜单列表及超级链接地址。2、修改跳转菜单：在属性面板列表项值中进行修改，或者使用行为面板，双击跳转菜单，打开对话框进行修改。另外单击跳转菜单，在行为面板中可以将onChange事件改为onBlur以使“前往”按钮起作用。