《网页设计与制作》.

Slides:



Advertisements
Similar presentations
共建多媒体优质资源 提高图书馆教学服务 新东方多媒体学习库 创新 实用 互动 权威的学习平台. 图书馆资源收藏类型 图书馆的服务任务 多媒体资源市场现状及未来发展方向 新东方集团介绍 新东方在线介绍 新东方多媒体学习库之市场背景 新东方多媒体学习库介绍 新东方多媒体学习库优势 新东方多媒体学习库用户调查.
Advertisements

一、软件简介 二、功能介绍 三、产品优势 四、应用范围 五、成功客户 目录目录 软件简介 ●员工工作时间,都认真工作了? ●还是在玩游戏? ●浏览与工作无关的网站? ●收发私人邮件? ●甚至将公司的机密资料拷贝带 走?或是通过邮件或聊天工具泄 密? …… 解决之道.
醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
1 乌海职业技术学院机电工程系 王若东 副教授 乌海职业技术学院机电工程系 王若东 副教授 2007 年秋季乌海学院计算机类课程 (课程整体设计介绍)
第六章 交际礼仪 学习目标 案例导入 主要内容 互动训练 思考练习.
完美履歷表撰寫技巧 樹德科技大學 課程:國文寫作技巧 教師:黃湃翔老師.
“海聚工程”申报系统 填报及附件材料说明 2015年5月
授課者:陳月端 法律倫理 授課者:陳月端
第3章 中文字处理软件Word 年秋.
第12章 网络营销实施与控制.
数字化校园建设与思考 扬州大学信息中心 沈 洁 2017年3月3日.
大学计算机基础 主讲:张建国 电话: 实验及交作业网址:
学 校 名 称: 乐山师范学院 课 程 名 称: 声 乐 学 课程层次 (本/专): 本 科 所属一级学科名称: 文 学
公文製作與品質 彰化縣政府秘書 劉玉平 中 華 民 國 104 年 7 月 31 日 .
應用文寫作規範 書信 便條 摘要 心得報告.
讲故事训练 授课人:田轶.
高一年级过渡性学习 活动汇报 高一年级组 教科研室 汉滨高中.
第十一課 菜園 6-11.
初念淺~轉念深 網路~小品一則~分享.
支援報備之重要性.
專題製作 許惠淑.
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
第三讲: 如何获取和处理就业信息.
企業設置哺(集)乳室與托兒服務觀摩座談及補助說明會
國立花蓮高級工業職業學校 圖書館簡介 歡迎各位蒞臨.
汇报大纲 一、报送系统总体介绍 二、自查及检查评分报送流程 三、自查及检查方法及关键点 四、建议及注意事项.
课程改革呼唤科学教育 常州市教育局教研室 蔡正秋.
「一領一‧新倍加」 門徒培育教材 一領一友誼傳道 (領人系列 12).
网瘾的危害.
從無薪假談勞動契約條件之變更 主講人:建業法律事務所 李育錚律師.
主讲 冷清波 城乡规划管理与法规 主讲 冷清波
明道大學 教師扣考系統 操作說明.
预防老年痴呆的15个 生活习慣   背景音乐:红楼箫曲─秋窗风雨夕 文 字 资 料 来 自 网 络.
实训十四、IE浏览器的基本应用.
國立臺灣海洋大學 【教務處】 簡報者:李國誥 教授兼教務長 中華民國98年9月23日.
刘 汉 德 广东省糖业协会 广东中轻糖业集团有限公司
備審資料準備 黃思倫 教授 逢甲大學資訊電機學院 院長
如何準備實習的履歷與自傳 吳秀照
民法总论 丘志乔 民法学习网: 民法学习网:
创建网页链接.
正修科技大學教學發展中心 教師教學觀摩與經驗分享 電子工程系 張法憲副教授.
第五课 小设计师.
营销培训 农药渠道运作实务 迪智成咨询:程绍珊 迪智成咨询 3/21/2017
俄语字母的发音体系 阅读规则.
国家自然科学基金 项目预算编制 财 务 处 二〇〇九年九月.
行政院農業委員會主管科技計畫 農業科技研發成果精進管理及創新運用計畫
蘇軾詞的賞析
師資培育評鑑說明~教育實習篇 報告人:楊智穎主任.
模块七 信息获取与发布 第8章 计算机网络信息的获取与发布.
柯奕宏(06) 王予亨(13) 郭秉逸(15) 楊雯凈(23) 顏佑瑩(32)
第十五章 传播学调查研究方法.
待遇福利法規及案例分享 臺中市立后綜高級中學 林 春 榮.
自然與生活科技領域 認識太陽能 蘇紋琪、石明玉.
 全能的天才畫家- 李奧納多‧達文西 (西元1452年-1519年) 指導老師:袁淑芬老師 製作人:饒佩芯.
