网页设计与网站建设.ppt

《网页设计与网站建设.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、重庆文理学院文理基础指导选修课网页设计与网站建设汪维华等主讲网页设计与网站建设课程组本课程属操作实践性课程，其特点体现一个字“做”，所谓“做”，就是学会如何做网页，怎样做（建立）网站，这也是本课程学习的主要目的。所用工具软件为著名Macromedia公司的“网页三剑客”，其中Fireworks主要进行网页图形制作以及页面布局处理，Flash处理网页二维动画，Dreamweaver综合处理网页元素及页面元素样式设置等。课程特点与工具应用在教师的指导和监督下，规划设计并制作完成一个比较规范的个人实例网站。作为期末考核的主要内容，网页形式可以多种多样。具体要求如下：。考核内容

2、及要求网站结构合理。主页直接在根站点下，其余文件分门别类放在相应子文件夹中主题明确。反映出的主题应具备一定的实际意义。3.网页元素布局合理。色彩搭配艺术，讲究网页平衡。4.导航条、按钮、logo区等网页元素制作美观漂亮。5.有基本的Flash动画，字幕等动态元素。6.每页都应有网页头、导航栏、版权区。7.网站导航方便，无错误链接。8.主页和子页间应有正确的链接关系。通过本讲学习，应该掌握以下内容：网页大小设置网页背景色设置辅助线添加基本图形的制作方法弧形文字制作位图处理图形中切片应用第一讲页面设置与基本图形文字处理（2学时）1.1网页大小及背景色网页大小：780＊X背景

3、色：标准安全色，其它颜色。1.2辅助线添加辅助线大小设置辅助线显示与隐藏，自动对齐。1.3基本图形的制作方法图形操作对象：矩形、园、多边形等联合打孔刀子工具对齐，均分，排列缩放，效果举例：梅花、心型等图形制作1.4弧形文字制作方法文字的输入及属性设置路径：钢笔工具，图形边框等文字附加到路径。文字方向倒转。文字效果：投影等效果。举例：公章、logo中弧形文字等切片应用1.5位图处理位图导入：主要是jpg、gif图形位图选取：使用选取工具加羽化、反选、等效果处理：透明度，边缘羽化等效果处理。位图的缩放处理。举例：广告区背景制作并进行相应切片等1.６　本讲上机实验要点页面大小

4、及背景设置。辅助线及对象对齐练习Logo标志制作(含弧形文字处理)动画或广告区背景图形制作。位图的效果处理。公章图形等制作。通过本讲学习，应该掌握以下内容：矩形导航条制作弧形导航条制作园角矩形导航条制作层叠形导航条制作凹入形导航条制作导航条中切片应用第二讲导航条制作（4学时）2.1矩形导航条制作2.2弧形导航条制作2.3园角矩形导航条制作2.4层叠形导航条制作2.5凹入形导航条制作2.6预置超级链接区（切片）对导航条中文字区域进行切片，为后续操作预留图形超级链接区，并配合前面完成的内容形成部分网页元素制作。2.7本讲上机实验要点矩形导航条制作弧形导航条制作园角矩形导航条

5、制作层叠形导航条制作凹入形导航条制作通过本讲学习，应该掌握以下内容：导航按钮制作、按钮排列方法矩形板块制作方法园角板块制作方法条目板块制作方法版权区域制作方法第三讲按钮与板块制作（2学时）3.1导航按钮制作方法制作艺术图形，如柱状型，内斜角型转换为按钮，按Ｆ８建双击打开，在滑过帧复制首帧，修改图形，点击完成。添加并对齐文字，复制多个，并修改文字。进行对齐，均分等操作需要时可加上背景图像3.2矩形板块制作方法直接用切片工具进行切片即可3.３　园角板块制作方法3.4条目板块制作3.5版权区域制作画一水平线，然后切片即可，也可以直接加上版权信息，但以后修改不是很方便3.6本讲

6、上机实验要点导航按钮制作矩形板块制作园角板块制作条目板块制作版权区域制作通过本讲学习，应该掌握以下内容：导出网页，确立网站结构网页居中处理，页面设置用CSS设置网页背景能将图形设置为单元格背景会在单元格中按要求嵌套插入表格第四讲站点处理与网页修改（2学时）4.1Fireworks文档中网页的导出点击文件菜单→导出项建立合理的站点结构，确定根及子文件夹，分别用来存放各类网页及网页用文件。注意：不要用中文命名文件夹或文件。网页类型改为HTML和图像将图像放入子文件夹选上。点击保存。关闭Fireworks，保存源文件，格式为PNG4.2页面居中及设置处理打开DW，建立站点，注

7、意只需用高级选项选择根文件夹即可。点击修改菜单→页面属性，设置边界为0及编码为简体中文。在标签区找到Table，点击后在属性面板设置居中。4.3网页背景处理用Fireworks制作背景用图形，大小1000×*，两边做成渐变式柱状或花边式。在CSS面板中新建CSS样式，选中重定义HTML标签和仅对该文档，选择Body。修改背景图形及有关设置。在1024×768下浏览效果4.4单元格背景图形处理技巧选中单元格中的图片，在属性面板中复制路径。删除图片引用。在属性面板中的背景图像框中粘贴路径。原单元格中即可放入其它网页元素，如文字、动画等。4.5