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

Slides:



Advertisements
Similar presentations
HyperText Markup Language
Advertisements

第六章 网页设计与制作基础.
ASP.NET 網頁製作教本 -- 從基本語法學起
第八章:网络应用制作技术 本章介绍网络各种应用中所涉及的基本概念和制作技术,包括HTML、网页的制作、Java、Java Script语言的初步基础,VRML语言的基本功能,以及网络环境下分布式数据库系统和客户服务体系的构造方法及技术。
Web与信息检索 LJ JUFE-SIT.
HTML第一课 李 伟 HTML开发语言基础.
專題製作 許惠淑.
加入圖片.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
网页制作 第一讲
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
学习情境三:配置WEB服务器 服务器配置与管理.
第五单元课1-3 层叠样式表.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第8章 信息获取与发布 《大学计算机基础》 桂林电子科技大学 陈辉金 适用教材:周娅等. 大学计算机基础.桂林:广西师范大学出版社,2013
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
HTML簡介、文字的變化、超連結的使用 主講:朱漢琳.
CT212 (02/03)-Network Programming and design
第二章 網際網路網頁的設計.
HTML.
网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人:马秀麟.
第五章 网页设计 网页制作的语言和工具 网页制作步骤和原则 使用Dreamweaver工具制作网页 使用FrontPage工具制作网页
ASP动态网页设计实用教程 主讲教师: 开课单位:.
网页制作 第五讲 Dreamweaver基础.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
Ch1.認識全球資訊網 1.1 「網際網路」與「全球資訊網」 1.2 全球資訊網的基礎 – 網頁與超連結
湖北职院计科系.
网 页 制 作 DREAMWEAVERMX 2004.
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
第 2 章 必備的 HTML 與 CSS 重點.
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
网站设计 前端 入门学习.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
第 13 章 用CSS 設定 文字顏色與背景.
Ch.13 HTML網頁實作.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
网页制作与设计 主编 耿 杰 科学出版社.
W3C标准网页制作 主讲教师:张 涛.
W3C标准网页制作 主讲教师:张 涛.
4.5 网页制作 本节概述 本节的学习目标 主要内容.
HTML – 文字格式 資訊教育.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
HTML & CSS.
主讲:陶建平 华中科技大学网络与计算中心
第一章 网页设计基础知识.
实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像
The Department of Education Technology
Web应用开发.
W3C标准网页制作 主讲教师:张 涛.
前端技术开发 高莺.
现代教育技术部 张建威
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
程式語言與邏輯 高慧君 台北市立南港高中 2006年12月22日.
第三章 HTML相关技术基础知识 纵观各种动态页面开发技术,无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术,包括HTML、
動態網頁程式設計實習 主講人:徐培倫老師.
UI 软件 设计 页面布局(一).
進階網頁設計 電算中心 – 何建義.
HTML大探索.
网页设计三合一教程 主讲教师 2019/6/2.
W3C标准网页制作 主讲教师:张 涛.
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
第1章 HTML基础 主讲人:刘泰然 经济管理学院.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

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

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

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

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

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

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

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

一个站点就定义好了。

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

选 创建

窗口和面板

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

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

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

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

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

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

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

超级链接 创建跳转菜单,例如制作一个友情链接。

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

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

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

其它主要标志 以下所有标志用在<BODY></BODY>中 其它主要标志  以下所有标志用在<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>    ----------字体样式标志

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

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

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

谢 谢!