慈濟大學101學年度(下) 公文寫作與文書處理 102年5月30日上午 總務處文書組 潘杰秀.
非常好色軟體應用研習 數立科技推廣組 2009/02/17.
W3C标准网页制作 主讲教师:张 涛.
4.5 网页制作 本节概述 本节的学习目标 主要内容.
認識我的故鄉_台中市.
实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像
項目五、畢業生表現 第一節 現況描述 一、畢業生專業能力符合系所教育目標之程度
精忠报国  演唱:屠洪纲 作词:陈涛 作曲:张宏光  狼烟起 江山北望  龙起卷 马长嘶 剑气如霜  心似黄河水茫茫  二十年 纵横间 谁能相抗  恨欲狂 长刀所向  多少手足忠魂埋骨它乡  何惜百死报家国  忍叹惜 更无语 血泪满眶  马蹄南去 人北望  人北望 草青黄 尘飞扬  我愿守土复开疆  堂堂中国要让四方来贺.
W3C标准网页制作 主讲教师:张 涛.
李倩玉老師.
論四端 孟子 一. 關於孟子…… 孟子,名軻,字子輿,戰國時鄒人。他受業於孔子孫子思的門人,是繼孔子後,儒家的另一位代表人物,給人尊稱為「亞聖」。 你想了解孟子更多的生平事蹟嗎?你聽過「孟母三遷」的故事嗎? 試用滑鼠指向孟子畫像,然後在滑鼠左邊連按兩下。
樂樂請假了 尊重的故事 資料來源:臺北縣國民小學品德教育手冊 故事來源:臺北縣國民小學品德教育手冊 網路小故事
聽聽那冷雨---重點摘要 二愛 王煜榕.
憲政與民主 應化3A 邱泓明.
古蹟知性之旅 我和新港奉天宮有個約 報告人:陳 映 竹 傅 湘 甯.
第5章 PowerPoint演示文稿.
Presentation transcript:

《网页设计与制作》

第三章 制作页面 3.1 案例导入:西部旅游网 3.2 页面属性的设置 3.3 文本的修饰 3.4 设置超级链接 使用图像 3.5

3.1 实例:制作一个旅游网站

该网站实例包含了若干个网页,在网页中添加文本、插入图像、建立超链接,涉及到的知识点有以下几点: 页面属性的设置及文本的修饰; 插入图像,插入图像对象实现特效; 多个网页之间建立超链接。

3.2 页面属性的设置 “修改”菜单>“页面属性”命令,或单击“属性”面板中的“页面属性”按钮。弹出“页面属性”对话框: 外观选项卡:设置背景颜色及背景图像,另外还可设置文本\链接\访问过的链接\活动链接\页边距等。 标题/编码选项卡:设置网页的标题,输入请到西部来旅游。显示在浏览器的标题栏中,如果未定义,则显示为“Untitled Document” 编码选项卡:选择文档编码。 跟踪图像选项卡:跟踪图像是为网页排版的一种辅助手段,在HTML文档不显示。选择跟踪图像的路径及不透明度。

