1 / 30

DREAMWEVAER MX 2004 入门

DREAMWEVAER MX 2004 入门. 楼斌 BBS ID ： lou 生命科学学院 2005.01.11. 先从最简单的 HTML 网页入手；    选择 Dreamweaver 作为你的网页制作工具；    选择 Photoshop 作为你的网页制作工具；    粗略地阅读本站的 Dreamweaver 及 Photoshop 教程，了解这两个软件到底能做些什么；

gail
Download Presentation

DREAMWEVAER MX 2004 入门

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DREAMWEVAER MX 2004入门 楼斌 BBS ID：lou 生命科学学院 2005.01.11

  2. 先从最简单的 HTML 网页入手；   选择 Dreamweaver 作为你的网页制作工具；   选择 Photoshop 作为你的网页制作工具；   粗略地阅读本站的 Dreamweaver 及 Photoshop 教程，了解这两个软件到底能做些什么； 初级阶段：此时的你，已经掌握了Dreamweaver 和 Photoshop 的基本操作；    策划和制作你的第一个网站；    不断为你的网站增加内容与功能（例如尝试将一些 Java Script 小程序添加到你的网页中）；    粗略阅读本站 HTML 及 CSS 的语法书，并尝试运用到你做的网页中。 建议学习方式

  3. 进阶阶段：此时的你，已经具有一定的网页制作经验，并逐步形成了自己一套的对于网页制作的理解，制作一般的网页已经不在话下;根据个人喜好及实际需要，网页制作的方向，你可以向美术设计的方向发展，学习一些美术方面的知识；也可以向网络编程的方向发展，学习ASP等编程语言；也可以向信息制作的方向发展，锻炼自己在网站策划及信息采辑的技能；    常识制作其他不同类型的网站，从模仿别人开始，都逐渐形成自己的设计风格；    熟练操作 Dreamweaver 及 Photoshop 两个软件，并至少能读懂 HTML 及 JavaScript。 高手阶段：此时的你，至少在美术设计、程序编写、或信息制作方面有一定的造诣： 建议学习方式

  4. 网站制作流程 建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。 新建站点→站点文件命名→定义页面属性→插入表格→定义页面大小→添加内容→插入导航条→添加链接→使用代码片断→定义及应用CSS→添加动态交互→链接站点各个页面。

  5. 建立站点 在D盘新建一个文件夹，输入你想要的站点名称，这里输入test，其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！ 在Dreamweaver中定义站点 1 2

  6. 接下来需要给站点起一个名字，可以起任意一个名字。这里起名为abc,按下一步接下来需要给站点起一个名字，可以起任意一个名字。这里起名为abc,按下一步

  7. 选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。

  8. 一个站点就定义好了。

  9. 站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。

  10. 选 创建

  11. 窗口和面板

  12. Head区，主要设置字体编码，网页标题等 Body区，网页主体 代码区 所见即所得

  13. 在正式开始制作网页前一个必不可少的工序。双击打开刚才新建的index.htm，就自动转入编辑窗口。选择“修改”> “页面属性”设置一些必要的页面属性。 ①Title（标题）：页面的标题会直接显示在浏览器的左上方，务必要养成为每一页都设定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。虽然标题并不是一个网页必要的元素，但却是体现着网页制作者有否从细处为浏览者着想。 ②Background Image（背景图片）：点击Browse按钮，可以为网页添加背景图片。 ③Background（背景颜色）：默认为白色， 可以选择其他的颜色。 ④Text（文字颜色）：在这里将文字设置为黑色。要注意，假如不对背景及文字的颜色进行设置（此时RGB色值显示为空），那么浏览器在显示页面的时候，就会采用系统的默认设置。但因为不同的系统的设置都可能会有所区别，这样就回导致页面的显示效果也是千差万别。因为，为了更好地让页面体现出你的设计思想，就千万别忘记设定页面的背景颜色及文字颜色。 ⑤Link（链接颜色）：设定超级链接的颜色，不设定则默认为蓝色。 ⑥Left和Top：设置左部及顶部的页边距，一般都设置为“0”以方便于网页的编辑。 　　确保页面的设置正确后，点击 OK 结束。 设置页面属性

  14. 简明步骤：打开一个页面→插入表格→设置表格宽度简明步骤：打开一个页面→插入表格→设置表格宽度 现在有好几种尺寸的显示器，“14、15、17、19”英寸，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。 使用百分比，可以在各种显示器上有相同的效果，宽度设置为100％时，在各种显示器上全屏显示。 素大小的表格设置，选择像素为单位，值为768。可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。相对使用百分比制作网页，采用像素比较简单。 大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。 完全下载一个表格的内容，才能在IE中显示出来。如果页面文件小，可以只有一个表格放内容。如果页面文件很大，可以在页面中，从上到下放几个宽度相同的表格，分别放不同的内容，这样就会一个一个显示表格里面的内容，不用等整个网页的内容下载完。 表格详解

  15. 图像描边：增加图片的美观 设置图文混排 给图片增加提示：在IE中，当指向这个图片时，就会出现文字提示 创建图像地图：当点击一个图像的不同部分，可以链接到一个新的网页。也可以在当前窗口打开。简明步骤：选中目标图片→选择属性面板中的热点工具→用热工具在图片中画出热点区域→在属性面板中输入链接地址，选择目标窗口打开方式。 设置图像边距：设置图像边距，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。有时候设置边距为一个非0的数值可以起到美观的作用。但是有的时候输入数值为0的边距可以使用页面紧凑。 图像详解

  16. 超级链接 • 超级链接：指向文档，图象，多媒体文件或可下载软件的超文本链接 • 选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”。文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用

  17. 超级链接 • 根相对路径：如果在一个使用多台服务器的大型Web站点或一台服务器上有多个站点的情况下工作，可能需要使用这种类型的路径。很少用到这种路径。如果没有服务器的控制权限，不要使用这种方式！

  18. 超级链接 • 绝对路径：完整的URL，称作绝对路径。例如在链接域输入：http://www.xmu.edu.cn • 使用锚 • 创建电子邮件链接:在属性面板中的链接栏输入mailto:邮件地址。 mailto:aaaa@xmu.edu.cn

  19. 超级链接 • 创建跳转菜单，例如制作一个友情链接。

  20. 超级链接 • _blank 在新的未命名的浏览器窗口中加载链接文档 • _parent 在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。 • _self 将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。 • _top 将在整个浏览器窗口中加载链接文件，同时移除所有框架。 （_top表示整页窗口，_parent表示父窗口。实际使用中，它们没有任何区别） 目标窗口：_blank 、_self和、_top、_parent的区别

  21. HTML（超文本标志语言HyperText Markup Language）。为什么叫它“超”文本，也就是说它是文本但又超过一般文本的功能，我们阅读普通的文本（例如电子小说）时，只能从头到尾一页一页的“翻阅”，而当你浏览网页时却可以点击链接从一页跳到另一页而不必把整个页面都看完。这就是“超”文本的真正含义。 HTML是由标志和属性构成的，它们一起被用来告诉浏览器应该如何显示一页文档。标志用来引用一段文字或是一幅图片等文档部件，属性是标志的选项，在标志中修饰，如颜色，对齐方式，高度和宽度等。很多标志都成对出现，例如有<TITLE>就有</TITLE>前一个表示开始，后一个表示结束，内容放在两者之间。 HTML简要介绍

  22. <HTML>    ----------表示该文件为HTML文件<HEAD>    ----------包含文件的标题，使用的脚本，样式定义等<TITLE>HELLO WORLD！</TITLE>  -包含文件的标题，标题出现在浏览器标题栏中</HEAD>   ----------<HEAD>的结束标志 <BODY>   --------放置浏览器中显示信息的所有标志和属性，其中内容在浏览器中显示这是我的第一个网页！</BODY>    ----------<BODY>的结束标志 </HTML>    ----------<HTML>的结束标志 HTML 四个重要的标签

  23. 以下所有标志用在<BODY></BODY>中 <A HREF="…"></A>    ----------链接标志，“…”为链接的文件地址<IMG SRC="…">    ----------显示图片标志，“…”为图片的地址<BR>    ----------换行标志<P> </P>   ----------分段标志<B> </B>    ----------采用黑体字<I> </I>    ----------采用斜体字<HR>    ----------水平画线<TABLE></TABLE>    ----------定义表格，HTML中重要的标志<TR></TR>    ----------定义表格的行，用在<TABLE></TABLE>中<TD></TD>    ----------表格单元，用在<TR></TR>中<FONT></FONT>    ----------字体样式标志 其它主要标志 

  24. 对齐属性 ALIGN=LEFT 左对齐（缺省值） ALIGN=CENTER 居中 ALIGN=RIGHT 右对齐 范围属性 WIDTH=象素值或百分比 对象宽度 HEIGHT=象素值或百分比 对象高度 色彩属性　 COLOR=#RRGGBB 前景色 　 BGCOLOR=#RRGGBB 背景色 常用属性

  25. http://www.gggl.gov.cn/fwgc/jiaocheng/html/3.htm HTML入门

  26. 1.要有一定的美术功底、审美观念。要多学会观察，多欣赏一些中外优秀的作品，多欣赏广告作品，这对你的创意都很有启发。1.要有一定的美术功底、审美观念。要多学会观察，多欣赏一些中外优秀的作品，多欣赏广告作品，这对你的创意都很有启发。 2.作图软件，PhotoShop和Fireworks都是网页必备的，两者各有长处。 3.内容第一，要常更新。个人主页中尽量多写些原创的东西。如果转载，一定要注明作者。 4.要有顽强的毅力，勤于思考；勤于维护，特别是留言簿要常关注。 5.时刻为浏览者着想，站在浏览者的立场，多想想浏览者的感受。 制作网页的基本要素：

  27. 谢 谢！

More Related