工信版（中职）网页设计与制作教程2.ppt

《工信版（中职）网页设计与制作教程2.ppt》由会员分享，可在线阅读，更多相关《工信版（中职）网页设计与制作教程2.ppt（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Y CF（中职）网页设计与制作教程2项目活动二健康美丽网站设计:Dreamweaver CS 入门 任务一创建本地站点及文件操作 任务二页面布局 任务三页面属性及网页文件头设置返回任务一创建本地站点及文件操作 一、站点目录结构及本地站点的创建 创建网站的第一步是确定本地站点的目录结构,并准备好相应的素材文件,然后在 中定义站点并创建网页,下面将介绍健康美丽网站的目录结构及创建本地站点的方法.)打开“我的电脑”,任意选择一个本地磁盘,如 盘,在 盘中新建文件夹,并将其命名为“”.打开新建的“”文件夹,在里面分别新建“”“”和“”文件夹(这是制作网站的常用操作,便于分门别类地管理站点文件及文件夹,

2、其中“”文件夹用于存放网页中用到的图像文件,“”文件夹用于存放网页的样式文件,“”文件夹用于存放 动画).下一页 返回任务一创建本地站点及文件操作)启动,在菜单栏中单击“站点”,选择“新建站点”命令,弹出如图 所示的“站点设置对象”对话框.)在“站点名称”文本框中填写站点名称“”,这里的名称可以是中文名称.)单击“本地站点文件夹”文本框右侧的文件夹图标,弹出“选择根文件夹”对话框,如图 所示.选择 盘中新建的文件夹“”,单击“打开”按钮,再继续单击“选择”按钮,选择本地根文件夹,效果如图 所示.)单击“站点设置对象”对话框左侧的“高级设置”选项,选择“本地信息”,单击“默认图像文件夹”文本框右

3、侧的文件夹图标,选择 盘中新建的“”文件夹下的“”文件夹,单击“选择”按钮,选择默认图像文件夹,如图 所示.上一页 下一页 返回任务一创建本地站点及文件操作)单击“保存”按钮,即完成站点的创建,此时在 主窗口的右侧会显示“文件”面板,如图 所示.二、新建网页)打开“文件”面板,单击“文件”面板上的 按钮,选择“文件”“新建文件”命令,如图 所示,即可新建一个空白的网页文件.此时新建文件的名称处于可编辑状态,默认为.,一般需要将第一个文件作为主页并重新命名为.,如图 所示.)双击.文件,进入此文件的网页编辑状态,可以编辑网页效果.上一页 返回任务二页面布局 一、常见网页布局结构.“”型布局 所谓

4、“”型布局就是指页面顶部为横条网站标志和广告条,下方左面为主菜单,右面显示内容的布局.因为菜单背景颜色较深,整体效果类似英文字母“”,所以称之为“”型布局.这是网页设计中用得最广泛的一种布局方式.这种布局的优点是页面结构清晰、主次分明,是初学者最容易上手的布局方法.缺点是形式太过规矩呆板,如果细节色彩上不注意,很容易让人产生审美疲劳.“口”型布局 这是一个象形的说法.一般页面上下各有一个广告条,左面是主菜单,右面是友情链接等,中间是主要内容,整体效果类似于“口”字,所以称之为“口”型布局.这种布局的优点是充分利用版面,信息量大.下一页 返回任务二页面布局 缺点是页面拥挤,不够灵活.也有将四边空

5、出,只用中间的窗口型设计.“三”型布局 这种布局多用于国外站点,国内使用的不多.特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条.对称对比布局 顾名思义,采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点.优点是视觉冲击力强,缺点是实现左右或上下两部分的有机结合比较困难.布局 引自广告术语,就是指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心,常见于时尚类站点.优点显而易见是漂亮且引人注目,缺点是速度慢,但作为版面布局还是值得借鉴的.上一页 下一页 返回任务二页面布局 二、健康美丽网站页面布局制作 制作网页之前要对网页的风格、网页的布局、内容的呈现