3.3 文本的修饰 操作文本是最基本的网页制作技能,例如:字体的修饰、段落的对齐方式等。 输入和修改文本 软回车(换行,shift+回车键)和硬回车(另起一个自然段) 输入连续的空格:切换到中文全角状态;或是在源代码中输入“&nbsp”或是在插入栏中“字符选项”中单击“不换行空格”按钮 输入特殊字符 插入栏中文本选项中的“字符”选项,单击要输入的字符。 另外还有一种方法,利用WORD进行特殊字符的输入,并通过WORD可获得大量文本内容。

选择、复制、移动文本 拷贝HTML,直接将文件的HTML源代码拷贝至剪贴板。 CTRL+Z是撤消,CTRL+Y重做 检查拼写错误:文本菜单|“检查拼写”命令。 查找和替换文字 “编辑”菜单|“查找和替换”命令 设置文字属性 选中文本,在“属性”面板进行文字的设置,或是使用插入栏|“文本”选项中的某个按钮进行修饰;更多的可选择“文本”菜单|“样式”命令进行修饰。

设置段落 选中文本,“属性”面板中,对段落进行修饰,对齐方式、文本缩进等. 列表(有序列表\无序列表) 选中文本,在“属性”面板中,单击“列表”按钮,再单击列表项目,弹出“列表属性”对话框,对列表进行样式的修饰. 建嵌套列表:进行文本缩进,输入嵌套列表.

3.4 设置超级链接 超链接是组成网站的基本元素,通过超链接将多个网页组成一个网站,浏览者通过超链接选择阅读路径。 一、URL 超链接是通过URL(统一资源定位器)来定位目标信息的。URL包括4部分:网络协议、域名或IP地址、路径和文件名。URL地址分为绝对URL和相对URL。 1、绝对URL 指在Internet上资源的完整地址,包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。书写格式为: 协议://计算机域名或IP地址[/文档路径][/文档名] 例如:http://www.mydrivers.com/download/download.htm

2.相对URL 文件与当前位置之间的相对位置关系。一般是指同站点内的链接。 如链接到同一路径的文档,直接输入文件名即可,如news.htm 如链接到同一路径下子文件夹的文档,则先输入子文件夹名和斜杠(/),再输入文件名,如yule/news.htm 如链接到上一级路径中,要在文件名前输入“../”,如“../news.htm”。

二、超链接的分类 超链接的分类有很多种,按链接目标的不同,超链接分为:页面链接、锚记链接、电子邮件链接,按链接单击对像的不同,超链接分为:文字链接、图像链接、图像映射等。 1、页面链接 页面链接是指链接目标是其它网页或文件,浏览者单击超链接时将跳转到相应的网页或显示相应的文件。 设置方法:选中创建超链接的文本或图像,在“属性”面板的链接文本框中输入URL地址,或单击链接框右侧的“浏览文件”按钮,弹出“选择文件”对话框,选择相应的文件。

2、在网页中使用锚记 锚记又称书签,一个篇幅较长的网页分为许多块,可以通过锚记跳转到网页中不同的部分 2、在网页中使用锚记 锚记又称书签,一个篇幅较长的网页分为许多块,可以通过锚记跳转到网页中不同的部分. 定义锚记:将光标定位到要用锚记的位置,单击插入栏中的命名锚记按钮.出现命名锚记的对话框,输入锚记名称. 设置带有锚记的超链接:选中文字或图像元素,在属性检查器中,单击链接文本框,在URL文本框中键入“文件名称#锚记名称”,如果链接在同一文档中进行,则直接键入“#锚记名称”. 3、E-MAIL链接: 插入栏中的电子邮件链接中“E-MAIL”文本框中,输入电子邮件地址.或是在属性检查器中链接文本框中输入mailto:abc@sina.com.cn

4、图像链接 选中图像,在“属性”面板中的“链接”文本框中键入要链接的网址或文件即可. 5、热点链接 选中图像,单击属性面板中的热点按钮,可将热点设置为矩形\圆形\多边形等. 为链接设立目标 在“属性”面板中,设置链接目标。 blank(新建窗口); _parent(父窗口打开超链接); _self(在本窗口或本框架中打开链接); _top,在当前浏览器的最外层打开链接

