网站与网页设计综合实例
2019年DW网页制作教程案例
建立一个网站,首先要在本地机器上做好网站,再传到网上的虚拟空间上。接下来主要介绍本地站点的建立,站点文件命名。简明步骤:在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。目标是做一个个人网站。打开“我的电脑”,打开C盘,点鼠标右键,选择新建。
选择文件夹选项
中间一个表格,一行二列,里面再分别插入两个表格,左边表格放导航或者图片,右边表格放网页内容。典型的二分栏结构。
下面一个表格,一行一列,放版权声明。
实际中Banner和LOGO尺寸是根据设计需要选择大小,并不受标准的限制。常见的LOGO在页面的左上方,Banner在页面的右上方。
常见的分栏结构,还有三分栏,四分栏。下面是一个三分栏的结构:
由于计算机网络技术发展迅速,知识更新快,而编者水平有限,书中不妥之处在所难免,恳请读者批评指正。
编者
2008年9月
Dreamweaver基础
工作区的选取
学习目标:
掌握Dreamweaver工作区的选择
掌握Dreamweaver工作区的更改
学习时间:2学时
DreamweaverMX提供了两种可供选择的工作区布局:一种将全部元素置于一个窗口中的集成布局和一种非类似于Dreamweaver4的浮动布局。第一次运行DreamweaverMX需要选择一种工作区布局。
学生分组讨论,由代表上讲台展示讨论内容
站点上传
学习目标:
掌握站点的测试
掌握站点的上传
学习时间:2学时
一个站点做好后,需要对站点进行测试。
1.打开窗口菜单>结果>链接检查器,或者按“Ctrl+Shift+F9”快捷键,打开
2.点击无效链接,点最右边黄色的文件夹图标,选择正确的文件。
网页设计与制作实验报告
网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言,达到用该语言可以建立一个简单的网页的目的,同时了解建立站点是做网站必不可少的,要掌握建立站点的方法。
素材准备:准备制作网页所需的文字素材、图像素材。
实验课时:2学时实验内容:1.创建站点;2.新建网页以及保存,重命名;3.输入HTML语言。
实验步骤:1.在E盘中新建本地根文件夹,命名为root,并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
2.定义站点:设置 "站点名称",命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。
3.创建与设置文档的页面属性:新建一个页面,保存名为“HTML基础”的文档。
4.切换代码模式下,输入代码。
5.保存文件,预览文件效果。
实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹,文件夹命名最好为英文;网站中所有的文件最好取名为英文;注意文件的路径;2.所有的图片文件单独放在image文件夹内。
实验思考:除了用HTML语言来做这个网页,还有没有其它的方法?书写实验报告要求:根据最终所作的网页,写出实验报告。
页面效果图:图1-1实验2 初识Dreamweaver实验目的:为了让学生能熟练掌握Dreamweaver的安装与卸载,启动与退出,基本工作环境和设置,对Dreamweaver操作环境有一定了解。
素材准备:准备好从网上下载的安装程序。
实验课时:2学时实验内容:1.安装Dreamweaver:2.Dreamweaver的启动与退出:3.了解工具栏、菜单栏、标题栏等工作环境:4.卸载Dreamweaver实验步骤:1.打开从网上下载的Dreamweaver程序,双击安装。
2.安装完成后输入注册号。
3.启动Dreamweaver,并查看工具栏、菜单栏、标题栏等工作环境。
网页制作及应用第10章
名为“嵩之路”,然后对其进行设置.
显示“可以被注册”的信息。这说明所选域名可 以
进行注册。
查询域名是否被注册
22
返回目录
10.2 综合实例二—域名注册
(2)域名注册 通过在线方式填写域名注册申请表。在查询窗口中点击 “立 即购买”,在接受条款窗口中选“我已经阅读、理解并接受” 后 进入填写信息窗口(注意,要先进行会员登录,如果不是会员, 则需先注册成为会员)。填写完毕后点击“下一步”,在购物 车 中出现域名名称及所需支付的金额,点击“生成定单稍后支 付”。 如下页图所示。
6
返回目录
10.1 综合实例一 —制作主页步骤
4.在topFream区域插入1行2列的表格→在左单元 格中插入网站标志图片logo.png →在右单元格中插 入网站标语图片banner.png→调整图片位置和大小→ 在放置图片的表格下面再插入1行5列的表格→选字 体和居中显示→在5个单元格中分别写入:产品介绍、 公司简介、联系方式、客户反馈、返回首页。
文件为:jianjie.htm,联系方式子页面文件为: connect.htm,9种产品介绍子页面文件分别为:1.htm~9.htm。另外还有 两个用Fireworks制作的图片,一个是网站标志,文件名为:logo.png, 另一个是网站宣传标语,文件名为:banner.png。因为网站文件不多, 所以没定义子文件夹,把所有文件都放在D盘根目录下的rfwz文件夹中 (rfwz意为润丰网站,文件夹名和文件名最好不用汉字)。是本地网站 。 如下图所示。
本地网站
3
返回目录
10.1 综合实例一 —网站的基本结构
小型企业网站的风格要简洁大方、突出主题、直截了当。设计主页
(index.htm)时把企业简介、网站标志、网站标语、公共导航和9种产
网页效果图设计之色彩配色方案及实例说明
网页效果图设计之色彩配色方案及实例说明:红橙黄绿蓝紫黑白灰1 红色是最具有视觉冲击力的色彩;暗示速度和动态;可以刺激心跳速度、加快呼吸、刺激食欲;红色的衣服使人身形显大;红色的车最容易被偷,如图所示。
1.1 红色的具象联想火焰、鲜血、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。
1.2 红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。
1.3 红色的负面联想侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。
1.4 红色的文化域在非洲,红色代表死亡。
∙在法国,红色代表雄性。
∙在亚洲,红色代表婚姻、繁荣、快乐。
∙在印度,红色是士兵的颜色。
∙在南非,红色是丧服的色彩。
1.5 实例说明为中企动力8周年主题网站(/8tm/index.html)网页截图,整个页面使用红色作为主色调,给人以喜庆、热闹的感受。
如图所示.1.6 红色系配色方案红色系的配色方案如下,如图所示:1. 在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。
2. 在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。
3. 在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。
4. 在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。
2 橙色橙色能促进食欲;橙色的房间代表了友善,带给人愉快,能促使人谈话和思考;橙色能够用来强化视觉,这就是为什么海滩救生员的救生服采用橙色的原因,如图所示。
2.1 橙色的具象联想秋天、桔子、胡萝卜、肉汁、砖头、灯光。
2.2 橙色的正面联想温暖、欢喜、创造力、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美。
2.3 橙色的负面联想粗鲁、时髦、喧嚣、嫉妒、焦躁、可怜、卑俗。
2.4 橙色的文化域∙在爱尔兰,橙色代表新教运动。
∙在美洲土著文化里,橙色代表学习和血缘关系。
∙在荷兰,橙色是国家的颜色,因为荷兰的君主来自于Orange-Nassau家族。
∙在印度,橙色代表印度教。
课程思政《网页设计》
课程思政《网页设计》布局知识,并引入纪念相关活动的主题,提高学生的民族自豪感和文化自信。
第二阶段,25分钟案例分析,让学生通过分析网站首页的设计与制作,理解纪念相关活动的意义,培养学生的爱国主义情感和社会责任感。
第三阶段,10分钟课堂总结,强调学生在本课程中所学到的专业知识和德育内涵,激发学生的研究热情和责任感。
(3)课后作业,要求学生制作一个与纪念相关活动有关的网页,并加入自己的思想感悟,体现学生的爱国主义情感和社会责任感。
通过课前预、课堂教学和课后作业三个环节,全面提高学生的思政素养,促进专业课程和德育目标的深度融合。
三、存在问题及改进措施在专业课程中开展思政教育,存在一些问题,如思政内容与专业知识的融合度不够,学生对思政教育的认识和重视程度不高等。
针对这些问题,需要采取一些改进措施。
首先,要加强课程设计,将思政教育融入到整个课程中,使学生在研究专业技能的同时领悟德育内涵。
其次,要加强教学方法,采用任务驱动、案例分析、讨论互动等方式,激发学生的研究热情和思考能力。
同时,要加强师生互动,引导学生主动参与思政教育,提高学生对思政教育的认识和重视程度。
四、结论本文以___电子商务中专一年级《网页设计与制作》专业基础课程为例,探讨了在专业课程中开展思政教育的具体措施和意义。
通过课程设计、教学方法和师生互动等方面的改进,可以更好地实现专业课程和德育目标的深度融合,培养学生的爱国主义情感和社会责任感,为社会培养“爱国、敬业、诚信、友善”的高规格专业人才。
本文介绍了一节以“红旗飘飘,引我成长”为主题的课程思政实施过程。
在课程设计中,教师结合课前资料,旨在让学生接受爱国主义教育,激发研究热情。
在课堂实施中,教师以任务为导向,追求课堂实效,创设情境,将课堂内容与思政教育紧密结合。
学生在小组团队的形式下完成任务,教师巡回关注学生技能动态和思维动态,以渗透职业养成教育和思政教育为目的。
在作品展示及评价阶段,学生通过自评、互评、交流心得,学会交流、表达、分享成功的喜悦。
静态网页制做指南(学生)
综合实例——“宝贝爱网站”制做指南2.1 创建站点在编辑网页之前,首先要定义一个站点,以下是高级模式的定义过程:[1] 启动Dreamweaver CS3软件,执行【站点】→【新建站点】菜单命令。
[2] 在【站点定义为】的对话框中选择“高级”选项卡,点击新建两个文件夹baby (根文件夹)和images(图像文件夹),如下图所示,设置“本地信息”的各个参数。
本例的主目录为baby,在信息服务默认站点EC中,“HTTP地址”为http://localhost/,其他默认,完成后点“确定”。
因为是静态网页,可以不设测试服务器。
[3] 将素材文件复制到baby文件夹下(含images文件夹和news.html文件)。
2.2 制作网页模板为便于理解,我们将网页模板的制作分为4小节,下面来看具体操作。
1.新建模板文档(1)选择【文件】→【新建】菜单,打开【新建文档】对话框。
单击“空模板”,在“模板类型”列表中选择“HTML模板”,默认“布局”为 <无>,最后单击“创建”按钮,如图2-1所示。
图2-1(2)按【Ctrl+S】组合键保存文档,弹出图2-2所示提示框,勾选“不再警告我”复选框,之后单击“确定”按钮。
图2-2(3)在打开的【另存模板】对话框中,从“站点”下拉列表中选择“宝贝爱”,在“另存为”文本框中输入模板文件名“ml”,最后单击“保存”按钮,如图2-3所示。
图2-3(4)按【Ctrl+J】组合键,打开【页面属性】对话框。
单击左侧“分类”列表中的“标题/编码”,设置标题为“宝贝爱网站”,其余默认,如图2-4所示。
图2-4(5)再次按【Ctrl+S】组合键保存文件(*养成习惯)。
2.设置模板内容(1) 单击【插入】面板【常用】栏中的“表格”按钮,在页面中插入一个1行2列,宽1000像素,边框粗细、单元格边距和间距均为0的表格,如图2-5所示。
图2-5在该表格【属性】面板中,设置“表格ID”为“1”(定义为表格1,参见图2-6底部提示标签<table#1>),“对齐”方式为“居中对齐”,如下图所示:(2)在表格1(table#1)的左右两个单元格中(用Ctrl+鼠标来选择定位,此方式以后会常用到)分别插入图片“in01.gif”和“index_02.gif”,如图2-6所示。
Web网页设计实验报告
课程设计报告书2010/2011 学年第 1 学期设计题目: Web网页制作实验报告年级专业: 08级市场营销姓名学号:指导老师:经济管理系 12月20日目录一、设计目的 (3)二、设计题目 (3)三、结构设计 (3)四、技术分析 (4)五、设计过程 (7)六、实验心得 (10)七、实验总结 (11)[附录]网页源代码节选 (12)一、设计目的在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。
因此网站建设在Internet 应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。
我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。
熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。
增强动手实践能力,进一步加强自身综合素质。
学会和团队配合,逐渐培养做一个完整项目的能力。
二、设计题目《C罗球迷之家》三、结构设计选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。
首先,做好需求调研。
调研方式主要是上网查阅资料,在图书馆里翻阅相关书籍。
然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。
我们选做的主题是个人主页,并且选定题目为“C罗球迷之家”,其目的是做一个简单的网站,介绍C罗的各个方面,提供一定的资讯信息,。
进行一番调研之后,该网站整体站功能结构图如下:四、技术分析(一)建立布局在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。
2024版《网页制作》教学设计优质课比赛优秀设计
能力目标
能够熟练运用HTML、CSS和JavaScript等前端技术,完成静态网页和动态网页的设计与开发; 能够使用PHP、Java等后端技术,实现网站数据的处理和交互功能;能够运用响应式设计和 移动端开发技术,实现网页在不同设备上的适配和呈现。
素质目标
培养学生的创新意识和团队协作精神,提高学生的审美能力和用户体验设计能力,增强学生 的沟通能力和职业素养。
介绍如何使用JavaScript、PHP等后 端技术实现网页的交互功能和动态效 果。
响应式网页设计
讲解响应式网页设计的原理和实现方 法,使网页能够自适应不同设备的屏 幕尺寸。
8
教学方法
2024/1/28
案例教学法
01
通过分析经典案例,让学生了解优秀的网页设计作品的特点和
制作方法。
实践教学法
02
通过上机实践,让学生亲自动手制作网页,提高实际操作能力。
VS
课程定位
本课程是计算机科学与技术、软件工程等 专业的核心课程之一,也是其他相关专业 的重要选修课程。它旨在培养学生具备网 页设计与开发的能力,以适应信息化社会 对网页制作人才的需求。
2024/1/28
4
教学目标与要求
知识目标
掌握网页制作的基本概念和原理,了解网页设计与开发的前沿技术和趋势。
2024/1/28
18
教学反思与改进
2024/1/28
教学内容反思
针对教学过程中出现的问题和不足,对教学内容进行梳理和调整, 以提高教学效果。
教学方法改进
根据学生的反馈和学习效果,尝试采用新的教学方法和手段,如案 例教学、项目驱动等,以激发学生的学习兴趣和主动性。
教学资源优化
根据教学需求和学生实际情况,不断更新和完善教学资源,如教材、 教案、教学视频等,为学生提供更加优质的学习支持。
网页设计与网站建设PPT课件
义HTML标签和仅对该文档,选择Body。 4. 修改背景图形及有关设置。 5. 在1024 ×768下浏览效果
返回
4.4 单元格背景图形处理技巧
1. 选中单元格中的图片,在属性面板中复 制路径。
2. 删除图片引用。 3. 在属性面板中的背景图像框中粘贴路径。 4. 原单元格中即可放入其它网页元素,如
文字、动画等。
返回
4.5 单元格中嵌套表格的插入
1. 选中单元格中的图片,在属性面板中记 下高度(需要时可记下宽度)。
2. 删除图片及其引用。 3. 用工具栏中插入表格工具插入嵌套表格。 4. 设置表格有关属性,如高度,边框颜色
等。
返回
4.6 本讲上机实验要点
1. 正确导出网页及建立站点结构。 2. 设置网页居中及边界,编码等属性 3. 为网页建立柱状和花边背景,并在高分辨
返回
4.2 页面居中及设置处理
1. 打开DW,建立站点,注意只需用高级 选项选择根文件夹即可。
2. 点击修改菜单→页面属性,设置边界为 0及编码为简体中文。
3. 在标签区找到Table,点击后在属性面 板设置居中。
返回
4.3 网页背景处理
1. 用Fireworks 制作背景用图形,大小 1000×*,
返回
1.5 位图处理
1. 位图导入:主要是jpg、gif图形 2. 位图选取:使用选取工具加羽化、反选、
等 3. 效果处理:透明度,边缘羽化等效果处理。 4. 位图的缩放处理。 5. 举例:广告区背景制作并进行相应切片等
返回
1.6 本讲上机实验要点
1. 页面大小及背景设置。 2. 辅助线及对象对齐练习 3. Logo标志制作(含弧形文字处理) 4. 动画或广告区背景图形制作。 5. 位图的效果处理。 6. 公章图形等制作。
网页设计与制作实验报告
学号:20题目网页设计与制作学院计算机科学与技术学院专业计算机应用班级1004姓名李俊清指导教师丁一2012年6月10日实验一:网页设计html一、实验目的1.掌握常用的HTML语言标记。
2.利用文本编辑器建立HTML文档,制作简单网页。
3.掌握网页制作功能的使用。
二、实验内容1.熟悉制作网页的基本方法。
2.掌握网页文件的基本操作;页面属性的设置;文本的插入和格式设置3.建立一个网站。
三、实验步骤1.在E:盘上建立一个文件夹如myweb作为自己的web站点根目录,在文本编辑器EditPlus 中输入如下的HTML代码程序,保存为以.htm或.html为后缀的文件如index.htm作为自己的第一个页面,并在浏览器中运行。
<html><head><title>我的第一个网页</title></head><body><h1>欢迎访问我的网站。
</h1><h3>欢迎访问我的网站。
</h3><h5>欢迎访问我的网站。
</h5></body></html>2.在标记中分别加入以下属性,看看index.htm有什么变化。
bgcolor=#背景颜色#=rrggbb(16进制的RGB值)或颜色名称background=#背景图像#=image-URL(图片所在路径)text=#非可链接文字的色彩bgproperties=FIXED背景图像不动<html><head><title>我的第一个网页</title></head><body bgcolor="#CCCCFF" text="#"><h1 align="center">欢迎访问我的网站。
网站规划与网页设计
段落标记放在一个段落的头尾,用于定义一个段落。 <p>...</p>标记不但能使后面的文字换到下一行,还可 以使两段之间多一空行,相当于两个<br /><br />标记。 段落标记的格式为: <p align="left|center|right|justify"> 文字 </p> 其中属性align用来设置段落文字在网页上的对齐方式: left(左对齐)、center(居中) 、 right(右对齐)和 justify(两端对齐)。缺省时默认为left。
– 4.所有的属性必须用引号""括起来 – <height=80>必须修改为: – <height="80"> – <input name=guitar type=checkbox value=guitar> × – <input name="guitar" type="checkbox" value="guitar" /> √
– 7.不要在注释内容中使用“--” – “--”只能发生在注释的开头和结束,也就是说, 在内容中它们不再有效。 • <!--这里是注释-----------这里是注释--> × • 用等号或者空格替换内部的虚线。 • <!--这里是注释============这里是注释-> √
段落标记
1 段落标记<p>...</p>
段落标记
2 换行标记<br> /<nobr>
强制换行标记<br> 格式: 文字<br /> 由于xhtml中Enterprise键产生的换行符会被忽略掉, 要换行就必须使用这个标记。 不换行标记<nobr> 格式:<nobr>文字</nobr> 对于输入公式、数字等信息时,会用到。
网页设计配色应用实例剖析——蓝色系
网页设计配色应用实例剖析——蓝色系蓝色是色彩中比较沉静的颜色。
象征着永恒与深邃、高远与博大、壮阔与浩渺,是令人心境畅快的颜色。
蓝色的朴实、稳重、内向性格,衬托那些性格活跃、具有较强扩张力的色彩,运用对比手法,同时也活跃页面。
另一方面又有消极、冷淡、保守等意味。
蓝色与红、黄等色运用得当,能构成和谐的对比调和关系。
蓝色是冷色调最典型的代表色,是网站设计中运用得最多的颜色,也是许多人钟爱的颜色。
蓝色表达着深远、永恒、沉静、无限、理智、老实、严寒的多种感觉。
蓝色会给人很强烈的安稳感,同时蓝色还能够表现出和平、淡雅、洁净、可靠等。
下面我们根据蓝色系不同属性的同类色、邻近色、高纯度对比、相对对比色等色彩搭配做不同的举例分析。
→蓝色高纯度对比网页例图:蓝色系分析:(高纯度对比:蓝色玫瑰色)蓝色的HSB数值H色相为240度时是正蓝色。
上图的HSB模式S数值显示,所有主要配色的饱和度都是100%。
从主色调、辅色调HSB模式的数值可看出,这两种颜色在明度上有较大的区别,色相上稍有轻度变化,饱和度相同。
RGB模式上看,主色调与辅色调R 数值都为0,G绿色的数值和B蓝色数值分量的变化,得到了不同蓝色的两结果。
点睛色仅是R红色与B蓝色两色调和而得没有掺杂其他颜色,因此饱和度呈最高值100%。
整个页面配色的饱和度都为100%,页面整体配色看起来视觉冲击力异常强烈。
辅助色白色让页面上的颜色的特性发挥到极致,是不可缺少的辅助配色。
结论:响亮、强烈刺激的词语似乎都适用于上图页面,源于高纯度烘托、微妙的冷暖变化配色上,体现出现代都市张扬时尚的气息。
白色块面的线型使得这种高纯度高强度的配色变得响亮却也缓和。
辅色调蓝色的运用透露出设计师的大胆与魄力,玫瑰色在色轮表里算是冷色系,但是与蓝色广义上的对比来说是暖色,在这里与蓝色搭配算是绝配了。
整个页面无不体现出特色和个性。
→蓝色浅蓝色网页例图:/start.html蓝色系分析:(同类色:浅蓝色)主色调HSB数值H显示200度,色轮度稍向绿色方位倾斜,但是由于从180度到270度基本上给人的视觉呈现还是蓝色范畴,因此与视觉上广义的蓝色差别不大。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
第10章 网站与网页设计综合实例
教学内容 10.1 综合实例一(一个企业网站的建立过程) 10.2 综合实例二(一个素质培训中心网站建设)站
返回目录
文件为:jianjie.htm,联系方式子页面文件为: connect.htm,9种产品介绍子页面文件分别为:1.htm~9.htm。另外还有 两个用Fireworks制作的图片,一个是网站标志,文件名为:logo.png, 另一个是网站宣传标语,文件名为:banner.png。因为网站文件不多, 所以没定义子文件夹,把所有文件都放在D盘根目录下的rfwz文件夹中 (rfwz意为润丰网站,文件夹名和文件名最好不用汉字)。是本地网站 。 如下图所示。
9
返回目录
10.1 综合实例一 —制作主页步骤
10.单击leftFream区域→插入9行1列的表格→调整表格 大小与区域匹配→根据需要在属性面板“滚动”框中设置
是 否显示滚动条。如下图所示。
制作主页
10
返回目录
10.1 综合实例一 —制作主页步骤 11.在表格第一行写第一个产品名→选
中该产
品名→链接到1.htm→显示在mainFream区域 中
5
返回目录
10.1 综合实例一 —制作主页步骤
4.在topFream区域插入1行2列的表格→在左单元 格中插入网站标志图片logo.png →在右单元格中插 入网站标语图片banner.png→调整图片位置和大小→ 在放置图片的表格下面再插入1行5列的表格→选字 体和居中显示→在5个单元格中分别写入:产品介绍、 公司简介、联系方式、客户反馈、返回首页。
(方法与设置公共导航相同),同样方法完 成所
有产品的链接。
至此,主页制作全部完成。
11
返回目录
10.1 综合实例一 —制作子页 本例中每一个子页都是纯文本形式, 所以制
作很简单,可根据需要添加表格使文本显 示规
范。子页面被调用时都将显示在 mainFream区域
中,这是由主页中链接决定的。 12
返回目录
主页框架
4
返回目录
10.1 综1.合启实动D例rea一mw—eav制er→作设主“布页局步”骤选项卡当前→单击
“框架”按钮→选“项部和嵌套的左部框架” →打开“框 架”面板,可以看到当前框架模式和三个框架的内部名字, 内部名字分别为topFream、leftFream、mainFream;
2.用鼠标调整框架区域的大小; 3.“文件”菜单→“保存全部”→给框架集起名 index.htm(主页)→给框架的mainFream区域起名 right.htm→给框架的leftFream区域起名left.htm→给框架的 topFream区域起名top.htm。(这三个页面构成主页内容, 在浏览器中打开主页时,它们的内容将同时显示在主页 上)。至此,主页框架搭建完毕。
网站的基本结构
3
返回目录
10.1 综合实例一 —主页设计 用框架技术将主页分为三部分,对应的三个HTML文件分别命名为: top.htm(顶部区域),left.htm(左区域),right.htm(右区域)。顶部区域 中有网站标志、网站标语和公共导航,方便浏览者在网页中任意跳转并能随 时返回主页。左区域中有超链接列表,给9种商品名称定义超链接,方便浏览 者对任何一种商品的查询。右区域是文本区域,显示当前链接的内容。顶部 区域和左区域中的信息在浏览中一直显示在浏览窗口,只有文本区域是浏览 窗口中信息变化的区域,随着链接的不同而不同。
制作公共导航上的链接
7
返回目录
10.1 综合实例一 —制作主页步骤
6.选中“公司简介”→单击属性面板“链接”框的浏览文件 按钮 →“链接”框中选right.htm(介绍公司简介的子页)→“目标” 框 中选mainFream。 7.选中“联系方式”→单击属性面板“链接”框的浏览文件 按钮 →“链接”框中选connect.htm(介绍公司联系方式的子页) →“目 标”框中mainFream。 8.选中“客户反馈”→“链接”框中填写
制作主页顶部区域
6
返回目录
10.1 综合实例一 —制作主页步骤
5.选中“产品介绍”→在属性面板中单击“链接” 框的浏览文件按钮→在站点文件夹rfwz中选jianjie.htm文件 (产品简介子页)→单击属性面板“目标”框下拉按钮→
选 “mainFream”选项,被链接的文件内容将显示在
mainFream 区域中。如下图所示。
10.1 综3.合在实搜例索一出—来申的请众多域服名务和器代中理任服选务一器个空(间本例选
“多 来米中文网”),进入申请界面。 如下图所示。
申请域名 4.给自己的网站起一个名字,本例给网站起名为 “rfwz”,这个名字位于域名第3级,申请成功后,本网 站域名为:。
14
返回目录
本地网站
2
返回目录
10.1 综合实例一 —网站的基本结构 小型企业网站的风格要简洁大方、突出主题、直截了当。设计主 页 (index.htm)时把企业简介、网站标志、网站标语、公共导航和9种产 品名称都放在主页上,使浏览者一进入主页就能看到,开门见山。再将 9种产品的具体介绍、产品简介和联系方式分别做成子页,在主页上用 超链接的方式将它们连接起来。网站的基本结构如下图所示。
mailto:runfeng0536@→“目标”框中选blank(打8开一
个空
10.1 综合实例一 —制作主页步骤
返回目录
客户反馈
9.选中“返回首页”→“链接”框中为 right.htm(企业简介子页)→“目标”框中选 mainFream。(至此完成了top.htm文件制作,公共 导航也制作完成。)。
10.1 综合实例一 —申请域名和代理服务器空间
网上有很在浏览器中输入地址:。 2.在搜索框中输入“免费空间”,单击“搜索”。 如下图所示。
查找免费空间
13
返回目录
10.1 综合实例一 —申请域名和代理服务器空间
5.填写申请表格。 6.如果注册成功,一小时以后在你提 供的电 子信箱中可以看到系统管理员发来的邮件, 然后 开始将本地网站上传到代理服务器。 注意:免费空间通常只允许非商业性使用, 并附加若干条件,如达不到要求或用于