6、进行构思与设计,确定网页的布局.其中标题部分显示健康美丽网站的名称,一般用较大的字体或图片制作,导航部分通过超链接的方式显示不同的栏目,方便访问者浏览,左下部分通过图片显示网站的信息,右侧是主要的显示区域,显示网站的主要内容,网站的最下面显示版权信息和联系方式.)通过表格对网页进行布局.选择“插入”“表格”命令,在弹出的“表格”对话框中,设置表格为 行 列、“表格宽度”为 像素、“边框粗细”为、“单元格边距”为、“单元格间距”为,如图 所示.单击“确定”按钮,完成表格的插入,选择表格,在属性面板中设置表格居中对齐,如图 所示.上一页 下一页 返回任务二页面布局)在上述表格中插入 行 列的表格,

7、并在第一个单元格中插入图像.将光标定位到单元格中,选择“插入”“图像”命令,弹出如图 所示的“选择图像源文件”对话框.在对话框中选择需要插入的图像,如“关注健康关注美丽”.单击“确定”按钮,弹出“图像标签辅助功能属性”对话框,继续单击“确定”按钮,图像即可被插入到网页中,如图 所示.)设计导航.在第二个单元格中插入一个 行 列的表格(方法同上),选择单元格,在每个单元格中分别插入“首页”“时尚前线”“健康新闻”“美丽新闻”“饮食文化”图片,如图 所示.)继续按要求插入表格,插入图片,布局页面的中间部分.效果如图 所示.上一页 下一页 返回任务二页面布局)至此,导航栏目及正文部分设置完成.按 键

8、或执行菜单命令“文件”“在浏览器中预览”,浏览网页效果,如图 所示.上一页 返回任务三页面属性及网页文件头设置 一、设置页面属性 执行菜单命令“修改”“页面属性”,打开“页面属性”对话框,可设置网页属性,如图 所示.在“页面属性”对话框左侧的分类栏中,有“外观()”“外观()”“链接()”“标题()”“标题/编码”和“跟踪图像”六个选项,下面我们将分别介绍它们的作用.)页面属性中的“外观()”分类,如图 所示.可在“页面字体”下拉列表中选择网页默认字体.如果没有想要的字体,可选择编辑字体列表,打开如图 所示的“编辑字体列表”对话框.在“可用字体”列表中,选择一种字体,单击 按钮,可将选中的字体

9、加入到“选择的字体”列表中,也可以通过 按钮,删除“选择的字体”列表中的字体.下一页 返回任务三页面属性及网页文件头设置“大小”下拉列表可以设置网页默认文本的大小,单击“文本颜色”后的按钮,可在弹出的调色板中设置网页文本的颜色,采用同样的方法可以设置网页的背景颜色.单击“背景图像”后的“浏览”按钮,打开“选择图像源文件”对话框.在对话框中选择要设置为背景图像的文件,然后单击“确定”按钮,即可将该图像设置为网页的背景图像.在“重复”下拉列表中,可以设置图像的显示方式.其中,“不重复”表示背景图像保持原大小和位置,“重复”为默认值,选择该项,可以将整个页面填满,“横向重复”表示背景图像在水平方向平

10、铺,“纵向重复”表示背景图像沿垂直方向平铺.按照文章的书写规则,正文与纸的四边需要留有一定的距离,这个距离叫作页边距.在网页中,默认情况下,页边距都不为,可以通过设置左、右、上、下边距将网页的页边距设置为合适的大小.一般情况下,页边距都设置为.上一页 下一页 返回任务三页面属性及网页文件头设置)页面属性中的“链接”分类,如图 所示.主要用来设置网页中链接文本四种状态的颜色及链接文本是否有下划线等.)页面属性中的“标题”分类,如图 所示.主要用来设置 标签中的 的字体、字号、颜色等.)页面属性中的“标题/编码”分类,如图 所示.主要用来设置网页的标题,在“标题”文本框中输入网页标题,在“编码”下