3.4 使用图像 一、图像的格式 GIF:索引格式,最多支持256色. JPG(JPEG):有损压缩格式,支持的是真色彩. PNG:专门针对WEB开发的一种无损压缩格式. 二、插入图像 “插入”栏|“图像”按钮,或是“插入”菜单|“图像”命令,打开“选择图像源文件”对话框,选定需要的图像.单击“确定”按钮。

三、设置图像属性 选中图像,在“属性”面板中设置图像的属性: 对图像进行命名. 改变图像大小:在“属性”面板直接输入图像的尺寸大小。 在“文档”窗口拖动图像的右方、右下方、下方的句柄进行拖动。在“属性”面板中单击重设大小可以恢复图像的大小。 图像的对齐方式:垂直、水平方向等。 设置图片的边距::垂直边距、水平边距 经图像加上文本说明:在“属性”面板中“替代”文本框中输入说明文本。

设置低分辨率图像 制作两张图像,一个是浏览器最终显示的图像,另一个是它的低分率或者灰度版本。 单击图像,在“属性”面板中,低品质源输入低分辨率的图像地址。 增加图像边框:在“属性”面板中输入边框宽度。

四、使用水平线 加入水平线 “插入”栏|“常用”选项卡中的“水平线”按钮。选中水平线,在“属性”面板中,修改水平线的属性。

五、插入鼠标经过图像及导航条 1、插入鼠标经过图像 先在图片处理软件中处理两个图片. 单击“插入”栏|“鼠标经过图像”按钮或是选择“插入”菜单|“图像对象”|“鼠标经过图像”按钮,弹出“鼠标经过图像”对话框,输入原始图片的名称和位置;输入鼠标经过图片的名称和位置即可. 为鼠标经过图像加入一个超链接:前往“URL”文本框中输入超链接地址即可.

2、插入导航条 导航条在网页中起到了向导的作用,通过导航条的指引,快速地找到所要浏览的信息, 导航条由多个导航条元件组成,每个导航条元件链接到相应的链接地址,在网页中一般横排或竖排。每个导航条元件包含一组图像,分别来响应鼠标动作。

设置方法如图所示:

六、创建网页相册 新建一个空白的网页文件 选择“命令”菜单|“创建网站相册”命令,弹出一个对话框,设置相册标题\副标题\其它信息等;选择“浏览”按钮,确定源图像文件夹和目标图像文件夹,设置略缩图的大小\格式等,小数点位数可改变图像的尺寸大小.,“为每张相片建立导览页面”复选框来为每个图像创立导航页.如图所示。

本 章 小 结 本章主要介绍了网页元素编辑及相关属性的设置,包括以下几个方面: 1.网页文本的编辑 2.超链接的建立 3.图像的插入和图像对象的编辑

本章练习题 1. 选择题 (1)网页中常用的图像文件格式包括( )。 A.JPG、BMP、GIF B.JPG、GIF、PNG 1. 选择题 (1)网页中常用的图像文件格式包括( )。 A.JPG、BMP、GIF B.JPG、GIF、PNG C.BMP、PNG、GIF D.MP3、JPG、GIF (2)在插入导航条时,( )是必须的。 A.按下图像 B.替换文本 C.状态图像 D.鼠标经过图像 (3)单击( )会跳转到当前页面某个位置,却不会打开新的网页文件。 A.空链接 B.文本链接 C.锚记链接 D.E-MAIL链接 2. 简答题 一个完整的URL地址包括哪些内容?超链接中的绝对路径和相对路径有什么区别? 一幅图像中创建多个链接区域,如何实现? 网页中支持的图像格式有哪些?它们有什么特点?

上 机 实 训 1、背景知识 根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。    根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。 2、实训准备工作    将文本素材和图像素材准备好,发送到学生主机上,以供学生参考使用。 3、实训要求 创建一个以篮球为话题的网站,要求如下: (1)编辑网站首页,效果图如图所示,包括有图像映射、鼠标经过图像、导航条。 (2)编辑其它内容网页并添加超链接,如图所示,其它页面中包括有图像和文本等,有一个网页中是明星的相册。 课时安排:4课时。