11、拉列表中选择网页使用的编码类型,一般选择“()”.)页面属性中的“跟踪图像”分类主要是用来将前期设置好的网页文稿图像调用到当前编辑的网页中,便于网页设计者参与制作.上一页 下一页 返回任务三页面属性及网页文件头设置 二、插入搜索关键字 关键字的作用是引导和帮助搜索引擎找到网页,它是一个入口,因此设置网页关键字尤其重要.如何把关键字适当地插入网站当中,以起到优化网站结构、提升网站排名的作用呢?在万维网上通过搜索引擎查找资料时,搜索引擎会自动读取网页中的 标签的内容,如果网站关键字设置合适,网页搜索中网站排名就会提升,进而提高访问量.但如何设置关键字可以提高网站排名呢?并不是关键字字数越多越好,因

12、为几乎所有的搜索引擎都限制索引关键字或字符的数目,当超过了限制的数目时,它将忽略超出的关键字,所以关键字最好使用几个精选的.一般情况下,关键字是对网页的含义、内容、风格或作者等内容的概述.上一页 下一页 返回任务三页面属性及网页文件头设置 设置网页搜索关键字的方法如下:)选中文档窗口中的“代码”视图,将光标定位在 标签中,选择“插入”“”“文件头标签”“关键字”命令,打开如图 所示的“关键字”对话框.)在“关键字”对话框中输入相应的中文或英文关键字,关键字之间用“,”分割.在如图 所示的对话框中输入关键字“个人网站”,单击“确定”按钮,即可完成设置.)观察“代码”视图,发现 标签内多了下述代码

13、.“”还可以通过 标签实现搜索关键字的设置,具体操作方法如下:上一页 下一页 返回任务三页面属性及网页文件头设置 选择“插入”“”“文件头标签”“”命令,打开“”对话框.在“属性”下拉列表中选择“名称”,在“值”文本框中输入“”,在“内容”文本框中输入关键字信息,如图 所示,设置完成,单击“确定”按钮.用同样的方法在“代码”视图中可以查看相应的 标记.三、插入作者和版权信息 插入网页的作者和版权信息,可选择“插入”“”“文件头标签”“”命令,打开“”对话框,在“值”文本框中输入“/.”,在“内容”文本框中输入作者名称和版权信息,如图 所示.上一页 下一页 返回任务三页面属性及网页文件头设置 此

14、时,在“代码”视图中的 标签中可以看到相应的 标记.“”四、设置刷新时间 要指定载入页面刷新或者转入其他页面的时间,可设置文件头部的刷新时间项.在“代码”视图中,将光标定位到 标签中,选择“插入”“”“文件头标签”“刷新”命令,打开如图 所示的“刷新”对话框.在“延迟”文本框中 输入浏览器刷新页面之前要等待的时间.若需要浏览器在完成载入后立即刷新页面,则在文本框中输入“”.“操作”选项组指定在规定的延迟时间后浏览器是转到其他的 还是刷新当前页面.上一页 下一页 返回任务三页面属性及网页文件头设置 五、设置说明信息 搜索引擎也可以通过读取 标签的说明信息来查找信息,但说明信息主要是设计者对网页内

15、容的详细说明,而关键字可以使搜索引擎尽快搜索到网页.为了设置网页说明信息,可将光标定位到“代码”视图的 标签中,选择“插入”“”“文件头标签”“说明”命令,打开“说明”对话框,如图 所示.在“说明”文本框中输入说明信息,单击“确定”按钮即可.上一页 返回图“站点设置对象”对话框返回图“选择根文件夹”对话框返回图“选择根文件夹”效果图返回图“默认图像文件夹”设置对话框返回图 站点管理窗口返回图 执行“新建文件”命令返回图 新建主页文件管理窗口返回图“表格”对话框返回图“表格”属性面板返回图“选择图像源文件”对话框返回图 插入图片返回图 插入导航图片返回图 表格布局效果返回图 健康美丽网站效果图返回图“页面属性”对话框返回图“编辑字体列表”对话框返回图 页面属性中的“链接”分类返回图 页面属性中的“标题”分类返回图 页面属性中的“标题/编码”分类返回图“关键字”对话框返回图“”对话框返回图“”对话框返回图“刷新”对话框返回图“说明”对话框返回